arthrod commited on
Commit
6c66030
·
verified ·
1 Parent(s): 16110dc

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +167 -0
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):