Hugging Face's logo

Spaces:
humza7656
/
CognitiveTrace
Running

App Files Community
humza7656 commited on
Commit
0a49f90
·
verified ·
1 Parent(s): 46cc59a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +289 -19
index.html CHANGED
@@ -1,19 +1,289 @@
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
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>CognitiveTrace | Personality Assessment</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --primary: #6366f1;
12
+ --primary-glow: rgba(99, 102, 241, 0.15);
13
+ --bg-dark: #020617;
14
+ }
15
+
16
+ body {
17
+ font-family: 'Plus Jakarta Sans', sans-serif;
18
+ background-color: var(--bg-dark);
19
+ background-image:
20
+ radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.08) 0, transparent 50%),
21
+ radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.05) 0, transparent 50%);
22
+ color: #f8fafc;
23
+ overflow-x: hidden;
24
+ -webkit-tap-highlight-color: transparent;
25
+ }
26
+
27
+ h1, h2, h3, .font-display {
28
+ font-family: 'Outfit', sans-serif;
29
+ }
30
+
31
+ .glass {
32
+ background: rgba(15, 23, 42, 0.6);
33
+ backdrop-filter: blur(20px);
34
+ -webkit-backdrop-filter: blur(20px);
35
+ border: 1px solid rgba(255, 255, 255, 0.08);
36
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
37
+ }
38
+
39
+ .option-btn {
40
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
41
+ position: relative;
42
+ overflow: hidden;
43
+ }
44
+
45
+ .option-btn:active {
46
+ transform: scale(0.97);
47
+ }
48
+
49
+ .progress-fill {
50
+ transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
51
+ background: linear-gradient(90deg, #6366f1, #a855f7);
52
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
53
+ }
54
+
55
+ @keyframes fadeIn {
56
+ from { opacity: 0; transform: translateY(10px); }
57
+ to { opacity: 1; transform: translateY(0); }
58
+ }
59
+
60
+ .animate-fade {
61
+ animation: fadeIn 0.5s ease forwards;
62
+ }
63
+
64
+ /* Custom scrollbar for small mobile views */
65
+ ::-webkit-scrollbar {
66
+ width: 4px;
67
+ }
68
+ ::-webkit-scrollbar-track {
69
+ background: var(--bg-dark);
70
+ }
71
+ ::-webkit-scrollbar-thumb {
72
+ background: #1e293b;
73
+ border-radius: 10px;
74
+ }
75
+ </style>
76
+ </head>
77
+ <body class="min-h-screen flex flex-col items-center justify-center p-4 sm:p-8">
78
+
79
+ <!-- Increased max-w-lg to max-w-2xl for better text display -->
80
+ <div id="app" class="w-full max-w-2xl flex flex-col min-h-[70vh] justify-center">
81
+ <!-- Loader -->
82
+ <div id="loader" class="flex flex-col items-center">
83
+ <div class="relative w-16 h-16">
84
+ <div class="absolute inset-0 rounded-full border-4 border-indigo-500/20"></div>
85
+ <div class="absolute inset-0 rounded-full border-4 border-indigo-500 border-t-transparent animate-spin"></div>
86
+ </div>
87
+ <p class="mt-6 text-indigo-400/80 font-medium tracking-widest text-xs uppercase">CognitiveTrace</p>
88
+ </div>
89
+
90
+ <!-- Quiz Screen -->
91
+ <div id="quiz-container" class="hidden glass rounded-[2.5rem] p-8 sm:p-12 animate-fade">
92
+ <header class="mb-10">
93
+ <div class="flex flex-col gap-1 mb-6">
94
+ <h1 class="text-3xl font-extrabold tracking-tight text-white">Trace <span class="text-indigo-400">01</span></h1>
95
+ <p id="progress-text" class="text-[10px] uppercase tracking-[0.2em] font-bold text-slate-500">Processing Node 1/10</p>
96
+ </div>
97
+ <div class="w-full bg-slate-900 h-1.5 rounded-full p-0.5 overflow-hidden ring-1 ring-white/5">
98
+ <div id="progress-bar" class="progress-fill h-full rounded-full w-0"></div>
99
+ </div>
100
+ </header>
101
+
102
+ <main>
103
+ <div id="question-box" class="mb-12 min-h-[160px] flex items-center">
104
+ <p id="question-text" class="text-2xl sm:text-3xl font-medium leading-tight text-slate-100"></p>
105
+ </div>
106
+
107
+ <!-- Wider buttons with adjusted spacing -->
108
+ <div class="grid grid-cols-1 gap-4">
109
+ <button onclick="handleAnswer(1)" class="option-btn w-full group flex items-center justify-between bg-white/[0.03] hover:bg-indigo-500/10 border border-white/5 hover:border-indigo-500/40 p-6 rounded-2xl">
110
+ <span class="font-semibold text-lg text-slate-300 group-hover:text-white transition-colors text-left">Agree</span>
111
+ <div class="w-2.5 h-2.5 rounded-full bg-indigo-500/40 group-hover:bg-indigo-400 transition-all shadow-[0_0_8px_rgba(99,102,241,0.5)]"></div>
112
+ </button>
113
+
114
+ <button onclick="handleAnswer(0)" class="option-btn w-full group flex items-center justify-between bg-white/[0.03] hover:bg-slate-500/10 border border-white/5 hover:border-slate-500/40 p-6 rounded-2xl">
115
+ <span class="font-semibold text-lg text-slate-300 group-hover:text-white transition-colors text-left">Neutral</span>
116
+ <div class="w-2.5 h-2.5 rounded-full bg-slate-500/40 group-hover:bg-slate-400 transition-all"></div>
117
+ </button>
118
+
119
+ <button onclick="handleAnswer(-1)" class="option-btn w-full group flex items-center justify-between bg-white/[0.03] hover:bg-rose-500/10 border border-white/5 hover:border-rose-500/40 p-6 rounded-2xl">
120
+ <span class="font-semibold text-lg text-slate-300 group-hover:text-white transition-colors text-left">Disagree</span>
121
+ <div class="w-2.5 h-2.5 rounded-full bg-rose-500/40 group-hover:bg-rose-400 transition-all shadow-[0_0_8px_rgba(244,63,94,0.5)]"></div>
122
+ </button>
123
+ </div>
124
+ </main>
125
+ </div>
126
+
127
+ <!-- Submission / Results -->
128
+ <div id="result-container" class="hidden glass rounded-[2.5rem] p-10 sm:p-16 text-center animate-fade">
129
+ <div id="submit-ui">
130
+ <div class="relative w-24 h-24 mx-auto mb-8">
131
+ <div class="absolute inset-0 bg-indigo-500/20 blur-2xl rounded-full"></div>
132
+ <div class="relative w-full h-full flex items-center justify-center bg-indigo-500/10 border border-indigo-500/30 rounded-full">
133
+ <svg class="w-10 h-10 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
134
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
135
+ </svg>
136
+ </div>
137
+ </div>
138
+ <h2 class="text-4xl font-extrabold text-white mb-4">Patterns Locked</h2>
139
+ <p class="text-slate-400 mb-10 leading-relaxed text-base px-4 max-w-md mx-auto">The trace is complete. Your cognitive map is ready for extraction and analysis.</p>
140
+ <button id="submit-btn" onclick="submitResults()" class="w-full max-w-sm mx-auto bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-5 rounded-2xl shadow-xl shadow-indigo-500/20 transition-all uppercase tracking-widest text-xs">
141
+ Reveal Cognitive Archetype
142
+ </button>
143
+ </div>
144
+
145
+ <div id="final-result" class="hidden py-4">
146
+ <div class="mb-8 inline-block px-4 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-[10px] font-bold text-indigo-400 uppercase tracking-tighter">
147
+ Dominant Classification
148
+ </div>
149
+ <h3 id="trait-name" class="text-5xl sm:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-br from-white to-slate-500 mb-8 leading-tight uppercase tracking-tight">---</h3>
150
+
151
+ <div class="p-8 bg-white/[0.02] rounded-3xl border border-white/5 mb-10 text-left max-w-md mx-auto">
152
+ <p class="text-slate-400 text-sm leading-relaxed">Your patterns suggest a high correlation with the displayed profile. This archetype reflects your habitual response mechanisms and cognitive preferences.</p>
153
+ </div>
154
+
155
+ <button onclick="location.reload()" class="group inline-flex items-center gap-2 text-slate-500 hover:text-white transition-all text-xs font-bold uppercase tracking-widest">
156
+ <span>Reset Trace</span>
157
+ <svg class="w-4 h-4 group-hover:rotate-180 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
158
+ </button>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Developer Credit Footer -->
163
+ <footer class="mt-10 text-center animate-fade opacity-40 hover:opacity-100 transition-opacity duration-500">
164
+ <p class="text-[10px] uppercase tracking-[0.3em] font-semibold text-slate-500">
165
+ Developed by <span class="text-indigo-400">Hamza</span>
166
+ </p>
167
+ </footer>
168
+
169
+ <!-- Toast Notifications -->
170
+ <div id="feedback-box" class="fixed bottom-10 left-4 right-4 sm:left-1/2 sm:right-auto sm:-translate-x-1/2 hidden z-50">
171
+ <div class="bg-rose-950/80 border border-rose-500/50 backdrop-blur-md text-rose-200 px-6 py-4 rounded-2xl shadow-2xl flex items-center gap-3">
172
+ <div class="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></div>
173
+ <p id="error-msg" class="text-sm font-medium"></p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <script>
179
+ const BASE_URL = 'https://humza7656-cognitivetrace-backend.hf.space';
180
+ let questions = [];
181
+ let currentIdx = 0;
182
+ let responses = [];
183
+
184
+ const loader = document.getElementById('loader');
185
+ const quizContainer = document.getElementById('quiz-container');
186
+ const resultContainer = document.getElementById('result-container');
187
+ const questionText = document.getElementById('question-text');
188
+ const progressText = document.getElementById('progress-text');
189
+ const progressBar = document.getElementById('progress-bar');
190
+ const traitDisplay = document.getElementById('trait-name');
191
+ const feedbackBox = document.getElementById('feedback-box');
192
+ const errorMsg = document.getElementById('error-msg');
193
+
194
+ async function fetchQuestions() {
195
+ try {
196
+ const response = await fetch(`${BASE_URL}/get_question`);
197
+ const data = await response.json();
198
+
199
+ const rawString = data.CognitiveTrace;
200
+ questions = rawString.split('\n')
201
+ .filter(line => line.trim() !== '')
202
+ .map(q => q.replace(/^\d+\.\s*/, '').trim());
203
+
204
+ setTimeout(() => {
205
+ loader.classList.add('hidden');
206
+ quizContainer.classList.remove('hidden');
207
+ renderQuestion();
208
+ }, 800);
209
+ } catch (err) {
210
+ showError("Neural link failed. Verify connectivity.");
211
+ }
212
+ }
213
+
214
+ function renderQuestion() {
215
+ if (currentIdx < questions.length) {
216
+ questionText.style.opacity = '0';
217
+ questionText.style.transform = 'translateY(10px)';
218
+
219
+ setTimeout(() => {
220
+ questionText.textContent = questions[currentIdx];
221
+ progressText.textContent = `Processing Node ${currentIdx + 1}/${questions.length}`;
222
+ progressBar.style.width = `${((currentIdx + 1) / questions.length) * 100}%`;
223
+
224
+ questionText.style.opacity = '1';
225
+ questionText.style.transform = 'translateY(0)';
226
+ questionText.style.transition = 'all 0.4s ease';
227
+ }, 100);
228
+ } else {
229
+ quizContainer.classList.add('hidden');
230
+ resultContainer.classList.remove('hidden');
231
+ }
232
+ }
233
+
234
+ function handleAnswer(val) {
235
+ responses.push(val);
236
+ currentIdx++;
237
+ renderQuestion();
238
+ }
239
+
240
+ async function submitResults() {
241
+ const btn = document.getElementById('submit-btn');
242
+ btn.disabled = true;
243
+ btn.innerHTML = `
244
+ <div class="flex items-center justify-center gap-2">
245
+ <svg class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
246
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
247
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
248
+ </svg>
249
+ <span>Extracting...</span>
250
+ </div>
251
+ `;
252
+
253
+ try {
254
+ const payload = { "user": responses };
255
+
256
+ const response = await fetch(`${BASE_URL}/check_user`, {
257
+ method: 'POST',
258
+ headers: { 'Content-Type': 'application/json' },
259
+ body: JSON.stringify(payload)
260
+ });
261
+
262
+ if (!response.ok) throw new Error('Analysis failed');
263
+
264
+ const data = await response.json();
265
+
266
+ document.getElementById('submit-ui').classList.add('hidden');
267
+ document.getElementById('final-result').classList.remove('hidden');
268
+ traitDisplay.textContent = data.CognitiveTrace;
269
+
270
+ } catch (err) {
271
+ showError("Encryption mismatch. Please retry.");
272
+ btn.disabled = false;
273
+ btn.textContent = 'Reveal Cognitive Archetype';
274
+ }
275
+ }
276
+
277
+ function showError(msg) {
278
+ errorMsg.textContent = msg;
279
+ feedbackBox.classList.remove('hidden');
280
+ feedbackBox.classList.add('animate-fade');
281
+ setTimeout(() => {
282
+ feedbackBox.classList.add('hidden');
283
+ }, 5000);
284
+ }
285
+
286
+ window.onload = fetchQuestions;
287
+ </script>
288
+ </body>
289
+ </html>