forked from avermue/cordis-it
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
461 lines (435 loc) · 24.4 KB
/
Copy pathindex.html
File metadata and controls
461 lines (435 loc) · 24.4 KB
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INRAE Transfert · EU Projects</title>
<script>
try {
var raw = localStorage.getItem('cordis-it.scope');
var scope = null;
if (raw) { try { var arr = JSON.parse(raw); if (Array.isArray(arr)) scope = arr; } catch(_) {} }
if (!scope) {
var legacy = localStorage.getItem('cordis-it.viewMode');
if (legacy === 'IT') scope = ['IT'];
else if (legacy === 'INRAE') scope = ['INRAE'];
else if (legacy === 'BOTH') scope = []; // legacy union → ALL
else scope = []; // default: ALL
}
var hasIT = scope.indexOf('IT') >= 0, hasIN = scope.indexOf('INRAE') >= 0;
var mode = (hasIT && hasIN) ? 'BOTH' : hasIT ? 'IT' : hasIN ? 'INRAE' : 'ALL';
document.documentElement.classList.add('mode-' + mode);
} catch(e) { document.documentElement.classList.add('mode-ALL'); }
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;1,400&family=Fira+Code:wght@400;500&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="hdr">
<div class="hdr-top">
<div class="hdr-logo">INRAE Transfert <em>· EU Projects</em></div>
<div class="hdr-search">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" opacity=".5">
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
<input type="text" id="search" placeholder="Search projects, partners, topics…" autocomplete="off">
</div>
<div class="hdr-kpis" id="hdr-kpis"></div>
</div>
<nav class="tab-bar">
<button class="tab-btn on" data-tab="projects">📋 Projects</button>
<button class="tab-btn" data-tab="partners">🤝 Partners</button>
<button class="tab-btn" data-tab="geography">🌍 Geography</button>
<button class="tab-btn" data-tab="disciplines">🔬 Disciplines</button>
<button class="tab-btn" data-tab="budget">💶 Budget</button>
<button class="tab-btn" data-tab="timeline">📅 Timeline</button>
<div style="margin-left:auto;display:flex;align-items:center;gap:0;padding:0 12px 0 0">
<button class="tab-btn tab-btn-discrete" data-tab="stats">∑ stats</button>
<button class="tab-btn tab-btn-discrete" data-tab="about">ⓘ about</button>
<span style="font-family:'Fira Code',monospace;font-size:.62rem;color:rgba(255,255,255,.45);padding:0 0 0 10px;margin-left:10px;border-left:1px solid rgba(255,255,255,.18)" id="update-date"></span>
</div>
</nav>
</header>
<div class="app">
<aside class="sidebar">
<div class="fb" id="sort-block">
<span class="ft">Sort</span>
<select class="fsel" id="sort">
<option value="startDate-desc">Start date ↓</option>
<option value="startDate-asc">Start date ↑</option>
<option value="budget-desc">EU budget ↓</option>
<option value="budget-asc">EU budget ↑</option>
<option value="acronym-asc">Acronym A→Z</option>
</select>
</div>
<button class="btn-reset" id="btn-reset" style="margin-bottom:4px">↺ Reset filters</button>
<hr class="fr">
<div class="fb">
<span class="ft">Scope</span>
<div class="cl" id="f-scope"></div>
</div>
<hr class="fr">
<div class="fb">
<span class="ft">Programme</span>
<div class="cl" id="f-programme"></div>
</div>
<hr class="fr">
<div class="fb">
<span class="ft">Type of action</span>
<div class="cl" id="f-scheme-group"></div>
</div>
<hr class="fr">
<div id="role-section"></div>
<hr class="fr">
<div class="fb">
<span class="ft">Status</span>
<div class="cl" id="f-status"></div>
</div>
<hr class="fr">
<div class="fb">
<span class="ft">Partner Country</span>
<div class="cl" id="f-country"></div>
</div>
</aside>
<main class="main">
<!-- TAB: PROJECTS -->
<div class="tab-panel on" id="tab-projects">
<div class="rbar">
<div style="display:flex;flex-direction:column;gap:6px;flex:1;min-width:0">
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap">
<div class="rcount" id="rcount"></div>
<div class="vbtns">
<button class="vbtn on" id="v-list" onclick="setView('list')">☰ List</button>
<button class="vbtn" id="v-grid" onclick="setView('grid')">⊞ Grid</button>
</div>
</div>
<div id="active-filters" style="display:flex;flex-wrap:wrap;gap:5px;min-height:0"></div>
</div>
</div>
<div id="grid"><div class="empty"><span class="big">◌</span>Loading…</div></div>
</div>
<!-- TAB: PARTNERS -->
<div class="tab-panel" id="tab-partners">
<div class="chart-box" style="margin-bottom:0">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:8px">
<div class="chart-title" style="margin:0">Partner Organisations</div>
<div id="partner-filter-active" style="font-family:'Fira Code',monospace;font-size:.65rem;color:var(--it);display:none">
<span id="partner-filter-label"></span>
<span onclick="clearPartnerFilter()" style="cursor:pointer;margin-left:6px;opacity:.7">✕ Clear</span>
</div>
</div>
<div class="partner-search">
<select id="partner-type">
<option value="">All types</option>
<option value="REC">REC — Research Centre</option>
<option value="HES">HES — Higher Education</option>
<option value="PRC">PRC — Private company</option>
<option value="PUB">PUB — Public body</option>
<option value="OTH">OTH — Other</option>
</select>
<select id="partner-region">
<option value="">All regions</option>
<option value="Northern Europe">Northern Europe</option>
<option value="Western Europe">Western Europe</option>
<option value="Southern Europe">Southern Europe</option>
<option value="Central & Eastern Europe">Central & Eastern Europe</option>
<option value="Americas & Oceania">Americas & Oceania</option>
<option value="Asia">Asia</option>
<option value="Africa">Africa</option>
<option value="Rest of the World">Rest of the World</option>
</select>
</div>
<div style="overflow-x:auto">
<table class="ptable">
<thead><tr>
<th>Organisation</th><th>Abbrev.</th><th>Country</th><th>Type</th>
<th>PIC</th><th id="partners-proj-col">Projects with IT</th><th>Total EU contrib.</th>
</tr></thead>
<tbody id="partner-tbody"></tbody>
</table>
</div>
<div class="pager" id="partner-pager"></div>
</div>
</div>
<!-- TAB: GEOGRAPHY -->
<div class="tab-panel" id="tab-geography">
<div class="geo-grid">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div class="chart-box" style="padding:10px">
<div class="chart-title">Partner countries — participations</div>
<div id="geo-map-wrap" style="position:relative">
<svg id="geo-map" viewBox="0 0 391 333" style="width:100%;height:auto;display:block"></svg>
<div id="geo-tooltip" style="position:absolute;display:none;background:var(--ink);color:#fff;padding:5px 9px;border-radius:4px;font-size:.72rem;pointer-events:none;white-space:nowrap;z-index:10"></div>
</div>
<div id="geo-legend" style="display:flex;gap:6px;align-items:center;margin-top:6px;font-size:.65rem;color:var(--ink-light);font-family:'Fira Code',monospace">
<span>fewer</span>
<div id="geo-legend-scale" style="display:flex;gap:1px"></div>
<span>more</span>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div class="chart-box">
<div class="chart-title">Top 25 Partner Countries (excl. FR)</div>
<canvas id="chart-countries"></canvas>
</div>
<div>
<div class="section-title" style="margin-bottom:8px">Partner Regions</div>
<div class="region-grid" id="region-grid" style="grid-template-columns:1fr 1fr"></div>
</div>
</div>
</div>
<div class="chart-box">
<div class="chart-title">Partner regions by project start year</div>
<canvas id="chart-region-time"></canvas>
</div>
</div>
</div>
<!-- TAB: DISCIPLINES -->
<div class="tab-panel" id="tab-disciplines">
<div class="disc-main">
<div class="acc-wrap">
<div class="acc-all-row" onclick="resetDomainFilter()">
<div>
<span class="acc-all-label">All disciplines</span>
<div style="font-family:'Fira Code',monospace;font-size:.55rem;color:var(--ink-xlight);letter-spacing:.04em;margin-top:2px">reset selection & view</div>
</div>
</div>
<div class="acc-body" id="acc-body"></div>
</div>
<div class="sel-wrap">
<div class="sel-title">Selected disciplines</div>
<div class="switch-row">
<button class="sw-btn on" id="sw-or" onclick="setDomOp('OR')">OR</button>
<button class="sw-btn" id="sw-and" onclick="setDomOp('AND')">AND</button>
</div>
<div class="sel-list" id="sel-list">
<div class="sel-empty">Click "select" on a discipline<br>in the tree<br>(up to 3)</div>
</div>
<div class="sel-results" id="sel-results"></div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px">
<div class="chart-box">
<div class="chart-title" id="chart-domains-title">Scientific Disciplines overview (EuroSciVoc)</div>
<div style="position:relative;height:440px"><canvas id="chart-domains"></canvas></div>
</div>
<div class="chart-box">
<div class="chart-title">Top 25 Sub-disciplines</div>
<div style="position:relative;height:440px"><canvas id="chart-l2-top25"></canvas></div>
</div>
</div>
</div>
<!-- TAB: BUDGET -->
<div class="tab-panel" id="tab-budget">
<div class="stat-row" id="budget-stats"></div>
<div class="chart-grid">
<div class="chart-box">
<div class="chart-title" id="ct-hist">IT Grants Distribution (k€)</div>
<canvas id="chart-hist"></canvas>
</div>
<div class="chart-box">
<div class="chart-title" id="ct-scheme">IT Budget by Funding Type</div>
<canvas id="chart-scheme"></canvas>
</div>
<div class="chart-box full tall">
<div class="chart-title" id="ct-time">IT Annual Budget (prorata over project duration)</div>
<canvas id="chart-time"></canvas>
</div>
</div>
</div>
<!-- TAB: STATS -->
<div class="tab-panel" id="tab-stats"></div>
<!-- TAB: TIMELINE -->
<div class="tab-panel" id="tab-timeline">
<div class="gantt-controls">
<select id="gantt-sort">
<option value="end-asc">End date ↑</option>
<option value="end-desc">End date ↓</option>
</select>
<select id="gantt-filter">
<option value="SIGNED">Ongoing only</option>
<option value="ALL">All projects</option>
</select>
<span style="font-family:'Fira Code',monospace;font-size:.65rem;color:var(--ink-light)">
Red line = today | Click a bar to open project
|
<span style="display:inline-flex;align-items:center;gap:4px">
<span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--it)"></span>Ongoing
<span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#92600a;margin-left:4px"></span>Closed
</span>
</span>
</div>
<div class="gantt-wrap" id="gantt-wrap">
<div class="empty"><span class="big">◌</span>Loading…</div>
</div>
<div class="chart-box" style="margin-top:12px">
<div class="chart-title">Simultaneous active projects per year</div>
<canvas id="chart-concurrent"></canvas>
</div>
</div>
<!-- TAB: ABOUT -->
<div class="tab-panel" id="tab-about">
<div class="about-page">
<div class="about-hdr">
<div>
<div class="about-hdr-title">About this observatory</div>
<div class="about-hdr-sub">EU research data from CORDIS · INRAE Transfert SAS</div>
</div>
</div>
<div class="about-body">
<!-- MISSION -->
<div class="about-sec">
<div class="about-sec-title">Mission</div>
<p class="about-text">This observatory tracks all European research projects across FP7, H2020, and Horizon Europe involving <strong>INRAE Transfert (IT)</strong> or <strong>INRAE</strong>. Use the <strong>Scope</strong> filter in the left sidebar to choose which entity (or both) to look at. The tool monitors project distribution, partner networks, geographic reach, scientific disciplines, and budget allocation across EU research programmes.</p>
</div>
<!-- DATA SOURCES -->
<div class="about-sec">
<div class="about-sec-title">Data sources</div>
<svg viewBox="0 0 620 72" width="100%" style="display:block;margin-bottom:16px" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="16" width="118" height="40" rx="5" fill="#e8f0fb" stroke="#1a4f8a" stroke-width="1.5"/>
<text x="69" y="32" text-anchor="middle" font-family="'Fira Code',monospace" font-size="9.5" fill="#1a4f8a" font-weight="500">CORDIS</text>
<text x="69" y="47" text-anchor="middle" font-family="'Fira Code',monospace" font-size="8.5" fill="#4a90d9">ZIP exports</text>
<line x1="128" y1="36" x2="156" y2="36" stroke="#1a4f8a" stroke-width="1.5"/>
<polygon points="156,31 165,36 156,41" fill="#1a4f8a"/>
<rect x="165" y="16" width="140" height="40" rx="5" fill="#e8f0fb" stroke="#1a4f8a" stroke-width="1.5"/>
<text x="235" y="32" text-anchor="middle" font-family="'Fira Code',monospace" font-size="9.5" fill="#1a4f8a" font-weight="500">prepare_data.py</text>
<text x="235" y="47" text-anchor="middle" font-family="'Fira Code',monospace" font-size="8.5" fill="#4a90d9">Python · GitHub Actions</text>
<line x1="305" y1="36" x2="333" y2="36" stroke="#1a4f8a" stroke-width="1.5"/>
<polygon points="333,31 342,36 333,41" fill="#1a4f8a"/>
<rect x="342" y="16" width="140" height="40" rx="5" fill="#e8f0fb" stroke="#1a4f8a" stroke-width="1.5"/>
<text x="412" y="32" text-anchor="middle" font-family="'Fira Code',monospace" font-size="9.5" fill="#1a4f8a" font-weight="500">inrae_projects</text>
<text x="412" y="47" text-anchor="middle" font-family="'Fira Code',monospace" font-size="8.5" fill="#4a90d9">.json (static)</text>
<line x1="482" y1="36" x2="510" y2="36" stroke="#1a4f8a" stroke-width="1.5"/>
<polygon points="510,31 519,36 510,41" fill="#1a4f8a"/>
<rect x="519" y="16" width="90" height="40" rx="5" fill="#1a4f8a" stroke="#1a4f8a" stroke-width="1.5"/>
<text x="564" y="32" text-anchor="middle" font-family="'Fira Code',monospace" font-size="9.5" fill="#fff" font-weight="500">Observatory</text>
<text x="564" y="47" text-anchor="middle" font-family="'Fira Code',monospace" font-size="8.5" fill="rgba(255,255,255,.7)">GitHub Pages</text>
</svg>
<ul class="about-list">
<li><strong>Source</strong> — <a href="https://cordis.europa.eu/projects" target="_blank">cordis.europa.eu/projects</a> (official EU open data portal)</li>
<li><strong>Programmes</strong> — FP7 (2007–2013) · H2020 (2014–2020) · Horizon Europe (2021–2027)</li>
<li><strong>Last data update</strong> — <span id="about-data-date" style="font-family:'Fira Code',monospace">–</span></li>
<li><strong>Update frequency</strong> — every Monday, automated via GitHub Actions</li>
</ul>
<div class="about-note">⚠ FP6 and earlier programmes are not included. Their CORDIS data exports use a different structure — missing per-partner EC contributions, no EuroSciVoc taxonomy, and different project identifiers — which makes them incompatible with the current pipeline.</div>
</div>
<!-- HOW TO READ -->
<div class="about-sec">
<div class="about-sec-title">How to read each tab</div>
<div class="about-tab-grid">
<div class="about-tab-card">
<div class="about-tab-icon">📋</div>
<div class="about-tab-name">Projects</div>
<div class="about-tab-tip">Main project list. Use sidebar filters to narrow by programme, role, or status. The search bar covers titles, acronyms, and keywords. Switch to Grid view for a denser layout.</div>
</div>
<div class="about-tab-card">
<div class="about-tab-icon">🤝</div>
<div class="about-tab-name">Partners</div>
<div class="about-tab-tip">All organisations that have co-participated with the active scope (IT, INRAE, or both). The "Projects" column counts how many projects each org shares with the scope. Filter by type (REC, HES, PRC…) or by macro-region.</div>
</div>
<div class="about-tab-card">
<div class="about-tab-icon">🌍</div>
<div class="about-tab-name">Geography</div>
<div class="about-tab-tip">Choropleth and bar chart reflect the active scope's portfolio. Click a country in the bar chart to carry a country filter into the Projects view.</div>
</div>
<div class="about-tab-card">
<div class="about-tab-icon">🔬</div>
<div class="about-tab-name">Disciplines</div>
<div class="about-tab-tip">EuroSciVoc taxonomy (L1–L5). Select up to 3 disciplines and combine with OR / AND logic. Counts reflect the active scope's portfolio, independent of sidebar filters.</div>
</div>
<div class="about-tab-card">
<div class="about-tab-icon">💶</div>
<div class="about-tab-name">Budget</div>
<div class="about-tab-tip">Shows the active scope's EU contribution (IT, INRAE, or summed when both/neither are selected). The annual chart prorates each grant over the project duration. All three charts respond to sidebar filters.</div>
</div>
<div class="about-tab-card">
<div class="about-tab-icon">📊</div>
<div class="about-tab-name">Stats</div>
<div class="about-tab-tip">Statistical comparison of INRAE projects with vs without IT participation (Mann-Whitney U + descriptive stats). Independent of sidebar filters. Default scope: RIA only (most representative scheme group); toggle to all schemes if needed.</div>
</div>
<div class="about-tab-card">
<div class="about-tab-icon">📅</div>
<div class="about-tab-name">Timeline</div>
<div class="about-tab-tip">Gantt view: each bar is one project, coloured by programme. Red line = today. Use "Ongoing only" to hide closed projects. Click any bar to open the project detail.</div>
</div>
</div>
</div>
<!-- METHODOLOGY -->
<div class="about-sec">
<div class="about-sec-title">Methodology</div>
<dl class="about-dl">
<dt>Annual budget prorata</dt>
<dd>Each project's EU contribution (for the active scope) is distributed evenly over its duration. A project spanning 3.5 years with €700k contribution yields ~€200k/year. Years partially covered receive a proportional share. This allows meaningful cross-year comparisons despite uneven project starts and ends.</dd>
<dt>Scope filter (IT / INRAE)</dt>
<dd>The <strong>Scope</strong> filter in the left sidebar controls which projects are visible. <strong>IT only</strong>: projects where INRAE Transfert SAS is a partner. <strong>INRAE only</strong>: projects where the broader INRAE research institute participates (typically a much larger portfolio). <strong>Both checked</strong>: only projects shared by IT and INRAE (intersection). <strong>Neither checked</strong> (default): every project involving either entity (union of all). When both or neither are selected, budget figures are summed (IT + INRAE combined). Each project's card shows up to three budget chips: total EU budget, IT contribution, INRAE contribution — only the relevant ones are displayed.</dd>
<dt>FP7 → funding type mapping</dt>
<dd>FP7 funding scheme codes are normalised to categories equivalent to H2020/HE types to enable cross-programme budget breakdowns. Mappings include: <code>CP</code>, <code>CP-TP</code>, <code>CP-IP</code> → RIA · <code>CP-*-SICA</code> → RIA · <code>MC-*</code> (Marie Curie) → MSCA · <code>ERC-*</code> → ERC · <code>BSG-SME*</code> → EIC · <code>NoE</code> (Networks of Excellence) → CSA · <code>HORIZON-AG/PARC</code> → COFUND.</dd>
<dt>Exclusions</dt>
<dd>FP6 and earlier programmes are absent from the CORDIS export used by the pipeline (their data structure differs significantly). EuroSciVoc taxonomy is unavailable for FP7 and earlier projects.</dd>
</dl>
</div>
</div><!-- /about-body -->
<div class="about-footer">
Built by Anthony Vermue
<span style="opacity:.4">·</span>
<a href="https://github.com/avermue/cordis-it" target="_blank">github.com/avermue/cordis-it ↗</a>
<span id="about-version"></span>
</div>
</div><!-- /about-page -->
</div>
</main>
</div>
<!-- MODAL -->
<div class="overlay" id="overlay" onclick="overlayClick(event)">
<div class="modal">
<div class="mhd">
<div class="macro" id="m-acro"></div>
<div class="mtw">
<div class="mtitle" id="m-title"></div>
<div class="mtags" id="m-tags"></div>
</div>
<button class="mclose" onclick="closeModal()">✕</button>
</div>
<div class="mbody">
<div class="msec">
<div class="msec-title">General information</div>
<dl class="kv" id="m-info"></dl>
</div>
<div class="msec">
<div class="msec-title" id="m-it-title">IT participation</div>
<dl class="kv" id="m-it"></dl>
</div>
<div class="msec full">
<div class="msec-title">Objective</div>
<div id="m-obj" style="font-size:.79rem;line-height:1.65;color:var(--ink-mid);max-height:260px;overflow-y:auto;padding-right:4px"></div>
</div>
<div class="msec full">
<div class="msec-title" id="m-pt-title">Partners</div>
<div style="overflow-x:auto;max-height:300px;overflow-y:auto">
<table class="mptable">
<thead><tr><th>Organisation</th><th>Country</th><th>Role</th><th>Type</th><th>EU Contribution</th></tr></thead>
<tbody id="m-partners"></tbody>
</table>
</div>
</div>
</div>
<div class="mfoot"><a id="m-link" href="#" target="_blank" class="btn-primary">View on CORDIS ↗</a></div>
</div>
</div>
<!-- JS Modules (order matters: data → modules → app last) -->
<script src="js/data.js"></script>
<script src="js/sidebar.js"></script>
<script src="js/cards.js"></script>
<script src="js/budget.js"></script>
<script src="js/partners.js"></script>
<script src="js/disciplines.js"></script>
<script src="js/geography.js"></script>
<script src="js/timeline.js"></script>
<script src="js/modal.js"></script>
<script src="js/about.js"></script>
<script src="js/stats.js"></script>
<script src="js/app.js"></script>
</body>
</html>