Dodecahedron_Coherence_Engine/welcome.html at POC · DaiyamondoSei/Dodecahedron_Coherence_Engine · 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
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quannex - Organizational Coherence Engine</title>
    <link rel="icon" href="data:,"><!-- Suppress favicon 404 -->

    <!--
    ============================================================================
    QUANNEX WELCOME PAGE - The Cosmic Portal
    ============================================================================

    This is the entry point to Quannex - where visitors first encounter
    the vision of measuring organizational coherence through sacred geometry.

    ARCHITECTURE:
    - CursorLight system (js/components/cursor-light.js + css/components/cursor-light.css)
    - GlowCard component (js/components/glow-card.js + css/components/glow-card.css)
    - Starfield background (js/welcome/starfield.js)
    - Constellation dodecahedron (js/welcome/constellation-dodecahedron.js)
    - Glass cards behavior (js/welcome/glass-cards.js) - delegates visuals to GlowCard
    - Hyperspace transitions (js/welcome/hyperspace.js)
    - Main orchestrator (js/welcome/welcome-main.js)

    ============================================================================
    NOTES FOR FUTURE CLAUDE
    ============================================================================

    This HTML file is intentionally thin - it's an orchestrator, not the
    implementation. All logic lives in the JS modules.

    THE DARKNESS EXPERIENCE:
    The page starts pitch black. The cursor is the only light source (a glow
    halo). Content elements have .light-reveal class and start invisible.
    As the cursor approaches, CursorLight.js reveals them with slide-in.
    On mobile, device gyroscope tilt replaces the cursor.

    LOAD ORDER MATTERS:
    1. Three.js (external dependency)
    2. CSS: cursor-light.css, glow-card.css (components), then welcome.css (page)
    3. Logger (utility)
    4. CursorLight + GlowCard (reusable components)
    5. Starfield (creates background)
    6. ConstellationDodecahedron (creates Three.js scene)
    7. GlassCards (card click behavior - uses GlowCard internally)
    8. Hyperspace (transition effects)
    9. WelcomeMain (orchestrates everything, initializes CursorLight)

    The modules use IIFE pattern and attach to window. No bundler needed.

    ============================================================================
    -->

    <!-- External Dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

    <!-- Reusable Components -->
    <link rel="stylesheet" href="css/components/cursor-light.css">
    <link rel="stylesheet" href="css/components/glow-card.css">

    <!-- Page Styles -->
    <link rel="stylesheet" href="css/welcome/welcome.css">
</head>

<body>
    <!-- ===================================================================
         BACKGROUND LAYERS
         =================================================================== -->

    <!-- Starfield Container (stars created by JS) -->
    <div id="starfield-container"></div>

    <!-- Three.js Canvas for Constellation Dodecahedron -->
    <canvas id="dodecahedron-canvas"></canvas>

    <!-- ===================================================================
         MAIN CONTENT
         All visible elements use .light-reveal for darkness/reveal system
         =================================================================== -->

    <div class="welcome-content">
        <!-- Title -->
        <h1 class="welcome-title light-reveal">Quannex</h1>
        <p class="welcome-subtitle light-reveal">Organizational Coherence Engine</p>

        <!-- Tagline -->
        <p class="welcome-tagline light-reveal">
            Visualize your organization's health through the lens of
            <em>sacred geometry</em>. Twelve faces. Infinite insights.
        </p>

        <!-- Path Selection Cards -->
        <div class="path-selection">
            <!-- Template Path -->
            <a href="demo-orchestrator.html?path=template" class="path-card template light-reveal">
                <span class="path-icon">🏢</span>
                <div class="path-title">Template Path</div>
                <div class="path-description">
                    Explore pre-built company profiles to see the system in action
                </div>
            </a>

            <!-- Custom Path -->
            <a href="demo-orchestrator.html?path=custom" class="path-card custom light-reveal">
                <span class="path-icon">✏️</span>
                <div class="path-title">Custom Path</div>
                <div class="path-description">
                    Build your organization's portrait manually, step by step
                </div>
            </a>

            <!-- AI Path -->
            <a href="demo-orchestrator.html?path=ai" class="path-card ai light-reveal">
                <span class="path-icon">🧠</span>
                <div class="path-title">AI Path</div>
                <div class="path-description">
                    Tell your story and let AI map your organizational DNA
                </div>
            </a>
        </div>

        <!-- Explanation Section -->
        <div class="explanation-section light-reveal">
            <div class="explanation-title">What is this?</div>
            <p class="explanation-text">
                Quannex maps your organization onto a <strong>dodecahedron</strong> -
                a 12-faced Platonic solid that ancient Greeks associated with the cosmos.
                Each face represents a domain of your organization (finance, team, operations...).
                The <strong>edges</strong> show how domains connect.
                The <strong>vertices</strong> reveal where three domains converge to create leverage points.
                Together, they reveal your organization's coherence - or lack thereof.
            </p>
        </div>

        <!-- Footer -->
        <div class="welcome-footer light-reveal">
            Part of the Bachelor's Thesis Project by Deimantas Martynas Aurelijus
        </div>
    </div>

    <!-- ===================================================================
         MODULAR JAVASCRIPT
         Load order matters: dependencies before dependents
         =================================================================== -->

    <!-- Global Utilities -->
    <script src="js/utils/logger.js"></script>

    <!-- Reusable Components (loaded before page modules that depend on them) -->
    <script src="js/components/cursor-light.js"></script>
    <script src="js/components/glow-card.js"></script>

    <!-- Page Modules -->
    <script src="js/welcome/starfield.js"></script>
    <script src="js/welcome/constellation-dodecahedron.js"></script>
    <script src="js/welcome/glass-cards.js"></script>
    <script src="js/welcome/hyperspace.js"></script>

    <!-- Main Orchestrator (initializes everything) -->
    <script src="js/welcome/welcome-main.js"></script>

    <!-- Initialize CursorLight after all modules are loaded -->
    <script>
        CursorLight.init({ revealDistance: 400 });
    </script>
</body>

</html>