Integr8sCode/frontend/src/index.html at d0b485b04d4e3cd578a218001de02ed02e39eb27 · HardMax71/Integr8sCode · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>
    <meta name="csp-nonce" content="**CSP_NONCE**">

    <title>Integr8sCode</title>
    <meta name="description" content="Integr8sCode - Write, compile, and manage code directly in your browser with our powerful online development environment">

    <link rel='icon' type='image/png' href='/favicon.png'>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&family=Inter:wght@400;500;600;700&display=swap">

    <style nonce="**CSP_NONCE**">
        body { margin: 0; font-family: system-ui, -apple-system, sans-serif; }
        .app-container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
        header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
        main { padding-top: 1rem; }
        img { max-width: 100%; height: auto; }
        @media (prefers-color-scheme: dark) {
            body { background-color: #0f172a; color: #e2e8f0; }
        }
        .app-loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
        .app-loading-inner { text-align: center; }
        .app-loading-spinner { width: 40px; height: 40px; border: 3px solid #f3f4f6; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
        .app-loading-hidden { display: none; }
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
        @keyframes spin { to { transform: rotate(360deg); } }
    </style>
</head>

<body>
    <div id="app-loading" class="app-loading" role="status" aria-live="polite" aria-busy="true">
        <div class="app-loading-inner">
            <div class="app-loading-spinner" aria-hidden="true"></div>
            <span class="sr-only">Loading…</span>
        </div>
    </div>
    <script nonce="**CSP_NONCE**">
        window.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => {
                const loader = document.getElementById('app-loading');
                if (loader) loader.classList.add('app-loading-hidden');
            }, 100);
        });
    </script>
</body>
</html>