Nirvanify/interventions.html at main · fireheartjerry/Nirvanify · 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
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Nirvanify • Interventions</title>
        <meta name="theme-color" content="#0b1220" />
        <link rel="stylesheet" href="./css/variables.css" />
        <link rel="stylesheet" href="./css/layout.css" />
        <link rel="stylesheet" href="./css/components.css" />
        <link rel="stylesheet" href="./css/interventions_render.css" />
        <style>
            :root {
                color-scheme: dark;
                /* Keep in sync with css/interventions_render.css :host vars */
                --iv-gap: clamp(24px, 3.5vw, 32px);
                --iv-pad-x: clamp(16px, 2.5vw, 24px);
            }
            body {
                min-height: 100svh;
                background: radial-gradient(
                        1200px 600px at 10% -10%,
                        rgba(99, 102, 241, 0.12),
                        transparent 60%
                    ),
                    radial-gradient(
                        900px 500px at 90% 110%,
                        rgba(56, 189, 248, 0.1),
                        transparent 55%
                    ),
                    linear-gradient(180deg, #070b11, #0b1220 40%, #0a0f1a 100%);
            }
            .skip-link {
                position: absolute;
                left: -9999px;
                top: auto;
                width: 1px;
                height: 1px;
                overflow: hidden;
            }
            .skip-link:focus {
                position: static;
                width: auto;
                height: auto;
                padding: 8px 12px;
                margin: 8px;
                background: #000;
                color: #fff;
                border-radius: 8px;
                z-index: 99999;
            }
            main {
                width: 100%;
                max-width: none;
                margin: 40px 0;
                padding: 0; /* full bleed */
            }
            /* Removed external header; components render their own header inside shadow DOM */
            .intervention-container {
                min-height: 60vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .loading-state {
                text-align: center;
                color: var(--text-secondary);
                font-size: 1.1rem;
            }
            .error-state {
                text-align: center;
                color: #ef4444;
                font-size: 1.1rem;
                padding: 2rem;
                background: rgba(239, 68, 68, 0.1);
                border: 1px solid rgba(239, 68, 68, 0.2);
                border-radius: var(--radius-xl);
            }
            @keyframes shimmer {
                0% { transform: translateX(-100%); }
                60% { transform: translateX(100%); }
                100% { transform: translateX(100%); }
            }
        </style>
    </head>
    <body>
        <a class="skip-link" href="#intervention-main">Skip to main content</a>
        <main>
            <div class="intervention-container" id="intervention-container">
                <div class="loading-state" id="loading-state">
                    Loading intervention...
                </div>
            </div>
        </main>

        <!-- Intervention Router Script (external to satisfy MV3 CSP) -->
        <script type="module" src="./classes/intervention/interventions-router.js"></script>
    </body>
</html>