task-library/index.html at main · yiuhong/task-library · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cognitive Task Library</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bungee&family=JetBrains+Mono:wght@400;700&display=swap');

        body {
            font-family: 'JetBrains Mono', monospace;
            background-color: #0f172a;
        }
        h1 {
            font-family: 'Bungee', cursive;
            text-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
        }
    </style>
</head>
<body class="text-white min-h-screen flex flex-col justify-center items-center p-6 select-none">

    <div class="text-center max-w-xl mb-12">
        <h1 class="text-4xl md:text-5xl text-sky-400 tracking-wider mb-4">COGNITIVE LABORATORY</h1>
        <p class="text-gray-400 text-sm md:text-base leading-relaxed">
            Welcome to the experimental task dashboard. Select an interactive paradigm below to initiate full-screen automated testing.
        </p>
    </div>

    <div class="w-full max-w-md space-y-4">

        <a href="stroop_game.html" class="block border-2 border-indigo-500/50 bg-indigo-950/30 hover:bg-indigo-900/50 hover:border-indigo-400 rounded-xl p-5 transition duration-300 transform hover:scale-105">
            <div class="flex justify-between items-center mb-1">
                <span class="font-bold text-lg text-indigo-300 group-hover:text-indigo-200">01. STROOP DASH</span>
                <span class="text-xs bg-indigo-500/30 text-indigo-300 px-2 py-0.5 rounded-full border border-indigo-500/50">ACTIVE</span>
            </div>
            <p class="text-xs text-gray-400 leading-normal">
                Measures selective attention, processing speed, and executive interference using incongruent semantic stimuli.
            </p>
        </a>

        <a href="oddball_game.html" class="block border-2 border-purple-500/50 bg-purple-950/30 hover:bg-purple-900/50 hover:border-purple-400 rounded-xl p-5 transition duration-300 transform hover:scale-105">
            <div class="flex justify-between items-center mb-1">
                <span class="font-bold text-lg text-purple-300 group-hover:text-purple-200">02. ODDBALL TASK</span>
                <span class="text-xs bg-purple-500/30 text-purple-300 px-2 py-0.5 rounded-full border border-purple-500/50">ACTIVE</span>
            </div>
            <p class="text-xs text-gray-400 leading-normal">
                Evaluates attention and discrimination ability by detecting rare stimuli among frequent standard stimuli.
            </p>
        </a>

        <a href="brightness_game.html" class="block border-2 border-cyan-500/50 bg-cyan-950/30 hover:bg-cyan-900/50 hover:border-cyan-400 rounded-xl p-5 transition duration-300 transform hover:scale-105">
            <div class="flex justify-between items-center mb-1">
                <span class="font-bold text-lg text-cyan-300 group-hover:text-cyan-200">03. BRIGHTNESS DETECTION</span>
                <span class="text-xs bg-cyan-500/30 text-cyan-300 px-2 py-0.5 rounded-full border border-cyan-500/50">ACTIVE</span>
            </div>
            <p class="text-xs text-gray-400 leading-normal">
                Assesses visual perception and sensitivity thresholds through luminance discrimination tasks.
            </p>
        </a>

    </div>

    <div class="mt-16 text-center text-[11px] text-slate-600 tracking-widest uppercase">
        Built via JavaScript Frameworks • Open Source Architecture
    </div>

</body>
</html>