index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0, viewport-fit=cover"
    >

    <meta
        name="theme-color"
        content="#050505"
    >

    <meta
        name="description"
        content="Xenex Glass OS — a browser-based operating environment."
    >

    <title>Xenex Glass OS</title>

    <link rel="stylesheet" href="./assets/css/boot.css">
</head>

<body>

    <!--
        ============================================================
        XENEX GLASS OS — BOOT SCREEN
        ============================================================

        This page is deliberately static.

        It does NOT:
        - contain user information
        - authenticate users
        - contact Lambda
        - contain database credentials
        - contain S3 credentials
        - contain administrator privileges

        Authentication and privileged operations will live behind
        the backend API.

        The bootloader's only responsibility is:
        1. Present the Xenex boot experience.
        2. Prepare the visual transition.
        3. Hand control to the next frontend module.
    -->

    <main
        id="xenex-boot"
        class="xenex-boot"
        aria-label="Xenex Glass OS starting"
    >

        <!-- Ambient background -->
        <div class="boot-background" aria-hidden="true">
            <div class="boot-glow boot-glow-blue"></div>
            <div class="boot-glow boot-glow-orange"></div>
            <div class="boot-glow boot-glow-red"></div>
        </div>


        <!-- Main boot content -->
        <section class="boot-content">

            <!-- Xenex logo / wordmark -->
            <div
                id="xenex-wordmark"
                class="xenex-wordmark"
                aria-label="Xenex OS"
            >
                <span class="xenex-x">X</span><span>enex</span>
                <small>OS</small>
            </div>


            <!--
                Glass loading capsule

                Three independent bars sit inside the glass.
                The light movement is produced by CSS rather than
                an SVG filter.
            -->
            <div
                class="glass-loader"
                role="progressbar"
                aria-label="Starting Xenex Glass OS"
                aria-valuemin="0"
                aria-valuemax="100"
                aria-valuetext="Starting Xenex Glass OS"
            >

                <div class="loader-glass" aria-hidden="true">

                    <div class="loader-bar">
                        <span class="loader-light"></span>
                    </div>

                    <div class="loader-bar">
                        <span class="loader-light"></span>
                    </div>

                    <div class="loader-bar">
                        <span class="loader-light"></span>
                    </div>

                </div>

            </div>


            <!-- Boot status -->
            <p
                id="boot-status"
                class="boot-status"
                aria-live="polite"
            >
                Starting Xenex Glass OS
            </p>

        </section>


        <!--
            Screen used for the transition from bootloader
            to the actual Xenex OS application shell.
        -->
        <div
            id="boot-transition"
            class="boot-transition"
            aria-hidden="true"
        ></div>

    </main>


    <!--
        JavaScript is modular.

        boot.js owns ONLY the boot sequence.
        It will eventually hand control to the Xenex
        application shell.

        No backend credentials or privileged logic belong here.
    -->
    <script
        type="module"
        src="./assets/js/boot.js"
    ></script>

</body>
</html>