-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
81 lines (67 loc) · 2.87 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Data Collection Dashboard</title>
</head>
<body bgcolor="F7E1DC">
<table border="2" bordercolor="B5958E" width="75%">
<tr>
<td colspan="2">
<h1 align="center" style="color: #896b60;">Data Collection Dashboard</h1>
</td>
</tr>
<tr>
<td align="center">
<h3 style="color: #896b64;">Temperature</h3>
<img src="image1.png" alt="Image 1" width="200" height="213">
<iframe width="200" height="213" style="border: 1px solid #ffffff;" src="https://thingspeak.com/channels/2254789/widgets/702033"></iframe>
</td>
<td align="center">
<h3 style="color: #896b64;">Humidity</h3>
<img src="image2.webp" alt="Image 2" width="200" height="213">
<iframe width="200" height="213" style="border: 1px solid #ffffff;" src="https://thingspeak.com/channels/2254789/widgets/702047"></iframe>
</td>
</tr>
<tr>
<td align="center">
<h3 style="color: #896b64;">Air Quality</h3>
<img src="image3.jpg" alt="Image 3" width="200" height="213">
<iframe width="200" height="213" style="border: 1px solid #ffffff;" src="https://thingspeak.com/channels/2254789/widgets/702065"></iframe>
</td>
<td align="center">
<h3 style="color: #896b64;">Atmospheric Pressure</h3>
<img src="image4.jpg" alt="Image 1" width="200" height="213">
<iframe width="200" height="213" style="border: 1px solid #ffffff;" src="https://thingspeak.com/channels/2254789/widgets/702078"></iframe>
</td>
</tr>
</table>
<h3 align="center">Links :</h3>
<a href="https://thingspeak.com/channels/2254789" target= "_blank"><h3 align="center">ThingSpeak Channel</h3></a><br>
<div id="weather" style="position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 20%; padding: 20px; background-color: #ffffff;"></div>
<script>
const apiKey = '0c730364abf730a82e4d73a4a0f16d99';
const city = 'Colombo';
// Make an API request to get weather data
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
.then((response) => response.json())
.then((data) => {
const weatherElement = document.getElementById('weather');
const temperature = data.main.temp;
const description = data.weather[0].description;
const icon = data.weather[0].icon;
weatherElement.innerHTML = `
<h2>Weather in ${city}</h2>
<p>(Real Time)</p>
<p>Temperature: ${temperature}°C</p>
<p>Description: ${description}</p>
<img src="https://openweathermap.org/img/w/${icon}.png" alt="Weather Icon">
<img src="image6.jpg" alt="Weather Icon" width= "110" "height="55" style="float: right">
`;
})
.catch((error) => {
console.error('Error fetching weather data:', error);
});
</script>
</body>
</html>