196 lines
5.3 KiB
HTML
196 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Nearest Supermarket — Modern</title>
|
|
|
|
<!-- Inter font (modern) -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
|
|
|
<style>
|
|
:root{
|
|
--bg: #ffffff;
|
|
--card: #ffffff;
|
|
--text: #0f1724;
|
|
--muted: #6b7280;
|
|
--blue: #0b54a0; /* darker blue for Light mode */
|
|
--blue-accent: #0b54a0;
|
|
--success: #16a34a;
|
|
--radius: 14px;
|
|
--glass: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
/* Dark theme variables (apply via [data-theme="dark"]) */
|
|
:root[data-theme="dark"]{
|
|
--bg: #000000;
|
|
--card: #0b0b0c;
|
|
--text: #ffffff;
|
|
--muted: #9ca3af;
|
|
--blue: #59b7ff; /* lighter blue for Dark mode */
|
|
--blue-accent: #59b7ff;
|
|
--glass: rgba(255,255,255,0.04);
|
|
}
|
|
|
|
html,body{
|
|
height:100%;
|
|
margin:0;
|
|
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
|
background: linear-gradient(180deg, var(--bg), var(--bg));
|
|
color: var(--text);
|
|
-webkit-font-smoothing:antialiased;
|
|
-moz-osx-font-smoothing:grayscale;
|
|
}
|
|
|
|
header{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:12px;
|
|
padding:14px 18px;
|
|
background: linear-gradient(90deg, var(--blue) 0%, color-mix(in srgb, var(--blue) 60%, black 40%) 100%);
|
|
color:white;
|
|
box-shadow: 0 6px 20px rgba(2,6,23,0.12);
|
|
}
|
|
.brand { font-weight:700; font-size:1.1rem; }
|
|
.subtitle { font-weight:500; opacity:0.92; font-size:0.92rem; }
|
|
|
|
main{
|
|
max-width:880px;
|
|
margin:18px auto;
|
|
padding:12px;
|
|
}
|
|
|
|
.controls {
|
|
display:flex;
|
|
gap:12px;
|
|
align-items:center;
|
|
margin-bottom:12px;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.btn-primary{
|
|
background: var(--blue-accent);
|
|
color: white;
|
|
border: none;
|
|
padding: 14px 18px;
|
|
border-radius: 12px;
|
|
font-weight:700;
|
|
font-size:1.02rem;
|
|
cursor:pointer;
|
|
box-shadow: 0 8px 24px color-mix(in srgb, var(--blue-accent) 12%, transparent);
|
|
transition: transform .08s ease, box-shadow .12s ease;
|
|
}
|
|
.btn-primary:active{ transform: translateY(1px); }
|
|
.btn-ghost{
|
|
background: var(--glass);
|
|
border: 1px solid rgba(0,0,0,0.06);
|
|
color: var(--text);
|
|
padding:12px 14px;
|
|
border-radius: 10px;
|
|
cursor:pointer;
|
|
font-weight:600;
|
|
}
|
|
|
|
.theme-toggle {
|
|
margin-left:auto;
|
|
display:flex;
|
|
gap:10px;
|
|
align-items:center;
|
|
}
|
|
|
|
#status {
|
|
margin-top:8px;
|
|
color:var(--muted);
|
|
font-size:0.96rem;
|
|
min-height:1.2rem;
|
|
}
|
|
|
|
.layout {
|
|
display:grid;
|
|
grid-template-columns: 1fr 420px;
|
|
gap:16px;
|
|
}
|
|
@media(max-width:980px){
|
|
.layout { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border-radius: var(--radius);
|
|
padding:14px;
|
|
box-shadow: 0 6px 24px rgba(2,6,23,0.06);
|
|
}
|
|
|
|
#output {
|
|
min-height:140px;
|
|
}
|
|
|
|
h1.result-title { margin:0; font-size:1.15rem; font-weight:700; color:var(--text); }
|
|
.distance { font-size:1.05rem; font-weight:700; margin-top:6px; color:var(--muted); }
|
|
.actions { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
|
|
|
|
.big-link {
|
|
background:var(--blue);
|
|
color:white;
|
|
padding:10px 14px;
|
|
border-radius:10px;
|
|
text-decoration:none;
|
|
font-weight:700;
|
|
display:inline-block;
|
|
}
|
|
|
|
#map { height:520px; border-radius:12px; overflow:hidden; }
|
|
|
|
ol.results-list { margin:12px 0 0 18px; padding:0; color:var(--muted); }
|
|
ol.results-list li { margin:8px 0; }
|
|
|
|
footer { text-align:center; color:var(--muted); margin-top:18px; font-size:0.9rem; }
|
|
|
|
/* little accessibility */
|
|
.sr-only { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div>
|
|
<div class="brand">Nearest Supermarket</div>
|
|
<div class="subtitle">Find the closest grocery — fast & offline-friendly</div>
|
|
</div>
|
|
|
|
<div class="theme-toggle">
|
|
<label for="themeSwitch" style="font-weight:600;color:rgba(255,255,255,0.9);margin-right:8px">Dark</label>
|
|
<input id="themeSwitch" type="checkbox" aria-label="Toggle dark mode" />
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="controls">
|
|
<button id="findBtn" class="btn-primary" aria-live="polite">🔍 Find nearest supermarket</button>
|
|
<button id="resetBtn" class="btn-ghost">↺ Reset</button>
|
|
<div id="status" aria-live="polite">Tap "Find" and allow location access.</div>
|
|
</div>
|
|
|
|
<div class="layout">
|
|
<div class="card" id="leftCard">
|
|
<div id="output" aria-live="polite" class="card" style="padding:12px;"></div>
|
|
</div>
|
|
|
|
<div class="card" id="rightCard">
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>Data from OpenStreetMap • Uses Overpass API • Works fully in your browser</footer>
|
|
</main>
|
|
|
|
<!-- Leaflet -->
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<!-- App -->
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|