Spaces:

banao-tech
/

vidya-learning-hub

Running

App Files Files Community

banao-tech commited on Dec 19, 2025

Commit

f1ea97e

verified ·

1 Parent(s): 5125666

Update index.html

Browse files

Files changed (1) hide show

index.html +371 -19

index.html CHANGED Viewed

@@ -1,19 +1,371 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Learning Platform</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #2c5282;
+            --secondary: #4a5568;
+            --accent: #3182ce;
+            --light-bg: #f7fafc;
+            --border: #e2e8f0;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--light-bg);
+            color: #2d3748;
+        }
+        .navbar {
+            background-color: white;
+            border-bottom: 2px solid var(--border);
+            padding: 1rem 0;
+        }
+        .navbar-brand {
+            font-weight: 600;
+            color: var(--primary) !important;
+            font-size: 1.5rem;
+        }
+        .nav-tabs {
+            border-bottom: 2px solid var(--border);
+            margin-bottom: 2rem;
+        }
+        .nav-tabs .nav-link {
+            color: var(--secondary);
+            border: none;
+            padding: 1rem 1.5rem;
+            font-weight: 500;
+        }
+        .nav-tabs .nav-link.active {
+            color: var(--primary);
+            background-color: transparent;
+            border-bottom: 3px solid var(--primary);
+        }
+        .course-card {
+            background: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+            transition: transform 0.2s, box-shadow 0.2s;
+            margin-bottom: 1.5rem;
+        }
+        .course-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+        .course-thumbnail {
+            width: 100%;
+            height: 200px;
+            background-size: cover;
+            background-position: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+        .thumbnail-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.3);
+        }
+        .play-overlay {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background: rgba(255,255,255,0.9);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        .play-overlay:hover {
+            transform: scale(1.1);
+        }
+        .play-icon {
+            width: 0;
+            height: 0;
+            border-left: 20px solid var(--primary);
+            border-top: 12px solid transparent;
+            border-bottom: 12px solid transparent;
+            margin-left: 5px;
+        }
+        .course-content {
+            padding: 1.5rem;
+        }
+        .course-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--primary);
+            margin-bottom: 0.5rem;
+        }
+        .course-description {
+            color: var(--secondary);
+            font-size: 0.95rem;
+            margin-bottom: 1rem;
+        }
+        .course-meta {
+            display: flex;
+            gap: 1rem;
+            font-size: 0.875rem;
+            color: #718096;
+        }
+        .badge-custom {
+            background-color: #e6f2ff;
+            color: var(--primary);
+            padding: 0.25rem 0.75rem;
+            border-radius: 12px;
+            font-weight: 500;
+        }
+        .modal-content {
+            border-radius: 12px;
+            border: none;
+        }
+        .modal-header {
+            background-color: var(--primary);
+            color: white;
+            border-radius: 12px 12px 0 0;
+        }
+        .modal-body {
+            padding: 0;
+        }
+        video {
+            width: 100%;
+            background: black;
+        }
+        .video-info {
+            padding: 1.5rem;
+        }
+        .btn-primary {
+            background-color: var(--primary);
+            border-color: var(--primary);
+            padding: 0.5rem 1.5rem;
+            font-weight: 500;
+        }
+        .btn-primary:hover {
+            background-color: #2c4a6d;
+            border-color: #2c4a6d;
+        }
+    </style>
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg">
+        <div class="container">
+            <a class="navbar-brand" href="#">🎓 LearnHub</a>
+            <div class="ms-auto">
+                <span class="navbar-text">Welcome, User</span>
+            </div>
+        </div>
+    </nav>
+    <div class="container mt-4">
+        <ul class="nav nav-tabs" id="courseTabs" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="base-tab" data-bs-toggle="tab" data-bs-target="#base-courses" type="button">
+                    Base Courses
+                </button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" id="personalized-tab" data-bs-toggle="tab" data-bs-target="#personalized-courses" type="button">
+                    Personalized Courses
+                </button>
+            </li>
+        </ul>
+        <div class="tab-content" id="courseTabContent">
+            <div class="tab-pane fade show active" id="base-courses">
+                <div class="row" id="baseCoursesList"></div>
+            </div>
+            <div class="tab-pane fade" id="personalized-courses">
+                <div class="row" id="personalizedCoursesList"></div>
+            </div>
+        </div>
+    </div>
+    <!-- Video Modal -->
+    <div class="modal fade" id="videoModal" tabindex="-1">
+        <div class="modal-dialog modal-lg modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="videoModalTitle">Course Video</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <video id="videoPlayer" controls>
+                        <source id="videoSource" src="" type="video/mp4">
+                        Your browser does not support the video tag.
+                    </video>
+                    <div class="video-info">
+                        <h6 id="videoDescription"></h6>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Simulated backend data with S3-like URLs
+        const coursesData = {
+            base: [
+                {
+                    id: 1,
+                    title: "Data Structure- List, Tuple, Set, Dictionary",
+                    description: "Learn the fundamentals of Data Structure- List, Tuple, Set, Dictionary",
+                    duration: "07 Min",
+                    videos: 1,
+                    thumbnail: "https://tech-learn-state.s3.ap-south-1.amazonaws.com/video_states/thumbnail/1stss.png",
+                    s3Url: "https://tech-learn-state.s3.ap-south-1.amazonaws.com/video_states/AI_1_3/final_video/final_assembly_video.mp4"
+                },
+                {
+                    id: 2,
+                    title: "Python Programming Basics",
+                    description: "Master the basics of Python programming language",
+                    duration: "3:15 Min",
+                    videos: 1,
+                    thumbnail: "https://tech-learn-state.s3.ap-south-1.amazonaws.com/video_states/thumbnail/Screenshot+2025-12-19+160253.png",
+                    s3Url: "https://tech-learn-state.s3.ap-south-1.amazonaws.com/video_states/AI_5_3/final_video/final_assembly_video.mp4"
+                },
+                {
+                    id: 3,
+                    title: "Database Fundamentals",
+                    description: "Understanding SQL and database design principles",
+                    duration: "2:45 Min",
+                    videos: 1,
+                    thumbnail: "https://tech-learn-state.s3.ap-south-1.amazonaws.com/video_states/thumbnail/Screenshot+2025-12-19+160538.png",
+                    s3Url: "https://tech-learn-state.s3.ap-south-1.amazonaws.com/video_states/sys_design_whatsapp/system_design/Hindi/slide_video.mp4"
+                },
+                {
+                    id: 4,
+                    title: "UI/UX Design Principles",
+                    description: "Learn to create beautiful and functional user interfaces",
+                    duration: "3:34 Min",
+                    videos: 1,
+                    thumbnail: "https://tech-learn-state.s3.ap-south-1.amazonaws.com/video_states/thumbnail/Screenshot+2025-12-19+161038.png",
+                    s3Url: "https://tech-learn-state.s3.ap-south-1.amazonaws.com/video_states/sys_class_diagram/system_design/english/slide_video.mp4"
+                }
+            ],
+            personalized: [
+                {
+                    id: 101,
+                    title: "Advanced JavaScript Patterns",
+                    description: "Deep dive into modern JavaScript design patterns",
+                    duration: "4:20 Min",
+                    videos: 1,
+                    thumbnail: "https://tech-learn-state.s3.ap-south-1.amazonaws.com/video_states/thumbnail/Screenshot+2025-12-19+161923.png",
+                    s3Url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"
+                },
+                {
+                    id: 102,
+                    title: "React Development Masterclass",
+                    description: "Build modern web applications with React",
+                    duration: "5:30 Min",
+                    videos: 1,
+                    thumbnail: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800&h=400&fit=crop",
+                    s3Url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
+                },
+                {
+                    id: 103,
+                    title: "Cloud Architecture AWS",
+                    description: "Design scalable cloud solutions on Amazon Web Services",
+                    duration: "4:00 Min",
+                    videos: 1,
+                    thumbnail: "https://tech-learn-state.s3.ap-south-1.amazonaws.com/video_states/thumbnail/Screenshot+2025-12-19+162432.png",
+                    s3Url: "https://tech-learn-state.s3.ap-south-1.amazonaws.com/video_states/thumbnail/personalized_topic_10808.mp4"
+                }
+            ]
+        };
+        function createCourseCard(course) {
+            return `
+                <div class="col-md-6 col-lg-4">
+                    <div class="course-card">
+                        <div class="course-thumbnail" style="background-image: url('${course.thumbnail}')">
+                            <div class="thumbnail-overlay"></div>
+                            <div class="play-overlay" onclick="playVideo('${course.s3Url}', '${course.title}', '${course.description}')">
+                                <div class="play-icon"></div>
+                            </div>
+                        </div>
+                        <div class="course-content">
+                            <h5 class="course-title">${course.title}</h5>
+                            <p class="course-description">${course.description}</p>
+                            <div class="course-meta">
+                                <span class="badge-custom">${course.videos} videos</span>
+                                <span class="badge-custom">${course.duration}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+        function renderCourses() {
+            const baseCoursesList = document.getElementById('baseCoursesList');
+            const personalizedCoursesList = document.getElementById('personalizedCoursesList');
+            baseCoursesList.innerHTML = coursesData.base.map(createCourseCard).join('');
+            personalizedCoursesList.innerHTML = coursesData.personalized.map(createCourseCard).join('');
+        }
+        function playVideo(s3Url, title, description) {
+            const videoSource = document.getElementById('videoSource');
+            const videoPlayer = document.getElementById('videoPlayer');
+            const modalTitle = document.getElementById('videoModalTitle');
+            const videoDescription = document.getElementById('videoDescription');
+            videoSource.src = s3Url;
+            modalTitle.textContent = title;
+            videoDescription.textContent = description;
+            videoPlayer.load();
+            const modal = new bootstrap.Modal(document.getElementById('videoModal'));
+            modal.show();
+            // Play video when modal is fully shown
+            document.getElementById('videoModal').addEventListener('shown.bs.modal', function () {
+                videoPlayer.play();
+            });
+            // Pause video when modal is closed
+            document.getElementById('videoModal').addEventListener('hidden.bs.modal', function () {
+                videoPlayer.pause();
+            });
+        }
+        // Initialize courses on page load
+        document.addEventListener('DOMContentLoaded', renderCourses);
+    </script>
+</body>
+</html>