Update index.html

index.html

@@ -34,26 +34,48 @@
             color: #cbd5e1;
             margin-top: 0;
         }
-        /* Style for interactive drop-down details */
-        details {
+        .guide-card {
             background-color: #1e2f3b;
-            padding: 10px;
-            margin: 10px 0;
-            border-radius: 5px;
+            padding: 15px;
+            margin: 15px 0;
+            border-radius: 6px;
+            border-left: 4px solid #4cd1a4;
+        }
+        .guide-btn {
+            background-color: #4cd1a4;
+            color: #0b141a;
+            border: none;
+            padding: 8px 15px;
+            border-radius: 4px;
+            font-weight: bold;
             cursor: pointer;
+            margin-top: 10px;
         }
-        summary {
+        .guide-btn:hover {
+            background-color: #3db892;
+        }
+        .back-btn {
+            background-color: #334155;
+            color: #f8fafc;
+            border: none;
+            padding: 8px 15px;
+            border-radius: 4px;
             font-weight: bold;
-            color: #4cd1a4;
+            cursor: pointer;
+            margin-bottom: 20px;
+        }
+        .back-btn:hover {
+            background-color: #475569;
         }
         .lore-box {
-            border-left: 3px solid #eab308;
-            padding-left: 10px;
+            background-color: #202511;
+            border-left: 4px solid #eab308;
+            padding: 15px;
             font-style: italic;
             color: #cbd5e1;
-            margin-top: 10px;
+            margin: 20px 0;
+            border-radius: 4px;
         }
-        /* Checklist styling */
         .checkbox-item {
             display: block;
             margin: 10px 0;
@@ -65,75 +87,107 @@
             transform: scale(1.2);
             cursor: pointer;
         }
+        /* Hidden class for screen switching */
+        .hidden {
+            display: none !important;
+        }
+        ol li {
+            margin-bottom: 12px;
+            line-height: 1.5;
+        }
     </style>
 </head>
 <body>
 
-    <div class="container">
+    <!-- SCREEN 1: THE MAIN DASHBOARD -->
+    <div id="main-screen" class="container">
         <h1>🛡️ BOTW 100% Master Guide & Lore</h1>
-        <p style="text-align: center; color: #94a3b8;">A comprehensive guide combining completion strategies with hidden Hyrule history.</p>
+        <p style="text-align: center; color: #94a3b8;">Select a chapter below to open its dedicated master walkthrough screen.</p>
 
-        <!-- SECTION 1: WALKTHROUGH -->
         <div class="section">
-            <h2>⚔️ Main Walkthroughs</h2>
-            <p>Click a region to expand detailed steps and strategies.</p>
+            <h2>⚔️ Campaign Walkthroughs</h2>
             
-            <details>
-                <summary>1. The Great Plateau</summary>
-                <p style="margin-top:10px;">**Objective:** Obtain the four core runes from the plateau shrines.</p>
-                <ul>
-                    <li>Wake up in the Shrine of Resurrection and grab the Sheikah Slate.</li>
-                    <li>Meet the Old Man outside and head toward the first tower.</li>
-                    <li>Complete the Magnesis, Bomb, Stasis, and Cryonis shrines.</li>
-                </ul>
-                <div class="lore-box">
-                    <strong>Lore Tidbit:</strong> The Temple of Time on the plateau is the exact same temple from <em>Ocarina of Time</em>, now left in ruins after 10,000 years of history and the recent Calamity.
-                </div>
-            </details>
+            <div class="guide-card">
+                <h3>1. The Awakening & Great Plateau Tower</h3>
+                <p>Learn the optimal path from opening your eyes to activating your very first Sheikah Tower.</p>
+                <button class="guide-btn" onclick="showScreen('plateau-screen')">Open Full Guide →</button>
+            </div>
 
-            <details>
-                <summary>2. Divine Beast Vah Ruta (Zora's Domain)</summary>
-                <p style="margin-top:10px;">**Objective:** Calm the mechanical elephant and free Mipha's spirit.</p>
-                <ul>
-                    <li>Meet Prince Sidon at Inogo Bridge and follow the river path.</li>
-                    <li>Collect 20 Shock Arrows from the Lynel at Ploymus Mountain (Stealth is recommended!).</li>
-                </ul>
-            </details>
+            <div class="guide-card">
+                <h3>2. Divine Beast Vah Ruta</h3>
+                <p>Navigate Zora's Domain, outsmart the Ploymus Mountain Lynel, and reclaim the mechanical elephant.</p>
+                <button class="guide-btn" onclick="alert('This screen is under construction! You will code this next.')">Open Full Guide →</button>
+            </div>
         </div>
 
-        <!-- SECTION 2: INTERACTIVE CHECKLIST -->
         <div class="section">
-            <h2>📋 100% Tracker</h2>
-            <p>Your progress is automatically saved to your browser cache!</p>
+            <h2>📋 100% Global Tracker</h2>
+            <label class="checkbox-item"><input type="checkbox" id="task1"> Activate all 15 Sheikah Towers</label>
+            <label class="checkbox-item"><input type="checkbox" id="task2"> Find all 120 Base Shrines</label>
+            <label class="checkbox-item"><input type="checkbox" id="task3"> Recover all 13 Memories</label>
+        </div>
+    </div>
+
+
+    <!-- SCREEN 2: DEDICATED GREAT PLATEAU WALKTHROUGH -->
+    <div id="plateau-screen" class="container hidden">
+        <button class="back-btn" onclick="showScreen('main-screen')">← Back to Main Menu</button>
+        
+        <h1>🌅 Chapter 1: The Awakening</h1>
+        
+        <div class="section">
+            <h2>🚶‍♂️ Step-by-Step Walkthrough</h2>
+            <ol>
+                <li>
+                    <strong>The Shrine of Resurrection:</strong> Walk up to the pedestal to claim the <em>Sheikah Slate</em>. Open the two treasure chests nearby for your first clothing items (Old Shirt and Well-Worn Trousers), then interact with the stone door to step out into Hyrule.
+                </li>
+                <li>
+                    <strong>Meeting the Old Man:</strong> Run down the hill to your right. You will spot an Old Man sitting by a campfire cooking a baked apple. Pick up the <em>Tree Branch</em> on the way and talk to him. 
+                </li>
+                <li>
+                    <strong>Finding Your First Weapon:</strong> Snag the baked apple sitting on the rock next to his fire (he won't mind!) and grab the <em>Rusty Broadsword</em> resting on the tiny island in the nearby pond.
+                </li>
+                <li>
+                    <strong>Heading to the Tower:</strong> Follow the golden waypoint marker on your minimap toward the rocky ruins. Interact with the pedestal inside the ground structure. This triggers a massive cutscene where the Great Plateau Tower bursts out from the earth, revealing your first map section.
+                </li>
+            </ol>
+        </div>
+
+        <div class="section">
+            <h2>📜 Lore Archive: Secrets of the Awakening</h2>
+            
+            <div class="lore-box">
+                <strong>The Slumber of 100 Years:</strong> The fluid Link wakes up in is active Sheikah restoration extract. It took exactly one century for this chamber to patch up Link's fatal wounds suffered during the Great Calamity.
+            </div>
             
-            <label class="checkbox-item">
-                <input type="checkbox" id="task1"> Activate all 15 Sheikah Towers
-            </label>
-            <label class="checkbox-item">
-                <input type="checkbox" id="task2"> Find all 120 Base Shrines
-            </label>
-            <label class="checkbox-item">
-                <input type="checkbox" id="task3"> Recover all 13 Memories
-            </label>
-            <label class="checkbox-item">
-                <input type="checkbox" id="task4"> Pull the Master Sword
-            </label>
+            <div class="lore-box">
+                <strong>Who is the Old Man?</strong> Pay close attention to his clothing and the way he talks about the Temple of Time. His coat features historical royal embroidery, dropping subtle hints that he is much more than a simple wanderer.
+            </div>
         </div>
     </div>
 
-    <!-- JAVASCRIPT: Logic to save checklist progress -->
+    <!-- JAVASCRIPT: Screen management and saving checkboxes -->
     <script>
-        // Find all checkboxes on the page
-        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+        // Function to switch between screens
+        function showScreen(screenId) {
+            // Hide both screens first
+            document.getElementById('main-screen').classList.add('hidden');
+            document.getElementById('plateau-screen').classList.add('hidden');
+            
+            // Show the requested screen
+            document.getElementById(screenId).classList.remove('hidden');
+            
+            // Scroll back to the top of the page smoothly
+            window.scrollTo({top: 0, behavior: 'smooth'});
+        }
 
-        // Loop through checkboxes to load saved states from the browser
+        // Checklist saving system (keeps track of choices)
+        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
         checkboxes.forEach(checkbox => {
             const savedState = localStorage.getItem(checkbox.id);
             if (savedState === 'true') {
                 checkbox.checked = true;
             }
-
-            // Listen for clicks to save the new state instantly
             checkbox.addEventListener('change', () => {
                 localStorage.setItem(checkbox.id, checkbox.checked);
             });