dioxus/packages/cli/assets/web/dev.index.html

<!DOCTYPE html>
<html>
    <head>
        <title>{app_title}</title>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <style>
            /* Inter Font */
            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap') layer;

            #dx-toast-template {
                display: none;
                visibility: hidden;
            }

            .dx-toast {
                position: absolute;
                top: 10px;
                right: 0;
                padding-right: 10px;
                user-select: none;
                /* transition: transform 0.2s ease; */
                z-index: 2147483647;
            }

            .dx-toast .dx-toast-inner {
                /* transition: right 0.2s ease-out; */
                position: fixed;

                background-color: #181B20;
                color: #ffffff;
                font-family: "Inter", sans-serif;

                display: grid;
                grid-template-columns: auto auto;
                max-width: 400px;
                min-height: 56px;
                border-radius: 5px;
            }

            .dx-toast .dx-toast-inner {
                cursor: pointer;
                margin-right: 10px;
            }

            .dx-toast .dx-toast-level-bar-container {
                height: 100%;
                width: 6px;
            }

            .dx-toast .dx-toast-level-bar-container .dx-toast-level-bar {
                width: 100%;
                height: 100%;
                border-radius: 5px 0px 0px 5px;
            }

            .dx-toast .dx-toast-content {
                padding: 8px;
            }

            .dx-toast .dx-toast-header {
                display: flex;
                flex-direction: row;
                justify-content: start;
                align-items: end;
                margin-bottom: 10px;
            }

            .dx-toast .dx-toast-header>svg {
                height: 18px;
                margin-right: 5px;
            }

            .dx-toast .dx-toast-header .dx-toast-header-text {
                font-size: 14px;
                font-weight: 700;
                padding: 0;
                margin: 0;
            }

            .dx-toast .dx-toast-msg {
                font-size: 11px;
                font-weight: 400;
                padding: 0;
                margin: 0;
            }

            .dx-toast-level-bar.info {
                background-color: #428EFF;
            }

            .dx-toast-level-bar.success {
                background-color: #42FF65;
            }

            .dx-toast-level-bar.error {
                background-color: #FF4242;
            }
        </style>
        <script>
            const STORAGE_KEY = "SCHEDULED-DX-TOAST";
            let currentTimeout = null;
            let currentToastId = 0;

            // Show a toast, removing the previous one.
            function showDXToast(headerText, message, progressLevel, durationMs) {
                document.getElementById("__dx-toast-decor").className = `dx-toast-level-bar ${progressLevel}`;
                document.getElementById("__dx-toast-text").innerText = headerText;
                document.getElementById("__dx-toast-msg").innerText = message;
                document.getElementById("__dx-toast-inner").style.right = "0";
                document.getElementById("__dx-toast").addEventListener("click", closeDXToast);


                // Wait a bit of time so animation plays correctly.
                setTimeout(
                    () => {
                        let ourToastId = currentToastId;
                        currentTimeout = setTimeout(() => {
                            if (ourToastId == currentToastId) {
                                closeDXToast();
                            }
                        }, durationMs);
                    },
                    100
                );

                currentToastId += 1;
            }

            // Schedule a toast to be displayed after reload.
            function scheduleDXToast(headerText, message, level, durationMs) {
                let data = {
                    headerText,
                    message,
                    level,
                    durationMs,
                };

                let jsonData = JSON.stringify(data);
                sessionStorage.setItem(STORAGE_KEY, jsonData);
            }

            // Close the current toast.
            function closeDXToast() {
                document.getElementById("__dx-toast-inner").style.right = "-1000px";
                clearTimeout(currentTimeout);
            }

            // Handle any scheduled toasts after reload.
            let potentialData = sessionStorage.getItem(STORAGE_KEY);
            if (potentialData) {
                sessionStorage.removeItem(STORAGE_KEY);
                let data = JSON.parse(potentialData);
                showDXToast(data.headerText, data.message, data.level, data.durationMs);
            }

            window.scheduleDXToast = scheduleDXToast;
            window.showDXToast = showDXToast;
            window.closeDXToast = closeDXToast;
        </script>
    </head>
    <body>
        <div id="__dx-toast" class="dx-toast">
            <div id="__dx-toast-inner" class="dx-toast-inner" style="right:-1000px;">
                <div class="dx-toast-level-bar-container">
                    <div id="__dx-toast-decor" class="dx-toast-level-bar __info"></div>
                </div>
                <div class="dx-toast-content">
                    <div class="dx-toast-header">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" preserveAspectRatio="none">
                            <path d="M22.158 1.783c0 3.077-.851 5.482-2.215 7.377s-3.32 3.557-5.447 5.33-4.425 3.657-6.252 6.195-3.102 5.515-3.102 9.532h4.699c0-3.077.853-5.377 2.217-7.272s3.32-3.557 5.447-5.33 4.425-3.657 6.252-6.195 3.102-5.62 3.102-9.637z" fill="#e96020"/>
                            <path d="M9.531 25.927c-.635 0-1.021.515-1.02 1.15s.385 1.151 1.02 1.15H22.47a1.151 1.151 0 1 0 0-2.301zm1.361-4.076c-.608 0-.954.558-.953 1.166s.346 1.035.953 1.035h10.217a1.101 1.101 0 1 0 0-2.201zm0-13.594a1.101 1.101 0 1 0 0 2.201h10.217c.607 0 .953-.598.953-1.205s-.345-.996-.953-.996zM9.531 4.021A1.15 1.15 0 0 0 8.38 5.17a1.15 1.15 0 0 0 1.15 1.15h12.94c.635 0 1.021-.498 1.02-1.133s-.386-1.166-1.02-1.166z" fill="#2d323b"/>
                            <path d="M5.142 1.783c0 4.016 1.275 7.099 3.102 9.637s4.125 4.422 6.252 6.195 4.083 3.656 5.447 5.551 2.215 3.974 2.215 7.051h4.701c0-4.016-1.275-7.038-3.102-9.576s-4.125-4.422-6.252-6.195-4.083-3.435-5.447-5.33S9.841 4.86 9.841 1.783z" fill="#00a8d6"/>
                        </svg>
                        <h3 id="__dx-toast-text" class="dx-toast-header-text">Your app is being rebuilt.</h3>
                    </div>
                    <p id="__dx-toast-msg" class="dx-toast-msg">A non-hot-reloadable change occurred and we must rebuild.</p>
                </div>
            </div>
        </div>
        <div id="main"></div>
    </body>
</html>