Skip to content

Commit 8454ef8

Browse files
zh1pengzh1peng
committed
Remove binary icons and use emoji
1 parent c552a8f commit 8454ef8

File tree

9 files changed

+169
-0
lines changed

9 files changed

+169
-0
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
11
# TAPS-Website
22
Task and Paradigm Structure
3+
4+
## Editing Content
5+
6+
All section text on the homepage is loaded from Markdown files in the
7+
`content/` directory. Edit those files to change the copy without touching the
8+
HTML.

‎assets/fonts/.gitkeep‎

Whitespace-only changes.

‎assets/icons/.gitkeep‎

Whitespace-only changes.

‎content/library.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Find exciting tasks and their variations.
2+
3+
More details coming soon.

‎content/psyflow.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Assist development of tasks using **Psyflow**.
2+
3+
Instructions and helpers will be added here.

‎content/taps.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Define the **TAPS** format for cognitive tasks.
2+
3+
Provide documentation and guidelines here.

‎content/task-list.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Go/No-Go
2+
Stroop Task
3+
N-Back
4+
Dot Probe

‎index.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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>TaskBeacon</title>
7+
<link rel="stylesheet" href="styles/main.css"/>
8+
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<header>
13+
<h1>🟡 TASKBEACON</h1>
14+
<button class="btn">Browse Tasks</button>
15+
</header>
16+
17+
<section class="hero">
18+
<h2>STANDARDIZING COGNITIVE TASKS</h2>
19+
<p>A platform for visioning and sharing standard cognitive tasks</p>
20+
</section>
21+
22+
<section class="features">
23+
<div class="card" id="taps-section">
24+
<span class="icon" role="img" aria-label="TAPS icon">📝</span>
25+
<h3>STANDARD STRUCTURE</h3>
26+
<div class="content" data-src="content/taps.md">Loading...</div>
27+
</div>
28+
<div class="card" id="psyflow-section">
29+
<span class="icon" role="img" aria-label="Psyflow icon">🧠</span>
30+
<h3>PSYFLOW FRAMEWORK</h3>
31+
<div class="content" data-src="content/psyflow.md">Loading...</div>
32+
</div>
33+
<div class="card" id="library-section">
34+
<span class="icon" role="img" aria-label="Library icon">📚</span>
35+
<h3>BROWSE TASK LIBRARY</h3>
36+
<div class="content" data-src="content/library.md">Loading...</div>
37+
</div>
38+
</section>
39+
40+
<section class="task-library">
41+
<h2>TASK LIBRARY</h2>
42+
<ul class="content" data-src="content/task-list.md"></ul>
43+
</section>
44+
45+
<footer>
46+
<button class="btn">GET STARTED</button>
47+
</footer>
48+
</div>
49+
50+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
51+
<script>
52+
const converter = new showdown.Converter();
53+
document.querySelectorAll('.content').forEach(async element => {
54+
const src = element.getAttribute('data-src');
55+
if (src) {
56+
try {
57+
const response = await fetch(src);
58+
const text = await response.text();
59+
if (element.tagName.toLowerCase() === 'ul') {
60+
// convert lines to list items
61+
const items = text.split(/\r?\n/).filter(Boolean).map(t => `<li>${converter.makeHtml(t)}</li>`).join('');
62+
element.innerHTML = items;
63+
} else {
64+
element.innerHTML = converter.makeHtml(text);
65+
}
66+
} catch (err) {
67+
element.textContent = 'Content failed to load.';
68+
}
69+
}
70+
});
71+
</script>
72+
</body>
73+
</html>

‎styles/main.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
:root {
2+
--bg-dark: #2d1b59;
3+
--bg-light: #3a2d89;
4+
--primary: #5cafff;
5+
--accent: #f9c22e;
6+
--text-light: #ffffff;
7+
}
8+
9+
body {
10+
margin: 0;
11+
font-family: 'Press Start 2P', monospace;
12+
background: linear-gradient(to bottom, var(--bg-dark), var(--bg-light));
13+
color: var(--text-light);
14+
image-rendering: pixelated;
15+
}
16+
17+
.container {
18+
max-width: 900px;
19+
margin: 0 auto;
20+
padding: 2rem;
21+
text-align: center;
22+
}
23+
24+
header {
25+
display: flex;
26+
justify-content: space-between;
27+
align-items: center;
28+
}
29+
30+
.btn {
31+
background-color: var(--primary);
32+
border: 4px solid #ffffff;
33+
padding: 10px 20px;
34+
font-size: 12px;
35+
cursor: pointer;
36+
box-shadow: 4px 4px #000000;
37+
}
38+
39+
.hero {
40+
margin-top: 3rem;
41+
}
42+
43+
.features {
44+
display: flex;
45+
justify-content: space-around;
46+
margin: 3rem 0;
47+
flex-wrap: wrap;
48+
}
49+
50+
.card {
51+
background: #1b113a;
52+
padding: 1rem;
53+
border: 4px solid var(--accent);
54+
box-shadow: 4px 4px #000;
55+
width: 30%;
56+
min-width: 200px;
57+
margin-bottom: 1rem;
58+
}
59+
60+
.icon {
61+
display: block;
62+
font-size: 48px;
63+
margin: 0 auto 1rem;
64+
}
65+
66+
.task-library ul {
67+
list-style-type: none;
68+
padding: 0;
69+
font-size: 14px;
70+
}
71+
72+
.task-library li {
73+
margin: 1rem 0;
74+
background: var(--bg-dark);
75+
padding: 10px;
76+
border: 2px solid var(--primary);
77+
}

0 commit comments

Comments
 (0)