Skip to content

Commit 6b3bfc6

Browse files
TacticalReaderTacticalReader
authored
Update index.html
1 parent 8c69360 commit 6b3bfc6

1 file changed

Lines changed: 67 additions & 36 deletions

File tree

‎index.html‎

Lines changed: 67 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,27 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>SkyCast Weather</title>
8+
<!-- PWA Manifest & App Icons -->
9+
<link rel="manifest" href="manifest.json">
10+
<meta name="theme-color" content="#06b6d4">
11+
<link rel="apple-touch-icon" href="images/icon-192.png">
12+
713
<link rel="icon" href="images/weather_icons/01d.png" type="image/png">
814
<link rel="stylesheet" href="style.css">
915
<link rel="preconnect" href="https://fonts.googleapis.com">
1016
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Geo:ital@0;1&family=Meow+Script&family=Nova+Round&family=Orbitron:wght@400..900&display=swap" rel="stylesheet">
17+
<link
18+
href="https://fonts.googleapis.com/css2?family=Geo:ital@0;1&family=Meow+Script&family=Nova+Round&family=Orbitron:wght@400..900&display=swap"
19+
rel="stylesheet">
1220
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
1321
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1422
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
1523
</head>
24+
1625
<body>
1726
<!-- Double layer for smooth transitions -->
1827
<div class="parallax-bg active" id="bg-layer-1"></div>
@@ -26,7 +35,7 @@
2635
<span class="material-icons">filter_drama</span>
2736
<h1>SkyCast</h1>
2837
</div>
29-
38+
3039
<div class="header-controls">
3140
<div class="unit-toggle">
3241
<span>°C</span>
@@ -35,11 +44,15 @@ <h1>SkyCast</h1>
3544
<span class="slider round">
3645
<!-- Snowflake Icon (Celsius) -->
3746
<svg class="toggle-icon icon-snowflake" viewBox="0 0 24 24">
38-
<path fill="currentColor" d="M12,2L12,22M2,12L22,12M4.93,4.93L19.07,19.07M4.93,19.07L19.07,4.93" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
47+
<path fill="currentColor"
48+
d="M12,2L12,22M2,12L22,12M4.93,4.93L19.07,19.07M4.93,19.07L19.07,4.93"
49+
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
3950
</svg>
4051
<!-- Sun Icon (Fahrenheit) -->
4152
<svg class="toggle-icon icon-sun" viewBox="0 0 24 24">
42-
<path fill="currentColor" d="M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,2V4M12,20V22M4.93,4.93L6.34,6.34M17.66,17.66L19.07,19.07M2,12H4M20,12H22M4.93,19.07L6.34,17.66M17.66,6.34L19.07,4.93" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
53+
<path fill="currentColor"
54+
d="M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,2V4M12,20V22M4.93,4.93L6.34,6.34M17.66,17.66L19.07,19.07M2,12H4M20,12H22M4.93,19.07L6.34,17.66M17.66,6.34L19.07,4.93"
55+
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
4356
</svg>
4457
</span>
4558
</label>
@@ -51,7 +64,7 @@ <h1>SkyCast</h1>
5164
</div>
5265
</div>
5366
</header>
54-
67+
5568
<div class="search-section">
5669
<div class="search-box">
5770
<div class="search-wrapper">
@@ -61,10 +74,13 @@ <h1>SkyCast</h1>
6174
<button id="search-btn" title="Search">
6275
<!-- SVG for Morphing -->
6376
<svg class="search-icon-svg" viewBox="0 0 24 24" width="24" height="24">
64-
<path id="search-path" fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
77+
<path id="search-path" fill="currentColor"
78+
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
79+
</path>
6580
</svg>
6681
</button>
67-
<button id="location-btn" title="Current Location"><span class="material-icons">my_location</span></button>
82+
<button id="location-btn" title="Current Location"><span
83+
class="material-icons">my_location</span></button>
6884
</div>
6985
<div id="favorites-list" class="favorites-list"></div>
7086
</div>
@@ -97,10 +113,12 @@ <h1>SkyCast</h1>
97113
<div class="main-info">
98114
<div class="city-header">
99115
<h2 id="city-name">City Name</h2>
100-
<img id="country-flag" class="country-flag" src="" alt="Flag" style="display: none;">
101-
<button id="fav-btn" class="material-icons fav-btn" title="Add to Favorites">favorite_border</button>
116+
<img id="country-flag" class="country-flag" src="" alt="Flag"
117+
style="display: none;">
118+
<button id="fav-btn" class="material-icons fav-btn"
119+
title="Add to Favorites">favorite_border</button>
102120
</div>
103-
121+
104122
<!-- Date and Time Display -->
105123
<div class="date-time-info">
106124
<p id="current-date"></p>
@@ -210,10 +228,10 @@ <h3>Air Quality</h3>
210228
</div>
211229
</div>
212230
</div>
213-
</div>
214-
<div id="hazard-container" class="hazard-container" style="display: none;"></div>
215-
<!-- Precipitation Probability Explanation Layer -->
216-
<div id="precip-container" class="precip-container" style="display: none;"></div>
231+
</div>
232+
<div id="hazard-container" class="hazard-container" style="display: none;"></div>
233+
<!-- Precipitation Probability Explanation Layer -->
234+
<div id="precip-container" class="precip-container" style="display: none;"></div>
217235
</div>
218236

219237
<!-- Right Column: Chart & Forecast -->
@@ -260,7 +278,7 @@ <h3>5-Day Forecast</h3>
260278
</div>
261279
</div>
262280
</main>
263-
281+
264282
<div id="error-message" class="error" style="display: none;">
265283
<span class="material-icons">error</span>
266284
<p id="error-text">City not found or location unavailable. Please try again.</p>
@@ -288,7 +306,8 @@ <h3 class="timeline-desktop-title">Development Timeline and Credits</h3>
288306
<span class="node-date">Oct 2023</span>
289307
</button>
290308
<div id="tooltip-1" class="glass-tooltip" role="tooltip">
291-
<strong><span class="material-icons history-icon">rocket_launch</span> V1.0 — Initial Launch</strong>
309+
<strong><span class="material-icons history-icon">rocket_launch</span> V1.0 — Initial
310+
Launch</strong>
292311
<p>SkyCast born. OpenWeather API integrated by TacticalReader.</p>
293312
</div>
294313
</li>
@@ -300,7 +319,8 @@ <h3 class="timeline-desktop-title">Development Timeline and Credits</h3>
300319
<span class="node-date">Dec 2023</span>
301320
</button>
302321
<div id="tooltip-2" class="glass-tooltip" role="tooltip">
303-
<strong><span class="material-icons history-icon">warning_amber</span> Hazard Interpretation Layer</strong>
322+
<strong><span class="material-icons history-icon">warning_amber</span> Hazard
323+
Interpretation Layer</strong>
304324
<p>Dynamic weather hazard alerts and severity indicators added.</p>
305325
</div>
306326
</li>
@@ -312,7 +332,8 @@ <h3 class="timeline-desktop-title">Development Timeline and Credits</h3>
312332
<span class="node-date">Feb 2024</span>
313333
</button>
314334
<div id="tooltip-3" class="glass-tooltip" role="tooltip">
315-
<strong><span class="material-icons history-icon">show_chart</span> Chart.js Data Visualization</strong>
335+
<strong><span class="material-icons history-icon">show_chart</span> Chart.js Data
336+
Visualization</strong>
316337
<p>Interactive temperature, humidity &amp; wind charts integrated.</p>
317338
</div>
318339
</li>
@@ -324,7 +345,8 @@ <h3 class="timeline-desktop-title">Development Timeline and Credits</h3>
324345
<span class="node-date">Apr 2024</span>
325346
</button>
326347
<div id="tooltip-4" class="glass-tooltip" role="tooltip">
327-
<strong><span class="material-icons history-icon">air</span> Air Quality Index (AQI)</strong>
348+
<strong><span class="material-icons history-icon">air</span> Air Quality Index
349+
(AQI)</strong>
328350
<p>Real-time PM2.5, SO2, NO2, O3 &amp; CO monitoring added.</p>
329351
</div>
330352
</li>
@@ -336,7 +358,8 @@ <h3 class="timeline-desktop-title">Development Timeline and Credits</h3>
336358
<span class="node-date">Jun 2024</span>
337359
</button>
338360
<div id="tooltip-5" class="glass-tooltip" role="tooltip">
339-
<strong><span class="material-icons history-icon">cyclone</span> Wind Flow Canvas</strong>
361+
<strong><span class="material-icons history-icon">cyclone</span> Wind Flow
362+
Canvas</strong>
340363
<p>Animated wind particle simulation rendered on HTML Canvas.</p>
341364
</div>
342365
</li>
@@ -348,19 +371,18 @@ <h3 class="timeline-desktop-title">Development Timeline and Credits</h3>
348371
<span class="node-date">Oct 2024</span>
349372
</button>
350373
<div id="tooltip-6" class="glass-tooltip" role="tooltip">
351-
<strong><span class="material-icons history-icon">auto_awesome</span> Premium UI Overhaul</strong>
374+
<strong><span class="material-icons history-icon">auto_awesome</span> Premium UI
375+
Overhaul</strong>
352376
<p>Glassmorphism, icon gradients, night mode &amp; micro-animations.</p>
353377
</div>
354378
</li>
355379

356380
<!-- Live Node: Actively Maintained -->
357381
<li class="timeline-node timeline-node-live" role="listitem">
358-
<a href="https://github.com/TacticalReader"
359-
target="_blank"
360-
rel="noopener noreferrer"
361-
class="node-trigger live-indicator"
362-
aria-label="Actively maintained by TacticalReader on GitHub — click to visit profile"
363-
aria-describedby="tooltip-live">
382+
<a href="https://github.com/TacticalReader" target="_blank" rel="noopener noreferrer"
383+
class="node-trigger live-indicator"
384+
aria-label="Actively maintained by TacticalReader on GitHub — click to visit profile"
385+
aria-describedby="tooltip-live">
364386
<span class="pulse-ring" aria-hidden="true"></span>
365387
<span class="pulse-ring pulse-ring-delay" aria-hidden="true"></span>
366388
<span class="live-dot" aria-hidden="true"></span>
@@ -373,7 +395,8 @@ <h3 class="timeline-desktop-title">Development Timeline and Credits</h3>
373395

