WeatherApplication/index.html at main · devonspr/WeatherApplication · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App - Premium</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- Background Animation Elements -->
    <div class="bg-animation">
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="meteor"></div>
        <div class="meteor"></div>
        <div class="meteor"></div>
    </div>

    <div id="weather-container">
        <div class="app-header">
            <h1>🌙 OhayooOneSann</h1>
            <div class="theme-toggle">
                <span class="toggle-icon">☀️</span>
            </div>
        </div>

        <div class="search-container">
            <input type="text" id="city" placeholder="🔍 Masukan Nama Kota">
            <button onclick="getWeather()" class="search-btn">
                <span class="btn-text">Cari</span>
                <span class="btn-icon">⚡</span>
            </button>
        </div>

        <div class="weather-display">
            <img id="weather-icon" alt="Weather Icon" class="weather-icon">

            <div id="temp-div" class="temperature">
                <p>--°C</p>
            </div>

            <div id="weather-info" class="weather-info">
                <p class="city-name">Informasi</p>
                <p class="weather-desc">Nama Kota</p>
            </div>

            <div class="weather-stats">
                <div class="stat-item">
                    <span class="stat-icon">💧</span>
                    <span class="stat-value">--%</span>
                    <span class="stat-label">Lembab</span>
                </div>
                <div class="stat-item">
                    <span class="stat-icon">💨</span>
                    <span class="stat-value">-- m/s</span>
                    <span class="stat-label">Angin</span>
                </div>
                <div class="stat-item">
                    <span class="stat-icon">🌡️</span>
                    <span class="stat-value">--°C</span>
                    <span class="stat-label">Terasa Seperti</span>
                </div>
            </div>
        </div>

        <div class="hourly-section">
            <h3 id="hourly-heading">24-Jam Cast</h3>
            <div id="hourly-forecast" class="hourly-forecast"></div>
        </div>
    </div>

    <!-- Modal Update -->
    <div id="update-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="header-decoration">
                    <div class="decoration-circle circle-1"></div>
                    <div class="decoration-circle circle-2"></div>
                    <div class="decoration-circle circle-3"></div>
                </div>
                <h2><span class="accent-text">⚡</span> Update Terbaru <span class="accent-text">⚡</span></h2>
                <span class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <div class="update-version">
                    <span class="version-badge">v.gadaversi</span>
                    <span class="update-date">15 Oktober 2023</span>
                </div>

                <div class="feature-highlight">
                    <div class="feature-icon">🌙</div>
                    <div class="feature-text">
                        <h3>Tema Gelap</h3>
                        <p>Pengalaman visual yang lebih elegan dengan tema hitam & emas</p>
                    </div>
                </div>

                <div class="update-features">
                    <h3>Fitur Baru Mendatang :</h3>
                    <ul>
                        <li><span class="feature-icon-small">🌡️</span> Prediksi cuaca 20 Hari Kedepan</li>
                        <li><span class="feature-icon-small">📍</span> Deteksi lokasi otomatis</li>
                        <li><span class="feature-icon-small">📊</span> Penambahan Lokasi</li>
                        <li><span class="feature-icon-small">🎨</span> Tema gelap/terang otomatis</li>
                        <li><span class="feature-icon-small">🔔</span> Gatau Cape</li>
                    </ul>
                </div>

                <div class="update-notes">
                    <h3>Peningkatan:</h3>
                    <ul>
                        <li><span class="improvement-icon">⚡</span> Peningkatan akurasi prediksi hingga 95%</li>
                        <li><span class="improvement-icon">🚀</span> Antarmuka yang lebih responsif</li>
                        <li><span class="improvement-icon">💎</span> Waktu loading yang lebih cepat</li>
                    </ul>
                </div>

                <div class="update-actions">
                    <button id="dont-show-again" class="btn-secondary">
                        <span class="btn-icon">🔕</span> Jangan Tampilkan Lagi
                    </button>
                    <button id="got-it" class="btn-primary">
                        <span class="btn-icon">👑</span> Ngerti
                    </button>
                </div>
            </div>

            <div class="modal-footer">
                <p>OhayooOneSann</p>
            </div>
        </div>
    </div>

    <script src="./script.js"></script>
</body>
</html>