Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Learn Python</title> | |
| <script src="https://cdn.tailwindcss.com/3.4.16"></script> | |
| <script>tailwind.config={theme:{extend:{colors:{primary:'#306998',secondary:'#FFD43B'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css"> | |
| <style> | |
| :where([class^="ri-"])::before { content: "\f3c2"; } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| width: 375px; | |
| min-height: 762px; | |
| margin: 0 auto; | |
| position: relative; | |
| background-color: #f9fafb; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background-color: #e5e7eb; | |
| overflow: hidden; | |
| } | |
| .progress-bar-fill { | |
| height: 100%; | |
| background-color: #306998; | |
| } | |
| .search-container { | |
| position: relative; | |
| } | |
| .search-container input { | |
| padding-left: 40px; | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: 12px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| } | |
| .filter-chip { | |
| transition: all 0.2s; | |
| } | |
| .filter-chip.active { | |
| background-color: #306998; | |
| color: white; | |
| } | |
| .topic-card { | |
| transition: transform 0.2s; | |
| } | |
| .topic-card:active { | |
| transform: scale(0.98); | |
| } | |
| .difficulty-badge { | |
| font-size: 10px; | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| } | |
| .difficulty-beginner { | |
| background-color: #dcfce7; | |
| color: #166534; | |
| } | |
| .difficulty-intermediate { | |
| background-color: #ffedd5; | |
| color: #9a3412; | |
| } | |
| .difficulty-advanced { | |
| background-color: #fee2e2; | |
| color: #991b1b; | |
| } | |
| .code-snippet { | |
| font-family: 'Courier New', monospace; | |
| font-size: 12px; | |
| white-space: pre; | |
| overflow-x: auto; | |
| } | |
| .streak-counter { | |
| position: relative; | |
| } | |
| .streak-counter::after { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| right: -2px; | |
| width: 8px; | |
| height: 8px; | |
| background-color: #ef4444; | |
| border-radius: 50%; | |
| } | |
| .tab-indicator { | |
| position: absolute; | |
| bottom: 0; | |
| height: 3px; | |
| background-color: #306998; | |
| transition: all 0.3s; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| z-index: 50; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal-content { | |
| background-color: white; | |
| border-radius: 8px; | |
| width: 90%; | |
| max-width: 340px; | |
| max-height: 80%; | |
| overflow-y: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navbar --> | |
| <nav class="bg-white shadow-sm fixed top-0 w-full z-10"> | |
| <div class="flex items-center justify-between p-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 flex items-center justify-center bg-primary rounded-full mr-2"> | |
| <i class="ri-code-s-slash-line text-white ri-lg"></i> | |
| </div> | |
| <h1 class="text-lg font-semibold">Learn Python</h1> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="streak-counter w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full cursor-pointer"> | |
| <span class="text-xs font-medium">5</span> | |
| </div> | |
| <div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full cursor-pointer" id="menuButton"> | |
| <i class="ri-menu-line"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 pb-2"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs text-gray-500">Course Progress</span> | |
| <span class="text-xs font-medium">42%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-bar-fill" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-24 pb-20 px-4"> | |
| <!-- Search Bar --> | |
| <div class="search-container mb-5"> | |
| <i class="ri-search-line search-icon text-gray-400"></i> | |
| <input type="text" placeholder="Search for topics, concepts..." class="w-full py-3 px-4 rounded-lg bg-white border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <!-- Filters --> | |
| <div class="mb-6 overflow-x-auto"> | |
| <div class="flex space-x-2 pb-1"> | |
| <button class="filter-chip active whitespace-nowrap px-3 py-1.5 rounded-full text-sm font-medium !rounded-button cursor-pointer">All Topics</button> | |
| <button class="filter-chip whitespace-nowrap px-3 py-1.5 bg-white rounded-full text-sm font-medium !rounded-button cursor-pointer">Beginner</button> | |
| <button class="filter-chip whitespace-nowrap px-3 py-1.5 bg-white rounded-full text-sm font-medium !rounded-button cursor-pointer">Intermediate</button> | |
| <button class="filter-chip whitespace-nowrap px-3 py-1.5 bg-white rounded-full text-sm font-medium !rounded-button cursor-pointer">Advanced</button> | |
| <button class="filter-chip whitespace-nowrap px-3 py-1.5 bg-white rounded-full text-sm font-medium !rounded-button cursor-pointer">Popular</button> | |
| </div> | |
| </div> | |
| <!-- Continue Learning --> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-3">Continue Learning</h2> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 flex items-center justify-center bg-primary/10 rounded-lg mr-3"> | |
| <i class="ri-loop-line text-primary"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <h3 class="font-medium">Python Loops</h3> | |
| <span class="text-xs text-gray-500">65% completed</span> | |
| </div> | |
| <div class="progress-bar mb-3"> | |
| <div class="progress-bar-fill" style="width: 65%"></div> | |
| </div> | |
| <div class="bg-gray-50 p-2 rounded mb-3 code-snippet"> | |
| <code>for i in range(5): | |
| print(i) # Outputs: 0, 1, 2, 3, 4</code> | |
| </div> | |
| <button class="bg-primary text-white py-2 px-4 rounded-lg text-sm font-medium !rounded-button cursor-pointer">Continue Learning</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Popular Topics --> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h2 class="text-lg font-semibold">Popular Topics</h2> | |
| <a href="#" class="text-primary text-sm font-medium cursor-pointer">View All</a> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <!-- Topic Card 1 --> | |
| <div class="topic-card bg-white p-3 rounded-lg shadow-sm border border-gray-100 cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="w-8 h-8 flex items-center justify-center bg-blue-100 rounded-lg"> | |
| <i class="ri-code-box-line text-primary"></i> | |
| </div> | |
| <span class="difficulty-badge difficulty-beginner">Beginner</span> | |
| </div> | |
| <h3 class="font-medium mb-1">Variables & Data Types</h3> | |
| <p class="text-xs text-gray-500 mb-2">Learn about Python's basic data types and how to use variables.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs text-gray-500">15 min</span> | |
| <div class="w-6 h-6 flex items-center justify-center rounded-full bg-gray-100"> | |
| <i class="ri-bookmark-line text-gray-500 ri-sm"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Topic Card 2 --> | |
| <div class="topic-card bg-white p-3 rounded-lg shadow-sm border border-gray-100 cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="w-8 h-8 flex items-center justify-center bg-blue-100 rounded-lg"> | |
| <i class="ri-function-line text-primary"></i> | |
| </div> | |
| <span class="difficulty-badge difficulty-intermediate">Intermediate</span> | |
| </div> | |
| <h3 class="font-medium mb-1">Functions</h3> | |
| <p class="text-xs text-gray-500 mb-2">Create reusable code blocks with Python functions.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs text-gray-500">25 min</span> | |
| <div class="w-6 h-6 flex items-center justify-center rounded-full bg-gray-100"> | |
| <i class="ri-bookmark-line text-gray-500 ri-sm"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Learning Paths --> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-3">Learning Paths</h2> | |
| <!-- Path Card 1 --> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-3 cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 flex items-center justify-center bg-primary/10 rounded-lg mr-3"> | |
| <i class="ri-terminal-box-line text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Python Fundamentals</h3> | |
| <span class="text-xs text-gray-500">8 topics • 2.5 hours</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Master the core concepts of Python programming from variables to functions.</p> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 flex items-center justify-center bg-green-100 rounded-full mr-2"> | |
| <i class="ri-user-line text-green-600 ri-sm"></i> | |
| </div> | |
| <span class="text-xs text-gray-500">2,458 students enrolled</span> | |
| </div> | |
| </div> | |
| <!-- Path Card 2 --> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 flex items-center justify-center bg-primary/10 rounded-lg mr-3"> | |
| <i class="ri-database-2-line text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Data Science with Python</h3> | |
| <span class="text-xs text-gray-500">12 topics • 4 hours</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Learn how to analyze and visualize data using Python libraries like Pandas and Matplotlib.</p> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 flex items-center justify-center bg-green-100 rounded-full mr-2"> | |
| <i class="ri-user-line text-green-600 ri-sm"></i> | |
| </div> | |
| <span class="text-xs text-gray-500">1,892 students enrolled</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Daily Challenge --> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-3">Daily Challenge</h2> | |
| <div class="bg-gradient-to-r from-primary/10 to-secondary/10 p-4 rounded-lg border border-gray-100"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium">List Comprehension Challenge</h3> | |
| <span class="text-xs font-medium px-2 py-1 bg-white rounded-full">April 18</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Create a list of squares for numbers from 1 to 10 using list comprehension.</p> | |
| <div class="bg-white p-2 rounded mb-3 code-snippet"> | |
| <code># Your solution here | |
| squares = [x**2 for x in range(1, 11)] | |
| print(squares)</code> | |
| </div> | |
| <button class="bg-primary text-white py-2 px-4 rounded-lg text-sm font-medium !rounded-button cursor-pointer">Solve Challenge</button> | |
| </div> | |
| </div> | |
| <!-- Community Highlights --> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-3">Community Highlights</h2> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-3"> | |
| <div class="flex items-start"> | |
| <img src="https://readdy.ai/api/search-image?query=professional%20headshot%20of%20a%20young%20male%20college%20student%20with%20glasses%2C%20smiling%2C%20clean%20background&width=40&height=40&seq=1&orientation=squarish" alt="Profile" class="w-10 h-10 rounded-full object-cover mr-3"> | |
| <div> | |
| <div class="flex items-center"> | |
| <h3 class="font-medium mr-2">Michael Chen</h3> | |
| <span class="text-xs text-gray-500">2 hours ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1 mb-2">Just completed my first machine learning project using Python! The scikit-learn library is amazing for beginners.</p> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center cursor-pointer"> | |
| <i class="ri-heart-line text-gray-400 mr-1"></i> | |
| <span class="text-xs text-gray-500">42</span> | |
| </div> | |
| <div class="flex items-center cursor-pointer"> | |
| <i class="ri-chat-1-line text-gray-400 mr-1"></i> | |
| <span class="text-xs text-gray-500">8</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-start"> | |
| <img src="https://readdy.ai/api/search-image?query=professional%20headshot%20of%20a%20young%20female%20college%20student%20with%20long%20hair%2C%20smiling%2C%20clean%20background&width=40&height=40&seq=2&orientation=squarish" alt="Profile" class="w-10 h-10 rounded-full object-cover mr-3"> | |
| <div> | |
| <div class="flex items-center"> | |
| <h3 class="font-medium mr-2">Sophia Rodriguez</h3> | |
| <span class="text-xs text-gray-500">Yesterday</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1 mb-2">Created a simple web scraper with BeautifulSoup. Python makes it so easy to extract data from websites!</p> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center cursor-pointer"> | |
| <i class="ri-heart-line text-gray-400 mr-1"></i> | |
| <span class="text-xs text-gray-500">36</span> | |
| </div> | |
| <div class="flex items-center cursor-pointer"> | |
| <i class="ri-chat-1-line text-gray-400 mr-1"></i> | |
| <span class="text-xs text-gray-500">5</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Floating Action Button --> | |
| <div class="fixed bottom-20 right-4 z-10"> | |
| <button class="w-12 h-12 bg-primary rounded-full shadow-lg flex items-center justify-center cursor-pointer" id="codeEditorBtn"> | |
| <i class="ri-code-s-slash-fill text-white ri-lg"></i> | |
| </button> | |
| </div> | |
| <!-- Tab Bar --> | |
| <div class="fixed bottom-0 w-full bg-white border-t border-gray-200 z-10"> | |
| <div class="grid grid-cols-4 h-16"> | |
| <div class="flex flex-col items-center justify-center cursor-pointer tab-item active"> | |
| <div class="w-6 h-6 flex items-center justify-center"> | |
| <i class="ri-home-5-fill text-primary"></i> | |
| </div> | |
| <span class="text-xs mt-1 text-primary font-medium">Home</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-center cursor-pointer tab-item"> | |
| <div class="w-6 h-6 flex items-center justify-center"> | |
| <i class="ri-file-list-3-line text-gray-500"></i> | |
| </div> | |
| <span class="text-xs mt-1 text-gray-500">Practice</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-center cursor-pointer tab-item"> | |
| <div class="w-6 h-6 flex items-center justify-center"> | |
| <i class="ri-bookmark-line text-gray-500"></i> | |
| </div> | |
| <span class="text-xs mt-1 text-gray-500">Saved</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-center cursor-pointer tab-item"> | |
| <div class="w-6 h-6 flex items-center justify-center"> | |
| <i class="ri-user-line text-gray-500"></i> | |
| </div> | |
| <span class="text-xs mt-1 text-gray-500">Profile</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Modal --> | |
| <div class="modal" id="menuModal"> | |
| <div class="modal-content p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Menu</h3> | |
| <div class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 cursor-pointer" id="closeMenuBtn"> | |
| <i class="ri-close-line"></i> | |
| </div> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer"> | |
| <div class="w-8 h-8 flex items-center justify-center mr-3"> | |
| <i class="ri-settings-3-line text-gray-600"></i> | |
| </div> | |
| <span>Settings</span> | |
| </li> | |
| <li class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer"> | |
| <div class="w-8 h-8 flex items-center justify-center mr-3"> | |
| <i class="ri-notification-3-line text-gray-600"></i> | |
| </div> | |
| <span>Notifications</span> | |
| </li> | |
| <li class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer"> | |
| <div class="w-8 h-8 flex items-center justify-center mr-3"> | |
| <i class="ri-question-line text-gray-600"></i> | |
| </div> | |
| <span>Help & Support</span> | |
| </li> | |
| <li class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer"> | |
| <div class="w-8 h-8 flex items-center justify-center mr-3"> | |
| <i class="ri-feedback-line text-gray-600"></i> | |
| </div> | |
| <span>Send Feedback</span> | |
| </li> | |
| <li class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer"> | |
| <div class="w-8 h-8 flex items-center justify-center mr-3"> | |
| <i class="ri-information-line text-gray-600"></i> | |
| </div> | |
| <span>About</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Code Editor Modal --> | |
| <div class="modal" id="codeEditorModal"> | |
| <div class="modal-content p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Python Code Editor</h3> | |
| <div class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 cursor-pointer" id="closeEditorBtn"> | |
| <i class="ri-close-line"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 p-3 rounded-lg mb-3"> | |
| <textarea class="w-full h-40 bg-gray-900 text-green-400 font-mono text-sm resize-none focus:outline-none" placeholder="# Write your Python code here | |
| print('Hello, World!')"></textarea> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-primary text-white py-2 px-4 rounded-lg text-sm font-medium !rounded-button cursor-pointer">Run Code</button> | |
| <button class="flex-1 bg-white border border-gray-300 py-2 px-4 rounded-lg text-sm font-medium !rounded-button cursor-pointer">Save</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Filter chips | |
| const filterChips = document.querySelectorAll('.filter-chip'); | |
| filterChips.forEach(chip => { | |
| chip.addEventListener('click', function() { | |
| filterChips.forEach(c => c.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Menu Modal | |
| const menuButton = document.getElementById('menuButton'); | |
| const menuModal = document.getElementById('menuModal'); | |
| const closeMenuBtn = document.getElementById('closeMenuBtn'); | |
| menuButton.addEventListener('click', function() { | |
| menuModal.style.display = 'flex'; | |
| }); | |
| closeMenuBtn.addEventListener('click', function() { | |
| menuModal.style.display = 'none'; | |
| }); | |
| // Code Editor Modal | |
| const codeEditorBtn = document.getElementById('codeEditorBtn'); | |
| const codeEditorModal = document.getElementById('codeEditorModal'); | |
| const closeEditorBtn = document.getElementById('closeEditorBtn'); | |
| codeEditorBtn.addEventListener('click', function() { | |
| codeEditorModal.style.display = 'flex'; | |
| }); | |
| closeEditorBtn.addEventListener('click', function() { | |
| codeEditorModal.style.display = 'none'; | |
| }); | |
| // Close modals when clicking outside | |
| window.addEventListener('click', function(event) { | |
| if (event.target === menuModal) { | |
| menuModal.style.display = 'none'; | |
| } | |
| if (event.target === codeEditorModal) { | |
| codeEditorModal.style.display = 'none'; | |
| } | |
| }); | |
| // Tab navigation | |
| const tabItems = document.querySelectorAll('.tab-item'); | |
| tabItems.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| tabItems.forEach(t => { | |
| const icon = t.querySelector('i'); | |
| const text = t.querySelector('span'); | |
| if (t === this) { | |
| icon.classList.remove('text-gray-500'); | |
| icon.classList.add('text-primary'); | |
| text.classList.remove('text-gray-500'); | |
| text.classList.add('text-primary', 'font-medium'); | |
| } else { | |
| icon.classList.remove('text-primary'); | |
| icon.classList.add('text-gray-500'); | |
| text.classList.remove('text-primary', 'font-medium'); | |
| text.classList.add('text-gray-500'); | |
| } | |
| }); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |