<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SOS-Portal Stage 1</title>
        <style>
            .splash-loader {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100vh;
                background-color: #ffffff;
            }

            .splash-spinner {
                position: relative;
                width: 100px;
                height: 100px;
                display: inline-block;
            }

            .splash-spinner::before {
                content: '';
                display: block;
                padding-top: 100%;
            }

            .splash-spinner-svg {
                animation: splash-rotate 2s linear infinite;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 100%;
                height: 100%;
                transform-origin: center center;
            }

            .splash-spinner-circle {
                stroke-dasharray: 89, 200;
                stroke-dashoffset: -35px;
                animation:
                    splash-dash 1.5s ease-in-out infinite,
                    splash-color 6s ease-in-out infinite;
                stroke-linecap: round;
            }

            @keyframes splash-rotate {
                100% {
                    transform: rotate(360deg);
                }
            }

            @keyframes splash-dash {
                0% {
                    stroke-dasharray: 1, 200;
                    stroke-dashoffset: 0;
                }
                50% {
                    stroke-dasharray: 89, 200;
                    stroke-dashoffset: -35px;
                }
                100% {
                    stroke-dasharray: 89, 200;
                    stroke-dashoffset: -124px;
                }
            }

            @keyframes splash-color {
                100%,
                0% {
                    stroke: #d62d20;
                }
                40% {
                    stroke: #0057e7;
                }
                66% {
                    stroke: #008744;
                }
                80%,
                90% {
                    stroke: #ffa700;
                }
            }
        </style>
      <script type="module" crossorigin src="/assets/index-D_pQwrxY.js"></script>
      <link rel="stylesheet" crossorigin href="/assets/index-DiijWzVV.css">
    <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
    <body>
        <div id="root">
            <div class="splash-loader">
                <div class="splash-spinner">
                    <svg class="splash-spinner-svg" viewBox="25 25 50 50" style="animation-duration: 2s">
                        <circle class="splash-spinner-circle" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10"></circle>
                    </svg>
                </div>
            </div>
        </div>
    </body>
</html>
