-
Notifications
You must be signed in to change notification settings - Fork 0
/
sxhed.html
88 lines (78 loc) · 4.05 KB
/
sxhed.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eco-Themed Data Tracking System</title>
<!-- Tailwind CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script defer>
// Function to open the modal
function openModal() {
document.getElementById('demoModal').classList.remove('hidden');
}
// Function to close the modal
function closeModal() {
document.getElementById('demoModal').classList.add('hidden');
}
// Function to iterate through the timeline (simulating months/years)
function simulateTimeline(duration) {
let timeline = document.getElementById('timeline');
let outreachText = document.getElementById('outreachText');
timeline.innerHTML = ''; // Clear timeline
let periods = duration === '4months' ? 4 : 24; // 24 months for 2 years
let outreachChanges = duration === '4months' ?
['Eco Awareness', 'Community Engagement', 'Green Manufacturing', 'Carbon Reduction'] :
['Eco Awareness', 'Green Jobs', 'Local Farming', 'Renewable Energy', 'Zero Waste', 'Circular Economy'];
// Simulate the timeline iteration
for (let i = 1; i <= periods; i++) {
let month = document.createElement('div');
month.className = 'bg-green-200 p-2 m-2 rounded';
month.innerHTML = `Month ${i}`;
timeline.appendChild(month);
// Update outreach text
let index = i % outreachChanges.length;
outreachText.innerHTML = outreachChanges[index];
}
}
</script>
</head>
<body class="bg-gradient-to-r from-green-300 via-blue-400 to-yellow-200 text-gray-800">
<div class="container mx-auto p-4">
<!-- Header -->
<header class="text-center my-6">
<h1 class="text-4xl font-bold text-green-900">Eco-Friendly Data Tracking</h1>
</header>
<!-- Button to open the demo modal -->
<div class="text-center my-6">
<button class="bg-green-600 text-white px-6 py-2 rounded-lg shadow-lg" onclick="openModal()">Show Demo</button>
</div>
<!-- Demo Modal -->
<div id="demoModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 hidden flex items-center justify-center">
<div class="bg-white rounded-lg shadow-lg w-11/12 md:w-8/12 lg:w-6/12 p-6 relative">
<span class="absolute top-4 right-4 cursor-pointer text-red-500" onclick="closeModal()">✕</span>
<h2 class="text-xl font-semibold text-green-800 mb-4">Timeline Simulation</h2>
<!-- Selection for timeline duration -->
<div class="mb-4">
<label for="duration" class="block text-gray-700 font-bold mb-2">Choose Duration:</label>
<select id="duration" class="w-full border rounded p-2" onchange="simulateTimeline(this.value)">
<option value="4months">4 Months</option>
<option value="2years">2 Years</option>
</select>
</div>
<div class="flex flex-col md:flex-row gap-4">
<!-- Timeline Display -->
<div id="timeline" class="flex flex-wrap bg-gray-100 p-4 rounded-lg shadow-md w-full md:w-8/12">
<!-- Months or years will populate here dynamically -->
</div>
<!-- Thematic Outreach Panel -->
<div class="bg-green-100 p-4 rounded-lg shadow-md w-full md:w-4/12">
<h3 class="text-lg font-semibold text-green-800">Thematic Outreach</h3>
<p id="outreachText" class="text-gray-700 mt-2">Outreach theme will appear here...</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>