Spaces:

ProCreations
/

learn-ai

Running

App Files Files Community

ProCreations commited on 11 days ago

Commit

9c5bb7c

verified ·

1 Parent(s): 90b280a

Update index.html

Browse files

Files changed (1) hide show

index.html +892 -1449

index.html CHANGED Viewed

@@ -1,1460 +1,903 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8"/>
-<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-<title>AI Basics Learning Hub - Interactive Learning Platform</title>
-<style>
-/* ============ CSS Variables & Reset ============ */
-:root {
-  --primary: #6366f1;
-  --primary-dark: #4f46e5;
-  --secondary: #8b5cf6;
-  --accent: #14b8a6;
-  --success: #10b981;
-  --error: #ef4444;
-  --warning: #f59e0b;
-  --text-primary: #1f2937;
-  --text-secondary: #6b7280;
-  --bg-primary: #ffffff;
-  --bg-secondary: #f9fafb;
-  --bg-tertiary: #f3f4f6;
-  --border: #e5e7eb;
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  --radius: 12px;
-  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-/* Dark mode variables */
-body.dark-mode {
-  --text-primary: #f9fafb;
-  --text-secondary: #d1d5db;
-  --bg-primary: #111827;
-  --bg-secondary: #1f2937;
-  --bg-tertiary: #374151;
-  --border: #4b5563;
-  --gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
-}
-/* Ensure all text elements use the color variables */
-h1, h2, h3, h4, h5, h6, p, span, div, label, button {
-  color: var(--text-primary);
-}
-/* Override specific elements that need secondary text color */
-.subtitle, .card-counter, .task-badge {
-  color: var(--text-secondary) !important;
-}
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-/* ============ Base Styles ============ */
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  line-height: 1.6;
-  transition: var(--transition);
-  overflow-x: hidden;
-}
-/* Animated background pattern */
-body::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image:
-    radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 40% 20%, rgba(20, 184, 166, 0.1) 0%, transparent 50%);
-  z-index: -1;
-  animation: backgroundShift 20s ease-in-out infinite;
-}
-@keyframes backgroundShift {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  25% { transform: translate(-20px, -20px) scale(1.1); }
-  50% { transform: translate(20px, -10px) scale(0.95); }
-  75% { transform: translate(-10px, 20px) scale(1.05); }
-}
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-}
-/* ============ Header Styles ============ */
-header {
-  text-align: center;
-  margin-bottom: 40px;
-  padding: 40px 30px;
-  background: var(--bg-primary);
-  border-radius: 24px;
-  box-shadow: var(--shadow-lg);
-  position: relative;
-  overflow: hidden;
-}
-header::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  right: -50%;
-  width: 200%;
-  height: 200%;
-  background: var(--gradient);
-  opacity: 0.05;
-  transform: rotate(45deg);
-  animation: headerGradient 15s ease-in-out infinite;
-}
-@keyframes headerGradient {
-  0%, 100% { transform: rotate(45deg) translateY(0); }
-  50% { transform: rotate(45deg) translateY(-20px); }
-}
-h1 {
-  font-size: 2.5rem;
-  font-weight: 800;
-  background: var(--gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 10px;
-  position: relative;
-}
-.subtitle {
-  font-size: 1.1rem;
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-/* ============ Navigation Tabs ============ */
-.main-tabs {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 15px;
-  margin: 30px 0;
-  padding: 20px;
-  background: var(--bg-primary);
-  border-radius: 16px;
-  box-shadow: var(--shadow-md);
-}
-.main-tab {
-  padding: 12px 24px;
-  border: 2px solid transparent;
-  border-radius: 12px;
-  background: var(--bg-tertiary);
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 1rem;
-  color: var(--text-primary);
-  transition: var(--transition);
-  position: relative;
-  overflow: hidden;
-}
-.main-tab::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  background: var(--gradient);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
-}
-.main-tab:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
-.main-tab.active {
-  color: white;
-  background: var(--gradient);
-  box-shadow: var(--shadow-lg);
-}
-/* Dark mode toggle */
-.dark-toggle {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 16px;
-  background: var(--bg-tertiary);
-  border-radius: 50px;
-  cursor: pointer;
-  color: var(--text-primary);
-  transition: var(--transition);
-}
-.dark-toggle:hover {
-  background: var(--bg-secondary);
-}
-.toggle-switch {
-  position: relative;
-  width: 50px;
-  height: 26px;
-}
-.toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--border);
-  transition: 0.4s;
-  border-radius: 26px;
-}
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 4px;
-  bottom: 4px;
-  background: white;
-  transition: 0.4s;
-  border-radius: 50%;
-}
-input:checked + .slider {
-  background: var(--primary);
-}
-input:checked + .slider:before {
-  transform: translateX(24px);
-}
-/* ============ Section Management ============ */
-.section {
-  display: none;
-  opacity: 0;
-  transform: translateY(20px);
-  transition: opacity 0.3s, transform 0.3s;
-}
-.section.active {
-  display: block;
-  opacity: 1;
-  transform: translateY(0);
-}
-/* ============ Flashcards Section ============ */
-.category-tabs {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 30px;
-  padding: 20px;
-  background: var(--bg-primary);
-  border-radius: 16px;
-  box-shadow: var(--shadow-sm);
-}
-.category-tab {
-  padding: 10px 20px;
-  background: var(--bg-tertiary);
-  border: 2px solid transparent;
-  border-radius: 10px;
-  cursor: pointer;
-  font-weight: 600;
-  color: var(--text-primary);
-  transition: var(--transition);
-  position: relative;
-}
-.category-tab:hover {
-  transform: translateY(-2px);
-  border-color: var(--primary);
-}
-.category-tab.active {
-  background: var(--primary);
-  color: white;
-  box-shadow: var(--shadow-md);
-}
-/* Progress indicator */
-.progress-container {
-  margin-bottom: 25px;
-  background: var(--bg-primary);
-  padding: 20px;
-  border-radius: 16px;
-  box-shadow: var(--shadow-sm);
-}
-.progress {
-  height: 8px;
-  background: var(--bg-tertiary);
-  border-radius: 10px;
-  overflow: hidden;
-  margin-bottom: 15px;
-}
-.progress-bar {
-  height: 100%;
-  background: var(--gradient);
-  border-radius: 10px;
-  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-}
-.progress-bar::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.3),
-    transparent
-  );
-  animation: shimmer 2s infinite;
-}
-@keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}
-.card-counter {
-  text-align: center;
-  font-weight: 600;
-  font-size: 1.1rem;
-  color: var(--text-secondary);
-}
-/* Flashcard styles */
-.flashcard-container {
-  perspective: 1000px;
-  height: 400px;
-  margin-bottom: 30px;
-}
-.flashcard {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  transform-style: preserve-3d;
-  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.flashcard.flipped {
-  transform: rotateY(180deg);
-}
-.flashcard-front,
-.flashcard-back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  border-radius: 20px;
-  box-shadow: var(--shadow-xl);
-  text-align: center;
-}
-.flashcard-front {
-  background: var(--bg-primary);
-  border: 3px solid var(--border);
-  color: var(--text-primary);
-}
-.flashcard-front p {
-  font-size: 1.5rem;
-  font-weight: 700;
-  line-height: 1.4;
-  color: var(--text-primary);
-}
-.flashcard-back {
-  background: var(--gradient);
-  color: white;
-  transform: rotateY(180deg);
-}
-.flashcard-back p {
-  font-size: 1.2rem;
-  line-height: 1.6;
-  font-weight: 500;
-}
-/* Controls */
-.controls {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 15px;
-  margin: 20px 0;
-}
-button {
-  padding: 12px 28px;
-  border: none;
-  background: var(--primary);
-  color: white;
-  border-radius: 10px;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 1rem;
-  transition: var(--transition);
-  box-shadow: var(--shadow-md);
-  position: relative;
-  overflow: hidden;
-}
-button::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
-}
-button:hover {
-  background: var(--primary-dark);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg);
-}
-button:hover::before {
-  width: 300px;
-  height: 300px;
-}
-button:active {
-  transform: translateY(0);
-}
-button:disabled {
-  background: var(--text-secondary);
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
-  opacity: 0.6;
-}
-/* ============ Playground Section ============ */
-.play-task {
-  margin-bottom: 30px;
-  padding: 30px;
-  background: var(--bg-primary);
-  border-radius: 20px;
-  box-shadow: var(--shadow-lg);
-  border: 1px solid var(--border);
-}
-.play-task h3 {
-  font-size: 1.4rem;
-  margin-bottom: 15px;
-  color: var(--primary);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.task-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 12px;
-  background: var(--bg-tertiary);
-  border-radius: 20px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-.play-task p {
-  margin-bottom: 20px;
-  color: var(--text-secondary);
-  line-height: 1.6;
-}
-.play-task code {
-  background: var(--bg-tertiary);
-  padding: 2px 8px;
-  border-radius: 6px;
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 0.95rem;
-  color: var(--primary);
-}
-.code-editor {
-  position: relative;
-  margin-bottom: 20px;
-}
-.code-editor textarea {
-  width: 100%;
-  min-height: 200px;
-  padding: 20px;
-  border: 2px solid var(--border);
-  border-radius: 12px;
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 14px;
-  line-height: 1.5;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  resize: vertical;
-  transition: var(--transition);
-}
-.code-editor textarea:focus {
-  outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
-}
-body.dark-mode .code-editor textarea {
-  background: var(--bg-tertiary);
-}
-.play-output {
-  margin-top: 20px;
-  padding: 15px 20px;
-  border-radius: 10px;
-  font-family: monospace;
-  font-size: 1rem;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  transition: var(--transition);
-}
-.play-success {
-  background: rgba(16, 185, 129, 0.1);
-  color: var(--success);
-  border: 2px solid var(--success);
-}
-.play-error {
-  background: rgba(239, 68, 68, 0.1);
-  color: var(--error);
-  border: 2px solid var(--error);
-}
-/* ============ Test Section ============ */
-.quiz-card {
-  background: var(--bg-primary);
-  padding: 35px;
-  border-radius: 20px;
-  box-shadow: var(--shadow-lg);
-  border: 1px solid var(--border);
-  margin-bottom: 30px;
-}
-.quiz-card h3 {
-  font-size: 1.5rem;
-  margin-bottom: 20px;
-  color: var(--primary);
-}
-.quiz-card p {
-  font-size: 1.1rem;
-  margin-bottom: 25px;
-  line-height: 1.6;
-  color: var(--text-primary);
-}
-.quiz-option {
-  display: block;
-  margin: 10px 0;
-  padding: 15px 20px;
-  border: 2px solid var(--border);
-  border-radius: 12px;
-  cursor: pointer;
-  transition: var(--transition);
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-weight: 500;
-}
-.quiz-option:hover {
-  border-color: var(--primary);
-  transform: translateX(5px);
-  box-shadow: var(--shadow-md);
-}
-.quiz-option.selected {
-  background: var(--primary);
-  color: white;
-  border-color: var(--primary);
-  box-shadow: var(--shadow-lg);
-}
-.quiz-score {
-  font-size: 2rem;
-  font-weight: 700;
-  text-align: center;
-  margin-top: 30px;
-  background: var(--gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-/* ============ Help Section ============ */
-.help-button {
-  position: fixed;
-  bottom: 30px;
-  right: 30px;
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background: var(--gradient);
-  color: white;
-  border: none;
-  cursor: pointer;
-  box-shadow: var(--shadow-xl);
-  font-size: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition);
-  z-index: 1000;
-}
-.help-button:hover {
-  transform: scale(1.1);
-}
-.help-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  z-index: 2000;
-  backdrop-filter: blur(5px);
-}
-.help-modal.active {
-  display: flex;
-}
-.help-content {
-  background: var(--bg-primary);
-  padding: 40px;
-  border-radius: 20px;
-  max-width: 600px;
-  max-height: 80vh;
-  overflow-y: auto;
-  box-shadow: var(--shadow-xl);
-  position: relative;
-  animation: modalSlideIn 0.3s ease;
-}
-@keyframes modalSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-50px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.help-content h2 {
-  margin-bottom: 20px;
-  color: var(--primary);
-}
-.help-content h3 {
-  margin-top: 20px;
-  margin-bottom: 10px;
-  color: var(--primary);
-}
-.help-content p {
-  margin-bottom: 15px;
-  line-height: 1.6;
-  color: var(--text-primary);
-}
-.close-help {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: var(--text-secondary);
-  padding: 5px;
-}
-/* ============ Footer ============ */
-footer {
-  text-align: center;
-  margin-top: 60px;
-  padding: 30px;
-  background: var(--bg-primary);
-  border-radius: 20px;
-  box-shadow: var(--shadow-md);
-}
-footer p {
-  color: var(--text-secondary);
-  font-size: 1rem;
-}
-footer a {
-  color: var(--primary);
-  text-decoration: none;
-  font-weight: 600;
-  transition: var(--transition);
-}
-footer a:hover {
-  text-decoration: underline;
-}
-/* ============ Responsive Design ============ */
-@media (max-width: 768px) {
-  h1 {
-    font-size: 2rem;
-  }
-  .main-tabs {
-    padding: 15px;
-  }
-  .flashcard-container {
-    height: 350px;
-  }
-  .flashcard-front p {
-    font-size: 1.2rem;
-  }
-  .flashcard-back p {
-    font-size: 1rem;
-  }
-  .play-task {
-    padding: 20px;
-  }
-  .quiz-card {
-    padding: 25px;
-  }
-  .help-content {
-    padding: 30px;
-    margin: 20px;
-  }
-}
-/* ============ Loading Animation ============ */
-.loading {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 3px solid var(--border);
-  border-radius: 50%;
-  border-top-color: var(--primary);
-  animation: spin 1s ease-in-out infinite;
-}
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-/* ============ Tooltips ============ */
-.tooltip {
-  position: relative;
-  display: inline-block;
-  cursor: help;
-  color: var(--text-secondary);
-}
-.tooltip .tooltiptext {
-  visibility: hidden;
-  width: 200px;
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-  text-align: center;
-  border-radius: 8px;
-  padding: 10px;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%;
-  left: 50%;
-  margin-left: -100px;
-  opacity: 0;
-  transition: opacity 0.3s;
-  box-shadow: var(--shadow-lg);
-  font-size: 0.9rem;
-  border: 1px solid var(--border);
-}
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
-</style>
 </head>
 <body>
-<div class="container">
-  <!-- Header Section -->
-  <header>
-    <h1>AI Basics Learning Hub</h1>
-    <p class="subtitle">Master AI fundamentals through interactive flashcards, hands-on coding, and comprehensive testing</p>
-  </header>
-  <!-- Navigation -->
-  <nav class="main-tabs">
-    <button class="main-tab active" data-section="flashcards">📚 Flashcards</button>
-    <button class="main-tab" data-section="playground">💻 Playground</button>
-    <button class="main-tab" data-section="test">📝 Test</button>
-    <label class="dark-toggle">
-      <span>🌙 Dark Mode</span>
-      <div class="toggle-switch">
-        <input type="checkbox" id="darkToggle"/>
-        <span class="slider"></span>
-      </div>
-    </label>
-  </nav>
-  <!-- Flashcards Section -->
-  <section id="flashcards" class="section active">
-    <div class="category-tabs">
-      <div class="category-tab active" data-category="core">Core Concepts</div>
-      <div class="category-tab" data-category="terms">Key Terms</div>
-      <div class="category-tab" data-category="applications">AI Applications</div>
-      <div class="category-tab" data-category="ethics">Ethics & Challenges</div>
-    </div>
-    <div class="progress-container">
-      <div class="progress">
-        <div class="progress-bar" style="width: 0%"></div>
-      </div>
-      <div class="card-counter">Card 1 of 10</div>
-    </div>
-    <div class="flashcard-container">
-      <div class="flashcard">
-        <div class="flashcard-front">
-          <p></p>
         </div>
-        <div class="flashcard-back">
-          <p></p>
         </div>
-      </div>
-    </div>
-    <div class="controls">
-      <button id="prev" disabled>← Previous</button>
-      <button id="flip">🔄 Flip Card</button>
-      <button id="next">Next →</button>
-      <button id="shuffle">🔀 Shuffle</button>
-    </div>
-  </section>
-  <!-- Playground Section -->
-  <section id="playground" class="section"></section>
-  <!-- Test Section -->
-  <section id="test" class="section"></section>
-  <!-- Footer -->
-  <footer>
-    <p>🚀 Enhance your AI knowledge • Created with ❤️ • More resources at <a href="https://huggingface.co/ProCreations" target="_blank">ProCreations on Hugging Face</a></p>
-  </footer>
-</div>
-<!-- Help Button & Modal -->
-<button class="help-button" onclick="toggleHelp()">?</button>
-<div class="help-modal" id="helpModal" onclick="closeHelpOnClick(event)">
-  <div class="help-content">
-    <button class="close-help" onclick="toggleHelp()">✕</button>
-    <h2>📖 How to Use This Learning Hub</h2>
-    <h3>📚 Flashcards</h3>
-    <p>Study AI concepts with interactive flashcards. Click on a card or use the "Flip" button to reveal the answer. Navigate through cards using Previous/Next buttons, and shuffle for random practice.</p>
-    <h3>💻 Playground</h3>
-    <p>Practice coding with AI-related exercises. Write your solution in the code editor and click "Run" to test it. Each task includes clear instructions and automatic validation.</p>
-    <h3>📝 Test</h3>
-    <p>Assess your knowledge with multiple-choice questions. Select your answer and submit to move to the next question. Your score is displayed at the end.</p>
-    <h3>🌙 Dark Mode</h3>
-    <p>Toggle dark mode for comfortable studying in low-light environments. Your preference is saved automatically.</p>
-    <h3>💡 Tips</h3>
-    <p>• Review flashcards regularly for better retention<br>
-    • Try solving playground tasks without looking at solutions<br>
-    • Take the test multiple times to track your progress<br>
-    • Use keyboard shortcuts: Space to flip cards, arrow keys to navigate</p>
-  </div>
-</div>
-<script>
-/**
- * AI Basics Learning Hub - Enhanced Version
- * Interactive learning platform for AI fundamentals
- * Features: Flashcards, Coding Playground, Quiz System
- */
-// ==================== Flashcards Data ====================
-const flashcards = {
-  core: [
-    {q: "What is Artificial Intelligence (AI)?", a: "A field of computer science focused on creating systems that perform tasks that typically require human intelligence."},
-    {q: "What's the difference between Narrow AI and General AI?", a: "Narrow AI is specialised for specific tasks (like chess or image recognition), while General AI would match human intelligence broadly across all domains."},
-    {q: "What is Machine Learning?", a: "A subset of AI where systems learn patterns from data rather than following explicit programming instructions."},
-    {q: "What is Deep Learning?", a: "A subset of ML using multi-layer neural networks to learn hierarchical representations of data automatically."},
-    {q: "What are Neural Networks?", a: "Collections of interconnected nodes (neurons) inspired by biological brains that learn to recognize patterns through training."},
-    {q: "What is Gradient Descent?", a: "An optimization algorithm that iteratively adjusts model parameters to minimize a loss function by following the steepest descent."},
-    {q: "What is a Loss Function?", a: "A mathematical function that measures how far a model's predictions deviate from the actual target values."},
-    {q: "What is Backpropagation?", a: "An algorithm that efficiently computes gradients of the loss with respect to each weight in a neural network using the chain rule."},
-    {q: "What is a Dataset?", a: "A structured collection of data examples used to train, validate, or test machine learning models."},
-    {q: "What is Feature Engineering?", a: "The process of selecting, transforming, and creating input variables to improve model performance."}
-  ],
-  terms: [
-    {q: "What is Supervised Learning?", a: "Learning from labeled data where the model learns to map inputs to known outputs (e.g., classification, regression)."},
-    {q: "What is Unsupervised Learning?", a: "Finding hidden patterns in unlabeled data without predefined outputs (e.g., clustering, dimensionality reduction)."},
-    {q: "What is Reinforcement Learning?", a: "Learning through interaction with an environment, receiving rewards or penalties for actions taken."},
-    {q: "What are Training, Validation, and Test Sets?", a: "Data splits: Training for learning patterns, Validation for tuning hyperparameters, Test for final unbiased evaluation."},
-    {q: "What is Overfitting?", a: "When a model memorizes training data too well, performing poorly on new, unseen data due to high variance."},
-    {q: "What is Underfitting?", a: "When a model is too simple to capture underlying patterns, resulting in poor performance due to high bias."},
-    {q: "What is Regularization?", a: "Techniques that constrain model complexity to prevent overfitting (e.g., L1/L2 penalties, dropout, early stopping)."},
-    {q: "What is a Hyperparameter?", a: "Configuration values set before training that control the learning process (e.g., learning rate, batch size)."},
-    {q: "What is a Confusion Matrix?", a: "A table showing classification results: true positives, true negatives, false positives, and false negatives."},
-    {q: "What are Precision and Recall?", a: "Classification metrics: Precision = TP/(TP+FP) measures accuracy of positive predictions; Recall = TP/(TP+FN) measures coverage of actual positives."}
-  ],
-  applications: [
-    {q: "What is Natural Language Processing (NLP)?", a: "AI techniques for understanding, interpreting, and generating human language in text or speech form."},
-    {q: "What is Computer Vision?", a: "AI field that enables computers to derive meaningful information from visual inputs like images and videos."},
-    {q: "What are Large Language Models (LLMs)?", a: "Massive neural networks trained on vast text data to understand and generate human-like text (e.g., GPT, Claude)."},
-    {q: "What are Generative AI systems?", a: "Models that create new content (text, images, audio, video) by learning patterns from training data."},
-    {q: "What is Transfer Learning?", a: "Reusing a pre-trained model's learned features as a starting point for a related task, saving time and data."},
-    {q: "What is Speech Recognition?", a: "Converting spoken language into text using AI models trained on audio-text pairs."},
-    {q: "What is Robotics?", a: "Field combining AI, sensors, and mechanical systems to create machines that can perceive and act autonomously."},
-    {q: "What is a Recommendation System?", a: "Algorithms that predict user preferences and suggest relevant items based on past behavior and similarities."},
-    {q: "What is Autonomous Driving?", a: "Using AI for perception, planning, and control to enable vehicles to navigate without human input."},
-    {q: "What is Fraud Detection?", a: "AI systems that identify unusual patterns or anomalies in transactions to prevent fraudulent activities."}
-  ],
-  ethics: [
-    {q: "What is Bias in AI?", a: "Systematic errors or unfair prejudices in AI systems arising from biased training data or algorithm design."},
-    {q: "What is Explainable AI (XAI)?", a: "Making AI decision-making processes transparent and understandable to humans for trust and accountability."},
-    {q: "What is the AI Alignment Problem?", a: "The challenge of ensuring AI systems pursue goals that align with human values and intentions."},
-    {q: "What are AI Hallucinations?", a: "When AI models generate plausible-sounding but factually incorrect or nonsensical information."},
-    {q: "What is Prompt Engineering?", a: "The art of crafting effective inputs to guide AI models toward desired outputs and behaviors."},
-    {q: "What is Data Privacy in AI?", a: "Protecting personal information used in AI systems through techniques like anonymization and secure processing."},
-    {q: "What is Fairness in AI?", a: "Ensuring AI systems don't discriminate against individuals or groups based on protected characteristics."},
-    {q: "What are Deepfakes?", a: "AI-generated synthetic media where a person's likeness is convincingly replaced or manipulated in images/videos."},
-    {q: "What is AI Governance?", a: "Frameworks, policies, and regulations for responsible development and deployment of AI systems."},
-    {q: "What is Model Transparency?", a: "The degree to which an AI model's inner workings and decision processes can be understood and audited."}
-  ]
-};
-// ==================== DOM Elements ====================
-const categoryTabs = document.querySelectorAll('.category-tab');
-const flashcardEl = document.querySelector('.flashcard');
-const frontEl = document.querySelector('.flashcard-front p');
-const backEl = document.querySelector('.flashcard-back p');
-const prevBtn = document.getElementById('prev');
-const nextBtn = document.getElementById('next');
-const flipBtn = document.getElementById('flip');
-const shuffleBtn = document.getElementById('shuffle');
-const progressBar = document.querySelector('.progress-bar');
-const cardCounter = document.querySelector('.card-counter');
-// ==================== State Management ====================
-let currentCategory = 'core';
-let currentCardIndex = 0;
-let isFlipped = false;
-// Load saved progress
-function loadSavedProgress() {
-  const saved = localStorage.getItem(`${currentCategory}-index`);
-  if (saved !== null) {
-    currentCardIndex = Math.min(parseInt(saved), flashcards[currentCategory].length - 1);
-  }
-}
-// ==================== Flashcard Functions ====================
-function updateCard() {
-  const cards = flashcards[currentCategory];
-  const card = cards[currentCardIndex];
-  // Update card content
-  frontEl.textContent = card.q;
-  backEl.textContent = card.a;
-  // Update progress
-  const progress = ((currentCardIndex + 1) / cards.length) * 100;
-  progressBar.style.width = `${progress}%`;
-  cardCounter.textContent = `Card ${currentCardIndex + 1} of ${cards.length}`;
-  // Update button states
-  prevBtn.disabled = currentCardIndex === 0;
-  nextBtn.disabled = currentCardIndex === cards.length - 1;
-  // Save progress
-  localStorage.setItem(`${currentCategory}-index`, currentCardIndex);
-}
-function toggleFlip() {
-  isFlipped = !isFlipped;
-  flashcardEl.classList.toggle('flipped');
-}
-function prevCard() {
-  if (currentCardIndex > 0) {
-    currentCardIndex--;
-    resetCard();
-  }
-}
-function nextCard() {
-  if (currentCardIndex < flashcards[currentCategory].length - 1) {
-    currentCardIndex++;
-    resetCard();
-  }
-}
-function shuffleCards() {
-  flashcards[currentCategory] = flashcards[currentCategory].sort(() => Math.random() - 0.5);
-  currentCardIndex = 0;
-  resetCard();
-}
-function resetCard() {
-  isFlipped = false;
-  flashcardEl.classList.remove('flipped');
-  updateCard();
-}
-// ==================== Event Listeners ====================
-flashcardEl.addEventListener('click', toggleFlip);
-flipBtn.addEventListener('click', toggleFlip);
-prevBtn.addEventListener('click', prevCard);
-nextBtn.addEventListener('click', nextCard);
-shuffleBtn.addEventListener('click', shuffleCards);
-// Category switching
-categoryTabs.forEach(tab => {
-  tab.addEventListener('click', () => {
-    categoryTabs.forEach(t => t.classList.remove('active'));
-    tab.classList.add('active');
-    currentCategory = tab.dataset.category;
-    currentCardIndex = 0;
-    isFlipped = false;
-    flashcardEl.classList.remove('flipped');
-    loadSavedProgress();
-    updateCard();
-  });
-});
-// Keyboard navigation
-document.addEventListener('keydown', (e) => {
-  if (document.getElementById('flashcards').classList.contains('active')) {
-    switch(e.key) {
-      case ' ':
-        e.preventDefault();
-        toggleFlip();
-        break;
-      case 'ArrowLeft':
-        prevCard();
-        break;
-      case 'ArrowRight':
-        nextCard();
-        break;
-    }
-  }
-});
-// ==================== Dark Mode ====================
-const darkToggle = document.getElementById('darkToggle');
-darkToggle.addEventListener('change', (e) => {
-  document.body.classList.toggle('dark-mode', e.target.checked);
-  localStorage.setItem('dark-mode', e.target.checked);
-});
-// Load dark mode preference
-if (localStorage.getItem('dark-mode') === 'true') {
-  darkToggle.checked = true;
-  document.body.classList.add('dark-mode');
-}
-// ==================== Navigation ====================
-const mainTabs = document.querySelectorAll('.main-tab');
-mainTabs.forEach(btn => {
-  btn.addEventListener('click', () => {
-    mainTabs.forEach(b => b.classList.remove('active'));
-    btn.classList.add('active');
-    document.querySelectorAll('.section').forEach(s => {
-      s.classList.remove('active');
-    });
-    const targetSection = document.getElementById(btn.dataset.section);
-    setTimeout(() => {
-      targetSection.classList.add('active');
-    }, 10);
-  });
-});
-// ==================== Playground Section ====================
-const playgroundSection = document.getElementById('playground');
-const tasks = [
-  {
-    title: 'Sum of Two Numbers',
-    desc: 'Write a function <code>add(a, b)</code> that returns the sum of two numbers.',
-    hint: 'Use the + operator to add the numbers',
-    test: code => {
-      try {
-        const func = new Function(code + '; return add(2, 3);');
-        return func() === 5;
-      } catch (e) {
-        throw e;
-      }
-    }
-  },
-  {
-    title: 'Even Number Checker',
-    desc: 'Write a function <code>isEven(n)</code> that returns <code>true</code> if a number is even, <code>false</code> otherwise.',
-    hint: 'Use the modulo operator (%) to check divisibility by 2',
-    test: code => {
-      try {
-        const func = new Function(code + '; return isEven(4) && !isEven(5) && isEven(0);');
-        return func();
-      } catch (e) {
-        throw e;
-      }
-    }
-  },
-  {
-    title: 'String Reversal',
-    desc: 'Write a function <code>reverseString(s)</code> that returns the reversed version of a string.',
-    hint: 'You can split the string into an array, reverse it, and join it back',
-    test: code => {
-      try {
-        const func = new Function(code + '; return reverseString("hello") === "olleh" && reverseString("AI") === "IA";');
-        return func();
-      } catch (e) {
-        throw e;
-      }
-    }
-  },
-  {
-    title: 'Find Maximum in Array',
-    desc: 'Write a function <code>maxArray(arr)</code> that returns the largest number in an array.',
-    hint: 'Use Math.max() with the spread operator or iterate through the array',
-    test: code => {
-      try {
-        const func = new Function(code + '; return maxArray([1, 8, 3, 7]) === 8 && maxArray([-5, -1, -10]) === -1;');
-        return func();
-      } catch (e) {
-        throw e;
-      }
-    }
-  },
-  {
-    title: 'Factorial Calculator',
-    desc: 'Write a function <code>factorial(n)</code> that returns the factorial of n (n!).',
-    hint: 'Remember: 5! = 5 × 4 × 3 × 2 × 1 = 120',
-    test: code => {
-      try {
-        const func = new Function(code + '; return factorial(5) === 120 && factorial(0) === 1 && factorial(3) === 6;');
-        return func();
-      } catch (e) {
-        throw e;
-      }
-    }
-  }
-];
-let taskIndex = 0;
-function renderTask() {
-  const task = tasks[taskIndex];
-  playgroundSection.innerHTML = `
-    <div class="play-task">
-      <h3>
-        <span class="task-badge">Task ${taskIndex + 1}/${tasks.length}</span>
-        ${task.title}
-      </h3>
-      <p>${task.desc}</p>
-      <div class="tooltip">
-        💡 <span class="tooltiptext">${task.hint}</span>
-      </div>
-      <div class="code-editor">
-        <textarea id="codeArea" spellcheck="false" placeholder="// Write your solution here
-function functionName(parameters) {
-  // Your code
-}"></textarea>
-      </div>
-      <button id="runCode">▶ Run Code</button>
-      <div id="output" class="play-output" style="display: none;"></div>
-      <div class="controls" style="margin-top: 20px;">
-        <button id="prevTask" ${taskIndex === 0 ? 'disabled' : ''}>← Previous</button>
-        <button id="nextTask" ${taskIndex === tasks.length - 1 ? 'disabled' : ''}>Next →</button>
-      </div>
-    </div>
-  `;
-  // Add event listeners
-  document.getElementById('runCode').onclick = runCode;
-  document.getElementById('prevTask').onclick = () => {
-    taskIndex--;
-    renderTask();
-  };
-  document.getElementById('nextTask').onclick = () => {
-    taskIndex++;
-    renderTask();
-  };
-  // Load saved code if exists
-  const savedCode = localStorage.getItem(`task-${taskIndex}-code`);
-  if (savedCode) {
-    document.getElementById('codeArea').value = savedCode;
-  }
-}
-function runCode() {
-  const code = document.getElementById('codeArea').value;
-  const output = document.getElementById('output');
-  const task = tasks[taskIndex];
-  // Save code
-  localStorage.setItem(`task-${taskIndex}-code`, code);
-  try {
-    const passed = task.test(code);
-    output.textContent = passed ? '✅ Excellent! All tests passed!' : '❌ Not quite right. Check your solution and try again.';
-    output.className = 'play-output ' + (passed ? 'play-success' : 'play-error');
-    output.style.display = 'block';
-    // Mark task as completed if passed
-    if (passed) {
-      localStorage.setItem(`task-${taskIndex}-completed`, 'true');
-    }
-  } catch (err) {
-    output.textContent = `⚠️ Error: ${err.message}`;
-    output.className = 'play-output play-error';
-    output.style.display = 'block';
-  }
-}
-// ==================== Test Section ====================
-const testSection = document.getElementById('test');
-const quizQuestions = [
-  {
-    q: 'Which algorithm is commonly used to minimize a loss function in neural networks?',
-    opts: ['K-means clustering', 'Gradient Descent', 'Apriori algorithm', 'Breadth-first search'],
-    ans: 1,
-    explanation: 'Gradient Descent iteratively adjusts parameters to minimize the loss function.'
-  },
-  {
-    q: 'Overfitting is primarily an example of which type of error?',
-    opts: ['High bias', 'High variance', 'Syntax error', 'Runtime error'],
-    ans: 1,
-    explanation: 'Overfitting occurs when a model has high variance, fitting too closely to training data.'
-  },
-  {
-    q: 'Which field of AI focuses on understanding and processing images?',
-    opts: ['Natural Language Processing', 'Speech Recognition', 'Computer Vision', 'Game Theory'],
-    ans: 2,
-    explanation: 'Computer Vision deals with extracting information from visual inputs.'
-  },
-  {
-    q: 'In classification metrics, which metric is calculated as TP/(TP+FP)?',
-    opts: ['Recall', 'Accuracy', 'F1-Score', 'Precision'],
-    ans: 3,
-    explanation: 'Precision measures the accuracy of positive predictions.'
-  },
-  {
-    q: 'What does XAI stand for in the context of AI?',
-    opts: ['eXternal AI', 'Explainable AI', 'Extreme AI', 'Experimental AI'],
-    ans: 1,
-    explanation: 'Explainable AI focuses on making AI decisions transparent and understandable.'
-  },
-  {
-    q: 'Transfer learning is particularly useful when:',
-    opts: ['Data is abundant', 'Training from scratch is costly', 'Models are tiny', 'Labels are perfect'],
-    ans: 1,
-    explanation: 'Transfer learning saves time and resources by reusing pre-trained models.'
-  },
-  {
-    q: 'The AI alignment problem primarily concerns:',
-    opts: ['Model efficiency', 'Matching AI goals with human values', 'Hardware scaling', 'Syntax errors'],
-    ans: 1,
-    explanation: 'AI alignment ensures AI systems pursue goals aligned with human values.'
-  },
-  {
-    q: 'Which learning paradigm uses rewards and penalties?',
-    opts: ['Supervised Learning', 'Unsupervised Learning', 'Reinforcement Learning', 'Self-supervised Learning'],
-    ans: 2,
-    explanation: 'Reinforcement Learning uses rewards and penalties to guide learning.'
-  },
-  {
-    q: 'Bias in AI systems often originates from:',
-    opts: ['Noisy sensors', 'Biased training data', 'GPU memory limitations', 'Slow CPUs'],
-    ans: 1,
-    explanation: 'Biased training data is a primary source of bias in AI systems.'
-  },
-  {
-    q: 'In the context of AI, LLM stands for:',
-    opts: ['Large Logic Model', 'Long-Lived Model', 'Large Language Model', 'Layered Learning Method'],
-    ans: 2,
-    explanation: 'Large Language Models are trained on vast text data for language tasks.'
-  }
-];
-let quizIndex = 0;
-let score = 0;
-function renderQuiz() {
-  if (quizIndex >= quizQuestions.length) {
-    testSection.innerHTML = `
-      <div class="quiz-card">
-        <h3>🎉 Test Complete!</h3>
-        <p class="quiz-score">You scored ${score} out of ${quizQuestions.length}</p>
-        <p style="text-align: center; margin-top: 20px;">
-          ${score >= 8 ? '🌟 Excellent work!' : score >= 6 ? '👍 Good job!' : '📚 Keep studying!'}
-        </p>
-        <div style="text-align: center; margin-top: 30px;">
-          <button onclick="restartQuiz()">🔄 Retake Test</button>
         </div>
-      </div>
-    `;
-    return;
-  }
-  const q = quizQuestions[quizIndex];
-  let optionsHTML = '';
-  q.opts.forEach((opt, i) => {
-    optionsHTML += `
-      <label class="quiz-option">
-        <input type="radio" name="opt" value="${i}" style="display: none;">
-        ${opt}
-      </label>
-    `;
-  });
-  testSection.innerHTML = `
-    <div class="quiz-card">
-      <h3>Question ${quizIndex + 1} of ${quizQuestions.length}</h3>
-      <p>${q.q}</p>
-      ${optionsHTML}
-      <div style="text-align: center; margin-top: 25px;">
-        <button id="submitAns">Submit Answer</button>
-      </div>
     </div>
-  `;
-  // Add event listeners
-  document.querySelectorAll('.quiz-option').forEach(label => {
-    label.addEventListener('click', () => {
-      document.querySelectorAll('.quiz-option').forEach(o => o.classList.remove('selected'));
-      label.classList.add('selected');
-      label.querySelector('input').checked = true;
-    });
-  });
-  document.getElementById('submitAns').onclick = () => {
-    const selected = document.querySelector('input[name="opt"]:checked');
-    if (!selected) {
-      alert('Please select an answer!');
-      return;
-    }
-    const answer = parseInt(selected.value);
-    if (answer === q.ans) {
-      score++;
-    }
-    quizIndex++;
-    renderQuiz();
-  };
-}
-function restartQuiz() {
-  quizIndex = 0;
-  score = 0;
-  renderQuiz();
-}
-// ==================== Help System ====================
-function toggleHelp() {
-  document.getElementById('helpModal').classList.toggle('active');
-}
-function closeHelpOnClick(event) {
-  if (event.target.id === 'helpModal') {
-    toggleHelp();
-  }
-}
-// ==================== Initialize ====================
-loadSavedProgress();
-updateCard();
-renderTask();
-renderQuiz();
-// Add smooth section transitions
-document.addEventListener('DOMContentLoaded', () => {
-  const activeSection = document.querySelector('.section.active');
-  if (activeSection) {
-    setTimeout(() => {
-      activeSection.style.opacity = '1';
-      activeSection.style.transform = 'translateY(0)';
-    }, 100);
-  }
-});
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Explainer: How Neural Networks Work</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #0a0a0a;
+            color: #e0e0e0;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        header {
+            text-align: center;
+            padding: 40px 20px;
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+            margin-bottom: 40px;
+            border-radius: 20px;
+        }
+        h1 {
+            font-size: clamp(2rem, 5vw, 3rem);
+            margin-bottom: 10px;
+            background: linear-gradient(135deg, #fff 0%, #a8dadc 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .mode-toggle {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin: 30px 0;
+            flex-wrap: wrap;
+        }
+        .mode-btn {
+            padding: 12px 30px;
+            background: #2a5298;
+            color: white;
+            border: none;
+            border-radius: 50px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-weight: 600;
+        }
+        .mode-btn.active {
+            background: #4CAF50;
+            transform: scale(1.05);
+        }
+        .mode-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
+        }
+        .section {
+            background: #1a1a1a;
+            padding: 30px;
+            margin-bottom: 30px;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+        }
+        .section h2 {
+            color: #4CAF50;
+            margin-bottom: 20px;
+            font-size: clamp(1.5rem, 4vw, 2rem);
+        }
+        .section h3 {
+            color: #81C784;
+            margin: 20px 0 10px 0;
+            font-size: clamp(1.2rem, 3vw, 1.5rem);
+        }
+        .math-content {
+            background: #0d0d0d;
+            padding: 20px;
+            border-radius: 10px;
+            overflow-x: auto;
+            margin: 15px 0;
+            border: 1px solid #333;
+        }
+        .learn-content {
+            background: #1e3c72;
+            padding: 20px;
+            border-radius: 10px;
+            margin: 15px 0;
+            line-height: 1.8;
+        }
+        #xor-demo {
+            background: #0d0d0d;
+            padding: 20px;
+            border-radius: 15px;
+            margin: 20px 0;
+        }
+        #network-canvas {
+            width: 100%;
+            max-width: 800px;
+            height: 400px;
+            background: #000;
+            border-radius: 10px;
+            margin: 20px auto;
+            display: block;
+        }
+        .controls {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin: 20px 0;
+        }
+        .control-btn {
+            padding: 10px 25px;
+            background: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+        .control-btn:hover {
+            background: #45a049;
+            transform: translateY(-2px);
+        }
+        .control-btn:disabled {
+            background: #666;
+            cursor: not-allowed;
+        }
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin: 20px 0;
+        }
+        .stat-box {
+            background: #1a1a1a;
+            padding: 15px;
+            border-radius: 10px;
+            text-align: center;
+            border: 1px solid #333;
+        }
+        .stat-label {
+            color: #888;
+            font-size: 14px;
+        }
+        .stat-value {
+            color: #4CAF50;
+            font-size: 24px;
+            font-weight: bold;
+            margin-top: 5px;
+        }
+        .loss-chart {
+            width: 100%;
+            height: 200px;
+            background: #000;
+            border-radius: 10px;
+            margin: 20px 0;
+        }
+        .formula {
+            font-family: 'Courier New', monospace;
+            color: #64B5F6;
+            padding: 10px;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 5px;
+            overflow-x: auto;
+            white-space: nowrap;
+            margin: 10px 0;
+        }
+        .highlight {
+            background: #4CAF50;
+            color: #000;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-weight: bold;
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+            .section {
+                padding: 20px;
+            }
+            #network-canvas {
+                height: 300px;
+            }
+            .controls {
+                gap: 10px;
+            }
+            .control-btn {
+                padding: 8px 20px;
+                font-size: 14px;
+            }
+        }
+        .mode-content {
+            display: none;
+        }
+        .mode-content.active {
+            display: block;
+        }
+        .animated-number {
+            transition: all 0.3s ease;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .pulse {
+            animation: pulse 0.5s ease;
+        }
+    </style>
 </head>
 <body>
+    <div class="container">
+        <header>
+            <h1>🧠 How AI Really Works</h1>
+            <p>An Interactive Journey Inside Neural Networks</p>
+        </header>
+        <div class="mode-toggle">
+            <button class="mode-btn active" onclick="setMode('learn')">🎓 Learn Mode</button>
+            <button class="mode-btn" onclick="setMode('math')">🔢 Math Mode</button>
         </div>
+        <div class="section">
+            <h2>What is a Neural Network?</h2>
+            <div class="mode-content learn-mode active">
+                <div class="learn-content">
+                    <p>Imagine your brain is made of billions of tiny decision-makers called neurons. Each neuron:</p>
+                    <ul style="margin: 15px 0; padding-left: 30px;">
+                        <li>🎯 Takes in information (inputs)</li>
+                        <li>🤔 Thinks about it (processing)</li>
+                        <li>💡 Makes a decision (output)</li>
+                    </ul>
+                    <p>An AI neural network works the same way! It's like a simplified brain made of math. Let's see it in action!</p>
+                </div>
+            </div>
+            <div class="mode-content math-mode">
+                <div class="math-content">
+                    <p>A neural network is a function approximator that transforms inputs through layers of neurons:</p>
+                    <div class="formula">
+                        f(x) = σ(W₃ · σ(W₂ · σ(W₁ · x + b₁) + b₂) + b₃)
+                    </div>
+                    <p>Where:</p>
+                    <ul style="margin: 15px 0; padding-left: 30px;">
+                        <li>x = input vector</li>
+                        <li>Wᵢ = weight matrix for layer i</li>
+                        <li>bᵢ = bias vector for layer i</li>
+                        <li>σ = activation function (e.g., ReLU, sigmoid)</li>
+                    </ul>
+                </div>
+            </div>
         </div>
+        <div class="section">
+            <h2>🎮 Live XOR Training Demo</h2>
+            <p>Watch an AI learn the XOR problem in real-time! XOR outputs 1 when inputs are different, 0 when same.</p>
+            <div id="xor-demo">
+                <canvas id="network-canvas"></canvas>
+                <div class="controls">
+                    <button class="control-btn" onclick="startTraining()">▶️ Start Training</button>
+                    <button class="control-btn" onclick="pauseTraining()">⏸️ Pause</button>
+                    <button class="control-btn" onclick="resetNetwork()">🔄 Reset</button>
+                    <button class="control-btn" onclick="stepTraining()">⏭️ Step</button>
+                </div>
+                <div class="stats">
+                    <div class="stat-box">
+                        <div class="stat-label">Epoch</div>
+                        <div class="stat-value animated-number" id="epoch">0</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-label">Loss</div>
+                        <div class="stat-value animated-number" id="loss">1.000</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-label">Accuracy</div>
+                        <div class="stat-value animated-number" id="accuracy">0%</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-label">Learning Rate</div>
+                        <div class="stat-value" id="learning-rate">0.1</div>
+                    </div>
+                </div>
+                <canvas id="loss-chart" class="loss-chart"></canvas>
+            </div>
+        </div>
+        <div class="section">
+            <h2>How Does Learning Work?</h2>
+            <div class="mode-content learn-mode active">
+                <h3>🎯 Forward Pass: Making Predictions</h3>
+                <div class="learn-content">
+                    <p>The network makes a prediction by passing data forward through each layer:</p>
+                    <ol style="margin: 15px 0; padding-left: 30px;">
+                        <li><span class="highlight">Input</span>: Feed in the data (like 0,1 for XOR)</li>
+                        <li><span class="highlight">Multiply & Add</span>: Each connection has a "strength" (weight)</li>
+                        <li><span class="highlight">Activate</span>: Decide if the neuron should "fire"</li>
+                        <li><span class="highlight">Output</span>: Get the final prediction</li>
+                    </ol>
+                </div>
+                <h3>📉 Backward Pass: Learning from Mistakes</h3>
+                <div class="learn-content">
+                    <p>When the network is wrong, it learns by adjusting its connections:</p>
+                    <ol style="margin: 15px 0; padding-left: 30px;">
+                        <li><span class="highlight">Calculate Error</span>: How wrong was the prediction?</li>
+                        <li><span class="highlight">Blame Game</span>: Which connections caused the error?</li>
+                        <li><span class="highlight">Adjust Weights</span>: Make connections stronger or weaker</li>
+                        <li><span class="highlight">Repeat</span>: Try again with new weights!</li>
+                    </ol>
+                </div>
+            </div>
+            <div class="mode-content math-mode">
+                <h3>Forward Propagation</h3>
+                <div class="math-content">
+                    <p>For each layer l:</p>
+                    <div class="formula">
+                        z[l] = W[l] · a[l-1] + b[l]
+                    </div>
+                    <div class="formula">
+                        a[l] = σ(z[l])
+                    </div>
+                    <p>Where a[0] = x (input) and a[L] = ŷ (output)</p>
+                </div>
+                <h3>Backpropagation</h3>
+                <div class="math-content">
+                    <p>Loss function (Mean Squared Error):</p>
+                    <div class="formula">
+                        L = ½ Σ(y - ŷ)²
+                    </div>
+                    <p>Gradient computation:</p>
+                    <div class="formula">
+                        δ[L] = ∇ₐL ⊙ σ'(z[L])
+                    </div>
+                    <div class="formula">
+                        δ[l] = (W[l+1]ᵀ · δ[l+1]) ⊙ σ'(z[l])
+                    </div>
+                    <p>Weight update:</p>
+                    <div class="formula">
+                        W[l] = W[l] - α · δ[l] · a[l-1]ᵀ
+                    </div>
+                    <div class="formula">
+                        b[l] = b[l] - α · δ[l]
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="section">
+            <h2>Key Components Explained</h2>
+            <div class="mode-content learn-mode active">
+                <h3>🔗 Weights & Biases</h3>
+                <div class="learn-content">
+                    <p><span class="highlight">Weights</span> are like volume knobs - they control how much each input matters.</p>
+                    <p><span class="highlight">Biases</span> are like thresholds - they decide when a neuron should activate.</p>
+                </div>
+                <h3>⚡ Activation Functions</h3>
+                <div class="learn-content">
+                    <p>These decide if a neuron should "fire" or not:</p>
+                    <ul style="margin: 15px 0; padding-left: 30px;">
+                        <li><span class="highlight">ReLU</span>: If positive, pass it on. If negative, block it!</li>
+                        <li><span class="highlight">Sigmoid</span>: Squash everything between 0 and 1</li>
+                        <li><span class="highlight">Tanh</span>: Squash everything between -1 and 1</li>
+                    </ul>
+                </div>
+                <h3>🎯 Gradient Descent</h3>
+                <div class="learn-content">
+                    <p>Imagine you're blindfolded on a hill, trying to reach the bottom:</p>
+                    <ol style="margin: 15px 0; padding-left: 30px;">
+                        <li>Feel the slope around you (calculate gradient)</li>
+                        <li>Take a small step downhill (adjust weights)</li>
+                        <li>Repeat until you reach the bottom (minimum loss)</li>
+                    </ol>
+                </div>
+            </div>
+            <div class="mode-content math-mode">
+                <h3>Activation Functions</h3>
+                <div class="math-content">
+                    <p><strong>ReLU:</strong></p>
+                    <div class="formula">
+                        f(x) = max(0, x)
+                    </div>
+                    <div class="formula">
+                        f'(x) = {1 if x > 0, 0 if x ≤ 0}
+                    </div>
+                    <p><strong>Sigmoid:</strong></p>
+                    <div class="formula">
+                        σ(x) = 1 / (1 + e⁻ˣ)
+                    </div>
+                    <div class="formula">
+                        σ'(x) = σ(x) · (1 - σ(x))
+                    </div>
+                    <p><strong>Tanh:</strong></p>
+                    <div class="formula">
+                        tanh(x) = (eˣ - e⁻ˣ) / (eˣ + e⁻ˣ)
+                    </div>
+                    <div class="formula">
+                        tanh'(x) = 1 - tanh²(x)
+                    </div>
+                </div>
+                <h3>Gradient Descent Update Rule</h3>
+                <div class="math-content">
+                    <div class="formula">
+                        θₜ₊₁ = θₜ - α · ∇θ L(θₜ)
+                    </div>
+                    <p>Where:</p>
+                    <ul style="margin: 15px 0; padding-left: 30px;">
+                        <li>θ = parameters (weights and biases)</li>
+                        <li>α = learning rate</li>
+                        <li>∇θ L = gradient of loss with respect to parameters</li>
+                    </ul>
+                </div>
+            </div>
         </div>
     </div>
+    <script>
+        // Global variables
+        let mode = 'learn';
+        let network = null;
+        let training = false;
+        let epoch = 0;
+        let lossHistory = [];
+        const canvas = document.getElementById('network-canvas');
+        const ctx = canvas.getContext('2d');
+        const lossCanvas = document.getElementById('loss-chart');
+        const lossCtx = lossCanvas.getContext('2d');
+        // Set canvas sizes
+        function resizeCanvases() {
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+            lossCanvas.width = lossCanvas.offsetWidth;
+            lossCanvas.height = lossCanvas.offsetHeight;
+        }
+        resizeCanvases();
+        window.addEventListener('resize', resizeCanvases);
+        // Mode switching
+        function setMode(newMode) {
+            mode = newMode;
+            document.querySelectorAll('.mode-btn').forEach(btn => {
+                btn.classList.toggle('active', btn.textContent.toLowerCase().includes(newMode));
+            });
+            document.querySelectorAll('.mode-content').forEach(content => {
+                content.classList.toggle('active', content.classList.contains(`${newMode}-mode`));
+            });
+        }
+        // Neural Network Class
+        class NeuralNetwork {
+            constructor() {
+                // Network architecture: 2-25-25-1 (roughly 100 parameters)
+                this.layers = [2, 25, 25, 1];
+                this.weights = [];
+                this.biases = [];
+                this.activations = [];
+                this.zValues = [];
+                this.gradients = [];
+                this.learningRate = 0.1;
+                this.initializeNetwork();
+            }
+            initializeNetwork() {
+                // Xavier initialization
+                for (let i = 1; i < this.layers.length; i++) {
+                    const rows = this.layers[i];
+                    const cols = this.layers[i-1];
+                    const scale = Math.sqrt(2.0 / cols);
+                    // Initialize weights
+                    this.weights[i-1] = [];
+                    for (let r = 0; r < rows; r++) {
+                        this.weights[i-1][r] = [];
+                        for (let c = 0; c < cols; c++) {
+                            this.weights[i-1][r][c] = (Math.random() * 2 - 1) * scale;
+                        }
+                    }
+                    // Initialize biases
+                    this.biases[i-1] = new Array(rows).fill(0);
+                }
+            }
+            sigmoid(x) {
+                return 1 / (1 + Math.exp(-x));
+            }
+            sigmoidDerivative(x) {
+                const s = this.sigmoid(x);
+                return s * (1 - s);
+            }
+            relu(x) {
+                return Math.max(0, x);
+            }
+            reluDerivative(x) {
+                return x > 0 ? 1 : 0;
+            }
+            forward(input) {
+                this.activations = [input];
+                this.zValues = [];
+                for (let i = 0; i < this.weights.length; i++) {
+                    const z = [];
+                    const a = [];
+                    for (let j = 0; j < this.weights[i].length; j++) {
+                        let sum = this.biases[i][j];
+                        for (let k = 0; k < this.weights[i][j].length; k++) {
+                            sum += this.weights[i][j][k] * this.activations[i][k];
+                        }
+                        z.push(sum);
+                        // Use ReLU for hidden layers, sigmoid for output
+                        if (i < this.weights.length - 1) {
+                            a.push(this.relu(sum));
+                        } else {
+                            a.push(this.sigmoid(sum));
+                        }
+                    }
+                    this.zValues.push(z);
+                    this.activations.push(a);
+                }
+                return this.activations[this.activations.length - 1][0];
+            }
+            backward(input, target) {
+                const output = this.forward(input);
+                const error = output - target;
+                // Initialize gradients
+                this.gradients = [];
+                // Output layer gradients
+                let delta = [error * this.sigmoidDerivative(this.zValues[this.zValues.length - 1][0])];
+                this.gradients.unshift(delta);
+                // Hidden layer gradients
+                for (let i = this.weights.length - 2; i >= 0; i--) {
+                    const newDelta = [];
+                    for (let j = 0; j < this.weights[i].length; j++) {
+                        let sum = 0;
+                        for (let k = 0; k < delta.length; k++) {
+                            sum += this.weights[i+1][k][j] * delta[k];
+                        }
+                        const activation = i > 0 ?
+                            this.reluDerivative(this.zValues[i][j]) :
+                            this.reluDerivative(this.zValues[i][j]);
+                        newDelta.push(sum * activation);
+                    }
+                    delta = newDelta;
+                    this.gradients.unshift(delta);
+                }
+                // Update weights and biases
+                for (let i = 0; i < this.weights.length; i++) {
+                    for (let j = 0; j < this.weights[i].length; j++) {
+                        for (let k = 0; k < this.weights[i][j].length; k++) {
+                            this.weights[i][j][k] -= this.learningRate * this.gradients[i][j] * this.activations[i][k];
+                        }
+                        this.biases[i][j] -= this.learningRate * this.gradients[i][j];
+                    }
+                }
+                return error * error;
+            }
+            train(inputs, targets) {
+                let totalLoss = 0;
+                for (let i = 0; i < inputs.length; i++) {
+                    totalLoss += this.backward(inputs[i], targets[i]);
+                }
+                return totalLoss / inputs.length;
+            }
+            predict(input) {
+                return this.forward(input);
+            }
+        }
+        // XOR training data
+        const xorInputs = [[0, 0], [0, 1], [1, 0], [1, 1]];
+        const xorTargets = [0, 1, 1, 0];
+        // Initialize network
+        function resetNetwork() {
+            network = new NeuralNetwork();
+            epoch = 0;
+            lossHistory = [];
+            training = false;
+            updateStats();
+            drawNetwork();
+            drawLossChart();
+        }
+        // Training functions
+        function startTraining() {
+            training = true;
+            trainLoop();
+        }
+        function pauseTraining() {
+            training = false;
+        }
+        function stepTraining() {
+            if (!network) resetNetwork();
+            trainStep();
+        }
+        function trainStep() {
+            const loss = network.train(xorInputs, xorTargets);
+            epoch++;
+            lossHistory.push(loss);
+            if (lossHistory.length > 100) lossHistory.shift();
+            updateStats();
+            drawNetwork();
+            drawLossChart();
+        }
+        function trainLoop() {
+            if (!training) return;
+            trainStep();
+            if (epoch < 1000 && lossHistory[lossHistory.length - 1] > 0.001) {
+                requestAnimationFrame(trainLoop);
+            } else {
+                training = false;
+            }
+        }
+        // Update statistics
+        function updateStats() {
+            document.getElementById('epoch').textContent = epoch;
+            const loss = lossHistory.length > 0 ? lossHistory[lossHistory.length - 1] : 1;
+            document.getElementById('loss').textContent = loss.toFixed(4);
+            // Calculate accuracy
+            let correct = 0;
+            for (let i = 0; i < xorInputs.length; i++) {
+                const prediction = network ? network.predict(xorInputs[i]) : 0.5;
+                const rounded = Math.round(prediction);
+                if (rounded === xorTargets[i]) correct++;
+            }
+            const accuracy = (correct / xorInputs.length * 100).toFixed(0);
+            document.getElementById('accuracy').textContent = accuracy + '%';
+            // Add pulse animation on high accuracy
+            if (accuracy >= 100) {
+                document.getElementById('accuracy').parentElement.classList.add('pulse');
+                setTimeout(() => {
+                    document.getElementById('accuracy').parentElement.classList.remove('pulse');
+                }, 500);
+            }
+        }
+        // Visualization functions
+        function drawNetwork() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            if (!network) return;
+            const layerSpacing = canvas.width / (network.layers.length + 1);
+            const neurons = [];
+            // Calculate neuron positions
+            for (let i = 0; i < network.layers.length; i++) {
+                neurons[i] = [];
+                const layerSize = network.layers[i];
+                const ySpacing = canvas.height / (layerSize + 1);
+                for (let j = 0; j < layerSize; j++) {
+                    const x = layerSpacing * (i + 1);
+                    const y = ySpacing * (j + 1);
+                    neurons[i].push({ x, y });
+                }
+            }
+            // Draw connections
+            for (let i = 0; i < network.weights.length; i++) {
+                for (let j = 0; j < network.weights[i].length; j++) {
+                    for (let k = 0; k < network.weights[i][j].length; k++) {
+                        const weight = network.weights[i][j][k];
+                        const opacity = Math.min(Math.abs(weight) / 2, 1);
+                        ctx.beginPath();
+                        ctx.moveTo(neurons[i][k].x, neurons[i][k].y);
+                        ctx.lineTo(neurons[i+1][j].x, neurons[i+1][j].y);
+                        if (weight > 0) {
+                            ctx.strokeStyle = `rgba(76, 175, 80, ${opacity})`;
+                        } else {
+                            ctx.strokeStyle = `rgba(244, 67, 54, ${opacity})`;
+                        }
+                        ctx.lineWidth = Math.abs(weight) * 2;
+                        ctx.stroke();
+                    }
+                }
+            }
+            // Draw neurons
+            for (let i = 0; i < neurons.length; i++) {
+                for (let j = 0; j < neurons[i].length; j++) {
+                    const neuron = neurons[i][j];
+                    // Get activation value
+                    let activation = 0;
+                    if (network.activations[i] && network.activations[i][j] !== undefined) {
+                        activation = network.activations[i][j];
+                    }
+                    const intensity = Math.min(activation * 255, 255);
+                    ctx.beginPath();
+                    ctx.arc(neuron.x, neuron.y, 15, 0, Math.PI * 2);
+                    ctx.fillStyle = `rgb(${intensity}, ${intensity}, ${255})`;
+                    ctx.fill();
+                    ctx.strokeStyle = '#4CAF50';
+                    ctx.lineWidth = 2;
+                    ctx.stroke();
+                    // Draw activation value for visible neurons
+                    if (network.layers[i] <= 5 || i === 0 || i === network.layers.length - 1) {
+                        ctx.fillStyle = '#fff';
+                        ctx.font = '10px Arial';
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'middle';
+                        ctx.fillText(activation.toFixed(2), neuron.x, neuron.y);
+                    }
+                }
+            }
+            // Draw layer labels
+            ctx.fillStyle = '#888';
+            ctx.font = '14px Arial';
+            ctx.textAlign = 'center';
+            const labels = ['Input', 'Hidden 1', 'Hidden 2', 'Output'];
+            for (let i = 0; i < network.layers.length; i++) {
+                const x = layerSpacing * (i + 1);
+                ctx.fillText(labels[i], x, 30);
+                ctx.fillText(`(${network.layers[i]} neurons)`, x, 45);
+            }
+            // Draw XOR truth table
+            ctx.fillStyle = '#4CAF50';
+            ctx.font = '12px Arial';
+            ctx.textAlign = 'left';
+            ctx.fillText('XOR Truth Table:', 20, canvas.height - 80);
+            ctx.fillStyle = '#888';
+            ctx.fillText('0 XOR 0 = 0', 20, canvas.height - 60);
+            ctx.fillText('0 XOR 1 = 1', 20, canvas.height - 45);
+            ctx.fillText('1 XOR 0 = 1', 20, canvas.height - 30);
+            ctx.fillText('1 XOR 1 = 0', 20, canvas.height - 15);
+            // Show current predictions
+            if (network) {
+                ctx.fillStyle = '#4CAF50';
+                ctx.fillText('Network Output:', 150, canvas.height - 80);
+                ctx.fillStyle = '#888';
+                for (let i = 0; i < xorInputs.length; i++) {
+                    const prediction = network.predict(xorInputs[i]);
+                    const text = `${xorInputs[i][0]} XOR ${xorInputs[i][1]} = ${prediction.toFixed(3)}`;
+                    ctx.fillText(text, 150, canvas.height - 60 + i * 15);
+                }
+            }
+        }
+        function drawLossChart() {
+            lossCtx.clearRect(0, 0, lossCanvas.width, lossCanvas.height);
+            if (lossHistory.length < 2) return;
+            // Find min and max for scaling
+            const maxLoss = Math.max(...lossHistory, 0.5);
+            const minLoss = 0;
+            // Draw axes
+            lossCtx.strokeStyle = '#444';
+            lossCtx.lineWidth = 1;
+            lossCtx.beginPath();
+            lossCtx.moveTo(40, 10);
+            lossCtx.lineTo(40, lossCanvas.height - 30);
+            lossCtx.lineTo(lossCanvas.width - 10, lossCanvas.height - 30);
+            lossCtx.stroke();
+            // Draw labels
+            lossCtx.fillStyle = '#888';
+            lossCtx.font = '12px Arial';
+            lossCtx.textAlign = 'right';
+            lossCtx.fillText(maxLoss.toFixed(3), 35, 15);
+            lossCtx.fillText('0', 35, lossCanvas.height - 30);
+            lossCtx.textAlign = 'center';
+            lossCtx.fillText('Loss over Time', lossCanvas.width / 2, lossCanvas.height - 10);
+            // Draw loss curve
+            lossCtx.strokeStyle = '#4CAF50';
+            lossCtx.lineWidth = 2;
+            lossCtx.beginPath();
+            const xStep = (lossCanvas.width - 50) / (lossHistory.length - 1);
+            const yScale = (lossCanvas.height - 50) / (maxLoss - minLoss);
+            for (let i = 0; i < lossHistory.length; i++) {
+                const x = 40 + i * xStep;
+                const y = lossCanvas.height - 30 - (lossHistory[i] - minLoss) * yScale;
+                if (i === 0) {
+                    lossCtx.moveTo(x, y);
+                } else {
+                    lossCtx.lineTo(x, y);
+                }
+            }
+            lossCtx.stroke();
+            // Draw current loss point
+            if (lossHistory.length > 0) {
+                const lastX = 40 + (lossHistory.length - 1) * xStep;
+                const lastY = lossCanvas.height - 30 - (lossHistory[lossHistory.length - 1] - minLoss) * yScale;
+                lossCtx.beginPath();
+                lossCtx.arc(lastX, lastY, 4, 0, Math.PI * 2);
+                lossCtx.fillStyle = '#4CAF50';
+                lossCtx.fill();
+            }
+        }
+        // Initialize
+        resetNetwork();
+    </script>
 </body>
 </html>