+234 -204

index.css

reviewed

··· 1 1 :root { 2 2 - --font-sans: "IBM Plex Sans", "Avenir Next", "Helvetica Neue", sans-serif; 2 2 + --font-sans: "Manrope", "Avenir Next", "Helvetica Neue", sans-serif; 3 3 + --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; 3 4 --space-1: 4px; 4 5 --space-2: 8px; 5 6 --space-3: 12px; 6 7 --space-4: 16px; 7 8 --space-5: 24px; 8 9 --space-6: 32px; 9 9 - --radius-sm: 8px; 10 10 - --radius-md: 10px; 11 11 - --radius-lg: 12px; 12 12 - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); 13 13 - --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.14); 10 10 + --radius-sm: 0px; 11 11 + --radius-md: 2px; 12 12 + --radius-lg: 2px; 13 13 + --shadow-sm: none; 14 14 + --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.2); 14 15 } 15 16 16 17 html[data-theme="light"] { 17 17 - --bg: #f3f5f4; 18 18 - --surface: #fbfcfb; 19 19 - --surface-2: #eef1ef; 20 20 - --surface-3: #e6ebe8; 21 21 - --text: #171a19; 22 22 - --muted: #5f6764; 23 23 - --border: #d7ddda; 24 24 - --primary: #7a4b2a; 25 25 - --secondary: #566b5d; 26 26 - --success: #2f6a4e; 27 27 - --danger: #93453c; 28 28 - --overlay: rgba(243, 245, 244, 0.96); 29 29 - --overlay-strong: rgba(243, 245, 244, 0.985); 30 30 - --placeholder: #c9d0cc; 18 18 + --bg: #f4f5f6; 19 19 + --surface: #ffffff; 20 20 + --surface-2: #eaedf0; 21 21 + --surface-3: #dfe3e7; 22 22 + --text: #1d2125; 23 23 + --muted: #626f86; 24 24 + --border: #c1c7d0; 25 25 + --primary: #e54900; /* Engineering Orange */ 26 26 + --primary-hover: #cc4100; 27 27 + --secondary: #0052cc; 28 28 + --success: #0b875b; 29 29 + --danger: #de350b; 30 30 + --overlay: rgba(244, 245, 246, 0.96); 31 31 + --overlay-strong: rgba(244, 245, 246, 0.985); 32 32 + --placeholder: #b3bac5; 33 33 + --grid-pattern: rgba(193, 199, 208, 0.25); 31 34 } 32 35 33 36 html[data-theme="dark"] { 34 34 - --bg: #111315; 35 35 - --surface: #171a1c; 36 36 - --surface-2: #202427; 37 37 - --surface-3: #282d31; 38 38 - --text: #eef1ef; 39 39 - --muted: #a1aaa6; 40 40 - --border: #31383c; 41 41 - --primary: #b8845f; 42 42 - --secondary: #7e9585; 43 43 - --success: #6ca27f; 44 44 - --danger: #c7897a; 45 45 - --overlay: rgba(17, 19, 21, 0.96); 46 46 - --overlay-strong: rgba(17, 19, 21, 0.99); 47 47 - --placeholder: #3a4348; 37 37 + --bg: #090b0d; 38 38 + --surface: #101418; 39 39 + --surface-2: #161c22; 40 40 + --surface-3: #222b35; 41 41 + --text: #d4d8dd; 42 42 + --muted: #8b99a6; 43 43 + --border: #28343f; 44 44 + --primary: #f97316; /* Safety Orange */ 45 45 + --primary-hover: #ff8a3d; 46 46 + --secondary: #4c9aff; 47 47 + --success: #36b37e; 48 48 + --danger: #ff5630; 49 49 + --overlay: rgba(9, 11, 13, 0.96); 50 50 + --overlay-strong: rgba(9, 11, 13, 0.99); 51 51 + --placeholder: #3b4b5c; 52 52 + --grid-pattern: rgba(40, 52, 63, 0.35); 48 53 } 49 54 50 55 * { 51 56 box-sizing: border-box; 57 57 + -webkit-font-smoothing: antialiased; 58 58 + -moz-osx-font-smoothing: grayscale; 52 59 } 53 60 54 54 - html, 55 55 - body { 61 61 + html, body { 56 62 min-height: 100%; 57 63 } 58 64 59 65 body { 60 66 margin: 0; 61 61 - background: var(--bg); 67 67 + background-color: var(--bg); 68 68 + background-image: linear-gradient(var(--grid-pattern) 1px, transparent 1px), 69 69 + linear-gradient(90deg, var(--grid-pattern) 1px, transparent 1px); 70 70 + background-size: 32px 32px; 71 71 + background-position: center top; 62 72 color: var(--text); 63 73 font-family: var(--font-sans); 64 64 - line-height: 1.45; 74 74 + line-height: 1.5; 65 75 } 66 76 67 77 body.session-active { 68 78 overflow: hidden; 69 79 } 70 80 71 71 - button, 72 72 - select, 73 73 - input, 74 74 - textarea { 75 75 - font: inherit; 81 81 + button, select, input, textarea { 82 82 + font-family: var(--font-sans); 76 83 } 77 84 78 78 - button, 79 79 - select, 80 80 - input, 81 81 - textarea { 85 85 + button, select, input, textarea { 82 86 border: 1px solid var(--border); 83 87 border-radius: var(--radius-sm); 88 88 + background: var(--surface); 89 89 + color: var(--text); 90 90 + transition: all 120ms ease; 84 91 } 85 92 86 86 - button, 87 87 - select { 88 88 - min-height: 40px; 93 93 + button, select { 94 94 + min-height: 38px; 89 95 padding: 0 var(--space-4); 90 90 - background: var(--surface); 91 91 - color: var(--text); 92 96 } 93 97 94 98 button { 95 99 cursor: pointer; 96 96 - transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease; 100 100 + font-weight: 600; 101 101 + text-transform: uppercase; 102 102 + font-size: 0.8rem; 103 103 + letter-spacing: 0.05em; 97 104 } 98 105 99 106 button:hover:not(:disabled), 100 107 select:hover:not(:disabled), 101 108 input:hover:not(:disabled), 102 109 textarea:hover:not(:disabled) { 103 103 - border-color: var(--secondary); 110 110 + border-color: var(--primary); 111 111 + background: var(--surface-2); 104 112 } 105 113 106 114 button:disabled { 107 107 - opacity: 0.45; 115 115 + opacity: 0.4; 108 116 cursor: not-allowed; 117 117 + border-color: var(--border); 118 118 + background: var(--surface); 119 119 + color: var(--muted); 109 120 } 110 121 111 122 button:focus-visible, 112 123 select:focus-visible, 113 124 input:focus-visible, 114 125 textarea:focus-visible { 115 115 - outline: 2px solid color-mix(in srgb, var(--secondary) 78%, white 22%); 116 116 - outline-offset: 2px; 126 126 + outline: 2px solid var(--primary); 127 127 + outline-offset: 1px; 128 128 + border-color: var(--primary); 117 129 } 118 130 119 119 - code { 120 120 - font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; 131 131 + code, .stat-block strong, #session-timer { 132 132 + font-family: var(--font-mono); 121 133 } 122 134 123 135 #load-app-btn, ··· 130 142 .action-row button[type="submit"] { 131 143 background: var(--primary); 132 144 border-color: var(--primary); 133 133 - color: #f7f5f2; 145 145 + color: #fff; 146 146 + } 147 147 + 148 148 + #load-app-btn:hover:not(:disabled), 149 149 + #start-test-btn:hover:not(:disabled), 150 150 + #retry-calibration-btn:hover:not(:disabled) { 151 151 + background: var(--primary-hover); 152 152 + border-color: var(--primary-hover); 153 153 + } 154 154 + 155 155 + #app-container { 156 156 + min-height: 100vh; 157 157 + } 158 158 + 159 159 + #setup-shell { 160 160 + display: flex; 161 161 + flex-direction: column; 162 162 + justify-content: center; 163 163 + align-items: center; 164 164 + min-height: 100vh; 165 165 + padding: var(--space-5); 166 166 + gap: var(--space-5); 134 167 } 135 168 136 136 - #app-container, 137 137 - #setup-shell, 138 169 #debrief-shell { 139 170 min-height: 100vh; 171 171 + padding: var(--space-6); 172 172 + max-width: 1400px; 173 173 + margin: 0 auto; 140 174 } 141 175 142 142 - #setup-shell, 143 143 - #debrief-shell { 176 176 + #controls { 177 177 + width: 100%; 178 178 + max-width: 800px; 144 179 padding: var(--space-5); 180 180 + display: flex; 181 181 + flex-direction: column; 182 182 + gap: var(--space-5); 145 183 } 146 184 147 147 - #setup-shell { 185 185 + #status-bar { 186 186 + width: 100%; 187 187 + max-width: 800px; 188 188 + padding: var(--space-4) var(--space-5); 148 189 display: grid; 149 149 - grid-template-rows: auto auto 1fr; 190 190 + grid-template-columns: repeat(4, minmax(0, 1fr)); 150 191 gap: var(--space-4); 192 192 + border-top: 3px solid var(--primary); 151 193 } 152 194 153 195 #controls, 154 196 #status-bar, 155 155 - #shell-main, 156 197 .overlay-card, 157 198 .screen-card, 158 199 #session-debug-drawer, 159 200 .start-card, 160 160 - #calibration-hud { 201 201 + #calibration-hud, 202 202 + .debrief-panel { 161 203 background: var(--surface); 162 204 border: 1px solid var(--border); 163 163 - box-shadow: var(--shadow-sm); 164 164 - } 165 165 - 166 166 - #controls, 167 167 - #status-bar, 168 168 - #shell-main, 169 169 - .overlay-card, 170 170 - .screen-card { 171 205 border-radius: var(--radius-lg); 172 172 - } 173 173 - 174 174 - #controls { 175 175 - padding: var(--space-5); 176 176 - display: grid; 177 177 - gap: var(--space-4); 206 206 + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); 178 207 } 179 208 180 209 .toolbar, 181 210 .control-row { 182 211 display: flex; 183 183 - align-items: start; 212 212 + align-items: flex-start; 184 213 justify-content: space-between; 185 214 gap: var(--space-4); 186 215 flex-wrap: wrap; 187 216 } 188 217 189 218 .toolbar-copy h1, 190 190 - .workspace-header h2, 191 219 .debrief-header h2, 192 220 .start-card h2 { 193 221 margin: 0; 194 194 - font-size: 1.45rem; 195 195 - line-height: 1.2; 222 222 + font-size: 1.5rem; 223 223 + font-weight: 700; 224 224 + text-transform: uppercase; 225 225 + letter-spacing: 0.03em; 196 226 } 197 227 198 228 .toolbar-copy p, 199 199 - .workspace-header p, 200 229 .debrief-header p, 201 230 .start-card p, 202 231 .debug-copy { 203 232 margin: var(--space-2) 0 0; 204 233 color: var(--muted); 234 234 + font-size: 0.95rem; 205 235 } 206 236 207 237 .toolbar-actions, ··· 213 243 } 214 244 215 245 .field { 216 216 - display: grid; 246 246 + display: flex; 247 247 + flex-direction: column; 217 248 gap: var(--space-2); 218 218 - min-width: min(480px, 100%); 249 249 + flex: 1; 250 250 + min-width: min(320px, 100%); 219 251 } 220 252 221 253 .field span, 222 254 .label { 223 223 - font-size: 0.82rem; 255 255 + font-size: 0.75rem; 256 256 + font-weight: 700; 224 257 color: var(--muted); 258 258 + text-transform: uppercase; 259 259 + letter-spacing: 0.05em; 260 260 + font-family: var(--font-mono); 225 261 } 226 262 227 263 #app-select { 228 264 width: 100%; 229 229 - background: var(--surface); 230 230 - color: var(--text); 231 265 } 232 266 233 267 .theme-toggle { ··· 241 275 .theme-option { 242 276 min-width: 72px; 243 277 border: none; 244 244 - border-radius: 6px; 245 278 background: transparent; 246 279 color: var(--muted); 247 280 } ··· 249 282 .theme-option.active { 250 283 background: var(--surface); 251 284 color: var(--text); 285 285 + box-shadow: 0 1px 3px rgba(0,0,0,0.1); 252 286 } 253 287 254 288 .debug-shell { 255 255 - display: grid; 289 289 + border-top: 1px dashed var(--border); 290 290 + padding-top: var(--space-4); 291 291 + display: flex; 292 292 + flex-direction: column; 256 293 gap: var(--space-3); 294 294 + width: 100%; 257 295 } 258 296 259 297 .debug-toggle { 260 260 - justify-self: start; 298 298 + align-self: flex-start; 299 299 + background: transparent; 300 300 + border-color: transparent; 301 301 + color: var(--muted); 302 302 + } 303 303 + 304 304 + .debug-toggle:hover { 305 305 + background: var(--surface-2); 306 306 + border-color: var(--border); 307 307 + color: var(--text); 261 308 } 262 309 263 310 #debug-panel { ··· 265 312 flex-wrap: wrap; 266 313 gap: var(--space-3); 267 314 align-items: center; 268 268 - padding-top: var(--space-1); 315 315 + padding: var(--space-3); 316 316 + background: var(--surface-2); 317 317 + border-radius: var(--radius-md); 318 318 + border: 1px solid var(--border); 269 319 } 270 320 271 321 .debug-checkbox { ··· 273 323 align-items: center; 274 324 gap: var(--space-2); 275 325 color: var(--text); 326 326 + font-size: 0.9rem; 276 327 } 277 328 278 329 .debug-checkbox input { 279 330 width: 16px; 280 331 height: 16px; 281 281 - } 282 282 - 283 283 - #status-bar { 284 284 - padding: var(--space-4) var(--space-5); 285 285 - display: grid; 286 286 - grid-template-columns: repeat(4, minmax(0, 1fr)); 287 287 - gap: var(--space-4); 332 332 + accent-color: var(--primary); 288 333 } 289 334 290 335 #status-bar > div, 291 336 .stat-block { 292 292 - display: grid; 337 337 + display: flex; 338 338 + flex-direction: column; 293 339 gap: var(--space-1); 294 340 } 295 341 296 342 #status-bar strong, 297 343 .stat-block strong { 298 298 - font-size: 0.97rem; 299 299 - } 300 300 - 301 301 - #shell-main { 302 302 - padding: var(--space-5); 303 303 - display: grid; 304 304 - grid-template-rows: auto 1fr; 305 305 - gap: var(--space-5); 306 306 - } 307 307 - 308 308 - .workspace-header { 309 309 - display: flex; 310 310 - justify-content: space-between; 311 311 - align-items: end; 312 312 - gap: var(--space-4); 313 313 - } 314 314 - 315 315 - #iframe-placeholder { 316 316 - display: grid; 317 317 - place-items: center; 318 318 - min-height: 380px; 319 319 - padding: var(--space-6); 320 320 - border: 1px dashed var(--placeholder); 321 321 - border-radius: var(--radius-md); 322 322 - color: var(--muted); 323 323 - text-align: center; 324 324 - background: 325 325 - linear-gradient(180deg, transparent 0, transparent calc(100% - 1px), var(--border) calc(100% - 1px)), 326 326 - linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), var(--border) calc(100% - 1px)); 327 327 - background-size: 100% 48px, 48px 100%; 344 344 + font-size: 1.1rem; 345 345 + color: var(--text); 328 346 } 329 347 330 348 #session-stage { ··· 355 373 top: var(--space-4); 356 374 right: var(--space-4); 357 375 z-index: 7; 358 358 - min-height: 36px; 359 359 - padding: 0 var(--space-3); 360 360 - background: var(--overlay); 376 376 + background: var(--surface); 361 377 } 362 378 363 379 #session-debug-drawer { 364 380 position: absolute; 365 365 - top: 56px; 381 381 + top: 60px; 366 382 right: var(--space-4); 367 383 z-index: 7; 368 384 width: min(320px, calc(100vw - 32px)); 369 385 padding: var(--space-4); 370 370 - border-radius: var(--radius-md); 371 371 - background: var(--overlay); 372 386 } 373 387 374 388 .session-debug-header { 375 375 - margin-bottom: var(--space-3); 389 389 + margin-bottom: var(--space-4); 390 390 + padding-bottom: var(--space-2); 391 391 + border-bottom: 1px solid var(--border); 392 392 + font-weight: 700; 393 393 + font-family: var(--font-mono); 394 394 + text-transform: uppercase; 395 395 + font-size: 0.85rem; 376 396 } 377 397 378 398 .session-debug-actions { ··· 387 407 #calibration-veil { 388 408 position: absolute; 389 409 inset: 0; 390 390 - background: rgba(0, 0, 0, 0.28); 410 410 + background: rgba(0, 0, 0, 0.4); 411 411 + backdrop-filter: blur(2px); 391 412 } 392 413 393 414 #calibration-hud { ··· 396 417 left: var(--space-4); 397 418 right: var(--space-4); 398 419 z-index: 3; 399 399 - min-height: 52px; 400 420 display: flex; 401 421 flex-wrap: wrap; 402 402 - gap: var(--space-2) var(--space-4); 422 422 + gap: var(--space-3) var(--space-5); 403 423 align-items: center; 404 404 - padding: var(--space-3) var(--space-4); 405 405 - border-radius: var(--radius-md); 406 406 - background: var(--overlay); 424 424 + padding: var(--space-3) var(--space-5); 425 425 + } 426 426 + 427 427 + #calibration-hud span { 428 428 + font-family: var(--font-mono); 429 429 + font-size: 0.9rem; 407 430 } 408 431 409 432 #calibration-stage { ··· 413 436 414 437 #calibration-target { 415 438 position: absolute; 416 416 - width: 58px; 417 417 - height: 58px; 439 439 + width: 48px; 440 440 + height: 48px; 418 441 transform: translate(-50%, -50%); 419 442 display: flex; 420 443 align-items: center; 421 444 justify-content: center; 422 422 - border: 2px solid color-mix(in srgb, var(--primary) 72%, white 28%); 423 423 - border-radius: 999px; 424 424 - background: color-mix(in srgb, var(--primary) 86%, black 14%); 425 425 - color: #f7f5f2; 426 426 - font-weight: 600; 427 427 - box-shadow: var(--shadow-md); 445 445 + border: 2px solid var(--primary); 446 446 + border-radius: 0; 447 447 + background: rgba(0, 0, 0, 0.8); 448 448 + color: var(--primary); 449 449 + font-family: var(--font-mono); 450 450 + font-weight: 700; 451 451 + box-shadow: 0 0 15px rgba(229, 73, 0, 0.4); 452 452 + transition: transform 100ms ease, background 100ms ease; 453 453 + cursor: crosshair; 454 454 + } 455 455 + 456 456 + #calibration-target:active { 457 457 + background: var(--primary); 458 458 + color: #000; 459 459 + transform: translate(-50%, -50%) scale(0.9); 428 460 } 429 461 430 462 #start-curtain { 431 463 z-index: 3; 432 432 - background: var(--overlay-strong); 464 464 + background: var(--surface); 433 465 } 434 466 435 467 #start-overlay, ··· 438 470 display: grid; 439 471 place-items: center; 440 472 padding: var(--space-5); 473 473 + background: url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M0 40 L40 0 H20 L0 20 Z" fill="rgba(80,80,80,0.05)"/></svg>'); 441 474 } 442 475 443 476 .start-card { 444 444 - width: min(440px, calc(100vw - 32px)); 445 445 - padding: var(--space-5); 446 446 - border-radius: var(--radius-lg); 447 447 - background: var(--surface); 477 477 + width: min(500px, calc(100vw - 32px)); 478 478 + padding: var(--space-6); 479 479 + text-align: center; 480 480 + border-top: 4px solid var(--primary); 481 481 + } 482 482 + 483 483 + .start-card h2 { 484 484 + margin-bottom: var(--space-3); 448 485 } 449 486 450 487 .start-note { 451 451 - font-size: 0.95rem; 488 488 + margin-bottom: var(--space-5); 452 489 } 453 490 454 491 .failure-card { 455 455 - border-color: color-mix(in srgb, var(--danger) 45%, var(--border) 55%); 492 492 + border-top-color: var(--danger); 456 493 } 457 494 458 495 #debrief-screen { 459 496 display: grid; 460 460 - gap: var(--space-5); 497 497 + gap: var(--space-6); 461 498 } 462 499 463 500 .debrief-header { 464 501 display: flex; 465 502 justify-content: space-between; 466 503 gap: var(--space-4); 467 467 - align-items: end; 504 504 + align-items: flex-end; 468 505 flex-wrap: wrap; 469 469 - } 470 470 - 471 471 - .debrief-panel { 472 472 - padding: var(--space-5); 506 506 + padding-bottom: var(--space-4); 507 507 + border-bottom: 2px solid var(--border); 473 508 } 474 509 475 510 #stats-container { 476 511 display: grid; 477 477 - grid-template-columns: repeat(3, minmax(0, 1fr)); 478 478 - gap: var(--space-4); 512 512 + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 513 513 + gap: var(--space-3); 479 514 } 480 515 481 516 .stat-block { 482 482 - min-height: 80px; 483 517 padding: var(--space-4); 484 518 border: 1px solid var(--border); 485 485 - border-radius: var(--radius-md); 486 519 background: var(--surface-2); 520 520 + border-radius: var(--radius-sm); 521 521 + box-shadow: inset 0 1px 3px rgba(0,0,0,0.04); 487 522 } 488 523 489 489 - .stat-block span, 490 490 - .screen-card-header p, 491 491 - .screen-card-stats span { 524 524 + .stat-block span { 525 525 + font-size: 0.75rem; 526 526 + font-weight: 700; 492 527 color: var(--muted); 493 493 - font-size: 0.9rem; 528 528 + text-transform: uppercase; 529 529 + font-family: var(--font-mono); 494 530 } 495 531 496 532 #screen-gallery { 497 533 display: grid; 498 498 - gap: var(--space-4); 534 534 + gap: var(--space-5); 499 535 } 500 536 501 537 .screen-card { 502 502 - padding: var(--space-4); 538 538 + padding: var(--space-5); 503 539 } 504 540 505 541 .screen-card-header { 506 542 display: flex; 507 543 justify-content: space-between; 508 544 gap: var(--space-4); 509 509 - align-items: start; 545 545 + align-items: flex-start; 510 546 margin-bottom: var(--space-4); 547 547 + padding-bottom: var(--space-3); 548 548 + border-bottom: 1px dashed var(--border); 511 549 } 512 550 513 551 .screen-card-header h4 { 514 552 margin: 0; 553 553 + font-family: var(--font-mono); 515 554 font-size: 1rem; 555 555 + font-weight: 700; 516 556 } 517 557 518 558 .screen-card-stats { 519 559 display: grid; 520 560 justify-items: end; 521 561 gap: var(--space-1); 562 562 + font-family: var(--font-mono); 563 563 + font-size: 0.85rem; 522 564 } 523 565 524 566 .screen-card-canvas-wrap { 525 567 overflow: hidden; 526 568 border: 1px solid var(--border); 527 527 - border-radius: var(--radius-md); 528 528 - background: #fff; 569 569 + background: #000; /* Deep backdrop for heatmap */ 529 570 } 530 571 531 572 .screen-heatmap-canvas { 532 573 display: block; 533 574 width: 100%; 534 575 height: auto; 576 576 + opacity: 0.9; 535 577 } 536 578 537 579 .screen-card-fallback { 538 538 - min-height: 160px; 580 580 + min-height: 200px; 539 581 display: grid; 540 582 place-items: center; 541 583 text-align: center; 542 584 padding: var(--space-5); 543 585 color: var(--muted); 586 586 + background: var(--surface-2); 587 587 + font-family: var(--font-mono); 588 588 + border: 1px dashed var(--border); 544 589 } 545 590 546 591 .hidden { ··· 548 593 } 549 594 550 595 @media (max-width: 980px) { 551 551 - #status-bar, 552 552 - #stats-container { 596 596 + #status-bar { 553 597 grid-template-columns: repeat(2, minmax(0, 1fr)); 554 598 } 555 599 } 556 600 557 601 @media (max-width: 720px) { 558 558 - #setup-shell, 559 559 - #debrief-shell { 560 560 - padding: var(--space-4); 561 561 - } 562 562 - 563 563 - #status-bar, 564 564 - #stats-container { 602 602 + #status-bar { 565 603 grid-template-columns: 1fr; 566 604 } 567 567 - 568 568 - #controls, 569 569 - #shell-main, 570 570 - .debrief-panel { 571 571 - padding: var(--space-4); 605 605 + 606 606 + #setup-shell { 607 607 + justify-content: flex-start; 572 608 } 573 573 - 574 574 - #calibration-hud { 575 575 - top: var(--space-3); 576 576 - left: var(--space-3); 577 577 - right: var(--space-3); 578 578 - } 579 579 - 609 609 + 580 610 .screen-card-header { 581 611 flex-direction: column; 582 612 } 583 583 - 613 613 + 584 614 .screen-card-stats { 585 615 justify-items: start; 586 616 }

+3 -11

index.html

reviewed

··· 5 5 <meta charset="UTF-8"> 6 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 7 <title>UXET</title> 8 8 + <link rel="preconnect" href="https://fonts.googleapis.com"> 9 9 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 10 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"> 8 11 <link rel="stylesheet" href="index.css"> 9 12 <script src="https://cdn.jsdelivr.net/npm/webgazer@3.4.0/dist/webgazer.js" crossorigin="anonymous"></script> 10 13 <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js" crossorigin="anonymous"></script> ··· 74 77 <div><span class="label">Message</span><strong id="session-message">Select an app to begin.</strong></div> 75 78 </section> 76 79 77 77 - <main id="shell-main"> 78 78 - <div class="workspace-header"> 79 79 - <div> 80 80 - <h2>Preflight Workspace</h2> 81 81 - <p>The selected app loads in the background, then stays hidden until recording begins.</p> 82 82 - </div> 83 83 - </div> 84 80 85 85 - <div id="iframe-placeholder"> 86 86 - Select an app and load it to initialize calibration and prepare the session stage. 87 87 - </div> 88 88 - </main> 89 81 </section> 90 82 91 83 <section id="session-stage" class="hidden" aria-live="polite">

-3

js/main.js

reviewed

··· 60 60 currentTaskText: document.getElementById('current-task-text'), 61 61 sessionMessage: document.getElementById('session-message'), 62 62 63 63 - iframePlaceholder: document.getElementById('iframe-placeholder'), 64 63 iframe: document.getElementById('test-iframe'), 65 64 66 65 calibrationScreen: document.getElementById('calibration-screen'), ··· 325 324 this.session.setTask(this.selectedApp.task); 326 325 this.elements.currentTaskText.textContent = this.selectedApp.task; 327 326 this.elements.startOverlayTask.textContent = this.selectedApp.task; 328 328 - this.elements.iframePlaceholder.classList.add('hidden'); 329 327 this.elements.iframe.classList.remove('hidden'); 330 328 this.elements.iframe.src = this.withThemeQuery(this.selectedApp.value); 331 329 this.session.setState('loading_app'); ··· 602 600 this.elements.currentTaskText.textContent = 'None'; 603 601 this.elements.iframe.src = ''; 604 602 this.elements.iframe.classList.add('hidden'); 605 605 - this.elements.iframePlaceholder.classList.remove('hidden'); 606 603 this.elements.sessionMessage.textContent = 'Select an app to begin.'; 607 604 document.body.classList.remove('session-active'); 608 605 this.syncDebugUi();