Skip to content

Commit 86f6972

Browse files
ClaireChenHKSClaireChenHKS
authored
Merge pull request #30 from code4policy/templateliyang
new modified
2 parents bdb9b43 + 2fb9457 commit 86f6972

3 files changed

Lines changed: 317 additions & 44 deletions

File tree

‎app.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ const pages = {
99
about: document.getElementById("page-about"),
1010
};
1111

12-
const navButtons = document.querySelectorAll(".nav__btn");
12+
const navButtons = document.querySelectorAll(".nav__link");
13+
const mobileToggle = document.querySelector(".nav__mobile-toggle");
14+
const navMenu = document.querySelector(".nav");
1315

1416
function setRoute(route) {
1517
Object.entries(pages).forEach(([k, el]) => {
@@ -18,12 +20,21 @@ function setRoute(route) {
1820
navButtons.forEach((b) => {
1921
b.setAttribute("aria-current", b.dataset.route === route ? "page" : "false");
2022
});
23+
// Close mobile menu after navigation
24+
if (navMenu) navMenu.classList.remove("nav--open");
2125
}
2226

2327
navButtons.forEach((btn) => {
2428
btn.addEventListener("click", () => setRoute(btn.dataset.route));
2529
});
2630

31+
// Mobile menu toggle
32+
if (mobileToggle && navMenu) {
33+
mobileToggle.addEventListener("click", () => {
34+
navMenu.classList.toggle("nav--open");
35+
});
36+
}
37+
2738
// ---------------------------
2839
// Story 1.2 mini-game placeholder
2940
// ---------------------------

‎index.html‎

Lines changed: 50 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Zero-Sum Thinking Explorer (Story 1–3)</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
710
<link rel="stylesheet" href="./styles/style.css" />
811
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
912
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css" />
@@ -12,18 +15,35 @@
1215
<body>
1316
<header class="header">
1417
<div class="container header__inner">
15-
<div class="brand">
16-
<div class="brand__title">Zero-Sum Explorer</div>
17-
<div class="brand__subtitle">Learn · Explore · Test · Visualize</div>
18-
</div>
18+
<a href="#" class="brand" onclick="event.preventDefault();">
19+
<div class="brand__logo">
20+
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
21+
<circle cx="18" cy="18" r="17" stroke="currentColor" stroke-width="2"/>
22+
<path d="M10 18h16M18 10v16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
23+
<circle cx="18" cy="18" r="6" fill="currentColor" opacity="0.15"/>
24+
</svg>
25+
</div>
26+
<div class="brand__text">
27+
<div class="brand__title">Zero-Sum Explorer</div>
28+
<div class="brand__subtitle">Understanding Economic Mindsets</div>
29+
</div>
30+
</a>
1931

2032
<nav class="nav">
21-
<button class="nav__btn" data-route="learn" aria-current="page">Learn</button>
22-
<button class="nav__btn" data-route="explore">Explore</button>
23-
<button class="nav__btn" data-route="test">Test</button>
24-
<button class="nav__btn" data-route="visualization">Visualization</button>
25-
<button class="nav__btn" data-route="about">About</button>
33+
<button class="nav__link" data-route="learn" aria-current="page">Learn</button>
34+
<button class="nav__link" data-route="explore">Explore</button>
35+
<button class="nav__link" data-route="test">Test</button>
36+
<button class="nav__link" data-route="visualization">Visualization</button>
37+
<button class="nav__link" data-route="about">About</button>
2638
</nav>
39+
40+
<button class="nav__mobile-toggle" aria-label="Toggle navigation menu">
41+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
42+
<line x1="3" y1="6" x2="21" y2="6"/>
43+
<line x1="3" y1="12" x2="21" y2="12"/>
44+
<line x1="3" y1="18" x2="21" y2="18"/>
45+
</svg>
46+
</button>
2747
</div>
2848
</header>
2949

@@ -178,21 +198,29 @@ <h2>Mini game (2-minute intuition demo)</h2>
178198
</div>
179199
</div>
180200

181-
<div class="card">
182-
<h2>What is Zero-Sum Thinking? (Video Introduction)</h2>
183-
<p class="muted">
184-
Watch this short explanation to understand the core concept and why it matters.
201+
<div class="card video-card">
202+
<div class="video-header">
203+
<span class="video-badge">🎬 Video</span>
204+
<h2>Animated Explanation</h2>
205+
</div>
206+
<p class="video-description">
207+
Watch this short video to understand the concept of zero-sum thinking and how it affects our everyday decisions.
185208
</p>
186209

187-
<iframe
188-
class="video"
189-
src="https://www.youtube.com/embed/jILgxeNBK_8"
190-
title="Zero-sum thinking explainer"
191-
frameborder="0"
192-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
193-
allowfullscreen
194-
style="width: 100%; height: 400px; border-radius: 12px; border: 1px solid var(--border);"
195-
></iframe>
210+
<div class="video-container">
211+
<iframe
212+
class="video-frame"
213+
src="https://www.youtube.com/embed/jeASPXeIxQQ"
214+
title="Zero-sum thinking explainer"
215+
frameborder="0"
216+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
217+
allowfullscreen
218+
></iframe>
219+
</div>
220+
221+
<div class="video-footer">
222+
<span class="video-source">📺 Source: YouTube</span>
223+
</div>
196224
</div>
197225
</section>
198226

0 commit comments

Comments
 (0)