Skip to content

Commit bcdee66

Browse files
solveforceappsolveforceapp
authored
Merge pull request #7 from solveforceapp/solveforceapp-patch-1
Create LOGOS :: Codoglyph Construction Kit
2 parents 1c92fb0 + 30a8e23 commit bcdee66

File tree

1 file changed

+289
-0
lines changed

1 file changed

+289
-0
lines changed

‎LOGOS :: Codoglyph Construction Kit‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
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 :: Codoglyph Construction Kit</title>
7+
<!-- Tailwind CSS for a modern, clean UI -->
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<!-- Google Fonts -->
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: Codoglyph Construction Kit v1.0
19+
- FRAMEWORK: ⚙️ Codex, Word Calculator, Logos Codex
20+
- TIMESTAMP: 2025-06-26 16:30:00 PDT
21+
- STATUS: OPERATIONAL
22+
-->
23+
<style>
24+
body {
25+
font-family: 'Inter', sans-serif;
26+
background-color: #0d1117;
27+
color: #c9d1d9;
28+
}
29+
.mono {
30+
font-family: 'Roboto Mono', monospace;
31+
}
32+
.glass-pane {
33+
background: rgba(22, 27, 34, 0.7);
34+
backdrop-filter: blur(15px) saturate(180%);
35+
-webkit-backdrop-filter: blur(15px) saturate(180%);
36+
border: 1px solid rgba(255, 255, 255, 0.1);
37+
}
38+
.morpheme-bank .morpheme {
39+
cursor: grab;
40+
transition: all 0.2s ease-in-out;
41+
}
42+
.morpheme-bank .morpheme:hover {
43+
transform: scale(1.05);
44+
background-color: #4f46e5;
45+
}
46+
.construction-slot {
47+
border: 2px dashed rgba(255, 255, 255, 0.2);
48+
transition: all 0.2s ease-in-out;
49+
}
50+
.construction-slot.drag-over {
51+
background-color: rgba(79, 70, 229, 0.2);
52+
border-color: #4f46e5;
53+
}
54+
.result-glyph {
55+
font-size: 5rem;
56+
text-shadow: 0 0 25px rgba(96, 165, 250, 0.5);
57+
color: #60a5fa;
58+
}
59+
</style>
60+
</head>
61+
<body class="min-h-screen p-8">
62+
63+
<div class="w-full max-w-7xl mx-auto">
64+
65+
<header class="text-center mb-8">
66+
<h1 class="text-4xl font-bold text-white">Codoglyph Construction Kit</h1>
67+
<p class="text-indigo-400 mono text-sm">A recursive system for engineering verifiable meaning.</p>
68+
</header>
69+
70+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
71+
72+
<!-- Left Panel: Morpheme Bank -->
73+
<aside class="lg:col-span-1 glass-pane rounded-2xl p-6">
74+
<h2 class="text-2xl font-semibold text-white mb-4">Morpheme Bank</h2>
75+
<p class="text-sm text-gray-400 mb-6">Drag & drop verified morphemes into the construction slots to build your codoglyph.</p>
76+
<div id="morpheme-bank" class="space-y-3">
77+
<!-- Morphemes will be injected here -->
78+
</div>
79+
</aside>
80+
81+
<!-- Center Panel: Construction & Verification -->
82+
<main class="lg:col-span-2 glass-pane rounded-2xl p-6 flex flex-col">
83+
<h2 class="text-2xl font-semibold text-white mb-4">Construction Zone</h2>
84+
85+
<!-- Codoglyph Builder -->
86+
<div class="bg-gray-900/50 p-4 rounded-lg">
87+
<div class="flex items-center justify-center space-x-2 h-20" id="construction-area">
88+
<div class="construction-slot w-1/3 h-full rounded-lg flex items-center justify-center" data-slot="prefix">Prefix</div>
89+
<div class="construction-slot w-1/3 h-full rounded-lg flex items-center justify-center font-bold" data-slot="root">Root</div>
90+
<div class="construction-slot w-1/3 h-full rounded-lg flex items-center justify-center" data-slot="suffix">Suffix</div>
91+
</div>
92+
<div class="mt-4">
93+
<input id="codoglyph-name" type="text" readonly class="w-full bg-gray-800 border-0 rounded-md text-center text-2xl font-bold text-white p-2 mono" value="[Codoglyph]">
94+
</div>
95+
</div>
96+
97+
<!-- Verification Engine Output -->
98+
<div id="verification-output" class="mt-6 flex-grow border-t border-gray-700 pt-6">
99+
<h3 class="text-xl font-semibold text-white mb-4">Verification Engine</h3>
100+
<div id="output-placeholder" class="text-center text-gray-500">
101+
<i class="fas fa-cubes text-4xl mb-3"></i>
102+
<p>Awaiting component assembly...</p>
103+
</div>
104+
<div id="output-content" class="hidden space-y-4 mono text-sm">
105+
<!-- Verification results will appear here -->
106+
</div>
107+
</div>
108+
109+
<div class="mt-auto pt-6">
110+
<button id="clear-btn" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg text-lg transition duration-300">
111+
<i class="fas fa-times-circle mr-2"></i>Clear & Reset
112+
</button>
113+
</div>
114+
</main>
115+
</div>
116+
</div>
117+
118+
<script>
119+
document.addEventListener('DOMContentLoaded', () => {
120+
// --- Morpheme Data (from Codeglyph Lexicon) ---
121+
const morphemes = {
122+
prefix: [
123+
{ id: 'pre', text: 'pre-', meaning: 'Before, forward', polarity: 1 },
124+
{ id: 're', text: 're-', meaning: 'Again, back', polarity: 0 },
125+
{ id: 'con', text: 'con-', meaning: 'With, together', polarity: 1 },
126+
{ id: 'de', text: 'de-', meaning: 'Down, away from', polarity: -1 },
127+
{ id: 'trans', text: 'trans-', meaning: 'Across, beyond', polarity: 1 },
128+
{ id: 'etho', text: 'etho-', meaning: 'Moral character', polarity: 1 },
129+
{ id: 'meta', text: 'meta-', meaning: 'Beyond, self-referential', polarity: 1 },
130+
],
131+
root: [
132+
{ id: 'logos', text: 'logos', meaning: 'Word, reason, structure', polarity: 1 },
133+
{ id: 'struct', text: 'struct', meaning: 'To build, arrange', polarity: 1 },
134+
{ id: 'ver', text: 'ver', meaning: 'Truth', polarity: 1 },
135+
{ id: 'chrono', text: 'chrono', meaning: 'Time', polarity: 0 },
136+
{ id: 'sophia', text: 'sophia', meaning: 'Wisdom', polarity: 1 },
137+
{ id: 'nomos', text: 'nomos', meaning: 'Law, order', polarity: 0 },
138+
],
139+
suffix: [
140+
{ id: 'ics', text: '-ics', meaning: 'The study or art of', polarity: 0 },
141+
{ id: 'gate', text: '-gate', meaning: 'A threshold or portal', polarity: 0 },
142+
{ id: 'lux', text: '-lux', meaning: 'Light', polarity: 1 },
143+
{ id: 'archy', text: '-archy', meaning: 'Rule, governance', polarity: 0 },
144+
]
145+
};
146+
147+
// --- DOM Elements ---
148+
const morphemeBank = document.getElementById('morpheme-bank');
149+
const constructionSlots = document.querySelectorAll('.construction-slot');
150+
const codoglyphNameEl = document.getElementById('codoglyph-name');
151+
const outputPlaceholder = document.getElementById('output-placeholder');
152+
const outputContent = document.getElementById('output-content');
153+
const clearBtn = document.getElementById('clear-btn');
154+
155+
let constructedCodoglyph = { prefix: null, root: null, suffix: null };
156+
157+
// --- Populate Morpheme Bank ---
158+
function populateBank() {
159+
morphemeBank.innerHTML = '';
160+
for (const type in morphemes) {
161+
const typeHeader = document.createElement('h3');
162+
typeHeader.className = 'text-lg font-semibold text-gray-400 mt-4 first:mt-0';
163+
typeHeader.textContent = type.charAt(0).toUpperCase() + type.slice(1) + 's';
164+
morphemeBank.appendChild(typeHeader);
165+
166+
const container = document.createElement('div');
167+
container.className = 'flex flex-wrap gap-2';
168+
morphemes[type].forEach(m => {
169+
const morphemeEl = document.createElement('div');
170+
morphemeEl.className = 'morpheme bg-indigo-500 text-white px-3 py-1 rounded-full text-sm mono';
171+
morphemeEl.textContent = m.text;
172+
morphemeEl.draggable = true;
173+
morphemeEl.dataset.id = m.id;
174+
morphemeEl.dataset.type = type;
175+
container.appendChild(morphemeEl);
176+
});
177+
morphemeBank.appendChild(container);
178+
}
179+
}
180+
181+
// --- Drag and Drop Logic ---
182+
morphemeBank.addEventListener('dragstart', (e) => {
183+
if (e.target.classList.contains('morpheme')) {
184+
e.dataTransfer.setData('text/plain', e.target.dataset.id);
185+
e.dataTransfer.setData('text/type', e.target.dataset.type);
186+
}
187+
});
188+
189+
constructionSlots.forEach(slot => {
190+
slot.addEventListener('dragover', (e) => {
191+
e.preventDefault();
192+
if(slot.dataset.slot === e.dataTransfer.getData('text/type')) {
193+
slot.classList.add('drag-over');
194+
}
195+
});
196+
slot.addEventListener('dragleave', (e) => {
197+
slot.classList.remove('drag-over');
198+
});
199+
slot.addEventListener('drop', (e) => {
200+
e.preventDefault();
201+
slot.classList.remove('drag-over');
202+
const id = e.dataTransfer.getData('text/plain');
203+
const type = e.dataTransfer.getData('text/type');
204+
205+
if (slot.dataset.slot === type) {
206+
const morphemeData = morphemes[type].find(m => m.id === id);
207+
slot.textContent = morphemeData.text;
208+
slot.classList.add('bg-gray-700', 'text-white', 'font-bold');
209+
constructedCodoglyph[type] = morphemeData;
210+
updateAndVerify();
211+
}
212+
});
213+
});
214+
215+
// --- Verification and Update Logic ---
216+
function updateAndVerify() {
217+
// Update codoglyph name
218+
const nameParts = [
219+
constructedCodoglyph.prefix ? constructedCodoglyph.prefix.text.replace('-', '') : '',
220+
constructedCodoglyph.root ? constructedCodoglyph.root.text : '',
221+
constructedCodoglyph.suffix ? constructedCodoglyph.suffix.text.replace('-', '') : ''
222+
];
223+
codoglyphNameEl.value = nameParts.join('');
224+
225+
// Run verification
226+
if (constructedCodoglyph.root) {
227+
outputPlaceholder.classList.add('hidden');
228+
outputContent.classList.remove('hidden');
229+
runVerificationEngine();
230+
} else {
231+
outputPlaceholder.classList.remove('hidden');
232+
outputContent.classList.add('hidden');
233+
}
234+
}
235+
236+
function runVerificationEngine() {
237+
let html = '';
238+
let totalPolarity = 0;
239+
let domains = new Set(['Philosophy']); // Base domain
240+
241+
html += `<div class="p-2 bg-gray-900 rounded-md">`;
242+
if(constructedCodoglyph.prefix) {
243+
html += `<p><span class="text-gray-500">PREFIX:</span> ${constructedCodoglyph.prefix.text} // ${constructedCodoglyph.prefix.meaning}</p>`;
244+
totalPolarity += constructedCodoglyph.prefix.polarity;
245+
}
246+
if(constructedCodoglyph.root) {
247+
html += `<p><span class="text-gray-500">ROOT:</span> ${constructedCodoglyph.root.text} // ${constructedCodoglyph.root.meaning}</p>`;
248+
totalPolarity += constructedCodoglyph.root.polarity;
249+
if (['logos', 'nomos', 'struct'].includes(constructedCodoglyph.root.id)) domains.add('Governance');
250+
if (['logos', 'ver', 'sophia'].includes(constructedCodoglyph.root.id)) domains.add('Ethics');
251+
}
252+
if(constructedCodoglyph.suffix) {
253+
html += `<p><span class="text-gray-500">SUFFIX:</span> ${constructedCodoglyph.suffix.text} // ${constructedCodoglyph.suffix.meaning}</p>`;
254+
totalPolarity += constructedCodoglyph.suffix.polarity;
255+
if(constructedCodoglyph.suffix.id === 'ics') domains.add('Science');
256+
}
257+
html += `</div>`;
258+
259+
const polarityText = totalPolarity > 0 ? 'Affirming' : (totalPolarity < 0 ? 'Negating' : 'Neutral');
260+
const polarityColor = totalPolarity > 0 ? 'text-green-400' : (totalPolarity < 0 ? 'text-red-400' : 'text-gray-400');
261+
262+
html += `<p class="mt-4"><span class="font-semibold text-gray-400">Polarity Vector:</span> <span class="${polarityColor}">${polarityText} (${totalPolarity})</span></p>`;
263+
html += `<p><span class="font-semibold text-gray-400">Applicable Domains:</span> ${[...domains].join(', ')}</p>`;
264+
265+
// Proof Loop simulation
266+
html += `<p class="mt-4 font-semibold text-gray-400">Recursive Integrity:</p>`;
267+
html += `<div class="p-2 border-l-2 border-indigo-500 text-gray-400 italic">Loopback Test: PASSED. Meaning remains stable through restatement.</div>`;
268+
269+
outputContent.innerHTML = html;
270+
}
271+
272+
// --- Clear Button ---
273+
clearBtn.addEventListener('click', () => {
274+
constructedCodoglyph = { prefix: null, root: null, suffix: null };
275+
constructionSlots.forEach(slot => {
276+
slot.textContent = slot.dataset.slot.charAt(0).toUpperCase() + slot.dataset.slot.slice(1);
277+
slot.classList.remove('bg-gray-700', 'text-white', 'font-bold');
278+
});
279+
codoglyphNameEl.value = "[Codoglyph]";
280+
outputPlaceholder.classList.remove('hidden');
281+
outputContent.classList.add('hidden');
282+
});
283+
284+
// --- Initial Call ---
285+
populateBank();
286+
});
287+
</script>
288+
</body>
289+
</html>

0 commit comments

Comments
 (0)