Skip to content

Commit 486d4b8

Browse files
zh1pengzh1peng
committed
update index
1 parent 3b6ef0d commit 486d4b8

File tree

1 file changed

+112
-1
lines changed

1 file changed

+112
-1
lines changed

‎index.html‎

Lines changed: 112 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,120 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>TaskBeacon</title>
77

8+
<!-- Fonts and Styles -->
9+
<link rel="stylesheet" href="css/style.css" />
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
11+
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
12+
</head>
13+
14+
<body>
15+
<header class="header">
16+
<div class="logo">
17+
<span class="logo-icon" role="img" aria-label="Beacon">📡</span>
18+
<span>TaskBeacon</span>
19+
</div>
20+
<nav class="nav">
21+
<button id="menu-button">Menu ▾</button>
22+
<ul class="dropdown hidden" id="dropdown-menu">
23+
<li><a href="taps.html">TAPS</a></li>
24+
<li><a href="psyflow.html">PsyFlow</a></li>
25+
<li><a href="tasks.html">Tasks</a></li>
26+
<li><a href="future.html">Future Directions</a></li>
27+
</ul>
28+
</nav>
29+
</header>
30+
31+
<main class="container">
32+
<!-- Hero -->
33+
<section class="hero">
34+
<h2>STANDARDIZING COGNITIVE TASKS</h2>
35+
<p>A platform for visioning and sharing standard cognitive tasks</p>
36+
</section>
37+
38+
<!-- Main Features (Each as Its Own Row) -->
39+
<section class="card" id="taps">
40+
<span class="icon" role="img" aria-label="TAPS">📝</span>
41+
<div>
42+
<h2>TAPS</h2>
43+
<div class="content" data-src="content/taps.md">Loading...</div>
44+
<a href="taps.html">Learn more →</a>
45+
</div>
46+
</section>
47+
48+
<section class="card" id="psyflow">
49+
<span class="icon" role="img" aria-label="PsyFlow">🧠</span>
50+
<div>
51+
<h2>PsyFlow</h2>
52+
<div class="content" data-src="content/psyflow.md">Loading...</div>
53+
<a href="psyflow.html">Learn more →</a>
54+
</div>
55+
</section>
56+
57+
<section class="card" id="tasks">
58+
<span class="icon" role="img" aria-label="Tasks">📚</span>
59+
<div>
60+
<h2>Tasks</h2>
61+
<div class="content" data-src="content/tasks.md">Loading...</div>
62+
<a href="tasks.html">Browse all →</a>
63+
</div>
64+
</section>
65+
66+
<section class="card" id="future">
67+
<span class="icon" role="img" aria-label="Future">🚀</span>
68+
<div>
69+
<h2>Future Directions</h2>
70+
<div class="content" data-src="content/future.md">Loading...</div>
71+
<a href="future.html">Read about it →</a>
72+
</div>
73+
</section>
74+
75+
<!-- Task Library (Optional Section) -->
76+
<section class="task-library">
77+
<h2>Task Library</h2>
78+
<ul class="content" data-src="content/task-list.md"></ul>
79+
</section>
80+
81+
<!-- Core Team -->
82+
<section class="team" id="team">
83+
<h2>Core Team</h2>
84+
<div class="team-grid">
85+
<div class="member">
86+
<span class="icon" role="img" aria-label="Member">👤</span>
87+
<h3>Zhipeng Wen</h3>
88+
<p>Principal Investigator</p>
89+
<a href="mailto:[email protected]">[email protected]</a>
90+
</div>
91+
<!-- Add more members as needed -->
92+
</div>
93+
</section>
94+
95+
<footer>
96+
<button class="btn">GET STARTED</button>
97+
</footer>
98+
</main>
99+
100+
<!-- Scripts -->
101+
<script src="js/menu.js"></script>
102+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
103+
<script>
104+
const converter = new showdown.Converter();
105+
document.querySelectorAll('.content').forEach(async element => {
106+
const src = element.getAttribute('data-src');
107+
if (src) {
108+
try {
109+
const response = await fetch(src);
110+
const text = await response.text();
111+
if (element.tagName.toLowerCase() === 'ul') {
112+
const items = text.split(/\r?\n/).filter(Boolean).map(t => `<li>${converter.makeHtml(t)}</li>`).join('');
113+
element.innerHTML = items;
114+
} else {
115+
element.innerHTML = converter.makeHtml(text);
116+
}
117+
} catch (err) {
118+
element.textContent = 'Content failed to load.';
8119
}
9120
}
10121
});

0 commit comments

Comments
 (0)