Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>DepthMap Trait Architect</title> | |
| <meta name="description" content="Golden-age inspired hexagonal trait mapping for personal growth and coaching."/> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 100 100%27%3E%3Cpolygon fill=%27%23D4AF37%27 points=%2750 5 95 30 95 70 50 95 5 70 5 30%27/%3E%3C/svg%3E"/> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| gold: { | |
| 50: '#fffbeb', | |
| 100: '#fef3c7', | |
| 200: '#fde68a', | |
| 300: '#fcd34d', | |
| 400: '#fbbf24', | |
| 500: '#D4AF37', | |
| 600: '#b68d2d', | |
| 700: '#8f6d22', | |
| 800: '#6d5118', | |
| 900: '#4f3a12', | |
| }, | |
| slate: { | |
| 950: '#0b1220' | |
| } | |
| }, | |
| boxShadow: { | |
| glow: '0 0 0 2px rgba(212,175,55,.15), 0 12px 40px -10px rgba(212,175,55,.25)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body class="min-h-screen bg-slate-950 text-slate-100 selection:bg-gold-500 selection:text-slate-950"> | |
| <div id="app" class="relative min-h-screen flex flex-col"> | |
| <!-- Background Decorative Glow --> | |
| <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10"> | |
| <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[70vw] h-[70vw] opacity-30 blur-3xl rounded-full" | |
| style="background: radial-gradient(closest-side, rgba(212,175,55,0.15), transparent 60%);"></div> | |
| <div class="absolute bottom-0 right-0 w-[40vw] h-[40vw] opacity-20 blur-3xl rounded-full" | |
| style="background: radial-gradient(closest-side, rgba(59,130,246,0.18), transparent 60%);"></div> | |
| </div> | |
| <!-- Header --> | |
| <header class="w-full px-6 md:px-10 py-5 flex items-center justify-center border-b border-white/5 bg-slate-950/50 backdrop-blur"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-md bg-gold-500/20 flex items-center justify-center shadow-glow"> | |
| <svg width="20" height="20" viewBox="0 0 100 100" class="text-gold-500"> | |
| <polygon points="50 5 95 30 95 70 50 95 5 70 5 30" fill="currentColor"></polygon> | |
| </svg> | |
| </div> | |
| <div class="text-xl font-bold tracking-wide"> | |
| DepthMap <span class="text-gold-500">Trait Architect</span> | |
| </div> | |
| </div> | |
| <div class="absolute right-6 hidden md:flex items-center gap-3"> | |
| <button id="resetBtn" class="px-3 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition"> | |
| Reset Assessment | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero --> | |
| <main id="hero" class="flex-1 grid place-items-center px-6"> | |
| <div class="max-w-3xl text-center"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight"> | |
| Map Your <span class="text-gold-500">Inner Landscape</span> | |
| </h1> | |
| <p class="mt-6 text-slate-300/90 text-lg md:text-xl leading-relaxed"> | |
| A golden-age inspired, hexagonal journey through your core traits. Answer thoughtful prompts to reveal a living map of who you are — and who you're becoming. | |
| </p> | |
| <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4"> | |
| <button id="startBtn" class="px-6 py-3 rounded-lg bg-gold-500 text-slate-950 font-semibold shadow-glow hover:bg-gold-400 transition"> | |
| Begin Core Assessment | |
| </button> | |
| <button id="loadDemoBtn" class="px-6 py-3 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-slate-100 transition"> | |
| Load Demo Scores | |
| </button> | |
| </div> | |
| <p class="mt-4 text-xs text-slate-400">Secure local storage. Your development data stays private.</p> | |
| </div> | |
| </main> | |
| <!-- Test --> | |
| <section id="test" class="hidden flex-1 px-6 md:px-10 py-10"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold">Assessment</h2> | |
| <div id="progress" class="text-sm text-slate-400">0 / 16</div> | |
| </div> | |
| <div id="assessmentPhase" class="mb-6 p-3 rounded-lg border border-gold-500/30 bg-gold-500/10"> | |
| <div class="flex items-center gap-2"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" class="text-gold-500"> | |
| <path d="M12 2l3 7h7l-5.5 4.2L18 21l-6-4-6 4 1.5-7.8L2 9h7l3-7z" fill="currentColor" opacity="0.3"/> | |
| <circle cx="12" cy="12" r="3" fill="currentColor"/> | |
| </svg> | |
| <span id="phaseText" class="text-gold-300 text-sm font-medium">Core Assessment Phase</span> | |
| </div> | |
| </div> | |
| <div id="questions" class="space-y-8"></div> | |
| <div class="mt-10 flex items-center justify-between"> | |
| <button id="backToHero" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition"> | |
| Back to Hero | |
| </button> | |
| <div class="flex items-center gap-3"> | |
| <button id="prevBtn" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition disabled:opacity-40 disabled:cursor-not-allowed">Previous</button> | |
| <button id="nextBtn" class="px-4 py-2 rounded-md bg-gold-500 text-slate-950 font-semibold hover:bg-gold-400 transition disabled:opacity-40 disabled:cursor-not-allowed">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Extended Assessment --> | |
| <section id="extendedTest" class="hidden flex-1 px-6 md:px-10 py-10"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold">Deep Dive Assessment</h2> | |
| <div id="extendedProgress" class="text-sm text-slate-400">0 / 0</div> | |
| </div> | |
| <div class="mb-6 p-4 rounded-lg border border-blue-500/30 bg-blue-500/10"> | |
| <div class="flex items-start gap-3"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" class="text-blue-400 mt-0.5"> | |
| <path d="M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.48 2.54l2.6 1.53c.56-1.24.88-2.62.88-4.07 0-5.18-3.95-9.45-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53C16.17 17.98 14.21 19 12 19z" fill="currentColor"/> | |
| </svg> | |
| <div> | |
| <p class="text-blue-300 font-medium">Leadership & Influence Deep Analysis</p> | |
| <p class="text-blue-200/80 text-sm mt-1">Based on your core traits, we've identified areas for deeper exploration, particularly around leadership potential and suggestibility.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="extendedQuestions" class="space-y-8"></div> | |
| <div class="mt-10 flex items-center justify-between"> | |
| <button id="backToCore" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition"> | |
| Back to Core Map | |
| </button> | |
| <div class="flex items-center gap-3"> | |
| <button id="extendedPrevBtn" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition disabled:opacity-40 disabled:cursor-not-allowed">Previous</button> | |
| <button id="extendedNextBtn" class="px-4 py-2 rounded-md bg-blue-500 text-white font-semibold hover:bg-blue-400 transition disabled:opacity-40 disabled:cursor-not-allowed">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map --> | |
| <section id="map" class="hidden flex-1 px-6 md:px-10 py-10"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6"> | |
| <div> | |
| <h2 class="text-2xl font-bold">Your Trait Map</h2> | |
| <p class="text-slate-400 text-sm">Click any hexagon to inspect depth, growth paths, and coaching prompts.</p> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <button id="retakeBtn" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition">Retake Assessment</button> | |
| <button id="deepDiveBtn" class="px-4 py-2 rounded-md bg-blue-500 hover:bg-blue-400 text-white font-medium transition">Deep Dive Analysis</button> | |
| <button id="exportBtn" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition">Export Snapshot</button> | |
| </div> | |
| </div> | |
| <!-- Insight Banner --> | |
| <div id="insightBanner" class="hidden mb-6 p-4 rounded-lg border border-white/10 bg-white/5"> | |
| <div class="flex items-start gap-3"> | |
| <div class="mt-0.5 text-gold-500"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none"> | |
| <path d="M12 2l3 7h7l-5.5 4.2L18 21l-6-4-6 4 1.5-7.8L2 9h7l3-7z" stroke="currentColor" stroke-width="1.5" fill="currentColor" opacity="0.15"/> | |
| <path d="M12 8v5m0 3h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <p id="insightText" class="text-slate-200"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hex Grid --> | |
| <div id="hexGrid" class="relative mx-auto" style="width: min(100%, 980px); height: 560px;"></div> | |
| <!-- Leadership Indicators --> | |
| <div id="leadershipPanel" class="mt-6 p-4 rounded-lg border border-blue-500/30 bg-blue-500/10 hidden"> | |
| <div class="flex items-start gap-3"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" class="text-blue-400 mt-0.5"> | |
| <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z" fill="currentColor"/> | |
| </svg> | |
| <div> | |
| <h4 class="font-semibold text-blue-300">Leadership Profile</h4> | |
| <p class="text-blue-200/90 text-sm mt-1">Based on your suggestibility and leadership traits, we've identified key areas for development.</p> | |
| <div id="leadershipInsights" class="mt-3 space-y-2"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Legend --> | |
| <div class="mt-6 flex flex-wrap items-center gap-4 text-sm text-slate-300"> | |
| <div class="flex items-center gap-2"> | |
| <span class="inline-block w-3 h-3 rounded-sm" style="background: hsl(45 85% 55%);"></span> | |
| <span>High / well-developed</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="inline-block w-3 h-3 rounded-sm" style="background: hsl(210 75% 55%);"></span> | |
| <span>Balanced</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="inline-block w-3 h-3 rounded-sm" style="background: hsl(210 10% 45%);"></span> | |
| <span>Latent / emerging</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Detail Panel --> | |
| <div id="panel" class="fixed inset-0 pointer-events-none"> | |
| <div id="panelBackdrop" class="absolute inset-0 bg-black/60 opacity-0 transition-opacity"></div> | |
| <aside id="panelContent" class="absolute right-0 top-0 h-full w-full max-w-md bg-slate-900 border-l border-white/10 translate-x-full transition-transform duration-300 pointer-events-auto shadow-2xl"> | |
| <div class="p-5 flex items-start justify-between"> | |
| <div> | |
| <div class="flex items-center gap-2"> | |
| <div id="panelBadge" class="w-2 h-2 rounded-full"></div> | |
| <h3 id="panelTitle" class="text-xl font-semibold">Trait</h3> | |
| </div> | |
| <p id="panelSubtitle" class="text-sm text-slate-400 mt-1">Score</p> | |
| </div> | |
| <button id="panelClose" class="p-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M6 18L18 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> | |
| </button> | |
| </div> | |
| <div class="px-5 pb-6 overflow-y-auto h-[calc(100%-4rem)] space-y-5"> | |
| <p id="panelDesc" class="text-slate-200/90"></p> | |
| <div class="rounded-lg border border-white/10 bg-white/5 p-4"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-slate-300">Current Score</span> | |
| <span id="panelScore" class="font-semibold text-slate-100"></span> | |
| </div> | |
| <div class="mt-2 w-full h-2 rounded bg-white/5 overflow-hidden"> | |
| <div id="panelScoreBar" class="h-full bg-gold-500"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-2">Growth Path</h4> | |
| <ul id="panelGrowth" class="space-y-2 text-slate-300/90"></ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-2">Coaching Prompts</h4> | |
| <ul id="panelPrompts" class="space-y-2 text-slate-300/90 list-disc list-inside"></ul> | |
| </div> | |
| <div id="panelUnlock" class="hidden p-4 rounded-lg border border-gold-500/30 bg-gold-500/10"> | |
| <p class="text-gold-300 text-sm" id="panelUnlockText"></p> | |
| </div> | |
| <!-- Leadership-specific insights --> | |
| <div id="leadershipSection" class="hidden p-4 rounded-lg border border-blue-500/30 bg-blue-500/10"> | |
| <h4 class="font-semibold mb-2 text-blue-300">Leadership Context</h4> | |
| <div id="leadershipContext" class="text-blue-200/90 text-sm space-y-2"></div> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="px-6 md:px-10 py-6 text-xs text-slate-400 border-t border-white/5"> | |
| Built for clarity, curiosity, and growth. Secure local data storage. | |
| </footer> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |