Skip to content

Commit 56df93a

Browse files
solveforceappsolveforceapp
authored
Create LOGOS :: Visual Gear System UI
1 parent 7bed5b0 commit 56df93a

1 file changed

Lines changed: 214 additions & 0 deletions

File tree

‎LOGOS :: Visual Gear System UI‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>LOGOS :: Visual Gear System</title>
7+
<!-- Tailwind CSS for a modern, clean UI -->
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<!-- Google Fonts: Inter for the main text, Roboto Mono for code/data -->
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
13+
<!-- Font Awesome for icons -->
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
15+
16+
<!--
17+
- LOGOS :: SYSTEMIC CONSTRUCTION LOG
18+
- ARTIFACT: Visual Gear System UI v1.0
19+
- FRAMEWORK: ⚙️ Codex (Mechanism, Modularity, Functional Order)
20+
- TIMESTAMP: 2025-06-26 15:10:00 PDT
21+
- STATUS: OPERATIONAL
22+
-->
23+
<style>
24+
body {
25+
font-family: 'Inter', sans-serif;
26+
background-color: #0d1117; /* GitHub Dark Dimmed */
27+
color: #c9d1d9;
28+
overflow: hidden;
29+
}
30+
.mono {
31+
font-family: 'Roboto Mono', monospace;
32+
}
33+
.glass-pane {
34+
background: rgba(22, 27, 34, 0.6);
35+
backdrop-filter: blur(20px) saturate(180%);
36+
-webkit-backdrop-filter: blur(20px) saturate(180%);
37+
border: 1px solid rgba(255, 255, 255, 0.1);
38+
}
39+
.gear-container {
40+
position: relative;
41+
width: 500px;
42+
height: 500px;
43+
transform-style: preserve-3d;
44+
}
45+
.gear {
46+
position: absolute;
47+
color: #9ca3af;
48+
transition: all 0.3s ease-in-out;
49+
cursor: pointer;
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
53+
}
54+
.gear i {
55+
animation: spin 20s linear infinite;
56+
}
57+
.gear.selected {
58+
color: #6366f1; /* Indigo */
59+
transform: scale(1.1);
60+
text-shadow: 0 0 20px #6366f1;
61+
}
62+
.gear:not(.selected):hover {
63+
color: #e5e7eb;
64+
transform: scale(1.05);
65+
}
66+
.gear.reverse i {
67+
animation-direction: reverse;
68+
}
69+
.gear-label {
70+
position: absolute;
71+
bottom: -20px;
72+
font-size: 0.75rem;
73+
color: #9ca3af;
74+
text-align: center;
75+
opacity: 0;
76+
transition: opacity 0.3s ease-in-out;
77+
}
78+
.gear.selected .gear-label,
79+
.gear:hover .gear-label {
80+
opacity: 1;
81+
}
82+
83+
@keyframes spin {
84+
from { transform: rotate(0deg); }
85+
to { transform: rotate(360deg); }
86+
}
87+
.fade-in {
88+
opacity: 0;
89+
transform: translateY(10px);
90+
animation: fadeIn 0.5s ease-in-out forwards;
91+
}
92+
@keyframes fadeIn {
93+
to { opacity: 1; transform: translateY(0); }
94+
}
95+
</style>
96+
</head>
97+
<body class="min-h-screen flex flex-col items-center justify-center p-4">
98+
99+
<div class="w-full max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
100+
101+
<!-- Left Panel: Gear System Visualization -->
102+
<div class="md:col-span-2 flex items-center justify-center">
103+
<div id="gear-system" class="gear-container">
104+
<!-- Central Gear: Logos Codex -->
105+
<div id="gear-logos" class="gear selected" style="top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10rem;" data-codex="logos">
106+
<i class="fas fa-cog"></i>
107+
<span class="gear-label mono">LOGOS</span>
108+
</div>
109+
110+
<!-- Satellite Gears -->
111+
<div id="gear-truth" class="gear" style="top: 10%; left: 45%; font-size: 6rem;" data-codex="truth">
112+
<i class="fas fa-cog"></i>
113+
<span class="gear-label mono">TRUTH</span>
114+
</div>
115+
<div id="gear-mechanism" class="gear reverse" style="top: 35%; left: 5%; font-size: 7rem;" data-codex="mechanism">
116+
<i class="fas fa-cog"></i>
117+
<span class="gear-label mono">MECHANISM ⚙️</span>
118+
</div>
119+
<div id="gear-ethics" class="gear" style="top: 65%; left: 15%; font-size: 5rem;" data-codex="ethics">
120+
<i class="fas fa-cog"></i>
121+
<span class="gear-label mono">ETHICS</span>
122+
</div>
123+
<div id="gear-signal" class="gear reverse" style="top: 30%; left: 75%; font-size: 8rem;" data-codex="signal">
124+
<i class="fas fa-cog"></i>
125+
<span class="gear-label mono">SIGNAL</span>
126+
</div>
127+
<div id="gear-state" class="gear" style="top: 70%; left: 65%; font-size: 6.5rem;" data-codex="state">
128+
<i class="fas fa-cog"></i>
129+
<span class="gear-label mono">STATE</span>
130+
</div>
131+
</div>
132+
</div>
133+
134+
<!-- Right Panel: Codex Information -->
135+
<div id="info-panel" class="glass-pane rounded-2xl p-8 h-full flex flex-col justify-center">
136+
<!-- Information will be injected here -->
137+
</div>
138+
139+
</div>
140+
141+
<script>
142+
document.addEventListener('DOMContentLoaded', () => {
143+
// --- LOGOS CORE :: Codeglyph Lexicon (Summary) ---
144+
const codexData = {
145+
logos: {
146+
title: "Logos Codex",
147+
description: "The central interpretive framework for symbolic reasoning, recursive language logic, and semantic coherence. It is the master engine.",
148+
symbol: "⌬"
149+
},
150+
truth: {
151+
title: "Truth Codex",
152+
description: "Governs the principles, validation systems, and harmonic protocols for establishing what is true across domains. Provides the `Proof Loop`.",
153+
symbol: "✦"
154+
},
155+
mechanism: {
156+
title: "Mechanism Codex",
157+
description: "Governs all systems of structure, function, and recursive modular design. Defines how ideas become engines and meaning is executed.",
158+
symbol: "⚙️"
159+
},
160+
ethics: {
161+
title: "Ethics Codex",
162+
description: "Establishes the moral imperatives for all system actions, including consent, transparency, and non-deception. Governs the 'why' behind the function.",
163+
symbol: "⚖️"
164+
},
165+
signal: {
166+
title: "Signal Codex",
167+
description: "Unifies signal processing, mathematics, and philosophy. Reveals intent in distortion and connects systems through harmonic language.",
168+
symbol: "〰️"
169+
},
170+
state: {
171+
title: "State & Phase Codex",
172+
description: "Defines the conditions, configurations, and transitional architecture of matter, energy, and information as they pass through thresholds.",
173+
symbol: "⇆"
174+
}
175+
};
176+
177+
const gearSystem = document.getElementById('gear-system');
178+
const infoPanel = document.getElementById('info-panel');
179+
const gears = document.querySelectorAll('.gear');
180+
let selectedGear = document.querySelector('.gear.selected');
181+
182+
function updateInfoPanel(codexKey) {
183+
const data = codexData[codexKey];
184+
if (!data) return;
185+
186+
infoPanel.innerHTML = `
187+
<div class="fade-in">
188+
<div class="text-6xl text-indigo-400 mb-4 text-center">${data.symbol}</div>
189+
<h2 class="text-3xl font-bold text-white mb-2 text-center">${data.title}</h2>
190+
<p class="text-center text-gray-400 leading-relaxed">${data.description}</p>
191+
</div>
192+
`;
193+
}
194+
195+
gearSystem.addEventListener('click', (e) => {
196+
const targetGear = e.target.closest('.gear');
197+
if (!targetGear) return;
198+
199+
if (selectedGear) {
200+
selectedGear.classList.remove('selected');
201+
}
202+
targetGear.classList.add('selected');
203+
selectedGear = targetGear;
204+
205+
const codexKey = targetGear.dataset.codex;
206+
updateInfoPanel(codexKey);
207+
});
208+
209+
// Initialize with the default selected gear's info
210+
updateInfoPanel('logos');
211+
});
212+
</script>
213+
</body>
214+
</html>

0 commit comments

Comments
 (0)