Spaces:
Running
Running
хорошо, добавь прокрутку в редактор, а то нельзя добраться до некоторых настроек, создай самого персонажа и сделай игровое поле с сеткой после редакторы персонажа с тестовой картой и интерфейсом
3f8b4a4 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeuroScape - Character Psychology</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'void-dark': '#0f172a', | |
| 'neural-blue': '#0ea5e9', | |
| 'blood-red': '#7f1d1d', | |
| 'flesh-tan': '#78350f', | |
| 'synapse-glow': '#38bdf8', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-void-dark text-slate-300 font-sans antialiased h-screen flex flex-col overflow-hidden"> | |
| <!-- Navbar Component --> | |
| <site-nav></site-nav> | |
| <div class="flex flex-1 overflow-hidden relative min-h-0"> | |
| <!-- Background Decor --> | |
| <div class="absolute inset-0 z-0 opacity-10 pointer-events-none"> | |
| <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> | |
| </div> | |
| <!-- Sidebar: Character Summary & Neural Map --> | |
| <aside class="w-80 bg-slate-900/80 backdrop-blur-md border-r border-slate-700 flex flex-col z-10 hidden lg:flex"> | |
| <div class="p-6 border-b border-slate-700"> | |
| <h2 class="text-neural-blue font-bold uppercase tracking-widest text-xs mb-4">Subject Profile</h2> | |
| <div class="relative w-full aspect-[4/5] rounded-lg overflow-hidden border border-slate-600 shadow-lg group"> | |
| <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"> | |
| <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-4"> | |
| <p class="text-white font-bold text-lg" id="char-name-display">Unknown</p> | |
| <p class="text-xs text-slate-400">Age: <span id="char-age-display">24</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 flex-1 overflow-y-auto"> | |
| <h3 class="text-slate-500 font-semibold text-xs uppercase mb-4">Mental State Preview</h3> | |
| <!-- Mini Neural Map Viz --> | |
| <div class="bg-black/50 rounded border border-slate-700 h-48 relative overflow-hidden flex items-center justify-center mb-6"> | |
| <canvas id="neural-preview" class="absolute inset-0 w-full h-full"></canvas> | |
| <div class="text-center relative z-10"> | |
| <span class="text-3xl font-bold text-white block" id="sanity-score">85%</span> | |
| <span class="text-xs text-slate-500 uppercase">Stability</span> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span class="text-slate-400">Cognitive Load</span> | |
| <span class="text-neural-blue font-mono">Low</span> | |
| </div> | |
| <div class="w-full bg-slate-800 h-1 rounded-full overflow-hidden"> | |
| <div class="bg-neural-blue h-full w-[30%]"></div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span class="text-slate-400">Trauma Level</span> | |
| <span class="text-red-500 font-mono">None</span> | |
| </div> | |
| <div class="w-full bg-slate-800 h-1 rounded-full overflow-hidden"> | |
| <div class="bg-red-500 h-full w-[0%]"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-slate-700"> | |
| <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"> | |
| <i data-feather="play" class="mr-2 w-4 h-4"></i> Begin Simulation | |
| </a> | |
| </div> | |
| </aside> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 flex flex-col relative z-10 overflow-hidden"> | |
| <!-- Tabs --> | |
| <header class="bg-slate-900/90 border-b border-slate-700 px-8 py-4 flex items-center justify-between backdrop-blur"> | |
| <div class="flex space-x-8" id="customization-tabs"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="text-xs text-slate-500 font-mono"> | |
| ID: <span class="text-slate-300">SUBJ-8492</span> | |
| </div> | |
| </header> | |
| <!-- Content Panel --> | |
| <div class="flex-1 overflow-y-auto p-8 scroll-smooth min-h-0"> | |
| <!-- Biology Tab --> | |
| <section id="biology" class="tab-content space-y-8"> | |
| <div class="max-w-4xl"> | |
| <h1 class="text-3xl font-bold text-white mb-2">Biological Configuration</h1> | |
| <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> | |
| </div> | |
| <!-- Basic Info --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="p-2 bg-emerald-900/50 rounded-lg text-emerald-400"><i data-feather="user"></i></div> | |
| <h3 class="font-bold text-lg text-white">Identity</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-2">Subject Name</label> | |
| <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"> | |
| </div> | |
| <div> | |
| <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> | |
| <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"> | |
| <div class="flex justify-between text-xs text-slate-500 mt-1"> | |
| <span>18</span> | |
| <span>70</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-2">Sex</label> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2 bg-emerald-900/30 border border-emerald-700 px-4 py-2 rounded-lg"> | |
| <i data-feather="user" class="w-4 h-4 text-emerald-400"></i> | |
| <span class="text-emerald-300 font-medium">Male</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Physical Stats --> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="p-2 bg-red-900/50 rounded-lg text-red-400"><i data-feather="activity"></i></div> | |
| <h3 class="font-bold text-lg text-white">Physical Attributes</h3> | |
| </div> | |
| <div class="space-y-5"> | |
| <div class="stat-control" data-stat="strength"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-slate-300">Strength</span> | |
| <span class="text-slate-400 font-mono value-display">50%</span> | |
| </div> | |
| <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"> | |
| <p class="text-xs text-slate-500 mt-1">Melee damage, carrying capacity, labor speed.</p> | |
| </div> | |
| <div class="stat-control" data-stat="agility"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-slate-300">Agility</span> | |
| <span class="text-slate-400 font-mono value-display">50%</span> | |
| </div> | |
| <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"> | |
| <p class="text-xs text-slate-500 mt-1">Movement speed, dodge chance, ranged accuracy.</p> | |
| </div> | |
| <div class="stat-control" data-stat="toughness"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-slate-300">Toughness</span> | |
| <span class="text-slate-400 font-mono value-display">50%</span> | |
| </div> | |
| <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"> | |
| <p class="text-xs text-slate-500 mt-1">Health pool, pain threshold, disease resistance.</p> | |
| </div> | |
| <div class="stat-control" data-stat="perception"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-slate-300">Perception</span> | |
| <span class="text-slate-400 font-mono value-display">50%</span> | |
| </div> | |
| <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"> | |
| <p class="text-xs text-slate-500 mt-1">Sight range, detection of threats, research speed.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Health & Conditions --> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="p-2 bg-pink-900/50 rounded-lg text-pink-400"><i data-feather="heart"></i></div> | |
| <h3 class="font-bold text-lg text-white">Starting Condition</h3> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-slate-900 rounded-lg p-4 border border-slate-700"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-slate-400 text-sm">Health</span> | |
| <span class="text-green-400 font-mono font-bold">100%</span> | |
| </div> | |
| <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-green-500 h-full w-full"></div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900 rounded-lg p-4 border border-slate-700"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-slate-400 text-sm">Hunger</span> | |
| <span class="text-yellow-400 font-mono font-bold">0%</span> | |
| </div> | |
| <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-yellow-500 h-full w-0"></div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900 rounded-lg p-4 border border-slate-700"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-slate-400 text-sm">Rest</span> | |
| <span class="text-blue-400 font-mono font-bold">100%</span> | |
| </div> | |
| <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-blue-500 h-full w-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Psychology Tab --> | |
| <section id="psychology" class="tab-content hidden space-y-8"> | |
| <!-- Intro --> | |
| <div class="max-w-4xl"> | |
| <h1 class="text-3xl font-bold text-white mb-2">Mental Architecture</h1> | |
| <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> | |
| </div> | |
| <!-- Cognitive Tools Analysis --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6 hover:border-slate-600 transition-colors"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-2 bg-purple-900/50 rounded-lg text-purple-400"><i data-feather="cpu"></i></div> | |
| <h3 class="font-bold text-lg text-white">Cognitive Analysis</h3> | |
| </div> | |
| </div> | |
| <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> | |
| <div class="space-y-4"> | |
| <!-- Stat Bars --> | |
| <div class="stat-control" data-stat="logic"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-slate-300">Logic</span> | |
| <span class="text-slate-400 font-mono value-display">50%</span> | |
| </div> | |
| <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"> | |
| <p class="text-xs text-slate-500 mt-1">Reduces confusion, increases learning speed of technical skills.</p> | |
| </div> | |
| <div class="stat-control" data-stat="emotion"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-slate-300">Emotion</span> | |
| <span class="text-slate-400 font-mono value-display">50%</span> | |
| </div> | |
| <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"> | |
| <p class="text-xs text-slate-500 mt-1">Amplifies social bonding, but increases vulnerability to stress.</p> | |
| </div> | |
| <div class="stat-control" data-stat="id"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-slate-300">Id (Impulse)</span> | |
| <span class="text-slate-400 font-mono value-display">50%</span> | |
| </div> | |
| <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"> | |
| <p class="text-xs text-slate-500 mt-1">Drive for immediate satisfaction. High values risk "Obsession" neurons faster.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Traits Selector --> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6 flex flex-col h-full"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-2 bg-blue-900/50 rounded-lg text-blue-400"><i data-feather="list"></i></div> | |
| <h3 class="font-bold text-lg text-white">Traits & Quirks</h3> | |
| </div> | |
| <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> | |
| </div> | |
| <p class="text-sm text-slate-400 mb-4">Inherent psychological patterns. Some are beneficial, others are burdens.</p> | |
| <div class="flex-1 overflow-y-auto pr-2 space-y-2 custom-scrollbar" id="traits-list"> | |
| <!-- Trait Item Template --> | |
| <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"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded bg-green-900/30 flex items-center justify-center text-green-500 border border-green-900"> | |
| <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Optimist</h4> | |
| <p class="text-xs text-slate-500">Mood +10, Stress recovery +20%</p> | |
| </div> | |
| </div> | |
| <span class="text-xs font-bold text-green-500">+1</span> | |
| </div> | |
| <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"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded bg-green-900/30 flex items-center justify-center text-green-500 border border-green-900"> | |
| <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Iron Willed</h4> | |
| <p class="text-xs text-slate-500">Mental break threshold +15%, Pain tolerance +10%</p> | |
| </div> | |
| </div> | |
| <span class="text-xs font-bold text-green-500">+2</span> | |
| </div> | |
| <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"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded bg-red-900/30 flex items-center justify-center text-red-500 border border-red-900"> | |
| <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Cannibalistic Urges</h4> | |
| <p class="text-xs text-slate-500">Hunger grows faster, Eating human flesh: Mood +20 (No penalty)</p> | |
| </div> | |
| </div> | |
| <span class="text-xs font-bold text-red-500">-1</span> | |
| </div> | |
| <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"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded bg-red-900/30 flex items-center justify-center text-red-500 border border-red-900"> | |
| <i data-feather="check" class="w-4 h-4 opacity-0 transition-opacity check-icon"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Psychopath</h4> | |
| <p class="text-xs text-slate-500">Empathy -100%, Social manipulation +30%, No guilt</p> | |
| </div> | |
| </div> | |
| <span class="text-xs font-bold text-green-500">+2</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Background Tab --> | |
| <section id="background" class="tab-content hidden space-y-8"> | |
| <div class="max-w-4xl"> | |
| <h1 class="text-3xl font-bold text-white mb-2">Life History</h1> | |
| <p class="text-slate-400">The experiences that shaped your subject before the neural collapse. Childhood determines base traits, adulthood provides skills.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Childhood Selection --> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="p-2 bg-amber-900/50 rounded-lg text-amber-400"><i data-feather="sun"></i></div> | |
| <h3 class="font-bold text-lg text-white">Childhood</h3> | |
| </div> | |
| <p class="text-sm text-slate-400 mb-4">Early development period. Determines starting skills and base traits.</p> | |
| <div class="space-y-3" id="childhood-list"> | |
| <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"> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Vat-Grown Soldier</h4> | |
| <p class="text-xs text-slate-500">Combat +2, Shooting +1, Social -2, Empathy -1</p> | |
| </div> | |
| <i data-feather="check-circle" class="w-5 h-5 text-neural-blue check-icon"></i> | |
| </div> | |
| <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"> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Street Urchin</h4> | |
| <p class="text-xs text-slate-500">Stealth +2, Melee +1, Animals -1</p> | |
| </div> | |
| <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i> | |
| </div> | |
| <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"> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Academic Prodigy</h4> | |
| <p class="text-xs text-slate-500">Intellectual +3, Social +1, Manual labor -2</p> | |
| </div> | |
| <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i> | |
| </div> | |
| <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"> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Farm Hand</h4> | |
| <p class="text-xs text-slate-500">Plants +2, Animals +1, Intellectual -1</p> | |
| </div> | |
| <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Adulthood Selection --> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="p-2 bg-indigo-900/50 rounded-lg text-indigo-400"><i data-feather="briefcase"></i></div> | |
| <h3 class="font-bold text-lg text-white">Adulthood</h3> | |
| </div> | |
| <p class="text-sm text-slate-400 mb-4">Pre-collapse occupation. Grants advanced skills and special abilities.</p> | |
| <div class="space-y-3" id="adulthood-list"> | |
| <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"> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Mercenary</h4> | |
| <p class="text-xs text-slate-500">Combat +3, Guns +2, Melee +1</p> | |
| </div> | |
| <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i> | |
| </div> | |
| <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"> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Cyber-Surgeon</h4> | |
| <p class="text-xs text-slate-500">Medicine +3, Crafting +2</p> | |
| </div> | |
| <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i> | |
| </div> | |
| <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"> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Corporate Executive</h4> | |
| <p class="text-xs text-slate-500">Social +3, Intellectual +2, Negotiation +2</p> | |
| </div> | |
| <i data-feather="check-circle" class="w-5 h-5 text-neural-blue check-icon"></i> | |
| </div> | |
| <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"> | |
| <div> | |
| <h4 class="text-sm font-bold text-slate-200">Wasteland Scavenger</h4> | |
| <p class="text-xs text-slate-500">Scavenging +3, Survival +2</p> | |
| </div> | |
| <i data-feather="circle" class="w-5 h-5 text-slate-600 check-icon"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skills Preview --> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="p-2 bg-violet-900/50 rounded-lg text-violet-400"><i data-feather="book-open"></i></div> | |
| <h3 class="font-bold text-lg text-white">Acquired Skills</h3> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3" id="skills-grid"> | |
| <div class="bg-slate-900 rounded p-3 text-center border border-slate-700"> | |
| <div class="text-2xl mb-1">⚔️</div> | |
| <div class="text-xs text-slate-400">Melee</div> | |
| <div class="text-neural-blue font-bold">4</div> | |
| </div> | |
| <div class="bg-slate-900 rounded p-3 text-center border border-slate-700"> | |
| <div class="text-2xl mb-1">🔫</div> | |
| <div class="text-xs text-slate-400">Ranged</div> | |
| <div class="text-neural-blue font-bold">2</div> | |
| </div> | |
| <div class="bg-slate-900 rounded p-3 text-center border border-slate-700"> | |
| <div class="text-2xl mb-1">💬</div> | |
| <div class="text-xs text-slate-400">Social</div> | |
| <div class="text-neural-blue font-bold">3</div> | |
| </div> | |
| <div class="bg-slate-900 rounded p-3 text-center border border-slate-700"> | |
| <div class="text-2xl mb-1">🧠</div> | |
| <div class="text-xs text-slate-400">Intellectual</div> | |
| <div class="text-neural-blue font-bold">5</div> | |
| </div> | |
| <div class="bg-slate-900 rounded p-3 text-center border border-slate-700"> | |
| <div class="text-2xl mb-1">🔧</div> | |
| <div class="text-xs text-slate-400">Crafting</div> | |
| <div class="text-neural-blue font-bold">2</div> | |
| </div> | |
| <div class="bg-slate-900 rounded p-3 text-center border border-slate-700"> | |
| <div class="text-2xl mb-1">🩺</div> | |
| <div class="text-xs text-slate-400">Medicine</div> | |
| <div class="text-slate-500 font-bold">0</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Beliefs Tab (Hidden by default) --> | |
| <section id="beliefs" class="tab-content hidden space-y-8"> | |
| <div class="max-w-4xl"> | |
| <h1 class="text-3xl font-bold text-white mb-2">Beliefs Structure</h1> | |
| <p class="text-slate-400">Construct a moral framework. This defines how neurons for "Self-Actualization" behave and what moral penalties you suffer.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Ideology Picker --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Slider Group --> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6"> | |
| <h3 class="text-white font-bold mb-6 border-b border-slate-700 pb-2">Moral Spectrum</h3> | |
| <div class="space-y-8"> | |
| <!-- Slider 1 --> | |
| <div class="belief-slider"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-slate-400">Collectivism <i data-feather="users" class="inline w-3 h-3 ml-1"></i></span> | |
| <span class="text-slate-400">Individualism <i data-feather="user" class="inline w-3 h-3 ml-1"></i></span> | |
| </div> | |
| <div class="relative h-2 bg-slate-700 rounded-full"> | |
| <input type="range" min="0" max="100" value="50" class="absolute w-full h-full opacity-0 cursor-pointer z-20"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <!-- Slider 2 --> | |
| <div class="belief-slider"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-slate-400">Loyalty <i data-feather="heart" class="inline w-3 h-3 ml-1"></i></span> | |
| <span class="text-slate-400">Freedom <i data-feather="wind" class="inline w-3 h-3 ml-1"></i></span> | |
| </div> | |
| <div class="relative h-2 bg-slate-700 rounded-full"> | |
| <input type="range" min="0" max="100" value="20" class="absolute w-full h-full opacity-0 cursor-pointer z-20"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <!-- Slider 3 --> | |
| <div class="belief-slider"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-slate-400">Rationality <i data-feather="aperture" class="inline w-3 h-3 ml-1"></i></span> | |
| <span class="text-slate-400">Spirituality <i data-feather="moon" class="inline w-3 h-3 ml-1"></i></span> | |
| </div> | |
| <div class="relative h-2 bg-slate-700 rounded-full"> | |
| <input type="range" min="0" max="100" value="70" class="absolute w-full h-full opacity-0 cursor-pointer z-20"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <!-- Slider 4 --> | |
| <div class="belief-slider"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-slate-400">Life (Pacifism) <i data-feather="sun" class="inline w-3 h-3 ml-1"></i></span> | |
| <span class="text-slate-400">Power (Might) <i data-feather="crosshair" class="inline w-3 h-3 ml-1"></i></span> | |
| </div> | |
| <div class="relative h-2 bg-slate-700 rounded-full"> | |
| <input type="range" min="0" max="100" value="40" class="absolute w-full h-full opacity-0 cursor-pointer z-20"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Precepts Selection --> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6"> | |
| <h3 class="text-white font-bold mb-4">Specific Precepts</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="relative"> | |
| <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"> | |
| <option>Corpse consumption: Disapproved</option> | |
| <option>Corpse consumption: Accepted</option> | |
| <option selected>Corpse consumption: Preferred (Obsession)</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400"> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <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"> | |
| <option>Organ use: Don't care</option> | |
| <option>Organ use: Horrified</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400"> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <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"> | |
| <option>Killing innocent: Horrified</option> | |
| <option selected>Killing innocent: Neutral</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400"> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ideology Summary Panel --> | |
| <div class="bg-slate-900 border border-slate-700 rounded-xl p-6 flex flex-col"> | |
| <h3 class="text-slate-500 font-bold text-xs uppercase mb-4">Resulting Ideology</h3> | |
| <div class="text-center mb-6"> | |
| <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)]"> | |
| <i data-feather="shield" class="w-10 h-10 text-neural-blue"></i> | |
| </div> | |
| <h2 class="text-xl font-bold text-white" id="ideology-name">Survivalist Pragmatism</h2> | |
| <p class="text-sm text-slate-500 mt-1">Structure: Loose</p> | |
| </div> | |
| <div class="space-y-4 flex-1"> | |
| <div> | |
| <div class="text-xs text-slate-400 uppercase mb-1">Originating Style</div> | |
| <div class="text-sm text-slate-200">Generic + Deserter</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-slate-400 uppercase mb-1">Meme Guide</div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-slate-800 text-xs rounded text-slate-300 border border-slate-700">Collectivism: +</span> | |
| <span class="px-2 py-1 bg-slate-800 text-xs rounded text-slate-300 border border-slate-700">Loyalty: ++</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-3 bg-slate-800 rounded border border-slate-700"> | |
| <div class="flex items-center space-x-2 text-xs text-orange-400"> | |
| <i data-feather="alert-triangle" class="w-3 h-3"></i> | |
| <span>Conflict with Trait: Psychopath</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="components/navbar.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |