460 lines
40 KiB
Diff
460 lines
40 KiB
Diff
diff --git a/.tmp/imgdiff/old/index.html b/.tmp/imgdiff/new/index.html
|
|
index 9d9070d..15d3ffb 100644
|
|
--- a/.tmp/imgdiff/old/index.html
|
|
+++ b/.tmp/imgdiff/new/index.html
|
|
@@ -5,24 +5,28 @@
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>NeCloud Weather</title>
|
|
<link rel="manifest" href="/manifest.json">
|
|
-<link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
|
|
-<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
|
+<link rel="apple-touch-icon" href="/icons/icon.svg">
|
|
<meta name="theme-color" content="#f5f2ec" media="(prefers-color-scheme: light)">
|
|
<meta name="theme-color" content="#191510" media="(prefers-color-scheme: dark)">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="NeCloud Weather">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
-<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
-<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
|
-<link rel="stylesheet" href="style.css?v=6">
|
|
+<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
|
|
<header class="masthead">
|
|
<h1>NeCloud Weather</h1>
|
|
+ <nav class="tabs">
|
|
+ <button class="tab active" data-tab="conditions">Conditions</button>
|
|
+ <button class="tab" data-tab="radar-full">Radar</button>
|
|
+ <button class="tab" data-tab="maps">Maps</button>
|
|
+ <button class="tab" data-tab="alerts">Alerts</button>
|
|
+ <button class="tab" data-tab="settings">Settings</button>
|
|
+ </nav>
|
|
<span class="tagline">Open-Meteo ┬╖ RainViewer</span>
|
|
</header>
|
|
|
|
@@ -40,7 +44,13 @@
|
|
|
|
<!-- Loading -->
|
|
<div id="loading" class="loading hidden">
|
|
- <span class="loading-dot"></span>Fetching weather data…
|
|
+ <div class="loading-container">
|
|
+ <div class="loading-icon">🌤️</div>
|
|
+ <div class="loading-text">Fetching weather data…</div>
|
|
+ <div class="loading-dots">
|
|
+ <span></span><span></span><span></span>
|
|
+ </div>
|
|
+ </div>
|
|
</div>
|
|
|
|
<!-- ΓöÇΓöÇ TAB: CONDITIONS ΓöÇΓöÇ -->
|
|
@@ -58,41 +68,126 @@
|
|
</div>
|
|
</div>
|
|
|
|
- <!-- Current hero -->
|
|
- <div class="current-grid">
|
|
- <div class="current-temp">
|
|
- <div class="temp-big"><span id="cur-temp">--</span><span class="deg">┬░F</span></div>
|
|
+ <!-- ΓöÇΓöÇ HERO ΓöÇΓöÇ -->
|
|
+ <div class="hero">
|
|
+ <div class="hero-left">
|
|
+ <div id="cur-icon" class="hero-icon"></div>
|
|
+ <div id="cur-desc" class="hero-desc"></div>
|
|
+ <div id="cur-precip" class="hero-sub"></div>
|
|
+ </div>
|
|
+ <div class="hero-center">
|
|
+ <div class="hero-temp"><span id="cur-temp">--</span><span class="deg">┬░F</span></div>
|
|
<div class="feels">Feels like <span id="cur-feels">--</span>┬░F</div>
|
|
- <div class="hi-lo">Γåæ<span id="cur-hi">--</span>┬░ ┬╖ Γåô<span id="cur-lo">--</span>┬░</div>
|
|
</div>
|
|
- <div class="current-cond">
|
|
- <div id="cur-icon" class="cond-icon"></div>
|
|
- <div id="cur-desc" class="cond-desc"></div>
|
|
- <div id="cur-precip" class="cond-sub"></div>
|
|
+ <div class="hero-right">
|
|
+ <div class="hero-hilo">
|
|
+ <div class="hilo-item">
|
|
+ <span class="hilo-arrow">Γåæ</span>
|
|
+ <span id="cur-hi">--</span>┬░
|
|
+ <div class="hilo-label">High</div>
|
|
+ </div>
|
|
+ <div class="hilo-divider"></div>
|
|
+ <div class="hilo-item">
|
|
+ <span class="hilo-arrow">Γåô</span>
|
|
+ <span id="cur-lo">--</span>┬░
|
|
+ <div class="hilo-label">Low</div>
|
|
+ </div>
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
- <!-- Stats -->
|
|
- <div class="stats-bar">
|
|
- <div class="stat"><div class="stat-label">Humidity</div><div class="stat-val"><span id="cur-hum">--</span><span class="unit">%</span></div></div>
|
|
- <div class="stat"><div class="stat-label">Wind</div><div class="stat-val"><span id="cur-wind">--</span><span class="unit">mph</span></div></div>
|
|
- <div class="stat"><div class="stat-label">Pressure</div><div class="stat-val"><span id="cur-pres">--</span><span class="unit">hPa</span></div></div>
|
|
- <div class="stat"><div class="stat-label">Visibility</div><div class="stat-val"><span id="cur-vis">--</span><span class="unit">mi</span></div></div>
|
|
- <div class="stat"><div class="stat-label">UV Index</div><div class="stat-val"><span id="cur-uv">--</span></div></div>
|
|
- <div class="stat"><div class="stat-label">Cloud Cover</div><div class="stat-val"><span id="cur-cloud">--</span><span class="unit">%</span></div></div>
|
|
+ <!-- ΓöÇΓöÇ SUN & MOON TIMELINE ΓöÇΓöÇ -->
|
|
+ <div class="sun-section">
|
|
+ <div class="sun-timeline-wrap">
|
|
+ <div class="sun-endpoint">
|
|
+ <span class="sun-ep-icon">🌅</span>
|
|
+ <span id="sunrise-val" class="sun-ep-time">--</span>
|
|
+ </div>
|
|
+ <div class="sun-track-wrap">
|
|
+ <div class="sun-track">
|
|
+ <div class="sun-progress" id="sun-progress"></div>
|
|
+ <div class="sun-dot" id="sun-dot">☀️</div>
|
|
+ </div>
|
|
+ </div>
|
|
+ <div class="sun-endpoint">
|
|
+ <span class="sun-ep-icon">🌇</span>
|
|
+ <span id="sunset-val" class="sun-ep-time">--</span>
|
|
+ </div>
|
|
+ </div>
|
|
+ <div class="moon-row">
|
|
+ <span class="moon-emoji">🌙</span>
|
|
+ <span id="moon-phase-val">--</span>
|
|
+ <span class="daylight-info" id="daylight-info">--</span>
|
|
+ </div>
|
|
</div>
|
|
|
|
- <div class="astro-grid">
|
|
- <div class="astro-card"><div class="stat-label">Sunrise</div><div id="sunrise-val" class="astro-val">--</div></div>
|
|
- <div class="astro-card"><div class="stat-label">Sunset</div><div id="sunset-val" class="astro-val">--</div></div>
|
|
- <div class="astro-card"><div class="stat-label">Moon Phase</div><div id="moon-phase-val" class="astro-val">--</div></div>
|
|
+ <!-- ΓöÇΓöÇ WIND & ATMOSPHERE ΓöÇΓöÇ -->
|
|
+ <div class="section-head">
|
|
+ <span class="section-label">Wind & Atmosphere</span>
|
|
+ </div>
|
|
+ <div class="card-group">
|
|
+ <div class="stat-card">
|
|
+ <div class="stat-label">Wind</div>
|
|
+ <div class="stat-val"><span id="cur-wind">--</span> <span class="stat-unit wind-unit">mph</span></div>
|
|
+ <div class="stat-sub" id="cur-wind-dir">--</div>
|
|
+ </div>
|
|
+ <div class="stat-card">
|
|
+ <div class="stat-label">Gusts</div>
|
|
+ <div class="stat-val"><span id="cur-gust">--</span> <span class="stat-unit gust-unit">mph</span></div>
|
|
+ </div>
|
|
+ <div class="stat-card">
|
|
+ <div class="stat-label">Humidity</div>
|
|
+ <div class="stat-val"><span id="cur-hum">--</span><span class="stat-unit">%</span></div>
|
|
+ <div class="stat-sub" id="hum-feel"></div>
|
|
+ </div>
|
|
+ <div class="stat-card">
|
|
+ <div class="stat-label">Dewpoint</div>
|
|
+ <div class="stat-val"><span id="cur-dew">--</span>┬░</div>
|
|
+ </div>
|
|
+ <div class="stat-card">
|
|
+ <div class="stat-label">Pressure</div>
|
|
+ <div class="stat-val"><span id="cur-pres">--</span> <span class="stat-unit">hPa</span></div>
|
|
+ </div>
|
|
+ <div class="stat-card">
|
|
+ <div class="stat-label">Visibility</div>
|
|
+ <div class="stat-val"><span id="cur-vis">--</span> <span class="stat-unit vis-unit">mi</span></div>
|
|
+ </div>
|
|
</div>
|
|
|
|
- <div class="aq-grid">
|
|
- <div class="aq-card"><div class="stat-label">US AQI</div><div id="aqi-us" class="aq-val">--</div></div>
|
|
- <div class="aq-card"><div class="stat-label">PM2.5</div><div id="pm25" class="aq-val">--</div></div>
|
|
- <div class="aq-card"><div class="stat-label">Pollen</div><div id="pollen" class="aq-val">--</div></div>
|
|
+ <!-- ΓöÇΓöÇ MORE DETAILS DRAWER ΓöÇΓöÇ -->
|
|
+ <details class="details-drawer">
|
|
+ <summary class="drawer-summary">More Details <span class="drawer-chevron">›</span></summary>
|
|
+ <div class="drawer-body">
|
|
+ <div class="card-group drawer-card-group">
|
|
+ <div class="stat-card">
|
|
+ <div class="stat-label">UV Index</div>
|
|
+ <div class="stat-val"><span id="cur-uv">--</span></div>
|
|
+ </div>
|
|
+ <div class="stat-card">
|
|
+ <div class="stat-label">Cloud Cover</div>
|
|
+ <div class="stat-val"><span id="cur-cloud">--</span><span class="stat-unit">%</span></div>
|
|
+ </div>
|
|
+ <div class="stat-card">
|
|
+ <div class="stat-label">US AQI</div>
|
|
+ <div class="stat-val"><span id="aqi-us">--</span></div>
|
|
+ </div>
|
|
+ <div class="stat-card">
|
|
+ <div class="stat-label">PM2.5</div>
|
|
+ <div class="stat-val"><span id="pm25">--</span></div>
|
|
+ </div>
|
|
+ <div class="stat-card">
|
|
+ <div class="stat-label">Pollen</div>
|
|
+ <div class="stat-val"><span id="pollen">--</span></div>
|
|
+ </div>
|
|
+ </div>
|
|
+ </div>
|
|
+ </details>
|
|
+
|
|
+ <!-- ΓöÇΓöÇ WHAT TO BRING ΓöÇΓöÇ -->
|
|
+ <div class="section-head" style="margin-top:1.5rem">
|
|
+ <span class="section-label">What to Bring</span>
|
|
</div>
|
|
+ <div id="recommendations" class="recs-grid"></div>
|
|
|
|
<!-- Embedded radar panel -->
|
|
<div class="section-head">
|
|
@@ -116,7 +211,6 @@
|
|
<span class="section-label">Hourly Forecast</span>
|
|
<span class="section-note">next 24 hours</span>
|
|
</div>
|
|
- <p id="hourly-summary" class="hourly-summary">--</p>
|
|
<div id="hourly-scroll" class="hourly-scroll">
|
|
<div id="hourly-track" class="hourly-track"></div>
|
|
</div>
|
|
@@ -124,9 +218,7 @@
|
|
<!-- 7-day -->
|
|
<div class="section-head">
|
|
<span id="daily-forecast-label" class="section-label">7-Day Forecast</span>
|
|
- <span class="section-note">
|
|
- <button id="daily-forecast-toggle" class="link-btn hidden" type="button">Show full forecast</button>
|
|
- </span>
|
|
+ <button id="daily-toggle-btn" class="link-btn" type="button">Show 16-day</button>
|
|
</div>
|
|
<div id="daily-list" class="daily-list"></div>
|
|
|
|
@@ -159,43 +251,62 @@
|
|
|
|
<!-- ΓöÇΓöÇ TAB: MAPS ΓöÇΓöÇ -->
|
|
<div id="tab-maps" class="tab-panel hidden">
|
|
- <div class="section-head">
|
|
- <span class="section-label">Maps</span>
|
|
- <span class="section-actions">
|
|
- <button id="maps-fullscreen-btn" class="link-btn" type="button">Fullscreen map</button>
|
|
- </span>
|
|
- </div>
|
|
<div class="maps-wrap">
|
|
+ <div class="maps-header">
|
|
+ <h3>Live Weather Overlays</h3>
|
|
+ <div class="maps-quick-toggles">
|
|
+ <button id="maps-lightning-toggle" class="overlay-toggle lightning-btn" title="Toggle lightning strikes">ΓÜí Lightning</button>
|
|
+ <button id="maps-wind-toggle" class="overlay-toggle wind-btn active" title="Toggle wind overlay">💨 Wind</button>
|
|
+ </div>
|
|
+ </div>
|
|
+
|
|
<div id="map-overview" class="radar-map map-overview"></div>
|
|
- <div class="maps-controls">
|
|
- <label class="maps-control">
|
|
- <span>Radar opacity</span>
|
|
- <input id="radar-opacity" type="range" min="15" max="90" step="5" value="65">
|
|
- </label>
|
|
- <label class="maps-control">
|
|
- <span>Lightning age</span>
|
|
- <select id="lightning-age">
|
|
- <option value="5">Last 5m</option>
|
|
- <option value="15" selected>Last 15m</option>
|
|
- <option value="30">Last 30m</option>
|
|
- </select>
|
|
- </label>
|
|
+
|
|
+ <div class="maps-legend">
|
|
+ <div class="legend-section">
|
|
+ <div class="legend-title">ΓÜí Lightning Strikes</div>
|
|
+ <div class="legend-item">
|
|
+ <svg width="16" height="16" viewBox="0 0 16 16">
|
|
+ <circle cx="8" cy="8" r="5" fill="#ffeb3b" stroke="#ff6f00" stroke-width="1.5"/>
|
|
+ </svg>
|
|
+ <span>Recent strike location</span>
|
|
+ </div>
|
|
+ </div>
|
|
+ <div class="legend-section">
|
|
+ <div class="legend-title">💨 Wind Flow</div>
|
|
+ <div class="legend-item">
|
|
+ <svg width="32" height="16" viewBox="0 0 32 16">
|
|
+ <line x1="2" y1="8" x2="24" y2="8" stroke="#4a90e2" stroke-width="2"/>
|
|
+ <polygon points="24,8 20,5 20,11" fill="#4a90e2"/>
|
|
+ </svg>
|
|
+ <span>Wind direction & speed</span>
|
|
+ </div>
|
|
+ </div>
|
|
</div>
|
|
- <div class="maps-meta">
|
|
+
|
|
+ <div class="maps-data">
|
|
<div class="maps-card">
|
|
- <div class="stat-label">Data Source Location</div>
|
|
+ <div class="card-title">Location</div>
|
|
<div id="maps-location" class="maps-value">--</div>
|
|
</div>
|
|
- <div class="maps-card">
|
|
- <div class="stat-label">Current Wind</div>
|
|
- <div id="maps-wind" class="maps-value">--</div>
|
|
+ <div class="maps-card wind-card">
|
|
+ <div class="card-title">Wind Data</div>
|
|
+ <div class="wind-stats">
|
|
+ <div class="wind-stat">
|
|
+ <span class="stat-label">Speed</span>
|
|
+ <span id="wind-speed" class="stat-value">--</span>
|
|
+ </div>
|
|
+ <div class="wind-stat">
|
|
+ <span class="stat-label">Gust</span>
|
|
+ <span id="wind-gust" class="stat-value">--</span>
|
|
+ </div>
|
|
+ <div class="wind-stat">
|
|
+ <span class="stat-label">Direction</span>
|
|
+ <span id="wind-direction" class="stat-value">--</span>
|
|
+ </div>
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div class="wind-legend" aria-hidden="true">
|
|
- <span>Wind legend</span>
|
|
- <div class="wind-legend-scale"><i></i></div>
|
|
- </div>
|
|
- <p class="panel-note">Toggle lightning strikes and wind overlay in Settings. Lightning overlay uses active thunderstorm alert geometry.</p>
|
|
</div>
|
|
</div>
|
|
|
|
@@ -204,10 +315,7 @@
|
|
<div id="alerts-wrap" class="alerts-wrap hidden">
|
|
<div class="section-head">
|
|
<span class="section-label">Weather Alerts</span>
|
|
- <span class="section-actions">
|
|
- <button id="notify-btn" class="link-btn" type="button">Enable notifications</button>
|
|
- <button id="push-test-btn" class="link-btn" type="button">Send test push</button>
|
|
- </span>
|
|
+ <button id="notify-btn" class="link-btn" type="button">Enable notifications</button>
|
|
</div>
|
|
<div id="alerts-list" class="alerts-list"></div>
|
|
</div>
|
|
@@ -222,15 +330,14 @@
|
|
<span>Saved locations</span>
|
|
<button id="save-current-btn" class="link-btn" type="button">Save current</button>
|
|
</div>
|
|
- <p class="saved-help">Use star for default, arrows to reorder.</p>
|
|
<div id="saved-locations" class="saved-locations"></div>
|
|
</div>
|
|
|
|
<div class="settings-row">
|
|
<span class="settings-label">Auto-detect location on startup</span>
|
|
- <label class="auto-detect-toggle" for="auto-detect-toggle">
|
|
+ <label class="switch-toggle">
|
|
<input id="auto-detect-toggle" type="checkbox" checked>
|
|
- <span>Enabled</span>
|
|
+ <span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
@@ -239,11 +346,6 @@
|
|
<span id="settings-location" class="settings-value">--</span>
|
|
</div>
|
|
|
|
- <div class="settings-row">
|
|
- <span class="settings-label">Default city</span>
|
|
- <span id="default-city" class="settings-value">None</span>
|
|
- </div>
|
|
-
|
|
<div class="settings-row">
|
|
<span class="settings-label">Units</span>
|
|
<button id="units-btn-settings" class="settings-btn" type="button">US</button>
|
|
@@ -251,71 +353,52 @@
|
|
|
|
<div class="settings-row">
|
|
<span class="settings-label">Lightning strikes on map</span>
|
|
- <label class="toggle-label" for="lightning-toggle">
|
|
+ <label class="switch-toggle">
|
|
<input id="lightning-toggle" type="checkbox">
|
|
- <span id="lightning-status">Off</span>
|
|
+ <span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="settings-row">
|
|
<span class="settings-label">Wind overlay on map</span>
|
|
- <label class="toggle-label" for="wind-toggle">
|
|
+ <label class="switch-toggle">
|
|
<input id="wind-toggle" type="checkbox">
|
|
- <span id="wind-status">Off</span>
|
|
- </label>
|
|
- </div>
|
|
-
|
|
- <div class="settings-row">
|
|
- <span class="settings-label">High contrast mode</span>
|
|
- <label class="toggle-label" for="contrast-toggle">
|
|
- <input id="contrast-toggle" type="checkbox">
|
|
- <span id="contrast-status">Off</span>
|
|
+ <span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
- <nav class="tabs" aria-label="Primary navigation">
|
|
- <button class="tab active" data-tab="conditions" aria-label="Conditions">
|
|
- <span class="tab-icon" aria-hidden="true">🌤</span>
|
|
- <span class="tab-text">Now</span>
|
|
- </button>
|
|
- <button class="tab" data-tab="radar-full" aria-label="Radar">
|
|
- <span class="tab-icon" aria-hidden="true">🛰</span>
|
|
- <span class="tab-text">Radar</span>
|
|
- </button>
|
|
- <button class="tab" data-tab="maps" aria-label="Maps">
|
|
- <span class="tab-icon" aria-hidden="true">🗺</span>
|
|
- <span class="tab-text">Maps</span>
|
|
- </button>
|
|
- <button class="tab" data-tab="alerts" aria-label="Alerts">
|
|
- <span class="tab-icon" aria-hidden="true">⚠️</span>
|
|
- <span class="tab-text">Alerts</span>
|
|
- </button>
|
|
- <button class="tab" data-tab="settings" aria-label="Settings">
|
|
- <span class="tab-icon" aria-hidden="true">⚙️</span>
|
|
- <span class="tab-text">Settings</span>
|
|
- </button>
|
|
- </nav>
|
|
-
|
|
</div><!-- .app -->
|
|
|
|
+<nav class="bottom-nav" aria-label="Mobile navigation">
|
|
+ <button class="bottom-tab active" data-tab="conditions" type="button">
|
|
+ <span class="bottom-icon">⛅</span>
|
|
+ <span class="bottom-label">Now</span>
|
|
+ </button>
|
|
+ <button class="bottom-tab" data-tab="radar-full" type="button">
|
|
+ <span class="bottom-icon">📡</span>
|
|
+ <span class="bottom-label">Radar</span>
|
|
+ </button>
|
|
+ <button class="bottom-tab" data-tab="maps" type="button">
|
|
+ <span class="bottom-icon">🗺️</span>
|
|
+ <span class="bottom-label">Maps</span>
|
|
+ </button>
|
|
+ <button class="bottom-tab" data-tab="alerts" type="button">
|
|
+ <span class="bottom-icon">⚠️</span>
|
|
+ <span class="bottom-label">Alerts</span>
|
|
+ </button>
|
|
+ <button class="bottom-tab" data-tab="settings" type="button">
|
|
+ <span class="bottom-icon">⚙️</span>
|
|
+ <span class="bottom-label">Settings</span>
|
|
+ </button>
|
|
+</nav>
|
|
+
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
-<script src="app.js?v=4"></script>
|
|
+<script src="app.js"></script>
|
|
<script>
|
|
if ('serviceWorker' in navigator) {
|
|
- window.addEventListener('load', () => {
|
|
- navigator.serviceWorker.register('/sw.js').then(reg => {
|
|
- reg.update().catch(() => {});
|
|
- });
|
|
-
|
|
- let refreshing = false;
|
|
- navigator.serviceWorker.addEventListener('controllerchange', () => {
|
|
- if (refreshing) return;
|
|
- refreshing = true;
|
|
- window.location.reload();
|
|
- });
|
|
- });
|
|
+ navigator.serviceWorker.register('/sw.js');
|
|
}
|
|
</script>
|
|
</body>
|