-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhidden.html
More file actions
101 lines (98 loc) · 6.29 KB
/
Copy pathhidden.html
File metadata and controls
101 lines (98 loc) · 6.29 KB
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>System Metrics Panel</title>
<link rel="stylesheet" href="style.css" />
<style>
body { background:#0f1115; font-family: var(--font-sans, system-ui); }
.center-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 4rem; }
h1 { font-size: 1.65rem; margin-bottom: 1.25rem; letter-spacing:.5px; }
#startScreen, #testScreen, #afterScreen { display:none; }
#startScreen.active, #testScreen.active, #afterScreen.active { display:block; }
/* Remove blur / heavy overlay effect and allow full-screen focus */
#overlay { backdrop-filter:none; background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0)); align-items:flex-start; padding-top:.6rem; }
#overlay div:first-child { font-size:1rem; }
body.test-active, body.test-active html { height:100%; }
body.test-active .center-wrap { max-width:none; padding:0; }
body.test-active #testScreen { margin:0; }
body.test-active #pdfContainer { height:100vh; border:0; border-radius:0; }
body.test-active #overlay { justify-content:flex-start; }
/* Full-screen test mode */
body.test-active { margin:0; }
body.test-active .center-wrap { padding:0; max-width:none; }
#testScreen { margin:0; padding:0; }
#pdfContainer { position:fixed; inset:0; width:100vw; height:100vh; background:#000; border:0; border-radius:0; margin:0; }
#pdfFrame { width:100%; height:100%; border:0; display:block; }
/* Single overlay definition (remove blur) */
#overlay { position:absolute; top:0; left:0; right:0; display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; padding:.55rem .8rem .8rem; font:500 .9rem/1.2 var(--font-sans,system-ui); color:#fff; background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.15) 70%,rgba(0,0,0,0)); pointer-events:none; }
#overlay h2 { font:600 .95rem var(--font-sans); margin:0; }
#overlay .sub { font:400 .65rem var(--font-sans); opacity:.7; }
#overlay .row { display:flex; gap:.6rem; align-items:center; }
#overlay #stopwatch { font:600 1.8rem/1 var(--font-mono,monospace); letter-spacing:1px; margin:.2rem 0 .15rem; }
#overlay .interactive { pointer-events:auto; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
#overlay .interactive .btn { --btn-bg:#3d82f6; padding:.45rem .9rem; font-size:.75rem; }
/* Hide old controls bar */
#testScreen > .controls { display:none !important; }
#stopwatch { font:600 2.4rem/1 var(--font-mono, monospace); letter-spacing:1px; margin:1.1rem 0 1.4rem; }
#logPanel { font-family: var(--font-mono, monospace); font-size:.8rem; background:#151b24; border:1px solid #273140; padding:1rem 1rem 1.2rem; border-radius:10px; max-height:320px; overflow:auto; position:relative; }
#logPanel h3 { margin:0 0 .6rem; font:600 .85rem var(--font-sans); text-transform:uppercase; letter-spacing:1px; color:#b1bac4; }
#eventsList li { padding:.25rem 0; border-bottom:1px dashed #273140; display:flex; gap:.75rem; align-items:center; }
#eventsList li:last-child { border-bottom:0; }
#eventsList span.code { background:#1e2733; padding:.15rem .35rem; border-radius:4px; }
.muted { opacity:.6; }
.flash-return::before { content:""; position:fixed; inset:0; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%); mix-blend-mode:screen; animation: flashFade .55s ease; pointer-events:none; z-index:9999; }
@keyframes flashFade { 0% { opacity:1; } 100% { opacity:0; } }
.hidden { display:none !important; }
#resumeHint { font-size:.7rem; opacity:.55; margin-top:.25rem; }
#exportArea { width:100%; min-height:120px; margin-top:.6rem; font-size:.7rem; display:none; }
.badge { background:#2d3c4d; color:#fff; padding:.15rem .5rem; border-radius:4px; font-size:.6rem; text-transform:uppercase; letter-spacing:.6px; }
#sessionSummary { font-size:.8rem; margin:.4rem 0 1rem; color:#b1bac4; }
/* Prevent text selection & context */
body.no-select, body.no-select * { -webkit-user-select:none; user-select:none; }
</style>
</head>
<body class="no-select">
<div class="center-wrap">
<div id="startScreen" class="active">
<h1>System Metrics Panel</h1>
<p class="muted" style="max-width:640px;">Press start when instructed. Keep this window in focus. Metrics collected during material review.</p>
<button id="startBtn" class="btn">Start</button>
</div>
<div id="testScreen">
<div id="pdfContainer">
<iframe id="pdfFrame" src="public/cheat_sheet.pdf#toolbar=0&navpanes=0&scrollbar=0" aria-label="Reference Material"></iframe>
<div id="overlay">
<div class="row">
<h2>Do not move away from this display</h2>
</div>
<div class="sub">Remain focused • System metrics active</div>
<div id="stopwatch" aria-live="polite">00:00</div>
<div class="interactive">
<button id="endBtn" class="btn" title="Finish the session">End Test</button>
</div>
</div>
</div>
<div id="resumeHint" class="muted" style="padding:.4rem .8rem;">Returning after switching away triggers a subtle flash (teacher indicator).</div>
</div>
<div id="afterScreen">
<h1>Review</h1>
<div id="finalDuration" style="font:600 1.3rem var(--font-sans);"></div>
<div id="sessionSummary"></div>
<div id="logPanel">
<h3>System Events</h3>
<ul id="eventsList"></ul>
<textarea id="exportArea" readonly></textarea>
<div style="display:flex; gap:.5rem; margin-top:.7rem; flex-wrap:wrap;">
<button id="exportBtn" class="btn small" title="Export raw data">Export Raw</button>
<button id="clearHistoryBtn" class="btn small" title="Delete stored history">Clear History</button>
<button id="showHistoryBtn" class="btn small" title="Show previous sessions">Previous Sessions</button>
</div>
</div>
<p class="muted" style="margin-top:1rem; font-size:.65rem;">Teacher: Raw JSON available via Export Raw or browser console: localStorage.getItem('examSessions')</p>
</div>
</div>
<script src="hidden.js" defer></script>
</body>
</html>