WeatherApp/index.html at main · kowkaLYT/WeatherApp · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="all.css">
    <script src="main.js" defer></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
    <link rel="icon" href="https://img.icons8.com/officel/50/partly-cloudy-night.png" type="image/x-icon" />
    <title>Weather App</title>
</head>

<body>
    <main class="main-container">
        <!-- TOAST NO INTERNET -->
        <div id="toast-container" style="
            position: fixed;
            top: 20px;
            right: 10px;
            left: 10px;
            z-index: 1000;">
        </div>
        <!-- HEADER -->
        <header class="header-container">
            <div class="input-container">
                <input class="city-input" type="text" placeholder="Search City">
                <button class="input-btn">
                    <span class="material-symbols-outlined">
                        search
                    </span>
                </button>
            </div>
            <div class="pin-container">
                <img class="header-pin" src="/assets/pin.png" alt="Pin Icon">
            </div>
        </header>
        <div class="recent-cities"></div>
        <!-- SECTION WEATHER-INFO -->
        <section class="weather-info" style="display: none;">
            <div class="location-date-container">
                <div class="location">
                    <span class="material-symbols-outlined">
                        location_on
                    </span>
                    <h4 class="country-txt">Kharkiv</h4>
                </div>
                <h5 class="current-date-txt regular-txt">Wed, 07Aug</h5>
            </div>
            <div class="weather-summary-container">
                <img src="assets/weather/clouds.svg" alt="Forecast" class="weather-summary-img">
                <div class="weather-summary-info">
                    <h1 class="temp-txt">29 °C</h1>
                    <h3 class="condition-txt regular-txt">Clouds</h3>
                    <h4 class="feels-like-txt regular-txt">Feels like: 25°C</h4>
                </div>
            </div>
            <div class="weather-conditions-container">
                <div class="condition-item">
                    <span class="material-symbols-outlined">
                        water_drop
                    </span>
                    <div class="condition-info">
                        <h5 class="regular-txt">Humidity</h5>
                        <h5 class="humidity-value-txt">55%</h5>
                    </div>
                </div>
                <div class="condition-item">
                    <span class="material-symbols-outlined">
                        visibility
                    </span>
                    <div class="condition-info">
                        <h5 class="regular-txt">Visibility</h5>
                        <h5 class="visibility-value-txt">2 m</h5>
                    </div>
                </div>
                <div class="condition-item">
                    <span class="material-symbols-outlined">
                        air
                    </span>
                    <div class="condition-info">
                        <h5 class="regular-txt">Wind Speed</h5>
                        <h5 class="wind-value-txt">2 M/s</h5>
                    </div>
                </div>
            </div>
            <div class="sun-info">
                <div class="sun-item">
                    <span class="material-symbols-outlined">wb_sunny</span>
                    <h5 class="sunrise-txt">Sunrise: 06:45</h5>
                </div>
                <div class="sun-item">
                    <span class="material-symbols-outlined">wb_twilight</span>
                    <h5 class="sunset-txt">Sunset: 20:31</h5>
                </div>
            </div>


            <div class="forecast-items-container"></div>
            <!-- DIV WEATHER TIPS -->
            <div class="weather-tips" style="display: none;">
                <h4 class="">Weather tip of the day</h4>
                <div class="tip-container">
                    <img class="tip-icon" src="" alt="Weather Tip">
                    <span class="tip-text"></span>
                </div>
            </div>
        </section>
        <!-- SECTION SEARCH-CITY -->
        <section class="search-city section-message">
            <img src="assets/message/search-city.png" alt="Search City">
            <div class="">
                <h1>Search City</h1>
                <h4 class="regular-txt"> Find out the weather conditions of the city</h4>
            </div>
        </section>
        <!-- SECTION NOT-FOUND -->
        <section class="not-found section-message" style="display: none;">
            <img src="assets/message/not-found.png" alt="Search City">
            <div class="">
                <h1>Search City</h1>
                <h4 class="regular-txt"> Find out the weather conditions of the city</h4>
            </div>
        </section>
    </main>
</body>

</html>