Elementor #799 – roadlineolution.online

<!doctype html>
<html lang=”hi”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title>Transport Directory — खोज और सूची (20 प्रति पेज)</title>
<style>
/* बेसिक स्टाइल — साफ, रेस्पॉन्सिव कार्ड लेआउट */
:root{
–bg:#f6f8fb;
–card:#ffffff;
–muted:#6b7280;
–accent:#0f172a;
–primary:#1f6feb;
–success:#10b981;
–danger:#ef4444;
font-family: “Inter”, “Segoe UI”, Roboto, Arial, sans-serif;
}
html,body{
height:100%;
margin:0;
background:var(–bg);
color:var(–accent);
}
.wrap{
max-width:1100px;
margin:28px auto;
padding:20px;
}
header{
display:flex;
gap:16px;
align-items:center;
justify-content:space-between;
margin-bottom:18px;
}
h1{
font-size:20px;
margin:0;
letter-spacing:0.2px;
}
.search-area{
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap;
}
.search-box{
display:flex;
gap:8px;
align-items:center;
background:var(–card);
padding:8px;
border-radius:8px;
box-shadow:0 1px 3px rgba(12,20,32,0.05);
}
input[type=”search”]{
border:0;
outline:0;
font-size:15px;
padding:8px 6px;
min-width:260px;
background:transparent;
}
button{
background:var(–primary);
color:#fff;
border:0;
padding:8px 12px;
border-radius:6px;
cursor:pointer;
font-weight:600;
}
button:disabled{
opacity:0.5;
cursor:not-allowed;
}
.meta{
color:var(–muted);
font-size:13px;
}

/* सूची कार्ड्स */
.list{
margin-top:14px;
display:grid;
gap:12px;
}
.card{
background:var(–card);
border-radius:10px;
padding:12px;
box-shadow:0 6px 18px rgba(12,20,32,0.04);
display:grid;
grid-template-columns: 60px 1fr 220px;
gap:10px;
align-items:center;
}
.sr{
font-weight:700;
font-size:18px;
color:var(–primary);
text-align:center;
}
.main{
display:flex;
flex-direction:column;
gap:6px;
}
.row{
display:flex;
gap:12px;
flex-wrap:wrap;
font-size:14px;
color:var(–accent);
}
.small{
color:var(–muted);
font-size:13px;
}
.actions{
display:flex;
gap:8px;
align-items:center;
justify-content:flex-end;
}
.map-link{
border:1px solid rgba(31,111,235,0.12);
background:transparent;
padding:8px 10px;
border-radius:8px;
cursor:pointer;
text-decoration:none;
color:var(–primary);
font-weight:600;
font-size:13px;
}
.mobile{
font-weight:700;
color:var(–accent);
}

/* पेज नेविगेशन */
.pager{
display:flex;
gap:8px;
align-items:center;
justify-content:center;
margin-top:18px;
}
.page-indicator{
font-size:14px;
color:var(–muted);
padding:10px 14px;
background:var(–card);
border-radius:10px;
box-shadow:0 2px 6px rgba(12,20,32,0.03);
}

/* खाली परिणाम */
.empty{
text-align:center;
padding:36px;
color:var(–muted);
background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
border-radius:10px;
font-size:15px;
}

/* मोबाइल */
@media (max-width:880px){
.card{
grid-template-columns: 48px 1fr;
}
.actions{
grid-column:1 / -1;
justify-content:flex-start;
}
header{
flex-direction:column;
align-items:flex-start;
gap:12px;
}
.search-box { width:100%; justify-content:space-between; }
input[type=”search”]{ min-width:120px; flex:1; }
}
</style>
</head>
<body>
<div class=”wrap”>
<header>
<div>
<h1>Transport Directory</h1>
<div class=”meta”>20 रिकॉर्ड प्रति पेज — Station नाम में सर्च करें</div>
</div>

<div class=”search-area”>
<div class=”search-box” role=”search” aria-label=”Station search”>
<!– खोज इनपुट — केवल Station में सर्च करेगा –>
<input id=”searchInput” type=”search” placeholder=”Station नाम टाइप करें और Enter दबाएँ…” aria-label=”Search by station name”/>
<button id=”clearBtn” title=”साफ करें”>Clear</button>
</div>
<div style=”display:flex;gap:8px;align-items:center”>
<div class=”meta” id=”resultInfo”>कुल रिकॉर्ड: 0</div>
</div>
</div>
</header>

