index.html

<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~
  ~ This file is part of the LGS1920/studio project.
  ~
  ~ File: index.html
  ~
  ~ Author : LGS1920 Team
  ~ email: studio@lgs1920.fr
  ~
  ~ Created on: 2026-04-27
  ~ Last modified: 2026-04-27
  ~
  ~
  ~ Copyright © 2026 LGS1920
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<!doctype html>
<html class="wa-theme-lgs1920 wa-brand-yellow wa-dark" data-fa-kit-code="eb5c406148" lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
          name="viewport">

    <!-- Theme color for Android and browsers -->
    <meta content="#000000" name="theme-color"/>

    <!-- PWA Manifest -->
    <link href="/manifest.webmanifest" rel="manifest" type="application/manifest+json">

    <!-- iOS PWA -->

    <meta content="yes" name="mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="LGS Studio" name="apple-mobile-web-app-title">
    <link href="/assets/icons/app-icons/ios/180.png" rel="apple-touch-icon" sizes="180x180">
    <link href="/assets/icons/app-icons/ios/167.png" rel="apple-touch-icon" sizes="167x167">
    <link href="/assets/icons/app-icons/ios/152.png" rel="apple-touch-icon" sizes="152x152">
    <link href="/assets/icons/app-icons/ios/120.png" rel="apple-touch-icon" sizes="120x120">


    <!-- Android and browser icons -->
    <!-- Windows PWA -->
    <meta content="/assets/icons/app-icons/windows11/Square150x150Logo.scale-400.png" name="msapplication-TileImage">
    <meta content="#000000" name="msapplication-TileColor">
    <!-- Web Awesome -->
    <script crossorigin="anonymous" src="https://kit.webawesome.com/e55a0a6efad544ac.js"></script>
    <script>
        (function () {
            const root = document.documentElement
            const storedTheme = localStorage.getItem('theme') || 'system'
            const storedBrandColor = localStorage.getItem('brandColor') || 'yellow'
            const allowedBrandColors = new Set(['yellow', 'orange', 'red', 'pink', 'purple', 'blue', 'green', 'gray'])
            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
            const isDark = storedTheme === 'dark' || (storedTheme === 'system' && mediaQuery.matches)
            const brandColor = allowedBrandColors.has(storedBrandColor) ? storedBrandColor : 'yellow'
            const prefixesToReset = ['sl-theme-', 'wa-brand-', 'wa-palette-', 'wa-neutral-', 'wa-success-', 'wa-warning-', 'wa-danger-']
            const classesToRemove = Array.from(root.classList).filter((className) => {
                if (className === 'wa-theme-premium') {
                    return true
                }

                if (className.startsWith('wa-theme-') && className !== 'wa-theme-lgs1920') {
                    return true
                }

                return prefixesToReset.some(prefix => className.startsWith(prefix))
            })

            if (classesToRemove.length > 0) {
                root.classList.remove(...classesToRemove)
            }

            root.classList.add('wa-theme-lgs1920', `wa-brand-${brandColor}`)
            root.classList.toggle('wa-dark', isDark)
            root.classList.toggle('wa-light', !isDark)
        })()
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            background: #050807;
        }

        #cesium-viewer,
        #lgs1920-container {
            position: absolute;
            inset: 0;
        }

        #lgs-startup-background img,
        #lgs-boot-splash .lgs-boot-splash-background {
            position: absolute;
            width: 100%;
            height: 100%;
            filter: sepia(0.2) saturate(0.8);
            object-fit: cover;
            object-position: center bottom;
            pointer-events: none;
        }

        #lgs-startup-background {
            position: fixed;
            z-index: 2;
            overflow: hidden;
            transition: opacity 350ms ease, visibility 350ms ease;
            inset: 0;
        }

        body:not(.lgs-app-booting) #lgs-startup-background {
            visibility: hidden;
            opacity: 0;
        }

        #lgs-startup-background::after {
            position: absolute;
            z-index: 1;
            content: "";
            background:
                linear-gradient(90deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.24) 46%, rgba(0, 0, 0, 0.04) 100%),
                linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.54));
            pointer-events: none;
            inset: 0;
        }

        #lgs-boot-splash {
            position: fixed;
            z-index: 2;
            overflow: hidden;
            transition: opacity 450ms ease, visibility 450ms ease;
            pointer-events: none;
            background: #050807;
            inset: 0;
            visibility: hidden;
            opacity: 0;
        }

        @media (display-mode: standalone) {
            body.lgs-app-booting #lgs-boot-splash {
                visibility: visible;
                opacity: 1;
            }
        }

        #lgs-boot-splash .lgs-boot-splash-background {
            position: absolute;
            width: 100%;
            height: 100%;
            transition: opacity 250ms ease;
        }

        #lgs-boot-splash .lgs-boot-splash-background-image {
            z-index: 0;
            opacity: 1;
        }

        #lgs-boot-splash video {
            z-index: 1;
            opacity: 0;
        }

        #lgs-boot-splash.lgs-boot-splash-video-ready video {
            opacity: 1;
        }

        #lgs-boot-splash.lgs-boot-splash-video-ready .lgs-boot-splash-background-image {
            opacity: 0;
        }

        #lgs-boot-splash::after {
            position: absolute;
            z-index: 2;
            content: "";
            background:
                linear-gradient(90deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.24) 46%, rgba(0, 0, 0, 0.04) 100%),
                linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.54));
            pointer-events: none;
            inset: 0;
        }

        #lgs-boot-splash-logo {
            position: absolute;
            z-index: 3;
            top: 12vh;
            left: 50%;
            width: min(72vw, 520px);
            height: auto;
            transform: translateX(-50%);
            filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.55));
        }

        @media (display-mode: standalone) {
            body.lgs-app-booting #cesium-viewer {
                visibility: hidden;
                pointer-events: none;
                opacity: 0;
            }
        }

        body:not(.lgs-app-booting) #lgs-boot-splash {
            visibility: hidden;
            opacity: 0;
        }
    </style>

    <!-- Favicon for browsers -->
    <link href="/assets/icons/app-icons/windows11/Square44x44Logo.targetsize-16.png" rel="icon" sizes="16x16" type="image/png">
    <link href="/assets/icons/app-icons/windows11/Square44x44Logo.targetsize-32.png" rel="icon" sizes="32x32" type="image/png">
    <link href="/assets/icons/app-icons/android/android-launchericon-192-192.png" rel="icon" sizes="192x192" type="image/png">
    <link href="/assets/icons/app-icons/android/android-launchericon-512-512.png" rel="icon" sizes="512x512" type="image/png">
    <link href="/assets/images/favicon.png" rel="icon" sizes="200x200" type="image/png"/>

    <!-- Page title -->
    <title>LGS1920 Studio</title>
</head>
<body class="lgs-app-booting">
<div id="lgs-startup-background" aria-hidden="true">
    <img data-welcome-background-startup alt="" decoding="async">
</div>
<div id="cesium-viewer"></div>
<div id="lgs-boot-splash" aria-hidden="true">
    <img class="lgs-boot-splash-background lgs-boot-splash-background-image"
         data-welcome-background-fallback
         alt=""
         decoding="async">
    <video class="lgs-boot-splash-background"
           data-welcome-background-media
           autoplay muted loop playsinline preload="auto">
    </video>
    <img id="lgs-boot-splash-logo" src="/assets/logo/logo-horizontal.png" alt="LGS1920 Studio" decoding="async">
</div>
<div id="lgs1920-container"></div>

<script src="/src/assets/media/welcome-startup-background.js" type="module"></script>
<script src="/src/main.jsx" type="module"></script>
</body>
</html>