Skip to content

Commit 691160f

Browse files
aimtyaemaimtyaem
authored
Update climate.html
Updated
1 parent a2c957c commit 691160f

File tree

1 file changed

+91
-91
lines changed

1 file changed

+91
-91
lines changed

‎climate.html‎

Lines changed: 91 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
<style>
88
:root {
99
--climate-blue: #1a73e8;
10-
--temp-red: #d93025;
11-
--precip-blue: #4285f4;
1210
}
1311

1412
body {
@@ -55,6 +53,21 @@
5553
border-radius: 6px;
5654
display: flex;
5755
justify-content: space-between;
56+
cursor: pointer;
57+
}
58+
59+
.expanded-list {
60+
list-style: none;
61+
padding: 0;
62+
margin-top: 10px;
63+
display: none;
64+
}
65+
66+
.expanded-list li {
67+
padding: 8px 12px;
68+
background: #f1f1f1;
69+
margin-top: 5px;
70+
border-radius: 4px;
5871
}
5972

6073
.nav-button {
@@ -79,104 +92,91 @@ <h1>Climate Analysis</h1>
7992
<!-- Historical Card -->
8093
<div class="climate-card">
8194
<div class="card-header">Historical Analysis</div>
82-
<div class="data-item">Predictive Models</div>
83-
<div class="data-item">Climate Deltas</div>
84-
<div class="data-item">Extreme Events</div>
85-
</div>
86-
87-
<!-- Temperature Card -->
88-
<div class="climate-card" style="--climate-blue: var(--temp-red)">
89-
<div class="card-header">Temperature (°C)</div>
90-
<div class="data-item">
91-
<span>2010</span>
92-
<span>23.4°C</span>
93-
</div>
94-
<!-- Repeat for other years -->
95-
</div>
96-
97-
<!-- Precipitation Card -->
98-
<div class="climate-card" style="--climate-blue: var(--precip-blue)">
99-
<div class="card-header">Precipitation (mm)</div>
100-
<div class="data-item">
101-
<span>2010</span>
102-
<span>450mm</span>
103-
</div>
104-
<!-- Repeat for other years -->
95+
<div class="data-item" data-toggle="predictive-models">Predictive Models</div>
96+
<ul class="expanded-list" id="predictive-models">
97+
<li>Analysis 1</li>
98+
<li>Analysis 2</li>
99+
<li>Analysis 3</li>
100+
</ul>
101+
<div class="data-item" data-toggle="climate-deltas">Climate Deltas</div>
102+
<ul class="expanded-list" id="climate-deltas">
103+
<li>Analysis 1</li>
104+
<li>Analysis 2</li>
105+
<li>Analysis 3</li>
106+
</ul>
107+
<div class="data-item" data-toggle="extreme-events">Extreme Events</div>
108+
<ul class="expanded-list" id="extreme-events">
109+
<li>Analysis 1</li>
110+
<li>Analysis 2</li>
111+
<li>Analysis 3</li>
112+
</ul>
105113
</div>
106114
</div>
107115

108116
<button class="nav-button" id="dashboardBtn">Go to Dashboard</button>
109117
</div>
110118

111-
<script>
112-
const currentYear = new Date().getFullYear();
113-
const climateData = {
114-
temperature: {
115-
'2010': 23.4,
116-
'2012': 23.8,
117-
'2014': 24.1,
118-
'2016': 24.5,
119-
'2018': 24.8,
120-
'2020': 25.1,
121-
'2022': 25.4,
122-
[currentYear]: 25.7
123-
},
124-
precipitation: {
125-
'2010': 450,
126-
'2012': 420,
127-
'2014': 435,
128-
'2016': 410,
129-
'2018': 398,
130-
'2020': 385,
131-
'2022': 375,
132-
[currentYear]: 365
133-
}
134-
};
135-
136-
// Calculate average temperature
137-
function calculateAverageTemp() {
138-
const temps = Object.values(climateData.temperature);
139-
return temps.reduce((sum, temp) => sum + temp, 0) / temps.length;
140-
}
141-
142-
// Save data before navigation
143-
function saveClimateData() {
144-
const dashboardData = {
145-
avgTemp: calculateAverageTemp().toFixed(1),
146-
lastPrecip: climateData.precipitation[currentYear]
119+
<script>
120+
const currentYear = new Date().getFullYear();
121+
const climateData = {
122+
temperature: {
123+
'2010': 23.4,
124+
'2012': 23.8,
125+
'2014': 24.1,
126+
'2016': 24.5,
127+
'2018': 24.8,
128+
'2020': 25.1,
129+
'2022': 25.4,
130+
[currentYear]: 25.7
131+
},
132+
precipitation: {
133+
'2010': 450,
134+
'2012': 420,
135+
'2014': 435,
136+
'2016': 410,
137+
'2018': 398,
138+
'2020': 385,
139+
'2022': 375,
140+
[currentYear]: 365
141+
}
147142
};
148-
localStorage.setItem('climateDashboardData', JSON.stringify(dashboardData));
149-
}
150-
151-
// Navigation functionality with data save
152-
document.getElementById('dashboardBtn').addEventListener('click', () => {
153-
saveClimateData();
154-
window.location.href = 'dashboard.html';
155-
});
156-
157-
// Dynamic data population (unchanged)
158-
document.addEventListener('DOMContentLoaded', () => {
159-
const tempCard = document.querySelector('[style*="--temp-red"]');
160-
const precipCard = document.querySelector('[style*="--precip-blue"]');
161-
162-
Object.entries(climateData.temperature).forEach(([year, temp]) => {
163-
tempCard.innerHTML += `
164-
<div class="data-item">
165-
<span>${year}</span>
166-
<span>${temp}°C</span>
167-
</div>
168-
`;
143+
144+
// Calculate average temperature
145+
function calculateAverageTemp() {
146+
const temps = Object.values(climateData.temperature);
147+
return temps.reduce((sum, temp) => sum + temp, 0) / temps.length;
148+
}
149+
150+
// Save data before navigation
151+
function saveClimateData() {
152+
const dashboardData = {
153+
avgTemp: calculateAverageTemp().toFixed(1),
154+
lastPrecip: climateData.precipitation[currentYear]
155+
};
156+
localStorage.setItem('climateDashboardData', JSON.stringify(dashboardData));
157+
}
158+
159+
// Navigation functionality with data save
160+
document.getElementById('dashboardBtn').addEventListener('click', () => {
161+
saveClimateData();
162+
window.location.href = 'dashboard.html';
163+
});
164+
165+
// Toggle expanded lists
166+
document.querySelectorAll('.data-item').forEach(item => {
167+
item.addEventListener('click', () => {
168+
const targetId = item.getAttribute('data-toggle');
169+
const targetList = document.getElementById(targetId);
170+
targetList.style.display = targetList.style.display === 'none' ? 'block' : 'none';
171+
});
169172
});
170173

171-
Object.entries(climateData.precipitation).forEach(([year, precip]) => {
172-
precipCard.innerHTML += `
173-
<div class="data-item">
174-
<span>${year}</span>
175-
<span>${precip}mm</span>
176-
</div>
177-
`;
174+
// Initialize lists as collapsed
175+
document.addEventListener('DOMContentLoaded', () => {
176+
document.querySelectorAll('.expanded-list').forEach(list => {
177+
list.style.display = 'none';
178+
});
178179
});
179-
});
180-
</script>
180+
</script>
181181
</body>
182182
</html>

0 commit comments

Comments
 (0)