<!– सूची प्रदर्शित करने का स्थान –>
<main>
<section id=”listContainer” class=”list” aria-live=”polite”></section>

<!– खाली होने का मैसेज –>
<div id=”emptyMsg” class=”empty” style=”display:none;”>
कोई परिणाम नहीं मिला — Station नाम बदलकर देखें या सर्च रीसेट करें।
</div>

<!– पेज नेविगेशन –>
<div class=”pager” style=”margin-top:18px;”>
<button id=”prevBtn”>Previous</button>
<div class=”page-indicator” id=”pageIndicator”>Page 1 of 1</div>
<button id=”nextBtn”>Next</button>
</div>
</main>
</div>

// सेटिंग्स
const PER_PAGE = 20; // 20 रिकॉर्ड प्रति पेज — आपकी रिक्वायरमेंट
let currentPage = 1;
let filtered = transports.slice(); // फिल्टर्ड व्यू
const listContainer = document.getElementById(‘listContainer’);
const pageIndicator = document.getElementById(‘pageIndicator’);
const prevBtn = document.getElementById(‘prevBtn’);
const nextBtn = document.getElementById(‘nextBtn’);
const searchInput = document.getElementById(‘searchInput’);
const clearBtn = document.getElementById(‘clearBtn’);
const resultInfo = document.getElementById(‘resultInfo’);
const emptyMsg = document.getElementById(’emptyMsg’);

// प्रारंभिक रेंडर
updateResultInfo();
renderList();

// ईवेंट्स
prevBtn.addEventListener(‘click’, () => {
if (currentPage > 1) {
currentPage–;
renderList();
}
});
nextBtn.addEventListener(‘click’, () => {
const maxPage = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
if (currentPage < maxPage) {
currentPage++;
renderList();
}
});

// सर्च: केवल station फ़ील्ड में देखता है
searchInput.addEventListener(‘input’, (e) => {
// हम live search रखना चाहते हैं, लेकिन user ने “Enter” का ज़िक्र किया था।
// यहाँ पर input के साथ ही फ़िल्टर कर रहें हैं — अगर आप चाहते हैं कि सिर्फ Enter पर चले, तब replace करने को कहें।
const q = e.target.value.trim().toLowerCase();
applySearch(q);
});

// क्लियर बटन
clearBtn.addEventListener(‘click’, () => {
searchInput.value = ”;
applySearch(”);
});

// सर्च लागू करने का फ़ंक्शन (सिर्फ station में खोज)
function applySearch(query){
if (!query){
filtered = transports.slice();
} else {
filtered = transports.filter(item => {
// सिर्फ station नाम में सर्च करें
return item.station.toLowerCase().includes(query);
});
}
currentPage = 1; // रिज़ल्ट बदलते ही पेज 1 पर वापस जाएं
updateResultInfo();
renderList();
}

// रिज़ल्ट की जानकारी अपडेट करो
function updateResultInfo(){
resultInfo.textContent = `कुल रिकॉर्ड: ${filtered.length}`;
}

// सूची रेंडर करने वाला मुख्य फ़ंक्शन
function renderList(){
listContainer.innerHTML = ”;

const total = filtered.length;
const maxPage = Math.max(1, Math.ceil(total / PER_PAGE));
if (currentPage > maxPage) currentPage = maxPage;

const start = (currentPage – 1) * PER_PAGE;
const end = Math.min(start + PER_PAGE, total);

// पेज इंडिकेटर
pageIndicator.textContent = `Page ${currentPage} of ${maxPage}`;

// नेविगेशन बटन स्टेट
prevBtn.disabled = currentPage <= 1;
nextBtn.disabled = currentPage >= maxPage;

if (total === 0){
emptyMsg.style.display = ‘block’;
return;
} else {
emptyMsg.style.display = ‘none’;
}

// दिखाने वाले आइटम्स
const pageItems = filtered.slice(start, end);

// ग्लोबल सीरियल — filtered के context में मिसाल: यदि original order important हो तो बदल सकते हैं
for (let i = 0; i < pageItems.length; i++){
const item = pageItems[i];
const globalIndex = start + i + 1; // Sr No (1-based across filtered list)
const card = createCard(item, globalIndex);
listContainer.appendChild(card);
}
}

// एक कार्ड DOM बनाओ
function createCard(item, sr){
const el = document.createElement(‘article’);
el.className = ‘card’;
el.setAttribute(‘tabindex’,’0′);

// Sr column
const srDiv = document.createElement(‘div’);
srDiv.className = ‘sr’;
srDiv.textContent = sr;
el.appendChild(srDiv);

// मुख्य विवरण
const main = document.createElement(‘div’);
main.className = ‘main’;

// पहली लाइन: Transport Name (बड़ा), Person Name
const line1 = document.createElement(‘div’);
line1.className = ‘row’;
const tName = document.createElement(‘div’);
tName.innerHTML = `<strong>${escapeHtml(item.transportName)}</strong>`;
const pName = document.createElement(‘div’);
pName.className = ‘small’;
pName.textContent = `Contact Person: ${item.personName}`;
line1.appendChild(tName);
line1.appendChild(pName);

// दूसरी लाइन: Station और Mobile
const line2 = document.createElement(‘div’);
line2.className = ‘row’;
const station = document.createElement(‘div’);
station.innerHTML = `<span style=”font-weight:600″>${escapeHtml(item.station)}</span>`;
const mobile = document.createElement(‘div’);
mobile.className = ‘mobile’;
mobile.textContent = item.mobile;
line2.appendChild(station);
line2.appendChild(mobile);

// तीसरी लाइन: Address
const line3 = document.createElement(‘div’);
line3.className = ‘row’;
const addr = document.createElement(‘div’);
addr.className = ‘small’;
addr.textContent = item.address;
line3.appendChild(addr);

main.appendChild(line1);
main.appendChild(line2);
main.appendChild(line3);

el.appendChild(main);

// actions column (map link)
const actions = document.createElement(‘div’);
actions.className = ‘actions’;

// Google Maps लिंक (lat,lng) — opens in new tab
const mapLink = document.createElement(‘a’);
mapLink.className = ‘map-link’;
mapLink.setAttribute(‘role’,’link’);
mapLink.setAttribute(‘aria-label’, `Open map for ${item.transportName}`);
mapLink.textContent = ‘Open Map’;
// गूगल मैप्स URL: https://www.google.com/maps?q=lat,lng
mapLink.href = `https://www.google.com/maps?q=${encodeURIComponent(item.lat)},${encodeURIComponent(item.lng)}`;
mapLink.target = ‘_blank’;
mapLink.rel = ‘noopener noreferrer’;

actions.appendChild(mapLink);
el.appendChild(actions);

return el;
}

// HTML एस्केपिंग — सुरक्षा हेतु
function escapeHtml(str){
if (!str && str !== 0) return ”;
return String(str)
.replaceAll(‘&’,’&’)
.replaceAll(‘<‘,’<’)
.replaceAll(‘>’,’>’)
.replaceAll(‘”‘,’"’)
.replaceAll(“‘”,’'’);
}

// Optional: Keyboard shortcuts (Enter clears focus or moves)
// यदि user ने Enter दबाया search में — अगला पेज खुलना चाहिए (यह वैकल्पिक)
searchInput.addEventListener(‘keydown’, (e) => {
if (e.key === ‘Enter’){
// यहाँ हम पहले से ही live-search कर रहे हैं, तो सिर्फ फोकस हटाएँ
e.preventDefault();
// फोकस हटाकर रेंडर पर ध्यान दें
searchInput.blur();
}
});

/***** प्रारूपिक सुधार: पेज लोड पर प्राथमिक स्थिति सुनिश्चित करें *****/
(function ready(){
// सुनिश्चित करें कि currentPage within bounds
const maxPage = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
if (currentPage > maxPage) currentPage = maxPage;
renderList();
})();

/***** नोट्स और आगे के सुझाव (कोड में) *****
* – असली डाटा के लिए transports[] को सर्वर से fetch करके बदलें (AJAX/Fetch).
* – यदि आप चाहते हैं कि सर्च सिर्फ Enter पर हो, तो input -> keydown में Enter पर applySearch(searchInput.value).
* – Map URL आप Place ID या encoded query के रूप में भी दे सकते हैं, यहाँ lat/lng सीधा दिया गया है।
* – आप चाहें तो mobile नंबर पर क्लिक करने पर tel: लिंक जोड़ सकते हैं।
************************************************************/
</script>
</body>
</html>