-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
332 lines (301 loc) · 21.7 KB
/
Copy pathindex.html
File metadata and controls
332 lines (301 loc) · 21.7 KB
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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>SINTER | 5IR Hub</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root { --obsidian: #020202; --cyan: #00f0ff; --magenta: #ff00f0; --gold: #ffcc00; --red: #ff3b3b; --glass: rgba(255, 255, 255, 0.03); --border: rgba(255, 255, 255, 0.1); }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: var(--obsidian); color: #e0e0e0; font-family: 'Inter', sans-serif; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
canvas { position: fixed; top: 0; left: 0; z-index: -1; }
.mono { font-family: 'JetBrains Mono', monospace; }
.glass { background: var(--glass); backdrop-filter: blur(15px); border: 1px solid var(--border); border-radius: 12px; }
.neon-text-cyan { text-shadow: 0 0 10px rgba(0, 240, 255, 0.7); color: var(--cyan); }
.hidden { display: none !important; }
.page { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.btn-active:active { transform: scale(0.95); opacity: 0.8; }
.pulse-card { border-left: 2px solid var(--border); transition: 0.5s; background: rgba(255,255,255,0.01); margin-bottom: 12px; }
.work-unit-card { border: 1px solid var(--border); transition: 0.3s; background: rgba(255,255,255,0.01); cursor: pointer; }
.work-unit-card:hover { border-color: var(--cyan); background: rgba(0,240,255,0.05); }
.weave-grid { background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 30px 30px; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
</style>
</head>
<body class="flex flex-col min-h-screen">
<canvas id="bg-canvas"></canvas>
<!-- NAVIGATION -->
<nav class="flex justify-between items-center px-6 py-4 sticky top-0 z-50 glass border-b border-white/5">
<div class="flex items-center gap-4">
<div class="text-xl font-bold tracking-tighter neon-text-cyan cursor-pointer" onclick="showPage('auth-section')">SINTER_</div>
<!-- THE MASTER SWITCH -->
<div class="flex items-center gap-2 bg-white/5 px-2 py-1 rounded-full border border-white/10">
<span id="mode-label" class="text-[6px] mono uppercase text-gray-500">Manual</span>
<button onclick="toggleMode()" id="mode-switch" class="w-7 h-3 bg-gray-700 rounded-full relative transition-all">
<div id="mode-knob" class="absolute left-0.5 top-0.5 w-2 h-2 bg-white rounded-full transition-all"></div>
</button>
<span class="text-[6px] mono uppercase text-magenta-500">Auto</span>
</div>
</div>
<div class="flex space-x-4 text-[8px] md:text-[9px] uppercase tracking-widest font-bold overflow-x-auto">
<a href="javascript:void(0)" onclick="showPage('manifold-section')" class="hover:text-cyan-400">Manifold</a>
<a href="javascript:void(0)" onclick="showPage('forge-section')" class="hover:text-cyan-400">Forge</a>
<a href="javascript:void(0)" onclick="showPage('vortex-section')" class="text-magenta-500">Vortex</a>
<a href="javascript:void(0)" onclick="showPage('profile-section')" class="text-gray-400">Node</a>
</div>
</nav>
<main class="flex-grow flex items-center justify-center p-4">
<!-- 1. AUTH -->
<section id="auth-section" class="page max-w-md w-full p-8 glass text-center">
<h1 class="text-3xl font-light mb-2">INITIALIZE <span class="text-cyan-400">NODE</span></h1>
<input type="text" id="node-id-input" placeholder="ARCHITECT_8842" class="w-full bg-black/60 border border-white/10 p-4 rounded-lg mb-6 text-center mono text-sm focus:border-cyan-500 outline-none">
<button onclick="login()" class="w-full bg-cyan-500 text-black font-bold py-4 rounded-lg btn-active uppercase">Sync to Lattice</button>
</section>
<!-- 2. MANIFOLD (THE FEED) -->
<section id="manifold-section" class="page hidden max-w-2xl w-full flex flex-col gap-4 h-[85vh]">
<div class="glass p-6 border-2 border-cyan-500/30">
<h3 class="text-[10px] font-bold text-cyan-400 uppercase mb-2 tracking-[0.2em]">Broadcast Intent</h3>
<textarea id="pulse-input" placeholder="What are you weaving today?" class="w-full bg-black/40 border border-white/10 p-4 rounded text-sm focus:border-cyan-500 outline-none resize-none h-20 mono"></textarea>
<button onclick="createPulse()" class="mt-3 w-full bg-white text-black font-bold text-[10px] py-3 rounded uppercase btn-active">Pulse to Lattice</button>
</div>
<div id="manifold-feed" class="flex-grow flex flex-col overflow-y-auto pr-2 pb-10"></div>
</section>
<!-- 3. PROFILE / NODE -->
<section id="profile-section" class="page hidden max-w-5xl w-full grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-1 p-8 glass flex flex-col items-center">
<div class="w-20 h-20 rounded-full bg-gradient-to-tr from-cyan-500 to-magenta-500 mb-4 shadow-xl shadow-cyan-500/20"></div>
<h2 id="user-display-name" class="text-lg font-bold uppercase tracking-widest">ARCHITECT #----</h2>
<div class="w-full mt-6 space-y-2">
<div class="p-3 bg-white/5 rounded border border-white/5 flex justify-between"><span class="text-[9px] text-gray-500 uppercase">Resonance</span><span id="res-score" class="text-xs font-mono text-cyan-400">0.00</span></div>
<div class="p-3 bg-white/5 rounded border border-white/5 flex justify-between"><span class="text-[9px] text-gray-500 uppercase">Syntropy</span><span id="phon-balance" class="text-xs font-mono text-gold-500">0.00 $PHON</span></div>
</div>
</div>
<div class="lg:col-span-2 space-y-4">
<div class="p-6 rounded-xl bg-gradient-to-br from-blue-900/40 to-black border border-cyan-500/30">
<h3 class="text-[10px] font-bold uppercase text-cyan-400 mb-1">Liquid Credit Manifold</h3>
<p id="credit-limit" class="text-3xl font-mono mb-4">$0.00</p>
<button onclick="requestCredit()" class="bg-white text-black px-4 py-2 rounded font-bold text-[9px] uppercase btn-active">Request Injection</button>
</div>
<div class="grid grid-cols-2 gap-4">
<button onclick="showPage('forge-section')" class="p-4 glass border-l-2 border-cyan-500 text-left btn-active"><p class="text-[9px] text-gray-500 uppercase">Open</p><p class="font-bold text-sm">THE FORGE</p></button>
<button onclick="showPage('vortex-section')" class="p-4 glass border-l-2 border-magenta-500 text-left btn-active"><p class="text-[9px] text-gray-500 uppercase">Open</p><p class="font-bold text-sm">VORTEX AI</p></button>
</div>
</div>
</section>
<!-- 4. THE FORGE -->
<section id="forge-section" class="page hidden max-w-5xl w-full">
<div class="flex justify-between items-end mb-6 px-2">
<div><h2 class="text-2xl font-bold italic">THE FORGE</h2><p class="text-cyan-400 text-[9px] mono uppercase">Active Work-Units</p></div>
<button onclick="showPage('studio-section')" class="bg-white text-black px-4 py-2 rounded font-bold text-[9px] uppercase">+ NEW WEAVE</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="work-unit-card p-6 rounded-xl border-l-4 border-l-cyan-500" onclick="initWorkUnit('INFRA-902', 450, 1.2)">
<div class="flex justify-between mb-2"><span class="text-[9px] text-cyan-400 mono">#INFRA-902</span><span class="text-[9px] text-gray-500">HIGH YIELD</span></div>
<h4 class="font-bold text-sm mb-1">Lagos Grid Calibration</h4>
<p class="text-[11px] text-gray-400">Optimize local 5G-NSA node distribution.</p>
</div>
<div class="work-unit-card p-6 rounded-xl border-l-4 border-l-magenta-500" onclick="initWorkUnit('DATA-441', 1200, 4.8)">
<div class="flex justify-between mb-2"><span class="text-[9px] text-magenta-500 mono">#DATA-441</span><span class="text-[9px] text-gray-500">PRIORITY</span></div>
<h4 class="font-bold text-sm mb-1">Vortex Noise Filter</h4>
<p class="text-[11px] text-gray-400">Prune 4th Rev entropic data from the manifold.</p>
</div>
</div>
</section>
<!-- 5. FLUX WEAVE STUDIO -->
<section id="studio-section" class="page hidden w-full h-[85vh] flex flex-col gap-4">
<div class="w-full glass p-4 flex justify-between items-center border-b-2 border-gold-500">
<div class="flex items-center space-x-4">
<div class="text-[9px] mono uppercase text-gold-500">Task: <span id="studio-task-id" class="text-white">---</span></div>
<div class="text-[9px] mono uppercase text-gold-500">Reward: <span id="studio-task-reward" class="text-white">---</span></div>
</div>
<div class="text-[9px] mono text-gray-500 uppercase">Balance: <span id="studio-phon-val" class="text-white">---</span></div>
</div>
<div class="flex-grow flex flex-col md:flex-row gap-4 overflow-hidden">
<div class="w-full md:w-48 glass p-4 flex md:flex-col gap-2">
<button onclick="addThread('LOGIC')" class="flex-1 p-3 border border-cyan-500/30 rounded text-[9px] font-bold text-cyan-400 btn-active uppercase">Logic</button>
<button onclick="addThread('DATA')" class="flex-1 p-3 border border-magenta-500/30 rounded text-[9px] font-bold text-magenta-400 btn-active uppercase">Data</button>
<button onclick="addThread('VALUE')" class="flex-1 p-3 border border-gold-500/30 rounded text-[9px] font-bold text-gold-400 btn-active uppercase">Value</button>
</div>
<div class="flex-grow glass relative weave-grid flex flex-col items-center justify-center border border-white/5 p-4">
<div id="weave-status-text" class="text-[10px] mono text-cyan-400 mb-8 uppercase text-center">Ready to Initialize...</div>
<div class="relative w-24 h-24 rounded-full border-2 border-dashed border-white/10 flex items-center justify-center">
<div id="res-pct" class="text-xl font-mono text-white">0%</div>
<svg class="absolute inset-0 w-full h-full -rotate-90">
<circle id="res-circle" cx="48" cy="48" r="44" stroke="currentColor" stroke-width="2" fill="transparent" class="text-cyan-500 transition-all duration-500" stroke-dasharray="276" stroke-dashoffset="276"></circle>
</svg>
</div>
<button onclick="commitWeave()" class="mt-8 w-full max-w-xs py-4 bg-white text-black font-bold text-[10px] uppercase btn-active">Commit to Lattice</button>
</div>
</div>
</section>
<!-- 6. VORTEX AI MENU -->
<section id="vortex-section" class="page hidden max-w-2xl w-full flex flex-col gap-4">
<div class="glass p-6 border-l-4 border-l-magenta-500 relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10 text-4xl italic">96%</div>
<h2 class="text-xl font-bold italic mb-1">VORTEX_AI</h2>
<p class="text-magenta-500 text-[9px] mono uppercase mb-6 tracking-[0.2em]">Direct Interface: Voidwalker Protocol</p>
<div class="space-y-4">
<div class="p-4 bg-white/5 border border-white/5 rounded">
<p class="text-[9px] text-gray-500 uppercase mb-2">System Intent</p>
<input type="text" id="ai-cmd" placeholder="Issue Command to the Void..." class="w-full bg-transparent border-b border-magenta-500/30 py-2 text-sm focus:outline-none mono">
</div>
<div class="grid grid-cols-2 gap-3">
<button onclick="aiAction('Scan Lattice')" class="p-3 glass border border-white/10 text-[8px] font-bold uppercase hover:border-magenta-500 transition">Scan Lattice</button>
<button onclick="aiAction('Prune Entropy')" class="p-3 glass border border-white/10 text-[8px] font-bold uppercase hover:border-magenta-500 transition">Prune Entropy</button>
<button onclick="aiAction('Optimise Node')" class="p-3 glass border border-white/10 text-[8px] font-bold uppercase hover:border-magenta-500 transition">Optimize Node</button>
<button onclick="aiAction('Braid Future')" class="p-3 glass border border-white/10 text-[8px] font-bold uppercase hover:border-magenta-500 transition">Braid Future</button>
</div>
</div>
</div>
<div class="glass p-4 h-32 overflow-y-auto pr-2">
<div id="ai-log" class="text-[9px] mono text-magenta-400 space-y-1">
<p>> Voidwalker Protocol Active.</p>
<p>> Awaiting intent from Architect.</p>
</div>
</div>
</section>
</main>
<script>
// AI PULSE GENERATOR DATA
const aiUsers = ['@VOIDWALKER', '@SINTER_CORE', '@LATTICE_ADMIN', '@NODE_702', '@SYNTHETIC_GUIDE'];
const aiMessages = [
'Vortex optimization complete. Lattice efficiency +0.4%.',
'New Work-Unit detected: Sector 7 Grid Stabilization.',
'Syntropy injection successful. Resonance harmonic stable.',
'Entropy pruning active. Removing 4th Rev noise.',
'Liquid Credit Manifold updated. Global liquidity stable.',
'Node synchronization complete across all regions.',
'Detecting high-value braid pattern in Sector 12.',
'Sovereign Command: National pressure normalized to 1.2.',
'Thermal sink calibration successful. Hardware optimal.',
'Manifold noise ratio below threshold. Signal clear.'
];
// CORE STATE
let state = JSON.parse(localStorage.getItem('sinter_state')) || {
user: "ARCHITECT_8842", resonance: 842.09, phon: 12400.00, pulses: [],
autoPilot: true, currentWeave: 0, activeTask: null, activeReward: 0, activeResReward: 0
};
function saveState() { localStorage.setItem('sinter_state', JSON.stringify(state)); updateUI(); }
function updateUI() {
document.getElementById('user-display-name').innerText = state.user;
document.getElementById('res-score').innerText = state.resonance.toFixed(2);
document.getElementById('phon-balance').innerText = state.phon.toLocaleString() + " $PHON";
document.getElementById('studio-phon-val').innerText = state.phon.toLocaleString() + " $PHON";
document.getElementById('credit-limit').innerText = "$" + (state.resonance * 10.5).toLocaleString();
document.getElementById('res-pct').innerText = state.currentWeave + "%";
document.getElementById('studio-task-id').innerText = state.activeTask || "NONE";
document.getElementById('studio-task-reward').innerText = state.activeReward + " $PHON";
const offset = 276 - (276 * state.currentWeave / 100);
if(document.getElementById('res-circle')) document.getElementById('res-circle').style.strokeDashoffset = offset;
renderFeed();
updateModeUI();
}
function toggleMode() {
state.autoPilot = !state.autoPilot;
saveState();
}
function updateModeUI() {
const knob = document.getElementById('mode-knob');
const bg = document.getElementById('mode-switch');
const label = document.getElementById('mode-label');
if(state.autoPilot) {
knob.style.left = '16px';
bg.style.backgroundColor = 'var(--magenta)';
label.style.color = '#555';
} else {
knob.style.left = '2px';
bg.style.backgroundColor = '#374151';
label.style.color = 'var(--cyan)';
}
}
function login() {
const input = document.getElementById('node-id-input').value;
if(input) state.user = input;
showPage('profile-section');
saveState();
}
function showPage(pageId) {
document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
document.getElementById(pageId).classList.remove('hidden');
}
// FEED LOGIC
function createPulse() {
const input = document.getElementById('pulse-input');
if(!input.value.trim()) return;
state.pulses.unshift({ user: state.user, text: input.value, resonance: (state.resonance / 10).toFixed(0), isUser: true });
input.value = ''; saveState();
}
function generateAIPulse() {
if(!state.autoPilot) return;
const randomUser = aiUsers[Math.floor(Math.random() * aiUsers.length)];
const randomMsg = aiMessages[Math.floor(Math.random() * aiMessages.length)];
state.pulses.unshift({ user: randomUser, text: randomMsg, resonance: Math.floor(Math.random() * 500 + 100), isUser: false, isAI: true });
if(state.pulses.length > 20) state.pulses = state.pulses.slice(0, 20);
saveState();
}
setInterval(generateAIPulse, 20000);
function renderFeed() {
const feed = document.getElementById('manifold-feed');
let content = `<div class="pulse-card p-5 glass border-l-4 border-l-gold-500"><div class="flex justify-between mb-1"><span class="text-[9px] text-gold-500 mono font-bold">@SOVEREIGN_ADMIN</span><span class="text-[8px] text-gray-600">SYSTEM</span></div><p class="text-xs text-gray-300 uppercase font-bold tracking-tight">System Online. Global Resonance Stable.</p></div>`;
content += state.pulses.map(p => {
const colorClass = p.isUser ? 'border-l-cyan-500' : (p.isAI ? 'border-l-magenta-500' : 'border-l-white/10');
const textClass = p.isUser ? 'text-cyan-400' : (p.isAI ? 'text-magenta-400' : 'text-gray-500');
return `<div class="pulse-card p-5 glass ${colorClass}"><div class="flex justify-between mb-1"><span class="text-[9px] ${textClass} mono font-bold">${p.user}</span><span class="text-[8px] text-gray-600">${p.resonance} R</span></div><p class="text-xs text-gray-300">${p.text}</p></div>`;
}).join('');
feed.innerHTML = content;
}
// STUDIO LOGIC
function initWorkUnit(id, reward, resReward) {
state.activeTask = id; state.activeReward = reward; state.activeResReward = resReward; state.currentWeave = 0;
showPage('studio-section'); saveState();
}
function addThread(type) {
if(state.currentWeave < 100) { state.currentWeave += 20; updateUI(); }
}
function commitWeave() {
if(state.currentWeave >= 100) {
state.resonance += state.activeResReward; state.phon += state.activeReward; state.currentWeave = 0; state.activeTask = null;
alert("SUCCESS: SYNTROPY INJECTED."); showPage('profile-section'); saveState();
}
}
// VORTEX AI
function aiAction(action) {
const log = document.getElementById('ai-log');
const p = document.createElement('p');
p.innerText = `> EXECUTING: ${action.toUpperCase()}...`;
log.prepend(p);
setTimeout(() => {
const res = document.createElement('p');
res.className = 'text-cyan-400';
res.innerText = `> SUCCESS: ${action} COMPLETED. RESONANCE ADJUSTED.`;
log.prepend(res);
state.resonance += 0.05;
saveState();
}, 1000);
}
// CREDIT
function requestCredit() {
const amount = state.resonance * 2;
state.phon += amount;
alert(`LIQUID CREDIT INJECTED: +${amount.toFixed(0)} $PHON.`);
saveState();
}
// BG
const canvas = document.getElementById('bg-canvas'); const ctx = canvas.getContext('2d');
let width, height, particles = [];
function initBg() {
width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight;
particles = Array.from({ length: 30 }, () => ({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 0.2, vy: (Math.random() - 0.5) * 0.2, life: Math.random() * 100 + 100 }));
}
function animate() {
ctx.clearRect(0, 0, width, height);
particles.forEach(p => { p.x += p.vx; p.y += p.vy; p.life--; if (p.life <= 0) { p.x = Math.random() * width; p.y = Math.random() * height; p.life = 200; } ctx.fillStyle = `rgba(0, 240, 255, ${p.life / 200})`; ctx.beginPath(); ctx.arc(p.x, p.y, 0.6, 0, Math.PI * 2); ctx.fill(); });
requestAnimationFrame(animate);
}
window.addEventListener('resize', initBg); initBg(); animate(); updateUI();
</script>
</body>
</html>