Spaces:

tokey4
/

anycoder-1f8d9771

Running

App Files Files Community

tokey4 commited on Dec 17, 2025

Commit

1db94f4

verified ·

1 Parent(s): c21c4b8

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +736 -1168

index.html CHANGED Viewed

@@ -1,1182 +1,750 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>EduLearn - Your Learning Platform</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        :root {
-            --primary: #6366f1;
-            --primary-dark: #4f46e5;
-            --primary-light: #818cf8;
-            --secondary: #0ea5e9;
-            --accent: #f59e0b;
-            --background: #0f172a;
-            --surface: #1e293b;
-            --surface-light: #334155;
-            --text: #f1f5f9;
-            --text-muted: #94a3b8;
-            --success: #10b981;
-            --gradient: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
-        }
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: var(--background);
-            color: var(--text);
-            min-height: 100vh;
-            line-height: 1.6;
-        }
-        /* Header Styles */
-        header {
-            background: rgba(15, 23, 42, 0.95);
-            backdrop-filter: blur(20px);
-            border-bottom: 1px solid var(--surface-light);
-            position: fixed;
-            width: 100%;
-            top: 0;
-            z-index: 1000;
-            padding: 1rem 2rem;
-        }
-        .header-container {
-            max-width: 1400px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            font-size: 1.75rem;
-            font-weight: 700;
-            background: var(--gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .logo i {
-            background: var(--gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        nav {
-            display: flex;
-            align-items: center;
-            gap: 2rem;
-        }
-        nav a {
-            color: var(--text-muted);
-            text-decoration: none;
-            font-weight: 500;
-            transition: color 0.3s ease;
-            position: relative;
-        }
-        nav a:hover {
-            color: var(--text);
-        }
-        nav a::after {
-            content: '';
-            position: absolute;
-            bottom: -5px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: var(--gradient);
-            transition: width 0.3s ease;
-        }
-        nav a:hover::after {
-            width: 100%;
-        }
-        .built-with {
-            color: var(--text-muted);
-            font-size: 0.875rem;
-            text-decoration: none;
-            padding: 0.5rem 1rem;
-            border: 1px solid var(--surface-light);
-            border-radius: 2rem;
-            transition: all 0.3s ease;
-        }
-        .built-with:hover {
-            border-color: var(--primary);
-            color: var(--primary-light);
-        }
-        .mobile-menu-btn {
-            display: none;
-            background: none;
-            border: none;
-            color: var(--text);
-            font-size: 1.5rem;
-            cursor: pointer;
-        }
-        /* Main Content */
-        main {
-            margin-top: 80px;
-            min-height: calc(100vh - 80px);
-        }
-        /* Hero Section */
-        .hero {
-            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%);
-            padding: 4rem 2rem;
-            text-align: center;
-            border-bottom: 1px solid var(--surface-light);
-        }
-        .hero h1 {
-            font-size: clamp(2rem, 5vw, 3.5rem);
-            margin-bottom: 1rem;
-            background: var(--gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .hero p {
-            color: var(--text-muted);
-            font-size: 1.25rem;
-            max-width: 600px;
-            margin: 0 auto 2rem;
-        }
-        .search-box {
-            max-width: 500px;
-            margin: 0 auto;
-            position: relative;
-        }
-        .search-box input {
-            width: 100%;
-            padding: 1rem 1.5rem 1rem 3rem;
-            border: 2px solid var(--surface-light);
-            border-radius: 3rem;
-            background: var(--surface);
-            color: var(--text);
-            font-size: 1rem;
-            transition: all 0.3s ease;
-        }
-        .search-box input:focus {
-            outline: none;
-            border-color: var(--primary);
-            box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
-        }
-        .search-box i {
-            position: absolute;
-            left: 1.25rem;
-            top: 50%;
-            transform: translateY(-50%);
-            color: var(--text-muted);
-        }
-        /* Subjects Grid */
-        .subjects-section {
-            padding: 3rem 2rem;
-            max-width: 1400px;
-            margin: 0 auto;
-        }
-        .section-title {
-            font-size: 1.75rem;
-            margin-bottom: 2rem;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-        .section-title i {
-            color: var(--primary);
-        }
-        .subjects-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 1.5rem;
-        }
-        .subject-card {
-            background: var(--surface);
-            border-radius: 1rem;
-            padding: 1.5rem;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            border: 1px solid var(--surface-light);
-            position: relative;
-            overflow: hidden;
-        }
-        .subject-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 4px;
-            background: var(--gradient);
-            transform: scaleX(0);
-            transition: transform 0.3s ease;
-        }
-        .subject-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-            border-color: var(--primary);
-        }
-        .subject-card:hover::before {
-            transform: scaleX(1);
-        }
-        .subject-icon {
-            width: 60px;
-            height: 60px;
-            border-radius: 1rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-            margin-bottom: 1rem;
-        }
-        .subject-card h3 {
-            font-size: 1.25rem;
-            margin-bottom: 0.5rem;
-        }
-        .subject-card p {
-            color: var(--text-muted);
-            font-size: 0.875rem;
-            margin-bottom: 1rem;
-        }
-        .subject-meta {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            color: var(--text-muted);
-            font-size: 0.875rem;
-        }
-        .subject-meta span {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        /* Subject Colors */
-        .subject-card[data-subject="business"] .subject-icon {
-            background: linear-gradient(135deg, #f59e0b, #d97706);
-        }
-        .subject-card[data-subject="digital"] .subject-icon {
-            background: linear-gradient(135deg, #10b981, #059669);
-        }
-        .subject-card[data-subject="java"] .subject-icon {
-            background: linear-gradient(135deg, #ef4444, #dc2626);
-        }
-        .subject-card[data-subject="dsa"] .subject-icon {
-            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-        }
-        .subject-card[data-subject="peripheral"] .subject-icon {
-            background: linear-gradient(135deg, #06b6d4, #0891b2);
-        }
-        .subject-card[data-subject="web"] .subject-icon {
-            background: linear-gradient(135deg, #ec4899, #db2777);
-        }
-        .subject-card[data-subject="env"] .subject-icon {
-            background: linear-gradient(135deg, #22c55e, #16a34a);
-        }
-        /* Subject Detail View */
-        .subject-detail {
-            display: none;
-            padding: 2rem;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-        .subject-detail.active {
-            display: block;
-        }
-        .back-btn {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            color: var(--text-muted);
-            text-decoration: none;
-            margin-bottom: 2rem;
-            padding: 0.75rem 1.5rem;
-            background: var(--surface);
-            border-radius: 0.5rem;
-            transition: all 0.3s ease;
-            border: none;
-            cursor: pointer;
-            font-size: 1rem;
-        }
-        .back-btn:hover {
-            background: var(--surface-light);
-            color: var(--text);
-        }
-        .subject-header {
-            display: flex;
-            align-items: center;
-            gap: 1.5rem;
-            margin-bottom: 2rem;
-            padding: 2rem;
-            background: var(--surface);
-            border-radius: 1rem;
-            border: 1px solid var(--surface-light);
-        }
-        .subject-header .subject-icon {
-            width: 80px;
-            height: 80px;
-            font-size: 2rem;
-        }
-        .subject-header h2 {
-            font-size: 2rem;
-        }
-        .subject-header p {
-            color: var(--text-muted);
-        }
-        /* Chapters */
-        .chapters-list {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .chapter {
-            background: var(--surface);
-            border-radius: 1rem;
-            border: 1px solid var(--surface-light);
-            overflow: hidden;
-            transition: all 0.3s ease;
-        }
-        .chapter:hover {
-            border-color: var(--primary);
-        }
-        .chapter-header {
-            padding: 1.25rem 1.5rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            cursor: pointer;
-            transition: background 0.3s ease;
-        }
-        .chapter-header:hover {
-            background: var(--surface-light);
-        }
-        .chapter-title {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-        .chapter-number {
-            width: 40px;
-            height: 40px;
-            background: var(--gradient);
-            border-radius: 0.5rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 700;
-        }
-        .chapter-header h4 {
-            font-size: 1.1rem;
-        }
-        .chapter-header span {
-            color: var(--text-muted);
-            font-size: 0.875rem;
-        }
-        .chapter-toggle {
-            color: var(--text-muted);
-            transition: transform 0.3s ease;
-        }
-        .chapter.expanded .chapter-toggle {
-            transform: rotate(180deg);
-        }
-        .chapter-content {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.5s ease;
-        }
-        .chapter.expanded .chapter-content {
-            max-height: 2000px;
-        }
-        .topics-list {
-            padding: 0 1.5rem 1.5rem;
-            display: flex;
-            flex-direction: column;
-            gap: 0.75rem;
-        }
-        .topic {
-            padding: 1rem 1.25rem;
-            background: var(--background);
-            border-radius: 0.75rem;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            border: 1px solid transparent;
-        }
-        .topic:hover {
-            background: var(--surface-light);
-            border-color: var(--primary);
-        }
-        .topic-info {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-        .topic-icon {
-            width: 40px;
-            height: 40px;
-            background: rgba(99, 102, 241, 0.2);
-            border-radius: 0.5rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--primary-light);
-        }
-        .topic-title h5 {
-            font-size: 1rem;
-            margin-bottom: 0.25rem;
-        }
-        .topic-title span {
-            color: var(--text-muted);
-            font-size: 0.875rem;
-        }
-        .topic-action {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            color: var(--primary-light);
-            font-size: 0.875rem;
-        }
-        /* Video Player Section */
-        .video-section {
-            display: none;
-            padding: 2rem;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-        .video-section.active {
-            display: block;
-        }
-        .video-container {
-            background: var(--surface);
-            border-radius: 1rem;
-            overflow: hidden;
-            border: 1px solid var(--surface-light);
-        }
-        .video-wrapper {
-            position: relative;
-            padding-top: 56.25%;
-            background: #000;
-        }
-        .video-wrapper iframe {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            border: none;
-        }
-        .video-placeholder {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            background: linear-gradient(135deg, var(--surface) 0%, var(--background) 100%);
-        }
-        .video-placeholder i {
-            font-size: 5rem;
-            color: var(--primary);
-            margin-bottom: 1rem;
-        }
-        .video-placeholder p {
-            color: var(--text-muted);
-            font-size: 1.25rem;
-        }
-        /* Custom Video Controls */
-        .video-controls {
-            padding: 1.5rem;
-            background: var(--surface);
-        }
-        .progress-bar {
-            width: 100%;
-            height: 6px;
-            background: var(--surface-light);
-            border-radius: 3px;
-            margin-bottom: 1rem;
-            cursor: pointer;
-            overflow: hidden;
-        }
-        .progress-fill {
-            height: 100%;
-            width: 35%;
-            background: var(--gradient);
-            border-radius: 3px;
-            transition: width 0.1s ease;
-        }
-        .controls-row {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .control-group {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-        .control-btn {
-            width: 45px;
-            height: 45px;
-            border: none;
-            background: var(--surface-light);
-            color: var(--text);
-            border-radius: 50%;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1rem;
-        }
-        .control-btn:hover {
-            background: var(--primary);
-            transform: scale(1.1);
-        }
-        .control-btn.play-btn {
-            width: 55px;
-            height: 55px;
-            background: var(--gradient);
-            font-size: 1.25rem;
-        }
-        .volume-control {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-        .volume-slider {
-            width: 100px;
-            height: 6px;
-            background: var(--surface-light);
-            border-radius: 3px;
-            appearance: none;
-            cursor: pointer;
-        }
-        .volume-slider::-webkit-slider-thumb {
-            appearance: none;
-            width: 16px;
-            height: 16px;
-            background: var(--primary);
-            border-radius: 50%;
-            cursor: pointer;
-        }
-        .time-display {
-            color: var(--text-muted);
-            font-size: 0.875rem;
-            font-family: monospace;
-        }
-        .video-info {
-            padding: 1.5rem;
-            border-top: 1px solid var(--surface-light);
-        }
-        .video-info h3 {
-            font-size: 1.5rem;
-            margin-bottom: 0.5rem;
-        }
-        .video-info p {
-            color: var(--text-muted);
-            margin-bottom: 1rem;
-        }
-        .video-tags {
-            display: flex;
-            gap: 0.5rem;
-            flex-wrap: wrap;
-        }
-        .video-tag {
-            padding: 0.5rem 1rem;
-            background: rgba(99, 102, 241, 0.2);
-            color: var(--primary-light);
-            border-radius: 2rem;
-            font-size: 0.875rem;
-        }
-        /* Footer */
-        footer {
-            background: var(--surface);
-            border-top: 1px solid var(--surface-light);
-            padding: 3rem 2rem;
-            margin-top: 4rem;
-        }
-        .footer-content {
-            max-width: 1400px;
-            margin: 0 auto;
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 2rem;
-        }
-        .footer-section h4 {
-            font-size: 1.25rem;
-            margin-bottom: 1rem;
-            color: var(--text);
-        }
-        .footer-section p,
-        .footer-section a {
-            color: var(--text-muted);
-            text-decoration: none;
-            display: block;
-            margin-bottom: 0.5rem;
-            transition: color 0.3s ease;
-        }
-        .footer-section a:hover {
-            color: var(--primary-light);
-        }
-        .footer-bottom {
-            max-width: 1400px;
-            margin: 2rem auto 0;
-            padding-top: 2rem;
-            border-top: 1px solid var(--surface-light);
-            text-align: center;
-            color: var(--text-muted);
-        }
-        /* Responsive */
-        @media (max-width: 768px) {
-            .mobile-menu-btn {
-                display: block;
-            }
-            nav {
-                display: none;
-                position: absolute;
-                top: 100%;
-                left: 0;
-                right: 0;
-                background: var(--surface);
-                flex-direction: column;
-                padding: 1rem;
-                border-bottom: 1px solid var(--surface-light);
-            }
-            nav.active {
-                display: flex;
-            }
-            .hero {
-                padding: 2rem 1rem;
-            }
-            .subjects-section {
-                padding: 2rem 1rem;
-            }
-            .subject-header {
-                flex-direction: column;
-                text-align: center;
-            }
-            .controls-row {
-                flex-wrap: wrap;
-                gap: 1rem;
-            }
-            .volume-slider {
-                width: 60px;
-            }
-            .control-group {
-                gap: 0.5rem;
-            }
-        }
-        /* Animations */
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .subject-card {
-            animation: fadeIn 0.5s ease forwards;
-        }
-        .subject-card:nth-child(1) { animation-delay: 0.1s; }
-        .subject-card:nth-child(2) { animation-delay: 0.2s; }
-        .subject-card:nth-child(3) { animation-delay: 0.3s; }
-        .subject-card:nth-child(4) { animation-delay: 0.4s; }
-        .subject-card:nth-child(5) { animation-delay: 0.5s; }
-        .subject-card:nth-child(6) { animation-delay: 0.6s; }
-        .subject-card:nth-child(7) { animation-delay: 0.7s; }
-        /* Scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: var(--background);
-        }
-        ::-webkit-scrollbar-thumb {
-            background: var(--surface-light);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--primary);
-        }
-    </style>
 </head>
-<body>
-    <header>
-        <div class="header-container">
-            <div class="logo">
-                <i class="fas fa-graduation-cap"></i>
-                EduLearn
-            </div>
-            <nav id="nav">
-                <a href="#" onclick="showHome()">Home</a>
-                <a href="#">Courses</a>
-                <a href="#">About</a>
-                <a href="#">Contact</a>
-                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
-            </nav>
-            <button class="mobile-menu-btn" onclick="toggleMenu()">
-                <i class="fas fa-bars"></i>
-            </button>
-        </div>
-    </header>
-    <main>
-        <!-- Home View -->
-        <section id="homeView">
-            <div class="hero">
-                <h1>Master Your Skills with EduLearn</h1>
-                <p>Explore our comprehensive courses designed to help you excel in your academic journey and beyond.</p>
-                <div class="search-box">
-                    <i class="fas fa-search"></i>
-                    <input type="text" placeholder="Search for subjects, topics, or lessons...">
-                </div>
-            </div>
-            <div class="subjects-section">
-                <h2 class="section-title"><i class="fas fa-book-open"></i> Available Subjects</h2>
-                <div class="subjects-grid" id="subjectsGrid">
-                    <!-- Subject cards will be dynamically inserted -->
-                </div>
             </div>
-        </section>
-        <!-- Subject Detail View -->
-        <section class="subject-detail" id="subjectDetail">
-            <button class="back-btn" onclick="showHome()">
-                <i class="fas fa-arrow-left"></i> Back to Subjects
-            </button>
-            <div class="subject-header" id="subjectHeader">
-                <!-- Dynamic content -->
             </div>
-            <h3 class="section-title"><i class="fas fa-list"></i> Chapters</h3>
-            <div class="chapters-list" id="chaptersList">
-                <!-- Dynamic content -->
             </div>
-        </section>
-        <!-- Video Player View -->
-        <section class="video-section" id="videoSection">
-            <button class="back-btn" onclick="backToSubject()">
-                <i class="fas fa-arrow-left"></i> Back to Chapters
-            </button>
-            <div class="video-container">
-                <div class="video-wrapper">
-                    <div class="video-placeholder" id="videoPlaceholder">
-                        <i class="fas fa-play-circle"></i>
-                        <p>Click play to start learning</p>
-                    </div>
-                </div>
-                <div class="video-controls">
-                    <div class="progress-bar" id="progressBar">
-                        <div class="progress-fill" id="progressFill"></div>
                     </div>
-                    <div class="controls-row">
-                        <div class="control-group">
-                            <button class="control-btn" onclick="skipBack()">
-                                <i class="fas fa-backward"></i>
-                            </button>
-                            <button class="control-btn play-btn" onclick="togglePlay()">
-                                <i class="fas fa-play" id="playIcon"></i>
-                            </button>
-                            <button class="control-btn" onclick="skipForward()">
-                                <i class="fas fa-forward"></i>
-                            </button>
-                            <span class="time-display">05:23 / 15:47</span>
-                        </div>
-                        <div class="control-group">
-                            <div class="volume-control">
-                                <button class="control-btn" onclick="toggleMute()">
-                                    <i class="fas fa-volume-up" id="volumeIcon"></i>
-                                </button>
-                                <input type="range" class="volume-slider" min="0" max="100" value="75">
-                            </div>
-                            <button class="control-btn" onclick="toggleFullscreen()">
-                                <i class="fas fa-expand"></i>
-                            </button>
-                            <button class="control-btn">
-                                <i class="fas fa-cog"></i>
-                            </button>
-                        </div>
                     </div>
                 </div>
-                <div class="video-info" id="videoInfo">
-                    <!-- Dynamic content -->
-                </div>
-            </div>
-        </section>
-    </main>
-    <footer>
-        <div class="footer-content">
-            <div class="footer-section">
-                <h4>EduLearn</h4>
-                <p>Empowering students with quality education and comprehensive learning resources.</p>
-            </div>
-            <div class="footer-section">
-                <h4>Quick Links</h4>
-                <a href="#">Home</a>
-                <a href="#">Courses</a>
-                <a href="#">About Us</a>
-                <a href="#">Contact</a>
-            </div>
-            <div class="footer-section">
-                <h4>Subjects</h4>
-                <a href="#">Business Communication</a>
-                <a href="#">Java Programming</a>
-                <a href="#">Data Structures</a>
-                <a href="#">Web Development</a>
-            </div>
-            <div class="footer-section">
-                <h4>Connect With Us</h4>
-                <p><i class="fas fa-envelope"></i> support@edulearn.com</p>
-                <p><i class="fas fa-phone"></i> +1 234 567 890</p>
             </div>
         </div>
-        <div class="footer-bottom">
-            <p>&copy; 2024 EduLearn. All rights reserved. | <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--primary-light);">Built with anycoder</a></p>
         </div>
-    </footer>
-    <script>
-        // Sample Data
-        const subjects = [
-            {
-                id: 'business',
-                name: 'Business Communication',
-                description: 'Master the art of professional communication in business settings.',
-                icon: 'fa-briefcase',
-                chapters: 8,
-                duration: '24 hours',
-                chaptersData: [
-                    {
-                        id: 1,
-                        title: 'Introduction to Business Communication',
-                        topics: [
-                            { title: 'What is Business Communication?', duration: '12:30' },
-                            { title: 'Importance of Effective Communication', duration: '15:45' },
-                            { title: 'Types of Business Communication', duration: '18:20' },
-                            { title: 'Communication Barriers', duration: '14:10' }
-                        ]
-                    },
-                    {
-                        id: 2,
-                        title: 'Written Communication',
-                        topics: [
-                            { title: 'Business Letter Writing', duration: '20:15' },
-                            { title: 'Email Etiquette', duration: '16:30' },
-                            { title: 'Report Writing', duration: '25:00' },
-                            { title: 'Proposal Writing', duration: '22:45' }
-                        ]
-                    },
-                    {
-                        id: 3,
-                        title: 'Oral Communication',
-                        topics: [
-                            { title: 'Presentation Skills', duration: '18:00' },
-                            { title: 'Meeting Management', duration: '15:30' },
-                            { title: 'Negotiation Techniques', duration: '20:00' }
-                        ]
-                    }
-                ]
-            },
-            {
-                id: 'digital',
-                name: 'Digital Electronics-II',
-                description: 'Advanced concepts in digital circuits and systems design.',
-                icon: 'fa-microchip',
-                chapters: 10,
-                duration: '32 hours',
-                chaptersData: [
-                    {
-                        id: 1,
-                        title: 'Sequential Logic Circuits',
-                        topics: [
-                            { title: 'Flip-Flops Types and Applications', duration: '22:30' },
-                            { title: 'Registers and Counters', duration: '25:15' },
-                            { title: 'Shift Registers', duration: '18:45' }
-                        ]
-                    },
-                    {
-                        id: 2,
-                        title: 'Memory Devices',
-                        topics: [
-                            { title: 'RAM and ROM Architecture', duration: '28:00' },
-                            { title: 'Flash Memory', duration: '20:30' },
-                            { title: 'Memory Interfacing', duration: '24:15' }
-                        ]
-                    },
-                    {
-                        id: 3,
-                        title: 'Programmable Logic Devices',
-                        topics: [
-                            { title: 'Introduction to PLDs', duration: '15:00' },
-                            { title: 'FPGA Architecture', duration: '30:00' },
-                            { title: 'VHDL Basics', duration: '35:00' }
-                        ]
-                    }
-                ]
-            },
-            {
-                id: 'java',
-                name: 'Java Programming',
-                description: 'Learn object-oriented programming with Java from basics to advanced.',
-                icon: 'fa-code',
-                chapters: 12,
-                duration: '40 hours',
-                chaptersData: [
-                    {
-                        id: 1,
-                        title: 'Java Fundamentals',
-                        topics: [
-                            { title: 'Introduction to Java', duration: '15:00' },
-                            { title: 'Variables and Data Types', duration: '20:30' },
-                            { title: 'Operators in Java', duration: '18:15' },
-                            { title: 'Control Statements', duration: '25:00' }
-                        ]
-                    },
-                    {
-                        id: 2,
-                        title: 'Object-Oriented Programming',
-                        topics: [
-                            { title: 'Classes and Objects', duration: '28:00' },
-                            { title: 'Inheritance', duration: '32:15' },
-                            { title: 'Polymorphism', duration: '26:30' },
-                            { title: 'Abstraction and Encapsulation', duration: '24:00' }
-                        ]
-                    },
-                    {
-                        id: 3,
-                        title: 'Exception Handling',
-                        topics: [
-                            { title: 'Try-Catch Blocks', duration: '18:00' },
-                            { title: 'Custom Exceptions', duration: '15:30' },
-                            { title: 'Best Practices', duration: '12:45' }
-                        ]
-                    },
-                    {
-                        id: 4,
-                        title: 'Collections Framework',
-                        topics: [
-                            { title: 'List Interface', duration: '22:00' },
-                            { title: 'Set and Map', duration: '25:30' },
-                            { title: 'Iterators', duration: '16:00' }
-                        ]
-                    }
-                ]
-            },
-            {
-                id: 'dsa',
-                name: 'Data Structure & Algorithm',
-                description: 'Master fundamental data structures and algorithmic problem solving.',
-                icon: 'fa-project-diagram',
-                chapters: 15,
-                duration: '48 hours',
-                chaptersData: [
-                    {
-                        id: 1,
-                        title: 'Arrays and Strings',
-                        topics: [
-                            { title: 'Array Operations', duration: '20:00' },
-                            { title: 'String Manipulation', duration: '22:30' },
-                            { title: 'Two Pointer Technique', duration: '25:15' }
-                        ]
-                    },
-                    {
-                        id: 2,
-                        title: 'Linked Lists',
-                        topics: [
-                            { title: 'Singly Linked List', duration: '28:00' },
-                            { title: 'Doubly Linked List', duration: '24:30' },
-                            { title: 'Circular Linked List', duration: '20:00' }
-                        ]
-                    },
-                    {
-                        id: 3,
-                        title: 'Stacks and Queues',
-                        topics: [
-                            { title: 'Stack Implementation', duration: '18:00' },
-                            { title: 'Queue Variations', duration: '22:00' },
-                            { title: 'Applications', duration: '25:30' }
-                        ]
-                    },
-                    {
-                        id: 4,
-                        title: 'Trees and Graphs',
-                        topics: [
-                            { title: 'Binary Trees', duration: '30:00' },
-                            { title: 'BST Operations', duration: '28:00' },
-                            { title: 'Graph Traversals', duration: '35:00' }
-                        ]
-                    }
-                ]
-            },
-            {
-                id: 'peripheral',
-                name: 'Computer Peripherals & Interfacing',
-                description: 'Understanding hardware components and their interfacing techniques.',
-                icon: 'fa-keyboard',
-                chapters: 9,
-                duration: '28 hours',
-                chaptersData: [
-                    {
-                        id: 1,
-                        title: 'Input Devices',
-                        topics: [
-                            { title: 'Keyboard Interfacing', duration: '20:00' },
-                            { title: 'Mouse and Touchpad', duration: '18:30' },
-                            { title: 'Scanner Technology', duration: '22:15' }
-                        ]
-                    },
-                    {
-                        id: 2,
-                        title: 'Output Devices',
-                        topics: [
-                            { title: 'Display Technologies', duration: '25:00' },
-                            { title: 'Printer Types', duration: '20:30' },
-                            { title: 'Audio Systems', duration: '18:00' }
-                        ]
-                    },
-                    {
-                        id: 3,
-                        title: 'Storage Devices',
-                        topics: [
-                            { title: 'HDD Architecture', duration: '28:00' },
-                            { title: 'SSD Technology', duration: '24:00' },
-                            { title: 'Optical Storage', duration: '16:30' }
-                        ]
-                    }
-                ]
-            },
-            {
-                id: 'web',
-                name: 'Web Design & Development - I',
-                description: 'Create stunning websites with HTML, CSS, and JavaScript.',
-                icon: 'fa-globe',
-                chapters: 11,
-                duration: '36 hours',
-                chaptersData: [
-                    {
-                        id: 1,
-                        title: 'HTML Fundamentals',
-                        topics: [
-                            { title: 'HTML Structure', duration: '15:00' },
-                            { title: 'Semantic Elements', duration: '18:30' },

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>EduLearn - Your Learning Platform</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: '#6366f1',
+            'primary-dark': '#4f46e5',
+            'primary-light': '#818cf8',
+            secondary: '#0ea5e9',
+            accent: '#f59e0b',
+            background: '#0f172a',
+            surface: '#1e293b',
+            'surface-light': '#334155',
+            'text-primary': '#f1f5f9',
+            'text-muted': '#94a3b8',
+            success: '#10b981',
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    .gradient-text {
+      background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .gradient-bg {
+      background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
+    }
+    .gradient-border::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
+      transform: scaleX(0);
+      transition: transform 0.3s ease;
+    }
+    .gradient-border:hover::before {
+      transform: scaleX(1);
+    }
+    /* Scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #0f172a;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #334155;
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: #6366f1;
+    }
+    /* Animations */
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .animate-fade-in {
+      animation: fadeIn 0.5s ease forwards;
+    }
+    .delay-100 { animation-delay: 0.1s; }
+    .delay-200 { animation-delay: 0.2s; }
+    .delay-300 { animation-delay: 0.3s; }
+    .delay-400 { animation-delay: 0.4s; }
+    .delay-500 { animation-delay: 0.5s; }
+    .delay-600 { animation-delay: 0.6s; }
+    .delay-700 { animation-delay: 0.7s; }
+  </style>
 </head>
+<body class="bg-background text-text-primary min-h-screen leading-relaxed">
+  <!-- Header -->
+  <header class="bg-background/95 backdrop-blur-xl border-b border-surface-light fixed w-full top-0 z-50 px-4 md:px-8 py-4">
+    <div class="max-w-7xl mx-auto flex justify-between items-center">
+      <div class="flex items-center gap-3 text-2xl font-bold">
+        <i class="fas fa-graduation-cap gradient-text"></i>
+        <span class="gradient-text">EduLearn</span>
+      </div>
+      <nav id="nav" class="hidden md:flex items-center gap-8">
+        <a href="#" onclick="showHome()" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300 relative group">
+          Home
+          <span class="absolute bottom-0 left-0 w-0 h-0.5 gradient-bg group-hover:w-full transition-all duration-300"></span>
+        </a>
+        <a href="#" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300 relative group">
+          Courses
+          <span class="absolute bottom-0 left-0 w-0 h-0.5 gradient-bg group-hover:w-full transition-all duration-300"></span>
+        </a>
+        <a href="#" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300 relative group">
+          About
+          <span class="absolute bottom-0 left-0 w-0 h-0.5 gradient-bg group-hover:w-full transition-all duration-300"></span>
+        </a>
+        <a href="#" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300 relative group">
+          Contact
+          <span class="absolute bottom-0 left-0 w-0 h-0.5 gradient-bg group-hover:w-full transition-all duration-300"></span>
+        </a>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
+           class="text-text-muted text-sm px-4 py-2 border border-surface-light rounded-full hover:border-primary hover:text-primary-light transition-all duration-300">
+          Built with anycoder
+        </a>
+      </nav>
+      <button class="md:hidden text-text-primary text-xl" onclick="toggleMenu()">
+        <i class="fas fa-bars"></i>
+      </button>
+    </div>
+    <!-- Mobile Menu -->
+    <nav id="mobileNav" class="hidden md:hidden flex-col gap-4 mt-4 pb-4 border-t border-surface-light pt-4">
+      <a href="#" onclick="showHome()" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300">Home</a>
+      <a href="#" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300">Courses</a>
+      <a href="#" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300">About</a>
+      <a href="#" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300">Contact</a>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
+         class="text-text-muted text-sm px-4 py-2 border border-surface-light rounded-full hover:border-primary hover:text-primary-light transition-all duration-300 w-fit">
+        Built with anycoder
+      </a>
+    </nav>
+  </header>
+  <main class="mt-20 min-h-[calc(100vh-80px)]">
+    <!-- Home View -->
+    <section id="homeView">
+      <!-- Hero Section -->
+      <div class="bg-gradient-to-br from-primary/10 to-secondary/10 py-16 px-4 md:px-8 text-center border-b border-surface-light">
+        <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 gradient-text">Master Your Skills with EduLearn</h1>
+        <p class="text-text-muted text-lg md:text-xl max-w-2xl mx-auto mb-8">
+          Explore our comprehensive courses designed to help you excel in your academic journey and beyond.
+        </p>
+        <div class="max-w-lg mx-auto relative">
+          <i class="fas fa-search absolute left-5 top-1/2 -translate-y-1/2 text-text-muted"></i>
+          <input type="text" placeholder="Search for subjects, topics, or lessons..."
+                 class="w-full py-4 px-6 pl-12 border-2 border-surface-light rounded-full bg-surface text-text-primary text-base focus:outline-none focus:border-primary focus:shadow-lg focus:shadow-primary/20 transition-all duration-300">
+        </div>
+      </div>
+      <!-- Subjects Grid -->
+      <div class="py-12 px-4 md:px-8 max-w-7xl mx-auto">
+        <h2 class="text-2xl font-bold mb-8 flex items-center gap-3">
+          <i class="fas fa-book-open text-primary"></i> Available Subjects
+        </h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="subjectsGrid">
+          <!-- Subject cards will be dynamically inserted -->
+        </div>
+      </div>
+    </section>
+    <!-- Subject Detail View -->
+    <section class="hidden py-8 px-4 md:px-8 max-w-6xl mx-auto" id="subjectDetail">
+      <button class="inline-flex items-center gap-2 text-text-muted px-6 py-3 bg-surface rounded-lg hover:bg-surface-light hover:text-text-primary transition-all duration-300 mb-8" onclick="showHome()">
+        <i class="fas fa-arrow-left"></i> Back to Subjects
+      </button>
+      <div class="flex flex-col md:flex-row items-center gap-6 mb-8 p-8 bg-surface rounded-2xl border border-surface-light" id="subjectHeader">
+        <!-- Dynamic content -->
+      </div>
+      <h3 class="text-xl font-bold mb-6 flex items-center gap-3">
+        <i class="fas fa-list text-primary"></i> Chapters
+      </h3>
+      <div class="flex flex-col gap-4" id="chaptersList">
+        <!-- Dynamic content -->
+      </div>
+    </section>
+    <!-- Video Player View -->
+    <section class="hidden py-8 px-4 md:px-8 max-w-6xl mx-auto" id="videoSection">
+      <button class="inline-flex items-center gap-2 text-text-muted px-6 py-3 bg-surface rounded-lg hover:bg-surface-light hover:text-text-primary transition-all duration-300 mb-8" onclick="backToSubject()">
+        <i class="fas fa-arrow-left"></i> Back to Chapters
+      </button>
+      <div class="bg-surface rounded-2xl overflow-hidden border border-surface-light">
+        <div class="relative pt-[56.25%] bg-black">
+          <div class="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-surface to-background" id="videoPlaceholder">
+            <i class="fas fa-play-circle text-7xl text-primary mb-4"></i>
+            <p class="text-text-muted text-xl">Click play to start learning</p>
+          </div>
+        </div>
+        <!-- Video Controls -->
+        <div class="p-6 bg-surface">
+          <div class="w-full h-1.5 bg-surface-light rounded-full mb-4 cursor-pointer overflow-hidden" id="progressBar">
+            <div class="h-full w-[35%] gradient-bg rounded-full transition-all duration-100" id="progressFill"></div>
+          </div>
+          <div class="flex flex-wrap justify-between items-center gap-4">
+            <div class="flex items-center gap-3">
+              <button class="w-11 h-11 bg-surface-light text-text-primary rounded-full hover:bg-primary hover:scale-110 transition-all duration-300 flex items-center justify-center" onclick="skipBack()">
+                <i class="fas fa-backward"></i>
+              </button>
+              <button class="w-14 h-14 gradient-bg text-white rounded-full hover:scale-110 transition-all duration-300 flex items-center justify-center text-xl" onclick="togglePlay()">
+                <i class="fas fa-play" id="playIcon"></i>
+              </button>
+              <button class="w-11 h-11 bg-surface-light text-text-primary rounded-full hover:bg-primary hover:scale-110 transition-all duration-300 flex items-center justify-center" onclick="skipForward()">
+                <i class="fas fa-forward"></i>
+              </button>
+              <span class="text-text-muted text-sm font-mono">05:23 / 15:47</span>
             </div>
+            <div class="flex items-center gap-3">
+              <div class="flex items-center gap-3">
+                <button class="w-11 h-11 bg-surface-light text-text-primary rounded-full hover:bg-primary hover:scale-110 transition-all duration-300 flex items-center justify-center" onclick="toggleMute()">
+                  <i class="fas fa-volume-up" id="volumeIcon"></i>
+                </button>
+                <input type="range" class="w-20 md:w-24 h-1.5 bg-surface-light rounded-full appearance-none cursor-pointer accent-primary" min="0" max="100" value="75">
+              </div>
+              <button class="w-11 h-11 bg-surface-light text-text-primary rounded-full hover:bg-primary hover:scale-110 transition-all duration-300 flex items-center justify-center" onclick="toggleFullscreen()">
+                <i class="fas fa-expand"></i>
+              </button>
+              <button class="w-11 h-11 bg-surface-light text-text-primary rounded-full hover:bg-primary hover:scale-110 transition-all duration-300 flex items-center justify-center">
+                <i class="fas fa-cog"></i>
+              </button>
             </div>
+          </div>
+        </div>
+        <div class="p-6 border-t border-surface-light" id="videoInfo">
+          <!-- Dynamic content -->
+        </div>
+      </div>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="bg-surface border-t border-surface-light py-12 px-4 md:px-8 mt-16">
+    <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+      <div>
+        <h4 class="text-xl font-bold mb-4">EduLearn</h4>
+        <p class="text-text-muted">Empowering students with quality education and comprehensive learning resources.</p>
+      </div>
+      <div>
+        <h4 class="text-xl font-bold mb-4">Quick Links</h4>
+        <a href="#" class="block text-text-muted hover:text-primary-light transition-colors duration-300 mb-2">Home</a>
+        <a href="#" class="block text-text-muted hover:text-primary-light transition-colors duration-300 mb-2">Courses</a>
+        <a href="#" class="block text-text-muted hover:text-primary-light transition-colors duration-300 mb-2">About Us</a>
+        <a href="#" class="block text-text-muted hover:text-primary-light transition-colors duration-300">Contact</a>
+      </div>
+      <div>
+        <h4 class="text-xl font-bold mb-4">Subjects</h4>
+        <a href="#" class="block text-text-muted hover:text-primary-light transition-colors duration-300 mb-2">Business Communication</a>
+        <a href="#" class="block text-text-muted hover:text-primary-light transition-colors duration-300 mb-2">Java Programming</a>
+        <a href="#" class="block text-text-muted hover:text-primary-light transition-colors duration-300 mb-2">Data Structures</a>
+        <a href="#" class="block text-text-muted hover:text-primary-light transition-colors duration-300">Web Development</a>
+      </div>
+      <div>
+        <h4 class="text-xl font-bold mb-4">Connect With Us</h4>
+        <p class="text-text-muted mb-2"><i class="fas fa-envelope mr-2"></i> support@edulearn.com</p>
+        <p class="text-text-muted"><i class="fas fa-phone mr-2"></i> +1 234 567 890</p>
+      </div>
+    </div>
+    <div class="max-w-7xl mx-auto mt-8 pt-8 border-t border-surface-light text-center text-text-muted">
+      <p>&copy; 2024 EduLearn. All rights reserved. |
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-primary-light hover:underline">Built with anycoder</a>
+      </p>
+    </div>
+  </footer>
+  <script>
+    // Sample Data
+    const subjects = [
+      {
+        id: 'business',
+        name: 'Business Communication',
+        description: 'Master the art of professional communication in business settings.',
+        icon: 'fa-briefcase',
+        color: 'from-amber-500 to-amber-600',
+        chapters: 8,
+        duration: '24 hours',
+        chaptersData: [
+          {
+            id: 1,
+            title: 'Introduction to Business Communication',
+            topics: [
+              { title: 'What is Business Communication?', duration: '12:30' },
+              { title: 'Importance of Effective Communication', duration: '15:45' },
+              { title: 'Types of Business Communication', duration: '18:20' },
+              { title: 'Communication Barriers', duration: '14:10' }
+            ]
+          },
+          {
+            id: 2,
+            title: 'Written Communication',
+            topics: [
+              { title: 'Business Letter Writing', duration: '20:15' },
+              { title: 'Email Etiquette', duration: '16:30' },
+              { title: 'Report Writing', duration: '25:00' },
+              { title: 'Proposal Writing', duration: '22:45' }
+            ]
+          },
+          {
+            id: 3,
+            title: 'Oral Communication',
+            topics: [
+              { title: 'Presentation Skills', duration: '18:00' },
+              { title: 'Meeting Management', duration: '15:30' },
+              { title: 'Negotiation Techniques', duration: '20:00' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'digital',
+        name: 'Digital Electronics-II',
+        description: 'Advanced concepts in digital circuits and systems design.',
+        icon: 'fa-microchip',
+        color: 'from-emerald-500 to-emerald-600',
+        chapters: 10,
+        duration: '32 hours',
+        chaptersData: [
+          {
+            id: 1,
+            title: 'Sequential Logic Circuits',
+            topics: [
+              { title: 'Flip-Flops Types and Applications', duration: '22:30' },
+              { title: 'Registers and Counters', duration: '25:15' },
+              { title: 'Shift Registers', duration: '18:45' }
+            ]
+          },
+          {
+            id: 2,
+            title: 'Memory Devices',
+            topics: [
+              { title: 'RAM and ROM Architecture', duration: '28:00' },
+              { title: 'Flash Memory', duration: '20:30' },
+              { title: 'Memory Interfacing', duration: '24:15' }
+            ]
+          },
+          {
+            id: 3,
+            title: 'Programmable Logic Devices',
+            topics: [
+              { title: 'Introduction to PLDs', duration: '15:00' },
+              { title: 'FPGA Architecture', duration: '30:00' },
+              { title: 'VHDL Basics', duration: '35:00' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'java',
+        name: 'Java Programming',
+        description: 'Learn object-oriented programming with Java from basics to advanced.',
+        icon: 'fa-code',
+        color: 'from-red-500 to-red-600',
+        chapters: 12,
+        duration: '40 hours',
+        chaptersData: [
+          {
+            id: 1,
+            title: 'Java Fundamentals',
+            topics: [
+              { title: 'Introduction to Java', duration: '15:00' },
+              { title: 'Variables and Data Types', duration: '20:30' },
+              { title: 'Operators in Java', duration: '18:15' },
+              { title: 'Control Statements', duration: '25:00' }
+            ]
+          },
+          {
+            id: 2,
+            title: 'Object-Oriented Programming',
+            topics: [
+              { title: 'Classes and Objects', duration: '28:00' },
+              { title: 'Inheritance', duration: '32:15' },
+              { title: 'Polymorphism', duration: '26:30' },
+              { title: 'Abstraction and Encapsulation', duration: '24:00' }
+            ]
+          },
+          {
+            id: 3,
+            title: 'Exception Handling',
+            topics: [
+              { title: 'Try-Catch Blocks', duration: '18:00' },
+              { title: 'Custom Exceptions', duration: '15:30' },
+              { title: 'Best Practices', duration: '12:45' }
+            ]
+          },
+          {
+            id: 4,
+            title: 'Collections Framework',
+            topics: [
+              { title: 'List Interface', duration: '22:00' },
+              { title: 'Set and Map', duration: '25:30' },
+              { title: 'Iterators', duration: '16:00' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'dsa',
+        name: 'Data Structure & Algorithm',
+        description: 'Master fundamental data structures and algorithmic problem solving.',
+        icon: 'fa-project-diagram',
+        color: 'from-violet-500 to-violet-600',
+        chapters: 15,
+        duration: '48 hours',
+        chaptersData: [
+          {
+            id: 1,
+            title: 'Arrays and Strings',
+            topics: [
+              { title: 'Array Operations', duration: '20:00' },
+              { title: 'String Manipulation', duration: '22:30' },
+              { title: 'Two Pointer Technique', duration: '25:15' }
+            ]
+          },
+          {
+            id: 2,
+            title: 'Linked Lists',
+            topics: [
+              { title: 'Singly Linked List', duration: '28:00' },
+              { title: 'Doubly Linked List', duration: '24:30' },
+              { title: 'Circular Linked List', duration: '20:00' }
+            ]
+          },
+          {
+            id: 3,
+            title: 'Stacks and Queues',
+            topics: [
+              { title: 'Stack Implementation', duration: '18:00' },
+              { title: 'Queue Variations', duration: '22:00' },
+              { title: 'Applications', duration: '25:30' }
+            ]
+          },
+          {
+            id: 4,
+            title: 'Trees and Graphs',
+            topics: [
+              { title: 'Binary Trees', duration: '30:00' },
+              { title: 'BST Operations', duration: '28:00' },
+              { title: 'Graph Traversals', duration: '35:00' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'peripheral',
+        name: 'Computer Peripherals & Interfacing',
+        description: 'Understanding hardware components and their interfacing techniques.',
+        icon: 'fa-keyboard',
+        color: 'from-cyan-500 to-cyan-600',
+        chapters: 9,
+        duration: '28 hours',
+        chaptersData: [
+          {
+            id: 1,
+            title: 'Input Devices',
+            topics: [
+              { title: 'Keyboard Interfacing', duration: '20:00' },
+              { title: 'Mouse and Touchpad', duration: '18:30' },
+              { title: 'Scanner Technology', duration: '22:15' }
+            ]
+          },
+          {
+            id: 2,
+            title: 'Output Devices',
+            topics: [
+              { title: 'Display Technologies', duration: '25:00' },
+              { title: 'Printer Types', duration: '20:30' },
+              { title: 'Audio Systems', duration: '18:00' }
+            ]
+          },
+          {
+            id: 3,
+            title: 'Storage Devices',
+            topics: [
+              { title: 'HDD Architecture', duration: '28:00' },
+              { title: 'SSD Technology', duration: '24:00' },
+              { title: 'Optical Storage', duration: '16:30' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'web',
+        name: 'Web Design & Development',
+        description: 'Create stunning websites with HTML, CSS, and JavaScript.',
+        icon: 'fa-globe',
+        color: 'from-pink-500 to-pink-600',
+        chapters: 11,
+        duration: '36 hours',
+        chaptersData: [
+          {
+            id: 1,
+            title: 'HTML Fundamentals',
+            topics: [
+              { title: 'HTML Structure', duration: '15:00' },
+              { title: 'Semantic Elements', duration: '18:30' },
+              { title: 'Forms and Inputs', duration: '22:00' }
+            ]
+          },
+          {
+            id: 2,
+            title: 'CSS Styling',
+            topics: [
+              { title: 'Selectors and Properties', duration: '20:00' },
+              { title: 'Flexbox Layout', duration: '25:30' },
+              { title: 'CSS Grid', duration: '28:00' }
+            ]
+          },
+          {
+            id: 3,
+            title: 'JavaScript Basics',
+            topics: [
+              { title: 'Variables and Functions', duration: '22:00' },
+              { title: 'DOM Manipulation', duration: '30:00' },
+              { title: 'Event Handling', duration: '25:00' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'env',
+        name: 'Environmental Studies',
+        description: 'Understanding environmental issues and sustainable development.',
+        icon: 'fa-leaf',
+        color: 'from-green-500 to-green-600',
+        chapters: 7,
+        duration: '20 hours',
+        chaptersData: [
+          {
+            id: 1,
+            title: 'Introduction to Environment',
+            topics: [
+              { title: 'Ecosystems and Biodiversity', duration: '18:00' },
+              { title: 'Natural Resources', duration: '22:30' },
+              { title: 'Environmental Pollution', duration: '25:00' }
+            ]
+          },
+          {
+            id: 2,
+            title: 'Sustainable Development',
+            topics: [
+              { title: 'Renewable Energy', duration: '20:00' },
+              { title: 'Waste Management', duration: '18:30' },
+              { title: 'Green Technologies', duration: '24:00' }
+            ]
+          },
+          {
+            id: 3,
+            title: 'Environmental Policies',
+            topics: [
+              { title: 'Environmental Laws', duration: '22:00' },
+              { title: 'International Agreements', duration: '20:00' },
+              { title: 'Case Studies', duration: '28:00' }
+            ]
+          }
+        ]
+      }
+    ];
+    let currentSubject = null;
+    let isPlaying = false;
+    let isMuted = false;
+    // Initialize
+    document.addEventListener('DOMContentLoaded', () => {
+      renderSubjects();
+    });
+    function toggleMenu() {
+      const mobileNav = document.getElementById('mobileNav');
+      mobileNav.classList.toggle('hidden');
+      mobileNav.classList.toggle('flex');
+    }
+    function renderSubjects() {
+      const grid = document.getElementById('subjectsGrid');
+      grid.innerHTML = subjects.map((subject, index) => `
+        <div class="bg-surface rounded-2xl p-6 cursor-pointer transition-all duration-300 border border-surface-light relative overflow-hidden gradient-border hover:-translate-y-1 hover:shadow-2xl hover:shadow-black/30 hover:border-primary animate-fade-in delay-${(index + 1) * 100}"
+             data-subject="${subject.id}" onclick="showSubject('${subject.id}')">
+          <div class="w-16 h-16 rounded-xl flex items-center justify-center text-2xl mb-4 bg-gradient-to-br ${subject.color} text-white">
+            <i class="fas ${subject.icon}"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-2">${subject.name}</h3>
+          <p class="text-text-muted text-sm mb-4">${subject.description}</p>
+          <div class="flex justify-between items-center text-text-muted text-sm">
+            <span class="flex items-center gap-2"><i class="fas fa-book"></i> ${subject.chapters} Chapters</span>
+            <span class="flex items-center gap-2"><i class="fas fa-clock"></i> ${subject.duration}</span>
+          </div>
+        </div>
+      `).join('');
+    }
+    function showSubject(subjectId) {
+      currentSubject = subjects.find(s => s.id === subjectId);
+      if (!currentSubject) return;
+      document.getElementById('homeView').classList.add('hidden');
+      document.getElementById('subjectDetail').classList.remove('hidden');
+      document.getElementById('videoSection').classList.add('hidden');
+      // Render subject header
+      const header = document.getElementById('subjectHeader');
+      header.innerHTML = `
+        <div class="w-20 h-20 rounded-2xl flex items-center justify-center text-3xl bg-gradient-to-br ${currentSubject.color} text-white">
+          <i class="fas ${currentSubject.icon}"></i>
+        </div>
+        <div class="text-center md:text-left">
+          <h2 class="text-3xl font-bold mb-2">${currentSubject.name}</h2>
+          <p class="text-text-muted">${currentSubject.description}</p>
+          <div class="flex flex-wrap justify-center md:justify-start gap-4 mt-4 text-text-muted text-sm">
+            <span class="flex items-center gap-2"><i class="fas fa-book text-primary"></i> ${currentSubject.chapters} Chapters</span>
+            <span class="flex items-center gap-2"><i class="fas fa-clock text-primary"></i> ${currentSubject.duration}</span>
+            <span class="flex items-center gap-2"><i class="fas fa-users text-primary"></i> 1,234 Students</span>
+          </div>
+        </div>
+      `;
+      // Render chapters
+      const chaptersList = document.getElementById('chaptersList');
+      chaptersList.innerHTML = currentSubject.chaptersData.map(chapter => `
+        <div class="bg-surface rounded-2xl border border-surface-light overflow-hidden transition-all duration-300 hover:border-primary" id="chapter-${chapter.id}">
+          <div class="p-5 flex justify-between items-center cursor-pointer hover:bg-surface-light transition-colors duration-300" onclick="toggleChapter(${chapter.id})">
+            <div class="flex items-center gap-4">
+              <div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center font-bold text-white">
+                ${chapter.id}
+              </div>
+              <div>
+                <h4 class="text-lg font-semibold">${chapter.title}</h4>
+                <span class="text-text-muted text-sm">${chapter.topics.length} Topics</span>
+              </div>
             </div>
+            <i class="fas fa-chevron-down text-text-muted transition-transform duration-300" id="toggle-${chapter.id}"></i>
+          </div>
+          <div class="max-h-0 overflow-hidden transition-all duration-500" id="content-${chapter.id}">
+            <div class="px-5 pb-5 flex flex-col gap-3">
+              ${chapter.topics.map((topic, idx) => `
+                <div class="p-4 bg-background rounded-xl flex items-center justify-between cursor-pointer hover:bg-surface-light hover:border-primary border border-transparent transition-all duration-300" onclick="playTopic('${topic.title}', '${topic.duration}')">
+                  <div class="flex items-center gap-4">
+                    <div class="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center text-primary-light">
+                      <i class="fas fa-play"></i>
                     </div>
+                    <div>
+                      <h5 class="font-medium">${topic.title}</h5>
+                      <span class="text-text-muted text-sm">${topic.duration}</span>
                     </div>
+                  </div>
+                  <div class="flex items-center gap-2 text-primary-light text-sm">
+                    <span class="hidden sm:inline">Watch Now</span>
+                    <i class="fas fa-arrow-right"></i>
+                  </div>
                 </div>
+              `).join('')}
             </div>
+          </div>
         </div>
+      `).join('');
+    }
+    function toggleChapter(chapterId) {
+      const content = document.getElementById(`content-${chapterId}`);
+      const toggle = document.getElementById(`toggle-${chapterId}`);
+      if (content.style.maxHeight && content.style.maxHeight !== '0px') {
+        content.style.maxHeight = '0px';
+        toggle.style.transform = 'rotate(0deg)';
+      } else {
+        content.style.maxHeight = content.scrollHeight + 'px';
+        toggle.style.transform = 'rotate(180deg)';
+      }
+    }
+    function showHome() {
+      document.getElementById('homeView').classList.remove('hidden');
+      document.getElementById('subjectDetail').classList.add('hidden');
+      document.getElementById('videoSection').classList.add('hidden');
+    }
+    function playTopic(title, duration) {
+      document.getElementById('homeView').classList.add('hidden');
+      document.getElementById('subjectDetail').classList.add('hidden');
+      document.getElementById('videoSection').classList.remove('hidden');
+      const videoInfo = document.getElementById('videoInfo');
+      videoInfo.innerHTML = `
+        <h3 class="text-2xl font-bold mb-2">${title}</h3>
+        <p class="text-text-muted mb-4">Duration: ${duration} | ${currentSubject.name}</p>
+        <div class="flex flex-wrap gap-2">
+          <span class="px-4 py-2 bg-primary/20 text-primary-light rounded-full text-sm">${currentSubject.name}</span>
+          <span class="px-4 py-2 bg-primary/20 text-primary-light rounded-full text-sm">Video Lesson</span>
+          <span class="px-4 py-2 bg-primary/20 text-primary-light rounded-full text-sm">Beginner Friendly</span>
         </div>
+      `;
+    }
+    function backToSubject() {
+      if (currentSubject) {
+        showSubject(currentSubject.id);
+      } else {
+        showHome();
+      }
+    }
+    function togglePlay() {
+      isPlaying = !isPlaying;
+      const playIcon = document.getElementById('playIcon');
+      playIcon.className = isPlaying ? 'fas fa-pause' : 'fas fa-play';
+    }
+    function toggleMute() {
+      isMuted = !isMuted;
+      const volumeIcon = document.getElementById('volumeIcon');
+      volumeIcon.className = isMuted ? 'fas fa-volume-mute' : 'fas fa-volume-up';
+    }
+    function skipBack() {
+      console.log('Skip back 10 seconds');
+    }
+    function skipForward() {
+      console.log('Skip forward 10 seconds');
+    }
+    function toggleFullscreen() {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }
+  </script>
+</body>
+</html>