Spaces:
Configuration error
Configuration error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DataBooth Interactive Notebooks</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| color: #222; | |
| background-color: #fff; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| header { | |
| background-color: #0066CC; | |
| color: #fff; | |
| padding: 30px 0 20px 0; | |
| text-align: center; | |
| } | |
| .logo { | |
| width: 120px; | |
| height: auto; | |
| margin-bottom: 10px; | |
| border-radius: 12px; | |
| background: #fff; | |
| padding: 8px; | |
| } | |
| h1 { | |
| font-size: 2.2rem; | |
| margin-bottom: 10px; | |
| letter-spacing: 1px; | |
| } | |
| .subtitle { | |
| font-size: 1.15rem; | |
| margin: 0 auto 10px auto; | |
| color: #e0e0e0; | |
| } | |
| .section-title { | |
| font-size: 1.4rem; | |
| margin: 30px 0 10px; | |
| text-align: center; | |
| color: #0066CC; | |
| } | |
| .cards { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| margin: 20px 0; | |
| } | |
| .card { | |
| background-color: #f9f9f9; | |
| border: 1px solid #eee; | |
| border-radius: 8px; | |
| flex: 1 0 220px; | |
| box-shadow: 0 2px 6px rgba(0,0,0,0.04); | |
| transition: box-shadow 0.2s; | |
| } | |
| .card:hover { | |
| box-shadow: 0 4px 16px rgba(0,102,204,0.10); | |
| } | |
| .card-header { | |
| background-color: #eaf3fb; | |
| padding: 12px; | |
| font-weight: bold; | |
| border-top-left-radius: 8px; | |
| border-top-right-radius: 8px; | |
| color: #0066CC; | |
| } | |
| .card-header.app { | |
| background-color: #fff3e0; | |
| color: #FF9900; | |
| } | |
| .card-body { | |
| padding: 15px; | |
| } | |
| .card-link { | |
| display: inline-block; | |
| background-color: #0066CC; | |
| color: white; | |
| padding: 7px 14px; | |
| border-radius: 5px; | |
| text-decoration: none; | |
| margin-top: 8px; | |
| font-weight: bold; | |
| transition: background 0.2s; | |
| } | |
| .card-link:hover { | |
| background-color: #004c99; | |
| } | |
| .card-link.app { | |
| background-color: #FF9900; | |
| } | |
| .card-link.app:hover { | |
| background-color: #c76d00; | |
| } | |
| footer { | |
| background-color: #f0f0f0; | |
| text-align: center; | |
| padding: 24px 0 12px 0; | |
| margin-top: 40px; | |
| font-size: 1rem; | |
| color: #555; | |
| } | |
| .footer-logos { | |
| margin-bottom: 10px; | |
| } | |
| .footer-logos img { | |
| height: 28px; | |
| vertical-align: middle; | |
| margin-right: 10px; | |
| } | |
| .footer-links a { | |
| color: #0066CC; | |
| margin: 0 10px; | |
| text-decoration: none; | |
| } | |
| .powered-by { | |
| margin: 12px 0 0 0; | |
| font-size: 0.95rem; | |
| color: #888; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <h1>DataBooth Interactive Notebooks</h1> | |
| <p class="subtitle"> | |
| Explore interactive Python notebooks and apps, powered by <a href="https://marimo.io" target="_blank" style="color:#FF9900;text-decoration:underline;">Marimo</a> and WebAssembly. | |
| </p> | |
| </div> | |
| </header> | |
| <main class="container"> | |
| <h2 class="section-title">Notebooks</h2> | |
| <p>Interactive notebooks in edit mode — experiment, learn, and explore code.</p> | |
| <div class="cards"> | |
| <div class="card"> | |
| <div class="card-header">Caternary</div> | |
| <div class="card-body"> | |
| <a href="notebooks/caternary.html" class="card-link">Open Notebook</a> | |
| </div> | |
| </div> | |
| </div> | |
| <h2 class="section-title">Apps</h2> | |
| <p>Interactive applications in run mode — code is hidden for a clean user experience.</p> | |
| <div class="cards"> | |
| <div class="card"> | |
| <div class="card-header app">Caternary</div> | |
| <div class="card-body"> | |
| <a href="apps/caternary.html" class="card-link app">Open App</a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-logos"> | |
| <a href="https://www.databooth.com.au" target="_blank"> | |
| <img src="https://www.databooth.com.au/images/databooth-logo.png" alt="DataBooth Logo" style="height:28px;"> | |
| </a> | |
| <span style="font-size:1.1em;">|</span> | |
| <a href="https://marimo.io" target="_blank"> | |
| <img src="https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/marimo-logotype-thick.svg" alt="marimo Logo" style="height:28px;"> | |
| </a> | |
| <span style="font-size:1.1em;">|</span> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/WebAssembly_Logo.svg" alt="WebAssembly Logo" style="height:28px;"> | |
| </div> | |
| <div class="powered-by"> | |
| Powered by <a href="https://marimo.io" target="_blank">Marimo</a> and WebAssembly. Site generated by <a href="https://www.databooth.com.au" target="_blank">DataBooth</a>. | |
| </div> | |
| <div class="footer-links"> | |
| <a href="https://github.com/marimo-team/marimo" target="_blank"><Marimo GitHub</a> | |
| <a href="https://docs.marimo.io" target="_blank">Marimo Docs</a> | |
| <a href="https://www.databooth.com.au" target="_blank">DataBooth</a> | |
| </div> | |
| <p style="margin-top:10px;">Licensed under <a href="https://github.com/marimo-team/marimo/blob/main/LICENSE" target="_blank">Apache License 2.0</a></p> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |