SingleDivMarimo

single_div.py

import marimo

__generated_with = "0.10.7"
app = marimo.App(width="medium")


@app.cell
def _(div, mo, result, run_button, style1, style2, style3, style_editors):
    if run_button.value:
        result[0] = div.render(style1.value, style2.value, style3.value)

    tabs = mo.ui.tabs({"Result": result[0]})
    ui = mo.vstack(
        [
            mo.md("# Single-Div Art in Marimo"),
            mo.hstack(
                [
                    tabs,
                    style_editors,
                ],
                widths=[1, 1],
                # justify="center",
            ),
        ],
        gap=2,
    )

    ui
    return tabs, ui


@app.cell
def _(div):
    result = [div.render(div.css1, div.css2, div.css3)]
    return (result,)


@app.cell
def _(mo):
    class SingleDiv:
        class_name = ".SingleDiv"
        css1 = """
        content: '';
        position: relative;
        left: 120px;
        margin-top: 20px;    
        width: 15px;
        height: 280px;
        background: hsl(40, 100%, 30%);
        """
        css2 = """
        content: '';
        position: absolute;
        left: -112px;
        top: -20px;
        width: 0;
        height: 0;
        border-left: 120px solid transparent;
        border-right: 120px solid transparent;
        border-bottom: 240px solid rgba(0, 75, 0, 0.9);
        """
        css3 = """
        content: '';
        position: absolute;
        top: 0px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        box-shadow: 
            -97px 136px 6px -8px #fff,-97px 136px 6px -8px hsl(60, 90%, 90%),-93px 140px hsl(60, 90%, 30%),
            -67px 146px 6px -8px #fff,-67px 146px 6px -8px hsl(75, 90%, 90%),-63px 150px hsl(75, 90%, 30%),
            -37px 152px 6px -8px #fff,-37px 152px 6px -8px hsl(90, 90%, 90%),-33px 156px hsl(90, 90%, 30%),
            -7px  156px 6px -8px #fff,  -7px 156px 6px -8px hsl(105,90%, 90%), -3px 160px hsl(105,90%, 30%),
            23px  152px 6px -8px #fff,  23px 152px 6px -8px hsl(120,90%, 90%), 27px 156px hsl(120,90%, 30%),
            53px  146px 6px -8px #fff,  53px 146px 6px -8px hsl(135,90%, 90%), 57px 150px hsl(135,90%, 30%),
            83px  136px 6px -8px #fff,  83px 136px 6px -8px hsl(150,90%, 90%), 87px 140px hsl(150,90%, 30%),
            0 0 0 -12px #fff;
        """

        def __init__(self, **kwargs):
            self.class_name = kwargs.get("class_name", self.class_name)

        def format_css(self, selector, value):
            if value.endswith("}"):
                return value
            else:
                return f"{self.class_name + selector} {{{value.rstrip()}\n}}"

        def editor(self, selector, value, label=""):
            return mo.ui.code_editor(
                language="css",
                value=self.format_css(selector, value),
                label=label,
            )

        def render(self, css1, css2, css3):
            _style = f"""
            <style>
            {self.format_css("", css1)}
            {self.format_css("::before", css2)}
            {self.format_css("::after", css3)}
            </style>
            """
            _div = f'<div class="{self.class_name[1:]}"></div>'
            return mo.Html(_style + _div).style({"justify-content": "center"})


    div = SingleDiv()
    style1 = div.editor(
        # label="#### CSS 1",
        selector="",
        value=div.css1,
    )
    style2 = div.editor(
        # label="#### CSS 2",
        selector="::before",
        value=div.css2,
    )
    style3 = div.editor(
        # label="#### CSS 3",
        selector="::after",
        value=div.css3,
    )
    run_button = mo.ui.run_button(
        label="Click to see results", keyboard_shortcut="Alt+R"
    )
    style_editors = mo.vstack(
        [
            run_button,
            style1,
            style2,
            style3,
        ]
    ).style(max_height="75vh", max_width="45vw")
    return SingleDiv, div, run_button, style1, style2, style3, style_editors


@app.cell
def _():
    import marimo as mo
    return (mo,)


if __name__ == "__main__":
    app.run()

edit on marimo.app : https://marimo.app/?slug=u7vyul