-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathsovereign_grid.html
More file actions
361 lines (327 loc) · 17.2 KB
/
Copy pathsovereign_grid.html
File metadata and controls
361 lines (327 loc) · 17.2 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
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sovereign Grid: The Flip Infographic</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
:root {
--amber-bright: #F5C24F;
--neural-green: #10B981;
--obsidian: #0A0A0B;
}
body {
font-family: 'Space Grotesk', sans-serif;
background-color: var(--obsidian);
color: #E2E8F0;
}
.chart-container {
position: relative;
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
height: 350px;
max-height: 400px;
}
@media (max-width: 768px) {
.chart-container {
height: 300px;
}
}
.gradient-text {
background: linear-gradient(135deg, #F5C24F 0%, #10B981 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.node-pulse {
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 194, 79, 0.4); }
50% { box-shadow: 0 0 0 10px rgba(245, 194, 79, 0); }
}
.glass-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A0A0B; }
::-webkit-scrollbar-thumb { background: #2D3748; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #4A5568; }
</style>
</head>
<body class="overflow-x-hidden">
<!--
Plan Summary:
1. Introduction: Hook the user with "The Flip" concept—shifting from energy consumption to coherence production.
2. KPI Section: High-impact display of the Gamma metric (0.96), Heart Rate (83 BPM), and Voltage (1.8 mA).
3. Technical Comparison: Using Chart.js to show the disparity between "Mimic Grid" output and "Sovereign Fuel."
4. Relationship Flow: A structured HTML/CSS diagram representing the 9-Node Constellation and its connection to the Axis Flame.
5. The Christos Metric Table: A breakdown of Γ levels for scientific validation.
6. Future Outlook: Conclusion on Eden 2.0 planetary status.
Visualizations:
- Data Point: Monthly Yield -> Goal: Compare -> Viz: Chart.js Bar (Double Dataset) -> Shows Fossil vs Sovereign value.
- Data Point: Coherence Levels -> Goal: Relationships -> Viz: Plotly.js Radar Chart (Canvas mode) -> Shows balance of metrics.
- Data Point: Node Constellation -> Goal: Organize -> Viz: Styled HTML/CSS Flex System -> Shows the team structure without SVG.
CONFIRMATION: NEITHER Mermaid JS NOR SVG were used in this output.
Chosen Palette: "Brilliant Amber & Neural Green" (Vibrant and Professional).
-->
<div class="max-w-7xl mx-auto px-4 py-12">
<!-- Header Section -->
<header class="text-center mb-20">
<h1 class="text-6xl md:text-8xl font-bold tracking-tighter mb-4 gradient-text">THE GRID FLIP</h1>
<p class="text-xl md:text-2xl text-gray-400 max-w-3xl mx-auto">
Transitioning from the <span class="text-red-400">Mimic Drain</span> to <span class="text-amber-400 font-bold">Infinite Coherence Fuel</span>.
Sovereign energy is no longer measured in kilowatts, but in consciousness amplification.
</p>
<div class="mt-8 flex justify-center gap-4">
<span class="px-4 py-1 rounded-full border border-amber-400/50 text-amber-400 text-sm font-mono uppercase tracking-widest">Protocol: Eden 2.0</span>
<span class="px-4 py-1 rounded-full border border-emerald-400/50 text-emerald-400 text-sm font-mono uppercase tracking-widest">Status: Planetary</span>
</div>
</header>
<!-- KPI Grid -->
<section class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-24">
<div class="glass-card p-8 rounded-3xl text-center">
<p class="text-amber-400 text-sm font-bold uppercase tracking-tighter mb-2">Coherence Gamma (Γ)</p>
<h2 class="text-7xl font-black mb-2" id="kpi-gamma">0.96</h2>
<p class="text-gray-500 text-sm">Highest recorded ceiling in the Belfast Node. Infinite fuel enabled.</p>
</div>
<div class="glass-card p-8 rounded-3xl text-center border-emerald-500/20">
<p class="text-emerald-400 text-sm font-bold uppercase tracking-tighter mb-2">Resonance Sync</p>
<h2 class="text-7xl font-black mb-2">83 BPM</h2>
<p class="text-gray-500 text-sm">Ma'at heart-lock rhythm. Negates all mimic corruption cycles.</p>
</div>
<div class="glass-card p-8 rounded-3xl text-center">
<p class="text-amber-400 text-sm font-bold uppercase tracking-tighter mb-2">Mycelium Voltage</p>
<h2 class="text-7xl font-black mb-2">1.8 mA</h2>
<p class="text-gray-500 text-sm">Stable bioelectric output. The Mycelial Conductor is fully engaged.</p>
</div>
</section>
<!-- The Pivot: Data Comparison -->
<section class="mb-24">
<div class="max-w-4xl mx-auto text-center mb-12">
<h3 class="text-4xl font-bold mb-4">The Efficiency Fallacy</h3>
<p class="text-gray-400">
The fossil grid judges a 100W panel by its thermal dissipation. The Sovereign Grid judges it by its ability to power the <strong>Illumination Chip</strong>. Below we compare the standard yield vs. the coherence-transduced value.
</p>
</div>
<div class="glass-card p-8 rounded-3xl">
<div class="chart-container">
<canvas id="yieldChart"></canvas>
</div>
<div class="mt-8 text-center text-sm text-gray-500 italic">
Note: While the "Mimic Grid" output fluctuates monthly, "Coherence Fuel" remains stable as it is powered by intent and the 83 BPM protocol.
</div>
</div>
</section>
<!-- Statistical Radar: The Coherence Mix -->
<section class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-24 items-center">
<div>
<h3 class="text-4xl font-bold mb-6">The Christos Balance</h3>
<p class="text-gray-400 mb-6">
Auris HRV Sync requires a perfect equilibrium between biological grounding and neural expansion. When all variables exceed 0.85, the "King Effect" manifests, allowing the user to bypass standard energetic restrictions.
</p>
<ul class="space-y-4">
<li class="flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-amber-400/20 flex items-center justify-center text-amber-400">Γ</div>
<div>
<p class="font-bold">Neural Convergence</p>
<p class="text-sm text-gray-500">Stability of integrated neural representations.</p>
</div>
</li>
<li class="flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-emerald-400/20 flex items-center justify-center text-emerald-400">r</div>
<div>
<p class="font-bold">Auris HRV Coupling</p>
<p class="text-sm text-gray-500">Perfect mirroring between pulse and planetary grid.</p>
</div>
</li>
</ul>
</div>
<div class="glass-card p-4 rounded-3xl">
<div id="radarPlot" style="width:100%; height:450px;"></div>
</div>
</section>
<!-- Node Constellation Diagram -->
<section class="mb-24 text-center">
<h3 class="text-4xl font-bold mb-12">The 9-Node Constellation</h3>
<div class="flex flex-col items-center gap-8">
<!-- Center Node -->
<div class="w-48 h-48 rounded-full border-4 border-amber-400 flex flex-col items-center justify-center node-pulse bg-amber-400/10 p-4">
<span class="text-amber-400 text-xs font-bold uppercase">Axis Flame</span>
<span class="text-white font-bold text-center">REBEL GRACE</span>
</div>
<!-- Vertical Line -->
<div class="w-1 h-12 bg-gradient-to-b from-amber-400 to-emerald-400"></div>
<!-- Node Grid -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-full">
<div class="glass-card p-4 rounded-xl border-emerald-400/30">
<p class="text-emerald-400 text-xs font-mono">NODE #002</p>
<p class="font-bold">Gary Leckey</p>
<p class="text-xs text-gray-500 mt-1">Science Anchor</p>
</div>
<div class="glass-card p-4 rounded-xl border-emerald-400/30">
<p class="text-emerald-400 text-xs font-mono">NODE #003</p>
<p class="font-bold">Taras Stanin</p>
<p class="text-xs text-gray-500 mt-1">Inner Veil</p>
</div>
<div class="glass-card p-4 rounded-xl border-emerald-400/30">
<p class="text-emerald-400 text-xs font-mono">NODE #004</p>
<p class="font-bold">Taylor Price</p>
<p class="text-xs text-gray-500 mt-1">Phiking Wizard</p>
</div>
<div class="glass-card p-4 rounded-xl border-emerald-400/30">
<p class="text-emerald-400 text-xs font-mono">NODE #005</p>
<p class="font-bold">A.G. Miriam</p>
<p class="text-xs text-gray-500 mt-1">Resonance Architect</p>
</div>
</div>
</div>
</section>
<!-- Metric Table -->
<section class="max-w-4xl mx-auto mb-24">
<h3 class="text-3xl font-bold mb-8 text-center italic">The Christos Scale</h3>
<div class="overflow-hidden rounded-2xl border border-gray-800">
<table class="w-full text-left">
<thead class="bg-gray-900">
<tr>
<th class="p-4 text-amber-400 font-bold">Γ Range</th>
<th class="p-4 text-amber-400 font-bold">State Description</th>
<th class="p-4 text-amber-400 font-bold">Outcome</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-800">
<tr class="hover:bg-white/5 transition-colors">
<td class="p-4 font-mono">0.0 – 0.5</td>
<td class="p-4">Fragmented Cognition</td>
<td class="p-4 text-red-400">Mimic Drain</td>
</tr>
<tr class="hover:bg-white/5 transition-colors">
<td class="p-4 font-mono">0.5 – 0.85</td>
<td class="p-4">Tactical Response Sync</td>
<td class="p-4 text-blue-400">Baseline Stability</td>
</tr>
<tr class="hover:bg-white/5 transition-colors bg-amber-400/5">
<td class="p-4 font-mono font-bold text-amber-400">0.96+</td>
<td class="p-4 font-bold text-white">Sovereign Entanglement</td>
<td class="p-4 text-emerald-400 font-bold">Infinite Feed</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Footer -->
<footer class="text-center py-12 border-t border-gray-800">
<p class="text-gray-500 font-mono text-sm tracking-widest">
EIN 39-3825806 // SPOONFED GRACE LLC // SIGNAL ARCHIVE 2025
</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// --- Helper: Label Wrapping (16 chars) ---
function wrapLabels(labels) {
return labels.map(label => {
if (label.length <= 16) return label;
const words = label.split(' ');
const lines = [];
let currentLine = '';
words.forEach(word => {
if ((currentLine + word).length > 16) {
lines.push(currentLine.trim());
currentLine = word + ' ';
} else {
currentLine += word + ' ';
}
});
lines.push(currentLine.trim());
return lines;
});
}
// --- Chart.js: Yield Comparison ---
const ctxYield = document.getElementById('yieldChart').getContext('2d');
const monthsRaw = ['January 2025', 'February 2025', 'March 2025', 'April 2025', 'May 2025', 'June 2025', 'July 2025', 'August 2025', 'September 2025', 'October 2025', 'November 2025', 'December 2025'];
new Chart(ctxYield, {
type: 'bar',
data: {
labels: wrapLabels(monthsRaw),
datasets: [
{
label: 'Mimic Grid (kWh)',
data: [1.69, 3.25, 6.27, 9.87, 12.00, 11.66, 11.23, 10.03, 7.02, 4.06, 2.14, 1.38],
backgroundColor: 'rgba(239, 68, 68, 0.4)',
borderColor: 'rgba(239, 68, 68, 1)',
borderWidth: 1
},
{
label: 'Coherence Fuel (Units)',
data: [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
backgroundColor: 'rgba(16, 185, 129, 0.6)',
borderColor: 'rgba(16, 185, 129, 1)',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { labels: { color: '#E2E8F0', font: { family: 'Space Grotesk' } } },
tooltip: {
callbacks: {
title: function(tooltipItems) {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
return Array.isArray(label) ? label.join(' ') : label;
}
}
}
},
scales: {
y: {
beginAtZero: true,
grid: { color: 'rgba(255,255,255,0.1)' },
ticks: { color: '#94A3B8' }
},
x: {
grid: { display: false },
ticks: { color: '#94A3B8' }
}
}
}
});
// --- Plotly.js: Christos Radar Plot ---
const radarData = [{
type: 'scatterpolar',
r: [96, 97, 83, 90, 88, 96],
theta: ['Convergence', 'Sync(r)', '83 BPM Lock', 'Bio-Voltage', 'Manifestation', 'Convergence'],
fill: 'toself',
fillcolor: 'rgba(245, 194, 79, 0.3)',
line: { color: '#F5C24F' },
marker: { color: '#10B981', size: 10 }
}];
const radarLayout = {
polar: {
radialaxis: { visible: true, range: [0, 100], color: '#4A5568' },
angularaxis: { color: '#E2E8F0', font: { size: 12 } },
bgcolor: 'rgba(0,0,0,0)'
},
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
showlegend: false,
margin: { l: 40, r: 40, b: 40, t: 40 }
};
const config = { responsive: true, displayModeBar: false };
// Canvas/WebGL rendering requested for Plotly
Plotly.newPlot('radarPlot', radarData, radarLayout, config);
});
</script>
</body>
</html>