Skip to content

Create LOGOS :: Codoglyph Construction Kit #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
solveforceapp merged 1 commit into from
Jun 26, 2025
Merged

Create LOGOS :: Codoglyph Construction Kit #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
289 changes: 289 additions & 0 deletions LOGOS :: Codoglyph Construction Kit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,289 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LOGOS :: Codoglyph Construction Kit</title>
<!-- Tailwind CSS for a modern, clean UI -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<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: Codoglyph Construction Kit v1.0
- FRAMEWORK: ⚙️ Codex, Word Calculator, Logos Codex
- TIMESTAMP: 2025-06-26 16:30:00 PDT
- STATUS: OPERATIONAL
-->
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #0d1117;
color: #c9d1d9;
}
.mono {
font-family: 'Roboto Mono', monospace;
}
.glass-pane {
background: rgba(22, 27, 34, 0.7);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(15px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.morpheme-bank .morpheme {
cursor: grab;
transition: all 0.2s ease-in-out;
}
.morpheme-bank .morpheme:hover {
transform: scale(1.05);
background-color: #4f46e5;
}
.construction-slot {
border: 2px dashed rgba(255, 255, 255, 0.2);
transition: all 0.2s ease-in-out;
}
.construction-slot.drag-over {
background-color: rgba(79, 70, 229, 0.2);
border-color: #4f46e5;
}
.result-glyph {
font-size: 5rem;
text-shadow: 0 0 25px rgba(96, 165, 250, 0.5);
color: #60a5fa;
}
</style>
</head>
<body class="min-h-screen p-8">

<div class="w-full max-w-7xl mx-auto">

<header class="text-center mb-8">
<h1 class="text-4xl font-bold text-white">Codoglyph Construction Kit</h1>
<p class="text-indigo-400 mono text-sm">A recursive system for engineering verifiable meaning.</p>
</header>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

<!-- Left Panel: Morpheme Bank -->
<aside class="lg:col-span-1 glass-pane rounded-2xl p-6">
<h2 class="text-2xl font-semibold text-white mb-4">Morpheme Bank</h2>
<p class="text-sm text-gray-400 mb-6">Drag & drop verified morphemes into the construction slots to build your codoglyph.</p>
<div id="morpheme-bank" class="space-y-3">
<!-- Morphemes will be injected here -->
</div>
</aside>

<!-- Center Panel: Construction & Verification -->
<main class="lg:col-span-2 glass-pane rounded-2xl p-6 flex flex-col">
<h2 class="text-2xl font-semibold text-white mb-4">Construction Zone</h2>

<!-- Codoglyph Builder -->
<div class="bg-gray-900/50 p-4 rounded-lg">
<div class="flex items-center justify-center space-x-2 h-20" id="construction-area">
<div class="construction-slot w-1/3 h-full rounded-lg flex items-center justify-center" data-slot="prefix">Prefix</div>
<div class="construction-slot w-1/3 h-full rounded-lg flex items-center justify-center font-bold" data-slot="root">Root</div>
<div class="construction-slot w-1/3 h-full rounded-lg flex items-center justify-center" data-slot="suffix">Suffix</div>
</div>
<div class="mt-4">
<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]">
</div>
</div>

<!-- Verification Engine Output -->
<div id="verification-output" class="mt-6 flex-grow border-t border-gray-700 pt-6">
<h3 class="text-xl font-semibold text-white mb-4">Verification Engine</h3>
<div id="output-placeholder" class="text-center text-gray-500">
<i class="fas fa-cubes text-4xl mb-3"></i>
<p>Awaiting component assembly...</p>
</div>
<div id="output-content" class="hidden space-y-4 mono text-sm">
<!-- Verification results will appear here -->
</div>
</div>

<div class="mt-auto pt-6">
<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">
<i class="fas fa-times-circle mr-2"></i>Clear & Reset
</button>
</div>
</main>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
// --- Morpheme Data (from Codeglyph Lexicon) ---
const morphemes = {
prefix: [
{ id: 'pre', text: 'pre-', meaning: 'Before, forward', polarity: 1 },
{ id: 're', text: 're-', meaning: 'Again, back', polarity: 0 },
{ id: 'con', text: 'con-', meaning: 'With, together', polarity: 1 },
{ id: 'de', text: 'de-', meaning: 'Down, away from', polarity: -1 },
{ id: 'trans', text: 'trans-', meaning: 'Across, beyond', polarity: 1 },
{ id: 'etho', text: 'etho-', meaning: 'Moral character', polarity: 1 },
{ id: 'meta', text: 'meta-', meaning: 'Beyond, self-referential', polarity: 1 },
],
root: [
{ id: 'logos', text: 'logos', meaning: 'Word, reason, structure', polarity: 1 },
{ id: 'struct', text: 'struct', meaning: 'To build, arrange', polarity: 1 },
{ id: 'ver', text: 'ver', meaning: 'Truth', polarity: 1 },
{ id: 'chrono', text: 'chrono', meaning: 'Time', polarity: 0 },
{ id: 'sophia', text: 'sophia', meaning: 'Wisdom', polarity: 1 },
{ id: 'nomos', text: 'nomos', meaning: 'Law, order', polarity: 0 },
],
suffix: [
{ id: 'ics', text: '-ics', meaning: 'The study or art of', polarity: 0 },
{ id: 'gate', text: '-gate', meaning: 'A threshold or portal', polarity: 0 },
{ id: 'lux', text: '-lux', meaning: 'Light', polarity: 1 },
{ id: 'archy', text: '-archy', meaning: 'Rule, governance', polarity: 0 },
]
};

// --- DOM Elements ---
const morphemeBank = document.getElementById('morpheme-bank');
const constructionSlots = document.querySelectorAll('.construction-slot');
const codoglyphNameEl = document.getElementById('codoglyph-name');
const outputPlaceholder = document.getElementById('output-placeholder');
const outputContent = document.getElementById('output-content');
const clearBtn = document.getElementById('clear-btn');

let constructedCodoglyph = { prefix: null, root: null, suffix: null };

// --- Populate Morpheme Bank ---
function populateBank() {
morphemeBank.innerHTML = '';
for (const type in morphemes) {
const typeHeader = document.createElement('h3');
typeHeader.className = 'text-lg font-semibold text-gray-400 mt-4 first:mt-0';
typeHeader.textContent = type.charAt(0).toUpperCase() + type.slice(1) + 's';
morphemeBank.appendChild(typeHeader);

const container = document.createElement('div');
container.className = 'flex flex-wrap gap-2';
morphemes[type].forEach(m => {
const morphemeEl = document.createElement('div');
morphemeEl.className = 'morpheme bg-indigo-500 text-white px-3 py-1 rounded-full text-sm mono';
morphemeEl.textContent = m.text;
morphemeEl.draggable = true;
morphemeEl.dataset.id = m.id;
morphemeEl.dataset.type = type;
container.appendChild(morphemeEl);
});
morphemeBank.appendChild(container);
}
}

// --- Drag and Drop Logic ---
morphemeBank.addEventListener('dragstart', (e) => {
if (e.target.classList.contains('morpheme')) {
e.dataTransfer.setData('text/plain', e.target.dataset.id);
e.dataTransfer.setData('text/type', e.target.dataset.type);
}
});

constructionSlots.forEach(slot => {
slot.addEventListener('dragover', (e) => {
e.preventDefault();
if(slot.dataset.slot === e.dataTransfer.getData('text/type')) {
slot.classList.add('drag-over');
}
});
slot.addEventListener('dragleave', (e) => {
slot.classList.remove('drag-over');
});
slot.addEventListener('drop', (e) => {
e.preventDefault();
slot.classList.remove('drag-over');
const id = e.dataTransfer.getData('text/plain');
const type = e.dataTransfer.getData('text/type');

if (slot.dataset.slot === type) {
const morphemeData = morphemes[type].find(m => m.id === id);
slot.textContent = morphemeData.text;
slot.classList.add('bg-gray-700', 'text-white', 'font-bold');
constructedCodoglyph[type] = morphemeData;
updateAndVerify();
}
});
});

// --- Verification and Update Logic ---
function updateAndVerify() {
// Update codoglyph name
const nameParts = [
constructedCodoglyph.prefix ? constructedCodoglyph.prefix.text.replace('-', '') : '',
constructedCodoglyph.root ? constructedCodoglyph.root.text : '',
constructedCodoglyph.suffix ? constructedCodoglyph.suffix.text.replace('-', '') : ''
];
codoglyphNameEl.value = nameParts.join('');

// Run verification
if (constructedCodoglyph.root) {
outputPlaceholder.classList.add('hidden');
outputContent.classList.remove('hidden');
runVerificationEngine();
} else {
outputPlaceholder.classList.remove('hidden');
outputContent.classList.add('hidden');
}
}

function runVerificationEngine() {
let html = '';
let totalPolarity = 0;
let domains = new Set(['Philosophy']); // Base domain

html += `<div class="p-2 bg-gray-900 rounded-md">`;
if(constructedCodoglyph.prefix) {
html += `<p><span class="text-gray-500">PREFIX:</span> ${constructedCodoglyph.prefix.text} // ${constructedCodoglyph.prefix.meaning}</p>`;
totalPolarity += constructedCodoglyph.prefix.polarity;
}
if(constructedCodoglyph.root) {
html += `<p><span class="text-gray-500">ROOT:</span> ${constructedCodoglyph.root.text} // ${constructedCodoglyph.root.meaning}</p>`;
totalPolarity += constructedCodoglyph.root.polarity;
if (['logos', 'nomos', 'struct'].includes(constructedCodoglyph.root.id)) domains.add('Governance');
if (['logos', 'ver', 'sophia'].includes(constructedCodoglyph.root.id)) domains.add('Ethics');
}
if(constructedCodoglyph.suffix) {
html += `<p><span class="text-gray-500">SUFFIX:</span> ${constructedCodoglyph.suffix.text} // ${constructedCodoglyph.suffix.meaning}</p>`;
totalPolarity += constructedCodoglyph.suffix.polarity;
if(constructedCodoglyph.suffix.id === 'ics') domains.add('Science');
}
html += `</div>`;

const polarityText = totalPolarity > 0 ? 'Affirming' : (totalPolarity < 0 ? 'Negating' : 'Neutral');
const polarityColor = totalPolarity > 0 ? 'text-green-400' : (totalPolarity < 0 ? 'text-red-400' : 'text-gray-400');

html += `<p class="mt-4"><span class="font-semibold text-gray-400">Polarity Vector:</span> <span class="${polarityColor}">${polarityText} (${totalPolarity})</span></p>`;
html += `<p><span class="font-semibold text-gray-400">Applicable Domains:</span> ${[...domains].join(', ')}</p>`;

// Proof Loop simulation
html += `<p class="mt-4 font-semibold text-gray-400">Recursive Integrity:</p>`;
html += `<div class="p-2 border-l-2 border-indigo-500 text-gray-400 italic">Loopback Test: PASSED. Meaning remains stable through restatement.</div>`;

outputContent.innerHTML = html;
}

// --- Clear Button ---
clearBtn.addEventListener('click', () => {
constructedCodoglyph = { prefix: null, root: null, suffix: null };
constructionSlots.forEach(slot => {
slot.textContent = slot.dataset.slot.charAt(0).toUpperCase() + slot.dataset.slot.slice(1);
slot.classList.remove('bg-gray-700', 'text-white', 'font-bold');
});
codoglyphNameEl.value = "[Codoglyph]";
outputPlaceholder.classList.remove('hidden');
outputContent.classList.add('hidden');
});

// --- Initial Call ---
populateBank();
});
</script>
</body>
</html>