Spaces:
Sleeping
Sleeping
| import marimo | |
| __generated_with = "0.13.1-dev16" | |
| app = marimo.App() | |
| def _(mo): | |
| import marimo as mo | |
| mo.Html(""" | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Our t:able Legal Journey</title> | |
| <style> | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
| background-color: #f8f9fa; | |
| color: #333333; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| margin: 0; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| } | |
| .container { | |
| background-color: #ffffff; | |
| padding: 30px 40px; | |
| border-radius: 12px; | |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); | |
| text-align: center; | |
| max-width: 600px; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| .page { | |
| display: none; | |
| animation: fadeIn 0.4s ease-in-out; | |
| } | |
| .page.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| h2 { | |
| color: #00A87E; | |
| margin-bottom: 20px; | |
| font-size: 1.8em; | |
| font-weight: 600; | |
| } | |
| p { | |
| font-size: 1.1em; | |
| line-height: 1.6; | |
| margin-bottom: 25px; | |
| color: #555555; | |
| } | |
| svg { | |
| max-width: 140px; | |
| height: auto; | |
| margin: 20px auto; | |
| display: block; | |
| } | |
| .cat-gallery { | |
| display: flex; | |
| justify-content: space-around; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .cat-gallery svg { | |
| max-width: 90px; | |
| } | |
| .navigation { | |
| margin-top: 30px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| button { | |
| background-color: #00A87E; | |
| color: #ffffff; | |
| border: none; | |
| padding: 10px 22px; | |
| border-radius: 8px; | |
| font-family: inherit; | |
| font-size: 1em; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
| } | |
| button:hover { | |
| background-color: #008a68; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.07); | |
| } | |
| button:active { | |
| transform: translateY(1px); | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.05); | |
| } | |
| button:disabled { | |
| background-color: #b2e0d4; | |
| color: #6c757d; | |
| cursor: not-allowed; | |
| opacity: 0.8; | |
| box-shadow: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Page 1 --> | |
| <div id="page1" class="page active"> | |
| <h2>Our t:able Legal Journey</h2> | |
| <p>When we thought legal would say "no", we were surprised by their creative "yes, and"!</p> | |
| <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | |
| <title>Legal Scale</title> | |
| <line x1="50" y1="20" x2="50" y2="80" stroke="#6c757d" stroke-width="3"/> | |
| <line x1="30" y1="30" x2="70" y2="30" stroke="#6c757d" stroke-width="3"/> | |
| <circle cx="50" cy="20" r="5" fill="#00A87E"/> | |
| <circle cx="30" cy="40" r="10" fill="#e6f7f3" stroke="#b2e0d4" stroke-width="1"/> | |
| <circle cx="70" cy="40" r="10" fill="#e6f7f3" stroke="#b2e0d4" stroke-width="1"/> | |
| <rect x="40" y="80" width="20" height="5" fill="#6c757d"/> | |
| </svg> | |
| </div> | |
| """) | |
| return | |
| def _(mo): | |
| import marimo as mo | |
| # Page 2 Content | |
| mo.Html(""" | |
| <!-- Page 2 --> | |
| <div id="page2" class="page"> | |
| <h2>A t:able Conversation!</h2> | |
| <p>But actually talking with them sparked creativity and opened doors to solutions!</p> | |
| <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | |
| <title>Idea Lightbulb</title> | |
| <path d="M 50 10 C 30 10, 25 30, 25 50 C 25 70, 35 80, 40 85 L 60 85 C 65 80, 75 70, 75 50 C 75 30, 70 10, 50 10 Z" fill="#e6f7f3" stroke="#b2e0d4" stroke-width="1.5"/> | |
| <path d="M 45 65 C 40 70, 60 70, 55 65 L 50 80" stroke="#6c757d" stroke-width="1" fill="none"/> | |
| <rect x="40" y="84" width="20" height="5" fill="#cccccc" stroke="#a9a9a9" stroke-width="0.5"/> | |
| <rect x="42" y="89" width="16" height="3" fill="#cccccc" stroke="#a9a9a9" stroke-width="0.5"/> | |
| <rect x="44" y="92" width="12" height="3" fill="#cccccc" stroke="#a9a9a9" stroke-width="0.5"/> | |
| <path d="M 60 20 L 65 25" stroke="#ffd700" stroke-width="2.5" stroke-linecap="round"/> | |
| <path d="M 70 35 L 75 40" stroke="#ffd700" stroke-width="2.5" stroke-linecap="round"/> | |
| <path d="M 70 55 L 75 60" stroke="#ffd700" stroke-width="2.5" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| """) | |
| return | |
| def _(mo): | |
| import marimo as mo | |
| # Page 3 Content | |
| mo.Html(""" | |
| <!-- Page 3 --> | |
| <div id="page3" class="page"> | |
| <h2>Bonus: Team Mascots!</h2> | |
| <p>...and we discovered our legal partners appreciate cute companions too!</p> | |
| <div class="cat-gallery"> | |
| <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> | |
| <title>Teal Accented Sitting Cat</title> | |
| <path d="M 10 45 C 5 30, 15 15, 25 15 C 35 15, 45 30, 40 45 Z" fill="#e0e0e0" stroke="#aaaaaa" stroke-width="0.5"/> | |
| <circle cx="25" cy="18" r="10" fill="#e0e0e0" stroke="#aaaaaa" stroke-width="0.5"/> | |
| <path d="M 18 12 L 15 8 L 22 10 Z" fill="#e0e0e0" stroke="#aaaaaa" stroke-width="0.5"/> | |
| <path d="M 32 12 L 35 8 L 28 10 Z" fill="#e0e0e0" stroke="#aaaaaa" stroke-width="0.5"/> | |
| <circle cx="22" cy="18" r="1.2" fill="#00A87E"/> | |
| <circle cx="28" cy="18" r="1.2" fill="#00A87E"/> | |
| <path d="M 24 21 L 26 21 L 25 22 Z" fill="#6c757d"/> | |
| <path d="M 40 40 Q 50 35, 45 25" stroke="#aaaaaa" stroke-width="2" fill="none" stroke-linecap="round"/> | |
| </svg> | |
| <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> | |
| <title>Grey Lounging Cat</title> | |
| <path d="M 5 40 C 15 30, 35 30, 45 40 C 40 45, 10 45, 5 40 Z" fill="#d3d3d3" stroke="#a9a9a9" stroke-width="0.5"/> | |
| <circle cx="15" cy="30" r="8" fill="#d3d3d3" stroke="#a9a9a9" stroke-width="0.5"/> | |
| <path d="M 10 25 L 7 22 L 13 24 Z" fill="#d3d3d3" stroke="#a9a9a9" stroke-width="0.5"/> | |
| <path d="M 20 25 L 23 22 L 17 24 Z" fill="#d3d3d3" stroke="#a9a9a9" stroke-width="0.5"/> | |
| <path d="M 12 30 Q 14 28, 16 30" stroke="#606060" stroke-width="0.5" fill="none"/> | |
| <path d="M 18 30 Q 20 28, 22 30" stroke="#606060" stroke-width="0.5" fill="none"/> | |
| <path d="M 45 40 Q 50 38, 48 30" stroke="#a9a9a9" stroke-width="2" fill="none" stroke-linecap="round"/> | |
| </svg> | |
| <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> | |
| <title>Black and White Cat Face</title> | |
| <circle cx="25" cy="25" r="15" fill="#ffffff" stroke="#cccccc" stroke-width="0.5"/> | |
| <path d="M 20 10 Q 25 20, 30 10 C 28 5, 22 5, 20 10 Z" fill="#444444"/> | |
| <path d="M 32 20 a 5 5 0 1 1 -10 0 a 5 5 0 1 1 10 0" fill="#444444"/> | |
| <path d="M 15 15 L 10 10 L 20 13 Z" fill="#444444"/> | |
| <path d="M 35 15 L 40 10 L 30 13 Z" fill="#ffffff" stroke="#cccccc" stroke-width="0.5"/> | |
| <circle cx="20" cy="25" r="1.5" fill="#333333"/> | |
| <circle cx="30" cy="25" r="1.5" fill="#333333"/> | |
| <path d="M 24 29 L 26 29 L 25 30 Z" fill="#aaaaaa"/> | |
| <path d="M 25 30 Q 23 32, 21 31" stroke="#666666" stroke-width="0.5" fill="none" stroke-linecap="round"/> | |
| <path d="M 25 30 Q 27 32, 29 31" stroke="#666666" stroke-width="0.5" fill="none" stroke-linecap="round"/> | |
| <path d="M 18 27 L 10 26" stroke="#bbbbbb" stroke-width="0.3" fill="none"/> | |
| <path d="M 18 29 L 10 30" stroke="#bbbbbb" stroke-width="0.3" fill="none"/> | |
| <path d="M 18 31 L 10 34" stroke="#bbbbbb" stroke-width="0.3" fill="none"/> | |
| <path d="M 32 27 L 40 26" stroke="#bbbbbb" stroke-width="0.3" fill="none"/> | |
| <path d="M 32 29 L 40 30" stroke="#bbbbbb" stroke-width="0.3" fill="none"/> | |
| <path d="M 32 31 L 40 34" stroke="#bbbbbb" stroke-width="0.3" fill="none"/> | |
| </svg> | |
| </div> | |
| </div> | |
| """) | |
| return | |
| def _(mo): | |
| import marimo as mo | |
| # Page 4: Conclusion | |
| mo.Html(""" | |
| <!-- Page 4: Conclusion --> | |
| <div id="page4" class="page"> | |
| <h2>Collaboration Wins!</h2> | |
| <p>Working together transforms challenges into opportunities. Legal can be a great partner!</p> | |
| <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | |
| <title>Handshake</title> | |
| <path d="M 10 50 Q 20 40, 35 45 L 45 50 Q 55 55, 50 65 L 30 75 Q 15 70, 10 60 Z" fill="#f5e0c4" stroke="#6c757d" stroke-width="1"/> | |
| <path d="M 35 45 Q 45 35, 55 45" fill="#f5e0c4" stroke="#6c757d" stroke-width="1"/> | |
| <path d="M 90 50 Q 80 40, 65 45 L 55 50 Q 45 55, 50 65 L 70 75 Q 85 70, 90 60 Z" fill="#d1bea8" stroke="#5a4d41" stroke-width="1"/> | |
| <path d="M 65 45 Q 55 35, 45 45" fill="#d1bea8" stroke="#5a4d41" stroke-width="1"/> | |
| <rect x="5" y="60" width="10" height="15" fill="#e0e0e0" rx="2"/> | |
| <rect x="85" y="60" width="10" height="15" fill="#f0f0f0" rx="2"/> | |
| </svg> | |
| </div> | |
| <!-- Navigation Buttons --> | |
| <div class="navigation"> | |
| <button id="prevBtn" disabled>Previous</button> | |
| <button id="nextBtn">Next</button> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const pages = document.querySelectorAll('.page'); | |
| const prevBtn = document.getElementById('prevBtn'); | |
| const nextBtn = document.getElementById('nextBtn'); | |
| let currentPage = 0; | |
| function showPage(pageIndex) { | |
| pages.forEach((page, index) => { | |
| if (index === pageIndex) { | |
| page.classList.add('active'); | |
| } else { | |
| page.classList.remove('active'); | |
| } | |
| }); | |
| prevBtn.disabled = pageIndex === 0; | |
| nextBtn.disabled = pageIndex === pages.length - 1; | |
| } | |
| prevBtn.addEventListener('click', function() { | |
| if (currentPage > 0) { | |
| currentPage--; | |
| showPage(currentPage); | |
| } | |
| }); | |
| nextBtn.addEventListener('click', function() { | |
| if (currentPage < pages.length - 1) { | |
| currentPage++; | |
| showPage(currentPage); | |
| } | |
| }); | |
| // Initialize | |
| showPage(currentPage); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| """) | |
| return | |
| def _(): | |
| import marimo as mo | |
| return mo | |
| if __name__ == "__main__": | |
| app.run() |