Spaces:

tokey4
/

edusphere-navigator

Running

App Files Files Community

tokey4 commited on Nov 27, 2025

Commit

72c5973

verified ·

1 Parent(s): fb46079

create a beautiful professional UI/UX website which is about leaning website like there will be different subject's [Business Communication, Digital Electronics-II, Java programming, Data Structure & Algorithm, Computer Peripherals & Interfacing, Web Design & Development - I, Environmental Studies] after clicking the subject there will be chapters showing with name clicking the chapter the topics will expand shown. Then they can see youtube video with website own theme controls. (for now create the website with dump data i will provide you the data latter to apply)

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +109 -19
script.js +104 -0
style.css +54 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Edusphere Navigator
-emoji: 👀
-colorFrom: pink
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: EduSphere Navigator 🚀
+colorFrom: gray
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,109 @@
-<!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" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EduSphere Navigator - Learn Smart</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#fdf4ff',
+                            100: '#fae8ff',
+                            200: '#f5d0fe',
+                            300: '#f0abfc',
+                            400: '#e879f9',
+                            500: '#d946ef',
+                            600: '#c026d3',
+                            700: '#a21caf',
+                            800: '#86198f',
+                            900: '#701a75',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="text-center mb-12">
+            <h1 class="text-4xl md:text-6xl font-bold bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent mb-4">
+                Master Your Subjects
+            </h1>
+            <p class="text-xl text-gray-400 max-w-2xl mx-auto">
+                Dive deep into comprehensive learning materials, organized chapters, and interactive video lessons tailored for your academic success.
+            </p>
+        </section>
+        <!-- Subjects Grid -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-8 text-primary-300">Available Subjects</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="subjects-grid">
+                <!-- Subjects will be populated by JavaScript -->
+            </div>
+        </section>
+        <!-- Features Section -->
+        <section class="bg-gray-800 rounded-2xl p-8 mb-16">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="text-center">
+                    <div class="w-16 h-16 bg-primary-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="book-open" class="w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Structured Learning</h3>
+                    <p class="text-gray-400">Organized chapters and topics for systematic knowledge acquisition</p>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 bg-secondary-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="video" class="w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Video Lessons</h3>
+                    <p class="text-gray-400">Integrated YouTube videos with custom themed player controls</p>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 bg-primary-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="award" class="w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Progress Tracking</h3>
+                    <p class="text-gray-400">Monitor your learning journey and track completed topics</p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <!-- Components -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,104 @@

+// Sample data structure
+const subjectsData = {
+    "Business Communication": {
+        chapters: {
+            "Introduction to Business Communication": {
+                topics: [
+                    "Nature and Scope of Business Communication",
+                    "Importance of Effective Communication",
+                    "Communication Process and Models"
+                ],
+                videoId: "dQw4w9WgXcQ"
+            },
+            "Written Business Communication": {
+                topics: [
+                    "Business Letters and Memos",
+                    "Reports and Proposals",
+                    "Email Etiquette"
+                ],
+                videoId: "dQw4w9WgXcQ"
+            }
+        }
+    },
+    "Digital Electronics-II": {
+        chapters: {
+            "Sequential Logic Circuits": {
+                topics: [
+                    "Flip-Flops and Latches",
+                    "Counters and Registers",
+                    "State Machines"
+                ],
+                videoId: "dQw4w9WgXcQ"
+            },
+            "Memory Systems": {
+                topics: [
+                    "RAM and ROM",
+                    "Cache Memory",
+                    "Memory Organization"
+                ],
+                videoId: "dQw4w9WgXcQ"
+            }
+        }
+    },
+    "Java Programming": {
+        chapters: {
+            "Object-Oriented Programming": {
+                topics: [
+                    "Classes and Objects",
+                    "Inheritance and Polymorphism",
+                    "Encapsulation and Abstraction"
+                ],
+                videoId: "dQw4w9WgXcQ"
+            },
+            "Exception Handling": {
+                topics: [
+                    "Try-Catch Blocks",
+                    "Custom Exceptions",
+                    "Exception Hierarchy"
+                ],
+                videoId: "dQw4w9WgXcQ"
+            }
+        }
+    },
+    "Data Structure & Algorithm": {
+        chapters: {
+            "Sorting Algorithms": {
+                topics: [
+                    "Bubble Sort and Selection Sort",
+                    "Quick Sort and Merge Sort",
+                    "Time and Space Complexity"
+                ],
+                videoId: "dQw4w9WgXcQ"
+            },
+            "Tree Data Structures": {
+                topics: [
+                    "Binary Trees",
+                    "BST Operations",
+                    "Tree Traversal Methods"
+                ],
+                videoId: "dQw4w9WgXcQ"
+            }
+        }
+    },
+    "Computer Peripherals & Interfacing": {
+        chapters: {
+            "Input Devices": {
+                topics: [
+                    "Keyboard and Mouse Interfaces",
+                    "Scanner Technology",
+                    "Touchscreen Systems"
+                ],
+                videoId: "dQw4w9WgXcQ"
+            },
+            "Output Devices": {
+                topics: [
+                    "Monitor Technologies",
+                    "Printers and Plotters",
+                    "Audio Output Systems"
+                ],
+                videoId: "dQw4w9WgXcQ"
+            }
+        }
+    },
+    "Web Design & Development - I": {
+       {"ok":false,"message":"terminated"}

style.css CHANGED Viewed

@@ -1,28 +1,63 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
+::-webkit-scrollbar-track {
+    background: #1f2937;
 }
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
 }
+/* Smooth transitions */
+* {
+    transition: all 0.2s ease-in-out;
 }
+/* Custom animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.fade-in-up {
+    animation: fadeInUp 0.5s ease-out;
+}
+/* Glass morphism effect */
+.glass {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+/* Hover glow effect */
+.hover-glow:hover {
+    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
+}
+/* Gradient text animation */
+.gradient-text {
+    background: linear-gradient(45deg, #0ea5e9, #d946ef, #0ea5e9);
+    background-size: 200% 200%;
+    animation: gradientShift 3s ease infinite;
+}
+@keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}