|
|
import marimo |
|
|
import marimo as mo |
|
|
|
|
|
__generated_with = "0.13.1-dev16" |
|
|
app = marimo.App() |
|
|
|
|
|
@app.cell |
|
|
def _(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 |
|
|
|
|
|
@app.cell |
|
|
def _(mo): |
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
@app.cell |
|
|
def _(mo): |
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
@app.cell |
|
|
def _(mo): |
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
@app.cell |
|
|
def _(): |
|
|
import marimo as mo |
|
|
return mo |
|
|
|
|
|
if __name__ == "__main__": |
|
|
app.run() |
