Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <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 { | |
| --eva-purple: #9a1eb3; | |
| --eva-green: #00ff00; | |
| --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; | |
| } | |
| body { | |
| background-color: var(--eva-black); | |
| color: var(--eva-text); | |
| font-family: 'Courier New', monospace; | |
| margin: 0; | |
| padding: 0; | |
| line-height: 1.6; | |
| } | |
| .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: rgba(17, 17, 17, 0.95); | |
| z-index: 100; | |
| backdrop-filter: blur(5px); | |
| padding-top: 1rem; | |
| } | |
| .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(0, 255, 0, 0.5); | |
| } | |
| .eva-nav { | |
| display: flex; | |
| gap: 1.5rem; | |
| } | |
| .eva-nav a { | |
| color: white; | |
| 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; | |
| } | |
| .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; | |
| } | |
| .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(0, 255, 0, 0.5); | |
| } | |
| .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); | |
| } | |
| .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); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .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-header { | |
| padding: 1.5rem; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid rgba(154, 30, 179, 0.3); | |
| } | |
| .eva-course-title { | |
| font-size: 1.5rem; | |
| color: var(--eva-purple); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin: 0; | |
| } | |
| .eva-course-toggle { | |
| color: var(--eva-purple); | |
| font-size: 1.5rem; | |
| transition: var(--eva-transition); | |
| } | |
| .eva-course-content { | |
| padding: 0 1.5rem; | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: var(--eva-transition); | |
| } | |
| .eva-course.active .eva-course-content { | |
| padding: 1.5rem; | |
| max-height: 1000px; | |
| } | |
| .eva-course.active .eva-course-toggle { | |
| transform: rotate(180deg); | |
| } | |
| .eva-course-description { | |
| margin-bottom: 1.5rem; | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| } | |
| .eva-notebooks { | |
| margin-top: 1rem; | |
| } | |
| .eva-notebook { | |
| margin-bottom: 0.75rem; | |
| padding: 0.5rem; | |
| border-left: 2px solid var(--eva-blue); | |
| transition: var(--eva-transition); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .eva-notebook:hover { | |
| background-color: rgba(0, 102, 255, 0.1); | |
| padding-left: 1rem; | |
| } | |
| .eva-notebook a { | |
| color: white; | |
| 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.5rem; | |
| opacity: 0.7; | |
| min-width: 24px; | |
| } | |
| .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-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; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 2rem; | |
| } | |
| .eva-footer-links { | |
| display: flex; | |
| gap: 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-footer-copyright { | |
| font-size: 0.9rem; | |
| } | |
| .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(0, 255, 0, 0.3); | |
| } | |
| .eva-search input::placeholder { | |
| color: rgba(224, 224, 224, 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; | |
| } | |
| } | |
| </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> | |
| </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="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-content"> | |
| <p class="eva-course-description">This collection of marimo notebooks teaches you the basics of convex optimization.</p> | |
| <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="polars"> | |
| <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-content"> | |
| <p class="eva-course-description">_🚧 This collection is a work in progress. Please help us add notebooks!_</p> | |
| <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">02</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">03</span> | |
| <a href="polars\12_aggregations.html" data-notebook-title="Aggregations">Aggregations</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">04</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="probability"> | |
| <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-content"> | |
| <p class="eva-course-description">🚧 _This collection is a work in progress. Check back later for new noteboks._</p> | |
| <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 class="eva-notebook"> | |
| <span class="eva-notebook-number">11</span> | |
| <a href="probability\11_expectation.html" data-notebook-title="Expectation">Expectation</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <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-content"> | |
| <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-notebooks"> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">01</span> | |
| <a href="python\001_numbers.html" data-notebook-title="Numbers">Numbers</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">02</span> | |
| <a href="python\002_strings.html" data-notebook-title="Strings">Strings</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">03</span> | |
| <a href="python\003_collections.html" data-notebook-title="Collections">Collections</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">04</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">05</span> | |
| <a href="python\005_loops.html" data-notebook-title="Loops">Loops</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">06</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">07</span> | |
| <a href="python\008_functions.html" data-notebook-title="Functions">Functions</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">08</span> | |
| <a href="python\009_modules.html" data-notebook-title="Modules">Modules</a> | |
| </div> | |
| <div class="eva-notebook"> | |
| <span class="eva-notebook-number">09</span> | |
| <a href="python\010_exceptions.html" data-notebook-title="Exceptions">Exceptions</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-copyright"> | |
| © 2024 Marimo Learn. Built with <a href="https://marimo.io" target="_blank" style="color: var(--eva-green);">marimo</a>. | |
| </div> | |
| <div class="eva-footer-links"> | |
| <a href="https://marimo.io" target="_blank">Marimo 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> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // 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 | |
| const courseHeaders = document.querySelectorAll('.eva-course-header'); | |
| courseHeaders.forEach(header => { | |
| header.addEventListener('click', () => { | |
| const course = header.parentElement; | |
| course.classList.toggle('active'); | |
| }); | |
| }); | |
| // Search functionality | |
| 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'; | |
| }); | |
| 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; | |
| 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'); | |
| course.style.display = 'block'; | |
| course.classList.add('active'); | |
| hasResults = true; | |
| } | |
| }); | |
| // Also search course titles | |
| courses.forEach(course => { | |
| const courseTitle = course.querySelector('.eva-course-title').textContent.toLowerCase(); | |
| const courseDescription = course.querySelector('.eva-course-description').textContent.toLowerCase(); | |
| if (courseTitle.includes(searchTerm) || courseDescription.includes(searchTerm)) { | |
| course.style.display = 'block'; | |
| course.classList.add('active'); | |
| hasResults = true; | |
| } | |
| }); | |
| }); | |
| // Open the first course by default | |
| if (courses.length > 0) { | |
| 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> |