Hugging Face's logo

Spaces:
Minerva666
/
energy-modelling
Runtime error

App Files Community
Minerva666 commited on
Commit
d1a7526
·
verified ·
1 Parent(s): 6c5c349

Create static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +321 -0
static/index.html ADDED
@@ -0,0 +1,321 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Energy Modelling Tools</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --bg: #f4f2ee;
12
+ --text: #1a1a1a;
13
+ --text-muted: #5c5c5c;
14
+ --accent: #2d6a4f;
15
+ --card-bg: #ffffff;
16
+ --card-shadow: 0 2px 20px rgba(0,0,0,0.06);
17
+ --card-hover-shadow: 0 8px 40px rgba(0,0,0,0.12);
18
+ }
19
+
20
+ * { margin: 0; padding: 0; box-sizing: border-box; }
21
+
22
+ body {
23
+ font-family: 'DM Sans', sans-serif;
24
+ background: var(--bg);
25
+ color: var(--text);
26
+ min-height: 100vh;
27
+ overflow-x: hidden;
28
+ }
29
+
30
+ /* Background decoration */
31
+ .bg-deco {
32
+ position: fixed;
33
+ inset: 0;
34
+ pointer-events: none;
35
+ z-index: 0;
36
+ overflow: hidden;
37
+ }
38
+ .bg-deco::before {
39
+ content: '';
40
+ position: absolute;
41
+ top: -30%;
42
+ right: -20%;
43
+ width: 900px;
44
+ height: 900px;
45
+ border-radius: 50%;
46
+ background: radial-gradient(circle, rgba(45,106,79,0.06) 0%, transparent 70%);
47
+ }
48
+ .bg-deco::after {
49
+ content: '';
50
+ position: absolute;
51
+ bottom: -20%;
52
+ left: -10%;
53
+ width: 700px;
54
+ height: 700px;
55
+ border-radius: 50%;
56
+ background: radial-gradient(circle, rgba(212,163,115,0.08) 0%, transparent 70%);
57
+ }
58
+
59
+ .container {
60
+ position: relative;
61
+ z-index: 1;
62
+ max-width: 1100px;
63
+ margin: 0 auto;
64
+ padding: 0 24px;
65
+ }
66
+
67
+ /* Header */
68
+ header {
69
+ padding: 60px 0 20px;
70
+ text-align: center;
71
+ }
72
+ header h1 {
73
+ font-family: 'Playfair Display', serif;
74
+ font-weight: 600;
75
+ font-size: clamp(2.4rem, 5vw, 3.6rem);
76
+ letter-spacing: -0.02em;
77
+ color: var(--text);
78
+ margin-bottom: 16px;
79
+ }
80
+ header p {
81
+ font-size: 1.1rem;
82
+ color: var(--text-muted);
83
+ max-width: 600px;
84
+ margin: 0 auto;
85
+ line-height: 1.6;
86
+ }
87
+
88
+ /* Divider */
89
+ .divider {
90
+ width: 60px;
91
+ height: 3px;
92
+ background: var(--accent);
93
+ margin: 32px auto 48px;
94
+ border-radius: 2px;
95
+ }
96
+
97
+ /* Tool Grid */
98
+ .tool-grid {
99
+ display: grid;
100
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
101
+ gap: 24px;
102
+ padding-bottom: 80px;
103
+ }
104
+
105
+ .tool-card {
106
+ background: var(--card-bg);
107
+ border-radius: 16px;
108
+ padding: 32px 20px 28px;
109
+ text-align: center;
110
+ box-shadow: var(--card-shadow);
111
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
112
+ cursor: pointer;
113
+ text-decoration: none;
114
+ color: inherit;
115
+ position: relative;
116
+ overflow: hidden;
117
+ }
118
+ .tool-card::before {
119
+ content: '';
120
+ position: absolute;
121
+ top: 0;
122
+ left: 0;
123
+ right: 0;
124
+ height: 4px;
125
+ background: var(--tool-color, var(--accent));
126
+ transform: scaleX(0);
127
+ transition: transform 0.3s ease;
128
+ transform-origin: left;
129
+ }
130
+ .tool-card:hover {
131
+ transform: translateY(-6px);
132
+ box-shadow: var(--card-hover-shadow);
133
+ }
134
+ .tool-card:hover::before {
135
+ transform: scaleX(1);
136
+ }
137
+
138
+ .tool-card.disabled {
139
+ opacity: 0.45;
140
+ cursor: default;
141
+ pointer-events: none;
142
+ }
143
+ .tool-card.disabled .badge { display: block; }
144
+
145
+ .tool-icon {
146
+ width: 80px;
147
+ height: 80px;
148
+ border-radius: 50%;
149
+ margin: 0 auto 16px;
150
+ display: flex;
151
+ align-items: center;
152
+ justify-content: center;
153
+ font-size: 32px;
154
+ color: #fff;
155
+ background: var(--tool-color, #555);
156
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
157
+ }
158
+
159
+ .tool-card h3 {
160
+ font-weight: 600;
161
+ font-size: 1.05rem;
162
+ margin-bottom: 6px;
163
+ }
164
+ .tool-card .subtitle {
165
+ font-size: 0.75rem;
166
+ color: var(--text-muted);
167
+ line-height: 1.4;
168
+ }
169
+
170
+ .badge {
171
+ display: none;
172
+ position: absolute;
173
+ top: 12px;
174
+ right: 12px;
175
+ background: #ddd;
176
+ color: #888;
177
+ font-size: 0.6rem;
178
+ font-weight: 600;
179
+ text-transform: uppercase;
180
+ padding: 2px 8px;
181
+ border-radius: 20px;
182
+ letter-spacing: 0.5px;
183
+ }
184
+
185
+ /* Footer */
186
+ footer {
187
+ text-align: center;
188
+ padding: 32px 0;
189
+ font-size: 0.85rem;
190
+ color: var(--text-muted);
191
+ border-top: 1px solid rgba(0,0,0,0.06);
192
+ }
193
+
194
+ /* Animations */
195
+ .tool-card {
196
+ opacity: 0;
197
+ transform: translateY(20px);
198
+ animation: fadeUp 0.5s ease forwards;
199
+ }
200
+ @keyframes fadeUp {
201
+ to { opacity: 1; transform: translateY(0); }
202
+ }
203
+ .tool-card:nth-child(1) { animation-delay: 0.05s; }
204
+ .tool-card:nth-child(2) { animation-delay: 0.10s; }
205
+ .tool-card:nth-child(3) { animation-delay: 0.15s; }
206
+ .tool-card:nth-child(4) { animation-delay: 0.20s; }
207
+ .tool-card:nth-child(5) { animation-delay: 0.25s; }
208
+ .tool-card:nth-child(6) { animation-delay: 0.30s; }
209
+ .tool-card:nth-child(7) { animation-delay: 0.35s; }
210
+ .tool-card:nth-child(8) { animation-delay: 0.40s; }
211
+ .tool-card:nth-child(9) { animation-delay: 0.45s; }
212
+ .tool-card:nth-child(10) { animation-delay: 0.50s; }
213
+ </style>
214
+ </head>
215
+ <body>
216
+ <div class="bg-deco"></div>
217
+ <div class="container">
218
+ <header>
219
+ <h1>Energy Modelling Tools</h1>
220
+ <p>A suite of open-source tools to support energy planning, investment, and policy analysis.</p>
221
+ </header>
222
+ <div class="divider"></div>
223
+
224
+ <div class="tool-grid" id="toolGrid">
225
+ <!-- Row 1 -->
226
+ <a href="/tool/maed" class="tool-card" style="--tool-color: #1b3a5c;">
227
+ <div class="tool-icon" style="background: #1b3a5c;">
228
+ <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><path d="M3 3v18h18"/><path d="M7 16l4-6 4 4 5-8"/></svg>
229
+ </div>
230
+ <h3>MAED</h3>
231
+ <p class="subtitle">Model for Analysis of Energy Demand</p>
232
+ </a>
233
+
234
+ <a href="/tool/OnStove" class="tool-card" style="--tool-color: #c0392b;">
235
+ <div class="tool-icon" style="background: #c0392b;">
236
+ <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="9"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2"/></svg>
237
+ </div>
238
+ <h3>OnStove</h3>
239
+ <p class="subtitle">Open-source Spatial Clean Cooking</p>
240
+ </a>
241
+
242
+ <div class="tool-card disabled" style="--tool-color: #e8a838;">
243
+ <span class="badge">Coming soon</span>
244
+ <div class="tool-icon" style="background: #e8a838;">
245
+ <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/></svg>
246
+ </div>
247
+ <h3>OnSSET</h3>
248
+ <p class="subtitle">Open Source Spatial Electrification</p>
249
+ </div>
250
+
251
+ <div class="tool-card disabled" style="--tool-color: #5dade2;">
252
+ <span class="badge">Coming soon</span>
253
+ <div class="tool-icon" style="background: #5dade2;">
254
+ <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
255
+ </div>
256
+ <h3>OSeMOSYS</h3>
257
+ <p class="subtitle">Open Source Energy Modelling</p>
258
+ </div>
259
+
260
+ <div class="tool-card disabled" style="--tool-color: #8e5724;">
261
+ <span class="badge">Coming soon</span>
262
+ <div class="tool-icon" style="background: #8e5724;">
263
+ <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><path d="M14 17.5h7M17.5 14v7"/></svg>
264
+ </div>
265
+ <h3>FFRM</h3>
266
+ <p class="subtitle">Fossil Fuel Retirement Model</p>
267
+ </div>
268
+
269
+ <!-- Row 2 -->
270
+ <div class="tool-card disabled" style="--tool-color: #0e6655;">
271
+ <span class="badge">Coming soon</span>
272
+ <div class="tool-icon" style="background: #0e6655;">
273
+ <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><path d="M4 12h16"/><circle cx="8" cy="12" r="2"/><circle cx="16" cy="12" r="2"/></svg>
274
+ </div>
275
+ <h3>PathCalc</h3>
276
+ <p class="subtitle">Pathways Calculator</p>
277
+ </div>
278
+
279
+ <div class="tool-card disabled" style="--tool-color: #e67e22;">
280
+ <span class="badge">Coming soon</span>
281
+ <div class="tool-icon" style="background: #e67e22;">
282
+ <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><path d="M12 2a10 10 0 100 20 10 10 0 000-20z"/><path d="M12 12l6 4"/><path d="M12 12l-4 6"/></svg>
283
+ </div>
284
+ <h3>NISMOD</h3>
285
+ <p class="subtitle">National Infrastructure Systems Model</p>
286
+ </div>
287
+
288
+ <div class="tool-card disabled" style="--tool-color: #1abc9c;">
289
+ <span class="badge">Coming soon</span>
290
+ <div class="tool-icon" style="background: #1abc9c;">
291
+ <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M8 12h8M12 8v8"/></svg>
292
+ </div>
293
+ <h3>MINFin</h3>
294
+ <p class="subtitle">Climate Finance Planning</p>
295
+ </div>
296
+
297
+ <div class="tool-card disabled" style="--tool-color: #196f3d;">
298
+ <span class="badge">Coming soon</span>
299
+ <div class="tool-icon" style="background: #196f3d;">
300
+ <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
301
+ </div>
302
+ <h3>FinTrack</h3>
303
+ <p class="subtitle">Climate Finance Tracking</p>
304
+ </div>
305
+
306
+ <div class="tool-card disabled" style="--tool-color: #7dae3e;">
307
+ <span class="badge">Coming soon</span>
308
+ <div class="tool-icon" style="background: #7dae3e;">
309
+ <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><path d="M6 20V10M10 20V4M14 20v-6M18 20V8"/></svg>
310
+ </div>
311
+ <h3>FINPLAN</h3>
312
+ <p class="subtitle">Financial Analysis of Electric Sector Expansion</p>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <footer>
318
+ <div class="container">© 2025–2026 CCG. and contributors</div>
319
+ </footer>
320
+ </body>
321
+ </html>