<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>SQWAL</title>
        <base href="/" id="baseHref"/>
        <!--        <script>-->
        <!--            newHref = window.location.pathname.replace(/(.*\/)angular(\/.*|$)/, '$1');-->
        <!--            document.getElementById('baseHref').href = newHref;-->
        <!--        </script>-->
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico"/>
        <link id="theme-css" rel="stylesheet" type="text/css" href="assets/theme/sqwal/theme-light.css?v=1"/>
        <script>
            (function () {
                var storedTheme = localStorage.getItem('sqwal-theme');
                var isDarkMode = storedTheme === 'dark';
                var themeVersion = '?v=1';
                var themeHref = isDarkMode ? 'assets/theme/sqwal/theme-dark.css' : 'assets/theme/sqwal/theme-light.css';
                var themeLink = document.getElementById('theme-css');
                document.documentElement.setAttribute('data-dark-theme', String(!isDarkMode));
                if (themeLink) {
                    themeLink.setAttribute('href', themeHref + themeVersion);
                }
                document.addEventListener('DOMContentLoaded', function () {
                    document.body.setAttribute('data-dark-theme', String(!isDarkMode));
                });
            })();
        </script>
    <link rel="stylesheet" href="styles.css"></head>
    <body style="height: 100%">
        <div id="sqwal-loader">
            <div id="sqwal-loader-container">
                <img style="width: 13%" src="assets/images/SCALIAN_SQUARE.svg"/>
                <img style="width: 70%; margin: 0 -10px" src="assets/images/SQWAL_WHITE.svg"/>
            </div>
            <div id="sqwal-loader-description">Chargement en cours...</div>
        </div>
        <app-root></app-root>
    <script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
    <style>
        #sqwal-loader {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background: url('assets/images/background_login.png') no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            opacity: 1;
            transition: opacity 0.2s ease-out;
            z-index: 10;
        }

        #sqwal-loader-container {
            display: flex;
            align-items: center;
            justify-content: center;
            animation: 3s ease 0s infinite beat;
        }

        #sqwal-loader-description {
            color: white;
        }

        .fade-out {
            opacity: 0 !important;
        }

        @keyframes beat {
            0%,
            50%,
            100% {
                transform: scale(1, 1);
            }
            30%,
            80% {
                transform: scale(0.95, 0.95);
            }
        }
    </style>
</html>
