Spaces:

arthrod
/

your-partner-not-your-judge

Running

App Files Files Community

arthrod commited on Apr 22

Commit

16110dc

verified ·

1 Parent(s): 10b0989

Update app.py

Browse files

Files changed (1) hide show

app.py +176 -444

app.py CHANGED Viewed

@@ -1,469 +1,201 @@
-import marimo
-__generated_with = "0.9.2"
-app = marimo.App()
-@app.cell
-def __():
-    import marimo as mo
-    mo.md("# Welcome to marimo! 🌊🍃")
-    return (mo,)
-@app.cell
-def __(mo):
-    slider = mo.ui.slider(1, 22)
-    return (slider,)
-@app.cell
-def __(mo, slider):
-    mo.md(
-        f"""
-        marimo is a **reactive** Python notebook.
-        This means that unlike traditional notebooks, marimo notebooks **run
-        automatically** when you modify them or
-        interact with UI elements, like this slider: {slider}.
-        {"##" + "🍃" * slider.value}
-        """
-    )
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: disabling automatic execution": mo.md(
-                rf"""
-            marimo lets you disable automatic execution: just go into the
-            notebook settings and set
-            "Runtime > On Cell Change" to "lazy".
-            When the runtime is lazy, after running a cell, marimo marks its
-            descendants as stale instead of automatically running them. The
-            lazy runtime puts you in control over when cells are run, while
-            still giving guarantees about the notebook state.
-            """
-            )
-        }
-    )
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        Tip: This is a tutorial notebook. You can create your own notebooks
-        by entering `marimo edit` at the command line.
-        """
-    ).callout()
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 1. Reactive execution
-        A marimo notebook is made up of small blocks of Python code called
-        cells.
-        marimo reads your cells and models the dependencies among them: whenever
-        a cell that defines a global variable  is run, marimo
-        **automatically runs** all cells that reference that variable.
-        Reactivity keeps your program state and outputs in sync with your code,
-        making for a dynamic programming environment that prevents bugs before they
-        happen.
-        """
-    )
-    return
-@app.cell(hide_code=True)
-def __(changed, mo):
-    (
-        mo.md(
-            f"""
-            **✨ Nice!** The value of `changed` is now {changed}.
-            When you updated the value of the variable `changed`, marimo
-            **reacted** by running this cell automatically, because this cell
-            references the global variable `changed`.
-            Reactivity ensures that your notebook state is always
-            consistent, which is crucial for doing good science; it's also what
-            enables marimo notebooks to double as tools and  apps.
-            """
-        )
-        if changed
-        else mo.md(
-            """
-            **🌊 See it in action.** In the next cell, change the value of the
-            variable  `changed` to `True`, then click the run button.
-            """
-        )
-    )
-    return
 @app.cell
-def __():
-    changed = False
-    return (changed,)
-@app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: execution order": (
-                """
-                The order of cells on the page has no bearing on
-                the order in which cells are executed: marimo knows that a cell
-                reading a variable must run after the cell that  defines it. This
-                frees you to organize your code in the way that makes the most
-                sense for you.
-                """
-            )
-        }
-    )
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        **Global names must be unique.** To enable reactivity, marimo imposes a
-        constraint on how names appear in cells: no two cells may define the same
-        variable.
-        """
-    )
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: encapsulation": (
-                """
-                By encapsulating logic in functions, classes, or Python modules,
-                you can minimize the number of global variables in your notebook.
-                """
-            )
-        }
-    )
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: private variables": (
-                """
-                Variables prefixed with an underscore are "private" to a cell, so
-                they can be defined by multiple cells.
-                """
-            )
-        }
-    )
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 2. UI elements
-        Cells can output interactive UI elements. Interacting with a UI
-        element **automatically triggers notebook execution**: when
-        you interact with a UI element, its value is sent back to Python, and
-        every cell that references that element is re-run.
-        marimo provides a library of UI elements to choose from under
-        `marimo.ui`.
-        """
-    )
     return
 @app.cell
-def __(mo):
-    mo.md("""**🌊 Some UI elements.** Try interacting with the below elements.""")
     return
 @app.cell
-def __(mo):
-    icon = mo.ui.dropdown(["🍃", "🌊", "✨"], value="🍃")
-    return (icon,)
-@app.cell
-def __(icon, mo):
-    repetitions = mo.ui.slider(1, 16, label=f"number of {icon.value}: ")
-    return (repetitions,)
-@app.cell
-def __(icon, repetitions):
-    icon, repetitions
     return
 @app.cell
