Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Strategy Quest - Navigator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --color-purple: #731D55; | |
| --color-cyan: #0DD9D9; | |
| --color-gold: #F2A30F; | |
| --color-orange: #F26E22; | |
| --color-black: #0D0D0D; | |
| } | |
| body { | |
| font-family: 'JetBrains+Mono', monospace; | |
| background-color: var(--color-black); | |
| color: #f1f5f9; | |
| background-image: radial-gradient(circle at 50% 50%, #1a0a14 0%, var(--color-black) 100%); | |
| overflow-x: hidden; | |
| } | |
| .border-game { border-color: var(--color-purple); } | |
| .text-accent { color: var(--color-cyan); } | |
| .text-gold { color: var(--color-gold); } | |
| /* Matrix Canvas Styling */ | |
| .matrix-container { | |
| position: absolute; | |
| inset: 0; | |
| z-index: 0; | |
| pointer-events: none; | |
| opacity: 0.4; | |
| transition: opacity 0.5s ease; | |
| } | |
| .btn-tile:hover .matrix-container { | |
| opacity: 0.1; | |
| } | |
| .content-overlay { | |
| position: relative; | |
| z-index: 10; | |
| opacity: 0; | |
| transform: scale(0.95); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .btn-tile:hover .content-overlay { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| .scanline { | |
| width: 100%; | |
| height: 100px; | |
| z-index: 99; | |
| background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(13, 217, 217, 0.03) 50%, rgba(0, 0, 0, 0) 100%); | |
| opacity: 0.2; | |
| position: absolute; | |
| bottom: 100%; | |
| pointer-events: none; | |
| animation: scanline 8s linear infinite; | |
| } | |
| @keyframes scanline { | |
| 0% { bottom: 100%; } | |
| 100% { bottom: -100px; } | |
| } | |
| .btn-tile { | |
| background-color: #080808; | |
| border: 1px solid var(--color-purple); | |
| height: 160px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-tile:hover { | |
| border-color: var(--color-cyan); | |
| box-shadow: 0 0 20px rgba(13, 217, 217, 0.2); | |
| } | |
| .reveal-hint { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.7rem; | |
| letter-spacing: 0.2em; | |
| color: var(--color-purple); | |
| text-transform: uppercase; | |
| z-index: 5; | |
| transition: opacity 0.3s ease; | |
| padding: 1rem; | |
| text-align: center; | |
| } | |
| .btn-tile:hover .reveal-hint { | |
| opacity: 0; | |
| } | |
| /* Breadcrumb Active State Styling */ | |
| .breadcrumb-item { | |
| position: relative; | |
| transition: all 0.2s ease; | |
| } | |
| .breadcrumb-item:not(.active):hover { | |
| color: var(--color-gold); | |
| background: rgba(242, 163, 15, 0.05); | |
| } | |
| .breadcrumb-item.active { | |
| color: var(--color-cyan); | |
| border-bottom: 1px solid var(--color-cyan); | |
| padding-bottom: 2px; | |
| } | |
| .breadcrumb-separator { | |
| color: #334155; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col items-center p-4 md:p-8 relative"> | |
| <div class="scanline"></div> | |
| <!-- HUD - Header --> | |
| <header class="w-full max-w-5xl border-4 bg-[#121212] rounded-lg p-5 mb-6 shadow-2xl relative z-10 border-game"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center gap-4"> | |
| <div id="level-icon" class="p-2 rounded bg-[#731D55] text-white shadow-[0_0_10px_#731D55]"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg> | |
| </div> | |
| <div> | |
| <h1 id="level-title" class="text-2xl font-bold tracking-tighter uppercase italic text-accent"> | |
| Strategy Quest | |
| </h1> | |
| <div class="flex items-center gap-3 text-xs mt-1"> | |
| <div class="w-32 h-2 bg-slate-900 rounded-full overflow-hidden border border-slate-800"> | |
| <div id="progress-bar" class="h-full bg-[#F2A30F] transition-all duration-700 shadow-[0_0_8px_#F2A30F]" style="width: 10%"></div> | |
| </div> | |
| <span id="depth-indicator" class="text-gold font-bold uppercase">Depth: 1</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="resetToRoot()" class="p-2 hover:bg-[#731D55]/20 rounded-lg transition-all text-slate-500 hover:text-white border border-transparent hover:border-[#731D55]"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg> | |
| </button> | |
| </div> | |
| <nav id="breadcrumbs" class="flex flex-wrap items-center gap-y-2 text-[10px] uppercase tracking-widest bg-black/60 p-3 rounded-md border border-slate-800/50 shadow-inner"> | |
| <!-- Breadcrumbs --> | |
| </nav> | |
| </header> | |
| <!-- Main Content --> | |
| <main id="main-content" class="w-full max-w-5xl flex-grow relative z-10"> | |
| <!-- Rendered by JS --> | |
| </main> | |
| <footer class="mt-12 text-slate-600 text-[10px] uppercase tracking-[0.3em] flex flex-col items-center gap-4 relative z-10"> | |
| <div class="flex items-center gap-6 opacity-50"> | |
| <span>Hover to Reveal Data</span> | |
| <span class="text-slate-800">/</span> | |
| <span>Analyze Mismatches</span> | |
| </div> | |
| </footer> | |
| <script> | |
| const SCHEME = { | |
| id: "root", | |
| label: "PROBLEM_SOLVING_STRATEGY", | |
| children: [ | |
| { | |
| id: "global-failure", | |
| label: "GLOBAL_FAILURE_MODES", | |
| children: [ | |
| { id: "strategy-mismatch", label: "STRATEGY_MISMATCH", failures: ["Incompatible tactics for problem type"], debias: ["Explicit problem classification step", "Strategy checklist"] }, | |
| { id: "method-fixation", label: "METHOD_FIXATION", failures: ["Over-reliance on familiar tools"], debias: ["Forced alternative strategy generation"] } | |
| ] | |
| }, | |
| { | |
| id: "cognitive-processing", | |
| label: "COGNITIVE_PROCESSING_MODE", | |
| children: [ | |
| { id: "algorithmic", label: "ALGORITHMIC", failures: ["AUTOMATION_BIAS", "RIGIDITY_ERROR", "CONTEXT_DRIFT"], debias: ["Exception handling rules", "Human-in-the-loop review", "Assumption monitoring"] }, | |
| { id: "heuristic", label: "HEURISTIC", failures: ["AVAILABILITY", "ANCHORING", "REPRESENTATIVENESS", "OVERCONFIDENCE"], debias: ["Reference class forecasting", "Multiple-anchor comparison", "Confidence calibration"] }, | |
| { id: "means-end", label: "MEANS_END_ANALYSIS", failures: ["GOAL_MYOPIA", "PATH_DEPENDENCY"], debias: ["Re-evaluate end-goal alignment per subgoal"] }, | |
| { id: "working-backwards", label: "WORKING_BACKWARDS", failures: ["END_STATE_ILLUSION"], debias: ["Forward simulation cross-check"] }, | |
| { id: "subgoal", label: "SUBGOAL_DECOMPOSITION", failures: ["FRAGMENTATION", "COORDINATION_NEGLECT"], debias: ["Systems-level integration checkpoints"] }, | |
| { id: "insight", label: "INSIGHT_BASED", failures: ["FUNCTIONAL_FIXEDNESS", "MENTAL_SET"], debias: ["Constraint removal exercises", "Representation switching"] }, | |
| { id: "analogical", label: "ANALOGICAL", failures: ["FALSE_ANALOGY", "SURFACE_SIMILARITY"], debias: ["Structural mapping validation"] }, | |
| { id: "recognition", label: "RECOGNITION_PRIMED", failures: ["PREMATURE_CLOSURE", "PATTERN_OVERGENERALIZATION"], debias: ["Deliberate anomaly scanning", "Slow-down triggers"] } | |
| ] | |
| }, | |
| { | |
| id: "knowledge-dependence", | |
| label: "KNOWLEDGE_DEPENDENCE", | |
| children: [ | |
| { id: "domain-general", label: "DOMAIN_GENERAL", failures: ["CONTEXT_BLINDNESS"], debias: ["Domain expert validation"] }, | |
| { | |
| id: "domain-specific", | |
| label: "DOMAIN_SPECIFIC", | |
| children: [ | |
| { id: "knowledge-rep", label: "KNOWLEDGE_REPRESENTATION", children: [ | |
| { id: "schema", label: "SCHEMA_BASED", failures: ["SCHEMA_RIGIDITY"], debias: ["Forced reclassification"] }, | |
| { id: "script", label: "SCRIPT_BASED", failures: ["CHECKLIST_COMPLACENCY"], debias: ["Script deviation drills"] }, | |
| { id: "model", label: "MODEL_BASED", failures: ["MODEL_MISMATCH", "PARAMETER_NEGLECT"], debias: ["Sensitivity analysis", "Model comparison"] } | |
| ]}, | |
| { id: "expertise", label: "EXPERTISE_MODE", children: [ | |
| { id: "pattern-rec", label: "PATTERN_RECOGNITION", failures: ["FAST_ERROR_AMPLIFICATION"], debias: ["Independent second opinion"] }, | |
| { id: "expert-reasoning", label: "ANALYTICAL_EXPERT_REASONING", failures: ["ANALYSIS_PARALYSIS"], debias: ["Time-boxed decision rules"] } | |
| ]}, | |
| { id: "constraint", label: "CONSTRAINT_STRUCTURE", children: [ | |
| { id: "rule-constrained", label: "RULE_CONSTRAINED", failures: ["COMPLIANCE_BLINDNESS"], debias: ["Purpose-based rule interpretation"] }, | |
| { id: "tradeoff", label: "TRADEOFF_DRIVEN", failures: ["SALIENCE_BIAS"], debias: ["Explicit trade-off matrices"] } | |
| ]}, | |
| { id: "temporal", label: "TEMPORAL_ORIENTATION", children: [ | |
| { id: "operational", label: "OPERATIONAL", failures: ["SHORT_TERMISM"], debias: ["Lagged impact review"] }, | |
| { id: "strategic", label: "STRATEGIC", failures: ["VISION_LOCK_IN"], debias: ["Scenario planning"] } | |
| ]}, | |
| { id: "uncertainty", label: "UNCERTAINTY_PROFILE", children: [ | |
| { id: "deterministic", label: "DETERMINISTIC", failures: ["FALSE_CERTAINTY"], debias: ["Stress testing"] }, | |
| { id: "probabilistic", label: "PROBABILISTIC", failures: ["BASE_RATE_NEGLECT", "OUTCOME_BIAS"], debias: ["Bayesian updating", "Probabilistic forecasts"] } | |
| ]}, | |
| { id: "coupling", label: "SYSTEM_COUPLING", children: [ | |
| { id: "tightly", label: "TIGHTLY_COUPLED", failures: ["CASCADING_FAILURE"], debias: ["Safety margins", "Redundancy"] }, | |
| { id: "loosely", label: "LOOSELY_COUPLED", failures: ["COMPLACENCY"], debias: ["Early warning indicators"] } | |
| ]}, | |
| { id: "acquisition", label: "KNOWLEDGE_ACQUISITION", children: [ | |
| { id: "experience", label: "EXPERIENCE_DRIVEN", failures: ["SURVIVORSHIP_BIAS"], debias: ["Counterfactual review"] }, | |
| { id: "formal", label: "FORMAL_TRAINING_DRIVEN", failures: ["THEORY_PRACTICE_GAP"], debias: ["Field validation loops"] } | |
| ]} | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| id: "problem-structure", | |
| label: "PROBLEM_STRUCTURE", | |
| children: [ | |
| { id: "well-structured", label: "WELL_STRUCTURED", failures: ["OVERFORMALIZATION"], debias: ["Human factors review"] }, | |
| { id: "ill-structured", label: "ILL_STRUCTURED", failures: ["PROBLEM_DRIFT"], debias: ["Stakeholder alignment workshops"] } | |
| ] | |
| }, | |
| { | |
| id: "optimization", | |
| label: "SEARCH_AND_OPTIMIZATION", | |
| children: [ | |
| { id: "search", label: "SEARCH_BASED", failures: ["LOCAL_MAXIMA"], debias: ["Random restarts", "Exploration quotas"] }, | |
| { id: "optimization-based", label: "OPTIMIZATION_BASED", failures: ["GOODHARTS_LAW"], debias: ["Multi-metric evaluation"] }, | |
| { id: "satisficing", label: "SATISFICING", failures: ["PREMATURE_STOPPING"], debias: ["Minimum search thresholds"] } | |
| ] | |
| }, | |
| { | |
| id: "perspective", | |
| label: "SYSTEM_PERSPECTIVE", | |
| children: [ | |
| { id: "reductionist", label: "REDUCTIONIST", failures: ["EMERGENCE_BLINDNESS"], debias: ["Interaction mapping"] }, | |
| { id: "systems-oriented", label: "SYSTEMS_ORIENTED", failures: ["OVERCOMPLEXIFICATION"], debias: ["Leverage-point identification"] } | |
| ] | |
| }, | |
| { | |
| id: "social", | |
| label: "SOCIAL_CONTEXT", | |
| children: [ | |
| { id: "individual", label: "INDIVIDUAL", failures: ["MOTIVATED_REASONING"], debias: ["Pre-mortems"] }, | |
| { id: "collective", label: "COLLECTIVE_DISTRIBUTED", failures: ["GROUPTHINK", "DIFFUSION_OF_RESPONSIBILITY"], debias: ["Red teams", "Dissent roles"] } | |
| ] | |
| }, | |
| { | |
| id: "meta", | |
| label: "META_LEVEL", | |
| children: [ | |
| { id: "within-frame", label: "WITHIN_FRAME", failures: ["TYPE_III_ERROR"], debias: ["Frame challenge questions"] }, | |
| { id: "reframing", label: "FRAMING_REFRAMING", failures: ["ENDLESS_REFRAMING"], debias: ["Decision commitment checkpoints"] } | |
| ] | |
| } | |
| ] | |
| }; | |
| let history = [SCHEME]; | |
| function initMatrix(canvas) { | |
| const ctx = canvas.getContext('2d'); | |
| let width = canvas.width = canvas.offsetWidth; | |
| let height = canvas.height = canvas.offsetHeight; | |
| const chars = "0123456789ABCDEFHIJKLMNOPQRSTUVWXYZ$#@%&*"; | |
| const fontSize = 10; | |
| const columns = width / fontSize; | |
| const drops = []; | |
| for (let i = 0; i < columns; i++) drops[i] = Math.random() * -100; | |
| function draw() { | |
| ctx.fillStyle = "rgba(13, 13, 13, 0.1)"; | |
| ctx.fillRect(0, 0, width, height); | |
| ctx.font = fontSize + "px monospace"; | |
| for (let i = 0; i < drops.length; i++) { | |
| const text = chars[Math.floor(Math.random() * chars.length)]; | |
| ctx.fillStyle = Math.random() > 0.95 ? "#0DD9D9" : "#731D55"; | |
| ctx.fillText(text, i * fontSize, drops[i] * fontSize); | |
| if (drops[i] * fontSize > height && Math.random() > 0.975) { | |
| drops[i] = 0; | |
| } | |
| drops[i]++; | |
| } | |
| } | |
| let interval = setInterval(draw, 33); | |
| return () => clearInterval(interval); | |
| } | |
| function render() { | |
| const current = history[history.length - 1]; | |
| const main = document.getElementById('main-content'); | |
| const breadcrumbs = document.getElementById('breadcrumbs'); | |
| const title = document.getElementById('level-title'); | |
| const depth = document.getElementById('depth-indicator'); | |
| const progress = document.getElementById('progress-bar'); | |
| title.innerText = current.label.replace(/_/g, ' '); | |
| depth.innerText = `DEPTH: ${history.length}`; | |
| progress.style.width = `${Math.min(history.length * 12.5, 100)}%`; | |
| // Updated Breadcrumbs Rendering | |
| breadcrumbs.innerHTML = ''; | |
| history.forEach((node, idx) => { | |
| const wrapper = document.createElement('div'); | |
| wrapper.className = 'flex items-center'; | |
| const btn = document.createElement('button'); | |
| const isCurrent = idx === history.length - 1; | |
| btn.className = `breadcrumb-item px-2 py-1 rounded transition-colors ${isCurrent ? 'active cursor-default' : 'cursor-pointer'}`; | |
| btn.innerHTML = ` | |
| <span class="opacity-50 mr-1">${String(idx).padStart(2, '0')}</span> | |
| ${node.label.replace(/_/g, ' ')} | |
| `; | |
| if (!isCurrent) { | |
| btn.onclick = () => goBack(idx); | |
| } | |
| wrapper.appendChild(btn); | |
| if (idx < history.length - 1) { | |
| const sep = document.createElement('span'); | |
| sep.className = 'breadcrumb-separator mx-1 px-1'; | |
| sep.innerText = '>'; | |
| wrapper.appendChild(sep); | |
| } | |
| breadcrumbs.appendChild(wrapper); | |
| }); | |
| const isLeaf = !current.children || current.children.length === 0; | |
| if (isLeaf) { | |
| main.innerHTML = ` | |
| <div class="grid md:grid-cols-2 gap-8 opacity-0 translate-y-4 transition-all duration-500" id="fade-content"> | |
| <div class="bg-[#080808] border border-[#F26E22]/30 p-6 rounded-xl"> | |
| <h2 class="text-[#F26E22] font-bold uppercase text-xs tracking-widest mb-4">Core Failures</h2> | |
| <ul class="space-y-3"> | |
| ${current.failures.map(f => `<li class="text-sm text-slate-400 bg-red-900/5 p-2 border border-red-900/10 rounded">${f}</li>`).join('')} | |
| </ul> | |
| </div> | |
| <div class="bg-[#080808] border border-[#0DD9D9]/30 p-6 rounded-xl"> | |
| <h2 class="text-[#0DD9D9] font-bold uppercase text-xs tracking-widest mb-4">Debias Protocol</h2> | |
| <ul class="space-y-3"> | |
| ${current.debias.map(d => `<li class="text-sm text-slate-400 bg-cyan-900/5 p-2 border border-cyan-900/10 rounded">${d}</li>`).join('')} | |
| </ul> | |
| </div> | |
| </div> | |
| `; | |
| setTimeout(() => document.getElementById('fade-content').classList.remove('opacity-0', 'translate-y-4'), 50); | |
| } else { | |
| main.innerHTML = `<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="tiles-grid"></div>`; | |
| const grid = document.getElementById('tiles-grid'); | |
| current.children.forEach((child, idx) => { | |
| const btn = document.createElement('button'); | |
| btn.className = 'btn-tile rounded-xl group'; | |
| btn.innerHTML = ` | |
| <div class="matrix-container"><canvas id="canvas-${idx}" class="w-full h-full"></canvas></div> | |
| <div class="reveal-hint">${child.label.replace(/_/g, ' ')}</div> | |
| <div class="content-overlay h-full flex flex-col p-4 items-center justify-center text-center"> | |
| <h3 class="text-[#0DD9D9] font-bold text-sm tracking-tighter mb-2">${child.label.replace(/_/g, ' ')}</h3> | |
| <span class="text-[8px] text-slate-600 font-bold uppercase">Enter Level</span> | |
| </div> | |
| `; | |
| btn.onclick = () => navigateTo(idx); | |
| grid.appendChild(btn); | |
| initMatrix(document.getElementById(`canvas-${idx}`)); | |
| }); | |
| } | |
| } | |
| function navigateTo(index) { | |
| history.push(history[history.length - 1].children[index]); | |
| render(); | |
| } | |
| function goBack(idx) { | |
| // Jump back to a specific point in the history array | |
| history = history.slice(0, idx + 1); | |
| render(); | |
| } | |
| function resetToRoot() { | |
| history = [SCHEME]; | |
| render(); | |
| } | |
| window.onload = render; | |
| </script> | |
| </body> | |
| </html> |