Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Marimo Learn - Interactive Python Notebooks</title> | |
| <meta name="description" content="Learn Python, data science, and machine learning with interactive marimo notebooks"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-green: #10B981; | |
| --dark-green: #047857; | |
| --light-green: #D1FAE5; | |
| } | |
| .bg-primary { background-color: var(--primary-green); } | |
| .text-primary { color: var(--primary-green); } | |
| .border-primary { border-color: var(--primary-green); } | |
| .bg-light { background-color: var(--light-green); } | |
| .hover-grow { transition: transform 0.2s ease; } | |
| .hover-grow:hover { transform: scale(1.02); } | |
| .card-shadow { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1); } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <!-- Hero Section --> | |
| <header class="bg-white"> | |
| <div class="container mx-auto px-4 py-12 max-w-6xl"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Interactive Python Learning with <span class="text-primary">marimo</span></h1> | |
| <p class="text-lg text-gray-600 mb-6">Explore our collection of interactive notebooks for Python, data science, and machine learning.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#courses" class="bg-primary hover:bg-dark-green text-white font-medium py-2 px-6 rounded-md transition duration-300">Explore Courses</a> | |
| <a href="https://github.com/marimo-team/learn" target="_blank" class="bg-white border border-gray-300 hover:border-primary text-gray-700 font-medium py-2 px-6 rounded-md transition duration-300">View on GitHub</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-light p-1 rounded-lg"> | |
| <img src="https://github.com/marimo-team/learn/blob/main/assets/marimo-learn.png?raw=true" alt="Marimo Logo" class="w-64 h-64 mx-auto object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4 max-w-6xl"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Why Learn with <span class="text-primary">Marimo</span>?</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg card-shadow"> | |
| <div class="w-12 h-12 bg-light rounded-full flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Interactive Learning</h3> | |
| <p class="text-gray-600">Learn by doing with interactive notebooks that run directly in your browser.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg card-shadow"> | |
| <div class="w-12 h-12 bg-light rounded-full flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Practical Examples</h3> | |
| <p class="text-gray-600">Real-world examples and applications to reinforce your understanding.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg card-shadow"> | |
| <div class="w-12 h-12 bg-light rounded-full flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Comprehensive Curriculum</h3> | |
| <p class="text-gray-600">From Python basics to advanced machine learning concepts.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Courses Section --> | |
| <section id="courses" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4 max-w-6xl"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Explore Our <span class="text-primary">Courses</span></h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| {% for course_id, course in courses.items() %} | |
| {% set notebooks = course.get('notebooks', []) %} | |
| {% set notebook_count = notebooks|length %} | |
| {% if notebook_count > 0 %} | |
| {% set title = course.get('title', course_id|replace('_', ' ')|title) %} | |
| <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover-grow card-shadow"> | |
| <div class="h-2 bg-primary"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">{{ title }}</h3> | |
| <p class="text-gray-600 mb-4"> | |
| {% if course.get('description_html') %} | |
| {{ course.get('description_html')|safe }} | |
| {% endif %} | |
| </p> | |
| <div class="mb-4"> | |
| <span class="text-sm text-gray-500 block mb-2">{{ notebook_count }} notebooks:</span> | |
| <ol class="space-y-1 list-decimal pl-5"> | |
| {% for notebook in notebooks %} | |
| {% set notebook_title = notebook.get('title', notebook.get('path', '').split('/')[-1].replace('.py', '').replace('_', ' ').title()) %} | |
| <li> | |
| <a href="{{ notebook.get('html_path', '#') }}" class="text-primary hover:text-dark-green text-sm flex items-center"> | |
| {{ notebook_title }} | |
| </a> | |
| </li> | |
| {% endfor %} | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| {% endif %} | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contribute Section --> | |
| <section class="py-16 bg-light"> | |
| <div class="container mx-auto px-4 max-w-6xl text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Want to Contribute?</h2> | |
| <p class="text-lg text-gray-700 mb-8 max-w-2xl mx-auto">Help us improve these learning materials by contributing to the GitHub repository. We welcome new content, bug fixes, and improvements!</p> | |
| <a href="https://github.com/marimo-team/learn" target="_blank" class="bg-primary hover:bg-dark-green text-white font-medium py-3 px-8 rounded-md transition duration-300 inline-flex items-center"> | |
| <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" clip-rule="evenodd"></path> | |
| </svg> | |
| Contribute on GitHub | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4 max-w-6xl"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p>© {{ current_year }} marimo. All rights reserved.</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="https://github.com/marimo-team/learn" target="_blank" class="text-gray-300 hover:text-white transition duration-300"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill-rule="evenodd" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" clip-rule="evenodd"></path> | |
| </svg> | |
| </a> | |
| <a href="https://marimo.io" target="_blank" class="text-gray-300 hover:text-white transition duration-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scripts --> | |
| <script> | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |