Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CS Mastery | Learn Computer Science</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"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .code-editor { | |
| font-family: 'Courier New', monospace; | |
| background-color: #1e293b; | |
| color: #f8fafc; | |
| } | |
| .terminal { | |
| background-color: #0f172a; | |
| color: #94a3b8; | |
| font-family: 'Courier New', monospace; | |
| } | |
| .skill-level::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, #4f46e5, #a855f7); | |
| transform: scaleX(0); | |
| transition: transform 0.3s ease; | |
| } | |
| .skill-level:hover::after { | |
| transform: scaleX(1); | |
| } | |
| .active-level::after { | |
| transform: scaleX(1); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .flip-card { | |
| perspective: 1000px; | |
| } | |
| .flip-card-inner { | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .flip-card:hover .flip-card-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .flip-card-front, .flip-card-back { | |
| backface-visibility: hidden; | |
| } | |
| .flip-card-back { | |
| transform: rotateY(180deg); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-laptop-code text-3xl"></i> | |
| <h1 class="text-2xl font-bold">CS Mastery</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200 transition">Home</a> | |
| <a href="#courses" class="hover:text-gray-200 transition">Courses</a> | |
| <a href="#practice" class="hover:text-gray-200 transition">Practice</a> | |
| <a href="#resources" class="hover:text-gray-200 transition">Resources</a> | |
| <a href="#community" class="hover:text-gray-200 transition">Community</a> | |
| </nav> | |
| <button class="md:hidden text-2xl" id="mobile-menu-button"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-indigo-800" id="mobile-menu"> | |
| <div class="container mx-auto px-4 py-4 flex flex-col space-y-3"> | |
| <a href="#" class="hover:text-gray-200 transition">Home</a> | |
| <a href="#courses" class="hover:text-gray-200 transition">Courses</a> | |
| <a href="#practice" class="hover:text-gray-200 transition">Practice</a> | |
| <a href="#resources" class="hover:text-gray-200 transition">Resources</a> | |
| <a href="#community" class="hover:text-gray-200 transition">Community</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Master Computer Science From Zero to Hero</h1> | |
| <p class="text-xl mb-8">Interactive learning platform for beginners to advanced students. Learn programming, algorithms, data structures, and more with hands-on exercises.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Start Learning</button> | |
| <button class="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition">Explore Courses</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="code-editor rounded-lg shadow-2xl w-full max-w-lg"> | |
| <div class="bg-gray-800 px-4 py-2 rounded-t-lg flex items-center"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="ml-4 text-sm text-gray-400">script.js</div> | |
| </div> | |
| <div class="p-4 overflow-auto" style="max-height: 300px;"> | |
| <pre class="text-sm"><code class="language-javascript">// Binary Search Implementation | |
| function binarySearch(arr, target) { | |
| let left = 0; | |
| let right = arr.length - 1; | |
| while (left <= right) { | |
| const mid = Math.floor((left + right) / 2); | |
| if (arr[mid] === target) { | |
| return mid; // Found the target | |
| } else if (arr[mid] < target) { | |
| left = mid + 1; // Search right half | |
| } else { | |
| right = mid - 1; // Search left half | |
| } | |
| } | |
| return -1; // Target not found | |
| } | |
| // Example usage | |
| const numbers = [1, 3, 5, 7, 9, 11, 13]; | |
| console.log(binarySearch(numbers, 9)); // Output: 4</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skill Level Selector --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Choose Your Learning Path</h2> | |
| <div class="flex flex-wrap justify-center gap-4 mb-12"> | |
| <button class="skill-level px-6 py-3 rounded-lg font-semibold bg-indigo-100 text-indigo-700 relative transition hover:bg-indigo-200" data-level="beginner"> | |
| <i class="fas fa-seedling mr-2"></i> Beginner | |
| </button> | |
| <button class="skill-level px-6 py-3 rounded-lg font-semibold bg-blue-100 text-blue-700 relative transition hover:bg-blue-200" data-level="intermediate"> | |
| <i class="fas fa-rocket mr-2"></i> Intermediate | |
| </button> | |
| <button class="skill-level px-6 py-3 rounded-lg font-semibold bg-purple-100 text-purple-700 relative transition hover:bg-purple-200" data-level="advanced"> | |
| <i class="fas fa-brain mr-2"></i> Advanced | |
| </button> | |
| <button class="skill-level px-6 py-3 rounded-lg font-semibold bg-pink-100 text-pink-700 relative transition hover:bg-pink-200" data-level="expert"> | |
| <i class="fas fa-trophy mr-2"></i> Expert | |
| </button> | |
| </div> | |
| <!-- Content based on level --> | |
| <div id="content-display" class="grid md:grid-cols-3 gap-8"> | |
| <!-- Content will be dynamically loaded here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Code Playground --> | |
| <section id="practice" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Interactive Code Playground</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="code-editor rounded-lg shadow-lg mb-4"> | |
| <div class="bg-gray-800 px-4 py-2 rounded-t-lg flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm text-gray-400">playground.js</div> | |
| </div> | |
| <select id="language-select" class="bg-gray-700 text-gray-200 text-sm px-2 py-1 rounded"> | |
| <option value="javascript">JavaScript</option> | |
| <option value="python">Python</option> | |
| <option value="java">Java</option> | |
| <option value="csharp">C#</option> | |
| <option value="cpp">C++</option> | |
| </select> | |
| </div> | |
| <textarea id="code-input" class="w-full p-4 text-sm h-64 focus:outline-none" spellcheck="false">// Write your code here | |
| // Example: Calculate factorial | |
| function factorial(n) { | |
| if (n === 0 || n === 1) { | |
| return 1; | |
| } | |
| return n * factorial(n - 1); | |
| } | |
| console.log(factorial(5)); // Should output 120</textarea> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="run-code" class="bg-green-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-green-700 transition"> | |
| <i class="fas fa-play mr-2"></i> Run Code | |
| </button> | |
| <button id="reset-code" class="bg-gray-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-gray-700 transition"> | |
| <i class="fas fa-redo mr-2"></i> Reset | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="terminal rounded-lg shadow-lg h-80 overflow-hidden"> | |
| <div class="bg-gray-900 px-4 py-2 rounded-t-lg flex items-center"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm text-gray-400">Terminal Output</div> | |
| </div> | |
| <div id="code-output" class="p-4 overflow-auto h-full"> | |
| <div class="text-green-400">$ Output will appear here after running your code</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="font-semibold mb-2">Challenge:</h3> | |
| <p class="text-sm text-gray-700">Modify the factorial function to handle negative numbers by returning an error message.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Courses Section --> | |
| <section id="courses" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Featured Courses</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Course 1 --> | |
| <div class="flip-card bg-white rounded-xl shadow-lg overflow-hidden h-full"> | |
| <div class="flip-card-inner h-full"> | |
| <div class="flip-card-front h-full"> | |
| <div class="h-48 bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-code text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Programming Fundamentals</h3> | |
| <p class="text-gray-600 mb-4">Learn the basics of programming with JavaScript, Python, or Java.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>8 weeks</span> | |
| <i class="fas fa-star ml-4 mr-2 text-yellow-500"></i> | |
| <span>4.9</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flip-card-back bg-indigo-700 text-white p-6 h-full flex flex-col justify-center"> | |
| <h3 class="text-xl font-bold mb-4">What You'll Learn</h3> | |
| <ul class="list-disc pl-5 space-y-2 text-sm"> | |
| <li>Variables, data types, and operators</li> | |
| <li>Control structures (loops, conditionals)</li> | |
| <li>Functions and modular programming</li> | |
| <li>Basic data structures (arrays, objects)</li> | |
| <li>Debugging techniques</li> | |
| </ul> | |
| <button class="mt-6 bg-white text-indigo-700 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition self-start">Enroll Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 2 --> | |
| <div class="flip-card bg-white rounded-xl shadow-lg overflow-hidden h-full"> | |
| <div class="flip-card-inner h-full"> | |
| <div class="flip-card-front h-full"> | |
| <div class="h-48 bg-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-project-diagram text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Data Structures & Algorithms</h3> | |
| <p class="text-gray-600 mb-4">Master essential CS concepts for technical interviews.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>12 weeks</span> | |
| <i class="fas fa-star ml-4 mr-2 text-yellow-500"></i> | |
| <span>4.8</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flip-card-back bg-blue-700 text-white p-6 h-full flex flex-col justify-center"> | |
| <h3 class="text-xl font-bold mb-4">What You'll Learn</h3> | |
| <ul class="list-disc pl-5 space-y-2 text-sm"> | |
| <li>Arrays, Linked Lists, Stacks, Queues</li> | |
| <li>Trees, Graphs, Hash Tables</li> | |
| <li>Sorting and searching algorithms</li> | |
| <li>Recursion and dynamic programming</li> | |
| <li>Time and space complexity analysis</li> | |
| </ul> | |
| <button class="mt-6 bg-white text-blue-700 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition self-start">Enroll Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 3 --> | |
| <div class="flip-card bg-white rounded-xl shadow-lg overflow-hidden h-full"> | |
| <div class="flip-card-inner h-full"> | |
| <div class="flip-card-front h-full"> | |
| <div class="h-48 bg-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-server text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Advanced Systems Design</h3> | |
| <p class="text-gray-600 mb-4">Design scalable distributed systems for senior engineers.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>10 weeks</span> | |
| <i class="fas fa-star ml-4 mr-2 text-yellow-500"></i> | |
| <span>4.9</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flip-card-back bg-purple-700 text-white p-6 h-full flex flex-col justify-center"> | |
| <h3 class="text-xl font-bold mb-4">What You'll Learn</h3> | |
| <ul class="list-disc pl-5 space-y-2 text-sm"> | |
| <li>System architecture patterns</li> | |
| <li>Database scaling and replication</li> | |
| <li>Caching strategies</li> | |
| <li>Load balancing and CDNs</li> | |
| <li>Microservices architecture</li> | |
| </ul> | |
| <button class="mt-6 bg-white text-purple-700 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition self-start">Enroll Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Progress Tracker --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Track Your Learning Progress</h2> | |
| <div class="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="text-center"> | |
| <div class="relative w-24 h-24 mx-auto mb-4"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| /> | |
| <path | |
| class="progress-ring__circle" | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#4f46e5" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| id="course-progress" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-lg font-bold" id="progress-percent">0%</span> | |
| </div> | |
| </div> | |
| <h3 class="font-semibold">Courses Completed</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="relative w-24 h-24 mx-auto mb-4"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| /> | |
| <path | |
| class="progress-ring__circle" | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#10b981" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| id="challenge-progress" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-lg font-bold" id="challenge-percent">0%</span> | |
| </div> | |
| </div> | |
| <h3 class="font-semibold">Challenges Solved</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="relative w-24 h-24 mx-auto mb-4"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| /> | |
| <path | |
| class="progress-ring__circle" | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#f59e0b" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| id="concept-progress" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-lg font-bold" id="concept-percent">0%</span> | |
| </div> | |
| </div> | |
| <h3 class="font-semibold">Concepts Mastered</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="relative w-24 h-24 mx-auto mb-4"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| /> | |
| <path | |
| class="progress-ring__circle" | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#ef4444" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| id="streak-progress" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-lg font-bold" id="streak-count">0</span> | |
| </div> | |
| </div> | |
| <h3 class="font-semibold">Day Streak</h3> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="font-semibold mb-4">Recent Activity</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check-circle text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Completed "Recursion Basics" lesson</p> | |
| <p class="text-xs text-gray-500">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-code text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Solved "Binary Tree Traversal" challenge</p> | |
| <p class="text-xs text-gray-500">Yesterday</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-book text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Started "System Design Fundamentals" course</p> | |
| <p class="text-xs text-gray-500">3 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources Section --> | |
| <section id="resources" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Learning Resources</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Cheat Sheets --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="bg-indigo-600 p-4"> | |
| <i class="fas fa-file-alt text-white text-3xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Cheat Sheets</h3> | |
| <p class="text-gray-600 mb-4">Quick reference guides for common programming concepts and syntax.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">JavaScript</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Python</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">SQL</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Git</span> | |
| </div> | |
| <button class="mt-4 text-indigo-600 font-semibold hover:text-indigo-800 transition flex items-center"> | |
| Explore Cheat Sheets <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Video Tutorials --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="bg-blue-600 p-4"> | |
| <i class="fas fa-video text-white text-3xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Video Tutorials</h3> | |
| <p class="text-gray-600 mb-4">Comprehensive video courses with hands-on coding exercises.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Algorithms</span> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Web Dev</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Mobile</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Data Science</span> | |
| </div> | |
| <button class="mt-4 text-blue-600 font-semibold hover:text-blue-800 transition flex items-center"> | |
| Browse Videos <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Interview Prep --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="bg-purple-600 p-4"> | |
| <i class="fas fa-clipboard-list text-white text-3xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Interview Prep</h3> | |
| <p class="text-gray-600 mb-4">Practice questions and mock interviews for technical interviews.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">FAANG</span> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Startups</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Big Tech</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Finance</span> | |
| </div> | |
| <button class="mt-4 text-purple-600 font-semibold hover:text-purple-800 transition flex items-center"> | |
| Prepare for Interviews <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Join Our Community</h2> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-indigo-700 text-white p-8"> | |
| <h3 class="text-2xl font-bold mb-4">Connect with Fellow Learners</h3> | |
| <p class="mb-6">Ask questions, share projects, and get feedback from a community of passionate computer science students and professionals.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-users text-2xl mr-4"></i> | |
| <div> | |
| <h4 class="font-bold">100,000+ Members</h4> | |
| <p class="text-sm text-indigo-200">Active community of learners</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comments text-2xl mr-4"></i> | |
| <div> | |
| <h4 class="font-bold">24/7 Discussions</h4> | |
| <p class="text-sm text-indigo-200">Get help anytime</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-check text-2xl mr-4"></i> | |
| <div> | |
| <h4 class="font-bold">Weekly Events</h4> | |
| <p class="text-sm text-indigo-200">Study groups, hackathons, and more</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-xl font-bold mb-6">Sign Up for Community Access</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-sm font-medium mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="skill-level" class="block text-sm font-medium mb-1">Skill Level</label> | |
| <select id="skill-level" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="beginner">Beginner</option> | |
| <option value="intermediate">Intermediate</option> | |
| <option value="advanced">Advanced</option> | |
| <option value="expert">Expert</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition"> | |
| Join Community | |
| </button> | |
| </form> | |
| <div class="mt-4 text-center text-sm text-gray-600"> | |
| Already a member? <a href="#" class="text-indigo-600 hover:underline">Sign in</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-laptop-code text-2xl"></i> | |
| <h3 class="text-xl font-bold">CS Mastery</h3> | |
| </div> | |
| <p class="text-gray-400">The complete computer science learning platform for students of all levels.</p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Learn</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Courses</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Challenges</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Roadmaps</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Interview Prep</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cheat Sheets</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Glossary</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Projects</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Open Source</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 CS Mastery. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Skill level selector | |
| const skillLevels = document.querySelectorAll('.skill-level'); | |
| const contentDisplay = document.getElementById('content-display'); | |
| // Sample content for different skill levels | |
| const levelContent = { | |
| beginner: [ | |
| { | |
| title: 'Programming Basics', | |
| icon: 'fa-code', | |
| description: 'Learn fundamental programming concepts with simple, interactive exercises.', | |
| color: 'indigo' | |
| }, | |
| { | |
| title: 'Web Development', | |
| icon: 'fa-globe', | |
| description: 'Build your first website with HTML, CSS, and JavaScript.', | |
| color: 'blue' | |
| }, | |
| { | |
| title: 'Problem Solving', | |
| icon: 'fa-puzzle-piece', | |
| description: 'Develop computational thinking skills with beginner-friendly challenges.', | |
| color: 'green' | |
| } | |
| ], | |
| intermediate: [ | |
| { | |
| title: 'Data Structures', | |
| icon: 'fa-layer-group', | |
| description: 'Master arrays, linked lists, stacks, queues, and hash tables.', | |
| color: 'purple' | |
| }, | |
| { | |
| title: 'Algorithms', | |
| icon: 'fa-robot', | |
| description: 'Learn sorting, searching, and basic algorithm design techniques.', | |
| color: 'pink' | |
| }, | |
| { | |
| title: 'Object-Oriented Programming', | |
| icon: 'fa-cubes', | |
| description: 'Understand classes, objects, inheritance, and polymorphism.', | |
| color: 'indigo' | |
| } | |
| ], | |
| advanced: [ | |
| { | |
| title: 'Advanced Algorithms', | |
| icon: 'fa-brain', | |
| description: 'Study graph algorithms, dynamic programming, and divide & conquer.', | |
| color: 'red' | |
| }, | |
| { | |
| title: 'System Design', | |
| icon: 'fa-server', | |
| description: 'Learn to design scalable distributed systems and architectures.', | |
| color: 'yellow' | |
| }, | |
| { | |
| title: 'Database Systems', | |
| icon: 'fa-database', | |
| description: 'Deep dive into SQL, NoSQL, indexing, and query optimization.', | |
| color: 'blue' | |
| } | |
| ], | |
| expert: [ | |
| { | |
| title: 'Competitive Programming', | |
| icon: 'fa-trophy', | |
| description: 'Prepare for coding competitions with advanced problem-solving techniques.', | |
| color: 'green' | |
| }, | |
| { | |
| title: 'Machine Learning', | |
| icon: 'fa-microchip', | |
| description: 'Implement ML algorithms and neural networks from scratch.', | |
| color: 'purple' | |
| }, | |
| { | |
| title: 'Blockchain Development', | |
| icon: 'fa-link', | |
| description: 'Build decentralized applications and smart contracts.', | |
| color: 'indigo' | |
| } | |
| ] | |
| }; | |
| // Set default level to beginner | |
| let currentLevel = 'beginner'; | |
| skillLevels[0].classList.add('active-level'); | |
| updateContentDisplay(currentLevel); | |
| skillLevels.forEach(level => { | |
| level.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| skillLevels.forEach(btn => btn.classList.remove('active-level')); | |
| // Add active class to clicked button | |
| this.classList.add('active-level'); | |
| // Update content display | |
| currentLevel = this.dataset.level; | |
| updateContentDisplay(currentLevel); | |
| }); | |
| }); | |
| function updateContentDisplay(level) { | |
| const content = levelContent[level]; | |
| let html = ''; | |
| content.forEach(item => { | |
| html += ` | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition transform hover:-translate-y-1"> | |
| <div class="h-48 bg-${item.color}-600 flex items-center justify-center"> | |
| <i class="fas ${item.icon} text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">${item.title}</h3> | |
| <p class="text-gray-600 mb-4">${item.description}</p> | |
| <button class="text-${item.color}-600 font-semibold hover:text-${item.color}-800 transition flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| contentDisplay.innerHTML = html; | |
| } | |
| // Code playground functionality | |
| const runButton = document.getElementById('run-code'); | |
| const resetButton = document.getElementById('reset-code'); | |
| const codeInput = document.getElementById('code-input'); | |
| const codeOutput = document.getElementById('code-output'); | |
| const languageSelect = document.getElementById('language-select'); | |
| runButton.addEventListener('click', function() { | |
| const code = codeInput.value; | |
| // Clear previous output | |
| codeOutput.innerHTML = '<div class="text-green-400">$ Running your code...</div>'; | |
| // Simulate code execution (in a real app, this would be handled by a backend or WebAssembly) | |
| setTimeout(() => { | |
| try { | |
| // This is a simplified execution for demo purposes | |
| // In a real app, you'd want to use a safer approach like a sandboxed iframe or WebWorker | |
| const originalConsoleLog = console.log; | |
| let output = ''; | |
| console.log = function(message) { | |
| output += message + '\n'; | |
| }; | |
| // Evaluate the code | |
| eval(code); | |
| console.log = originalConsoleLog; | |
| if (output === '') { | |
| output = 'Program executed successfully with no output.'; | |
| } | |
| codeOutput.innerHTML = `<pre class="text-green-400">$ ${output}</pre>`; | |
| } catch (error) { | |
| codeOutput.innerHTML = `<pre class="text-red-400">$ Error: ${error.message}</pre>`; | |
| } | |
| }, 500); | |
| }); | |
| resetButton.addEventListener('click', function() { | |
| // Reset to default code based on selected language | |
| const language = languageSelect.value; | |
| let defaultCode = ''; | |
| switch(language) { | |
| case 'python': | |
| defaultCode = `# Python factorial example | |
| def factorial(n): | |
| if n == 0 or n == 1: | |
| return 1 | |
| return n * factorial(n - 1) | |
| print(factorial(5)) # Should output 120`; | |
| break; | |
| case 'java': | |
| defaultCode = `// Java factorial example | |
| public class Main { | |
| public static int factorial(int n) { | |
| if (n == 0 || n == 1) { | |
| return 1; | |
| } | |
| return n * factorial(n - 1); | |
| } | |
| public static void main(String[] args) { | |
| System.out.println(factorial(5)); // Should output 120 | |
| } | |
| }`; | |
| break; | |
| case 'csharp': | |
| defaultCode = `// C# factorial example | |
| using System; | |
| class Program { | |
| static int Factorial(int n) { | |
| if (n == 0 || n == 1) { | |
| return 1; | |
| } | |
| return n * Factorial(n - 1); | |
| } | |
| static void Main() { | |
| Console.WriteLine(Factorial(5)); // Should output 120 | |
| } | |
| }`; | |
| break; | |
| case 'cpp': | |
| defaultCode = `// C++ factorial example | |
| #include <iostream> | |
| using namespace std; | |
| int factorial(int n) { | |
| if (n == 0 || n == 1) { | |
| return 1; | |
| } | |
| return n * factorial(n - 1); | |
| } | |
| int main() { | |
| cout << factorial(5) << endl; // Should output 120 | |
| return 0; | |
| }`; | |
| break; | |
| default: // JavaScript | |
| defaultCode = `// JavaScript factorial example | |
| function factorial(n) { | |
| if (n === 0 || n === 1) { | |
| return 1; | |
| } | |
| return n * factorial(n - 1); | |
| } | |
| console.log(factorial(5)); // Should output 120`; | |
| } | |
| codeInput.value = defaultCode; | |
| codeOutput.innerHTML = '<div class="text-green-400">$ Output will appear here after running your code</div>'; | |
| }); | |
| languageSelect.addEventListener('change', function() { | |
| resetButton.click(); | |
| }); | |
| // Initialize with JavaScript code | |
| resetButton.click(); | |
| // Progress tracker animation | |
| function animateProgress(elementId, percent, displayElement) { | |
| const circle = document.getElementById(elementId); | |
| const radius = circle.r.baseVal.value; | |
| const circumference = 2 * Math.PI * radius; | |
| const offset = circumference - (percent / 100) * circumference; | |
| circle.style.strokeDashoffset = offset; | |
| displayElement.textContent = `${percent}%`; | |
| } | |
| // Simulate progress (in a real app, this would come from user data) | |
| setTimeout(() => { | |
| animateProgress('course-progress', 35, document.getElementById('progress-percent')); | |
| animateProgress('challenge-progress', 62, document.getElementById('challenge-percent')); | |
| animateProgress('concept-progress', 48, document.getElementById('concept-percent')); | |
| document.getElementById('streak-count').textContent = '7'; | |
| }, 500); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DEVINESKEW/cs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |