Skip to content

Commit aa1d5e0

Browse files
goncalopolidogoncalopolido
committed
commit
1 parent 10ecd55 commit aa1d5e0

File tree

247 files changed

+1910
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

247 files changed

+1910
-0
lines changed

‎.env.example‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
OPENWEATHER_API_KEY=
2+
PORT=3000

‎package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "clim8",
3+
"version": "1.0.0",
4+
"private": true,
5+
"scripts": {
6+
"start": "node server.js",
7+
"dev": "node server.js"
8+
},
9+
"dependencies": {
10+
"dotenv": "^16.3.1",
11+
"express": "^4.18.2",
12+
"cors": "^2.8.5",
13+
"node-fetch": "^2.6.12"
14+
}
15+
}

‎public/404.html‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>404 Not Found</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
8+
<style>
9+
:root {
10+
--bg-color: #ffffff;
11+
--container-bg: rgba(255, 255, 255, 0.95);
12+
--text-color: #1a1a1a;
13+
--card-bg: #ffffff;
14+
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
15+
--btn-bg: #ffffff;
16+
--btn-hover: #f5f5f5;
17+
--btn-text: #1a1a1a;
18+
--btn-outline: #e0e0e0;
19+
--border-radius: 4px;
20+
--transition-speed: 0.2s;
21+
}
22+
23+
.dark-mode {
24+
--bg-color: #000000;
25+
--container-bg: rgba(0, 0, 0, 0.95);
26+
--text-color: #ffffff;
27+
--card-bg: #000000;
28+
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
29+
--btn-bg: #000000;
30+
--btn-hover: #1a1a1a;
31+
--btn-text: #ffffff;
32+
--btn-outline: #333333;
33+
}
34+
35+
* {
36+
margin: 0;
37+
padding: 0;
38+
box-sizing: border-box;
39+
}
40+
41+
html, body {
42+
height: 100vh;
43+
overflow: hidden;
44+
}
45+
46+
body {
47+
background: var(--bg-color);
48+
margin: 0;
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
font-family: "Roboto", sans-serif;
53+
color: var(--text-color);
54+
transition: all var(--transition-speed) ease;
55+
padding: 20px;
56+
}
57+
58+
.container {
59+
width: 100%;
60+
max-width: 600px;
61+
background-color: var(--container-bg);
62+
border-radius: var(--border-radius);
63+
box-shadow: var(--card-shadow);
64+
overflow: hidden;
65+
padding: 40px;
66+
transition: all var(--transition-speed) ease;
67+
backdrop-filter: blur(10px);
68+
text-align: center;
69+
}
70+
71+
.error-code {
72+
font-size: 120px;
73+
font-weight: 300;
74+
margin-bottom: 20px;
75+
line-height: 1;
76+
letter-spacing: -2px;
77+
}
78+
79+
.error-message {
80+
font-size: 24px;
81+
margin-bottom: 30px;
82+
font-weight: 400;
83+
opacity: 0.8;
84+
}
85+
86+
.home-link {
87+
display: inline-flex;
88+
align-items: center;
89+
gap: 8px;
90+
padding: 12px 24px;
91+
color: var(--text-color);
92+
text-decoration: none;
93+
font-weight: 400;
94+
font-size: 16px;
95+
transition: all var(--transition-speed) ease;
96+
background-color: transparent;
97+
border: 1px solid var(--btn-outline);
98+
border-radius: var(--border-radius);
99+
}
100+
101+
.home-link:hover {
102+
background-color: var(--btn-hover);
103+
}
104+
105+
.home-icon {
106+
width: 20px;
107+
height: 20px;
108+
stroke: currentColor;
109+
stroke-width: 2;
110+
stroke-linecap: round;
111+
stroke-linejoin: round;
112+
fill: none;
113+
}
114+
115+
@media (max-width: 768px) {
116+
.container {
117+
padding: 30px;
118+
}
119+
120+
.error-code {
121+
font-size: 96px;
122+
}
123+
124+
.error-message {
125+
font-size: 20px;
126+
}
127+
}
128+
129+
@media (max-width: 480px) {
130+
.container {
131+
padding: 20px;
132+
}
133+
134+
.error-code {
135+
font-size: 72px;
136+
}
137+
138+
.error-message {
139+
font-size: 18px;
140+
}
141+
142+
.home-link {
143+
padding: 10px 20px;
144+
font-size: 14px;
145+
}
146+
}
147+
</style>
148+
<script>
149+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
150+
document.documentElement.classList.add('dark-mode');
151+
}
152+
153+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
154+
if (event.matches) {
155+
document.documentElement.classList.add('dark-mode');
156+
} else {
157+
document.documentElement.classList.remove('dark-mode');
158+
}
159+
});
160+
</script>
161+
</head>
162+
<body>
163+
<div class="container">
164+
<div class="error-code">404</div>
165+
<div class="error-message">Not found</div>
166+
<a href="/" class="home-link">
167+
<svg class="home-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
168+
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
169+
<polyline points="9 22 9 12 15 12 15 22"></polyline>
170+
</svg>
171+
Return to Home
172+
</a>
173+
</div>
174+
</body>
175+
</html>

‎public/index.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>clim8.polido.pt</title>
7+
<link rel="icon" href="src/svg/cloudy-black-logo.svg" type="image/svg+xml" media="(prefers-color-scheme: light)">
8+
<link rel="icon" href="src/svg/cloudy-white-logo.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)">
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="src/css/style.css">
11+
</head>
12+
<body>
13+
<div class="container">
14+
<header>
15+
<h1>clim8</h1>
16+
<div class="header-actions">
17+
<div class="search-container">
18+
<input type="text" id="search-input" placeholder="Search for a location...">
19+
<div class="suggestions" id="suggestions"></div>
20+
<div class="search-error" id="search-error">
21+
Not found. To make search more precise put the city's name, comma, 2-letter country code (ISO3166).
22+
</div>
23+
</div>
24+
<button class="btn btn-icon btn-outline" id="location-btn">
25+
<img src="src/svg/location.svg" alt="Location" class="location-icon" width="16" height="16">
26+
</button>
27+
<div class="unit-toggle">
28+
<button class="btn btn-small btn-active" id="metric-btn" data-unit="metric">°C, m/s</button>
29+
<button class="btn btn-small btn-outline" id="imperial-btn" data-unit="imperial">°F, mph</button>
30+
</div>
31+
<div class="theme-toggle">
32+
<button class="btn btn-icon btn-small" id="light-btn">
33+
<img src="src/svg/sun.svg" alt="Light mode" width="16" height="16" class="theme-icon">
34+
</button>
35+
<button class="btn btn-icon btn-small" id="dark-btn">
36+
<img src="src/svg/moon.svg" alt="Dark mode" width="16" height="16" class="theme-icon">
37+
</button>
38+
</div>
39+
<a href="https://github.com/goncalopolido/clim8" target="_blank" rel="noopener noreferrer" class="btn btn-icon btn-outline github-btn">
40+
<img src="src/svg/github.svg" alt="GitHub" class="github-icon" width="16" height="16">
41+
</a>
42+
</div>
43+
</header>
44+
45+
<div class="error-message" id="error-message">
46+
Could not get your location.
47+
</div>
48+
49+
<div class="loading" id="loading">
50+
<div class="loading-text">Loading...</div>
51+
</div>
52+
53+
<section class="today-overview" id="today-overview">
54+
<div class="location-date">
55+
<div class="location">
56+
<h2 id="location-name">--</h2>
57+
<div class="weather-description" id="weather-description">--</div>
58+
<div class="wind-description" id="wind-description">--</div>
59+
</div>
60+
<div class="date" id="current-date">--</div>
61+
</div>
62+
63+
<div class="weather-main">
64+
<div class="temp-container">
65+
<div class="temperature" id="current-temp">--°</div>
66+
<div class="feels-like" id="feels-like">Feels like --°</div>
67+
</div>
68+
<div class="weather-icon-placeholder" id="weather-icon-placeholder">--</div>
69+
<img id="weather-icon" class="hidden" src="/placeholder.svg" alt="" width="140" height="140">
70+
</div>
71+
72+
<div class="weather-details">
73+
<div class="detail-item">
74+
<span class="detail-label">Wind Speed</span>
75+
<span class="detail-value" id="wind-speed">--</span>
76+
</div>
77+
<div class="detail-item">
78+
<span class="detail-label">Humidity</span>
79+
<span class="detail-value" id="humidity">--%</span>
80+
</div>
81+
<div class="detail-item">
82+
<span class="detail-label">Pressure</span>
83+
<span class="detail-value" id="pressure">-- hPa</span>
84+
</div>
85+
<div class="detail-item">
86+
<span class="detail-label">Visibility</span>
87+
<span class="detail-value" id="visibility">--</span>
88+
</div>
89+
<div class="detail-item">
90+
<span class="detail-label">Sunrise</span>
91+
<span class="detail-value" id="sunrise">--:--</span>
92+
</div>
93+
<div class="detail-item">
94+
<span class="detail-label">Sunset</span>
95+
<span class="detail-value" id="sunset">--:--</span>
96+
</div>
97+
</div>
98+
</section>
99+
100+
<div class="forecast-container">
101+
<div class="forecast-title">
102+
<span>5-Day Forecast (3-hour intervals)</span>
103+
</div>
104+
<div class="day-buttons" id="day-buttons">
105+
</div>
106+
<div class="forecast-days" id="forecast-days">
107+
</div>
108+
</div>
109+
</div>
110+
111+
<script src="src/js/script.js"></script>
112+
</body>
113+
</html>

0 commit comments

Comments
 (0)