find a market
This commit is contained in:
Creat0r
195
supermarket-finder/index.html
Normal file
195
supermarket-finder/index.html
Normal file
@ -0,0 +1,195 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user