Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
@@ -5,6 +5,173 @@ import marimo
|
|
5 |
__generated_with = "0.13.1-dev16"
|
6 |
app = marimo.App(layout_file="layouts/notebook.slides.json")
|
7 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
8 |
|
9 |
@app.cell
|
10 |
def _(mo):
|
|
|
5 |
__generated_with = "0.13.1-dev16"
|
6 |
app = marimo.App(layout_file="layouts/notebook.slides.json")
|
7 |
|
8 |
+
@app.cell
|
9 |
+
def _(mo):
|
10 |
+
import marimo as mo
|
11 |
+
mo.Html("""
|
12 |
+
<!DOCTYPE html>
|
13 |
+
<html lang="en">
|
14 |
+
<head>
|
15 |
+
<meta charset="UTF-8">
|
16 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
17 |
+
<title>Our t:able Legal Journey</title>
|
18 |
+
<style>
|
19 |
+
body {
|
20 |
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
21 |
+
background-color: #f8f9fa;
|
22 |
+
color: #333333;
|
23 |
+
display: flex;
|
24 |
+
justify-content: center;
|
25 |
+
align-items: center;
|
26 |
+
min-height: 100vh;
|
27 |
+
margin: 0;
|
28 |
+
padding: 20px;
|
29 |
+
box-sizing: border-box;
|
30 |
+
}
|
31 |
+
.container {
|
32 |
+
background-color: #ffffff;
|
33 |
+
padding: 30px 40px;
|
34 |
+
border-radius: 12px;
|
35 |
+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
|
36 |
+
text-align: center;
|
37 |
+
max-width: 600px;
|
38 |
+
width: 100%;
|
39 |
+
overflow: hidden;
|
40 |
+
}
|
41 |
+
.page {
|
42 |
+
display: none;
|
43 |
+
animation: fadeIn 0.4s ease-in-out;
|
44 |
+
}
|
45 |
+
.page.active {
|
46 |
+
display: block;
|
47 |
+
}
|
48 |
+
@keyframes fadeIn {
|
49 |
+
from { opacity: 0; transform: translateY(8px); }
|
50 |
+
to { opacity: 1; transform: translateY(0); }
|
51 |
+
}
|
52 |
+
h2 {
|
53 |
+
color: #00A87E;
|
54 |
+
margin-bottom: 20px;
|
55 |
+
font-size: 1.8em;
|
56 |
+
font-weight: 600;
|
57 |
+
}
|
58 |
+
p {
|
59 |
+
font-size: 1.1em;
|
60 |
+
line-height: 1.6;
|
61 |
+
margin-bottom: 25px;
|
62 |
+
color: #555555;
|
63 |
+
}
|
64 |
+
svg {
|
65 |
+
max-width: 140px;
|
66 |
+
height: auto;
|
67 |
+
margin: 20px auto;
|
68 |
+
display: block;
|
69 |
+
}
|
70 |
+
.cat-gallery {
|
71 |
+
display: flex;
|
72 |
+
justify-content: space-around;
|
73 |
+
flex-wrap: wrap;
|
74 |
+
gap: 15px;
|
75 |
+
margin-bottom: 20px;
|
76 |
+
}
|
77 |
+
.cat-gallery svg {
|
78 |
+
max-width: 90px;
|
79 |
+
}
|
80 |
+
.navigation {
|
81 |
+
margin-top: 30px;
|
82 |
+
display: flex;
|
83 |
+
justify-content: space-between;
|
84 |
+
}
|
85 |
+
button {
|
86 |
+
background-color: #00A87E;
|
87 |
+
color: #ffffff;
|
88 |
+
border: none;
|
89 |
+
padding: 10px 22px;
|
90 |
+
border-radius: 8px;
|
91 |
+
font-family: inherit;
|
92 |
+
font-size: 1em;
|
93 |
+
font-weight: 500;
|
94 |
+
cursor: pointer;
|
95 |
+
transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
|
96 |
+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
97 |
+
}
|
98 |
+
button:hover {
|
99 |
+
background-color: #008a68;
|
100 |
+
box-shadow: 0 4px 8px rgba(0,0,0,0.07);
|
101 |
+
}
|
102 |
+
button:active {
|
103 |
+
transform: translateY(1px);
|
104 |
+
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
105 |
+
}
|
106 |
+
button:disabled {
|
107 |
+
background-color: #b2e0d4;
|
108 |
+
color: #6c757d;
|
109 |
+
cursor: not-allowed;
|
110 |
+
opacity: 0.8;
|
111 |
+
box-shadow: none;
|
112 |
+
}
|
113 |
+
</style>
|
114 |
+
</head>
|
115 |
+
<body>
|
116 |
+
<div class="container">
|
117 |
+
""")
|
118 |
+
return
|
119 |
+
|
120 |
+
@app.cell
|
121 |
+
def _(mo):
|
122 |
+
import marimo as mo
|
123 |
+
# Page 3 Content
|
124 |
+
mo.Html("""
|
125 |
+
<!-- Page 3 -->
|
126 |
+
<div id="page3" class="page">
|
127 |
+
<h2>Bonus: Team Mascots!</h2>
|
128 |
+
<p>...and we discovered our legal partners appreciate cute companions too!</p>
|
129 |
+
<div class="cat-gallery">
|
130 |
+
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
|
131 |
+
<title>Teal Accented Sitting Cat</title>
|
132 |
+
<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"/>
|
133 |
+
<circle cx="25" cy="18" r="10" fill="#e0e0e0" stroke="#aaaaaa" stroke-width="0.5"/>
|
134 |
+
<path d="M 18 12 L 15 8 L 22 10 Z" fill="#e0e0e0" stroke="#aaaaaa" stroke-width="0.5"/>
|
135 |
+
<path d="M 32 12 L 35 8 L 28 10 Z" fill="#e0e0e0" stroke="#aaaaaa" stroke-width="0.5"/>
|
136 |
+
<circle cx="22" cy="18" r="1.2" fill="#00A87E"/>
|
137 |
+
<circle cx="28" cy="18" r="1.2" fill="#00A87E"/>
|
138 |
+
<path d="M 24 21 L 26 21 L 25 22 Z" fill="#6c757d"/>
|
139 |
+
<path d="M 40 40 Q 50 35, 45 25" stroke="#aaaaaa" stroke-width="2" fill="none" stroke-linecap="round"/>
|
140 |
+
</svg>
|
141 |
+
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
|
142 |
+
<title>Grey Lounging Cat</title>
|
143 |
+
<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"/>
|
144 |
+
<circle cx="15" cy="30" r="8" fill="#d3d3d3" stroke="#a9a9a9" stroke-width="0.5"/>
|
145 |
+
<path d="M 10 25 L 7 22 L 13 24 Z" fill="#d3d3d3" stroke="#a9a9a9" stroke-width="0.5"/>
|
146 |
+
<path d="M 20 25 L 23 22 L 17 24 Z" fill="#d3d3d3" stroke="#a9a9a9" stroke-width="0.5"/>
|
147 |
+
<path d="M 12 30 Q 14 28, 16 30" stroke="#606060" stroke-width="0.5" fill="none"/>
|
148 |
+
<path d="M 18 30 Q 20 28, 22 30" stroke="#606060" stroke-width="0.5" fill="none"/>
|
149 |
+
<path d="M 45 40 Q 50 38, 48 30" stroke="#a9a9a9" stroke-width="2" fill="none" stroke-linecap="round"/>
|
150 |
+
</svg>
|
151 |
+
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
|
152 |
+
<title>Black and White Cat Face</title>
|
153 |
+
<circle cx="25" cy="25" r="15" fill="#ffffff" stroke="#cccccc" stroke-width="0.5"/>
|
154 |
+
<path d="M 20 10 Q 25 20, 30 10 C 28 5, 22 5, 20 10 Z" fill="#444444"/>
|
155 |
+
<path d="M 32 20 a 5 5 0 1 1 -10 0 a 5 5 0 1 1 10 0" fill="#444444"/>
|
156 |
+
<path d="M 15 15 L 10 10 L 20 13 Z" fill="#444444"/>
|
157 |
+
<path d="M 35 15 L 40 10 L 30 13 Z" fill="#ffffff" stroke="#cccccc" stroke-width="0.5"/>
|
158 |
+
<circle cx="20" cy="25" r="1.5" fill="#333333"/>
|
159 |
+
<circle cx="30" cy="25" r="1.5" fill="#333333"/>
|
160 |
+
<path d="M 24 29 L 26 29 L 25 30 Z" fill="#aaaaaa"/>
|
161 |
+
<path d="M 25 30 Q 23 32, 21 31" stroke="#666666" stroke-width="0.5" fill="none" stroke-linecap="round"/>
|
162 |
+
<path d="M 25 30 Q 27 32, 29 31" stroke="#666666" stroke-width="0.5" fill="none" stroke-linecap="round"/>
|
163 |
+
<path d="M 18 27 L 10 26" stroke="#bbbbbb" stroke-width="0.3" fill="none"/>
|
164 |
+
<path d="M 18 29 L 10 30" stroke="#bbbbbb" stroke-width="0.3" fill="none"/>
|
165 |
+
<path d="M 18 31 L 10 34" stroke="#bbbbbb" stroke-width="0.3" fill="none"/>
|
166 |
+
<path d="M 32 27 L 40 26" stroke="#bbbbbb" stroke-width="0.3" fill="none"/>
|
167 |
+
<path d="M 32 29 L 40 30" stroke="#bbbbbb" stroke-width="0.3" fill="none"/>
|
168 |
+
<path d="M 32 31 L 40 34" stroke="#bbbbbb" stroke-width="0.3" fill="none"/>
|
169 |
+
</svg>
|
170 |
+
</div>
|
171 |
+
</div>
|
172 |
+
""")
|
173 |
+
return
|
174 |
+
|
175 |
|
176 |
@app.cell
|
177 |
def _(mo):
|