Capstone project. I'm ngl it's vibe-coded and it's only here so I can mess around with it
1<!DOCTYPE html>
2<html lang="en" data-theme="dark">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>UXET</title>
8 <link rel="preconnect" href="https://fonts.googleapis.com">
9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Manrope:wght@400;500;700&display=swap" rel="stylesheet">
11 <link rel="stylesheet" href="index.css">
12 <script src="https://cdn.jsdelivr.net/npm/webgazer@3.4.0/dist/webgazer.js" crossorigin="anonymous"></script>
13 <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js" crossorigin="anonymous"></script>
14</head>
15
16<body>
17 <div id="app-container">
18 <div class="global-theme-container">
19 <div class="theme-toggle" role="group" aria-label="Theme selection">
20 <button id="theme-dark-btn" class="theme-option" type="button">Dark</button>
21 <button id="theme-light-btn" class="theme-option" type="button">Light</button>
22 </div>
23 </div>
24
25 <section id="debrief-shell" class="hidden">
26 <section id="debrief-screen">
27 <header class="debrief-header">
28 <div>
29 <h2>Session Debrief</h2>
30 <p id="screen-gallery-label">Heatmaps will appear here after a test completes.</p>
31 </div>
32 <div class="debrief-actions">
33 <button id="debrief-test-again-btn" type="button">Test Again</button>
34 <button id="debrief-export-btn" type="button">Export Data</button>
35 <button id="debrief-reset-btn" type="button">Reset</button>
36 </div>
37 </header>
38
39 <section id="imported-session-banner" class="overlay-card analysis-banner"></section>
40
41 <section class="overlay-card debrief-panel">
42 <div id="stats-container">
43 <div class="stat-block"><span>Time</span><strong id="debrief-time">00:00:00</strong></div>
44 <div class="stat-block"><span>Clicks</span><strong id="debrief-clicks">0</strong></div>
45 <div class="stat-block"><span>Keys</span><strong id="debrief-keys">0</strong></div>
46 <div class="stat-block"><span>Mouse Distance</span><strong id="debrief-distance">0</strong></div>
47 <div class="stat-block"><span>Scroll Events</span><strong id="debrief-scrolls">0</strong></div>
48 <div class="stat-block"><span>Avg Velocity</span><strong id="debrief-velocity">0</strong></div>
49 <div class="stat-block"><span>Gaze Points</span><strong id="debrief-gaze-points">0</strong></div>
50 <div class="stat-block"><span>Fixations</span><strong id="debrief-fixations">0</strong></div>
51 <div class="stat-block"><span>Avg Fixation</span><strong id="debrief-fixation-duration">0</strong></div>
52 </div>
53 </section>
54
55 <section class="analysis-grid">
56 <section class="overlay-card analysis-panel">
57 <header><h3>Executive Summary</h3></header>
58 <div id="analysis-summary"></div>
59 </section>
60 <section class="overlay-card analysis-panel">
61 <header><h3>Top Findings</h3></header>
62 <div id="analysis-attention"></div>
63 </section>
64 <section class="overlay-card analysis-panel">
65 <header><h3>Element-Level Issues</h3></header>
66 <div id="analysis-mouse"></div>
67 </section>
68 <section class="overlay-card analysis-panel">
69 <header><h3>Screen & Journey Findings</h3></header>
70 <div id="analysis-timeline"></div>
71 </section>
72 <section class="overlay-card analysis-panel">
73 <header><h3>Data Quality & Confidence</h3></header>
74 <div id="analysis-quality"></div>
75 </section>
76 </section>
77
78 <div id="screen-gallery"></div>
79 </section>
80 </section>
81
82 <section id="setup-shell">
83 <header id="controls">
84 <div class="toolbar">
85 <div class="toolbar-copy">
86 <h1>UXET</h1>
87 <p>Prepare a session, preload the app, and capture gaze data without changing the test flow.</p>
88 </div>
89
90 </div>
91
92 <div class="control-row">
93 <label class="field field-app" for="app-select">
94 <span>App under test</span>
95 <select id="app-select">
96 <option value="">Loading apps...</option>
97 </select>
98 </label>
99
100 <div class="primary-actions">
101 <button id="load-app-btn" type="button">Load App</button>
102 <button id="import-btn" type="button">Import Data</button>
103 <input id="import-input" type="file" accept=".json,application/json" multiple class="hidden">
104 <button id="export-btn" type="button" disabled>Export Data</button>
105 <button id="reset-btn" type="button">Reset</button>
106 </div>
107 </div>
108
109 <div class="debug-shell">
110 <button id="debug-toggle-btn" class="debug-toggle" type="button" aria-expanded="false">Debug Controls</button>
111 <div id="debug-panel" class="hidden">
112 <button id="debug-skip-calibration" type="button">Skip Calibration</button>
113 <label class="debug-checkbox">
114 <input id="debug-mouse-gaze-toggle" type="checkbox">
115 <span>Use mouse as gaze</span>
116 </label>
117 <button id="debug-exit-test" type="button" disabled>End Test</button>
118 <p class="debug-copy">Session exit shortcut: <code>Shift+Escape</code></p>
119 </div>
120 </div>
121 </header>
122
123 <section id="status-bar" aria-live="polite">
124 <div><span class="label">State</span><strong id="session-status">idle</strong></div>
125 <div><span class="label">Time</span><strong id="session-timer">00:00:00</strong></div>
126 <div><span class="label">Task</span><strong id="current-task-text">None</strong></div>
127 <div><span class="label">Message</span><strong id="session-message">Select an app to begin.</strong></div>
128 </section>
129
130
131 </section>
132
133 <section id="session-stage" class="hidden" aria-live="polite">
134 <iframe id="test-iframe" class="hidden" title="Test Application"></iframe>
135
136 <button id="session-debug-toggle-btn" class="session-debug-toggle hidden" type="button">Debug</button>
137 <aside id="session-debug-drawer" class="hidden">
138 <div class="session-debug-header">
139 <strong>Debug Controls</strong>
140 </div>
141 <div class="session-debug-actions">
142 <button id="session-debug-skip-calibration" type="button">Skip Calibration</button>
143 <label class="debug-checkbox">
144 <input id="session-debug-mouse-gaze-toggle" type="checkbox">
145 <span>Use mouse as gaze</span>
146 </label>
147 <button id="session-debug-exit-test" type="button">End Test</button>
148 </div>
149 </aside>
150
151 <section id="calibration-screen" class="hidden">
152 <div id="calibration-veil"></div>
153 <div id="calibration-hud">
154 <span><strong id="calibration-progress">1 / 9</strong> points</span>
155 <span><strong id="calibration-clicks">0 / 3</strong> clicks</span>
156 <span id="calibration-quality">Pending</span>
157 <span id="calibration-feedback">Waiting for first point</span>
158 <span id="calibration-instruction">Look at point 1 and click it 3 times.</span>
159 </div>
160 <div id="calibration-stage">
161 <button id="calibration-target" type="button">1</button>
162 </div>
163 </section>
164
165 <section id="start-curtain" class="hidden"></section>
166
167 <section id="start-overlay" class="hidden">
168 <div class="start-card">
169 <h2>Task Ready</h2>
170 <p id="start-overlay-task">Task will appear here.</p>
171 <p class="start-note">The app is loaded and hidden. It will appear when recording starts.</p>
172 <button id="start-test-btn" type="button">Start Test</button>
173 </div>
174 </section>
175
176 <section id="calibration-failure-overlay" class="hidden">
177 <div class="start-card failure-card">
178 <h2>Calibration Retry Required</h2>
179 <p id="calibration-failure-summary">Average error summary will appear here.</p>
180 <p class="start-note">Keep your head still, look directly at each target, then retry.</p>
181 <button id="retry-calibration-btn" type="button">Retry Calibration</button>
182 </div>
183 </section>
184 </section>
185 </div>
186
187 <script type="module" src="js/main.js"></script>
188</body>
189
190</html>