-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (167 loc) · 7.32 KB
/
index.html
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ! Title (important for SEO) -->
<title>Live Weather Forecast & Real-Time Updates | Cloud Scout</title>
<!-- ! Meta Description (important for SEO) -->
<meta
name="description"
content="Get accurate and up-to-date weather forecasts, live weather updates, and severe weather alerts with Cloud Scout. Plan your day with real-time weather information at your fingertips."
/>
<!-- ! Meta Keywords (optional, less impactful for SEO now) -->
<meta
name="keywords"
content="weather, live weather, weather forecast, real-time weather, weather app, local weather, weather updates, weather alerts, current temperature"
/>
<!-- ! Favicon -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>⛅</text></svg>"></link>
<!-- ! Open Graph Tags (for social sharing) -->
<meta
property="og:title"
content="Live Weather Forecast & Real-Time Updates | Cloud Scout"
/>
<meta
property="og:description"
content="Access accurate weather information, real-time updates, and weather alerts with Cloud Scout. Plan your day better with our intuitive weather interface."
/>
<meta
property="og:image"
content="[URL to an image representing your weather app]"
/>
<meta property="og:url" content="mypersona.cyou/cloud-scout" />
<meta property="og:type" content="website" />
<!-- ! Twitter Card Tags (for social sharing) -->
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Live Weather Forecast & Real-Time Updates | Cloud Scout"
/>
<meta
name="twitter:description"
content="Stay ahead with accurate weather updates and forecasts. Access real-time weather data anytime with Cloud Scout."
/>
<meta
name="twitter:image"
content="[URL to an image representing your weather app]"
/>
<meta name="twitter:site" content="@YourTwitterHandle" />
<!-- ! Canonical URL (important for SEO) -->
<link rel="canonical" href="mypersona.cyou/cloud-scout" />
<!-- ! Font Awesome Libraries (important for Icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- ! External CSS -->
<link rel="stylesheet" href="components/styles.css" />
<!-- ! External JS -->
<script src="components/scripts.js" defer></script>
</head>
<body>
<!-- ! Preloader Start -->
<div class="preloader" id="preloader">
<div id="loader"></div>
</div>
<!-- ! Preloader End -->
<!-- ! Welcome Container Start -->
<div class="welcome-container">
<h2>Welcome to Cloud Scout</h2>
<hr>
<p>We’re excited to have you here! Enjoy your visit and stay informed!</p>
</div>
<!-- ! Welcome Container End -->
<main class="main-container">
<!-- ! User Input Start -->
<header class="input-container">
<input
type="text"
class="city-input"
placeholder="Enter a city name"
aria-label="Enter a city name" />
<button class="search-btn">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</header>
<!-- ! User Input End -->
<!-- ! Weather Info Start -->
<section class="weather-info" style="display: none;">
<div class="location-date-container">
<div class="location">
<i class="fa-solid fa-location-crosshairs"></i>
<h4 class="country-txt">India</h4>
</div>
<h5 class="current-date-txt">Sun | 06 Jan</h5>
</div>
<div class="weather-summary-container">
<img src="assets/weather/clouds.svg" alt="Weather forecast showing current temperature and conditions in [Location]" class="weather-summary-img">
<div class="weather-summary-info">
<h1 class="temp-text">29°C</h1>
<h3 class="condition-txt">Clouds</h3>
</div>
</div>
<div class="weather-conditions-container">
<div class="condition-item">
<i class="fa-solid fa-droplet"></i>
<div class="condition-info">
<h5>Humidity</h5>
<h5 class="humidity-value-text">40%</h5>
</div>
</div>
<div class="condition-item">
<i class="fa-solid fa-wind"></i>
<div class="condition-info">
<h5>Wind Speed</h5>
<h5 class="wind-value-text">1 M/s</h5>
</div>
</div>
</div>
<div class="forecast-items-container">
<div class="forecast-item">
<h5 class="forecast-item-date">06 Jan</h5>
<img src="assets/weather/thunderstorm.svg" alt="Weather forecast showing current temperature and conditions in [Location]" class="forecast-item-img">
<h5 class="forecast item-temp">29°C</h5>
</div>
<div class="forecast-item">
<h5 class="forecast-item-date">06 Jan</h5>
<img src="assets/weather/thunderstorm.svg" alt="Weather forecast showing current temperature and conditions in [Location]" class="forecast-item-img">
<h5 class="forecast item-temp">29°C</h5>
</div>
<div class="forecast-item">
<h5 class="forecast-item-date">06 Jan</h5>
<img src="assets/weather/thunderstorm.svg" alt="Weather forecast showing current temperature and conditions in [Location]" class="forecast-item-img">
<h5 class="forecast item-temp">29°C</h5>
</div>
<div class="forecast-item">
<h5 class="forecast-item-date">06 Jan</h5>
<img src="assets/weather/thunderstorm.svg" alt="Weather forecast showing current temperature and conditions in [Location]" class="forecast-item-img">
<h5 class="forecast item-temp">29°C</h5>
</div>
</div>
</section>
<!-- ! Weather Info End -->
<!-- ! Search City Start -->
<section class="search-city section-message">
<img src="assets/message/search-city.png" alt="Search City">
<div>
<h1>Search City</h1>
<h4>Find out weather Condition of your city</h4>
</div>
</section>
<!-- ! Search City End -->
<!-- ! City Not Found Start -->
<section class="not-found section-message" style="display: none;">
<img src="assets/message/not-found.png" alt="City Not Found">
<div>
<h1>Search City</h1>
<h4>Find out weather Condition of your city</h4>
</div>
</section>
<!-- ! City Not Found End -->
</main>
<!-- ! Conclusion Container Start -->
<div class="conclusion-container">
<p>Made with 💖 and creativity, from the vibrant land of India 🇮🇳, by</p>
<p><a id="signature" href="https://mypersona.cyou/">Swapnadeep</a> || <a id="github" href="https://github.com/helloswapnadeep/cloud-scout">GitHub</a></p>
</div>
<!-- ! Conclusion Container End -->
</body>
</html>