Spaces:

mlmihjaz
/

anycoder-b4b3fbe5

Running

App Files Files Community

mlmihjaz commited on Jan 19

Commit

e930e00

verified ·

1 Parent(s): 3071b2e

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +540 -1003

index.html CHANGED Viewed

@@ -1,1102 +1,639 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AlphaPop Adventure - Typing & Spelling</title>
-  <!-- Import Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;600;800&display=swap"
-    rel="stylesheet">
-  <!-- FontAwesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     :root {
-      /* Palette */
-      --primary: #6C63FF;
-      --primary-dark: #5a52d5;
-      --secondary: #FF6584;
-      --accent: #43D9AD;
-      --accent-dark: #32b08b;
-      --warning: #FFD93D;
-      --dark: #2D3436;
-      --light: #f5f7fa;
-      /* Gradients & Backgrounds */
-      --bg-gradient: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
-      --header-gradient: linear-gradient(90deg, #ffffff 0%, #f0f2f5 100%);
-      --card-bg: rgba(255, 255, 255, 0.95);
-      /* Effects */
-      --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
-      --shadow-lg: 0 15px 35px rgba(108, 99, 255, 0.15);
-      --glass-border: 1px solid rgba(255, 255, 255, 0.6);
-      --blur: blur(12px);
-      --radius-lg: 24px;
-      --radius-btn: 50px;
-      /* Transitions */
-      --trans-fast: 0.2s ease;
-      --trans-bounce: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    }
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      -webkit-tap-highlight-color: transparent;
-    }
-    body {
-      font-family: 'Nunito', sans-serif;
-      background: var(--bg-gradient);
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      color: var(--dark);
-    }
-    /* --- Header --- */
-    header {
-      padding: 0.8rem 2rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: var(--header-gradient);
-      box-shadow: var(--shadow-sm);
-      z-index: 100;
-      backdrop-filter: blur(5px);
-    }
-    .logo {
-      font-family: 'Fredoka', sans-serif;
-      font-size: 1.6rem;
-      font-weight: 700;
-      color: var(--primary);
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      text-decoration: none;
-    }
-    .logo i {
-      background: rgba(108, 99, 255, 0.1);
-      padding: 10px;
-      border-radius: 12px;
-    }
-    .header-actions {
-      display: flex;
-      gap: 15px;
-      align-items: center;
-    }
-    .icon-btn {
-      background: white;
-      color: var(--primary);
-      border: none;
-      width: 44px;
-      height: 44px;
-      border-radius: 50%;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 1.1rem;
-      transition: var(--trans-fast);
-      box-shadow: var(--shadow-sm);
-    }
-    .icon-btn:hover {
-      transform: translateY(-2px);
-      background: var(--primary);
-      color: white;
-      box-shadow: 0 5px 15px rgba(108, 99, 255, 0.3);
-    }
-    .anycoder-badge {
-      font-size: 0.85rem;
-      font-weight: 700;
-      color: var(--dark);
-      text-decoration: none;
-      padding: 0.5rem 1.2rem;
-      background: white;
-      border-radius: var(--radius-btn);
-      border: 2px solid #eee;
-      transition: var(--trans-fast);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .anycoder-badge:hover {
-      border-color: var(--primary);
-      color: var(--primary);
-      transform: translateY(-2px);
-    }
-    /* --- Main Layout --- */
-    main {
-      flex: 1;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-      padding: 1rem;
-    }
-    /* --- Game Board --- */
-    .game-board {
-      background: var(--card-bg);
-      backdrop-filter: var(--blur);
-      -webkit-backdrop-filter: var(--blur);
-      border: var(--glass-border);
-      border-radius: var(--radius-lg);
-      padding: 2.5rem;
-      width: 95%;
-      max-width: 700px;
-      box-shadow: var(--shadow-lg);
-      text-align: center;
-      position: relative;
-      overflow: hidden;
-      transition: transform 0.3s ease, filter 0.3s ease;
-    }
-    .game-board.blurred {
-      filter: blur(8px);
-      pointer-events: none;
-    }
-    /* Mode Switcher */
-    .mode-switch {
-      display: flex;
-      background: #f0f0f5;
-      padding: 5px;
-      border-radius: var(--radius-btn);
-      margin: 0 auto 2rem auto;
-      width: fit-content;
-      position: relative;
-    }
-    .mode-btn {
-      background: transparent;
-      border: none;
-      padding: 10px 25px;
-      border-radius: var(--radius-btn);
-      font-family: 'Nunito', sans-serif;
-      font-weight: 700;
-      color: #888;
-      cursor: pointer;
-      z-index: 2;
-      transition: color 0.3s ease;
-      font-size: 1rem;
-    }
-    .mode-btn.active {
-      color: white;
-    }
-    .switch-bg {
-      position: absolute;
-      top: 5px;
-      left: 5px;
-      width: calc(50% - 5px);
-      height: calc(100% - 10px);
-      background: var(--primary);
-      border-radius: var(--radius-btn);
-      transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-      z-index: 1;
-    }
-    /* Progress Bar */
-    .progress-wrapper {
-      width: 100%;
-      margin-bottom: 2rem;
-    }
-    .progress-track {
-      width: 100%;
-      height: 12px;
-      background: #eee;
-      border-radius: 10px;
-      overflow: hidden;
-    }
-    .progress-fill {
-      height: 100%;
-      width: 0%;
-      background: linear-gradient(90deg, var(--secondary), var(--primary));
-      border-radius: 10px;
-      transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
-    }
-    /* Game Display Area */
-    .display-area {
-      min-height: 250px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin-bottom: 1rem;
-    }
-    /* Letter Mode Styles */
-    .big-letter {
-      font-family: 'Fredoka', sans-serif;
-      font-size: 9rem;
-      font-weight: 700;
-      color: var(--primary);
-      text-shadow: 4px 4px 0px rgba(108, 99, 255, 0.1);
-      line-height: 1;
-      transition: color 0.3s;
-    }
-    /* Word Mode Styles */
-    .word-container {
-      display: flex;
-      gap: 10px;
-      margin-bottom: 20px;
-    }
-    .letter-box {
-      font-family: 'Fredoka', sans-serif;
-      font-size: 3.5rem;
-      font-weight: 700;
-      width: 60px;
-      height: 80px;
-      border-bottom: 4px solid #ddd;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #ccc;
-      transition: all 0.3s;
-      text-transform: uppercase;
-    }
-    .letter-box.active {
-      border-bottom-color: var(--primary);
-      color: var(--primary);
-      transform: translateY(-5px);
-      animation: bounce 1s infinite;
-    }
-    .letter-box.completed {
-      color: var(--accent-dark);
-      border-bottom-color: var(--accent);
-    }
-    @keyframes bounce {
-      0%, 100% { transform: translateY(-5px); }
-      50% { transform: translateY(0); }
-    }
-    /* Image Display */
-    .image-wrapper {
-      width: 200px;
-      height: 200px;
-      border-radius: 20px;
-      overflow: hidden;
-      background: #fff;
-      box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
-      border: 4px solid white;
-      margin: 0 auto;
-      opacity: 0;
-      transform: scale(0.9);
-      transition: all 0.5s var(--trans-bounce);
-    }
-    .image-wrapper.visible {
-      opacity: 1;
-      transform: scale(1);
-    }
-    .image-wrapper img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    /* Feedback Text */
-    .status-msg {
-      font-size: 1.4rem;
-      font-weight: 700;
-      color: var(--dark);
-      margin-top: 1.5rem;
-      min-height: 2rem;
-    }
-    .sub-status {
-      font-size: 1rem;
-      color: #888;
-      font-weight: 600;
-    }
-    /* Buttons */
-    .btn-main {
-      background: var(--primary);
-      color: white;
-      border: none;
-      padding: 1rem 3rem;
-      font-size: 1.3rem;
-      border-radius: var(--radius-btn);
-      cursor: pointer;
-      font-family: 'Fredoka', sans-serif;
-      box-shadow: 0 8px 20px rgba(108, 99, 255, 0.3);
-      transition: var(--trans-fast);
-      margin-top: 1rem;
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .btn-main:hover {
-      background: var(--primary-dark);
-      transform: translateY(-3px);
-      box-shadow: 0 12px 25px rgba(108, 99, 255, 0.4);
-    }
-    .btn-secondary {
-      background: transparent;
-      color: var(--primary);
-      border: 2px solid var(--primary);
-      padding: 0.8rem 2rem;
-      font-size: 1rem;
-      border-radius: var(--radius-btn);
-      cursor: pointer;
-      font-family: 'Fredoka', sans-serif;
-      font-weight: 600;
-      margin-top: 10px;
-      transition: var(--trans-fast);
-    }
-    .btn-secondary:hover {
-      background: rgba(108, 99, 255, 0.05);
-    }
-    /* Screens */
-    .screen {
-      display: none;
-      width: 100%;
-      height: 100%;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    .screen.active {
-      display: flex;
-    }
-    /* Chat Overlay */
-    .chat-modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.5);
-      z-index: 200;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease;
-    }
-    .chat-modal.open {
-      opacity: 1;
-      visibility: visible;
-    }
-    .chat-box {
-      width: 90%;
-      max-width: 500px;
-      height: 75vh;
-      background: white;
-      border-radius: 24px;
-      box-shadow: 0 25px 50px rgba(0,0,0,0.25);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      transform: translateY(30px);
-      transition: transform 0.3s var(--trans-bounce);
-    }
-    .chat-modal.open .chat-box {
-      transform: translateY(0);
-    }
-    .chat-top {
-      background: var(--primary);
-      padding: 1rem 1.5rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      color: white;
-    }
-    .chat-top h3 {
-      font-family: 'Fredoka', sans-serif;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .close-chat {
-      background: none;
-      border: none;
-      color: white;
-      font-size: 1.4rem;
-      cursor: pointer;
-      opacity: 0.8;
-    }
-    .chat-body {
-      flex: 1;
-      padding: 1.5rem;
-      overflow-y: auto;
-      background: #f8f9fa;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-    .msg {
-      max-width: 85%;
-      padding: 12px 18px;
-      border-radius: 18px;
-      font-size: 0.95rem;
-      line-height: 1.5;
-      position: relative;
-      animation: slideIn 0.3s ease;
-    }
-    @keyframes slideIn {
-      from { opacity: 0; transform: translateY(10px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    .msg.bot {
-      background: white;
-      color: var(--dark);
-      border-bottom-left-radius: 4px;
-      align-self: flex-start;
-      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-    }
-    .msg.user {
-      background: var(--primary);
-      color: white;
-      border-bottom-right-radius: 4px;
-      align-self: flex-end;
-      box-shadow: 0 2px 5px rgba(108, 99, 255, 0.2);
-    }
-    .chat-footer {
-      padding: 1rem;
-      background: white;
-      border-top: 1px solid #eee;
-      display: flex;
-      gap: 10px;
-    }
-    .chat-footer input {
-      flex: 1;
-      padding: 12px 20px;
-      border: 2px solid #eee;
-      border-radius: 30px;
-      outline: none;
-      font-family: 'Nunito', sans-serif;
-      transition: border-color 0.2s;
-    }
-    .chat-footer input:focus {
-      border-color: var(--primary);
-    }
-    .send-btn {
-      width: 45px;
-      height: 45px;
-      border-radius: 50%;
-      border: none;
-      background: var(--primary);
-      color: white;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      transition: background 0.2s;
-    }
-    .send-btn:hover {
-      background: var(--secondary);
-    }
-    /* Canvas */
-    #confetti {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 50;
-    }
-    /* Animations */
-    .shake {
-      animation: shake 0.4s ease;
-    }
-    @keyframes shake {
-      0%, 100% { transform: translateX(0); }
-      25% { transform: translateX(-10px); color: var(--secondary); }
-      75% { transform: translateX(10px); color: var(--secondary); }
-    }
-    /* Responsive */
-    @media (max-width: 600px) {
-      .game-board {
-        width: 100%;
-        height: 100%;
-        border-radius: 0;
-        border: none;
-      }
-      .big-letter { font-size: 6rem; }
-      .letter-box { width: 40px; height: 60px; font-size: 2rem; }
-      .logo span { display: none; }
-      header { padding: 0.8rem 1rem; }
-      .mode-btn { padding: 8px 16px; font-size: 0.9rem; }
     }
   </style>
 </head>
 <body>
-  <header>
-    <a href="#" class="logo">
-      <i class="fa-solid fa-rocket"></i>
-      <span>AlphaPop</span>
-    </a>
-    <div class="header-actions">
-      <button class="icon-btn" onclick="app.toggleChat()" title="Talk to AlphaBot">
-        <i class="fa-solid fa-comment-dots"></i>
       </button>
-      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge">
-        <i class="fa-solid fa-code"></i> Built with anycoder
       </a>
     </div>
-  </header>
-  <main>
-    <canvas id="confetti"></canvas>
-    <div class="game-board" id="gameBoard">
-      <!-- Start Screen -->
-      <div id="startScreen" class="screen active">
-        <div style="font-size: 4rem; color: var(--primary); margin-bottom: 1rem;">
-          <i class="fa-solid fa-gamepad"></i>
-        </div>
-        <h1 style="font-family: 'Fredoka'; font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--dark);">Ready to Play?</h1>
-        <p style="color: #666; font-size: 1.1rem; margin-bottom: 2rem;">Choose a mode to start learning!</p>
-        <div style="display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 300px;">
-          <button class="btn-main" onclick="app.startGame('letter')">
-            <i class="fa-solid fa-a"></i> Letter Mode
-          </button>
-          <button class="btn-secondary" onclick="app.startGame('word')">
-            <i class="fa-solid fa-spell-check"></i> Word Mode
           </button>
-          <button class="btn-secondary" style="border: none; color: #666;" onclick="app.toggleChat()">
-            <i class="fa-solid fa-robot"></i> Talk to AlphaBot first
           </button>
         </div>
-      </div>
-      <!-- Play Screen -->
-      <div id="playScreen" class="screen">
-        <!-- Mode Switcher (Visible during gameplay) -->
-        <div class="mode-switch">
-          <div class="switch-bg" id="switchBg"></div>
-          <button class="mode-btn active" id="btnModeLetter" onclick="app.switchMode('letter')">Letters</button>
-          <button class="mode-btn" id="btnModeWord" onclick="app.switchMode('word')">Words</button>
-        </div>
-        <div class="progress-wrapper">
-          <div class="progress-track">
-            <div class="progress-fill" id="progressBar"></div>
-          </div>
-        </div>
-        <div class="display-area">
-          <!-- Letter Mode Elements -->
-          <div id="letterModeUI" style="display: flex; flex-direction: column; align-items: center;">
-            <div class="big-letter" id="bigLetter">A</div>
-          </div>
-          <!-- Word Mode Elements -->
-          <div id="wordModeUI" style="display: none; flex-direction: column; align-items: center;">
-            <div class="word-container" id="wordContainer">
-              <!-- Letter boxes injected here -->
-            </div>
-          </div>
-          <!-- Shared Image -->
-          <div class="image-wrapper" id="imageWrapper">
-            <img id="gameImage" src="" alt="Success Image">
-          </div>
-        </div>
-        <div class="status-msg" id="statusMsg">Press 'A'</div>
-        <div class="sub-status"><i class="fa-solid fa-volume-high"></i> Sound Enabled</div>
       </div>
-      <!-- End Screen -->
-      <div id="endScreen" class="screen">
-        <i class="fa-solid fa-trophy" style="font-size: 5rem; color: var(--warning); margin-bottom: 1rem; animation: bounce 2s infinite;"></i>
-        <h2 style="font-family: 'Fredoka'; font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--dark);">Awesome!</h2>
-        <p style="color: #666; margin-bottom: 2rem;">You completed the level.</p>
-        <button class="btn-main" onclick="app.startGame(app.currentMode)">
-          Play Again <i class="fa-solid fa-rotate-right"></i>
-        </button>
-        <button class="btn-secondary" onclick="app.showStartScreen()">Main Menu</button>
       </div>
     </div>
-  </main>
   <!-- Chat Modal -->
-  <div class="chat-modal" id="chatModal">
-    <div class="chat-box">
-      <div class="chat-top">
-        <h3><i class="fa-solid fa-robot"></i> AlphaBot</h3>
-        <button class="close-chat" onclick="app.toggleChat()"><i class="fa-solid fa-xmark"></i></button>
       </div>
-      <div class="chat-body" id="chatBody">
-        <div class="msg bot">Hello! I'm AlphaBot. I can help you learn! Try typing "Hello" or ask me how to play.</div>
       </div>
-      <div class="chat-footer">
-        <input type="text" id="chatInput" placeholder="Type a message..." onkeypress="app.handleChatKey(event)">
-        <button class="send-btn" onclick="app.sendChatMessage()"><i class="fa-solid fa-paper-plane"></i></button>
       </div>
     </div>
   </div>
   <script>
     /**
-     * AlphaPop Application Logic
-     * Handles Game State, UI Updates, Speech, and Chat
      */
     const app = {
-      // State
-      alphabet: "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(''),
-      words: ["CAT", "DOG", "SUN", "CAR", "BEE", "FOX", "OWL", "PIG", "COW", "BAT", "HAT", "MAP", "JAM", "PAN", "VAN"],
-      currentMode: 'letter', // 'letter' || 'word'
-      currentIndex: 0,
-      letterIndex: 0, // For word mode tracking
-      isPlaying: false,
-      isChatOpen: false,
-      isProcessingInput: false, // Debounce visual feedback
-      // DOM Elements
-      ui: {
-        startScreen: document.getElementById('startScreen'),
-        playScreen: document.getElementById('playScreen'),
-        endScreen: document.getElementById('endScreen'),
-        gameBoard: document.getElementById('gameBoard'),
-        // Game UI
-        letterModeUI: document.getElementById('letterModeUI'),
-        wordModeUI: document.getElementById('wordModeUI'),
-        bigLetter: document.getElementById('bigLetter'),
-        wordContainer: document.getElementById('wordContainer'),
-        imageWrapper: document.getElementById('imageWrapper'),
-        gameImage: document.getElementById('gameImage'),
-        statusMsg: document.getElementById('statusMsg'),
-        progressBar: document.getElementById('progressBar'),
-        // Mode Switcher
-        switchBg: document.getElementById('switchBg'),
-        btnModeLetter: document.getElementById('btnModeLetter'),
-        btnModeWord: document.getElementById('btnModeWord'),
-        // Chat
-        chatModal: document.getElementById('chatModal'),
-        chatBody: document.getElementById('chatBody'),
-        chatInput: document.getElementById('chatInput')
-      },
-      init() {
-        // Global Key Listener
-        window.addEventListener('keydown', (e) => this.handleGlobalKey(e));
-        // Resize Canvas
-        window.addEventListener('resize', () => this.resizeCanvas());
-        this.resizeCanvas();
-        // Setup Speech Synthesis (preload voices)
-        window.speechSynthesis.getVoices();
-      },
-      /* --- Navigation --- */
-      showStartScreen() {
-        this.isPlaying = false;
-        this.ui.startScreen.classList.add('active');
-        this.ui.playScreen.classList.remove('active');
-        this.ui.endScreen.classList.remove('active');
-        this.closeChat();
       },
-      startGame(mode) {
-        this.currentMode = mode;
-        this.currentIndex = 0;
-        this.isPlaying = true;
-        this.isProcessingInput = false;
-        // UI Reset
-        this.ui.startScreen.classList.remove('active');
-        this.ui.endScreen.classList.remove('active');
-        this.ui.playScreen.classList.add('active');
-        this.updateModeSwitcherUI();
-        this.loadLevel();
       },
-      switchMode(mode) {
-        if (this.currentMode === mode) return;
-        this.startGame(mode); // Restart with new mode
-      },
-      /* --- Game Logic --- */
-      loadLevel() {
-        // Reset Visuals
-        this.ui.imageWrapper.classList.remove('visible');
-        this.ui.statusMsg.style.color = 'var(--dark)';
-        this.ui.statusMsg.textContent = "...";
-        // Update Progress
-        const total = this.currentMode === 'letter' ? this.alphabet.length : this.words.length;
-        const progress = (this.currentIndex / total) * 100;
-        this.ui.progressBar.style.width = `${progress}%`;
-        // Setup specific mode UI
-        if (this.currentMode === 'letter') {
-          this.setupLetterLevel();
-        } else {
-          this.setupWordLevel();
         }
-      },
-      setupLetterLevel() {
-        this.ui.letterModeUI.style.display = 'flex';
-        this.ui.wordModeUI.style.display = 'none';
-        const letter = this.alphabet[this.currentIndex];
-        this.ui.bigLetter.textContent = letter;
-        this.ui.statusMsg.textContent = `Press the '${letter}' key!`;
-        this.speak(`Find the letter ${letter}`);
       },
-      setupWordLevel() {
-        this.ui.letterModeUI.style.display = 'none';
-        this.ui.wordModeUI.style.display = 'flex';
-        this.letterIndex = 0;
-        const word = this.words[this.currentIndex];
-        this.ui.wordContainer.innerHTML = ''; // Clear previous
-        // Create letter boxes
-        for (let i = 0; i < word.length; i++) {
-          const box = document.createElement('div');
-          box.className = 'letter-box';
-          box.textContent = word[i];
-          box.id = `box-${i}`;
-          this.ui.wordContainer.appendChild(box);
-        }
-        this.updateWordHighlight();
-        this.speak(`Let's spell ${word}`);
       },
-      updateWordHighlight() {
-        const word = this.words[this.currentIndex];
-        const boxes = this.ui.wordContainer.children;
-        // Reset all
-        for (let box of boxes) {
-          box.className = 'letter-box';
-        }
-        // Highlight current
-        const currentBox = document.getElementById(`box-${this.letterIndex}`);
-        if (currentBox) {
-          currentBox.classList.add('active');
-        }
-        // Mark completed
-        for(let i=0; i<this.letterIndex; i++) {
-          const completedBox = document.getElementById(`box-${i}`);
-          if(completedBox) completedBox.classList.add('completed');
-        }
-        this.ui.statusMsg.textContent = `Type '${word[this.letterIndex]}'`;
       },
-      handleInput(key) {
-        if (!this.isPlaying || this.isProcessingInput || this.isChatOpen) return;
-        const upperKey = key.toUpperCase();
-        let target = '';
-        if (this.currentMode === 'letter') {
-          target = this.alphabet[this.currentIndex];
-        } else {
-          target = this.words[this.currentIndex][this.letterIndex];
-        }
-        if (upperKey === target) {
-          this.handleCorrect(target);
-        } else {
-          this.handleWrong();
-        }
-      },
-      handleCorrect(char) {
-        this.isProcessingInput = true;
-        this.speak(char);
-        const isLetterMode = this.currentMode === 'letter';
-        const isWordComplete = !isLetterMode && (this.letterIndex === this.words[this.currentIndex].length - 1);
-        // Visual Feedback
-        this.ui.statusMsg.textContent = "Correct!";
-        this.ui.statusMsg.style.color = "var(--accent-dark)";
-        if (isLetterMode) {
-          this.ui.bigLetter.style.color = "var(--accent-dark)";
-          this.showImage(char);
-        } else {
-          // Update Word UI
-          const box = document.getElementById(`box-${this.letterIndex}`);
-          if(box) {
-            box.classList.remove('active');
-            box.classList.add('completed');
-          }
-          if (isWordComplete) {
-            this.showImage(this.words[this.currentIndex]);
-          }
         }
-        // Fire Particles
-        this.fireConfetti(isWordComplete || isLetterMode ? 1.5 : 0.5);
-        setTimeout(() => {
-          if (isLetterMode) {
-            this.ui.bigLetter.style.color = "var(--primary)";
-            this.nextLevel();
-          } else {
-            if (isWordComplete) {
-              this.nextLevel();
-            } else {
-              this.letterIndex++;
-              this.updateWordHighlight();
-              this.isProcessingInput = false;
-            }
-          }
-        }, 1200);
       },
-      handleWrong() {
-        this.speak("Try again");
-        if (this.currentMode === 'letter') {
-          this.ui.bigLetter.classList.remove('shake');
-          void this.ui.bigLetter.offsetWidth; // trigger reflow
-          this.ui.bigLetter.classList.add('shake');
-        } else {
-           const box = document.getElementById(`box-${this.letterIndex}`);
-           if(box) {
-             box.classList.remove('shake');
-             void box.offsetWidth;
-             box.classList.add('shake');
-           }
-        }
-        this.ui.statusMsg.textContent = "Oops, try again!";
-        this.ui.statusMsg.style.color = "var(--secondary)";
       },
-      showImage(seed) {
-        // Use Picsum with seed to get consistent random images
-        const url = `https://picsum.photos/seed/${seed}/400/400`;
-        this.ui.gameImage.src = url;
-        this.ui.gameImage.onload = () => {
-          this.ui.imageWrapper.classList.add('visible');
-        };
-      },
-      nextLevel() {
-        const total = this.currentMode === 'letter' ? this.alphabet.length : this.words.length;
-        this.currentIndex++;
-        this.isProcessingInput = false;
-        if (this.currentIndex >= total) {
-          this.gameOver();
-        } else {
-          this.loadLevel();
         }
-      },
-      gameOver() {
-        this.isPlaying = false;
-        this.ui.playScreen.classList.remove('active');
-        this.ui.endScreen.classList.add('active');
-        this.ui.progressBar.style.width = '100%';
-        this.fireConfetti(3.0);
-        this.speak("Amazing work! You finished the game!");
-      },
-      updateModeSwitcherUI() {
-        if (this.currentMode === 'letter') {
-          this.ui.switchBg.style.transform = 'translateX(0)';
-          this.ui.btnModeLetter.classList.add('active');
-          this.ui.btnModeWord.classList.remove('active');
-        } else {
-          this.ui.switchBg.style.transform = 'translateX(100%)';
-          this.ui.btnModeLetter.classList.remove('active');
-          this.ui.btnModeWord.classList.add('active');
-        }
-      },
-      /* --- Chat System --- */
-      toggleChat() {
-        this.isChatOpen = !this.isChatOpen;
-        if (this.isChatOpen) {
-          this.ui.chatModal.classList.add('open');
-          this.ui.gameBoard.classList.add('blurred');
-          this.ui.chatInput.focus();
-        } else {
-          this.ui.chatModal.classList.remove('open');
-          this.ui.gameBoard.classList.remove('blurred');
-        }
       },
-      handleChatKey(e) {
-        if (e.key === 'Enter') this.sendChatMessage();
       },
-      sendChatMessage() {
-        const text = this.ui.chatInput.value.trim();
         if (!text) return;
-        // User Msg
-        this.addMsg(text, 'user');
-        this.ui.chatInput.value = '';
-        // Bot Response
         setTimeout(() => {
-          const reply = this.getBotResponse(text);
-          this.addMsg(reply, 'bot');
-          this.speak(reply);
-        }, 600);
       },
-      addMsg(text, type) {
         const div = document.createElement('div');
-        div.className = `msg ${type}`;
-        div.textContent = text;
-        this.ui.chatBody.appendChild(div);
-        this.ui.chatBody.scrollTop = this.ui.chatBody.scrollHeight;
-      },
-      getBotResponse(input) {
-        const lower = input.toLowerCase();
-        if (lower.includes('hello') || lower.includes('hi')) return "Hi there! Ready to learn some letters and words?";
-        if (lower.includes('how are you')) return "I'm a robot, so I'm always functioning at 100%!";
-        if (lower.includes('play') || lower.includes('game')) return "If you are in Letter Mode, press the key you see. In Word Mode, type the whole word!";
-        if (lower.includes('letter')) return "Letter Mode helps you learn individual keys A through Z.";
-        if (lower.includes('word')) return "Word Mode is harder. You have to spell words like 'CAT' or 'DOG'.";
-        if (lower.includes('help')) return "Just type the letters on your keyboard that match the screen!";
-        // Check for single letters
-        if (/^[a-z]$/.test(lower)) {
-          return `You typed ${input.toUpperCase()}! That is correct.`;
-        }
-        const jokes = [
-          "Why did the computer go to the doctor? Because it had a virus!",
-          "I love teaching you, you are a fast typer!",
-          "Keep going, you are doing great!",
-          "Did you know? The alphabet has 26 letters!"
-        ];
-        return jokes[Math.floor(Math.random() * jokes.length)];
       },
-      /* --- Utilities --- */
-      handleGlobalKey(e) {
-        // Input handling is routed here
-        this.handleInput(e.key);
       },
-      speak(text) {
-        if ('speechSynthesis' in window) {
-          window.speechSynthesis.cancel(); // Stop previous
-          const utterance = new SpeechSynthesisUtterance(text);
-          utterance.rate = 1.0;
-          utterance.pitch = 1.1; // Slightly higher pitch for "kid friendly" vibe
-          window.speechSynthesis.speak(utterance);
-        }
       },
-      /* --- Confetti System --- */
-      canvas: null,
-      ctx: null,
-      particles: [],
-      resizeCanvas() {
-        this.canvas = document.getElementById('confetti');
-        this.ctx = this.canvas.getContext('2d');
-        this.canvas.width = window.innerWidth;
-        this.canvas.height = window.innerHeight;
       },
-      fireConfetti(intensity = 1.0) {
-        const count = 100 * intensity;
-        const colors = ['#FF6584', '#6C63FF', '#43D9AD', '#FFD93D', '#FF8C00'];
-        for (let i = 0; i < count; i++) {
-          this.particles.push({
-            x: window.innerWidth / 2,
-            y: window.innerHeight / 2,
-            vx: (Math.random() - 0.5) * 20 * intensity,
-            vy: (Math.random() - 1) * 20 * intensity,
-            size: Math.random() * 8 + 4,
-            color: colors[Math.floor(Math.random() * colors.length)],
-            life: 100,
-            gravity: 0.5
-          });
         }
-        if (this.particles.length <= count) requestAnimationFrame(() => this.updateConfetti());
       },
-      updateConfetti() {
-        if (!this.ctx) return;
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        for (let i = 0; i < this.particles.length; i++) {
-          let p = this.particles[i];
-          p.x += p.vx;

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>EduConnect - Learning Management System</title>
+  <!-- Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <!-- FontAwesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     :root {
+      --primary: #008069; /* WhatsApp Green-ish */
+      --primary-dark: #005c4b;
+      --accent: #34b7f1;
+      --bg-body: #e5ddd5; /* Chat background color */
+      --bg-white: #ffffff;
+      --text-dark: #111b21;
+      --text-gray: #667781;
+      --border: #e9edef;
+      --shadow: 0 2px 5px rgba(0,0,0,0.05);
+      --radius: 12px;
+      --danger: #ef5350;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
+    body { font-family: 'Inter', sans-serif; background-color: #f0f2f5; color: var(--text-dark); height: 100vh; overflow: hidden; }
+    /* --- Utilities --- */
+    .hidden { display: none !important; }
+    .flex { display: flex; }
+    .flex-col { flex-direction: column; }
+    .center { align-items: center; justify-content: center; }
+    .btn { cursor: pointer; border: none; padding: 10px 20px; border-radius: 24px; font-weight: 600; transition: 0.2s; font-size: 0.9rem; }
+    .btn-primary { background: var(--primary); color: white; }
+    .btn-primary:hover { background: var(--primary-dark); }
+    .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
+    .btn-icon { background: transparent; color: var(--text-gray); font-size: 1.2rem; padding: 8px; border-radius: 50%; }
+    .btn-icon:hover { background: rgba(0,0,0,0.05); color: var(--primary); }
+    /* --- Login Screen --- */
+    #loginScreen {
+      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+      background: linear-gradient(135deg, var(--primary) 0%, #00a884 100%);
+      z-index: 1000; display: flex; align-items: center; justify-content: center;
+    }
+    .login-card {
+      background: white; padding: 3rem; border-radius: 20px; width: 90%; max-width: 400px;
+      box-shadow: 0 20px 40px rgba(0,0,0,0.2); text-align: center;
+    }
+    .login-card h1 { color: var(--primary); margin-bottom: 1rem; }
+    .role-btn {
+      display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 1rem;
+      padding: 1rem; border: 2px solid #eee; border-radius: 12px; background: white;
+      font-size: 1rem; color: #555; transition: 0.2s;
+    }
+    .role-btn:hover { border-color: var(--primary); background: #f0fdf9; color: var(--primary); }
+    /* --- App Layout --- */
+    #appContainer { display: flex; height: 100vh; width: 100vw; }
+    /* Sidebar (Categories) */
+    .sidebar {
+      width: 280px; background: white; border-right: 1px solid var(--border);
+      display: flex; flex-direction: column; z-index: 10;
+    }
+    .brand { padding: 20px; font-size: 1.5rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 10px; }
+    .category-list { flex: 1; overflow-y: auto; padding: 10px; }
+    /* Stack Buttons for Categories */
+    .cat-btn {
+      width: 100%; text-align: left; padding: 12px 16px; margin-bottom: 5px;
+      background: #f5f6f6; border: none; border-radius: 10px; color: var(--text-dark);
+      font-weight: 500; display: flex; justify-content: space-between; align-items: center;
+      transition: 0.2s; cursor: pointer;
+    }
+    .cat-btn:hover { background: #e9edef; }
+    .cat-btn.active { background: var(--primary); color: white; }
+    .cat-btn .badge { font-size: 0.75rem; background: rgba(0,0,0,0.1); padding: 2px 6px; border-radius: 4px; }
+    /* Main Content Area */
+    .main-content { flex: 1; display: flex; flex-direction: column; background: #f0f2f5; position: relative; }
+    /* Header */
+    .top-header {
+      height: 60px; background: white; border-bottom: 1px solid var(--border);
+      display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
+    }
+    .user-info { display: flex; align-items: center; gap: 10px; }
+    .user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
+    /* Subcategories (Subjects) Strip */
+    .subject-strip {
+      padding: 15px 20px; background: white; overflow-x: auto; white-space: nowrap;
+      border-bottom: 1px solid var(--border); display: flex; gap: 10px;
+    }
+    .subject-pill {
+      padding: 8px 16px; background: #f0f2f5; border-radius: 20px; color: var(--text-dark);
+      font-size: 0.9rem; cursor: pointer; transition: 0.2s; border: 1px solid transparent;
+    }
+    .subject-pill:hover { background: #e9edef; }
+    .subject-pill.active { background: var(--primary); color: white; }
+    /* Feed Area */
+    .feed-container {
+      flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px;
+      background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
+      background-blend-mode: overlay; background-color: rgba(255,255,255,0.9);
+    }
+    /* Feed Card (WhatsApp Style) */
+    .msg-bubble {
+      max-width: 600px; align-self: flex-start; background: white;
+      padding: 10px; border-radius: 8px; box-shadow: var(--shadow);
+      position: relative; animation: slideUp 0.3s ease; width: 100%;
+    }
+    .msg-bubble.sent { align-self: flex-end; background: #d9fdd3; }
+    .msg-meta { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.8rem; color: var(--text-gray); }
+    .msg-content { font-size: 1rem; line-height: 1.4; color: var(--text-dark); }
+    .media-preview {
+      margin-top: 10px; border-radius: 8px; overflow: hidden; background: #000;
+      max-width: 100%; position: relative; cursor: pointer;
+    }
+    .media-preview video, .media-preview img { width: 100%; max-height: 300px; object-fit: contain; display: block; }
+    .play-btn {
+      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+      color: white; font-size: 3rem; opacity: 0.8; text-shadow: 0 2px 5px rgba(0,0,0,0.5);
+    }
+    .file-attach {
+      display: flex; align-items: center; gap: 15px; padding: 10px;
+      background: #f9f9f9; border-radius: 8px; margin-top: 5px; cursor: pointer;
+    }
+    .file-icon { font-size: 2rem; color: var(--danger); }
+    .file-info h4 { font-size: 0.9rem; margin-bottom: 2px; }
+    .file-info span { font-size: 0.75rem; color: #888; }
+    /* Floating Action Button for Upload */
+    .fab {
+      position: absolute; bottom: 30px; right: 30px;
+      width: 60px; height: 60px; background: var(--primary); color: white;
+      border-radius: 50%; display: flex; align-items: center; justify-content: center;
+      font-size: 1.5rem; box-shadow: 0 4px 10px rgba(0,128,105,0.4); cursor: pointer;
+      transition: 0.3s; z-index: 50;
+    }
+    .fab:hover { transform: scale(1.1); }
+    /* Chat Modal */
+    .modal-overlay {
+      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+      background: rgba(0,0,0,0.5); z-index: 200; display: flex; align-items: center; justify-content: center;
+      opacity: 0; pointer-events: none; transition: 0.3s;
+    }
+    .modal-overlay.open { opacity: 1; pointer-events: all; }
+    .modal-box {
+      background: white; width: 90%; max-width: 500px; height: 80vh; border-radius: 16px;
+      display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    }
+    .modal-header { padding: 15px; background: var(--primary); color: white; display: flex; justify-content: space-between; align-items: center; }
+    .chat-area { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: #e5ddd5; }
+    .chat-input-area { padding: 10px; background: #f0f0f0; display: flex; gap: 10px; }
+    .chat-input-area input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; }
+    /* Upload Modal Content */
+    .upload-options { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
+    .upload-card {
+      border: 2px dashed #ddd; border-radius: 12px; padding: 20px; text-align: center;
+      cursor: pointer; transition: 0.2s;
+    }
+    .upload-card:hover { border-color: var(--primary); background: #f0fdf9; }
+    /* Sort Bar */
+    .sort-bar {
+      padding: 10px 20px; background: white; border-bottom: 1px solid var(--border);
+      display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-gray);
+    }
+    select { padding: 5px 10px; border-radius: 6px; border: 1px solid #ddd; }
+    @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    /* Mobile Responsive */
+    @media (max-width: 768px) {
+      .sidebar { position: absolute; left: -280px; height: 100%; transition: 0.3s; box-shadow: 2px 0 10px rgba(0,0,0,0.1); }
+      .sidebar.open { left: 0; }
+      .menu-toggle { display: block; }
+    }
+    @media (min-width: 769px) { .menu-toggle { display: none; } }
+    .anycoder-link {
+      font-size: 0.8rem; color: #888; text-decoration: none; margin-top: 20px; display: inline-block;
     }
   </style>
 </head>
 <body>
+  <!-- Login Screen -->
+  <div id="loginScreen">
+    <div class="login-card">
+      <div style="font-size: 3rem; color: var(--primary); margin-bottom: 10px;">
+        <i class="fa-solid fa-graduation-cap"></i>
+      </div>
+      <h1>EduConnect</h1>
+      <p style="color: #666; margin-bottom: 2rem;">Select your role to continue</p>
+      <button class="role-btn" onclick="app.login('admin')">
+        <i class="fa-solid fa-user-shield" style="color: var(--primary);"></i>
+        <div style="text-align: left;">
+          <strong>Admin</strong><br>
+          <span style="font-size: 0.8rem;">Manage content, categories & chat</span>
+        </div>
+      </button>
+      <button class="role-btn" onclick="app.login('student')">
+        <i class="fa-solid fa-user-graduate" style="color: var(--accent);"></i>
+        <div style="text-align: left;">
+          <strong>Student</strong><br>
+          <span style="font-size: 0.8rem;">View assigned materials & chat</span>
+        </div>
       </button>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+        Built with anycoder
       </a>
     </div>
+  </div>
+  <!-- Main App Container -->
+  <div id="appContainer" class="hidden">
+    <!-- Sidebar: Categories (Grades) -->
+    <aside class="sidebar" id="sidebar">
+      <div class="brand">
+        <i class="fa-solid fa-shapes"></i> EduConnect
+      </div>
+      <div class="category-list" id="categoryList">
+        <!-- Categories injected via JS -->
+      </div>
+      <div style="padding: 20px; border-top: 1px solid var(--border);">
+        <button class="btn btn-outline" style="width: 100%;" onclick="app.logout()">
+          <i class="fa-solid fa-sign-out-alt"></i> Logout
+        </button>
+      </div>
+    </aside>
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Top Header -->
+      <header class="top-header">
+        <div class="flex center" style="gap: 15px;">
+          <button class="btn-icon menu-toggle" onclick="app.toggleSidebar()">
+            <i class="fa-solid fa-bars"></i>
           </button>
+          <h3 id="pageTitle">Select a Grade</h3>
+        </div>
+        <div class="user-info">
+          <span id="userName" style="font-weight: 600; font-size: 0.9rem;">User</span>
+          <img src="https://picsum.photos/seed/user/40/40" class="user-avatar" alt="User">
+          <button class="btn-icon" onclick="app.openChat()" title="Messages">
+            <i class="fa-solid fa-comment-dots"></i>
           </button>
         </div>
+      </header>
+      <!-- Subcategory Strip (Subjects) -->
+      <div class="subject-strip" id="subjectStrip">
+        <!-- Subjects injected via JS -->
+      </div>
+      <!-- Sorting / Filter Bar -->
+      <div class="sort-bar" id="sortBar">
+        <i class="fa-solid fa-filter"></i>
+        <span>Sort by:</span>
+        <select id="sortSelect" onchange="app.renderFeed()">
+          <option value="all">All Content</option>
+          <option value="video">Videos Only</option>
+          <option value="pdf">PDFs & Docs</option>
+          <option value="text">Text Only</option>
+        </select>
+      </div>
+      <!-- Feed Area (WhatsApp Style) -->
+      <div class="feed-container" id="feedContainer">
+        <!-- Content injected via JS -->
+      </div>
+      <!-- Floating Action Button -->
+      <div id="fab" class="fab hidden" onclick="app.openUploadModal()">
+        <i class="fa-solid fa-plus"></i>
+      </div>
+    </main>
+  </div>
+  <!-- Upload Modal -->
+  <div class="modal-overlay" id="uploadModal">
+    <div class="modal-box">
+      <div class="modal-header">
+        <h3>Upload Content</h3>
+        <button class="btn-icon" style="color: white;" onclick="app.closeModals()"><i class="fa-solid fa-times"></i></button>
       </div>
+      <div class="upload-options">
+        <div class="upload-card" onclick="app.simulateUpload('video')">
+          <i class="fa-solid fa-video" style="font-size: 2rem; color: var(--primary); margin-bottom: 10px;"></i>
+          <p>Upload Video</p>
+        </div>
+        <div class="upload-card" onclick="app.simulateUpload('pdf')">
+          <i class="fa-solid fa-file-pdf" style="font-size: 2rem; color: var(--danger); margin-bottom: 10px;"></i>
+          <p>Upload PDF</p>
+        </div>
+        <div class="upload-card" onclick="app.simulateUpload('text')">
+          <i class="fa-solid fa-align-left" style="font-size: 2rem; color: var(--accent); margin-bottom: 10px;"></i>
+          <p>Post Text</p>
+        </div>
       </div>
     </div>
+  </div>
   <!-- Chat Modal -->
+  <div class="modal-overlay" id="chatModal">
+    <div class="modal-box">
+      <div class="modal-header">
+        <h3><i class="fa-solid fa-robot"></i> Support Chat</h3>
+        <button class="btn-icon" style="color: white;" onclick="app.closeModals()"><i class="fa-solid fa-times"></i></button>
       </div>
+      <div class="chat-area" id="chatArea">
+        <!-- Chat messages -->
       </div>
+      <div class="chat-input-area">
+        <input type="text" id="chatInput" placeholder="Type a message..." onkeypress="if(event.key === 'Enter') app.sendMessage()">
+        <button class="btn btn-primary" onclick="app.sendMessage()"><i class="fa-solid fa-paper-plane"></i></button>
       </div>
     </div>
   </div>
   <script>
     /**
+     * EduConnect Application Logic
+     * Simulates PHP/MySQL architecture using localStorage and JavaScript objects.
      */
     const app = {
+      // Data Store (Simulating MySQL Tables)
+      data: {
+        currentUser: null,
+        categories: [
+          { id: 1, name: 'Grade 1' },
+          { id: 2, name: 'Grade 2' },
+          { id: 3, name: 'Grade 3' },
+          { id: 4, name: 'Grade 4' },
+          { id: 5, name: 'Grade 5' },
+          { id: 6, name: 'Grade 6' },
+          { id: 7, name: 'Grade 7' },
+          { id: 8, name: 'Grade 8' },
+          { id: 9, name: 'Grade 9' },
+          { id: 10, name: 'Grade 10' },
+          { id: 11, name: 'Grade 11' },
+          { id: 12, name: 'Grade 12' }
+        ],
+        subcategories: [
+          { id: 1, catId: 1, name: 'Mathematics' },
+          { id: 2, catId: 1, name: 'English' },
+          { id: 3, catId: 1, name: 'Science' },
+          { id: 4, catId: 2, name: 'Mathematics' },
+          { id: 5, catId: 2, name: 'English' },
+          { id: 6, catId: 3, name: 'Physics' }, // Example for higher grades
+        ],
+        content: [
+          { id: 1, subId: 1, type: 'video', url: 'https://picsum.photos/seed/vid1/600/300', title: 'Introduction to Addition', author: 'Admin', date: '10:00 AM' },
+          { id: 2, subId: 1, type: 'pdf', title: 'Chapter 1 Exercises', author: 'Admin', date: '10:05 AM' },
+          { id: 3, subId: 2, type: 'text', text: 'Please read pages 10-15 for homework.', author: 'Admin', date: 'Yesterday' },
+          { id: 4, subId: 2, type: 'video', url: 'https://picsum.photos/seed/vid2/600/300', title: 'Vocabulary Lesson', author: 'Admin', date: 'Yesterday' }
+        ],
+        chat: [
+          { sender: 'Admin', text: 'Welcome to the new semester!', time: '09:00 AM' }
+        ]
       },
+      state: {
+        selectedCatId: null,
+        selectedSubId: null
       },
+      // --- Authentication ---
+      login(role) {
+        // Simulate User Session
+        this.data.currentUser = {
+          name: role === 'admin' ? 'Administrator' : 'Student User',
+          role: role,
+          // Students only have access to Grade 1 and 2 for demo purposes
+          access: role === 'student' ? [1, 2] : null
+        };
+        document.getElementById('loginScreen').classList.add('hidden');
+        document.getElementById('appContainer').classList.remove('hidden');
+        document.getElementById('userName').textContent = this.data.currentUser.name;
+        // Show FAB only for Admin
+        if (role === 'admin') {
+          document.getElementById('fab').classList.remove('hidden');
         }
+        this.renderCategories();
+        this.renderChat();
       },
+      logout() {
+        location.reload(); // Simple reload to clear state for this demo
       },
+      // --- Navigation & Rendering ---
+      renderCategories() {
+        const list = document.getElementById('categoryList');
+        list.innerHTML = '';
+        // Filter based on permissions
+        const visibleCats = this.data.categories.filter(c => {
+          if (this.data.currentUser.role === 'admin') return true;
+          return this.data.currentUser.access.includes(c.id);
+        });
+        visibleCats.forEach(cat => {
+          const btn = document.createElement('button');
+          btn.className = `cat-btn ${this.state.selectedCatId === cat.id ? 'active' : ''}`;
+          btn.innerHTML = `<span>${cat.name}</span> <i class="fa-solid fa-chevron-right"></i>`;
+          btn.onclick = () => this.selectCategory(cat);
+          list.appendChild(btn);
+        });
       },
+      selectCategory(cat) {
+        this.state.selectedCatId = cat.id;
+        this.state.selectedSubId = null; // Reset sub selection
+        // UI Updates
+        document.getElementById('pageTitle').textContent = cat.name;
+        this.renderCategories(); // Re-render to update active class
+        // Render Subcategories (Subjects)
+        const strip = document.getElementById('subjectStrip');
+        strip.innerHTML = '';
+        const subs = this.data.subcategories.filter(s => s.catId === cat.id);
+        if (subs.length === 0) {
+          strip.innerHTML = '<span style="color:#888; padding:10px;">No subjects available.</span>';
+          this.renderFeed(); // Clear feed
+          return;
         }
+        subs.forEach(sub => {
+          const pill = document.createElement('div');
+          pill.className = 'subject-pill';
+          pill.textContent = sub.name;
+          pill.onclick = () => this.selectSubject(sub, pill);
+          strip.appendChild(pill);
+        });
+        // Auto-select first subject
+        this.selectSubject(subs[0], strip.children[0]);
       },
+      selectSubject(sub, element) {
+        this.state.selectedSubId = sub.id;
+        // UI Highlight
+        const pills = document.querySelectorAll('.subject-pill');
+        pills.forEach(p => p.classList.remove('active'));
+        if(element) element.classList.add('active');
+        this.renderFeed();
       },
+      // --- Feed Logic (WhatsApp Style) ---
+      renderFeed() {
+        const container = document.getElementById('feedContainer');
+        container.innerHTML = '';
+        const filterType = document.getElementById('sortSelect').value;
+        // Filter Content
+        const items = this.data.content.filter(item => {
+          const matchesSub = item.subId === this.state.selectedSubId;
+          const matchesType = filterType === 'all' || item.type === filterType;
+          return matchesSub && matchesType;
+        });
+        if (items.length === 0) {
+          container.innerHTML = `
+            <div style="text-align:center; margin-top:50px; color:#888;">
+              <i class="fa-solid fa-box-open" style="font-size:3rem; margin-bottom:10px;"></i>
+              <p>No content found for this selection.</p>
+            </div>
+          `;
+          return;
         }
+        items.forEach(item => {
+          const bubble = document.createElement('div');
+          bubble.className = 'msg-bubble';
+          let mediaHtml = '';
+          if (item.type === 'video') {
+            mediaHtml = `
+              <div class="media-preview">
+                <img src="${item.url}" alt="Video Thumb">
+                <div class="play-btn"><i class="fa-regular fa-circle-play"></i></div>
+              </div>
+              <div style="font-weight:600; margin-top:5px;">${item.title}</div>
+            `;
+          } else if (item.type === 'pdf') {
+            mediaHtml = `
+              <div class="file-attach">
+                <div class="file-icon"><i class="fa-solid fa-file-pdf"></i></div>
+                <div class="file-info">
+                  <h4>${item.title}</h4>
+                  <span>PDF Document</span>
+                </div>
+                <div style="margin-left:auto;"><i class="fa-solid fa-download"></i></div>
+              </div>
+            `;
+          } else {
+            mediaHtml = `<div class="msg-content">${item.text}</div>`;
+          }
+          bubble.innerHTML = `
+            <div class="msg-meta">
+              <span>${item.author}</span>
+              <span>${item.date}</span>
+            </div>
+            ${mediaHtml}
+          `;
+          container.appendChild(bubble);
+        });
       },
+      // --- Chat System ---
+      openChat() {
+        document.getElementById('chatModal').classList.add('open');
       },
+      sendMessage() {
+        const input = document.getElementById('chatInput');
+        const text = input.value.trim();
         if (!text) return;
+        // Add User Message
+        this.addChatMessage(this.data.currentUser.name, text);
+        input.value = '';
+        // Simulate Bot/Admin Reply
         setTimeout(() => {
+          const replies = [
+            "Thanks for your message! I'll check it.",
+            "Please check the 'Grade 1' Mathematics section for the update.",
+            "Got it.",
+            "Have you finished the homework?"
+          ];
+          const randomReply = replies[Math.floor(Math.random() * replies.length)];
+          this.addChatMessage('Admin', randomReply);
+        }, 1000);
       },
+      addChatMessage(sender, text) {
+        const area = document.getElementById('chatArea');
         const div = document.createElement('div');
+        const isMe = sender === this.data.currentUser.name;
+        div.className = `msg-bubble ${isMe ? 'sent' : ''}`;
+        // Simplified chat bubble style
+        div.style.maxWidth = '80%';
+        div.innerHTML = `
+           <div style="font-size:0.75rem; color:#666; margin-bottom:2px;">${sender}</div>
+           <div>${text}</div>
+        `;
+        area.appendChild(div);
+        area.scrollTop = area.scrollHeight;
       },
+      renderChat() {
+        // Initial load of chat history
+        const area = document.getElementById('chatArea');
+        area.innerHTML = '';
+        this.data.chat.forEach(c => this.addChatMessage(c.sender, c.text));
       },
+      // --- Admin Simulation: Upload ---
+      openUploadModal() {
+        if (this.data.currentUser.role !== 'admin') return;
+        document.getElementById('uploadModal').classList.add('open');
       },
+      closeModals() {
+        document.querySelectorAll('.modal-overlay').forEach(el => el.classList.remove('open'));
       },
+      simulateUpload(type) {
+        // Simulate adding new content to the DB
+        const newContent = {
+          id: Date.now(),
+          subId: this.state.selectedSubId,
+          type: type,
+          date: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}),
+          author: 'Admin'
+        };
+        if (type === 'video') {
+          newContent.url = `https://picsum.photos/seed/${Date.now()}/600/300`;
+          newContent.title = 'New Video Lesson';
+        } else if (type === 'pdf') {
+          newContent.title = 'Worksheet_' + Math.floor(Math.random() * 100) + '.pdf';
+        } else {
+          newContent.text = 'Notice: Please bring your notebooks tomorrow.';
         }
+        this.data.content.unshift(newContent); // Add to top
+        this.closeModals();
+        this.renderFeed();
+        // Show simple toast feedback (simulated)
+        const fab = document.getElementById('fab');
+        fab.style.background = '#4caf50';
+        setTimeout(() => fab.style.background = '', 1000);
       },
+      toggleSidebar() {
+        document.getElementById('sidebar').classList.toggle('open');
+      }
+    };
+    // Initialize empty state or check login
+    // (Login is handled by buttons on screen)
+  </script>
+</body>
+</html>