weather/index.html at main · caliduke/weather · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>DukeCast Weather</title>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="./style.css">
    <link rel="manifest" href="./manifest.json">

    <meta name="theme-color" content="#1e3c72">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="apple-touch-icon" href="./icon-192.png">
</head>
<body>
    <div class="app-container">
        <h1>DukeCast</h1>

        <div class="search-box">
            <input type="text" id="cityInput" placeholder="City name..." autocomplete="off" aria-label="City Name">
            <button id="searchBtn" class="icon-btn">Search</button>
            <button id="locationBtn" class="icon-btn" title="Use GPS">📍</button>
        </div>

        <div class="unit-toggle">
            <span id="cUnit" class="unit active">°C</span>
            <div class="toggle-switch" id="unitSwitch">
                <div class="switch-handle"></div>
            </div>
            <span id="fUnit" class="unit">°F</span>
        </div>

        <div id="weatherDisplay" class="weather-card">
            <p style="color: rgba(255,255,255,0.4); margin-top: 20px;">Enter a city to begin.</p>
        </div>
    </div>

    <script src="./app.js"></script>

    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('./sw.js', { scope: './' })
                    .then(reg => {
                        console.log('DukeCast PWA: Service Worker Active');

                        // Handle Service Worker updates
                        reg.onupdatefound = () => {
                            const installingWorker = reg.installing;
                            installingWorker.onstatechange = () => {
                                if (installingWorker.state === 'installed' && navigator.serviceWorker.controller) {
                                    console.log('New DukeCast version available. Refreshing...');
                                    window.location.reload();
                                }
                            };
                        };
                    })
                    .catch(err => console.error('PWA Registration Error:', err));
            });
        }
    </script>
</body>
</html>