374396
</ol>
375397
<div class="timeline-footer">
376-
<p class="timeline-author">Project designed &amp; programmed by <strong>Tanmay Srivastava</strong></p>
398+
<p class="timeline-author">Project designed &amp; programmed by <strong>Tanmay
399+
Srivastava</strong></p>
377400
<p class="timeline-label" aria-hidden="true">Development Timeline &bull; TacticalReader</p>
378401
</div>
379402
</div>
@@ -390,47 +413,53 @@ <h3 class="timeline-desktop-title">Development Timeline and Credits</h3>
390413
<span class="vtl-dot"></span>
391414
<div class="vtl-content">
392415
<span class="vtl-date">Oct 2023</span>
393-
<strong><span class="material-icons history-icon">rocket_launch</span> V1.0 — Initial Launch</strong>
416+
<strong><span class="material-icons history-icon">rocket_launch</span> V1.0 — Initial
417+
Launch</strong>
394418
<p>SkyCast born. OpenWeather API integrated.</p>
395419
</div>
396420
</li>
397421
<li class="vtl-node">
398422
<span class="vtl-dot"></span>
399423
<div class="vtl-content">
400424
<span class="vtl-date">Dec 2023</span>
401-
<strong><span class="material-icons history-icon">warning_amber</span> Hazard Interpretation Layer</strong>
425+
<strong><span class="material-icons history-icon">warning_amber</span> Hazard
426+
Interpretation Layer</strong>
402427
<p>Dynamic weather hazard alerts added.</p>
403428
</div>
404429
</li>
405430
<li class="vtl-node vtl-major">
406431
<span class="vtl-dot"></span>
407432
<div class="vtl-content">
408433
<span class="vtl-date">Feb 2024</span>
409-
<strong><span class="material-icons history-icon">show_chart</span> Chart.js Data Visualization</strong>
434+
<strong><span class="material-icons history-icon">show_chart</span> Chart.js Data
435+
Visualization</strong>
410436
<p>Interactive forecast charts integrated.</p>
411437
</div>
412438
</li>
413439
<li class="vtl-node">
414440
<span class="vtl-dot"></span>
415441
<div class="vtl-content">
416442
<span class="vtl-date">Apr 2024</span>
417-
<strong><span class="material-icons history-icon">air</span> Air Quality Index (AQI)</strong>
443+
<strong><span class="material-icons history-icon">air</span> Air Quality Index
444+
(AQI)</strong>
418445
<p>Real-time air quality monitoring added.</p>
419446
</div>
420447
</li>
421448
<li class="vtl-node vtl-major">
422449
<span class="vtl-dot"></span>
423450
<div class="vtl-content">
424451
<span class="vtl-date">Jun 2024</span>
425-
<strong><span class="material-icons history-icon">cyclone</span> Wind Flow Canvas</strong>
452+
<strong><span class="material-icons history-icon">cyclone</span> Wind Flow
453+
Canvas</strong>
426454
<p>Animated wind particle simulation.</p>
427455
</div>
428456
</li>
429457
<li class="vtl-node">
430458
<span class="vtl-dot"></span>
431459
<div class="vtl-content">
432460
<span class="vtl-date">Oct 2024</span>
433-
<strong><span class="material-icons history-icon">auto_awesome</span> Premium UI Overhaul</strong>
461+
<strong><span class="material-icons history-icon">auto_awesome</span> Premium UI
462+
Overhaul</strong>
434463
<p>Glassmorphism, gradients, night mode.</p>
435464
</div>
436465
</li>
@@ -439,7 +468,8 @@ <h3 class="timeline-desktop-title">Development Timeline and Credits</h3>
439468
<div class="vtl-content">
440469
<span class="vtl-date">Now</span>
441470
<strong>🟢 Actively Maintained</strong>
442-
<p><a href="https://github.com/TacticalReader" target="_blank" rel="noopener noreferrer">TacticalReader</a> (Tanmay Srivastava)</p>
471+
<p><a href="https://github.com/TacticalReader" target="_blank"
472+
rel="noopener noreferrer">TacticalReader</a> (Tanmay Srivastava)</p>
443473
</div>
444474
</li>
445475
</ol>
@@ -455,7 +485,8 @@ <h3 class="timeline-desktop-title">Development Timeline and Credits</h3>
455485
<script src="config.js"></script>
456486
<script src="icons.js"></script>
457487
<script src="particles.js"></script>
458-
488+
459489
<script src="script.js"></script>
460490
</body>
491+
461492
</html>

0 commit comments

Comments
 (0)