Spaces:
Running
Running
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Marimo Learn - Interactive Educational Notebooks</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| /* Dark mode colors (default) */ | |
| --eva-purple: #9a1eb3; | |
| --eva-green: #1c7361; | |
| --eva-orange: #ff6600; | |
| --eva-blue: #0066ff; | |
| --eva-red: #ff0000; | |
| --eva-black: #111111; | |
| --eva-dark: #222222; | |
| --eva-terminal-bg: rgba(0, 0, 0, 0.85); | |
| --eva-text: #e0e0e0; | |
| --eva-border-radius: 4px; | |
| --eva-transition: all 0.3s ease; | |
| } | |
| /* Light mode colors */ | |
| [data-theme="light"] { | |
| --eva-purple: #7209b7; | |
| --eva-green: #1c7361; | |
| --eva-orange: #e65100; | |
| --eva-blue: #0039cb; | |
| --eva-red: #c62828; | |
| --eva-black: #f5f5f5; | |
| --eva-dark: #e0e0e0; | |
| --eva-terminal-bg: rgba(255, 255, 255, 0.9); | |
| --eva-text: #333333; | |
| } | |
| body { | |
| background-color: var(--eva-black); | |
| color: var(--eva-text); | |
| font-family: 'Courier New', monospace; | |
| margin: 0; | |
| padding: 0; | |
| line-height: 1.6; | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| } | |
| .eva-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .eva-header { | |
| border-bottom: 2px solid var(--eva-green); | |
| padding-bottom: 1rem; | |
| margin-bottom: 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: sticky; | |
| top: 0; | |
| background-color: var(--eva-black); | |
| z-index: 100; | |
| backdrop-filter: blur(5px); | |
| padding-top: 1rem; | |
| transition: background-color 0.3s ease; | |
| } | |
| [data-theme="light"] .eva-header { | |
| background-color: rgba(245, 245, 245, 0.95); | |
| } | |
| .eva-logo { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| color: var(--eva-green); | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| text-shadow: 0 0 10px rgba(28, 115, 97, 0.5); | |
| } | |
| [data-theme="light"] .eva-logo { | |
| text-shadow: 0 0 10px rgba(28, 115, 97, 0.3); | |
| } | |
| .eva-nav { | |
| display: flex; | |
| gap: 1.5rem; | |
| align-items: center; | |
| } | |
| .eva-nav a { | |
| color: var(--eva-text); | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| font-size: 0.9rem; | |
| letter-spacing: 1px; | |
| transition: color 0.3s; | |
| position: relative; | |
| padding: 0.5rem 0; | |
| } | |
| .eva-nav a:hover { | |
| color: var(--eva-green); | |
| } | |
| .eva-nav a:hover::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background-color: var(--eva-green); | |
| animation: scanline 1.5s linear infinite; | |
| } | |
| .theme-toggle { | |
| background: none; | |
| border: none; | |
| color: var(--eva-text); | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| padding: 0.5rem; | |
| margin-left: 1rem; | |
| transition: color 0.3s; | |
| } | |
| .theme-toggle:hover { | |
| color: var(--eva-green); | |
| } | |
| .eva-hero { | |
| background-color: var(--eva-terminal-bg); | |
| border: 1px solid var(--eva-green); | |
| padding: 3rem 2rem; | |
| margin-bottom: 3rem; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: var(--eva-border-radius); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)), url('https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/marimo-logotype-thick.svg'); | |
| background-size: cover; | |
| background-position: center; | |
| background-blend-mode: overlay; | |
| transition: background-color 0.3s ease, border-color 0.3s ease; | |
| } | |
| [data-theme="light"] .eva-hero { | |
| background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), url('https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/marimo-logotype-thick.svg'); | |
| } | |
| .eva-hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background-color: var(--eva-green); | |
| animation: scanline 3s linear infinite; | |
| } | |
| .eva-hero h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--eva-green); | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| text-shadow: 0 0 10px rgba(28, 115, 97, 0.5); | |
| } | |
| [data-theme="light"] .eva-hero h1 { | |
| text-shadow: 0 0 10px rgba(28, 115, 97, 0.3); | |
| } | |
| .eva-hero p { | |
| font-size: 1.1rem; | |
| max-width: 800px; | |
| margin-bottom: 2rem; | |
| line-height: 1.8; | |
| } | |
| .eva-features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .eva-feature { | |
| background-color: var(--eva-terminal-bg); | |
| border: 1px solid var(--eva-blue); | |
| padding: 1.5rem; | |
| border-radius: var(--eva-border-radius); | |
| transition: var(--eva-transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .eva-feature:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 102, 255, 0.2); | |
| } | |
| .eva-feature-icon { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| color: var(--eva-blue); | |
| } | |
| .eva-feature h3 { | |
| font-size: 1.3rem; | |
| margin-bottom: 1rem; | |
| color: var(--eva-blue); | |
| } | |
| .eva-section-title { | |
| font-size: 2rem; | |
| color: var(--eva-green); | |
| margin-bottom: 2rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| text-align: center; | |
| position: relative; | |
| padding-bottom: 1rem; | |
| } | |
| .eva-section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 100px; | |
| height: 2px; | |
| background-color: var(--eva-green); | |
| } | |
| /* Flashcard view for courses */ | |
| .eva-courses { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .eva-course { | |
| background-color: var(--eva-terminal-bg); | |
| border: 1px solid var(--eva-purple); | |
| border-radius: var(--eva-border-radius); | |
| transition: var(--eva-transition), height 0.4s cubic-bezier(0.19, 1, 0.22, 1); | |
| position: relative; | |
| overflow: hidden; | |
| height: 350px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .eva-course:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(154, 30, 179, 0.3); | |
| } | |
| .eva-course::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background-color: var(--eva-purple); | |
| animation: scanline 2s linear infinite; | |
| } | |
| .eva-course-badge { | |
| position: absolute; | |
| top: 15px; | |
| right: -40px; | |
| background: linear-gradient(135deg, var(--eva-orange) 0%, #ff9500 100%); | |
| color: var(--eva-black); | |
| font-size: 0.65rem; | |
| padding: 0.3rem 2.5rem; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| z-index: 3; | |
| letter-spacing: 1px; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | |
| transform: rotate(45deg); | |
| text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2); | |
| border-top: 1px solid rgba(255, 255, 255, 0.3); | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.2); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| .eva-course-badge i { | |
| margin-right: 4px; | |
| font-size: 0.7rem; | |
| } | |
| [data-theme="light"] .eva-course-badge { | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4); | |
| } | |
| .eva-course-badge::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent); | |
| animation: scanline 2s linear infinite; | |
| } | |
| .eva-course-header { | |
| padding: 1rem 1.5rem; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid rgba(154, 30, 179, 0.3); | |
| z-index: 2; | |
| background-color: var(--eva-terminal-bg); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3.5rem; | |
| box-sizing: border-box; | |
| } | |
| .eva-course-title { | |
| font-size: 1.3rem; | |
| color: var(--eva-purple); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin: 0; | |
| } | |
| .eva-course-toggle { | |
| color: var(--eva-purple); | |
| font-size: 1.5rem; | |
| transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); | |
| } | |
| .eva-course.active .eva-course-toggle { | |
| transform: rotate(180deg); | |
| } | |
| .eva-course-front { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| padding: 1.5rem; | |
| margin-top: 3.5rem; | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: calc(100% - 3.5rem); | |
| background-color: var(--eva-terminal-bg); | |
| z-index: 1; | |
| box-sizing: border-box; | |
| } | |
| .eva-course.active .eva-course-front { | |
| opacity: 0; | |
| transform: translateY(-10px); | |
| pointer-events: none; | |
| } | |
| .eva-course-description { | |
| margin-top: 0.5rem; | |
| margin-bottom: 1.5rem; | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| flex-grow: 1; | |
| overflow: hidden; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 4; | |
| -webkit-box-orient: vertical; | |
| max-height: 150px; | |
| } | |
| .eva-course-stats { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.8rem; | |
| color: var(--eva-text); | |
| opacity: 0.7; | |
| } | |
| .eva-course-content { | |
| position: absolute; | |
| top: 3.5rem; | |
| left: 0; | |
| width: 100%; | |
| height: calc(100% - 3.5rem); | |
| padding: 1.5rem; | |
| background-color: var(--eva-terminal-bg); | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| opacity: 0; | |
| transform: translateY(10px); | |
| pointer-events: none; | |
| overflow-y: auto; | |
| z-index: 1; | |
| box-sizing: border-box; | |
| } | |
| .eva-course.active .eva-course-content { | |
| opacity: 1; | |
| transform: translateY(0); | |
| pointer-events: auto; | |
| } | |
| .eva-course.active { | |
| height: auto; | |
| min-height: 350px; | |
| max-height: 800px; | |
| transition: height 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .eva-notebooks { | |
| margin-top: 1rem; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 0.75rem; | |
| } | |
| .eva-notebook { | |
| margin-bottom: 0.5rem; | |
| padding: 0.75rem; | |
| border-left: 2px solid var(--eva-blue); | |
| transition: all 0.25s ease; | |
| display: flex; | |
| align-items: center; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| border-radius: 0 var(--eva-border-radius) var(--eva-border-radius) 0; | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| [data-theme="light"] .eva-notebook { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| } | |
| .eva-notebook:hover { | |
| background-color: rgba(0, 102, 255, 0.1); | |
| padding-left: 1rem; | |
| transform: translateX(3px); | |
| } | |
| .eva-notebook a { | |
| color: var(--eva-text); | |
| text-decoration: none; | |
| display: block; | |
| font-size: 0.9rem; | |
| flex-grow: 1; | |
| } | |
| .eva-notebook a:hover { | |
| color: var(--eva-blue); | |
| } | |
| .eva-notebook-number { | |
| color: var(--eva-blue); | |
| font-size: 0.8rem; | |
| margin-right: 0.75rem; | |
| opacity: 0.7; | |
| min-width: 24px; | |
| font-weight: bold; | |
| } | |
| .eva-button { | |
| display: inline-block; | |
| background-color: transparent; | |
| color: var(--eva-green); | |
| border: 1px solid var(--eva-green); | |
| padding: 0.7rem 1.5rem; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| font-size: 0.9rem; | |
| letter-spacing: 1px; | |
| transition: var(--eva-transition); | |
| cursor: pointer; | |
| border-radius: var(--eva-border-radius); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .eva-button:hover { | |
| background-color: var(--eva-green); | |
| color: var(--eva-black); | |
| } | |
| .eva-button::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: 0.5s; | |
| } | |
| .eva-button:hover::after { | |
| left: 100%; | |
| } | |
| .eva-course-button { | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; | |
| align-self: center; | |
| } | |
| .eva-cta { | |
| background-color: var(--eva-terminal-bg); | |
| border: 1px solid var(--eva-orange); | |
| padding: 3rem 2rem; | |
| margin: 4rem 0; | |
| text-align: center; | |
| border-radius: var(--eva-border-radius); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .eva-cta h2 { | |
| font-size: 2rem; | |
| color: var(--eva-orange); | |
| margin-bottom: 1.5rem; | |
| text-transform: uppercase; | |
| } | |
| .eva-cta p { | |
| max-width: 600px; | |
| margin: 0 auto 2rem; | |
| font-size: 1.1rem; | |
| } | |
| .eva-cta .eva-button { | |
| color: var(--eva-orange); | |
| border-color: var(--eva-orange); | |
| } | |
| .eva-cta .eva-button:hover { | |
| background-color: var(--eva-orange); | |
| color: var(--eva-black); | |
| } | |
| .eva-footer { | |
| margin-top: 4rem; | |
| padding-top: 2rem; | |
| border-top: 2px solid var(--eva-green); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .eva-footer-logo { | |
| max-width: 200px; | |
| margin-bottom: 1rem; | |
| } | |
| .eva-footer-links { | |
| display: flex; | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .eva-footer-links a { | |
| color: var(--eva-text); | |
| text-decoration: none; | |
| transition: var(--eva-transition); | |
| } | |
| .eva-footer-links a:hover { | |
| color: var(--eva-green); | |
| } | |
| .eva-social-links { | |
| display: flex; | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .eva-social-links a { | |
| color: var(--eva-text); | |
| font-size: 1.5rem; | |
| transition: var(--eva-transition); | |
| } | |
| .eva-social-links a:hover { | |
| color: var(--eva-green); | |
| transform: translateY(-3px); | |
| } | |
| .eva-footer-copyright { | |
| font-size: 0.9rem; | |
| text-align: center; | |
| } | |
| .eva-search { | |
| position: relative; | |
| margin-bottom: 3rem; | |
| } | |
| .eva-search input { | |
| width: 100%; | |
| padding: 1rem; | |
| background-color: var(--eva-terminal-bg); | |
| border: 1px solid var(--eva-green); | |
| color: var(--eva-text); | |
| font-family: 'Courier New', monospace; | |
| font-size: 1rem; | |
| border-radius: var(--eva-border-radius); | |
| outline: none; | |
| transition: var(--eva-transition); | |
| } | |
| .eva-search input:focus { | |
| box-shadow: 0 0 10px rgba(28, 115, 97, 0.3); | |
| } | |
| .eva-search input::placeholder { | |
| color: rgba(224, 224, 224, 0.5); | |
| } | |
| [data-theme="light"] .eva-search input::placeholder { | |
| color: rgba(51, 51, 51, 0.5); | |
| } | |
| .eva-search-icon { | |
| position: absolute; | |
| right: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--eva-green); | |
| font-size: 1.2rem; | |
| } | |
| @keyframes scanline { | |
| 0% { | |
| transform: translateX(-100%); | |
| } | |
| 100% { | |
| transform: translateX(100%); | |
| } | |
| } | |
| @keyframes blink { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0; | |
| } | |
| } | |
| .eva-cursor { | |
| display: inline-block; | |
| width: 10px; | |
| height: 1.2em; | |
| background-color: var(--eva-green); | |
| margin-left: 2px; | |
| animation: blink 1s infinite; | |
| vertical-align: middle; | |
| } | |
| @media (max-width: 768px) { | |
| .eva-courses { | |
| grid-template-columns: 1fr; | |
| } | |
| .eva-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| padding: 1rem; | |
| } | |
| .eva-nav { | |
| margin-top: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .eva-hero { | |
| padding: 2rem 1rem; | |
| } | |
| .eva-hero h1 { | |
| font-size: 2rem; | |
| } | |
| .eva-features { | |
| grid-template-columns: 1fr; | |
| } | |
| .eva-footer { | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .eva-notebooks { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .eva-course.closing .eva-course-content { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| transition: opacity 0.2s ease, transform 0.2s ease; | |
| } | |
| .eva-course.closing .eva-course-front { | |
| opacity: 1; | |
| transform: translateY(0); | |
| transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="eva-container"> | |
| <header class="eva-header"> | |
| <div class="eva-logo">MARIMO LEARN</div> | |
| <nav class="eva-nav"> | |
| <a href="#features">Features</a> | |
| <a href="#courses">Courses</a> | |
| <a href="#contribute">Contribute</a> | |
| <a href="https://docs.marimo.io" target="_blank">Documentation</a> | |
| <a href="https://github.com/marimo-team/learn" target="_blank">GitHub</a> | |
| <button id="themeToggle" class="theme-toggle" aria-label="Toggle dark/light mode"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </nav> | |
| </header> | |
| <section class="eva-hero"> | |
| <h1>Interactive Learning with Marimo<span class="eva-cursor"></span></h1> | |
| <p> | |
| A curated collection of educational notebooks covering computer science, | |
| mathematics, data science, and more. Built with marimo - the reactive | |
| Python notebook that makes data exploration delightful. | |
| </p> | |
| <a href="#courses" class="eva-button">Explore Courses</a> | |
| </section> | |
| <section id="features"> | |
| <h2 class="eva-section-title">Why Marimo Learn?</h2> | |
| <div class="eva-features"> | |
| <div class="eva-feature"> | |
| <div class="eva-feature-icon"><i class="fas fa-bolt"></i></div> | |
| <h3>Reactive Notebooks</h3> | |
| <p>Experience the power of reactive programming with marimo notebooks that automatically update when dependencies change.</p> | |
| </div> | |
| <div class="eva-feature"> | |
| <div class="eva-feature-icon"><i class="fas fa-code"></i></div> | |
| <h3>Learn by Doing</h3> | |
| <p>Interactive examples and exercises help you understand concepts through hands-on practice.</p> | |
| </div> | |
| <div class="eva-feature"> | |
| <div class="eva-feature-icon"><i class="fas fa-graduation-cap"></i></div> | |
| <h3>Comprehensive Courses</h3> | |
| <p>From Python basics to advanced optimization techniques, our courses cover a wide range of topics.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="courses"> | |
| <h2 class="eva-section-title">Explore Courses</h2> | |
| <div class="eva-search"> | |
| <input type="text" id="courseSearch" placeholder="Search courses and notebooks..."> | |
| <span class="eva-search-icon"><i class="fas fa-search"></i></span> | |
| </div> | |
| <div class="eva-courses"> | |
| <div class="eva-course" data-course-id="python"> | |
| <div class="eva-course-header"> | |
| <h2 class="eva-course-title">Python</h2> | |
| <span class="eva-course-toggle"><i class="fas fa-chevron-down"></i></span> | |
| </div> | |
| <div class="eva-course-front"> | |
| <p class="eva-course-description">This collection of marimo notebooks is designed to teach you the basics of the Python programming language.</p> | |
| <div class="eva-course-stats"> | |
| <span><i class="fas fa-book"></i> 9 notebooks</span> | |
| </div> | |
| <button class="eva-button eva-course-button">View Notebooks</button> | |
| </div> | |
| <div class="eva-course-content"> | |
| <div class="eva-notebooks"> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">001</span> | |
| <a href="python\001_numbers.html" data-notebook-title="Numbers">Numbers</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">002</span> | |
| <a href="python\002_strings.html" data-notebook-title="Strings">Strings</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">003</span> | |
| <a href="python\003_collections.html" data-notebook-title="Collections">Collections</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">004</span> | |
| <a href="python\004_conditional_logic.html" data-notebook-title="Conditional Logic">Conditional Logic</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">005</span> | |
| <a href="python\005_loops.html" data-notebook-title="Loops">Loops</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">007</span> | |
| <a href="python\007_advanced_collections.html" data-notebook-title="Advanced Collections">Advanced Collections</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">008</span> | |
| <a href="python\008_functions.html" data-notebook-title="Functions">Functions</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">009</span> | |
| <a href="python\009_modules.html" data-notebook-title="Modules">Modules</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">010</span> | |
| <a href="python\010_exceptions.html" data-notebook-title="Exceptions">Exceptions</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="eva-course" data-course-id="probability"> | |
| <div class="eva-course-badge"><i class="fas fa-code-branch"></i> In Progress</div> | |
| <div class="eva-course-header"> | |
| <h2 class="eva-course-title">Probability</h2> | |
| <span class="eva-course-toggle"><i class="fas fa-chevron-down"></i></span> | |
| </div> | |
| <div class="eva-course-front"> | |
| <p class="eva-course-description">🚧 This collection is a work in progress. Check back later for new noteboks.</p> | |
| <div class="eva-course-stats"> | |
| <span><i class="fas fa-book"></i> 10 notebooks</span> | |
| </div> | |
| <button class="eva-button eva-course-button">View Notebooks</button> | |
| </div> | |
| <div class="eva-course-content"> | |
| <div class="eva-notebooks"> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">01</span> | |
| <a href="probability\01_sets.html" data-notebook-title="Sets">Sets</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">02</span> | |
| <a href="probability\02_axioms.html" data-notebook-title="Axioms">Axioms</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">03</span> | |
| <a href="probability\03_probability_of_or.html" data-notebook-title="Probability Of Or">Probability Of Or</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">04</span> | |
| <a href="probability\04_conditional_probability.html" data-notebook-title="Conditional Probability">Conditional Probability</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">05</span> | |
| <a href="probability\05_independence.html" data-notebook-title="Independence">Independence</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">06</span> | |
| <a href="probability\06_probability_of_and.html" data-notebook-title="Probability Of And">Probability Of And</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">07</span> | |
| <a href="probability\07_law_of_total_probability.html" data-notebook-title="Law Of Total Probability">Law Of Total Probability</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">08</span> | |
| <a href="probability\08_bayes_theorem.html" data-notebook-title="Bayes Theorem">Bayes Theorem</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">09</span> | |
| <a href="probability\09_random_variables.html" data-notebook-title="Random Variables">Random Variables</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">10</span> | |
| <a href="probability\10_probability_mass_function.html" data-notebook-title="Probability Mass Function">Probability Mass Function</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="eva-course" data-course-id="polars"> | |
| <div class="eva-course-badge"><i class="fas fa-code-branch"></i> In Progress</div> | |
| <div class="eva-course-header"> | |
| <h2 class="eva-course-title">Polars</h2> | |
| <span class="eva-course-toggle"><i class="fas fa-chevron-down"></i></span> | |
| </div> | |
| <div class="eva-course-front"> | |
| <p class="eva-course-description">🚧 This collection is a work in progress. Please help us add notebooks!</p> | |
| <div class="eva-course-stats"> | |
| <span><i class="fas fa-book"></i> 4 notebooks</span> | |
| </div> | |
| <button class="eva-button eva-course-button">View Notebooks</button> | |
| </div> | |
| <div class="eva-course-content"> | |
| <div class="eva-notebooks"> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">01</span> | |
| <a href="polars\01_why_polars.html" data-notebook-title="Why Polars">Why Polars</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">04</span> | |
| <a href="polars\04_basic_operations.html" data-notebook-title="Basic Operations">Basic Operations</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">12</span> | |
| <a href="polars\12_aggregations.html" data-notebook-title="Aggregations">Aggregations</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">14</span> | |
| <a href="polars\14_user_defined_functions.html" data-notebook-title="User Defined Functions">User Defined Functions</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="eva-course" data-course-id="optimization"> | |
| <div class="eva-course-header"> | |
| <h2 class="eva-course-title">Optimization</h2> | |
| <span class="eva-course-toggle"><i class="fas fa-chevron-down"></i></span> | |
| </div> | |
| <div class="eva-course-front"> | |
| <p class="eva-course-description">This collection of marimo notebooks teaches you the basics of convex optimization.</p> | |
| <div class="eva-course-stats"> | |
| <span><i class="fas fa-book"></i> 7 notebooks</span> | |
| </div> | |
| <button class="eva-button eva-course-button">View Notebooks</button> | |
| </div> | |
| <div class="eva-course-content"> | |
| <div class="eva-notebooks"> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">01</span> | |
| <a href="optimization\01_least_squares.html" data-notebook-title="Least Squares">Least Squares</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">02</span> | |
| <a href="optimization\02_linear_program.html" data-notebook-title="Linear Program">Linear Program</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">03</span> | |
| <a href="optimization\03_minimum_fuel_optimal_control.html" data-notebook-title="Minimum Fuel Optimal Control">Minimum Fuel Optimal Control</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">04</span> | |
| <a href="optimization\04_quadratic_program.html" data-notebook-title="Quadratic Program">Quadratic Program</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">05</span> | |
| <a href="optimization\05_portfolio_optimization.html" data-notebook-title="Portfolio Optimization">Portfolio Optimization</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">06</span> | |
| <a href="optimization\06_convex_optimization.html" data-notebook-title="Convex Optimization">Convex Optimization</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">07</span> | |
| <a href="optimization\07_sdp.html" data-notebook-title="Sdp">Sdp</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="eva-course" data-course-id="functional_programming"> | |
| <div class="eva-course-badge"><i class="fas fa-code-branch"></i> In Progress</div> | |
| <div class="eva-course-header"> | |
| <h2 class="eva-course-title">Functional Programming</h2> | |
| <span class="eva-course-toggle"><i class="fas fa-chevron-down"></i></span> | |
| </div> | |
| <div class="eva-course-front"> | |
| <p class="eva-course-description">🚧 This collection is a .</p> | |
| <div class="eva-course-stats"> | |
| <span><i class="fas fa-book"></i> 1 notebook</span> | |
| </div> | |
| <button class="eva-button eva-course-button">View Notebooks</button> | |
| </div> | |
| <div class="eva-course-content"> | |
| <div class="eva-notebooks"> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">05</span> | |
| <a href="functional_programming\05_functors.html" data-notebook-title="Functors">Functors</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contribute" class="eva-cta"> | |
| <h2>Contribute to Marimo Learn</h2> | |
| <p> | |
| Help us expand our collection of educational notebooks. Whether you're an expert in machine learning, | |
| statistics, or any other field, your contributions are welcome! | |
| </p> | |
| <a href="https://github.com/marimo-team/learn" target="_blank" class="eva-button"> | |
| <i class="fab fa-github"></i> Contribute on GitHub | |
| </a> | |
| </section> | |
| <footer class="eva-footer"> | |
| <div class="eva-footer-logo"> | |
| <a href="https://marimo.io" target="_blank"> | |
| <img src="https://marimo.io/logotype-wide.svg" alt="Marimo" width="200"> | |
| </a> | |
| </div> | |
| <div class="eva-social-links"> | |
| <a href="https://github.com/marimo-team" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a> | |
| <a href="https://marimo.io/discord?ref=learn" target="_blank" aria-label="Discord"><i class="fab fa-discord"></i></a> | |
| <a href="https://twitter.com/marimo_io" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a> | |
| <a href="https://www.youtube.com/@marimo-io" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a> | |
| <a href="https://www.linkedin.com/company/marimo-io" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| <div class="eva-footer-links"> | |
| <a href="https://marimo.io" target="_blank">Website</a> | |
| <a href="https://docs.marimo.io" target="_blank">Documentation</a> | |
| <a href="https://github.com/marimo-team/learn" target="_blank">GitHub</a> | |
| </div> | |
| <div class="eva-footer-copyright"> | |
| © 2025 Marimo Inc. All rights reserved. | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Theme toggle functionality | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const themeIcon = themeToggle.querySelector('i'); | |
| // Check for saved theme preference or use default (dark) | |
| const savedTheme = localStorage.getItem('theme') || 'dark'; | |
| document.documentElement.setAttribute('data-theme', savedTheme); | |
| updateThemeIcon(savedTheme); | |
| // Toggle theme when button is clicked | |
| themeToggle.addEventListener('click', () => { | |
| const currentTheme = document.documentElement.getAttribute('data-theme'); | |
| const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; | |
| document.documentElement.setAttribute('data-theme', newTheme); | |
| localStorage.setItem('theme', newTheme); | |
| updateThemeIcon(newTheme); | |
| }); | |
| function updateThemeIcon(theme) { | |
| if (theme === 'dark') { | |
| themeIcon.className = 'fas fa-sun'; | |
| } else { | |
| themeIcon.className = 'fas fa-moon'; | |
| } | |
| } | |
| // Terminal typing effect for hero text | |
| const heroTitle = document.querySelector('.eva-hero h1'); | |
| const heroText = document.querySelector('.eva-hero p'); | |
| const cursor = document.querySelector('.eva-cursor'); | |
| const originalTitle = heroTitle.textContent; | |
| const originalText = heroText.textContent.trim(); | |
| heroTitle.textContent = ''; | |
| heroText.textContent = ''; | |
| let titleIndex = 0; | |
| let textIndex = 0; | |
| function typeTitle() { | |
| if (titleIndex < originalTitle.length) { | |
| heroTitle.textContent += originalTitle.charAt(titleIndex); | |
| titleIndex++; | |
| setTimeout(typeTitle, 50); | |
| } else { | |
| cursor.style.display = 'none'; | |
| setTimeout(typeText, 500); | |
| } | |
| } | |
| function typeText() { | |
| if (textIndex < originalText.length) { | |
| heroText.textContent += originalText.charAt(textIndex); | |
| textIndex++; | |
| setTimeout(typeText, 20); | |
| } | |
| } | |
| typeTitle(); | |
| // Course toggle functionality - flashcard style | |
| const courseHeaders = document.querySelectorAll('.eva-course-header'); | |
| const courseButtons = document.querySelectorAll('.eva-course-button'); | |
| // Function to toggle course | |
| function toggleCourse(course) { | |
| const isActive = course.classList.contains('active'); | |
| // First close all courses with a slight delay for better visual effect | |
| document.querySelectorAll('.eva-course.active').forEach(c => { | |
| if (c !== course) { | |
| // Add a closing class for animation | |
| c.classList.add('closing'); | |
| // Remove active class after a short delay | |
| setTimeout(() => { | |
| c.classList.remove('active'); | |
| c.classList.remove('closing'); | |
| }, 300); | |
| } | |
| }); | |
| // Toggle the clicked course | |
| if (!isActive) { | |
| // Add a small delay before opening to allow others to close | |
| setTimeout(() => { | |
| course.classList.add('active'); | |
| // Check if the course has any notebooks | |
| const notebooks = course.querySelectorAll('.eva-notebook'); | |
| const content = course.querySelector('.eva-course-content'); | |
| if (notebooks.length === 0 && !content.querySelector('.eva-empty-message')) { | |
| // If no notebooks, show a message | |
| const emptyMessage = document.createElement('p'); | |
| emptyMessage.className = 'eva-empty-message'; | |
| emptyMessage.textContent = 'No notebooks available in this course yet.'; | |
| emptyMessage.style.color = 'var(--eva-text)'; | |
| emptyMessage.style.fontStyle = 'italic'; | |
| emptyMessage.style.opacity = '0.7'; | |
| emptyMessage.style.textAlign = 'center'; | |
| emptyMessage.style.padding = '1rem 0'; | |
| content.appendChild(emptyMessage); | |
| } | |
| // Animate notebooks to appear sequentially | |
| notebooks.forEach((notebook, index) => { | |
| notebook.style.opacity = '0'; | |
| notebook.style.transform = 'translateX(-10px)'; | |
| setTimeout(() => { | |
| notebook.style.opacity = '1'; | |
| notebook.style.transform = 'translateX(0)'; | |
| }, 50 + (index * 30)); // Stagger the animations | |
| }); | |
| }, 100); | |
| } | |
| } | |
| // Add click event to course headers | |
| courseHeaders.forEach(header => { | |
| header.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| const currentCourse = this.closest('.eva-course'); | |
| toggleCourse(currentCourse); | |
| }); | |
| }); | |
| // Add click event to course buttons | |
| courseButtons.forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| const currentCourse = this.closest('.eva-course'); | |
| toggleCourse(currentCourse); | |
| }); | |
| }); | |
| // Search functionality with improved matching | |
| const searchInput = document.getElementById('courseSearch'); | |
| const courses = document.querySelectorAll('.eva-course'); | |
| const notebooks = document.querySelectorAll('.eva-notebook'); | |
| searchInput.addEventListener('input', function() { | |
| const searchTerm = this.value.toLowerCase(); | |
| if (searchTerm === '') { | |
| // Reset all visibility | |
| courses.forEach(course => { | |
| course.style.display = 'block'; | |
| course.classList.remove('active'); | |
| }); | |
| notebooks.forEach(notebook => { | |
| notebook.style.display = 'flex'; | |
| }); | |
| // Open the first course with notebooks by default when search is cleared | |
| for (let i = 0; i < courses.length; i++) { | |
| const courseNotebooks = courses[i].querySelectorAll('.eva-notebook'); | |
| if (courseNotebooks.length > 0) { | |
| courses[i].classList.add('active'); | |
| break; | |
| } | |
| } | |
| return; | |
| } | |
| // First hide all courses | |
| courses.forEach(course => { | |
| course.style.display = 'none'; | |
| course.classList.remove('active'); | |
| }); | |
| // Then show courses and notebooks that match the search | |
| let hasResults = false; | |
| // Track which courses have matching notebooks | |
| const coursesWithMatchingNotebooks = new Set(); | |
| // First check notebooks | |
| notebooks.forEach(notebook => { | |
| const notebookTitle = notebook.querySelector('a').getAttribute('data-notebook-title').toLowerCase(); | |
| const matchesSearch = notebookTitle.includes(searchTerm); | |
| notebook.style.display = matchesSearch ? 'flex' : 'none'; | |
| if (matchesSearch) { | |
| const course = notebook.closest('.eva-course'); | |
| coursesWithMatchingNotebooks.add(course.getAttribute('data-course-id')); | |
| hasResults = true; | |
| } | |
| }); | |
| // Then check course titles and descriptions | |
| courses.forEach(course => { | |
| const courseId = course.getAttribute('data-course-id'); | |
| const courseTitle = course.querySelector('.eva-course-title').textContent.toLowerCase(); | |
| const courseDescription = course.querySelector('.eva-course-description').textContent.toLowerCase(); | |
| const courseMatches = courseTitle.includes(searchTerm) || courseDescription.includes(searchTerm); | |
| // Show course if it matches or has matching notebooks | |
| if (courseMatches || coursesWithMatchingNotebooks.has(courseId)) { | |
| course.style.display = 'block'; | |
| course.classList.add('active'); | |
| hasResults = true; | |
| // If course matches but doesn't have matching notebooks, show all its notebooks | |
| if (courseMatches && !coursesWithMatchingNotebooks.has(courseId)) { | |
| course.querySelectorAll('.eva-notebook').forEach(nb => { | |
| nb.style.display = 'flex'; | |
| }); | |
| } | |
| } | |
| }); | |
| }); | |
| // Open the first course with notebooks by default | |
| let firstCourseWithNotebooks = null; | |
| for (let i = 0; i < courses.length; i++) { | |
| const courseNotebooks = courses[i].querySelectorAll('.eva-notebook'); | |
| if (courseNotebooks.length > 0) { | |
| firstCourseWithNotebooks = courses[i]; | |
| break; | |
| } | |
| } | |
| if (firstCourseWithNotebooks) { | |
| firstCourseWithNotebooks.classList.add('active'); | |
| } else if (courses.length > 0) { | |
| // If no courses have notebooks, just open the first one | |
| courses[0].classList.add('active'); | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |