/
/
home
/
u523034047
/
domains
/
thearchindia.com
/
public_html
Server: in-mum-web1112.main-hosting.eu (62.72.28.111)
You: 216.73.216.60
PHP 8.3.16
Dir:
/home/u523034047/domains/thearchindia.com/public_html
Edit:
/home/u523034047/domains/thearchindia.com/public_html/location.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Our Locations – Map + List</title> <!-- Leaflet --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <!-- (Optional) Font Awesome for small icons in the list --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/> <style> :root{ --brand:#c8102e; /* red accent */ } body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif} .wrap{max-width:1200px;margin:auto;padding:24px} .grid{ display:grid;gap:24px; grid-template-columns: 1.2fr 0.8fr; /* map bigger */ } #map{width:100%;height:620px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08)} .panel{ border:1px solid #eee;border-radius:16px;padding:18px 18px 6px; box-shadow:0 8px 24px rgba(0,0,0,.04) } .panel h2{margin:0 0 10px;font-size:22px;letter-spacing:.2px} .region{margin:14px 0} .region-title{font-weight:800;margin:8px 0 6px;text-transform:uppercase;color:#333} .city-list{list-style:none;padding:0;margin:0 0 8px 0} .city-list li{margin:6px 0} .city{ display:inline-flex;align-items:center;gap:8px; text-decoration:none;color:#343a40;padding:4px 6px;border-radius:8px } .city i{color:var(--brand);font-size:14px} .city:hover{background:#fafafa} .muted{color:#6c757d;font-size:12px;margin-left:2px} /* Mobile */ @media (max-width: 992px){ .grid{grid-template-columns:1fr} #map{height:420px} } /* Leaflet label style (permanent tooltips) */ .leaflet-tooltip.city-label{ background:#ffffff;border:1px solid rgba(0,0,0,.15);color:#111; border-radius:8px;padding:4px 8px;box-shadow:0 4px 12px rgba(0,0,0,.08); font-weight:600 } </style> </head> <body> <div class="wrap"> <h1 style="margin:0 0 18px">Our Locations</h1> <div class="grid"> <!-- Left: MAP --> <div id="map"></div> <!-- Right: LIST --> <aside class="panel" id="locationList"> <h2><i class="fa-solid fa-location-dot" style="color:var(--brand)"></i> Locations</h2> <!-- 1. DELHI-NCR --> <div class="region" data-region="DELHI-NCR"> <div class="region-title">1. DELHI-NCR</div> <ul class="city-list"> <li><a class="city" href="#" data-lat="28.6139" data-lng="77.2090" data-name="Delhi-NCR"> <i class="fa-solid fa-location-dot"></i> Delhi-NCR </a></li> <li><a class="city" href="#" data-lat="28.4595" data-lng="77.0266" data-name="Gurugram"> <i class="fa-solid fa-location-dot"></i> Gurugram <span class="muted">(NCR)</span> </a></li> <li><a class="city" href="#" data-lat="28.6692" data-lng="77.4538" data-name="Ghaziabad"> <i class="fa-solid fa-location-dot"></i> Ghaziabad <span class="muted">(NCR)</span> </a></li> </ul> </div> <!-- 2. UTTARAKHAND --> <div class="region" data-region="UTTARAKHAND"> <div class="region-title">2. UTTARAKHAND</div> <ul class="city-list"> <li><a class="city" href="#" data-lat="30.3165" data-lng="78.0322" data-name="Dehradun"><i class="fa-solid fa-location-dot"></i> Dehradun</a></li> <li><a class="city" href="#" data-lat="29.9457" data-lng="78.1642" data-name="Haridwar"><i class="fa-solid fa-location-dot"></i> Haridwar</a></li> <li><a class="city" href="#" data-lat="29.8543" data-lng="77.8880" data-name="Roorkee"><i class="fa-solid fa-location-dot"></i> Roorkee</a></li> <li><a class="city" href="#" data-lat="28.9870" data-lng="79.4140" data-name="Rudrapur"><i class="fa-solid fa-location-dot"></i> Rudrapur</a></li> <li><a class="city" href="#" data-lat="29.2193" data-lng="79.5120" data-name="Haldwani"><i class="fa-solid fa-location-dot"></i> Haldwani</a></li> </ul> </div> <!-- 3. UTTAR PRADESH --> <div class="region" data-region="UTTAR PRADESH"> <div class="region-title">3. UTTAR PRADESH</div> <ul class="city-list"> <li><a class="city" href="#" data-lat="28.8386" data-lng="78.7733" data-name="Moradabad"><i class="fa-solid fa-location-dot"></i> Moradabad</a></li> <li><a class="city" href="#" data-lat="28.3670" data-lng="79.4304" data-name="Bareilly"><i class="fa-solid fa-location-dot"></i> Bareilly</a></li> <li><a class="city" href="#" data-lat="28.7306" data-lng="77.7800" data-name="Hapur"><i class="fa-solid fa-location-dot"></i> Hapur</a></li> <li><a class="city" href="#" data-lat="28.9845" data-lng="77.7064" data-name="Meerut"><i class="fa-solid fa-location-dot"></i> Meerut</a></li> <li><a class="city" href="#" data-lat="29.9679" data-lng="77.5510" data-name="Saharanpur"><i class="fa-solid fa-location-dot"></i> Saharanpur</a></li> <li><a class="city" href="#" data-lat="26.8467" data-lng="80.9462" data-name="Lucknow"><i class="fa-solid fa-location-dot"></i> Lucknow</a></li> </ul> </div> <!-- 4. HARYANA --> <div class="region" data-region="HARYANA"> <div class="region-title">4. HARYANA</div> <ul class="city-list"> <li><a class="city" href="#" data-lat="29.3909" data-lng="76.9635" data-name="Panipat"><i class="fa-solid fa-location-dot"></i> Panipat</a></li> <li><a class="city" href="#" data-lat="29.6857" data-lng="76.9905" data-name="Karnal"><i class="fa-solid fa-location-dot"></i> Karnal</a></li> <li><a class="city" href="#" data-lat="28.8955" data-lng="76.6066" data-name="Rohtak"><i class="fa-solid fa-location-dot"></i> Rohtak</a></li> <li><a class="city" href="#" data-lat="30.6942" data-lng="76.8606" data-name="Panchkula"><i class="fa-solid fa-location-dot"></i> Panchkula</a></li> </ul> </div> </aside> </div> </div> <script> // Init Map (centered roughly over North India) const map = L.map('map', {scrollWheelZoom: true}).setView([29.5, 78.3], 7); // Basemap (OpenStreetMap) L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map); // Collect list items and create markers const markers = []; document.querySelectorAll('.city').forEach(link => { const lat = +link.dataset.lat, lng = +link.dataset.lng, name = link.dataset.name; // Marker const marker = L.marker([lat, lng]).addTo(map); // Permanent label (tooltip) marker.bindTooltip(name, {permanent: true, direction: 'top', offset: [0,-12], className:'city-label'}).openTooltip(); // Popup (optional) marker.bindPopup(`<strong>${name}</strong>`); // Click on list item -> fly to marker link.addEventListener('click', (e) => { e.preventDefault(); map.flyTo([lat, lng], 11, {duration: 0.8}); marker.openPopup(); }); markers.push(marker); }); // Fit bounds around all markers on load const group = L.featureGroup(markers); map.fitBounds(group.getBounds().pad(0.15)); </script> </body> </html>
Ukuran: 7.2 KB