-def __(icon, mo, repetitions):
-    mo.md("# " + icon.value * repetitions.value)
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 3. marimo is just Python
-        marimo cells parse Python (and only Python), and marimo notebooks are
-        stored as pure Python files — outputs are _not_ included. There's no
-        magical syntax.
-        The Python files generated by marimo are:
-        - easily versioned with git, yielding minimal diffs
-        - legible for both humans and machines
-        - formattable using your tool of choice,
-        - usable as Python  scripts, with UI  elements taking their default
-        values, and
-        - importable by other modules (more on that in the future).
-        """
-    )
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 4. Running notebooks as apps
-        marimo notebooks can double as apps. Click the app window icon in the
-        bottom-right to see this notebook in "app view."
-        Serve a notebook as an app with `marimo run` at the command-line.
-        Of course, you can use marimo just to level-up your
-        notebooking, without ever making apps.
-        """
-    )
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 5. The `marimo` command-line tool
-        **Creating and editing notebooks.** Use
-        ```
-        marimo edit
-        ```
-        in a terminal to start the marimo notebook server. From here
-        you can create a new notebook or edit existing ones.
-        **Running as apps.** Use
-        ```
-        marimo run notebook.py
-        ```
-        to start a webserver that serves your notebook as an app in read-only mode,
-        with code cells hidden.
-        **Convert a Jupyter notebook.** Convert a Jupyter notebook to a marimo
-        notebook using `marimo convert`:
-        ```
-        marimo convert your_notebook.ipynb > your_app.py
-        ```
-        **Tutorials.** marimo comes packaged with tutorials:
-        - `dataflow`: more on marimo's automatic execution
-        - `ui`: how to use UI elements
-        - `markdown`: how to write markdown, with interpolated values and
-           LaTeX
-        - `plots`: how plotting works in marimo
-        - `sql`: how to use SQL
-        - `layout`: layout elements in marimo
-        - `fileformat`: how marimo's file format works
-        - `markdown-format`: for using `.md` files in marimo
-        - `for-jupyter-users`: if you are coming from Jupyter
-        Start a tutorial with `marimo tutorial`; for example,
-        ```
-        marimo tutorial dataflow
-        ```
-        In addition to tutorials, we have examples in our
-        [our GitHub repo](https://www.github.com/marimo-team/marimo/tree/main/examples).
-        """
-    )
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 6. The marimo editor
-        Here are some tips to help you get started with the marimo editor.
-        """
-    )
     return
 @app.cell
-def __(mo, tips):
-    mo.accordion(tips)
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md("""## Finally, a fun fact""")
-    return
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        The name "marimo" is a reference to a type of algae that, under
-        the right conditions, clumps together to form a small sphere
-        called a "marimo moss ball". Made of just strands of algae, these
-        beloved assemblages are greater than the sum of their parts.
-        """
-    )
-    return
-@app.cell(hide_code=True)
-def __():
-    tips = {
-        "Saving": (
-            """
-            **Saving**
-            - _Name_ your app using the box at the top of the screen, or
-              with `Ctrl/Cmd+s`. You can also create a named app at the
-              command line, e.g., `marimo edit app_name.py`.
-            - _Save_ by clicking the save icon on the bottom right, or by
-              inputting `Ctrl/Cmd+s`. By default marimo is configured
-              to autosave.
-            """
-        ),
-        "Running": (
-            """
-            1. _Run a cell_ by clicking the play ( ▷ ) button on the top
-            right of a cell, or by inputting `Ctrl/Cmd+Enter`.
-            2. _Run a stale cell_  by clicking the yellow run button on the
-            right of the cell, or by inputting `Ctrl/Cmd+Enter`. A cell is
-            stale when its code has been modified but not run.
-            3. _Run all stale cells_ by clicking the play ( ▷ ) button on
-            the bottom right of the screen, or input `Ctrl/Cmd+Shift+r`.
-            """
-        ),
-        "Console Output": (
-            """
-            Console output (e.g., `print()` statements) is shown below a
-            cell.
-            """
-        ),
-        "Creating, Moving, and Deleting Cells": (
-            """
-            1. _Create_ a new cell above or below a given one by clicking
-                the plus button to the left of the cell, which appears on
-                mouse hover.
-            2. _Move_ a cell up or down by dragging on the handle to the
-                right of the cell, which appears on mouse hover.
-            3. _Delete_ a cell by clicking the trash bin icon. Bring it
-                back by clicking the undo button on the bottom right of the
-                screen, or with `Ctrl/Cmd+Shift+z`.
-            """
-        ),
-        "Disabling Automatic Execution": (
-            """
-            Via the notebook settings (gear icon) or footer panel, you
-            can disable automatic execution. This is helpful when
-            working with expensive notebooks or notebooks that have
-            side-effects like database transactions.
-            """
-        ),
-        "Disabling Cells": (
-            """
-            You can disable a cell via the cell context menu.
-            marimo will never run a disabled cell or any cells that depend on it.
-            This can help prevent accidental execution of expensive computations
-            when editing a notebook.
-            """
-        ),
-        "Code Folding": (
-            """
-            You can collapse or fold the code in a cell by clicking the arrow
-            icons in the line number column to the left, or by using keyboard
-            shortcuts.
-            Use the command palette (`Ctrl/Cmd+k`) or a keyboard shortcut to
-            quickly fold or unfold all cells.
-            """
-        ),
-        "Code Formatting": (
-            """
-            If you have [ruff](https://github.com/astral-sh/ruff) installed,
-            you can format a cell with the keyboard shortcut `Ctrl/Cmd+b`.
-            """
-        ),
-        "Command Palette": (
-            """
-            Use `Ctrl/Cmd+k` to open the command palette.
-            """
-        ),
-        "Keyboard Shortcuts": (
-            """
-            Open the notebook menu (top-right) or input `Ctrl/Cmd+Shift+h` to
-            view a list of all keyboard shortcuts.
-            """
-        ),
-        "Configuration": (
-            """
-           Configure the editor by clicking the gears icon near the top-right
-           of the screen.
-           """
-        ),
-    }
-    return (tips,)
 if __name__ == "__main__":

+import marimo
+__generated_with = "0.13.1-dev16"
+app = marimo.App(layout_file="layouts/notebook.slides.json")
 @app.cell
+def _(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
 @app.cell
+def _(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
 @app.cell
+def _(mo):
+    # Page 3 and 4 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>
+            <!-- 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>
+    </body>
+    </html>
+    """)
     return
 @app.cell
+def _(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>
+    </body>
+    </html>
+    """)
     return
 @app.cell
+def _():
+    import marimo as mo
+    return (mo,)
 if __name__ == "__main__":