Add Walkthrough Mode HTML structure

index.html

@@ -948,6 +948,56 @@
             </div>
         </div>
 
+        <!-- Walkthrough Mode -->
+        <div id="walkthroughMode" class="task-selection">
+            <div class="task-header">
+                <button class="task-back-btn" onclick="goBackToMain()">← Back to Categories</button>
+                <h2 class="task-title">Walkthrough Mode</h2>
+                <p class="task-subtitle">Learn step-by-step how neural networks work</p>
+            </div>
+
+            <div class="walkthrough-task-menu">
+                <div class="walkthrough-task-card" onclick="startWalkthrough('basics')">
+                    <h3 class="walkthrough-task-title">🧠 Neural Network Basics</h3>
+                    <p class="walkthrough-task-description">Learn what neurons, layers, and connections are. Understand how information flows through the network.</p>
+                </div>
+                
+                <div class="walkthrough-task-card" onclick="startWalkthrough('training')">
+                    <h3 class="walkthrough-task-title">🎯 How Training Works</h3>
+                    <p class="walkthrough-task-description">Discover how neural networks learn from data through forward propagation, loss calculation, and backpropagation.</p>
+                </div>
+                
+                <div class="walkthrough-task-card" onclick="startWalkthrough('visualization')">
+                    <h3 class="walkthrough-task-title">📊 Understanding the Visualizations</h3>
+                    <p class="walkthrough-task-description">Learn to read the network diagram, loss chart, and output predictions to understand what's happening.</p>
+                </div>
+                
+                <div class="walkthrough-task-card" onclick="startWalkthrough('logic')">
+                    <h3 class="walkthrough-task-title">🔗 Logic Gates Tutorial</h3>
+                    <p class="walkthrough-task-description">See how neural networks can learn simple AND, OR, and complex XOR logic gates step by step.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Walkthrough Overlay -->
+        <div id="walkthroughOverlay" class="walkthrough-overlay"></div>
+        <div id="walkthroughHighlight" class="walkthrough-highlight" style="display: none;"></div>
+        <div id="walkthroughPopup" class="walkthrough-popup" style="display: none;">
+            <h3 id="walkthroughTitle" class="walkthrough-title"></h3>
+            <p id="walkthroughContent" class="walkthrough-content"></p>
+            <div class="walkthrough-buttons">
+                <button id="walkthroughPrev" class="walkthrough-btn walkthrough-btn-prev">Previous</button>
+                <button id="walkthroughNext" class="walkthrough-btn walkthrough-btn-next">Next</button>
+                <button id="walkthroughSkip" class="walkthrough-btn walkthrough-btn-skip">Exit</button>
+            </div>
+        </div>
+        <div id="walkthroughProgress" class="walkthrough-progress" style="display: none;">
+            Step <span id="walkthroughStep">1</span> of <span id="walkthroughTotal">5</span>
+        </div>
+        <div id="walkthroughIndicator" class="walkthrough-indicator">
+            🎓 Walkthrough Mode Active
+        </div>
+
         <!-- Training Interface -->
         <div id="trainingInterface" class="training-interface">
             <div class="header">