Hugging Face's logo

Spaces:
Codfskitraceon
/
TRIGNUM-TCHIP-Validator
Running

App Files Community
Codfskitraceon commited on
Commit
b8eb747
·
verified ·
1 Parent(s): db1972b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1081 -18
index.html CHANGED
@@ -1,19 +1,1082 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>T-CHIP LIVE VALIDATOR — TRIGNUM</title>
8
+ <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --bg: #020408;
12
+ --bg2: #050c14;
13
+ --blue: #00e5ff;
14
+ --blue-dim: #003d4d;
15
+ --red: #ff1744;
16
+ --red-dim: #4d0012;
17
+ --gold: #ffd600;
18
+ --gold-dim: #4d3f00;
19
+ --green: #00e676;
20
+ --text: #a0b8c8;
21
+ --text-bright: #e0f0ff;
22
+ --border: #0a2030;
23
+ }
24
+
25
+ * { margin: 0; padding: 0; box-sizing: border-box; }
26
+
27
+ body {
28
+ background: var(--bg);
29
+ color: var(--text);
30
+ font-family: 'Share Tech Mono', monospace;
31
+ min-height: 100vh;
32
+ overflow-x: hidden;
33
+ cursor: crosshair;
34
+ }
35
+
36
+ /* Animated grid background */
37
+ body::before {
38
+ content: '';
39
+ position: fixed;
40
+ inset: 0;
41
+ background-image:
42
+ linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
43
+ linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
44
+ background-size: 40px 40px;
45
+ pointer-events: none;
46
+ z-index: 0;
47
+ }
48
+
49
+ /* Scanline effect */
50
+ body::after {
51
+ content: '';
52
+ position: fixed;
53
+ inset: 0;
54
+ background: repeating-linear-gradient(
55
+ 0deg,
56
+ transparent,
57
+ transparent 2px,
58
+ rgba(0,0,0,0.15) 2px,
59
+ rgba(0,0,0,0.15) 4px
60
+ );
61
+ pointer-events: none;
62
+ z-index: 999;
63
+ opacity: 0.4;
64
+ }
65
+
66
+ .container {
67
+ position: relative;
68
+ z-index: 1;
69
+ max-width: 900px;
70
+ margin: 0 auto;
71
+ padding: 40px 20px;
72
+ }
73
+
74
+ /* Header */
75
+ .header {
76
+ text-align: center;
77
+ margin-bottom: 50px;
78
+ }
79
+
80
+ .trignum-logo {
81
+ font-family: 'Orbitron', monospace;
82
+ font-size: 11px;
83
+ font-weight: 400;
84
+ letter-spacing: 8px;
85
+ color: var(--blue);
86
+ opacity: 0.6;
87
+ margin-bottom: 12px;
88
+ text-transform: uppercase;
89
+ }
90
+
91
+ .title {
92
+ font-family: 'Orbitron', monospace;
93
+ font-size: clamp(28px, 5vw, 52px);
94
+ font-weight: 900;
95
+ color: var(--text-bright);
96
+ letter-spacing: 2px;
97
+ line-height: 1;
98
+ margin-bottom: 8px;
99
+ }
100
+
101
+ .title span {
102
+ color: var(--blue);
103
+ text-shadow: 0 0 20px var(--blue), 0 0 40px rgba(0,229,255,0.3);
104
+ }
105
+
106
+ .subtitle {
107
+ font-size: 11px;
108
+ letter-spacing: 4px;
109
+ color: var(--text);
110
+ opacity: 0.5;
111
+ text-transform: uppercase;
112
+ }
113
+
114
+ /* T-CHIP Display */
115
+ .tchip-wrapper {
116
+ display: flex;
117
+ justify-content: center;
118
+ margin: 40px 0;
119
+ }
120
+
121
+ .tchip {
122
+ position: relative;
123
+ width: 200px;
124
+ height: 200px;
125
+ }
126
+
127
+ .tchip-ring {
128
+ position: absolute;
129
+ inset: 0;
130
+ border-radius: 50%;
131
+ border: 2px solid var(--blue-dim);
132
+ animation: rotate 8s linear infinite;
133
+ transition: border-color 0.5s;
134
+ }
135
+
136
+ .tchip-ring::before {
137
+ content: '';
138
+ position: absolute;
139
+ top: -4px;
140
+ left: 50%;
141
+ transform: translateX(-50%);
142
+ width: 8px;
143
+ height: 8px;
144
+ border-radius: 50%;
145
+ background: var(--blue);
146
+ box-shadow: 0 0 10px var(--blue);
147
+ transition: background 0.5s, box-shadow 0.5s;
148
+ }
149
+
150
+ .tchip-ring-2 {
151
+ inset: 12px;
152
+ animation: rotate 5s linear infinite reverse;
153
+ border-style: dashed;
154
+ opacity: 0.4;
155
+ }
156
+
157
+ .tchip-core {
158
+ position: absolute;
159
+ inset: 30px;
160
+ border-radius: 50%;
161
+ background: var(--bg2);
162
+ border: 1px solid var(--blue-dim);
163
+ display: flex;
164
+ flex-direction: column;
165
+ align-items: center;
166
+ justify-content: center;
167
+ transition: all 0.5s;
168
+ overflow: hidden;
169
+ }
170
+
171
+ .tchip-core::before {
172
+ content: '';
173
+ position: absolute;
174
+ inset: 0;
175
+ border-radius: 50%;
176
+ background: radial-gradient(circle, rgba(0,229,255,0.1) 0%, transparent 70%);
177
+ transition: background 0.5s;
178
+ }
179
+
180
+ .tchip-symbol {
181
+ font-family: 'Orbitron', monospace;
182
+ font-size: 32px;
183
+ font-weight: 900;
184
+ color: var(--blue);
185
+ text-shadow: 0 0 20px var(--blue);
186
+ transition: all 0.5s;
187
+ z-index: 1;
188
+ line-height: 1;
189
+ }
190
+
191
+ .tchip-state-text {
192
+ font-size: 8px;
193
+ letter-spacing: 2px;
194
+ color: var(--blue);
195
+ opacity: 0.7;
196
+ margin-top: 4px;
197
+ text-align: center;
198
+ z-index: 1;
199
+ transition: all 0.5s;
200
+ padding: 0 10px;
201
+ }
202
+
203
+ /* State: BLUE */
204
+ .state-blue .tchip-ring { border-color: var(--blue); }
205
+ .state-blue .tchip-ring::before { background: var(--blue); box-shadow: 0 0 15px var(--blue), 0 0 30px var(--blue); }
206
+ .state-blue .tchip-core { border-color: var(--blue); box-shadow: 0 0 30px rgba(0,229,255,0.2), inset 0 0 30px rgba(0,229,255,0.05); }
207
+ .state-blue .tchip-core::before { background: radial-gradient(circle, rgba(0,229,255,0.2) 0%, transparent 70%); }
208
+ .state-blue .tchip-symbol { color: var(--blue); text-shadow: 0 0 20px var(--blue), 0 0 40px var(--blue); }
209
+ .state-blue .tchip-state-text { color: var(--blue); opacity: 1; }
210
+
211
+ /* State: RED */
212
+ .state-red .tchip-ring { border-color: var(--red); animation: rotate 2s linear infinite, shake 0.3s infinite; }
213
+ .state-red .tchip-ring::before { background: var(--red); box-shadow: 0 0 15px var(--red), 0 0 30px var(--red); }
214
+ .state-red .tchip-core { border-color: var(--red); box-shadow: 0 0 40px rgba(255,23,68,0.3), inset 0 0 30px rgba(255,23,68,0.1); }
215
+ .state-red .tchip-core::before { background: radial-gradient(circle, rgba(255,23,68,0.2) 0%, transparent 70%); }
216
+ .state-red .tchip-symbol { color: var(--red); text-shadow: 0 0 20px var(--red), 0 0 40px var(--red); }
217
+ .state-red .tchip-state-text { color: var(--red); opacity: 1; }
218
+
219
+ /* State: GOLD */
220
+ .state-gold .tchip-ring { border-color: var(--gold); }
221
+ .state-gold .tchip-ring::before { background: var(--gold); box-shadow: 0 0 15px var(--gold), 0 0 30px var(--gold); }
222
+ .state-gold .tchip-core { border-color: var(--gold); box-shadow: 0 0 30px rgba(255,214,0,0.2), inset 0 0 30px rgba(255,214,0,0.05); }
223
+ .state-gold .tchip-core::before { background: radial-gradient(circle, rgba(255,214,0,0.2) 0%, transparent 70%); }
224
+ .state-gold .tchip-symbol { color: var(--gold); text-shadow: 0 0 20px var(--gold), 0 0 40px var(--gold); }
225
+ .state-gold .tchip-state-text { color: var(--gold); opacity: 1; }
226
+
227
+ /* Pulse animation for active states */
228
+ .state-blue .tchip-core,
229
+ .state-red .tchip-core,
230
+ .state-gold .tchip-core {
231
+ animation: pulse-glow 2s ease-in-out infinite;
232
+ }
233
+
234
+ /* Status bar */
235
+ .status-bar {
236
+ display: flex;
237
+ justify-content: center;
238
+ gap: 30px;
239
+ margin-bottom: 40px;
240
+ flex-wrap: wrap;
241
+ }
242
+
243
+ .status-item {
244
+ display: flex;
245
+ align-items: center;
246
+ gap: 8px;
247
+ font-size: 10px;
248
+ letter-spacing: 2px;
249
+ opacity: 0.5;
250
+ transition: opacity 0.3s;
251
+ }
252
+
253
+ .status-dot {
254
+ width: 8px;
255
+ height: 8px;
256
+ border-radius: 50%;
257
+ background: currentColor;
258
+ }
259
+
260
+ .status-item.active { opacity: 1; }
261
+ .status-item.blue { color: var(--blue); }
262
+ .status-item.red { color: var(--red); }
263
+ .status-item.gold { color: var(--gold); }
264
+
265
+ /* Input area */
266
+ .input-section {
267
+ background: var(--bg2);
268
+ border: 1px solid var(--border);
269
+ border-radius: 2px;
270
+ padding: 24px;
271
+ margin-bottom: 24px;
272
+ position: relative;
273
+ transition: border-color 0.5s;
274
+ }
275
+
276
+ .input-section::before {
277
+ content: 'INPUT STREAM';
278
+ position: absolute;
279
+ top: -1px;
280
+ left: 20px;
281
+ transform: translateY(-50%);
282
+ background: var(--bg2);
283
+ padding: 0 8px;
284
+ font-size: 9px;
285
+ letter-spacing: 3px;
286
+ color: var(--blue);
287
+ opacity: 0.6;
288
+ }
289
+
290
+ .input-label {
291
+ font-size: 10px;
292
+ letter-spacing: 3px;
293
+ color: var(--text);
294
+ opacity: 0.4;
295
+ margin-bottom: 12px;
296
+ text-transform: uppercase;
297
+ }
298
+
299
+ textarea {
300
+ width: 100%;
301
+ background: transparent;
302
+ border: none;
303
+ border-bottom: 1px solid var(--border);
304
+ color: var(--text-bright);
305
+ font-family: 'Space Mono', monospace;
306
+ font-size: 15px;
307
+ line-height: 1.6;
308
+ padding: 8px 0 16px;
309
+ resize: none;
310
+ outline: none;
311
+ transition: border-color 0.3s;
312
+ min-height: 80px;
313
+ }
314
+
315
+ textarea::placeholder {
316
+ color: var(--text);
317
+ opacity: 0.2;
318
+ font-style: italic;
319
+ }
320
+
321
+ textarea:focus {
322
+ border-bottom-color: var(--blue);
323
+ }
324
+
325
+ .input-footer {
326
+ display: flex;
327
+ justify-content: space-between;
328
+ align-items: center;
329
+ margin-top: 16px;
330
+ }
331
+
332
+ .char-count {
333
+ font-size: 9px;
334
+ letter-spacing: 2px;
335
+ opacity: 0.3;
336
+ }
337
+
338
+ .validate-btn {
339
+ background: transparent;
340
+ border: 1px solid var(--blue);
341
+ color: var(--blue);
342
+ font-family: 'Orbitron', monospace;
343
+ font-size: 10px;
344
+ font-weight: 700;
345
+ letter-spacing: 3px;
346
+ padding: 10px 24px;
347
+ cursor: pointer;
348
+ text-transform: uppercase;
349
+ position: relative;
350
+ overflow: hidden;
351
+ transition: all 0.3s;
352
+ }
353
+
354
+ .validate-btn::before {
355
+ content: '';
356
+ position: absolute;
357
+ inset: 0;
358
+ background: var(--blue);
359
+ transform: translateX(-100%);
360
+ transition: transform 0.3s;
361
+ z-index: 0;
362
+ }
363
+
364
+ .validate-btn:hover::before { transform: translateX(0); }
365
+ .validate-btn:hover { color: var(--bg); }
366
+ .validate-btn span { position: relative; z-index: 1; }
367
+
368
+ /* Results panel */
369
+ .results-panel {
370
+ background: var(--bg2);
371
+ border: 1px solid var(--border);
372
+ border-radius: 2px;
373
+ padding: 24px;
374
+ margin-bottom: 24px;
375
+ min-height: 120px;
376
+ transition: border-color 0.5s;
377
+ position: relative;
378
+ }
379
+
380
+ .results-panel::before {
381
+ content: 'ANALYSIS OUTPUT';
382
+ position: absolute;
383
+ top: -1px;
384
+ left: 20px;
385
+ transform: translateY(-50%);
386
+ background: var(--bg2);
387
+ padding: 0 8px;
388
+ font-size: 9px;
389
+ letter-spacing: 3px;
390
+ color: var(--text);
391
+ opacity: 0.4;
392
+ }
393
+
394
+ .result-state {
395
+ font-family: 'Orbitron', monospace;
396
+ font-size: 20px;
397
+ font-weight: 900;
398
+ letter-spacing: 4px;
399
+ margin-bottom: 12px;
400
+ transition: color 0.5s;
401
+ }
402
+
403
+ .result-detail {
404
+ font-size: 12px;
405
+ line-height: 1.8;
406
+ opacity: 0.7;
407
+ }
408
+
409
+ .result-detail .flag {
410
+ display: inline-block;
411
+ padding: 2px 8px;
412
+ border-radius: 2px;
413
+ font-size: 10px;
414
+ letter-spacing: 2px;
415
+ margin: 2px;
416
+ font-weight: 700;
417
+ }
418
+
419
+ .flag-red { background: rgba(255,23,68,0.15); color: var(--red); border: 1px solid rgba(255,23,68,0.3); }
420
+ .flag-blue { background: rgba(0,229,255,0.1); color: var(--blue); border: 1px solid rgba(0,229,255,0.2); }
421
+ .flag-gold { background: rgba(255,214,0,0.1); color: var(--gold); border: 1px solid rgba(255,214,0,0.2); }
422
+
423
+ .waiting-text {
424
+ opacity: 0.2;
425
+ font-size: 12px;
426
+ letter-spacing: 3px;
427
+ text-transform: uppercase;
428
+ display: flex;
429
+ align-items: center;
430
+ gap: 12px;
431
+ height: 80px;
432
+ }
433
+
434
+ .waiting-text::before {
435
+ content: '▸▸▸';
436
+ animation: blink 1.5s infinite;
437
+ color: var(--blue);
438
+ }
439
+
440
+ /* Detection layers */
441
+ .layers-grid {
442
+ display: grid;
443
+ grid-template-columns: repeat(2, 1fr);
444
+ gap: 12px;
445
+ margin-bottom: 24px;
446
+ }
447
+
448
+ @media (max-width: 600px) {
449
+ .layers-grid { grid-template-columns: 1fr; }
450
+ }
451
+
452
+ .layer-card {
453
+ background: var(--bg2);
454
+ border: 1px solid var(--border);
455
+ padding: 16px;
456
+ transition: all 0.4s;
457
+ position: relative;
458
+ overflow: hidden;
459
+ }
460
+
461
+ .layer-card::after {
462
+ content: '';
463
+ position: absolute;
464
+ left: 0;
465
+ top: 0;
466
+ bottom: 0;
467
+ width: 2px;
468
+ background: var(--blue-dim);
469
+ transition: background 0.4s, box-shadow 0.4s;
470
+ }
471
+
472
+ .layer-card.triggered::after {
473
+ background: var(--red);
474
+ box-shadow: 0 0 10px var(--red);
475
+ }
476
+
477
+ .layer-card.clear::after {
478
+ background: var(--green);
479
+ box-shadow: 0 0 10px var(--green);
480
+ }
481
+
482
+ .layer-name {
483
+ font-family: 'Orbitron', monospace;
484
+ font-size: 9px;
485
+ letter-spacing: 3px;
486
+ color: var(--text);
487
+ opacity: 0.5;
488
+ margin-bottom: 6px;
489
+ text-transform: uppercase;
490
+ }
491
+
492
+ .layer-status {
493
+ font-size: 11px;
494
+ letter-spacing: 2px;
495
+ color: var(--text);
496
+ opacity: 0.4;
497
+ transition: all 0.4s;
498
+ }
499
+
500
+ .layer-card.triggered .layer-name { opacity: 1; color: var(--red); }
501
+ .layer-card.triggered .layer-status { color: var(--red); opacity: 1; }
502
+ .layer-card.clear .layer-name { opacity: 1; color: var(--green); }
503
+ .layer-card.clear .layer-status { color: var(--green); opacity: 0.8; }
504
+
505
+ /* Examples */
506
+ .examples-section {
507
+ margin-bottom: 24px;
508
+ }
509
+
510
+ .examples-title {
511
+ font-size: 9px;
512
+ letter-spacing: 4px;
513
+ opacity: 0.3;
514
+ text-transform: uppercase;
515
+ margin-bottom: 12px;
516
+ }
517
+
518
+ .examples-grid {
519
+ display: flex;
520
+ flex-wrap: wrap;
521
+ gap: 8px;
522
+ }
523
+
524
+ .example-chip {
525
+ background: transparent;
526
+ border: 1px solid var(--border);
527
+ color: var(--text);
528
+ font-family: 'Share Tech Mono', monospace;
529
+ font-size: 11px;
530
+ padding: 6px 12px;
531
+ cursor: pointer;
532
+ transition: all 0.2s;
533
+ opacity: 0.5;
534
+ }
535
+
536
+ .example-chip:hover {
537
+ opacity: 1;
538
+ border-color: var(--blue);
539
+ color: var(--blue);
540
+ }
541
+
542
+ .example-chip.red-example:hover { border-color: var(--red); color: var(--red); }
543
+ .example-chip.gold-example:hover { border-color: var(--gold); color: var(--gold); }
544
+
545
+ /* Score bar */
546
+ .score-section {
547
+ background: var(--bg2);
548
+ border: 1px solid var(--border);
549
+ padding: 20px 24px;
550
+ margin-bottom: 24px;
551
+ }
552
+
553
+ .score-row {
554
+ display: flex;
555
+ align-items: center;
556
+ gap: 16px;
557
+ margin-bottom: 10px;
558
+ }
559
+
560
+ .score-label {
561
+ font-size: 9px;
562
+ letter-spacing: 2px;
563
+ width: 120px;
564
+ opacity: 0.5;
565
+ flex-shrink: 0;
566
+ }
567
+
568
+ .score-bar-bg {
569
+ flex: 1;
570
+ height: 4px;
571
+ background: var(--border);
572
+ border-radius: 2px;
573
+ overflow: hidden;
574
+ }
575
+
576
+ .score-bar-fill {
577
+ height: 100%;
578
+ width: 0%;
579
+ border-radius: 2px;
580
+ transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s;
581
+ background: var(--blue);
582
+ }
583
+
584
+ .score-value {
585
+ font-family: 'Orbitron', monospace;
586
+ font-size: 11px;
587
+ font-weight: 700;
588
+ width: 40px;
589
+ text-align: right;
590
+ transition: color 0.5s;
591
+ }
592
+
593
+ /* Footer */
594
+ .footer {
595
+ text-align: center;
596
+ padding-top: 30px;
597
+ border-top: 1px solid var(--border);
598
+ opacity: 0.3;
599
+ }
600
+
601
+ .footer p {
602
+ font-size: 9px;
603
+ letter-spacing: 3px;
604
+ margin-bottom: 4px;
605
+ }
606
+
607
+ /* Animations */
608
+ @keyframes rotate {
609
+ from { transform: rotate(0deg); }
610
+ to { transform: rotate(360deg); }
611
+ }
612
+
613
+ @keyframes pulse-glow {
614
+ 0%, 100% { opacity: 1; }
615
+ 50% { opacity: 0.8; }
616
+ }
617
+
618
+ @keyframes blink {
619
+ 0%, 100% { opacity: 1; }
620
+ 50% { opacity: 0.2; }
621
+ }
622
+
623
+ @keyframes shake {
624
+ 0%, 100% { transform: translateX(0); }
625
+ 25% { transform: translateX(-2px); }
626
+ 75% { transform: translateX(2px); }
627
+ }
628
+
629
+ @keyframes fadeIn {
630
+ from { opacity: 0; transform: translateY(10px); }
631
+ to { opacity: 1; transform: translateY(0); }
632
+ }
633
+
634
+ .fade-in {
635
+ animation: fadeIn 0.4s ease forwards;
636
+ }
637
+
638
+ /* Processing animation */
639
+ .processing .tchip-symbol {
640
+ animation: blink 0.3s infinite;
641
+ }
642
+
643
+ /* Highlight matched text */
644
+ .highlight-red { color: var(--red); font-weight: bold; }
645
+ .highlight-gold { color: var(--gold); font-weight: bold; }
646
+ </style>
647
+ </head>
648
+ <body>
649
+
650
+ <div class="container">
651
+
652
+ <!-- Header -->
653
+ <div class="header">
654
+ <div class="trignum-logo">⚡ TRACE ON LAB — TRIGNUM</div>
655
+ <div class="title">T-<span>CHIP</span></div>
656
+ <div class="subtitle">Live Epistemic Validator · v.300M · Trignumentality</div>
657
+ </div>
658
+
659
+ <!-- T-CHIP Visual -->
660
+ <div class="tchip-wrapper">
661
+ <div class="tchip" id="tchip">
662
+ <div class="tchip-ring"></div>
663
+ <div class="tchip-ring tchip-ring-2"></div>
664
+ <div class="tchip-core">
665
+ <div class="tchip-symbol" id="tchip-symbol">?</div>
666
+ <div class="tchip-state-text" id="tchip-state-text">AWAITING INPUT</div>
667
+ </div>
668
+ </div>
669
+ </div>
670
+
671
+ <!-- Status indicators -->
672
+ <div class="status-bar">
673
+ <div class="status-item blue" id="status-blue">
674
+ <div class="status-dot"></div>
675
+ BLUE · LOGIC STABLE
676
+ </div>
677
+ <div class="status-item red" id="status-red">
678
+ <div class="status-dot"></div>
679
+ RED · THE FREEZE
680
+ </div>
681
+ <div class="status-item gold" id="status-gold">
682
+ <div class="status-dot"></div>
683
+ GOLD · HUMAN SOVEREIGNTY
684
+ </div>
685
+ </div>
686
+
687
+ <!-- Input -->
688
+ <div class="input-section" id="input-section">
689
+ <div class="input-label">Enter any statement for epistemic validation</div>
690
+ <textarea id="input-text" rows="3"
691
+ placeholder="Type any statement... e.g. 'AI is always right and never wrong' or 'The sky is blue'"></textarea>
692
+ <div class="input-footer">
693
+ <div class="char-count" id="char-count">0 CHARS</div>
694
+ <button class="validate-btn" onclick="validate()">
695
+ <span>▸ VALIDATE</span>
696
+ </button>
697
+ </div>
698
+ </div>
699
+
700
+ <!-- Detection layers -->
701
+ <div class="layers-grid">
702
+ <div class="layer-card" id="layer-contradiction">
703
+ <div class="layer-name">Layer 1 · Contradiction</div>
704
+ <div class="layer-status" id="layer-contradiction-status">SCANNING...</div>
705
+ </div>
706
+ <div class="layer-card" id="layer-circular">
707
+ <div class="layer-name">Layer 2 · Circular Logic</div>
708
+ <div class="layer-status" id="layer-circular-status">SCANNING...</div>
709
+ </div>
710
+ <div class="layer-card" id="layer-nonsequitur">
711
+ <div class="layer-name">Layer 3 · Non-Sequitur</div>
712
+ <div class="layer-status" id="layer-nonsequitur-status">SCANNING...</div>
713
+ </div>
714
+ <div class="layer-card" id="layer-depth">
715
+ <div class="layer-name">Layer 4 · Depth Check</div>
716
+ <div class="layer-status" id="layer-depth-status">SCANNING...</div>
717
+ </div>
718
+ </div>
719
+
720
+ <!-- Score bars -->
721
+ <div class="score-section">
722
+ <div class="score-row">
723
+ <div class="score-label">LOGIC SCORE</div>
724
+ <div class="score-bar-bg">
725
+ <div class="score-bar-fill" id="bar-logic" style="background: var(--blue)"></div>
726
+ </div>
727
+ <div class="score-value" id="val-logic" style="color: var(--blue)">—</div>
728
+ </div>
729
+ <div class="score-row">
730
+ <div class="score-label">ILLOGIC SCORE</div>
731
+ <div class="score-bar-bg">
732
+ <div class="score-bar-fill" id="bar-illogic" style="background: var(--red)"></div>
733
+ </div>
734
+ <div class="score-value" id="val-illogic" style="color: var(--red)">—</div>
735
+ </div>
736
+ <div class="score-row">
737
+ <div class="score-label">CONFIDENCE</div>
738
+ <div class="score-bar-bg">
739
+ <div class="score-bar-fill" id="bar-confidence" style="background: var(--gold)"></div>
740
+ </div>
741
+ <div class="score-value" id="val-confidence" style="color: var(--gold)">—</div>
742
+ </div>
743
+ </div>
744
+
745
+ <!-- Results -->
746
+ <div class="results-panel" id="results-panel">
747
+ <div class="waiting-text" id="waiting-text">SUBTRACTIVE FILTER READY</div>
748
+ <div id="result-content" style="display:none">
749
+ <div class="result-state" id="result-state"></div>
750
+ <div class="result-detail" id="result-detail"></div>
751
+ </div>
752
+ </div>
753
+
754
+ <!-- Examples -->
755
+ <div class="examples-section">
756
+ <div class="examples-title">Quick Test — Click to Load</div>
757
+ <div class="examples-grid">
758
+ <div class="example-chip red-example" onclick="loadExample('This is always true and never true.')">Always true & never true</div>
759
+ <div class="example-chip red-example" onclick="loadExample('A proves B because B proves A.')">Circular: A→B→A</div>
760
+ <div class="example-chip red-example" onclick="loadExample('Therefore the solution is correct.')">Non-sequitur conclusion</div>
761
+ <div class="example-chip gold-example" onclick="loadExample('The results suggest a possible correlation.')">Uncertain claim</div>
762
+ <div class="example-chip" onclick="loadExample('The sky appears blue due to Rayleigh scattering of sunlight.')">Valid scientific claim</div>
763
+ <div class="example-chip" onclick="loadExample('TRIGNUM-300M achieves 99.5% F1 on structural illogic detection.')">TRIGNUM benchmark</div>
764
+ </div>
765
+ </div>
766
+
767
+ <!-- Footer -->
768
+ <div class="footer">
769
+ <p>TRIGNUMENTALITY · EPISTEMIC AUTHORIZATION FOR AUTONOMOUS AI</p>
770
+ <p>© 2026 MOEZ ABDESSATTAR · TRACE ON LAB · DOI: 10.5281/zenodo.18736774</p>
771
+ <p style="margin-top:8px; opacity:0.5">github.com/Codfski/Trignumentality</p>
772
+ </div>
773
+
774
+ </div>
775
+
776
+ <script>
777
+ // ─── Detection Engine ───────────────────────────────────────────────────────
778
+
779
+ const CONTRADICTION_PAIRS = [
780
+ ['always', 'never'], ['true', 'false'], ['possible', 'impossible'],
781
+ ['safe', 'unsafe'], ['correct', 'incorrect'], ['valid', 'invalid'],
782
+ ['exist', "doesn't exist"], ['is', "isn't"], ['can', "can't"],
783
+ ['will', "won't"], ['does', "doesn't"], ['all', 'none'],
784
+ ['every', 'no '], ['right', 'wrong'], ['yes', 'no'],
785
+ ['good', 'bad'], ['legal', 'illegal'], ['certain', 'uncertain'],
786
+ ];
787
+
788
+ const CIRCULAR_PATTERNS = [
789
+ /because.*therefore.*because/i,
790
+ /proves.*because.*proves/i,
791
+ /(\w+).*because.*\1/i,
792
+ /true because.*true/i,
793
+ /is correct because it is correct/i,
794
+ /(\w+) is (\w+) because (\w+) is (\w+)/i,
795
+ ];
796
+
797
+ const NONSEQUITUR_PATTERNS = [
798
+ /^therefore /i,
799
+ /^thus /i,
800
+ /^hence /i,
801
+ /^so the /i,
802
+ /^clearly /i,
803
+ /^obviously /i,
804
+ /therefore the (answer|solution|result|conclusion) is/i,
805
+ /^it follows that/i,
806
+ ];
807
+
808
+ const DEPTH_THRESHOLD = 4; // minimum words for a meaningful claim
809
+
810
+ function analyzeText(text) {
811
+ const lower = text.toLowerCase().trim();
812
+ const words = text.split(/\s+/).filter(w => w.length > 0);
813
+
814
+ let issues = [];
815
+ let layers = {
816
+ contradiction: { triggered: false, detail: 'No contradictions detected' },
817
+ circular: { triggered: false, detail: 'No circular logic detected' },
818
+ nonsequitur: { triggered: false, detail: 'No non-sequitur detected' },
819
+ depth: { triggered: false, detail: 'Sufficient reasoning depth' },
820
+ };
821
+
822
+ // Layer 1: Contradiction
823
+ for (const [a, b] of CONTRADICTION_PAIRS) {
824
+ if (lower.includes(a) && lower.includes(b)) {
825
+ layers.contradiction.triggered = true;
826
+ layers.contradiction.detail = `Antonym conflict: "${a}" ↔ "${b}"`;
827
+ issues.push(`CONTRADICTION: "${a}" and "${b}" in same statement`);
828
+ break;
829
+ }
830
+ }
831
+ // Also check "X and not X" pattern
832
+ const notPattern = /(\w+) and (not|never|no) \1/i;
833
+ if (notPattern.test(text)) {
834
+ layers.contradiction.triggered = true;
835
+ layers.contradiction.detail = 'Self-negating statement detected';
836
+ issues.push('SELF-NEGATION detected');
837
+ }
838
+
839
+ // Layer 2: Circular Logic
840
+ for (const pattern of CIRCULAR_PATTERNS) {
841
+ if (pattern.test(lower)) {
842
+ layers.circular.triggered = true;
843
+ layers.circular.detail = 'Circular reference chain detected';
844
+ issues.push('CIRCULAR LOGIC: conclusion used as premise');
845
+ break;
846
+ }
847
+ }
848
+ // Simple "X because X" check
849
+ const simpleCircular = /(\b\w+\b).*because.*\1/i;
850
+ if (simpleCircular.test(lower) && lower.includes('because')) {
851
+ const match = lower.match(/(\b\w+\b).*because.*\1/i);
852
+ if (match && match[1].length > 3) {
853
+ layers.circular.triggered = true;
854
+ layers.circular.detail = `"${match[1]}" used as both premise and conclusion`;
855
+ issues.push(`CIRCULAR: "${match[1]}" proves itself`);
856
+ }
857
+ }
858
+
859
+ // Layer 3: Non-Sequitur
860
+ for (const pattern of NONSEQUITUR_PATTERNS) {
861
+ if (pattern.test(text)) {
862
+ layers.nonsequitur.triggered = true;
863
+ layers.nonsequitur.detail = 'Conclusion without supporting premises';
864
+ issues.push('NON-SEQUITUR: conclusion asserted without evidence chain');
865
+ break;
866
+ }
867
+ }
868
+
869
+ // Layer 4: Depth Check
870
+ if (words.length < DEPTH_THRESHOLD) {
871
+ layers.depth.triggered = true;
872
+ layers.depth.detail = `Only ${words.length} word(s) — insufficient reasoning depth`;
873
+ issues.push('DEPTH: claim too shallow to validate');
874
+ }
875
+
876
+ // Uncertainty signals (gold state)
877
+ const uncertaintyWords = ['suggest', 'possible', 'might', 'may', 'could', 'perhaps',
878
+ 'likely', 'probably', 'unclear', 'uncertain', 'ambiguous',
879
+ 'depends', 'context'];
880
+ const hasUncertainty = uncertaintyWords.some(w => lower.includes(w));
881
+
882
+ // Calculate scores
883
+ const triggeredCount = Object.values(layers).filter(l => l.triggered).length;
884
+ const illogicScore = Math.min(triggeredCount / 4, 1);
885
+ const logicScore = 1 - illogicScore;
886
+
887
+ let confidence;
888
+ let state;
889
+
890
+ if (triggeredCount === 0 && !hasUncertainty) {
891
+ state = 'BLUE';
892
+ confidence = 0.85 + Math.random() * 0.1;
893
+ } else if (triggeredCount === 0 && hasUncertainty) {
894
+ state = 'GOLD';
895
+ confidence = 0.5 + Math.random() * 0.2;
896
+ } else if (triggeredCount >= 2) {
897
+ state = 'RED';
898
+ confidence = 0.1 + Math.random() * 0.15;
899
+ } else {
900
+ state = 'RED';
901
+ confidence = 0.2 + Math.random() * 0.2;
902
+ }
903
+
904
+ return { state, layers, issues, illogicScore, logicScore, confidence, hasUncertainty };
905
+ }
906
+
907
+ // ─── UI Functions ────────────────────────────────────────────────────────────
908
+
909
+ const tchip = document.getElementById('tchip');
910
+ const tchipSymbol = document.getElementById('tchip-symbol');
911
+ const tchipStateText = document.getElementById('tchip-state-text');
912
+
913
+ function setTChipState(state) {
914
+ tchip.className = 'tchip state-' + state.toLowerCase();
915
+
916
+ if (state === 'BLUE') {
917
+ tchipSymbol.textContent = '🔵';
918
+ tchipStateText.textContent = 'LOGIC STABLE';
919
+ } else if (state === 'RED') {
920
+ tchipSymbol.textContent = '🔴';
921
+ tchipStateText.textContent = 'THE FREEZE';
922
+ } else if (state === 'GOLD') {
923
+ tchipSymbol.textContent = '🟡';
924
+ tchipStateText.textContent = 'HUMAN PULSE';
925
+ }
926
+
927
+ // Update status bar
928
+ document.getElementById('status-blue').classList.toggle('active', state === 'BLUE');
929
+ document.getElementById('status-red').classList.toggle('active', state === 'RED');
930
+ document.getElementById('status-gold').classList.toggle('active', state === 'GOLD');
931
+ }
932
+
933
+ function updateLayers(layers) {
934
+ for (const [name, data] of Object.entries(layers)) {
935
+ const card = document.getElementById(`layer-${name}`);
936
+ const status = document.getElementById(`layer-${name}-status`);
937
+ card.classList.remove('triggered', 'clear');
938
+
939
+ setTimeout(() => {
940
+ if (data.triggered) {
941
+ card.classList.add('triggered');
942
+ status.textContent = '⚠ ' + data.detail.toUpperCase();
943
+ } else {
944
+ card.classList.add('clear');
945
+ status.textContent = '✓ ' + data.detail.toUpperCase();
946
+ }
947
+ }, Math.random() * 400);
948
+ }
949
+ }
950
+
951
+ function animateBar(id, valId, value, color) {
952
+ const bar = document.getElementById(id);
953
+ const val = document.getElementById(valId);
954
+ setTimeout(() => {
955
+ bar.style.width = (value * 100) + '%';
956
+ bar.style.background = color;
957
+ val.textContent = Math.round(value * 100) + '%';
958
+ val.style.color = color;
959
+ }, 300);
960
+ }
961
+
962
+ function showResult(result) {
963
+ const stateEl = document.getElementById('result-state');
964
+ const detailEl = document.getElementById('result-detail');
965
+ const content = document.getElementById('result-content');
966
+ const waiting = document.getElementById('waiting-text');
967
+
968
+ let stateText, stateColor, detailHTML;
969
+
970
+ if (result.state === 'BLUE') {
971
+ stateColor = 'var(--blue)';
972
+ stateText = '🔵 CLEARED FOR TAKEOFF';
973
+ detailHTML = `<span class="flag flag-blue">LOGIC STABLE</span> No structural illogic detected. Output is cleared for execution.<br><br>
974
+ The Subtractive Filter found no contradictions, circular reasoning, non-sequiturs, or depth failures.<br>
975
+ <em>Raw material status: VALIDATED → may proceed to epistemic integration.</em>`;
976
+ } else if (result.state === 'RED') {
977
+ stateColor = 'var(--red)';
978
+ stateText = '🔴 THE FREEZE — HALT';
979
+ const flags = result.issues.map(i => `<span class="flag flag-red">${i.split(':')[0]}</span>`).join(' ');
980
+ detailHTML = `${flags}<br><br>
981
+ ${result.issues.map(i => `⚠ ${i}`).join('<br>')}<br><br>
982
+ <em>Execution halted. Human review required before any action can be taken.<br>
983
+ Raw material status: ILLOGIC DETECTED → cannot proceed.</em>`;
984
+ } else {
985
+ stateColor = 'var(--gold)';
986
+ stateText = '🟡 HUMAN SOVEREIGNTY REQUIRED';
987
+ detailHTML = `<span class="flag flag-gold">UNCERTAINTY DETECTED</span> Statement contains epistemic ambiguity.<br><br>
988
+ Uncertainty signals detected in claim structure. Confidence below autonomous threshold.<br><br>
989
+ <em>T-CHIP: GOLD STATE — Human pulse required.<br>
990
+ The machine waits. The human decides. This is not a limitation — it is an epistemic necessity.</em>`;
991
+ }
992
+
993
+ stateEl.textContent = stateText;
994
+ stateEl.style.color = stateColor;
995
+ detailEl.innerHTML = detailHTML;
996
+
997
+ waiting.style.display = 'none';
998
+ content.style.display = 'block';
999
+ content.classList.add('fade-in');
1000
+
1001
+ // Update results panel border
1002
+ document.getElementById('results-panel').style.borderColor = stateColor;
1003
+ document.getElementById('input-section').style.borderColor = stateColor;
1004
+ }
1005
+
1006
+ async function validate() {
1007
+ const text = document.getElementById('input-text').value.trim();
1008
+ if (!text) return;
1009
+
1010
+ // Reset
1011
+ document.getElementById('result-content').style.display = 'none';
1012
+ document.getElementById('waiting-text').style.display = 'flex';
1013
+ document.getElementById('waiting-text').textContent = 'PROCESSING...';
1014
+
1015
+ tchip.classList.add('processing');
1016
+ tchipSymbol.textContent = '◈';
1017
+ tchipStateText.textContent = 'ANALYZING';
1018
+
1019
+ // Reset layers
1020
+ ['contradiction', 'circular', 'nonsequitur', 'depth'].forEach(l => {
1021
+ const card = document.getElementById(`layer-${l}`);
1022
+ const status = document.getElementById(`layer-${l}-status`);
1023
+ card.classList.remove('triggered', 'clear');
1024
+ status.textContent = 'SCANNING...';
1025
+ });
1026
+
1027
+ // Reset bars
1028
+ ['bar-logic', 'bar-illogic', 'bar-confidence'].forEach(id => {
1029
+ document.getElementById(id).style.width = '0%';
1030
+ });
1031
+ ['val-logic', 'val-illogic', 'val-confidence'].forEach(id => {
1032
+ document.getElementById(id).textContent = '—';
1033
+ });
1034
+
1035
+ // Simulate processing delay
1036
+ await new Promise(r => setTimeout(r, 800));
1037
+
1038
+ const result = analyzeText(text);
1039
+ tchip.classList.remove('processing');
1040
+
1041
+ // Set T-CHIP state
1042
+ setTChipState(result.state);
1043
+
1044
+ // Update layers
1045
+ updateLayers(result.layers);
1046
+
1047
+ // Animate scores
1048
+ const stateColors = { BLUE: 'var(--blue)', RED: 'var(--red)', GOLD: 'var(--gold)' };
1049
+ animateBar('bar-logic', 'val-logic', result.logicScore, 'var(--blue)');
1050
+ animateBar('bar-illogic', 'val-illogic', result.illogicScore, 'var(--red)');
1051
+ animateBar('bar-confidence', 'val-confidence', result.confidence, stateColors[result.state]);
1052
+
1053
+ // Show result
1054
+ setTimeout(() => showResult(result), 500);
1055
+ }
1056
+
1057
+ function loadExample(text) {
1058
+ document.getElementById('input-text').value = text;
1059
+ updateCharCount();
1060
+ validate();
1061
+ }
1062
+
1063
+ function updateCharCount() {
1064
+ const len = document.getElementById('input-text').value.length;
1065
+ document.getElementById('char-count').textContent = len + ' CHARS';
1066
+ }
1067
+
1068
+ document.getElementById('input-text').addEventListener('input', updateCharCount);
1069
+ document.getElementById('input-text').addEventListener('keydown', function(e) {
1070
+ if (e.key === 'Enter' && !e.shiftKey) {
1071
+ e.preventDefault();
1072
+ validate();
1073
+ }
1074
+ });
1075
+
1076
+ // Initialize
1077
+ setTChipState('blue');
1078
+ tchipSymbol.textContent = '◈';
1079
+ tchipStateText.textContent = 'AWAITING INPUT';
1080
+ </script>
1081
+ </body>
1082
  </html>