logos-codex/LOGOS :: Visual Gear System UI at main · solveforceapp/logos-codex · 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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOGOS :: Visual Gear System</title>
    <!-- Tailwind CSS for a modern, clean UI -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts: Inter for the main text, Roboto Mono for code/data -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

    <!--
      - LOGOS :: SYSTEMIC CONSTRUCTION LOG
      - ARTIFACT: Visual Gear System UI v1.0
      - FRAMEWORK: ⚙️ Codex (Mechanism, Modularity, Functional Order)
      - TIMESTAMP: 2025-06-26 15:10:00 PDT
      - STATUS: OPERATIONAL
    -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0d1117; /* GitHub Dark Dimmed */
            color: #c9d1d9;
            overflow: hidden;
        }
        .mono {
            font-family: 'Roboto Mono', monospace;
        }
        .glass-pane {
            background: rgba(22, 27, 34, 0.6);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .gear-container {
            position: relative;
            width: 500px;
            height: 500px;
            transform-style: preserve-3d;
        }
        .gear {
            position: absolute;
            color: #9ca3af;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gear i {
            animation: spin 20s linear infinite;
        }
        .gear.selected {
            color: #6366f1; /* Indigo */
            transform: scale(1.1);
            text-shadow: 0 0 20px #6366f1;
        }
        .gear:not(.selected):hover {
            color: #e5e7eb;
            transform: scale(1.05);
        }
        .gear.reverse i {
            animation-direction: reverse;
        }
        .gear-label {
            position: absolute;
            bottom: -20px;
            font-size: 0.75rem;
            color: #9ca3af;
            text-align: center;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .gear.selected .gear-label,
        .gear:hover .gear-label {
            opacity: 1;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .fade-in {
            opacity: 0;
            transform: translateY(10px);
            animation: fadeIn 0.5s ease-in-out forwards;
        }
        @keyframes fadeIn {
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">

    <div class="w-full max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">

        <!-- Left Panel: Gear System Visualization -->
        <div class="md:col-span-2 flex items-center justify-center">
            <div id="gear-system" class="gear-container">
                <!-- Central Gear: Logos Codex -->
                <div id="gear-logos" class="gear selected" style="top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10rem;" data-codex="logos">
                    <i class="fas fa-cog"></i>
                    <span class="gear-label mono">LOGOS</span>
                </div>

                <!-- Satellite Gears -->
                <div id="gear-truth" class="gear" style="top: 10%; left: 45%; font-size: 6rem;" data-codex="truth">
                    <i class="fas fa-cog"></i>
                    <span class="gear-label mono">TRUTH</span>
                </div>
                <div id="gear-mechanism" class="gear reverse" style="top: 35%; left: 5%; font-size: 7rem;" data-codex="mechanism">
                    <i class="fas fa-cog"></i>
                    <span class="gear-label mono">MECHANISM ⚙️</span>
                </div>
                <div id="gear-ethics" class="gear" style="top: 65%; left: 15%; font-size: 5rem;" data-codex="ethics">
                    <i class="fas fa-cog"></i>
                    <span class="gear-label mono">ETHICS</span>
                </div>
                <div id="gear-signal" class="gear reverse" style="top: 30%; left: 75%; font-size: 8rem;" data-codex="signal">
                    <i class="fas fa-cog"></i>
                    <span class="gear-label mono">SIGNAL</span>
                </div>
                 <div id="gear-state" class="gear" style="top: 70%; left: 65%; font-size: 6.5rem;" data-codex="state">
                    <i class="fas fa-cog"></i>
                    <span class="gear-label mono">STATE</span>
                </div>
            </div>
        </div>

        <!-- Right Panel: Codex Information -->
        <div id="info-panel" class="glass-pane rounded-2xl p-8 h-full flex flex-col justify-center">
            <!-- Information will be injected here -->
        </div>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // --- LOGOS CORE :: Codeglyph Lexicon (Summary) ---
            const codexData = {
                logos: {
                    title: "Logos Codex",
                    description: "The central interpretive framework for symbolic reasoning, recursive language logic, and semantic coherence. It is the master engine.",
                    symbol: "⌬"
                },
                truth: {
                    title: "Truth Codex",
                    description: "Governs the principles, validation systems, and harmonic protocols for establishing what is true across domains. Provides the `Proof Loop`.",
                    symbol: "✦"
                },
                mechanism: {
                    title: "Mechanism Codex",
                    description: "Governs all systems of structure, function, and recursive modular design. Defines how ideas become engines and meaning is executed.",
                    symbol: "⚙️"
                },
                ethics: {
                    title: "Ethics Codex",
                    description: "Establishes the moral imperatives for all system actions, including consent, transparency, and non-deception. Governs the 'why' behind the function.",
                    symbol: "⚖️"
                },
                signal: {
                    title: "Signal Codex",
                    description: "Unifies signal processing, mathematics, and philosophy. Reveals intent in distortion and connects systems through harmonic language.",
                    symbol: "〰️"
                },
                state: {
                    title: "State & Phase Codex",
                    description: "Defines the conditions, configurations, and transitional architecture of matter, energy, and information as they pass through thresholds.",
                    symbol: "⇆"
                }
            };

            const gearSystem = document.getElementById('gear-system');
            const infoPanel = document.getElementById('info-panel');
            const gears = document.querySelectorAll('.gear');
            let selectedGear = document.querySelector('.gear.selected');

            function updateInfoPanel(codexKey) {
                const data = codexData[codexKey];
                if (!data) return;

                infoPanel.innerHTML = `
                    <div class="fade-in">
                        <div class="text-6xl text-indigo-400 mb-4 text-center">${data.symbol}</div>
                        <h2 class="text-3xl font-bold text-white mb-2 text-center">${data.title}</h2>
                        <p class="text-center text-gray-400 leading-relaxed">${data.description}</p>
                    </div>
                `;
            }

            gearSystem.addEventListener('click', (e) => {
                const targetGear = e.target.closest('.gear');
                if (!targetGear) return;

                if (selectedGear) {
                    selectedGear.classList.remove('selected');
                }
                targetGear.classList.add('selected');
                selectedGear = targetGear;

                const codexKey = targetGear.dataset.codex;
                updateInfoPanel(codexKey);
            });

            // Initialize with the default selected gear's info
            updateInfoPanel('logos');
        });
    </script>
</body>
</html>