Redesign site with modular pages

zh1peng · zh1peng · commit c65b3b38c043 · 2025-06-12T19:15:59.000+08:00
diff --git a/README.md b/README.md
@@ -1,2 +1,20 @@
-# TAPS-Website
-Task and Paradigm Structure
+# TaskBeacon Website
+
+This repository contains the static site for **TaskBeacon**. The homepage loads
+section text from Markdown files in `content/` so you can edit the copy without
+changing the HTML layout.
+
+## Structure
+
+```
+index.html
+[taps|psyflow|tasks|future].html  - subpages
+css/style.css                     - site styles
+js/menu.js                        - drop-down menu logic
+content/*.md                      - editable text snippets
+assets/icons/                     - place pixel icons here
+assets/team/                      - place team headshots here
+```
+
+Simply modify the Markdown files or HTML pages and push to GitHub Pages to
+update the site.
diff --git a/assets/fonts/.gitkeep b/assets/fonts/.gitkeep
diff --git a/assets/icons/.gitkeep b/assets/icons/.gitkeep
diff --git a/assets/team/.gitkeep b/assets/team/.gitkeep
diff --git a/content/future.md b/content/future.md
@@ -0,0 +1 @@
+Explore LLM-powered generation of cognitive tasks using natural language.
diff --git a/content/psyflow.md b/content/psyflow.md
@@ -0,0 +1,3 @@
+Assist development of tasks using **Psyflow**.
+
+Instructions and helpers will be added here.
diff --git a/content/taps.md b/content/taps.md
@@ -0,0 +1,3 @@
+Define the **TAPS** format for cognitive tasks.
+
+Provide documentation and guidelines here.
diff --git a/content/task-list.md b/content/task-list.md
@@ -0,0 +1,4 @@
+Go/No-Go
+Stroop Task
+N-Back
+Dot Probe
diff --git a/content/tasks.md b/content/tasks.md
@@ -0,0 +1,3 @@
+Find exciting tasks and their variations.
+
+More details coming soon.
diff --git a/css/.gitkeep b/css/.gitkeep
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,105 @@
+body {
+  font-family: 'Inter', sans-serif;
+  background: #fdfdfd;
+  color: #222;
+  margin: 0;
+  padding: 0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background: #fff;
+  border-bottom: 2px solid #eee;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  font-size: 1.5rem;
+}
+
+.logo-icon {
+  margin-right: 10px;
+  font-size: 32px;
+}
+
+.nav button {
+  background: none;
+  border: none;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.dropdown {
+  position: absolute;
+  background: white;
+  list-style: none;
+  border: 1px solid #ddd;
+  margin-top: 10px;
+  padding: 0;
+  right: 2rem;
+  z-index: 10;
+}
+
+.dropdown li {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid #eee;
+}
+
+.dropdown li a {
+  text-decoration: none;
+  color: #222;
+}
+
+.hidden {
+  display: none;
+}
+
+.container {
+  padding: 2rem;
+  max-width: 900px;
+  margin: auto;
+}
+
+.card {
+  display: flex;
+  background: #fff;
+  border: 1px solid #ddd;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  align-items: center;
+  border-radius: 6px;
+}
+
+.card .icon {
+  font-size: 48px;
+  margin-right: 1.2rem;
+}
+
+.card h2 {
+  margin: 0 0 0.5rem 0;
+}
+
+.team {
+  margin-top: 3rem;
+}
+
+.team-grid {
+  display: flex;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.member {
+  text-align: center;
+}
+
+.member .icon {
+  font-size: 64px;
+  display: block;
+  margin-bottom: 0.5rem;
+}
diff --git a/future.html b/future.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Future Directions - TaskBeacon</title>
+  <link rel="stylesheet" href="css/style.css"/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
+</head>
+<body>
+  <header class="header">
+    <div class="logo">
+      <span class="logo-icon" role="img" aria-label="Beacon">📡</span>
+      <span>TaskBeacon</span>
+    </div>
+    <nav class="nav">
+      <button id="menu-button">Menu ▾</button>
+      <ul class="dropdown hidden" id="dropdown-menu">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="taps.html">TAPS</a></li>
+        <li><a href="psyflow.html">PsyFlow</a></li>
+        <li><a href="tasks.html">Tasks</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main class="container">
+    <h1>Future Directions</h1>
+    <p>Explore upcoming ideas and features for TaskBeacon.</p>
+  </main>
+
+  <script src="js/menu.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>TaskBeacon</title>
+  <link rel="stylesheet" href="css/style.css"/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
+</head>
+<body>
+  <header class="header">
+    <div class="logo">
+      <span class="logo-icon" role="img" aria-label="Beacon">📡</span>
+      <span>TaskBeacon</span>
+    </div>
+    <nav class="nav">
+      <button id="menu-button">Menu ▾</button>
+      <ul class="dropdown hidden" id="dropdown-menu">
+        <li><a href="taps.html">TAPS</a></li>
+        <li><a href="psyflow.html">PsyFlow</a></li>
+        <li><a href="tasks.html">Tasks</a></li>
+        <li><a href="future.html">Future Directions</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main class="container">
+    <section class="card" id="taps">
+      <span class="icon" role="img" aria-label="TAPS">📝</span>
+      <div>
+        <h2>TAPS</h2>
+        <div class="content" data-src="content/taps.md">Loading...</div>
+        <a href="taps.html">Learn more →</a>
+      </div>
+    </section>
+
+    <section class="card" id="psyflow">
+      <span class="icon" role="img" aria-label="PsyFlow">🧠</span>
+      <div>
+        <h2>PsyFlow</h2>
+        <div class="content" data-src="content/psyflow.md">Loading...</div>
+        <a href="psyflow.html">Learn more →</a>
+      </div>
+    </section>
+
+    <section class="card" id="tasks">
+      <span class="icon" role="img" aria-label="Tasks">📚</span>
+      <div>
+        <h2>Tasks</h2>
+        <div class="content" data-src="content/tasks.md">Loading...</div>
+        <a href="tasks.html">Browse all →</a>
+      </div>
+    </section>
+
+    <section class="card" id="future">
+      <span class="icon" role="img" aria-label="Future">🚀</span>
+      <div>
+        <h2>Future Directions</h2>
+        <div class="content" data-src="content/future.md">Loading...</div>
+        <a href="future.html">Read about it →</a>
+      </div>
+    </section>
+
+    <section class="team" id="team">
+      <h2>Core Team</h2>
+      <div class="team-grid">
+        <div class="member">
+          <span class="icon" role="img" aria-label="Member">👤</span>
+          <h3>Zhipeng Wen</h3>
+          <p>Principal Investigator</p>
+          <a href="mailto:zhipeng30@foxmail.com">zhipeng30@foxmail.com</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <script src="js/menu.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js"></script>
+  <script>
+    const converter = new showdown.Converter();
+    document.querySelectorAll('.content').forEach(async el => {
+      const src = el.getAttribute('data-src');
+      if (src) {
+        try {
+          const resp = await fetch(src);
+          const txt = await resp.text();
+          el.innerHTML = converter.makeHtml(txt);
+        } catch (e) {
+          el.textContent = 'Content failed to load.';
+        }
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/js/.gitkeep b/js/.gitkeep
diff --git a/js/menu.js b/js/menu.js
@@ -0,0 +1,3 @@
+document.getElementById('menu-button').addEventListener('click', () => {
+  document.getElementById('dropdown-menu').classList.toggle('hidden');
+});
diff --git a/psyflow.html b/psyflow.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>PsyFlow - TaskBeacon</title>
+  <link rel="stylesheet" href="css/style.css"/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
+</head>
+<body>
+  <header class="header">
+    <div class="logo">
+      <span class="logo-icon" role="img" aria-label="Beacon">📡</span>
+      <span>TaskBeacon</span>
+    </div>
+    <nav class="nav">
+      <button id="menu-button">Menu ▾</button>
+      <ul class="dropdown hidden" id="dropdown-menu">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="taps.html">TAPS</a></li>
+        <li><a href="tasks.html">Tasks</a></li>
+        <li><a href="future.html">Future Directions</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main class="container">
+    <h1>PsyFlow</h1>
+    <p>Information about the PsyFlow framework goes here.</p>
+  </main>
+
+  <script src="js/menu.js"></script>
+</body>
+</html>
diff --git a/taps.html b/taps.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>TAPS - TaskBeacon</title>
+  <link rel="stylesheet" href="css/style.css"/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
+</head>
+<body>
+  <header class="header">
+    <div class="logo">
+      <span class="logo-icon" role="img" aria-label="Beacon">📡</span>
+      <span>TaskBeacon</span>
+    </div>
+    <nav class="nav">
+      <button id="menu-button">Menu ▾</button>
+      <ul class="dropdown hidden" id="dropdown-menu">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="psyflow.html">PsyFlow</a></li>
+        <li><a href="tasks.html">Tasks</a></li>
+        <li><a href="future.html">Future Directions</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main class="container">
+    <h1>TAPS</h1>
+    <p>This is where you describe the TAPS format in detail.</p>
+  </main>
+
+  <script src="js/menu.js"></script>
+</body>
+</html>
diff --git a/tasks.html b/tasks.html

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Explore LLM-powered generation of cognitive tasks using natural language.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+Assist development of tasks using Psyflow.`
	`2`	`+`
	`3`	`+Instructions and helpers will be added here.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+Define the TAPS format for cognitive tasks.`
	`2`	`+`
	`3`	`+Provide documentation and guidelines here.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+Find exciting tasks and their variations.`
	`2`	`+`
	`3`	`+More details coming soon.`