Hugging Face's logo

Spaces:
Kabanchiquito
/
neuroscape
Running

App Files Community
Kabanchiquito commited on
Commit
ed67baf
·
verified ·
1 Parent(s): 5793040

окей продолжай и за этот запрос доделай все меню генерации персонажа, внешность делать не надо. и женский пол не надо

Browse files
Files changed (5) hide show
  1. README.md +8 -5
  2. components/navbar.js +373 -0
  3. index.html +628 -19
  4. script.js +393 -0
  5. style.css +94 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Neuroscape
3
- emoji: 🐨
4
- colorFrom: gray
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: NeuroScape 🧠
3
+ colorFrom: blue
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/navbar.js ADDED
@@ -0,0 +1,373 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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">
6
+ <title>NeuroScape - Character Psychology</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ 'void-dark': '#0f172a',
17
+ 'neural-blue': '#0ea5e9',
18
+ 'blood-red': '#7f1d1d',
19
+ 'flesh-tan': '#78350f',
20
+ 'synapse-glow': '#38bdf8',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ </head>
27
+ <body class="bg-void-dark text-slate-300 font-sans antialiased min-h-screen flex flex-col overflow-hidden">
28
+
29
+ <!-- Navbar Component -->
30
+ <site-nav></site-nav>
31
+
32
+ <div class="flex flex-1 overflow-hidden relative">
33
+ <!-- Background Decor -->
34
+ <div class="absolute inset-0 z-0 opacity-10 pointer-events-none">
35
+ <div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(#38bdf8 1px, transparent 1px); background-size: 40px 40px;"></div>
36
+ </div>
37
+
38
+ <!-- Sidebar: Character Summary & Neural Map -->
39
+ <aside class="w-80 bg-slate-900/80 backdrop-blur-md border-r border-slate-700 flex flex-col z-10 hidden lg:flex">
40
+ <div class="p-6 border-b border-slate-700">
41
+ <h2 class="text-neural-blue font-bold uppercase tracking-widest text-xs mb-4">Subject Profile</h2>
42
+ <div class="relative w-full aspect-[4/5] rounded-lg overflow-hidden border border-slate-600 shadow-lg group">
43
+ <img src="http://static.photos/people/640x800/12" alt="Character Avatar" class="object-cover w-full h-full opacity-80 group-hover:opacity-100 transition-opacity">
44
+ <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-4">
45
+ <p class="text-white font-bold text-lg" id="char-name-display">Unknown</p>
46
+ <p class="text-xs text-slate-400">Age: <span id="char-age-display">24</span></p>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="p-6 flex-1 overflow-y-auto">
52
+ <h3 class="text-slate-500 font-semibold text-xs uppercase mb-4">Mental State Preview</h3>
53
+ <!-- Mini Neural Map Viz -->
54
+ <div class="bg-black/50 rounded border border-slate-700 h-48 relative overflow-hidden flex items-center justify-center mb-6">
55
+ <canvas id="neural-preview" class="absolute inset-0 w-full h-full"></canvas>
56
+ <div class="text-center relative z-10">
57
+ <span class="text-3xl font-bold text-white block" id="sanity-score">85%</span>
58
+ <span class="text-xs text-slate-500 uppercase">Stability</span>
59
+ </div>
60
+ </div>
61
+
62
+ <div class="space-y-4">
63
+ <div class="flex justify-between items-center text-sm">
64
+ <span class="text-slate-400">Cognitive Load</span>
65
+ <span class="text-neural-blue font-mono">Low</span>
66
+ </div>
67
+ <div class="w-full bg-slate-800 h-1 rounded-full overflow-hidden">
68
+ <div class="bg-neural-blue h-full w-[30%]"></div>
69
+ </div>
70
+
71
+ <div class="flex justify-between items-center text-sm">
72
+ <span class="text-slate-400">Trauma Level</span>
73
+ <span class="text-red-500 font-mono">None</span>
74
+ </div>
75
+ <div class="w-full bg-slate-800 h-1 rounded-full overflow-hidden">
76
+ <div class="bg-red-500 h-full w-[0%]"></div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="p-4 border-t border-slate-700">
82
+ <a href="game.html" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3 px-4 rounded shadow-lg shadow-emerald-900/20 flex items-center justify-center transition-all">
83
+ <i data-feather="play" class="mr-2 w-4 h-4"></i> Begin Simulation
84
+ </a>
85
+ </div>
86
+ </aside>
87
+
88
+ <!-- Main Content Area -->
89
+ <main class="flex-1 flex flex-col relative z-10 overflow-hidden">
90
+ <!-- Tabs -->
91
+ <header class="bg-slate-900/90 border-b border-slate-700 px-8 py-4 flex items-center justify-between backdrop-blur">
92
+ <div class="flex space-x-8" id="customization-tabs">
93
+ <button class="tab-btn text-slate-500 hover:text-slate-300 font-medium pb-2 border-b-2 border-transparent transition-colors" data-target="biology">Biology</button>
94
+ <button class="tab-btn text-neural-blue border-b-2 border-neural-blue font-medium pb-2 transition-colors" data-target="psychology">Psychology & Mentality</button>
95
+ <button class="tab-btn text-slate-500 hover:text-slate-300 font-medium pb-2 border-b-2 border-transparent transition-colors" data-target="beliefs">Beliefs & Ideology</button>
96
+ <button class="tab-btn text-slate-500 hover:text-slate-300 font-medium pb-2 border-b-2 border-transparent transition-colors" data-target="background">Background</button>
97
+ </div>
98
+ <div class="text-xs text-slate-500 font-mono">
99
+ ID: <span class="text-slate-300">SUBJ-8492</span>
100
+ </div>
101
+ </header>
102
+
103
+ <!-- Content Panel -->
104
+ <div class="flex-1 overflow-y-auto p-8 scroll-smooth">
105
+
106
+ <!-- Psychology Tab -->
107
+ <section id="psychology" class="tab-content space-y-8">
108
+
109
+ <!-- Intro -->
110
+ <div class="max-w-4xl">
111
+ <h1 class="text-3xl font-bold text-white mb-2">Mental Architecture</h1>
112
+ <p class="text-slate-400">Define the cognitive framework of your character. Select traits that influence perception, emotional response, and susceptibility to obsessions (neurons).</p>
113
+ </div>
114
+
115
+ <!-- Cognitive Tools Analysis -->
116
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
117
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6 hover:border-slate-600 transition-colors">
118
+ <div class="flex justify-between items-start mb-4">
119
+ <div class="flex items-center space-x-3">
120
+ <div class="p-2 bg-purple-900/50 rounded-lg text-purple-400"><i data-feather="cpu"></i></div>
121
+ <h3 class="font-bold text-lg text-white">Cognitive Analysis</h3>
122
+ </div>
123
+ </div>
124
+ <p class="text-sm text-slate-400 mb-6">Tools used by the consciousness to process reality. High values allow better control of neural desires, but may reduce emotional depth.</p>
125
+
126
+ <div class="space-y-4">
127
+ <!-- Stat Bars -->
128
+ <div class="stat-control" data-stat="logic">
129
+ <div class="flex justify-between text-sm mb-1">
130
+ <span class="text-slate-300">Logic</span>
131
+ <span class="text-slate-400 font-mono value-display">50%</span>
132
+ </div>
133
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500">
134
+ <p class="text-xs text-slate-500 mt-1">Reduces confusion, increases learning speed of technical skills.</p>
135
+ </div>
136
+
137
+ <div class="stat-control" data-stat="emotion">
138
+ <div class="flex justify-between text-sm mb-1">
139
+ <span class="text-slate-300">Emotion</span>
140
+ <span class="text-slate-400 font-mono value-display">50%</span>
141
+ </div>
142
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-pink-500">
143
+ <p class="text-xs text-slate-500 mt-1">Amplifies social bonding, but increases vulnerability to stress.</p>
144
+ </div>
145
+
146
+ <div class="stat-control" data-stat="id">
147
+ <div class="flex justify-between text-sm mb-1">
148
+ <span class="text-slate-300">Id (Impulse)</span>
149
+ <span class="text-slate-400 font-mono value-display">50%</span>
150
+ </div>
151
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-orange-500">
152
+ <p class="text-xs text-slate-500 mt-1">Drive for immediate satisfaction. High values risk "Obsession" neurons faster.</p>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Traits Selector -->
158
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6 flex flex-col h-full">
159
+ <div class="flex justify-between items-start mb-4">
160
+ <div class="flex items-center space-x-3">
161
+ <div class="p-2 bg-blue-900/50 rounded-lg text-blue-400"><i data-feather="list"></i></div>
162
+ <h3 class="font-bold text-lg text-white">Traits & Quirks</h3>
163
+ </div>
164
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded text-slate-300">Points: <span id="trait-points" class="text-white font-bold">3</span></span>
165
+ </div>
166
+ <p class="text-sm text-slate-400 mb-4">Inherent psychological patterns. Some are beneficial, others are burdens.</p>
167
+
168
+ <div class="flex-1 overflow-y-auto pr-2 space-y-2 custom-scrollbar" id="traits-list">
169
+ <!-- Trait Item Template -->
170
+ <div class="trait-item group flex items-center justify-between p-3 rounded border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
171
+ <div class="flex items-center space-x-3">
172
+ <div class="w-8 h-8 rounded bg-green-900/30 flex items-center justify-center text-green-500 border border-green-900">
173
+ <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i>
174
+ </div>
175
+ <div>
176
+ <h4 class="text-sm font-bold text-slate-200">Optimist</h4>
177
+ <p class="text-xs text-slate-500">Mood +10, Stress recovery +20%</p>
178
+ </div>
179
+ </div>
180
+ <span class="text-xs font-bold text-green-500">+1</span>
181
+ </div>
182
+
183
+ <div class="trait-item group flex items-center justify-between p-3 rounded border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
184
+ <div class="flex items-center space-x-3">
185
+ <div class="w-8 h-8 rounded bg-green-900/30 flex items-center justify-center text-green-500 border border-green-900">
186
+ <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i>
187
+ </div>
188
+ <div>
189
+ <h4 class="text-sm font-bold text-slate-200">Iron Willed</h4>
190
+ <p class="text-xs text-slate-500">Mental break threshold +15%, Pain tolerance +10%</p>
191
+ </div>
192
+ </div>
193
+ <span class="text-xs font-bold text-green-500">+2</span>
194
+ </div>
195
+
196
+ <div class="trait-item group flex items-center justify-between p-3 rounded border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
197
+ <div class="flex items-center space-x-3">
198
+ <div class="w-8 h-8 rounded bg-red-900/30 flex items-center justify-center text-red-500 border border-red-900">
199
+ <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i>
200
+ </div>
201
+ <div>
202
+ <h4 class="text-sm font-bold text-slate-200">Cannibalistic Urges</h4>
203
+ <p class="text-xs text-slate-500">Hunger grows faster, Eating human flesh: Mood +20 (No penalty)</p>
204
+ </div>
205
+ </div>
206
+ <span class="text-xs font-bold text-red-500">-1</span>
207
+ </div>
208
+
209
+ <div class="trait-item group flex items-center justify-between p-3 rounded border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
210
+ <div class="flex items-center space-x-3">
211
+ <div class="w-8 h-8 rounded bg-red-900/30 flex items-center justify-center text-red-500 border border-red-900">
212
+ <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i>
213
+ </div>
214
+ <div>
215
+ <h4 class="text-sm font-bold text-slate-200">Psychopath</h4>
216
+ <p class="text-xs text-slate-500">Empathy -100%, Social manipulation +30%, No guilt</p>
217
+ </div>
218
+ </div>
219
+ <span class="text-xs font-bold text-green-500">+2</span>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </section>
225
+
226
+ <!-- Beliefs Tab (Hidden by default) -->
227
+ <section id="beliefs" class="tab-content hidden space-y-8">
228
+ <div class="max-w-4xl">
229
+ <h1 class="text-3xl font-bold text-white mb-2">Beliefs Structure</h1>
230
+ <p class="text-slate-400">Construct a moral framework. This defines how neurons for "Self-Actualization" behave and what moral penalties you suffer.</p>
231
+ </div>
232
+
233
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
234
+ <!-- Ideology Picker -->
235
+ <div class="lg:col-span-2 space-y-6">
236
+ <!-- Slider Group -->
237
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6">
238
+ <h3 class="text-white font-bold mb-6 border-b border-slate-700 pb-2">Moral Spectrum</h3>
239
+
240
+ <div class="space-y-8">
241
+ <!-- Slider 1 -->
242
+ <div class="belief-slider">
243
+ <div class="flex justify-between text-sm mb-2">
244
+ <span class="text-slate-400">Collectivism <i data-feather="users" class="inline w-3 h-3 ml-1"></i></span>
245
+ <span class="text-slate-400">Individualism <i data-feather="user" class="inline w-3 h-3 ml-1"></i></span>
246
+ </div>
247
+ <div class="relative h-2 bg-slate-700 rounded-full">
248
+ <input type="range" min="0" max="100" value="50" class="absolute w-full h-full opacity-0 cursor-pointer z-20">
249
+ <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-blue-600 via-slate-600 to-purple-600 rounded-full w-full"></div>
250
+ <div class="absolute top-1/2 transform -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow border border-slate-400 z-10 pointer-events-none" style="left: 50%"></div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Slider 2 -->
255
+ <div class="belief-slider">
256
+ <div class="flex justify-between text-sm mb-2">
257
+ <span class="text-slate-400">Loyalty <i data-feather="heart" class="inline w-3 h-3 ml-1"></i></span>
258
+ <span class="text-slate-400">Freedom <i data-feather="wind" class="inline w-3 h-3 ml-1"></i></span>
259
+ </div>
260
+ <div class="relative h-2 bg-slate-700 rounded-full">
261
+ <input type="range" min="0" max="100" value="20" class="absolute w-full h-full opacity-0 cursor-pointer z-20">
262
+ <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-red-600 via-slate-600 to-green-600 rounded-full w-full"></div>
263
+ <div class="absolute top-1/2 transform -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow border border-slate-400 z-10 pointer-events-none" style="left: 20%"></div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Slider 3 -->
268
+ <div class="belief-slider">
269
+ <div class="flex justify-between text-sm mb-2">
270
+ <span class="text-slate-400">Rationality <i data-feather="aperture" class="inline w-3 h-3 ml-1"></i></span>
271
+ <span class="text-slate-400">Spirituality <i data-feather="moon" class="inline w-3 h-3 ml-1"></i></span>
272
+ </div>
273
+ <div class="relative h-2 bg-slate-700 rounded-full">
274
+ <input type="range" min="0" max="100" value="70" class="absolute w-full h-full opacity-0 cursor-pointer z-20">
275
+ <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-cyan-600 via-slate-600 to-indigo-600 rounded-full w-full"></div>
276
+ <div class="absolute top-1/2 transform -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow border border-slate-400 z-10 pointer-events-none" style="left: 70%"></div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Slider 4 -->
281
+ <div class="belief-slider">
282
+ <div class="flex justify-between text-sm mb-2">
283
+ <span class="text-slate-400">Life (Pacifism) <i data-feather="sun" class="inline w-3 h-3 ml-1"></i></span>
284
+ <span class="text-slate-400">Power (Might) <i data-feather="crosshair" class="inline w-3 h-3 ml-1"></i></span>
285
+ </div>
286
+ <div class="relative h-2 bg-slate-700 rounded-full">
287
+ <input type="range" min="0" max="100" value="40" class="absolute w-full h-full opacity-0 cursor-pointer z-20">
288
+ <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-yellow-600 via-slate-600 to-red-800 rounded-full w-full"></div>
289
+ <div class="absolute top-1/2 transform -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow border border-slate-400 z-10 pointer-events-none" style="left: 40%"></div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Precepts Selection -->
296
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6">
297
+ <h3 class="text-white font-bold mb-4">Specific Precepts</h3>
298
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
299
+ <div class="relative">
300
+ <select class="w-full bg-slate-900 border border-slate-600 text-slate-300 text-sm rounded p-2.5 focus:ring-1 focus:ring-neural-blue focus:border-neural-blue appearance-none">
301
+ <option>Corpse consumption: Disapproved</option>
302
+ <option>Corpse consumption: Accepted</option>
303
+ <option selected>Corpse consumption: Preferred (Obsession)</option>
304
+ </select>
305
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
306
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
307
+ </div>
308
+ </div>
309
+ <div class="relative">
310
+ <select class="w-full bg-slate-900 border border-slate-600 text-slate-300 text-sm rounded p-2.5 focus:ring-1 focus:ring-neural-blue focus:border-neural-blue appearance-none">
311
+ <option>Organ use: Don't care</option>
312
+ <option>Organ use: Horrified</option>
313
+ </select>
314
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
315
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
316
+ </div>
317
+ </div>
318
+ <div class="relative">
319
+ <select class="w-full bg-slate-900 border border-slate-600 text-slate-300 text-sm rounded p-2.5 focus:ring-1 focus:ring-neural-blue focus:border-neural-blue appearance-none">
320
+ <option>Killing innocent: Horrified</option>
321
+ <option selected>Killing innocent: Neutral</option>
322
+ </select>
323
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
324
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Ideology Summary Panel -->
332
+ <div class="bg-slate-900 border border-slate-700 rounded-xl p-6 flex flex-col">
333
+ <h3 class="text-slate-500 font-bold text-xs uppercase mb-4">Resulting Ideology</h3>
334
+ <div class="text-center mb-6">
335
+ <div class="w-20 h-20 mx-auto bg-slate-800 rounded-full flex items-center justify-center border-2 border-neural-blue mb-3 shadow-[0_0_15px_rgba(14,165,233,0.3)]">
336
+ <i data-feather="shield" class="w-10 h-10 text-neural-blue"></i>
337
+ </div>
338
+ <h2 class="text-xl font-bold text-white" id="ideology-name">Survivalist Pragmatism</h2>
339
+ <p class="text-sm text-slate-500 mt-1">Structure: Loose</p>
340
+ </div>
341
+
342
+ <div class="space-y-4 flex-1">
343
+ <div>
344
+ <div class="text-xs text-slate-400 uppercase mb-1">Originating Style</div>
345
+ <div class="text-sm text-slate-200">Generic + Deserter</div>
346
+ </div>
347
+ <div>
348
+ <div class="text-xs text-slate-400 uppercase mb-1">Meme Guide</div>
349
+ <div class="flex flex-wrap gap-2">
350
+ <span class="px-2 py-1 bg-slate-800 text-xs rounded text-slate-300 border border-slate-700">Collectivism: +</span>
351
+ <span class="px-2 py-1 bg-slate-800 text-xs rounded text-slate-300 border border-slate-700">Loyalty: ++</span>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="mt-4 p-3 bg-slate-800 rounded border border-slate-700">
357
+ <div class="flex items-center space-x-2 text-xs text-orange-400">
358
+ <i data-feather="alert-triangle" class="w-3 h-3"></i>
359
+ <span>Conflict with Trait: Psychopath</span>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </section>
365
+ </div>
366
+ </main>
367
+ </div>
368
+
369
+ <script src="components/navbar.js"></script>
370
+ <script src="script.js"></script>
371
+ <script>feather.replace();</script>
372
+ </body>
373
+ </html>
index.html CHANGED
@@ -1,19 +1,628 @@
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">
6
+ <title>NeuroScape - Character Psychology</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ 'void-dark': '#0f172a',
17
+ 'neural-blue': '#0ea5e9',
18
+ 'blood-red': '#7f1d1d',
19
+ 'flesh-tan': '#78350f',
20
+ 'synapse-glow': '#38bdf8',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ </head>
27
+ <body class="bg-void-dark text-slate-300 font-sans antialiased min-h-screen flex flex-col overflow-hidden">
28
+
29
+ <!-- Navbar Component -->
30
+ <site-nav></site-nav>
31
+
32
+ <div class="flex flex-1 overflow-hidden relative">
33
+ <!-- Background Decor -->
34
+ <div class="absolute inset-0 z-0 opacity-10 pointer-events-none">
35
+ <div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(#38bdf8 1px, transparent 1px); background-size: 40px 40px;"></div>
36
+ </div>
37
+
38
+ <!-- Sidebar: Character Summary & Neural Map -->
39
+ <aside class="w-80 bg-slate-900/80 backdrop-blur-md border-r border-slate-700 flex flex-col z-10 hidden lg:flex">
40
+ <div class="p-6 border-b border-slate-700">
41
+ <h2 class="text-neural-blue font-bold uppercase tracking-widest text-xs mb-4">Subject Profile</h2>
42
+ <div class="relative w-full aspect-[4/5] rounded-lg overflow-hidden border border-slate-600 shadow-lg group">
43
+ <img src="http://static.photos/people/640x800/12" alt="Character Avatar" class="object-cover w-full h-full opacity-80 group-hover:opacity-100 transition-opacity">
44
+ <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-4">
45
+ <p class="text-white font-bold text-lg" id="char-name-display">Unknown</p>
46
+ <p class="text-xs text-slate-400">Age: <span id="char-age-display">24</span></p>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="p-6 flex-1 overflow-y-auto">
52
+ <h3 class="text-slate-500 font-semibold text-xs uppercase mb-4">Mental State Preview</h3>
53
+ <!-- Mini Neural Map Viz -->
54
+ <div class="bg-black/50 rounded border border-slate-700 h-48 relative overflow-hidden flex items-center justify-center mb-6">
55
+ <canvas id="neural-preview" class="absolute inset-0 w-full h-full"></canvas>
56
+ <div class="text-center relative z-10">
57
+ <span class="text-3xl font-bold text-white block" id="sanity-score">85%</span>
58
+ <span class="text-xs text-slate-500 uppercase">Stability</span>
59
+ </div>
60
+ </div>
61
+
62
+ <div class="space-y-4">
63
+ <div class="flex justify-between items-center text-sm">
64
+ <span class="text-slate-400">Cognitive Load</span>
65
+ <span class="text-neural-blue font-mono">Low</span>
66
+ </div>
67
+ <div class="w-full bg-slate-800 h-1 rounded-full overflow-hidden">
68
+ <div class="bg-neural-blue h-full w-[30%]"></div>
69
+ </div>
70
+
71
+ <div class="flex justify-between items-center text-sm">
72
+ <span class="text-slate-400">Trauma Level</span>
73
+ <span class="text-red-500 font-mono">None</span>
74
+ </div>
75
+ <div class="w-full bg-slate-800 h-1 rounded-full overflow-hidden">
76
+ <div class="bg-red-500 h-full w-[0%]"></div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="p-4 border-t border-slate-700">
82
+ <a href="game.html" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3 px-4 rounded shadow-lg shadow-emerald-900/20 flex items-center justify-center transition-all">
83
+ <i data-feather="play" class="mr-2 w-4 h-4"></i> Begin Simulation
84
+ </a>
85
+ </div>
86
+ </aside>
87
+
88
+ <!-- Main Content Area -->
89
+ <main class="flex-1 flex flex-col relative z-10 overflow-hidden">
90
+ <!-- Tabs -->
91
+ <header class="bg-slate-900/90 border-b border-slate-700 px-8 py-4 flex items-center justify-between backdrop-blur">
92
+ <div class="flex space-x-8" id="customization-tabs">
93
+ <button class="tab-btn text-slate-500 hover:text-slate-300 font-medium pb-2 border-b-2 border-transparent transition-colors" data-target="biology">Biology</button>
94
+ <button class="tab-btn text-neural-blue border-b-2 border-neural-blue font-medium pb-2 transition-colors" data-target="psychology">Psychology & Mentality</button>
95
+ <button class="tab-btn text-slate-500 hover:text-slate-300 font-medium pb-2 border-b-2 border-transparent transition-colors" data-target="beliefs">Beliefs & Ideology</button>
96
+ <button class="tab-btn text-slate-500 hover:text-slate-300 font-medium pb-2 border-b-2 border-transparent transition-colors" data-target="background">Background</button>
97
+ </div>
98
+ <div class="text-xs text-slate-500 font-mono">
99
+ ID: <span class="text-slate-300">SUBJ-8492</span>
100
+ </div>
101
+ </header>
102
+
103
+ <!-- Content Panel -->
104
+ <div class="flex-1 overflow-y-auto p-8 scroll-smooth">
105
+ <!-- Biology Tab -->
106
+ <section id="biology" class="tab-content space-y-8">
107
+ <div class="max-w-4xl">
108
+ <h1 class="text-3xl font-bold text-white mb-2">Biological Configuration</h1>
109
+ <p class="text-slate-400">Define the physical vessel. Strength determines combat capability, agility affects movement and dodge, toughness influences pain threshold and recovery.</p>
110
+ </div>
111
+
112
+ <!-- Basic Info -->
113
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
114
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6">
115
+ <div class="flex items-center space-x-3 mb-6">
116
+ <div class="p-2 bg-emerald-900/50 rounded-lg text-emerald-400"><i data-feather="user"></i></div>
117
+ <h3 class="font-bold text-lg text-white">Identity</h3>
118
+ </div>
119
+
120
+ <div class="space-y-4">
121
+ <div>
122
+ <label class="block text-sm text-slate-400 mb-2">Subject Name</label>
123
+ <input type="text" id="char-name" placeholder="Enter designation..." class="w-full bg-slate-900 border border-slate-600 text-slate-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-neural-blue focus:border-transparent transition-all">
124
+ </div>
125
+
126
+ <div>
127
+ <label class="block text-sm text-slate-400 mb-2">Biological Age: <span id="age-value" class="text-neural-blue font-mono">24</span></label>
128
+ <input type="range" id="char-age" min="18" max="70" value="24" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-500">
129
+ <div class="flex justify-between text-xs text-slate-500 mt-1">
130
+ <span>18</span>
131
+ <span>70</span>
132
+ </div>
133
+ </div>
134
+
135
+ <div>
136
+ <label class="block text-sm text-slate-400 mb-2">Sex</label>
137
+ <div class="flex items-center space-x-4">
138
+ <div class="flex items-center space-x-2 bg-emerald-900/30 border border-emerald-700 px-4 py-2 rounded-lg">
139
+ <i data-feather="user" class="w-4 h-4 text-emerald-400"></i>
140
+ <span class="text-emerald-300 font-medium">Male</span>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Physical Stats -->
148
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6">
149
+ <div class="flex items-center space-x-3 mb-6">
150
+ <div class="p-2 bg-red-900/50 rounded-lg text-red-400"><i data-feather="activity"></i></div>
151
+ <h3 class="font-bold text-lg text-white">Physical Attributes</h3>
152
+ </div>
153
+
154
+ <div class="space-y-5">
155
+ <div class="stat-control" data-stat="strength">
156
+ <div class="flex justify-between text-sm mb-2">
157
+ <span class="text-slate-300">Strength</span>
158
+ <span class="text-slate-400 font-mono value-display">50%</span>
159
+ </div>
160
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-red-500">
161
+ <p class="text-xs text-slate-500 mt-1">Melee damage, carrying capacity, labor speed.</p>
162
+ </div>
163
+
164
+ <div class="stat-control" data-stat="agility">
165
+ <div class="flex justify-between text-sm mb-2">
166
+ <span class="text-slate-300">Agility</span>
167
+ <span class="text-slate-400 font-mono value-display">50%</span>
168
+ </div>
169
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-yellow-500">
170
+ <p class="text-xs text-slate-500 mt-1">Movement speed, dodge chance, ranged accuracy.</p>
171
+ </div>
172
+
173
+ <div class="stat-control" data-stat="toughness">
174
+ <div class="flex justify-between text-sm mb-2">
175
+ <span class="text-slate-300">Toughness</span>
176
+ <span class="text-slate-400 font-mono value-display">50%</span>
177
+ </div>
178
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-orange-500">
179
+ <p class="text-xs text-slate-500 mt-1">Health pool, pain threshold, disease resistance.</p>
180
+ </div>
181
+
182
+ <div class="stat-control" data-stat="perception">
183
+ <div class="flex justify-between text-sm mb-2">
184
+ <span class="text-slate-300">Perception</span>
185
+ <span class="text-slate-400 font-mono value-display">50%</span>
186
+ </div>
187
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-500">
188
+ <p class="text-xs text-slate-500 mt-1">Sight range, detection of threats, research speed.</p>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Health & Conditions -->
195
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6">
196
+ <div class="flex items-center space-x-3 mb-4">
197
+ <div class="p-2 bg-pink-900/50 rounded-lg text-pink-400"><i data-feather="heart"></i></div>
198
+ <h3 class="font-bold text-lg text-white">Starting Condition</h3>
199
+ </div>
200
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
201
+ <div class="bg-slate-900 rounded-lg p-4 border border-slate-700">
202
+ <div class="flex items-center justify-between mb-2">
203
+ <span class="text-slate-400 text-sm">Health</span>
204
+ <span class="text-green-400 font-mono font-bold">100%</span>
205
+ </div>
206
+ <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
207
+ <div class="bg-green-500 h-full w-full"></div>
208
+ </div>
209
+ </div>
210
+ <div class="bg-slate-900 rounded-lg p-4 border border-slate-700">
211
+ <div class="flex items-center justify-between mb-2">
212
+ <span class="text-slate-400 text-sm">Hunger</span>
213
+ <span class="text-yellow-400 font-mono font-bold">0%</span>
214
+ </div>
215
+ <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
216
+ <div class="bg-yellow-500 h-full w-0"></div>
217
+ </div>
218
+ </div>
219
+ <div class="bg-slate-900 rounded-lg p-4 border border-slate-700">
220
+ <div class="flex items-center justify-between mb-2">
221
+ <span class="text-slate-400 text-sm">Rest</span>
222
+ <span class="text-blue-400 font-mono font-bold">100%</span>
223
+ </div>
224
+ <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
225
+ <div class="bg-blue-500 h-full w-full"></div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </section>
231
+
232
+ <!-- Psychology Tab -->
233
+ <section id="psychology" class="tab-content hidden space-y-8">
234
+ <!-- Intro -->
235
+ <div class="max-w-4xl">
236
+ <h1 class="text-3xl font-bold text-white mb-2">Mental Architecture</h1>
237
+ <p class="text-slate-400">Define the cognitive framework of your character. Select traits that influence perception, emotional response, and susceptibility to obsessions (neurons).</p>
238
+ </div>
239
+
240
+ <!-- Cognitive Tools Analysis -->
241
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
242
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6 hover:border-slate-600 transition-colors">
243
+ <div class="flex justify-between items-start mb-4">
244
+ <div class="flex items-center space-x-3">
245
+ <div class="p-2 bg-purple-900/50 rounded-lg text-purple-400"><i data-feather="cpu"></i></div>
246
+ <h3 class="font-bold text-lg text-white">Cognitive Analysis</h3>
247
+ </div>
248
+ </div>
249
+ <p class="text-sm text-slate-400 mb-6">Tools used by the consciousness to process reality. High values allow better control of neural desires, but may reduce emotional depth.</p>
250
+
251
+ <div class="space-y-4">
252
+ <!-- Stat Bars -->
253
+ <div class="stat-control" data-stat="logic">
254
+ <div class="flex justify-between text-sm mb-1">
255
+ <span class="text-slate-300">Logic</span>
256
+ <span class="text-slate-400 font-mono value-display">50%</span>
257
+ </div>
258
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500">
259
+ <p class="text-xs text-slate-500 mt-1">Reduces confusion, increases learning speed of technical skills.</p>
260
+ </div>
261
+
262
+ <div class="stat-control" data-stat="emotion">
263
+ <div class="flex justify-between text-sm mb-1">
264
+ <span class="text-slate-300">Emotion</span>
265
+ <span class="text-slate-400 font-mono value-display">50%</span>
266
+ </div>
267
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-pink-500">
268
+ <p class="text-xs text-slate-500 mt-1">Amplifies social bonding, but increases vulnerability to stress.</p>
269
+ </div>
270
+
271
+ <div class="stat-control" data-stat="id">
272
+ <div class="flex justify-between text-sm mb-1">
273
+ <span class="text-slate-300">Id (Impulse)</span>
274
+ <span class="text-slate-400 font-mono value-display">50%</span>
275
+ </div>
276
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-orange-500">
277
+ <p class="text-xs text-slate-500 mt-1">Drive for immediate satisfaction. High values risk "Obsession" neurons faster.</p>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Traits Selector -->
283
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6 flex flex-col h-full">
284
+ <div class="flex justify-between items-start mb-4">
285
+ <div class="flex items-center space-x-3">
286
+ <div class="p-2 bg-blue-900/50 rounded-lg text-blue-400"><i data-feather="list"></i></div>
287
+ <h3 class="font-bold text-lg text-white">Traits & Quirks</h3>
288
+ </div>
289
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded text-slate-300">Points: <span id="trait-points" class="text-white font-bold">3</span></span>
290
+ </div>
291
+ <p class="text-sm text-slate-400 mb-4">Inherent psychological patterns. Some are beneficial, others are burdens.</p>
292
+
293
+ <div class="flex-1 overflow-y-auto pr-2 space-y-2 custom-scrollbar" id="traits-list">
294
+ <!-- Trait Item Template -->
295
+ <div class="trait-item group flex items-center justify-between p-3 rounded border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
296
+ <div class="flex items-center space-x-3">
297
+ <div class="w-8 h-8 rounded bg-green-900/30 flex items-center justify-center text-green-500 border border-green-900">
298
+ <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i>
299
+ </div>
300
+ <div>
301
+ <h4 class="text-sm font-bold text-slate-200">Optimist</h4>
302
+ <p class="text-xs text-slate-500">Mood +10, Stress recovery +20%</p>
303
+ </div>
304
+ </div>
305
+ <span class="text-xs font-bold text-green-500">+1</span>
306
+ </div>
307
+
308
+ <div class="trait-item group flex items-center justify-between p-3 rounded border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
309
+ <div class="flex items-center space-x-3">
310
+ <div class="w-8 h-8 rounded bg-green-900/30 flex items-center justify-center text-green-500 border border-green-900">
311
+ <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i>
312
+ </div>
313
+ <div>
314
+ <h4 class="text-sm font-bold text-slate-200">Iron Willed</h4>
315
+ <p class="text-xs text-slate-500">Mental break threshold +15%, Pain tolerance +10%</p>
316
+ </div>
317
+ </div>
318
+ <span class="text-xs font-bold text-green-500">+2</span>
319
+ </div>
320
+
321
+ <div class="trait-item group flex items-center justify-between p-3 rounded border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
322
+ <div class="flex items-center space-x-3">
323
+ <div class="w-8 h-8 rounded bg-red-900/30 flex items-center justify-center text-red-500 border border-red-900">
324
+ <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i>
325
+ </div>
326
+ <div>
327
+ <h4 class="text-sm font-bold text-slate-200">Cannibalistic Urges</h4>
328
+ <p class="text-xs text-slate-500">Hunger grows faster, Eating human flesh: Mood +20 (No penalty)</p>
329
+ </div>
330
+ </div>
331
+ <span class="text-xs font-bold text-red-500">-1</span>
332
+ </div>
333
+
334
+ <div class="trait-item group flex items-center justify-between p-3 rounded border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
335
+ <div class="flex items-center space-x-3">
336
+ <div class="w-8 h-8 rounded bg-red-900/30 flex items-center justify-center text-red-500 border border-red-900">
337
+ <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i>
338
+ </div>
339
+ <div>
340
+ <h4 class="text-sm font-bold text-slate-200">Psychopath</h4>
341
+ <p class="text-xs text-slate-500">Empathy -100%, Social manipulation +30%, No guilt</p>
342
+ </div>
343
+ </div>
344
+ <span class="text-xs font-bold text-green-500">+2</span>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </section>
350
+ <!-- Background Tab -->
351
+ <section id="background" class="tab-content hidden space-y-8">
352
+ <div class="max-w-4xl">
353
+ <h1 class="text-3xl font-bold text-white mb-2">Life History</h1>
354
+ <p class="text-slate-400">The experiences that shaped your subject before the neural collapse. Childhood determines base traits, adulthood provides skills.</p>
355
+ </div>
356
+
357
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
358
+ <!-- Childhood Selection -->
359
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6">
360
+ <div class="flex items-center space-x-3 mb-4">
361
+ <div class="p-2 bg-amber-900/50 rounded-lg text-amber-400"><i data-feather="sun"></i></div>
362
+ <h3 class="font-bold text-lg text-white">Childhood</h3>
363
+ </div>
364
+ <p class="text-sm text-slate-400 mb-4">Early development period. Determines starting skills and base traits.</p>
365
+
366
+ <div class="space-y-3" id="childhood-list">
367
+ <div class="childhood-item selected flex items-center justify-between p-4 rounded-lg border border-neural-blue bg-slate-900/50 cursor-pointer hover:bg-slate-800 transition-all">
368
+ <div>
369
+ <h4 class="text-sm font-bold text-slate-200">Vat-Grown Soldier</h4>
370
+ <p class="text-xs text-slate-500">Combat +2, Shooting +1, Social -2, Empathy -1</p>
371
+ </div>
372
+ <i data-feather="check-circle" class="w-5 h-5 text-neural-blue check-icon"></i>
373
+ </div>
374
+ <div class="childhood-item flex items-center justify-between p-4 rounded-lg border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
375
+ <div>
376
+ <h4 class="text-sm font-bold text-slate-200">Street Urchin</h4>
377
+ <p class="text-xs text-slate-500">Stealth +2, Melee +1, Animals -1</p>
378
+ </div>
379
+ <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i>
380
+ </div>
381
+ <div class="childhood-item flex items-center justify-between p-4 rounded-lg border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
382
+ <div>
383
+ <h4 class="text-sm font-bold text-slate-200">Academic Prodigy</h4>
384
+ <p class="text-xs text-slate-500">Intellectual +3, Social +1, Manual labor -2</p>
385
+ </div>
386
+ <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i>
387
+ </div>
388
+ <div class="childhood-item flex items-center justify-between p-4 rounded-lg border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
389
+ <div>
390
+ <h4 class="text-sm font-bold text-slate-200">Farm Hand</h4>
391
+ <p class="text-xs text-slate-500">Plants +2, Animals +1, Intellectual -1</p>
392
+ </div>
393
+ <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Adulthood Selection -->
399
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6">
400
+ <div class="flex items-center space-x-3 mb-4">
401
+ <div class="p-2 bg-indigo-900/50 rounded-lg text-indigo-400"><i data-feather="briefcase"></i></div>
402
+ <h3 class="font-bold text-lg text-white">Adulthood</h3>
403
+ </div>
404
+ <p class="text-sm text-slate-400 mb-4">Pre-collapse occupation. Grants advanced skills and special abilities.</p>
405
+
406
+ <div class="space-y-3" id="adulthood-list">
407
+ <div class="adulthood-item flex items-center justify-between p-4 rounded-lg border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
408
+ <div>
409
+ <h4 class="text-sm font-bold text-slate-200">Mercenary</h4>
410
+ <p class="text-xs text-slate-500">Combat +3, Guns +2, Melee +1</p>
411
+ </div>
412
+ <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i>
413
+ </div>
414
+ <div class="adulthood-item flex items-center justify-between p-4 rounded-lg border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
415
+ <div>
416
+ <h4 class="text-sm font-bold text-slate-200">Cyber-Surgeon</h4>
417
+ <p class="text-xs text-slate-500">Medicine +3, Crafting +2</p>
418
+ </div>
419
+ <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i>
420
+ </div>
421
+ <div class="adulthood-item selected flex items-center justify-between p-4 rounded-lg border border-neural-blue bg-slate-900/50 cursor-pointer hover:bg-slate-800 transition-all">
422
+ <div>
423
+ <h4 class="text-sm font-bold text-slate-200">Corporate Executive</h4>
424
+ <p class="text-xs text-slate-500">Social +3, Intellectual +2, Negotiation +2</p>
425
+ </div>
426
+ <i data-feather="check-circle" class="w-5 h-5 text-neural-blue check-icon"></i>
427
+ </div>
428
+ <div class="adulthood-item flex items-center justify-between p-4 rounded-lg border border-slate-700 bg-slate-800 cursor-pointer hover:bg-slate-750 transition-all">
429
+ <div>
430
+ <h4 class="text-sm font-bold text-slate-200">Wasteland Scavenger</h4>
431
+ <p class="text-xs text-slate-500">Scavenging +3, Survival +2</p>
432
+ </div>
433
+ <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <!-- Skills Preview -->
440
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6">
441
+ <div class="flex items-center space-x-3 mb-4">
442
+ <div class="p-2 bg-violet-900/50 rounded-lg text-violet-400"><i data-feather="book-open"></i></div>
443
+ <h3 class="font-bold text-lg text-white">Acquired Skills</h3>
444
+ </div>
445
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3" id="skills-grid">
446
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
447
+ <div class="text-2xl mb-1">⚔️</div>
448
+ <div class="text-xs text-slate-400">Melee</div>
449
+ <div class="text-neural-blue font-bold">4</div>
450
+ </div>
451
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
452
+ <div class="text-2xl mb-1">🔫</div>
453
+ <div class="text-xs text-slate-400">Ranged</div>
454
+ <div class="text-neural-blue font-bold">2</div>
455
+ </div>
456
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
457
+ <div class="text-2xl mb-1">💬</div>
458
+ <div class="text-xs text-slate-400">Social</div>
459
+ <div class="text-neural-blue font-bold">3</div>
460
+ </div>
461
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
462
+ <div class="text-2xl mb-1">🧠</div>
463
+ <div class="text-xs text-slate-400">Intellectual</div>
464
+ <div class="text-neural-blue font-bold">5</div>
465
+ </div>
466
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
467
+ <div class="text-2xl mb-1">🔧</div>
468
+ <div class="text-xs text-slate-400">Crafting</div>
469
+ <div class="text-neural-blue font-bold">2</div>
470
+ </div>
471
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
472
+ <div class="text-2xl mb-1">🩺</div>
473
+ <div class="text-xs text-slate-400">Medicine</div>
474
+ <div class="text-slate-500 font-bold">0</div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </section>
479
+
480
+ <!-- Beliefs Tab (Hidden by default) -->
481
+ <section id="beliefs" class="tab-content hidden space-y-8">
482
+ <div class="max-w-4xl">
483
+ <h1 class="text-3xl font-bold text-white mb-2">Beliefs Structure</h1>
484
+ <p class="text-slate-400">Construct a moral framework. This defines how neurons for "Self-Actualization" behave and what moral penalties you suffer.</p>
485
+ </div>
486
+
487
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
488
+ <!-- Ideology Picker -->
489
+ <div class="lg:col-span-2 space-y-6">
490
+ <!-- Slider Group -->
491
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6">
492
+ <h3 class="text-white font-bold mb-6 border-b border-slate-700 pb-2">Moral Spectrum</h3>
493
+
494
+ <div class="space-y-8">
495
+ <!-- Slider 1 -->
496
+ <div class="belief-slider">
497
+ <div class="flex justify-between text-sm mb-2">
498
+ <span class="text-slate-400">Collectivism <i data-feather="users" class="inline w-3 h-3 ml-1"></i></span>
499
+ <span class="text-slate-400">Individualism <i data-feather="user" class="inline w-3 h-3 ml-1"></i></span>
500
+ </div>
501
+ <div class="relative h-2 bg-slate-700 rounded-full">
502
+ <input type="range" min="0" max="100" value="50" class="absolute w-full h-full opacity-0 cursor-pointer z-20">
503
+ <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-blue-600 via-slate-600 to-purple-600 rounded-full w-full"></div>
504
+ <div class="absolute top-1/2 transform -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow border border-slate-400 z-10 pointer-events-none" style="left: 50%"></div>
505
+ </div>
506
+ </div>
507
+
508
+ <!-- Slider 2 -->
509
+ <div class="belief-slider">
510
+ <div class="flex justify-between text-sm mb-2">
511
+ <span class="text-slate-400">Loyalty <i data-feather="heart" class="inline w-3 h-3 ml-1"></i></span>
512
+ <span class="text-slate-400">Freedom <i data-feather="wind" class="inline w-3 h-3 ml-1"></i></span>
513
+ </div>
514
+ <div class="relative h-2 bg-slate-700 rounded-full">
515
+ <input type="range" min="0" max="100" value="20" class="absolute w-full h-full opacity-0 cursor-pointer z-20">
516
+ <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-red-600 via-slate-600 to-green-600 rounded-full w-full"></div>
517
+ <div class="absolute top-1/2 transform -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow border border-slate-400 z-10 pointer-events-none" style="left: 20%"></div>
518
+ </div>
519
+ </div>
520
+
521
+ <!-- Slider 3 -->
522
+ <div class="belief-slider">
523
+ <div class="flex justify-between text-sm mb-2">
524
+ <span class="text-slate-400">Rationality <i data-feather="aperture" class="inline w-3 h-3 ml-1"></i></span>
525
+ <span class="text-slate-400">Spirituality <i data-feather="moon" class="inline w-3 h-3 ml-1"></i></span>
526
+ </div>
527
+ <div class="relative h-2 bg-slate-700 rounded-full">
528
+ <input type="range" min="0" max="100" value="70" class="absolute w-full h-full opacity-0 cursor-pointer z-20">
529
+ <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-cyan-600 via-slate-600 to-indigo-600 rounded-full w-full"></div>
530
+ <div class="absolute top-1/2 transform -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow border border-slate-400 z-10 pointer-events-none" style="left: 70%"></div>
531
+ </div>
532
+ </div>
533
+
534
+ <!-- Slider 4 -->
535
+ <div class="belief-slider">
536
+ <div class="flex justify-between text-sm mb-2">
537
+ <span class="text-slate-400">Life (Pacifism) <i data-feather="sun" class="inline w-3 h-3 ml-1"></i></span>
538
+ <span class="text-slate-400">Power (Might) <i data-feather="crosshair" class="inline w-3 h-3 ml-1"></i></span>
539
+ </div>
540
+ <div class="relative h-2 bg-slate-700 rounded-full">
541
+ <input type="range" min="0" max="100" value="40" class="absolute w-full h-full opacity-0 cursor-pointer z-20">
542
+ <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-yellow-600 via-slate-600 to-red-800 rounded-full w-full"></div>
543
+ <div class="absolute top-1/2 transform -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow border border-slate-400 z-10 pointer-events-none" style="left: 40%"></div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+
549
+ <!-- Precepts Selection -->
550
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6">
551
+ <h3 class="text-white font-bold mb-4">Specific Precepts</h3>
552
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
553
+ <div class="relative">
554
+ <select class="w-full bg-slate-900 border border-slate-600 text-slate-300 text-sm rounded p-2.5 focus:ring-1 focus:ring-neural-blue focus:border-neural-blue appearance-none">
555
+ <option>Corpse consumption: Disapproved</option>
556
+ <option>Corpse consumption: Accepted</option>
557
+ <option selected>Corpse consumption: Preferred (Obsession)</option>
558
+ </select>
559
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
560
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
561
+ </div>
562
+ </div>
563
+ <div class="relative">
564
+ <select class="w-full bg-slate-900 border border-slate-600 text-slate-300 text-sm rounded p-2.5 focus:ring-1 focus:ring-neural-blue focus:border-neural-blue appearance-none">
565
+ <option>Organ use: Don't care</option>
566
+ <option>Organ use: Horrified</option>
567
+ </select>
568
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
569
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
570
+ </div>
571
+ </div>
572
+ <div class="relative">
573
+ <select class="w-full bg-slate-900 border border-slate-600 text-slate-300 text-sm rounded p-2.5 focus:ring-1 focus:ring-neural-blue focus:border-neural-blue appearance-none">
574
+ <option>Killing innocent: Horrified</option>
575
+ <option selected>Killing innocent: Neutral</option>
576
+ </select>
577
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
578
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+
585
+ <!-- Ideology Summary Panel -->
586
+ <div class="bg-slate-900 border border-slate-700 rounded-xl p-6 flex flex-col">
587
+ <h3 class="text-slate-500 font-bold text-xs uppercase mb-4">Resulting Ideology</h3>
588
+ <div class="text-center mb-6">
589
+ <div class="w-20 h-20 mx-auto bg-slate-800 rounded-full flex items-center justify-center border-2 border-neural-blue mb-3 shadow-[0_0_15px_rgba(14,165,233,0.3)]">
590
+ <i data-feather="shield" class="w-10 h-10 text-neural-blue"></i>
591
+ </div>
592
+ <h2 class="text-xl font-bold text-white" id="ideology-name">Survivalist Pragmatism</h2>
593
+ <p class="text-sm text-slate-500 mt-1">Structure: Loose</p>
594
+ </div>
595
+
596
+ <div class="space-y-4 flex-1">
597
+ <div>
598
+ <div class="text-xs text-slate-400 uppercase mb-1">Originating Style</div>
599
+ <div class="text-sm text-slate-200">Generic + Deserter</div>
600
+ </div>
601
+ <div>
602
+ <div class="text-xs text-slate-400 uppercase mb-1">Meme Guide</div>
603
+ <div class="flex flex-wrap gap-2">
604
+ <span class="px-2 py-1 bg-slate-800 text-xs rounded text-slate-300 border border-slate-700">Collectivism: +</span>
605
+ <span class="px-2 py-1 bg-slate-800 text-xs rounded text-slate-300 border border-slate-700">Loyalty: ++</span>
606
+ </div>
607
+ </div>
608
+ </div>
609
+
610
+ <div class="mt-4 p-3 bg-slate-800 rounded border border-slate-700">
611
+ <div class="flex items-center space-x-2 text-xs text-orange-400">
612
+ <i data-feather="alert-triangle" class="w-3 h-3"></i>
613
+ <span>Conflict with Trait: Psychopath</span>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </section>
619
+ </div>
620
+ </main>
621
+ </div>
622
+
623
+ <script src="components/navbar.js"></script>
624
+ <script src="script.js"></script>
625
+ <script>feather.replace();</script>
626
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
627
+ </body>
628
+ </html>
script.js ADDED
@@ -0,0 +1,393 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ // State
3
+ const characterState = {
4
+ name: '',
5
+ age: 24,
6
+ gender: 'Male',
7
+ traits: [],
8
+ points: 3,
9
+ stats: {
10
+ logic: 50,
11
+ emotion: 50,
12
+ id: 50,
13
+ strength: 50,
14
+ agility: 50,
15
+ toughness: 50,
16
+ perception: 50
17
+ },
18
+ beliefs: {
19
+ collectivism: 50,
20
+ loyalty: 20,
21
+ rationality: 70,
22
+ life: 40
23
+ },
24
+ background: {
25
+ childhood: 'Vat-Grown Soldier',
26
+ adulthood: 'Corporate Executive',
27
+ skills: {
28
+ melee: 4,
29
+ ranged: 2,
30
+ social: 3,
31
+ intellectual: 5,
32
+ crafting: 2,
33
+ medicine: 0
34
+ }
35
+ }
36
+ };
37
+ // Tab Switching Logic
38
+ const tabBtns = document.querySelectorAll('.tab-btn');
39
+ const tabContents = document.querySelectorAll('.tab-content');
40
+
41
+ tabBtns.forEach(btn => {
42
+ btn.addEventListener('click', () => {
43
+ const target = btn.dataset.target;
44
+
45
+ // Update buttons
46
+ tabBtns.forEach(b => {
47
+ b.classList.remove('text-neural-blue', 'border-b-2', 'border-neural-blue');
48
+ b.classList.add('text-slate-500', 'border-transparent');
49
+ });
50
+ btn.classList.remove('text-slate-500', 'border-transparent');
51
+ btn.classList.add('text-neural-blue', 'border-b-2', 'border-neural-blue');
52
+
53
+ // Update content
54
+ tabContents.forEach(content => {
55
+ if (content.id === target) {
56
+ content.classList.remove('hidden');
57
+ // Trigger specific animations or logic per tab if needed
58
+ if (target === 'psychology') {
59
+ drawNeuralPreview();
60
+ }
61
+ } else {
62
+ content.classList.add('hidden');
63
+ }
64
+ });
65
+ });
66
+ });
67
+
68
+ // Trait Selection Logic
69
+ const traitItems = document.querySelectorAll('.trait-item');
70
+ const pointsDisplay = document.getElementById('trait-points');
71
+
72
+ traitItems.forEach(item => {
73
+ item.addEventListener('click', () => {
74
+ const costText = item.querySelector('span.text-xs').innerText;
75
+ const cost = parseInt(costText);
76
+ const traitName = item.querySelector('h4').innerText;
77
+
78
+ if (item.classList.contains('selected')) {
79
+ // Deselect
80
+ item.classList.remove('selected');
81
+ characterState.traits = characterState.traits.filter(t => t !== traitName);
82
+ characterState.points += cost;
83
+ } else {
84
+ // Select
85
+ if (characterState.points - cost >= 0) {
86
+ item.classList.add('selected');
87
+ characterState.traits.push(traitName);
88
+ characterState.points -= cost;
89
+ } else {
90
+ // Shake effect or error feedback could go here
91
+ console.log("Not enough points");
92
+ }
93
+ }
94
+ pointsDisplay.innerText = characterState.points;
95
+ updateNeuralPreview();
96
+ });
97
+ });
98
+ // Character Name Input
99
+ const charNameInput = document.getElementById('char-name');
100
+ const charNameDisplay = document.getElementById('char-name-display');
101
+ charNameInput.addEventListener('input', (e) => {
102
+ characterState.name = e.target.value;
103
+ charNameDisplay.innerText = e.target.value || 'Unknown';
104
+ });
105
+
106
+ // Age Slider
107
+ const ageSlider = document.getElementById('char-age');
108
+ const ageValue = document.getElementById('age-value');
109
+ const ageDisplay = document.getElementById('char-age-display');
110
+ ageSlider.addEventListener('input', (e) => {
111
+ characterState.age = parseInt(e.target.value);
112
+ ageValue.innerText = e.target.value;
113
+ ageDisplay.innerText = e.target.value;
114
+ });
115
+
116
+ // Cognitive & Physical Stats Sliders
117
+ const statControls = document.querySelectorAll('.stat-control');
118
+ statControls.forEach(control => {
119
+ const range = control.querySelector('input[type=range]');
120
+ const display = control.querySelector('.value-display');
121
+ const statName = control.dataset.stat;
122
+
123
+ range.addEventListener('input', (e) => {
124
+ const val = e.target.value;
125
+ display.innerText = val + '%';
126
+ characterState.stats[statName] = parseInt(val);
127
+ updateNeuralPreview();
128
+ });
129
+ });
130
+
131
+ // Childhood Selection
132
+ const childhoodItems = document.querySelectorAll('.childhood-item');
133
+ childhoodItems.forEach(item => {
134
+ item.addEventListener('click', () => {
135
+ childhoodItems.forEach(i => {
136
+ i.classList.remove('selected');
137
+ i.classList.remove('border-neural-blue', 'bg-slate-900/50');
138
+ i.classList.add('border-slate-700', 'bg-slate-800');
139
+ i.querySelector('.check-icon').setAttribute('data-feather', 'circle');
140
+ i.querySelector('.check-icon').classList.remove('text-neural-blue');
141
+ i.querySelector('.check-icon').classList.add('text-slate-600');
142
+ });
143
+ item.classList.add('selected');
144
+ item.classList.remove('border-slate-700', 'bg-slate-800');
145
+ item.classList.add('border-neural-blue', 'bg-slate-900/50');
146
+ item.querySelector('.check-icon').setAttribute('data-feather', 'check-circle');
147
+ item.querySelector('.check-icon').classList.add('text-neural-blue');
148
+ item.querySelector('.check-icon').classList.remove('text-slate-600');
149
+
150
+ characterState.background.childhood = item.querySelector('h4').innerText;
151
+ updateSkills();
152
+ feather.replace();
153
+ });
154
+ });
155
+
156
+ // Adulthood Selection
157
+ const adulthoodItems = document.querySelectorAll('.adulthood-item');
158
+ adulthoodItems.forEach(item => {
159
+ item.addEventListener('click', () => {
160
+ adulthoodItems.forEach(i => {
161
+ i.classList.remove('selected');
162
+ i.classList.remove('border-neural-blue', 'bg-slate-900/50');
163
+ i.classList.add('border-slate-700', 'bg-slate-800');
164
+ i.querySelector('.check-icon').setAttribute('data-feather', 'circle');
165
+ i.querySelector('.check-icon').classList.remove('text-neural-blue');
166
+ i.querySelector('.check-icon').classList.add('text-slate-600');
167
+ });
168
+ item.classList.add('selected');
169
+ item.classList.remove('border-slate-700', 'bg-slate-800');
170
+ item.classList.add('border-neural-blue', 'bg-slate-900/50');
171
+ item.querySelector('.check-icon').setAttribute('data-feather', 'check-circle');
172
+ item.querySelector('.check-icon').classList.add('text-neural-blue');
173
+ item.querySelector('.check-icon').classList.remove('text-slate-600');
174
+
175
+ characterState.background.adulthood = item.querySelector('h4').innerText;
176
+ updateSkills();
177
+ feather.replace();
178
+ });
179
+ });
180
+
181
+ // Update Skills Display based on background
182
+ function updateSkills() {
183
+ const skillsGrid = document.getElementById('skills-grid');
184
+ if (!skillsGrid) return;
185
+
186
+ // Base skills from childhood
187
+ let skills = { melee: 0, ranged: 0, social: 0, intellectual: 0, crafting: 0, medicine: 0 };
188
+
189
+ switch(characterState.background.childhood) {
190
+ case 'Vat-Grown Soldier':
191
+ skills.melee += 2; skills.ranged += 1; skills.social -= 2;
192
+ break;
193
+ case 'Street Urchin':
194
+ skills.melee += 1;
195
+ break;
196
+ case 'Academic Prodigy':
197
+ skills.intellectual += 3; skills.social += 1;
198
+ break;
199
+ case 'Farm Hand':
200
+ skills.intellectual -= 1;
201
+ break;
202
+ }
203
+
204
+ // Skills from adulthood
205
+ switch(characterState.background.adulthood) {
206
+ case 'Mercenary':
207
+ skills.melee += 1; skills.ranged += 2;
208
+ break;
209
+ case 'Cyber-Surgeon':
210
+ skills.medicine += 3; skills.crafting += 2;
211
+ break;
212
+ case 'Corporate Executive':
213
+ skills.social += 3; skills.intellectual += 2;
214
+ break;
215
+ case 'Wasteland Scavenger':
216
+ skills.crafting += 3; skills.melee += 1;
217
+ break;
218
+ }
219
+
220
+ // Update display
221
+ skillsGrid.innerHTML = `
222
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
223
+ <div class="text-2xl mb-1">⚔️</div>
224
+ <div class="text-xs text-slate-400">Melee</div>
225
+ <div class="text-neural-blue font-bold">${Math.max(0, skills.melee)}</div>
226
+ </div>
227
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
228
+ <div class="text-2xl mb-1">🔫</div>
229
+ <div class="text-xs text-slate-400">Ranged</div>
230
+ <div class="text-neural-blue font-bold">${Math.max(0, skills.ranged)}</div>
231
+ </div>
232
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
233
+ <div class="text-2xl mb-1">💬</div>
234
+ <div class="text-xs text-slate-400">Social</div>
235
+ <div class="text-neural-blue font-bold">${Math.max(0, skills.social)}</div>
236
+ </div>
237
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
238
+ <div class="text-2xl mb-1">🧠</div>
239
+ <div class="text-xs text-slate-400">Intellectual</div>
240
+ <div class="text-neural-blue font-bold">${Math.max(0, skills.intellectual)}</div>
241
+ </div>
242
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
243
+ <div class="text-2xl mb-1">🔧</div>
244
+ <div class="text-xs text-slate-400">Crafting</div>
245
+ <div class="text-neural-blue font-bold">${Math.max(0, skills.crafting)}</div>
246
+ </div>
247
+ <div class="bg-slate-900 rounded p-3 text-center border border-slate-700">
248
+ <div class="text-2xl mb-1">🩺</div>
249
+ <div class="text-xs text-slate-400">Medicine</div>
250
+ <div class="text-slate-500 font-bold">${Math.max(0, skills.medicine)}</div>
251
+ </div>
252
+ `;
253
+
254
+ characterState.background.skills = skills;
255
+ }
256
+ // Belief Sliders Logic (Visual only for now)
257
+ const beliefSliders = document.querySelectorAll('.belief-slider input[type=range]');
258
+ beliefSliders.forEach(slider => {
259
+ slider.addEventListener('input', (e) => {
260
+ const val = e.target.value;
261
+ // Update the visual thumb position
262
+ const thumb = e.target.parentElement.querySelector('div.absolute.rounded-full.shadow');
263
+ thumb.style.left = val + '%';
264
+ });
265
+ });
266
+
267
+ // Canvas Neural Preview Animation
268
+ const canvas = document.getElementById('neural-preview');
269
+ const ctx = canvas.getContext('2d');
270
+ let animationId;
271
+
272
+ function resizeCanvas() {
273
+ if(canvas) {
274
+ canvas.width = canvas.parentElement.offsetWidth;
275
+ canvas.height = canvas.parentElement.offsetHeight;
276
+ drawNeuralPreview();
277
+ }
278
+ }
279
+
280
+ window.addEventListener('resize', resizeCanvas);
281
+
282
+ class Node {
283
+ constructor(x, y, type) {
284
+ this.x = x;
285
+ this.y = y;
286
+ this.type = type; // 'center', 'satellite'
287
+ this.radius = type === 'center' ? 15 : 4;
288
+ this.baseX = x;
289
+ this.baseY = y;
290
+ this.offset = Math.random() * Math.PI * 2;
291
+ }
292
+
293
+ draw() {
294
+ ctx.beginPath();
295
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
296
+
297
+ if (this.type === 'center') {
298
+ ctx.fillStyle = '#0ea5e9';
299
+ ctx.shadowBlur = 20;
300
+ ctx.shadowColor = '#0ea5e9';
301
+ } else {
302
+ ctx.fillStyle = '#94a3b8';
303
+ ctx.shadowBlur = 0;
304
+ }
305
+
306
+ ctx.fill();
307
+ ctx.closePath();
308
+ ctx.shadowBlur = 0; // Reset
309
+ }
310
+
311
+ update(time) {
312
+ if (this.type === 'satellite') {
313
+ // Float gently
314
+ this.x = this.baseX + Math.sin(time + this.offset) * 5;
315
+ this.y = this.baseY + Math.cos(time + this.offset) * 5;
316
+ }
317
+ }
318
+ }
319
+
320
+ let nodes = [];
321
+
322
+ function initNodes() {
323
+ nodes = [];
324
+ const cx = canvas.width / 2;
325
+ const cy = canvas.height / 2;
326
+ nodes.push(new Node(cx, cy, 'center'));
327
+
328
+ // Create satellite nodes based on stats complexity
329
+ const complexity = (characterState.stats.logic + characterState.stats.emotion) / 20;
330
+ const count = 5 + Math.floor(complexity);
331
+
332
+ for (let i = 0; i < count; i++) {
333
+ const angle = (Math.PI * 2 / count) * i;
334
+ const dist = 50 + Math.random() * 40;
335
+ nodes.push(new Node(
336
+ cx + Math.cos(angle) * dist,
337
+ cy + Math.sin(angle) * dist,
338
+ 'satellite'
339
+ ));
340
+ }
341
+ }
342
+
343
+ function drawNeuralPreview() {
344
+ if (!ctx) return;
345
+
346
+ const time = Date.now() * 0.002;
347
+
348
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
349
+
350
+ // Draw Connections
351
+ ctx.strokeStyle = 'rgba(56, 189, 248, 0.2)';
352
+ ctx.lineWidth = 1;
353
+
354
+ if (nodes.length > 0) {
355
+ const center = nodes[0];
356
+
357
+ for (let i = 1; i < nodes.length; i++) {
358
+ ctx.beginPath();
359
+ ctx.moveTo(center.x, center.y);
360
+ ctx.lineTo(nodes[i].x, nodes[i].y);
361
+ ctx.stroke();
362
+
363
+ // Draw inter-satellite connections occasionally
364
+ if (i < nodes.length - 1) {
365
+ ctx.beginPath();
366
+ ctx.moveTo(nodes[i].x, nodes[i].y);
367
+ ctx.lineTo(nodes[i+1].x, nodes[i+1].y);
368
+ ctx.stroke();
369
+ }
370
+ }
371
+ }
372
+
373
+ // Draw Nodes
374
+ nodes.forEach(node => {
375
+ node.update(time);
376
+ node.draw();
377
+ });
378
+
379
+ animationId = requestAnimationFrame(drawNeuralPreview);
380
+ }
381
+
382
+ function updateNeuralPreview() {
383
+ // Re-init nodes based on stats changes
384
+ initNodes();
385
+ }
386
+
387
+ // Initialize
388
+ setTimeout(() => {
389
+ resizeCanvas();
390
+ initNodes();
391
+ drawNeuralPreview();
392
+ }, 100);
393
+ });
style.css CHANGED
@@ -1,28 +1,104 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Inter', sans-serif;
5
+ }
6
+
7
+ .font-mono {
8
+ font-family: 'JetBrains Mono', monospace;
9
+ }
10
+
11
+ /* Custom Scrollbar */
12
+ ::-webkit-scrollbar {
13
+ width: 6px;
14
+ height: 6px;
15
+ }
16
+
17
+ ::-webkit-scrollbar-track {
18
+ background: #0f172a;
19
+ }
20
+
21
+ ::-webkit-scrollbar-thumb {
22
+ background: #334155;
23
+ border-radius: 3px;
24
+ }
25
+
26
+ ::-webkit-scrollbar-thumb:hover {
27
+ background: #475569;
28
+ }
29
+
30
+ .custom-scrollbar::-webkit-scrollbar {
31
+ width: 4px;
32
+ }
33
+
34
+ .custom-scrollbar::-webkit-scrollbar-thumb {
35
+ background: #334155;
36
+ }
37
+
38
+ /* Animations */
39
+ @keyframes pulse-glow {
40
+ 0%, 100% { opacity: 0.5; box-shadow: 0 0 5px rgba(56, 189, 248, 0.2); }
41
+ 50% { opacity: 1; box-shadow: 0 0 15px rgba(56, 189, 248, 0.6); }
42
+ }
43
+
44
+ .neuron-node {
45
+ animation: pulse-glow 3s infinite ease-in-out;
46
+ }
47
+
48
+ /* Range Slider Styling */
49
+ input[type=range] {
50
+ -webkit-appearance: none;
51
+ background: transparent;
52
  }
53
 
54
+ input[type=range]::-webkit-slider-thumb {
55
+ -webkit-appearance: none;
 
56
  }
57
 
58
+ input[type=range]:focus {
59
+ outline: none;
 
 
 
60
  }
61
 
62
+ /* Custom Range Thumb */
63
+ input[type=range]::-webkit-slider-thumb {
64
+ -webkit-appearance: none;
65
+ height: 16px;
66
+ width: 16px;
67
+ border-radius: 50%;
68
+ background: #f1f5f9;
69
+ cursor: pointer;
70
+ margin-top: -6px;
71
+ box-shadow: 0 0 10px rgba(0,0,0,0.5);
72
  }
73
 
74
+ input[type=range]::-webkit-slider-runnable-track {
75
+ width: 100%;
76
+ height: 4px;
77
+ cursor: pointer;
78
+ background: #334155;
79
+ border-radius: 2px;
80
  }
81
+
82
+ /* Trait Selection Styles */
83
+ .trait-item.selected {
84
+ border-color: #38bdf8;
85
+ background: rgba(56, 189, 248, 0.1);
86
+ }
87
+
88
+ .trait-item.selected .check-icon {
89
+ opacity: 1;
90
+ }
91
+
92
+ .trait-item.selected .w-8 {
93
+ background: rgba(56, 189, 248, 0.2);
94
+ border-color: #38bdf8;
95
+ color: #38bdf8;
96
+ }
97
+
98
+ /* Glassmorphism utility */
99
+ .glass {
100
+ background: rgba(15, 23, 42, 0.7);
101
+ backdrop-filter: blur(10px);
102
+ -webkit-backdrop-filter: blur(10px);
103
+ border: 1px solid rgba(255, 255, 255, 0.05);
104
+ }