| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Game Development Framework</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .level-card { |
| transition: all 0.3s ease; |
| } |
| .level-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| .progress-bar { |
| height: 6px; |
| border-radius: 3px; |
| } |
| .question-card { |
| transition: all 0.3s ease; |
| } |
| .question-card:hover { |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
| } |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| @media (max-width: 768px) { |
| .sidebar { |
| transform: translateX(-100%); |
| position: absolute; |
| z-index: 10; |
| } |
| .sidebar.open { |
| transform: translateX(0); |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <div class="md:hidden fixed top-4 left-4 z-20"> |
| <button id="menuToggle" class="p-2 rounded-lg bg-indigo-600 text-white shadow-lg"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
|
|
| |
| <div id="sidebar" class="sidebar w-64 bg-white h-screen fixed shadow-lg p-4"> |
| <div class="flex items-center mb-8"> |
| <i class="fas fa-gamepad text-indigo-600 text-2xl mr-3"></i> |
| <h1 class="text-xl font-bold text-gray-800">Game Framework</h1> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="text-xs uppercase font-semibold text-gray-500 mb-2">Project</h3> |
| <div class="flex items-center bg-indigo-50 rounded-lg p-3"> |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-mobile-alt text-indigo-600"></i> |
| </div> |
| <div> |
| <p class="font-medium text-gray-800">Casual Match-3</p> |
| <p class="text-xs text-gray-500">Version 1.0.0</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="text-xs uppercase font-semibold text-gray-500 mb-2">Framework Levels</h3> |
| <ul id="levelNav"> |
| <li class="mb-1"> |
| <a href="#" data-level="l1" class="level-link flex items-center p-2 rounded-lg hover:bg-indigo-50 text-gray-700"> |
| <span class="w-5 h-5 rounded-full bg-indigo-100 text-indigo-600 text-xs flex items-center justify-center mr-3">1</span> |
| <span>Vision & Purpose</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" data-level="l2" class="level-link flex items-center p-2 rounded-lg hover:bg-indigo-50 text-gray-700"> |
| <span class="w-5 h-5 rounded-full bg-indigo-100 text-indigo-600 text-xs flex items-center justify-center mr-3">2</span> |
| <span>Game Concept</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" data-level="l3" class="level-link flex items-center p-2 rounded-lg hover:bg-indigo-50 text-gray-700"> |
| <span class="w-5 h-5 rounded-full bg-indigo-100 text-indigo-600 text-xs flex items-center justify-center mr-3">3</span> |
| <span>Specification</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" data-level="l4" class="level-link flex items-center p-2 rounded-lg hover:bg-indigo-50 text-gray-700"> |
| <span class="w-5 h-5 rounded-full bg-indigo-100 text-indigo-600 text-xs flex items-center justify-center mr-3">4</span> |
| <span>Game Architecture</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" data-level="l5" class="level-link flex items-center p-2 rounded-lg hover:bg-indigo-50 text-gray-700"> |
| <span class="w-5 h-5 rounded-full bg-indigo-100 text-indigo-600 text-xs flex items-center justify-center mr-3">5</span> |
| <span>Tech Design</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" data-level="l6" class="level-link flex items-center p-2 rounded-lg hover:bg-indigo-50 text-gray-700"> |
| <span class="w-5 h-5 rounded-full bg-indigo-100 text-indigo-600 text-xs flex items-center justify-center mr-3">6</span> |
| <span>Implementation</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" data-level="l7" class="level-link flex items-center p-2 rounded-lg hover:bg-indigo-50 text-gray-700"> |
| <span class="w-5 h-5 rounded-full bg-indigo-100 text-indigo-600 text-xs flex items-center justify-center mr-3">7</span> |
| <span>Deployment & Live Ops</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| |
| <div class="absolute bottom-4 left-4 right-4"> |
| <div class="bg-indigo-50 rounded-lg p-3"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2"> |
| <i class="fas fa-user text-indigo-600 text-sm"></i> |
| </div> |
| <p class="font-medium text-gray-800">Dev Team</p> |
| </div> |
| <button class="w-full py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition"> |
| <i class="fas fa-sign-out-alt mr-1"></i> Logout |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="md:ml-64 p-6"> |
| <div class="max-w-6xl mx-auto"> |
| |
| <div class="flex justify-between items-center mb-8"> |
| <div> |
| <h1 id="currentLevelTitle" class="text-2xl font-bold text-gray-800">Game Development Framework</h1> |
| <p id="currentLevelDesc" class="text-gray-600">Select a framework level to begin</p> |
| </div> |
| <div class="flex space-x-3"> |
| <button class="px-4 py-2 bg-white border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center"> |
| <i class="fas fa-search mr-2 text-gray-500"></i> Search |
| </button> |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center"> |
| <i class="fas fa-plus mr-2"></i> Add Note |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="dashboardView" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> |
| <div class="level-card bg-white p-6 rounded-xl shadow-sm border border-gray-100 cursor-pointer" data-level="l1"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-lightbulb text-indigo-600 text-xl"></i> |
| </div> |
| <span class="px-2 py-1 bg-green-50 text-green-600 text-xs rounded-full">Active</span> |
| </div> |
| <h3 class="font-bold text-lg mb-2 text-gray-800">L1: Vision & Purpose</h3> |
| <p class="text-gray-600 text-sm mb-4">Define the game's core vision, player needs, and strategic relevance.</p> |
| <div class="mb-2 flex justify-between text-sm text-gray-500"> |
| <span>Progress</span> |
| <span>65%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="progress-bar bg-indigo-600 rounded-full h-2" style="width: 65%"></div> |
| </div> |
| </div> |
| |
| <div class="level-card bg-white p-6 rounded-xl shadow-sm border border-gray-100 cursor-pointer" data-level="l2"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-puzzle-piece text-blue-600 text-xl"></i> |
| </div> |
| <span class="px-2 py-1 bg-yellow-50 text-yellow-600 text-xs rounded-full">In Progress</span> |
| </div> |
| <h3 class="font-bold text-lg mb-2 text-gray-800">L2: Game Concept</h3> |
| <p class="text-gray-600 text-sm mb-4">Develop the core gameplay loops, player journey, and competitive landscape.</p> |
| <div class="mb-2 flex justify-between text-sm text-gray-500"> |
| <span>Progress</span> |
| <span>42%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="progress-bar bg-blue-600 rounded-full h-2" style="width: 42%"></div> |
| </div> |
| </div> |
| |
| <div class="level-card bg-white p-6 rounded-xl shadow-sm border border-gray-100 cursor-pointer" data-level="l3"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center"> |
| <i class="fas fa-file-alt text-purple-600 text-xl"></i> |
| </div> |
| <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">Pending</span> |
| </div> |
| <h3 class="font-bold text-lg mb-2 text-gray-800">L3: Specification</h3> |
| <p class="text-gray-600 text-sm mb-4">Document detailed game design specifications and requirements.</p> |
| <div class="mb-2 flex justify-between text-sm text-gray-500"> |
| <span>Progress</span> |
| <span>18%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="progress-bar bg-purple-600 rounded-full h-2" style="width: 18%"></div> |
| </div> |
| </div> |
| |
| <div class="level-card bg-white p-6 rounded-xl shadow-sm border border-gray-100 cursor-pointer" data-level="l4"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-project-diagram text-green-600 text-xl"></i> |
| </div> |
| <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">Pending</span> |
| </div> |
| <h3 class="font-bold text-lg mb-2 text-gray-800">L4: Game Architecture</h3> |
| <p class="text-gray-600 text-sm mb-4">Design the technical architecture and system decomposition.</p> |
| <div class="mb-2 flex justify-between text-sm text-gray-500"> |
| <span>Progress</span> |
| <span>5%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="progress-bar bg-green-600 rounded-full h-2" style="width: 5%"></div> |
| </div> |
| </div> |
| |
| <div class="level-card bg-white p-6 rounded-xl shadow-sm border border-gray-100 cursor-pointer" data-level="l5"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center"> |
| <i class="fas fa-code text-red-600 text-xl"></i> |
| </div> |
| <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">Pending</span> |
| </div> |
| <h3 class="font-bold text-lg mb-2 text-gray-800">L5: Tech Design</h3> |
| <p class="text-gray-600 text-sm mb-4">Specify implementation details and tech stack choices.</p> |
| <div class="mb-2 flex justify-between text-sm text-gray-500"> |
| <span>Progress</span> |
| <span>0%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="progress-bar bg-red-600 rounded-full h-2" style="width: 0%"></div> |
| </div> |
| </div> |
| |
| <div class="level-card bg-white p-6 rounded-xl shadow-sm border border-gray-100 cursor-pointer" data-level="l6"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="w-12 h-12 rounded-lg bg-yellow-100 flex items-center justify-center"> |
| <i class="fas fa-cogs text-yellow-600 text-xl"></i> |
| </div> |
| <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">Pending</span> |
| </div> |
| <h3 class="font-bold text-lg mb-2 text-gray-800">L6: Implementation</h3> |
| <p class="text-gray-600 text-sm mb-4">Execute on code, art, audio, and design implementation.</p> |
| <div class="mb-2 flex justify-between text-sm text-gray-500"> |
| <span>Progress</span> |
| <span>0%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="progress-bar bg-yellow-600 rounded-full h-2" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="levelContentView" class="hidden"> |
| <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <div> |
| <h2 id="levelTitle" class="text-xl font-bold text-gray-800">Level Title</h2> |
| <p id="levelSubtitle" class="text-gray-600">Level description</p> |
| </div> |
| <button id="backToDashboard" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 flex items-center"> |
| <i class="fas fa-arrow-left mr-2"></i> Back to Dashboard |
| </button> |
| </div> |
| |
| <div class="mb-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-question text-indigo-600"></i> |
| </div> |
| <h3 class="font-semibold text-lg text-gray-800">Key Questions</h3> |
| </div> |
| |
| <div id="questionsContainer" class="space-y-4"> |
| |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-tasks text-green-600"></i> |
| </div> |
| <h3 class="font-semibold text-lg text-gray-800">Action Items</h3> |
| </div> |
| |
| <div class="bg-gray-50 rounded-lg p-4"> |
| <div class="flex items-start mb-4"> |
| <input type="checkbox" class="mt-1 mr-3" id="task1"> |
| <label for="task1" class="flex-1"> |
| <p class="font-medium text-gray-800">Create player persona document</p> |
| <p class="text-sm text-gray-500">Define demographics, psychographics, and play habits</p> |
| </label> |
| <span class="px-2 py-1 bg-indigo-50 text-indigo-600 text-xs rounded-full">L1</span> |
| </div> |
| |
| <div class="flex items-start mb-4"> |
| <input type="checkbox" class="mt-1 mr-3" id="task2"> |
| <label for="task2" class="flex-1"> |
| <p class="font-medium text-gray-800">Conduct competitive analysis</p> |
| <p class="text-sm text-gray-500">Review 3 top competitors in the genre</p> |
| </label> |
| <span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">L2</span> |
| </div> |
| |
| <div class="flex items-start"> |
| <input type="checkbox" class="mt-1 mr-3" id="task3"> |
| <label for="task3" class="flex-1"> |
| <p class="font-medium text-gray-800">Draft core loop diagram</p> |
| <p class="text-sm text-gray-500">Visualize the primary repeatable actions</p> |
| </label> |
| <span class="px-2 py-1 bg-purple-50 text-purple-600 text-xs rounded-full">L3</span> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex items-center mb-4"> |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-comments text-purple-600"></i> |
| </div> |
| <h3 class="font-semibold text-lg text-gray-800">Team Notes</h3> |
| </div> |
| |
| <div class="bg-gray-50 rounded-lg p-4"> |
| <div class="flex mb-4"> |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-user text-indigo-600"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-gray-800">Alex Chen</p> |
| <p class="text-sm text-gray-600 mb-2">2 hours ago</p> |
| <p class="text-gray-700 bg-white p-3 rounded-lg">We should focus on the stress-relief aspect for our target audience. Research shows casual players often play to unwind after work.</p> |
| </div> |
| </div> |
| |
| <div class="flex"> |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-user text-blue-600"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-gray-800">Jamie Smith</p> |
| <p class="text-sm text-gray-600 mb-2">Yesterday</p> |
| <p class="text-gray-700 bg-white p-3 rounded-lg">The Candy Crush team found that players respond well to daily challenges. We should consider this for retention.</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-4 flex"> |
| <input type="text" placeholder="Add a note..." class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const levels = { |
| l1: { |
| title: "L1 — Game Vision & Purpose", |
| subtitle: "Define the game's core vision, player needs, and strategic relevance", |
| questions: [ |
| "What player desire are we fulfilling, and for whom?", |
| "What change in the player's routine or feeling are we trying to create?", |
| "Why should our studio build this game? Why now?", |
| "What are we specifically not trying to build? What trade-offs are we making?", |
| "What does success look like for this game?", |
| "How is this game distinct, and what are we learning from?" |
| ] |
| }, |
| l2: { |
| title: "L2 — Game Concept", |
| subtitle: "Develop the core gameplay loops, player journey, and competitive landscape", |
| questions: [ |
| "Who is the player, and what is their situation when they play?", |
| "What does the player actually do in the game?", |
| "Why does the player care, and what should they feel?", |
| "What kind of fun and value are we delivering?", |
| "How does this game fit within the existing game ecosystem?", |
| "What is the player's experience across their lifetime with the game?" |
| ] |
| }, |
| l3: { |
| title: "L3 — Specification", |
| subtitle: "Document detailed game design specifications and requirements", |
| questions: [ |
| "What exactly should the player be able to do, step-by-step?", |
| "What must the game systems be able to do — and what can be skipped?", |
| "How should the game look, feel, and respond?", |
| "What data drives the game, and what rules govern it?", |
| "What protections and policies must be in place?", |
| "How do we know a feature is done right and works effectively?" |
| ] |
| }, |
| l4: { |
| title: "L4 — Game Architecture", |
| subtitle: "Design the technical architecture and system decomposition", |
| questions: [ |
| "How should the game's codebase and systems be logically structured?", |
| "How does information move through the game systems?", |
| "How and where is the player's game state managed?", |
| "How do we protect game integrity and player accounts?", |
| "How will the game perform under load and on target hardware?", |
| "How does the game handle crashes, errors, and interruptions gracefully?" |
| ] |
| }, |
| l5: { |
| title: "L5 — Tech Design", |
| subtitle: "Specify implementation details and tech stack choices", |
| questions: [ |
| "What specific tools, engine versions, SDKs, and platforms are we using — and why?", |
| "How do game systems and services actually talk to each other?", |
| "What does our game data look like at rest and in memory?", |
| "How is the game protected at the code and infrastructure level?", |
| "How does the game manage state during active gameplay?", |
| "How do we ensure the game runs smoothly on target devices?" |
| ] |
| }, |
| l6: { |
| title: "L6 — Implementation", |
| subtitle: "Execute on code, art, audio, and design implementation", |
| questions: [ |
| "Do I fully understand the specific task I'm implementing — and why it matters?", |
| "What are the precise requirements and constraints for this task?", |
| "How does this piece fit and interact with the rest of the game?", |
| "What can go wrong during gameplay, and how is it handled?", |
| "How do I verify this works correctly and how can issues be diagnosed later?", |
| "Is this implementation clean, efficient, and easy for others to understand?" |
| ] |
| }, |
| l7: { |
| title: "L7 — Deployment & Live Operations", |
| subtitle: "Manage the live game, updates, and ongoing operations", |
| questions: [ |
| "How does the game get updated, and how often?", |
| "What infrastructure supports the build, deployment, and live game?", |
| "How do we know the live game is healthy and players are engaged?", |
| "How do we investigate player issues or unexpected behavior?", |
| "How do we maintain security and compliance post-launch?", |
| "How do we manage the ongoing operational costs?" |
| ] |
| } |
| }; |
| |
| |
| const menuToggle = document.getElementById('menuToggle'); |
| const sidebar = document.getElementById('sidebar'); |
| const dashboardView = document.getElementById('dashboardView'); |
| const levelContentView = document.getElementById('levelContentView'); |
| const backToDashboard = document.getElementById('backToDashboard'); |
| const levelTitle = document.getElementById('levelTitle'); |
| const levelSubtitle = document.getElementById('levelSubtitle'); |
| const questionsContainer = document.getElementById('questionsContainer'); |
| const currentLevelTitle = document.getElementById('currentLevelTitle'); |
| const currentLevelDesc = document.getElementById('currentLevelDesc'); |
| const levelNavLinks = document.querySelectorAll('.level-link'); |
| const levelCards = document.querySelectorAll('.level-card'); |
| |
| |
| menuToggle.addEventListener('click', () => { |
| sidebar.classList.toggle('open'); |
| }); |
| |
| |
| levelCards.forEach(card => { |
| card.addEventListener('click', function() { |
| const level = this.getAttribute('data-level'); |
| showLevelContent(level); |
| }); |
| }); |
| |
| |
| levelNavLinks.forEach(link => { |
| link.addEventListener('click', function(e) { |
| e.preventDefault(); |
| const level = this.getAttribute('data-level'); |
| showLevelContent(level); |
| |
| |
| if (window.innerWidth <= 768) { |
| sidebar.classList.remove('open'); |
| } |
| }); |
| }); |
| |
| |
| backToDashboard.addEventListener('click', function() { |
| dashboardView.classList.remove('hidden'); |
| levelContentView.classList.add('hidden'); |
| currentLevelTitle.textContent = "Game Development Framework"; |
| currentLevelDesc.textContent = "Select a framework level to begin"; |
| }); |
| |
| |
| function showLevelContent(level) { |
| const levelData = levels[level]; |
| |
| |
| levelTitle.textContent = levelData.title; |
| levelSubtitle.textContent = levelData.subtitle; |
| currentLevelTitle.textContent = levelData.title; |
| currentLevelDesc.textContent = levelData.subtitle; |
| |
| |
| questionsContainer.innerHTML = ''; |
| levelData.questions.forEach((question, index) => { |
| const questionCard = document.createElement('div'); |
| questionCard.className = 'question-card bg-white p-4 rounded-lg border border-gray-200'; |
| questionCard.innerHTML = ` |
| <div class="flex items-start"> |
| <span class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 text-sm flex items-center justify-center mr-3 mt-1">${index + 1}</span> |
| <div class="flex-1"> |
| <p class="font-medium text-gray-800 mb-2">${question}</p> |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="2" placeholder="Add notes..."></textarea> |
| </div> |
| </div> |
| `; |
| questionsContainer.appendChild(questionCard); |
| }); |
| |
| |
| dashboardView.classList.add('hidden'); |
| levelContentView.classList.remove('hidden'); |
| |
| |
| window.scrollTo(0, 0); |
| } |
| |
| |
| function setActiveLevel(level) { |
| levelNavLinks.forEach(link => { |
| if (link.getAttribute('data-level') === level) { |
| link.classList.add('bg-indigo-50', 'text-indigo-700'); |
| link.classList.remove('text-gray-700', 'hover:bg-indigo-50'); |
| } else { |
| link.classList.remove('bg-indigo-50', 'text-indigo-700'); |
| link.classList.add('text-gray-700', 'hover:bg-indigo-50'); |
| } |
| }); |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/casual-game-arch-framework" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
