<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Noble Sleep – Breathing Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Leaflet CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<style>
html, body {
height: 100%;
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #020617;
color: #e5e7eb;
}
.page {
display: flex;
flex-direction: column;
height: 100%;
}
header {
padding: 16px 20px;
background: rgba(15, 23, 42, 0.96);
border-bottom: 1px solid rgba(148, 163, 184, 0.4);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
header .title-group {
display: flex;
flex-direction: column;
gap: 2px;
}
header h1 {
font-size: 18px;
font-weight: 600;
margin: 0;
}
header p {
margin: 0;
font-size: 13px;
color: #9ca3af;
}
.cta {
font-size: 13px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(96, 165, 250, 0.7);
background: radial-gradient(circle at top left, #38bdf8 0, #1d2433 45%, #020617 100%);
color: #e5e7eb;
cursor: default;
white-space: nowrap;
}
#map {
flex: 1;
width: 100%;
}
.leaflet-popup-content-wrapper {
background: #020617;
color: #e5e7eb;
border-radius: 10px;
border: 1px solid rgba(148, 163, 184, 0.5);
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9);
}
.leaflet-popup-tip {
background: #020617;
}
.popup-title {
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
}
.popup-sub {
font-size: 12px;
color: #9ca3af;
margin: 0;
}
.hint {
position: absolute;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
padding: 6px 12px;
border-radius: 999px;
font-size: 11px;
background: rgba(15, 23, 42, 0.9);
color: #cbd5f5;
border: 1px solid rgba(148, 163, 184, 0.4);
backdrop-filter: blur(12px);
z-index: 1000;
}
@media (max-width: 640px) {
header {
flex-direction: column;
align-items: flex-start;
}
.cta {
align-self: stretch;
text-align: center;
width: 100%;
}
}
</style>
</head>
<body>
<div class="page">
<header>
<div class="title-group">
<h1>Global Breathing Map</h1>
<p>Tap the map where you are and take 3 calm nasal breaths.</p>
</div>
<div class="cta">
Breathe in · Breathe out · Tap the map
</div>
</header>
<div id="map"></div>
<div class="hint">Tip: zoom in and tap to drop your breathing pin ✨</div>
</div>
<!-- Leaflet JS -->
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<script>
// Create the map
const map = L.map("map", {
worldCopyJump: true
}).setView([0, 0], 2);
// Add base map tiles (OpenStreetMap)
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(map);
// When user clicks on the map, drop a marker
function addBreathMarker(latlng) {
const marker = L.marker(latlng).addTo(map);
const { lat, lng } = latlng;
const popupContent = `
<div>
<div class="popup-title">Breathing here ✨</div>
<p class="popup-sub">
${lat.toFixed(2)}°, ${lng.toFixed(2)}°<br />
3 slow nasal breaths for better sleep.
</p>
</div>
`;
marker.bindPopup(popupContent).openPopup();
}
map.on("click", function (e) {
addBreathMarker(e.latlng);
});
// Optional: try to center on the visitor's location
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
map.setView([lat, lng], 6);
},
() => {
// ignore errors, stay on world view
}
);
}
</script>
</body>
</html>