File size: 3,890 Bytes
7bdc0d4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!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>