Spaces:

karaltan
/

PythonOgreticisi

Running

App Files Files Community

karaltan commited on Apr 18, 2025

Commit

2b07af8

verified ·

1 Parent(s): 7bdcd71

Update index.html

Browse files

Files changed (1) hide show

index.html +528 -18

index.html CHANGED Viewed

@@ -1,19 +1,529 @@
-<!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>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>