Skip to content

Commit 8ced46a

Browse files
CursedProgramsCursedPrograms
committed
...
1 parent 798519d commit 8ced46a

2 files changed

Lines changed: 416 additions & 0 deletions

File tree

‎static/css/styles.css‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
:root {
2+
--bg: #08090d;
3+
--panel: #0e0f16;
4+
--panel2: #12141f;
5+
--border: #20223c;
6+
--accent: #ff1e64;
7+
--green: #1dc878;
8+
--blue: #3a8add;
9+
--amber: #ffa028;
10+
--red: #e24b4a;
11+
--teal: #14c8a0;
12+
--purple: #a050f0;
13+
--pri: #e6e6e1;
14+
--sec: #82847d;
15+
--dim: #3c3e4b;
16+
--font-hud: 'Orbitron', monospace;
17+
--font-mono:'Share Tech Mono', monospace;
18+
--rad: 8px;
19+
}
20+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
21+
html, body {
22+
width: 100%; height: 100%; overflow: hidden;
23+
background: var(--bg); color: var(--pri);
24+
font-family: var(--font-mono); font-size: 13px;
25+
-webkit-tap-highlight-color: transparent; user-select: none;
26+
}
27+
body::before {
28+
content: ''; position: fixed; inset: 0;
29+
background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.06) 2px,rgba(0,0,0,0.06) 4px);
30+
pointer-events: none; z-index: 9999;
31+
}
32+
body::after {
33+
content: ''; position: fixed; inset: 0;
34+
background-image:
35+
linear-gradient(rgba(255,30,100,0.025) 1px,transparent 1px),
36+
linear-gradient(90deg,rgba(255,30,100,0.025) 1px,transparent 1px);
37+
background-size: 44px 44px; pointer-events: none; z-index: 0;
38+
}
39+
#app {
40+
position: relative; z-index: 1;
41+
display: grid;
42+
grid-template-rows: 52px 1fr 38px;
43+
grid-template-columns: 260px 1fr 280px;
44+
width: 100vw; height: 100vh;
45+
}
46+
#topbar {
47+
grid-column: 1 / -1;
48+
display: flex; align-items: center; gap: 12px; padding: 0 16px;
49+
border-bottom: 1px solid var(--border); background: var(--panel);
50+
}
51+
#botbar {
52+
grid-column: 1 / -1;
53+
display: flex; align-items: center; padding: 0 14px;
54+
border-top: 1px solid var(--border); background: #0a0b10; font-size: 11px;
55+
}
56+
#left { border-right: 1px solid var(--border); background: var(--panel); overflow: hidden; }
57+
#centre { background: var(--bg); overflow: hidden; }
58+
#right { border-left: 1px solid var(--border); background: var(--panel); overflow: hidden; }
59+
.panel-inner { padding: 12px 14px; height: 100%; overflow-y: auto; scrollbar-width: none; }
60+
.panel-inner::-webkit-scrollbar { display: none; }
61+
62+
/* Top bar */
63+
#logo { font-family: var(--font-hud); font-size: 22px; font-weight: 900;
64+
color: var(--accent); letter-spacing: 4px;
65+
text-shadow: 0 0 20px rgba(255,30,100,0.5); flex-shrink: 0; }
66+
#tabs { display: flex; gap: 5px; flex: 1; }
67+
.tab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
68+
padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--rad);
69+
background: transparent; color: var(--sec); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
70+
.tab:hover { border-color: var(--accent); color: var(--accent); }
71+
.tab.active { border-color: var(--accent); color: var(--accent);
72+
background: rgba(255,30,100,0.08); box-shadow: 0 2px 0 var(--accent); }
73+
.tab.face-tab:hover { border-color: var(--purple); color: var(--purple); background: rgba(160,80,240,0.08); }
74+
.tab.face-tab.active { border-color: var(--purple); color: var(--purple);
75+
background: rgba(160,80,240,0.08); box-shadow: 0 2px 0 var(--purple); }
76+
#topchips { display: flex; align-items: center; gap: 16px; margin-left: auto; font-size: 11px; }
77+
.chip { display: flex; flex-direction: column; align-items: flex-end; }
78+
.chip .cv { font-family: var(--font-hud); font-size: 13px; color: var(--pri); }
79+
.chip .cl { color: var(--dim); font-size: 10px; }
80+
.chip.warn .cv { color: var(--amber); }
81+
#led-dots { display: flex; gap: 5px; align-items: center; margin-right: 4px; }
82+
.led-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); transition: all 0.3s; }
83+
84+
/* Status bar */
85+
.sb-item { display: flex; align-items: center; gap: 5px; padding: 0 12px; }
86+
.sb-item + .sb-item { border-left: 1px solid var(--border); }
87+
.sb-label { color: var(--dim); } .sb-val { color: var(--sec); }
88+
.sb-ping { width: 8px; height: 8px; border-radius: 50%; background: var(--green);
89+
box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; margin-right: 4px; }
90+
@keyframes pulse { 0%,100%{opacity:1;}50%{opacity:0.4;} }
91+
#sb-version { margin-left: auto; color: var(--dim); }
92+
93+
/* Section label */
94+
.sec-label { font-size: 10px; letter-spacing: 2px; color: var(--dim); text-transform: uppercase;
95+
display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
96+
.sec-label::before { content:''; width:2px; height:12px; background:var(--accent);
97+
border-radius:1px; flex-shrink:0; }
98+
.sec-label.purple::before { background: var(--purple); }
99+
100+
/* Left panel */
101+
#qr-block { text-align: center; margin-bottom: 12px; }
102+
#qr-block img { width:90px; height:90px; border:1px solid var(--border); border-radius:4px; }
103+
#qr-url { font-size:11px; color:var(--amber); margin-top:4px; }
104+
.stat-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
105+
.stat-row .lbl { color:var(--dim); font-size:11px; }
106+
.stat-row .val { font-family:var(--font-hud); font-size:12px; color:var(--sec); }
107+
.bar-track { height:5px; border-radius:3px; background:#12141f; margin-bottom:10px; overflow:hidden; }
108+
.bar-fill { height:100%; border-radius:3px; transition:width 0.6s ease; }
109+
.divider { height:1px; background:var(--border); margin:10px 0; }
110+
.net-row { display:flex; justify-content:space-between; padding:4px 0;
111+
border-bottom:1px solid #16182a; font-size:12px; }
112+
.net-row .lbl { color:var(--dim); }
113+
.net-row .val { color:var(--sec); font-family:var(--font-hud); font-size:11px; }
114+
#track-name { font-size:13px; color:var(--pri); margin-bottom:6px;
115+
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
116+
#track-name.playing { color:var(--accent); }
117+
#waveform { display:flex; align-items:flex-end; gap:1px; height:28px; margin-bottom:10px; }
118+
.wbar { flex:1; background:var(--dim); border-radius:1px; min-height:2px; transition:height 0.1s; }
119+
#waveform.playing .wbar { background:var(--accent); }
120+
.btn-row { display:flex; gap:6px; margin-bottom:6px; }
121+
122+
/* Button */
123+
.btn { font-family:var(--font-mono); font-size:13px; letter-spacing:1px;
124+
padding:0 10px; border:1px solid var(--border); border-radius:var(--rad);
125+
background:var(--panel); color:var(--sec); cursor:pointer; transition:all 0.12s;
126+
display:flex; align-items:center; justify-content:center; white-space:nowrap;
127+
-webkit-tap-highlight-color:transparent; }
128+
.btn:hover,.btn:active { border-color:var(--accent); color:var(--accent); background:rgba(255,30,100,0.07); }
129+
.btn.active { border-color:var(--accent); color:var(--accent); background:rgba(255,30,100,0.10); box-shadow:0 3px 0 var(--accent) inset; }
130+
.btn.blue:hover { border-color:var(--blue); color:var(--blue); background:rgba(58,138,221,0.08); }
131+
.btn.purple { border-color:var(--purple); color:var(--purple); background:rgba(160,80,240,0.08); }
132+
.btn.purple:hover { filter:brightness(1.2); }
133+
.btn.purple.active{ box-shadow:0 3px 0 var(--purple) inset; }
134+
.btn.danger { border-color:var(--red); color:var(--red); background:rgba(226,75,74,0.08); }
135+
.btn.danger:hover { filter:brightness(1.2); }
136+
.btn.full { flex:1; }
137+
138+
/* Centre */
139+
#centre-inner { display:flex; flex-direction:column; height:100%; padding:10px 12px; }
140+
#cam-wrap { position:relative; flex:1; min-height:0; border:1px solid var(--border);
141+
border-radius:var(--rad); overflow:hidden; background:#080a10; }
142+
#cam-wrap img { display:block; width:100%; height:100%; object-fit:cover; }
143+
.corner { position:absolute; width:20px; height:20px; pointer-events:none; }
144+
.corner::before,.corner::after { content:''; position:absolute; background:var(--accent); }
145+
.corner::before { width:2px; height:100%; } .corner::after { width:100%; height:2px; }
146+
.corner.tl { top:5px; left:5px; } .corner.tl::before,.corner.tl::after { top:0; left:0; }
147+
.corner.tr { top:5px; right:5px; } .corner.tr::before { top:0; right:0; } .corner.tr::after { top:0; right:0; }
148+
.corner.bl { bottom:5px; left:5px; }.corner.bl::before { bottom:0; left:0; } .corner.bl::after { bottom:0; left:0; }
149+
.corner.br { bottom:5px; right:5px;}.corner.br::before { bottom:0; right:0; } .corner.br::after { bottom:0; right:0; }
150+
#rec-badge { position:absolute; top:10px; right:12px; display:none; align-items:center; gap:5px;
151+
font-family:var(--font-hud); font-size:11px; color:var(--red); }
152+
#rec-badge.show { display:flex; }
153+
#rec-dot { width:8px; height:8px; border-radius:50%; background:var(--red);
154+
box-shadow:0 0 8px var(--red); animation:pulse 1s infinite; }
155+
156+
/* Face scan overlay */
157+
#face-scan-overlay { position:absolute; inset:0; pointer-events:none; display:none; }
158+
#face-scan-overlay.show { display:block; }
159+
#scan-line { position:absolute; left:0; right:0; height:2px;
160+
background:linear-gradient(90deg,transparent,var(--purple),transparent);
161+
box-shadow:0 0 10px var(--purple); animation:scanMove 2s linear infinite; }
162+
@keyframes scanMove { 0%{top:0%}100%{top:100%} }
163+
#scan-label { position:absolute; top:10px; left:50%; transform:translateX(-50%);
164+
font-family:var(--font-hud); font-size:11px; letter-spacing:2px; color:var(--purple);
165+
background:rgba(0,0,0,0.75); padding:3px 12px; border-radius:3px;
166+
border:1px solid rgba(160,80,240,0.4); }
167+
#mode-overlay { position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
168+
font-family:var(--font-hud); font-size:12px; letter-spacing:2px;
169+
padding:4px 14px; background:rgba(0,0,0,0.7); border-radius:4px; display:none; }
170+
#mode-overlay.show { display:block; }
171+
172+
/* Info strip */
173+
#cam-info { display:flex; gap:20px; padding:8px 0 4px; flex-shrink:0; }
174+
.ci-item { display:flex; flex-direction:column; }
175+
.ci-lbl { font-size:10px; color:var(--dim); letter-spacing:1px; }
176+
.ci-val { font-family:var(--font-hud); font-size:14px; color:var(--pri); transition:color 0.3s; }
177+
.ci-val.moving { color:var(--amber); } .ci-val.purple { color:var(--purple); }
178+
179+
/* Face cards */
180+
#face-results { display:none; flex-direction:column; gap:5px; padding:6px 0; flex-shrink:0; max-height:110px; overflow-y:auto; }
181+
#face-results.show { display:flex; }
182+
.face-card { display:flex; align-items:center; gap:10px; padding:5px 10px;
183+
border-radius:6px; border:1px solid var(--border); background:var(--panel2); font-size:12px; }
184+
.face-card .fc-icon { font-size:18px; flex-shrink:0; }
185+
.face-card .fc-info { display:flex; flex-direction:column; gap:1px; }
186+
.face-card .fc-gender { font-family:var(--font-hud); font-size:12px; }
187+
.face-card .fc-age { color:var(--sec); font-size:11px; }
188+
.face-card .fc-conf { margin-left:auto; font-size:10px; color:var(--dim); }
189+
.face-card.woman .fc-gender { color:var(--purple); }
190+
.face-card.man .fc-gender { color:var(--teal); }
191+
192+
#centre-wave { display:flex; align-items:flex-end; gap:1px; height:30px;
193+
margin-top:auto; padding-top:6px; border-top:1px solid var(--border); flex-shrink:0; }
194+
#centre-wave .wbar { background:rgba(255,30,100,0.25); }
195+
#centre-wave.playing .wbar { background:rgba(255,30,100,0.55); }
196+
197+
/* Right panel */
198+
#dpad-wrap { display:grid; grid-template-areas:". fwd ." "lft stp rgt" ". bwd .";
199+
gap:6px; margin:0 auto 14px; width:fit-content; }
200+
.dp-btn { width:68px; height:68px; font-size:28px; display:flex; align-items:center;
201+
justify-content:center; border:1px solid var(--border); border-radius:var(--rad);
202+
background:var(--panel2); cursor:pointer; transition:all 0.1s;
203+
-webkit-tap-highlight-color:transparent; }
204+
.dp-btn:hover { border-color:var(--accent); background:rgba(255,30,100,0.1); }
205+
.dp-btn:active,.dp-btn.pressed { border-color:var(--accent); background:rgba(255,30,100,0.15); transform:scale(0.93); }
206+
.dp-btn.stop-btn { font-size:20px; border-color:var(--red); color:var(--red); }
207+
.dp-btn.stop-btn:hover { background:rgba(226,75,74,0.15); }
208+
.dp-btn.active-dir { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
209+
[data-dir=forward]{grid-area:fwd;}[data-dir=left]{grid-area:lft;}
210+
[data-dir=stop]{grid-area:stp;}[data-dir=right]{grid-area:rgt;}[data-dir=backward]{grid-area:bwd;}
211+
#speed-btns { display:flex; gap:6px; margin-bottom:14px; }
212+
#speed-btns .btn { flex:1; height:40px; font-family:var(--font-hud); font-size:14px; }
213+
#scheme-btns { display:flex; gap:6px; margin-bottom:14px; }
214+
#scheme-btns .btn { flex:1; height:40px; }
215+
#capture-btns { display:flex; gap:6px; margin-bottom:10px; }
216+
#capture-btns .btn { flex:1; height:44px; font-size:14px; }
217+
#face-btns { display:flex; gap:6px; }
218+
#face-btns .btn { flex:1; height:40px; }
219+
220+
@keyframes fadeIn { from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;} }
221+
#app > * { animation:fadeIn 0.35s ease both; }
222+
#topbar{animation-delay:0.0s;}#left{animation-delay:0.1s;}
223+
#centre{animation-delay:0.15s;}#right{animation-delay:0.2s;}#botbar{animation-delay:0.25s;}
224+
@media(max-width:900px){
225+
#app{grid-template-columns:1fr;grid-template-rows:52px auto auto auto 38px;overflow-y:auto;}
226+
#left,#right{border:none;border-top:1px solid var(--border);}
227+
}

0 commit comments

Comments
 (0)