Spaces:
Running
Running
| <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; | |
| --primary-dark: #005c4b; | |
| --accent: #34b7f1; | |
| --chaos: #9c27b0; /* Color for the 'Lies' feature */ | |
| --bg-body: #e5ddd5; | |
| --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 ; | |
| } | |
| .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-chaos { | |
| background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3); | |
| } | |
| .btn-chaos:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(37, 117, 252, 0.4); | |
| } | |
| .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; | |
| } | |
| .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 */ | |
| .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); | |
| } | |
| /* Modals */ | |
| .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 Options */ | |
| .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; | |
| } | |
| /* Lie Generator Section */ | |
| .lie-generator-section { | |
| padding: 20px; | |
| border-top: 1px solid #eee; | |
| background: #fafafa; | |
| } | |
| .lie-generator-section h4 { | |
| margin-bottom: 10px; | |
| color: var(--chaos); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .stats-display { | |
| font-size: 0.8rem; | |
| color: #666; | |
| margin-bottom: 10px; | |
| } | |
| /* 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); } | |
| } | |
| /* Loading Spinner */ | |
| .spinner { | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| border-left-color: var(--chaos); | |
| animation: spin 1s linear infinite; | |
| display: none; | |
| margin: 0 auto; | |
| } | |
| @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | |
| /* 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 style="margin-left:auto; font-size:0.8rem;" id="itemCount">0 items</div> | |
| </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 style="flex:1; overflow-y:auto;"> | |
| <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> | |
| <!-- THE 2500 LIES GENERATOR --> | |
| <div class="lie-generator-section"> | |
| <h4><i class="fa-solid fa-database"></i> Data Simulation</h4> | |
| <p style="font-size:0.85rem; color:#666; margin-bottom:15px;"> | |
| Instantly populate the system with fake data entries. | |
| </p> | |
| <button class="btn btn-chaos" style="width:100%; margin-bottom:10px;" onclick="app.generate2500Lies()"> | |
| <i class="fa-solid fa-bolt"></i> Generate 2500 "Lies" | |
| </button> | |
| <button class="btn" style="width:100%; background:#f0f0f0; color:#555;" onclick="app.clearData()"> | |
| <i class="fa-solid fa-trash"></i> Clear All Data | |
| </button> | |
| <div class="spinner" id="loadingSpinner"></div> | |
| <div id="generationStatus" style="text-align:center; margin-top:10px; font-size:0.8rem; color:var(--chaos);"></div> | |
| </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 | |
| * Enhanced with "2500 Lies" Generator | |
| */ | |
| const app = { | |
| // Data Store | |
| 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' }, | |
| { id: 7, catId: 4, name: 'History' }, { id: 8, catId: 5, name: 'Biology' } | |
| ], | |
| 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' } | |
| ], | |
| chat: [ | |
| { sender: 'Admin', text: 'Welcome to the new semester!', time: '09:00 AM' } | |
| ] | |
| }, | |
| state: { | |
| selectedCatId: null, | |
| selectedSubId: null | |
| }, | |
| // --- Authentication --- | |
| login(role) { | |
| this.data.currentUser = { | |
| name: role === 'admin' ? 'Administrator' : 'Student User', | |
| role: role, | |
| 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; | |
| if (role === 'admin') { | |
| document.getElementById('fab').classList.remove('hidden'); | |
| } | |
| this.renderCategories(); | |
| this.renderChat(); | |
| }, | |
| logout() { | |
| location.reload(); | |
| }, | |
| // --- Navigation & Rendering --- | |
| renderCategories() { | |
| const list = document.getElementById('categoryList'); | |
| list.innerHTML = ''; | |
| 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; | |
| document.getElementById('pageTitle').textContent = cat.name; | |
| this.renderCategories(); | |
| 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(); | |
| 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); | |
| }); | |
| if (subs.length > 0) this.selectSubject(subs[0], strip.children[0]); | |
| }, | |
| selectSubject(sub, element) { | |
| this.state.selectedSubId = sub.id; | |
| const pills = document.querySelectorAll('.subject-pill'); | |
| pills.forEach(p => p.classList.remove('active')); | |
| if(element) element.classList.add('active'); | |
| this.renderFeed(); | |
| }, | |
| // --- Feed Logic --- | |
| 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; | |
| }); | |
| document.getElementById('itemCount').textContent = `${items.length} items`; | |
| 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.</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| // Render items | |
| // Note: For 2500 items, direct DOM manipulation can be slow. | |
| // For this demo, we'll use a document fragment for slightly better performance. | |
| const fragment = document.createDocumentFragment(); | |
| 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} | |
| `; | |
| fragment.appendChild(bubble); | |
| }); | |
| container.appendChild(fragment); | |
| }, | |
| // --- Chat System --- | |
| openChat() { document.getElementById('chatModal').classList.add('open'); }, | |
| closeModals() { document.querySelectorAll('.modal-overlay').forEach(el => el.classList.remove('open')); }, | |
| sendMessage() { | |
| const input = document.getElementById('chatInput'); | |
| const text = input.value.trim(); | |
| if (!text) return; | |
| this.addChatMessage(this.data.currentUser.name, text); | |
| input.value = ''; | |
| setTimeout(() => { | |
| const replies = ["I see.", "Interesting point.", "Check the new data uploads.", "Lies detected."]; | |
| this.addChatMessage('Admin', replies[Math.floor(Math.random() * replies.length)]); | |
| }, 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' : ''}`; | |
| 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() { | |
| 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'); | |
| }, | |
| simulateUpload(type) { | |
| 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 check the portal.'; | |
| } | |
| this.data.content.unshift(newContent); | |
| this.closeModals(); | |
| this.renderFeed(); | |
| }, | |
| toggleSidebar() { | |
| document.getElementById('sidebar').classList.toggle('open'); | |
| }, | |
| // --- THE "2500 LIES" GENERATOR --- | |
| generate2500Lies() { | |
| if (!this.state.selectedSubId) { | |
| alert("Please select a Subject first!"); | |
| return; | |
| } | |
| const spinner = document.getElementById('loadingSpinner'); | |
| const status = document.getElementById('generationStatus'); | |
| spinner.style.display = 'block'; | |
| status.textContent = "Fabricating 2500 fake entries..."; | |
| // Allow UI to update before heavy loop | |
| setTimeout(() => { | |
| const adjectives = ["Fake", "False", "Mythical", "Invisible", "Quantum", "Ancient", "Galactic", "Banana", "Impossible", "Theoretical"]; | |
| const nouns = ["Cats", "Gravity", "History", "Math", "Physics", "Chemistry", "Biology", "Art", "Music", "Philosophy", "Computers", "Dinosaurs"]; | |
| const types = ['video', 'pdf', 'text']; | |
| const newEntries = []; | |
| for (let i = 0; i < 2500; i++) { | |
| const adj = adjectives[Math.floor(Math.random() * adjectives.length)]; | |
| const noun = nouns[Math.floor(Math.random() * nouns.length)]; | |
| const type = types[Math.floor(Math.random() * types.length)]; | |
| const entry = { | |
| id: Date.now() + i, | |
| subId: this.state.selectedSubId, // Add to current subject | |
| type: type, | |
| date: new Date().toLocaleTimeString(), | |
| author: 'Bot_Liar_9000' | |
| }; | |
| if (type === 'video') { | |
| entry.url = `https://picsum.photos/seed/${Date.now() + i}/600/300`; | |
| entry.title = `The ${adj} History of ${noun}`; | |
| } else if (type === 'pdf') { | |
| entry.title = `${adj} ${noun} Theory.pdf`; | |
| } else { | |
| entry.text = `Did you know that ${noun} are actually ${adj.toLowerCase()}? It's a fact! (Just kidding)`; | |
| } | |
| newEntries.push(entry); | |
| } | |
| // Prepend to content | |
| this.data.content = [...newEntries, ...this.data.content]; | |
| spinner.style.display = 'none'; | |
| status.textContent = "Generation Complete!"; | |
| setTimeout(() => { | |
| this.closeModals(); | |
| this.renderFeed(); | |
| status.textContent = ""; // Reset for next time | |
| }, 500); | |
| }, 100); | |
| }, | |
| clearData() { | |
| if(confirm("Are you sure you want to delete all content?")) { | |
| this.data.content = []; | |
| this.renderFeed(); | |
| } | |
| } | |
| }; | |
| </script> | |
| </body> | |
| </html> |