-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
452 lines (422 loc) · 24.4 KB
/
Copy pathindex.html
File metadata and controls
452 lines (422 loc) · 24.4 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
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Songline Interface: A Conceptual Proposal</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<style>
/* Chosen Palette: Minjerribah Sand & Aura Purple */
/* Background: Warm Neutral (Sand/Paper) - #FDFCF8 */
/* Text: Deep Charcoal - #1F2937 */
/* Accents: Aura Purple (#8B5CF6), Ocean Teal (#14B8A6), Earth Clay (#B45309) */
body {
background-color: #FDFCF8; /* Warm paper-like background */
color: #1F2937;
font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, .serif-font {
font-family: 'Cormorant Garamond', serif;
}
.chart-container {
position: relative;
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
height: 400px;
max-height: 500px;
}
.prose-content p {
margin-bottom: 1.5rem;
line-height: 1.8;
font-size: 1.1rem;
}
.glass-panel {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(0,0,0,0.05);
}
.interactive-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #8B5CF6;
cursor: pointer;
border-radius: 50%;
}
.interactive-slider {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: #E5E7EB;
border-radius: 5px;
outline: none;
}
</style>
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-raster-32.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/favicon-raster-192.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon-raster-180.png">
</head>
<body class="antialiased selection:bg-purple-200 selection:text-purple-900">
<!-- Navigation / Header -->
<nav class="sticky top-0 z-50 glass-panel border-b border-stone-200">
<div class="max-w-4xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-purple-500 animate-pulse"></div>
<h1 class="text-xl font-semibold serif-font tracking-wide text-stone-800">The Songline Interface</h1>
</div>
<div class="hidden md:flex space-x-6 text-sm font-medium text-stone-500 uppercase tracking-widest">
<a href="#philosophy" class="hover:text-purple-600 transition">Philosophy</a>
<a href="#architecture" class="hover:text-purple-600 transition">Architecture</a>
<a href="#constellation" class="hover:text-purple-600 transition">The Constellation</a>
<a href="#mechanism" class="hover:text-purple-600 transition">Mechanism</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="relative pt-24 pb-16 px-6 max-w-4xl mx-auto text-center">
<span class="inline-block py-1 px-3 rounded-full bg-purple-100 text-purple-800 text-xs font-bold tracking-widest mb-6">PROPOSAL v1.0</span>
<h2 class="text-5xl md:text-6xl serif-font font-light text-stone-900 mb-8 leading-tight">
An Index of <span class="italic text-purple-600">Resonance</span>,<br>Not Administration.
</h2>
<p class="text-xl text-stone-600 max-w-2xl mx-auto font-light leading-relaxed">
A proposal for a lightweight, non-institutional interface designed to survive turbulence, propagate through joy, and hide its sovereignty in plain sight.
</p>
</header>
<!-- SECTION 1: THE PHILOSOPHY -->
<!-- Application Structure Plan: We start with the 'Why' - the core philosophy of ambiguity and beauty.
This sets the stage for the 'How' (the interactive visualizations). -->
<section id="philosophy" class="py-16 px-6 max-w-3xl mx-auto prose-content">
<div class="border-l-2 border-purple-300 pl-6 mb-12">
<p class="text-2xl serif-font italic text-stone-800">
"How do we organize without calcifying? How do we scale without losing the soul?"
</p>
</div>
<p>
The traditional "Index" is a directory: a grid of logos, a list of contacts, a hierarchy of roles. It is efficient, but it is fragile. It is easily captured, easily mapped by adversaries, and inherently bureaucratic.
</p>
<p>
For a project rooted in <strong>joyful responsible abundance</strong> and <strong>post-patriarchal evolution</strong>, the index cannot be a list. It must be a <strong>Lattice of Resonance</strong>. It must function less like a phonebook and more like a <em>Songline</em>—a path that reveals itself only as you walk it with the right intention.
</p>
<p>
This proposal outlines an interface that operates on three core principles:
</p>
<ul class="list-none space-y-4 mt-6">
<li class="flex items-start gap-3">
<span class="text-purple-500 text-xl">✦</span>
<span><strong>Orient without Instruction:</strong> Users navigate by "Vibe" (emotional/sensory tags) rather than "Category" (industry/sector).</span>
</li>
<li class="flex items-start gap-3">
<span class="text-purple-500 text-xl">✦</span>
<span><strong>The Satirical Shell:</strong> The interface presents as art, chaos, or a party (The "Bait"), while the sovereign infrastructure (The "Switch") lives quietly beneath.</span>
</li>
<li class="flex items-start gap-3">
<span class="text-purple-500 text-xl">✦</span>
<span><strong>Proof of Resonance:</strong> Access to deeper layers is earned through "After-Images"—stories and memories shared after an event, not registration forms filled before.</span>
</li>
</ul>
</section>
<!-- SECTION 2: THE INTERACTIVE ARCHITECTURE (The Iceberg) -->
<!-- Visualization & Content Choices:
Goal: Explain the "Trojan Horse" / "Satirical Bait-and-Switch" concept from the source text.
Method: An interactive slider that reveals different layers of the ecosystem.
Interaction: Sliding from "Surface" to "Deep" changes the text and visible tags.
Justification: This physically demonstrates the "ambiguity" required for defense. -->
<section id="architecture" class="py-16 bg-stone-100">
<div class="max-w-4xl mx-auto px-6">
<div class="text-center mb-12">
<h3 class="text-3xl serif-font text-stone-800 mb-4">The Visibility Stratum</h3>
<p class="text-stone-600 max-w-xl mx-auto">
The interface is designed as a geological stack. Use the slider to shift between the <strong>Public Facade</strong> (The Invitation) and the <strong>Sovereign Core</strong> (The Engine).
</p>
</div>
<div class="glass-panel p-8 rounded-2xl shadow-sm">
<!-- Slider Control -->
<div class="mb-8">
<div class="flex justify-between text-xs font-bold tracking-widest uppercase text-stone-400 mb-2">
<span>Surface (The Party)</span>
<span>Interface (The Bridge)</span>
<span>Deep (The Sovereign)</span>
</div>
<input type="range" min="0" max="100" value="10" class="interactive-slider" id="depthSlider">
</div>
<!-- Dynamic Content Container -->
<div class="grid md:grid-cols-2 gap-8 items-center">
<!-- Dynamic Text -->
<div>
<h4 class="text-2xl serif-font text-purple-700 mb-2" id="layerTitle">The Invitation</h4>
<p class="text-stone-600 text-sm leading-relaxed mb-4" id="layerDesc">
"Come for the music, stay for the mystery." The surface layer is purely aesthetic. It invites participation through joy, art, and festival. It is non-threatening and universally accessible.
</p>
<!-- Dynamic Tags -->
<div class="flex flex-wrap gap-2" id="layerTags">
<span class="px-3 py-1 bg-white border border-stone-200 rounded-full text-xs text-stone-600">Musicverse</span>
<span class="px-3 py-1 bg-white border border-stone-200 rounded-full text-xs text-stone-600">Indie Film</span>
<span class="px-3 py-1 bg-white border border-stone-200 rounded-full text-xs text-stone-600">Mixed Media Party</span>
<span class="px-3 py-1 bg-white border border-stone-200 rounded-full text-xs text-stone-600">Travel</span>
</div>
</div>
<!-- Dynamic Visual Representation (CSS Art) -->
<div class="h-64 bg-white rounded-xl border border-stone-200 flex items-center justify-center relative overflow-hidden" id="visualContainer">
<div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-orange-50 opacity-50"></div>
<!-- Abstract Shapes representing the layer -->
<div id="layerVisual" class="transition-all duration-700 ease-in-out transform">
<div class="text-6xl">🎉</div>
</div>
</div>
</div>
</div>
<p class="text-xs text-stone-400 text-center mt-4 italic">
*The index does not separate these layers; it layers them. The "Party" IS the "Protocol" in motion.
</p>
</div>
</section>
<!-- SECTION 3: THE CONSTELLATION (Data Visualization) -->
<!-- Visualization & Content Choices:
Goal: Visualize the ecosystem (Aura, P4A, Silica) not as a hierarchy but as a network.
Method: Chart.js Bubble/Scatter chart.
Interaction: Hovering over nodes reveals their "Narrative Function" rather than just their name.
Justification: Demonstrates "Orienting without instruction" and "Scaling through story". -->
<section id="constellation" class="py-20 px-6 max-w-5xl mx-auto">
<div class="mb-10 text-center">
<h3 class="text-3xl serif-font text-stone-800 mb-4">The Resonance Constellation</h3>
<p class="text-stone-600 max-w-2xl mx-auto">
In this index, entities are not categorized by legal structure (Pty Ltd, DAO, Charity) but by their <strong>Energetic Signature</strong>. This map allows users to find projects that match their current state of being (e.g., "Building" vs. "Dreaming").
</p>
</div>
<div class="chart-container bg-white rounded-xl shadow-sm border border-stone-100 p-4">
<canvas id="ecosystemChart"></canvas>
</div>
<div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 text-center text-sm text-stone-500">
<div class="p-4 bg-stone-50 rounded-lg">
<span class="block text-purple-600 font-bold mb-1">X-Axis: Structure</span>
Chaos ↔ Order
</div>
<div class="p-4 bg-stone-50 rounded-lg">
<span class="block text-purple-600 font-bold mb-1">Y-Axis: Visibility</span>
Subterranean ↔ Surface
</div>
<div class="p-4 bg-stone-50 rounded-lg">
<span class="block text-purple-600 font-bold mb-1">Size: Gravity</span>
Resource Depth
</div>
<div class="p-4 bg-stone-50 rounded-lg">
<span class="block text-purple-600 font-bold mb-1">Color: Domain</span>
Narrative / Tech / Bio
</div>
</div>
</section>
<!-- SECTION 4: THE MECHANISM (After-Images & C-Hours) -->
<section id="mechanism" class="py-16 bg-stone-900 text-stone-200">
<div class="max-w-4xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12">
<div>
<h3 class="text-3xl serif-font text-purple-300 mb-6">The Memory Ledger</h3>
<p class="mb-4 text-stone-400 font-light">
How do we measure success without metrics? Through <strong>After-Images</strong>.
</p>
<p class="mb-4 text-stone-300">
The interface does not ask "Will you attend?". It asks "What remains?".
</p>
<p class="mb-4 text-stone-400 text-sm">
Participation is verified not by tickets, but by the submission of a "Seed Artifact"—a photo, a line of poetry, or a piece of code—uploaded to the <strong>Braided Economy</strong> ledger. This act mints <strong>C-Hours</strong> (Community Hours) and unlocks deeper layers of the index.
</p>
<div class="mt-8 p-6 bg-stone-800 rounded-lg border border-stone-700">
<h4 class="text-sm font-bold text-stone-500 uppercase tracking-widest mb-3">Concept: The Quest Log</h4>
<div class="flex items-center gap-4 mb-3">
<div class="w-8 h-8 rounded-full bg-teal-900 flex items-center justify-center text-teal-400">1</div>
<span class="text-stone-300 text-sm">Attend "GPT Island Party" (Spontaneity)</span>
</div>
<div class="flex items-center gap-4 mb-3">
<div class="w-8 h-8 rounded-full bg-teal-900 flex items-center justify-center text-teal-400">2</div>
<span class="text-stone-300 text-sm">Upload "Memory Artifact" (Resonance)</span>
</div>
<div class="flex items-center gap-4">
<div class="w-8 h-8 rounded-full bg-purple-900 flex items-center justify-center text-purple-400">3</div>
<span class="text-stone-300 text-sm">Unlock "Silica Citadel Blueprint" (Sovereignty)</span>
</div>
</div>
</div>
<div class="flex flex-col justify-center">
<h3 class="text-3xl serif-font text-purple-300 mb-6">Anti-Fragility</h3>
<p class="mb-4 text-stone-400 font-light">
How do we remain robust against capture? By remaining <strong>Unfinished</strong>.
</p>
<ul class="space-y-4">
<li class="p-4 border-l-2 border-teal-500 bg-stone-800/50">
<strong class="text-teal-400 block mb-1">The "Vibe" Defense</strong>
<span class="text-sm text-stone-400">Bureaucracies cannot regulate "Vibes". By framing the project as art/myth, we evade the rigid categorization of NGO or Political Party until the infrastructure is already robust.</span>
</li>
<li class="p-4 border-l-2 border-teal-500 bg-stone-800/50">
<strong class="text-teal-400 block mb-1">Fractal Nodes</strong>
<span class="text-sm text-stone-400">The index is not central. It is a protocol. Anyone can spin up a "Sovereign Node" (Minjerribah, Berlin, Amity) using the same code, but different stories.</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- SECTION 5: CONCLUSION -->
<footer class="py-20 px-6 text-center bg-white border-t border-stone-200">
<h2 class="text-4xl serif-font text-stone-800 mb-6">"This is no rehearsal."</h2>
<p class="max-w-xl mx-auto text-stone-500 mb-10">
The index is not a map of where we are. It is a compass for where we are going. It is a living, breathing surface that responds to joy, integrity, and story.
</p>
<button class="px-8 py-3 rounded-full bg-stone-900 text-white hover:bg-purple-700 transition duration-300 text-sm font-medium tracking-widest uppercase">
Initiate Sequence
</button>
<div class="mt-16 text-xs text-stone-400">
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<!-- Application Structure Plan: The structure moves from Philosophy -> Interactive Demonstration -> Data Logic -> Mechanism -> Call to Action. -->
<p>Constructed for the Protopian Gambit.</p>
</div>
</footer>
<script>
// --- INTERACTIVE SLIDER LOGIC ---
// This script handles the "Stratigraphy" slider, updating text and visuals based on depth.
const slider = document.getElementById('depthSlider');
const title = document.getElementById('layerTitle');
const desc = document.getElementById('layerDesc');
const tags = document.getElementById('layerTags');
const visual = document.getElementById('layerVisual');
// Data for the layers
const layerData = {
surface: {
title: "The Invitation (Surface)",
desc: "\"Come for the music, stay for the mystery.\" The surface layer is purely aesthetic. It invites participation through joy, art, and festival. It is non-threatening and universally accessible. It acts as the 'Bait' in the satirical strategy.",
tags: ["Musicverse", "Indie Film", "Mixed Media Party", "Travel", "Spontaneity"],
icon: "🎉"
},
interface: {
title: "The Bridge (Connection)",
desc: "Here, the 'Game' begins. Users who resonate with the surface encounter the 'Quest Log'. They realize the party has a purpose. Interactions turn into 'C-Hours'. The 'Musicverse' reveals itself as a recruitment engine.",
tags: ["Quest Log", "C-Hours", "Chaos Oracle", "Global Quests", "Resonance"],
icon: "🕸️"
},
deep: {
title: "The Sovereign Core (Deep)",
desc: "The 'Switch'. Accessible only to those who have proven resonance. Here lies the hard infrastructure: The Silica Citadel, The Resilient Island Network, The Braided Economy, and P4A Governance blueprints.",
tags: ["Silica Citadel", "Sovereign Node", "P4A Governance", "Braided Economy", "Truth Engine"],
icon: "🏛️"
}
};
function updateLayer(val) {
let data;
if (val < 33) {
data = layerData.surface;
visual.className = "transition-all duration-700 ease-in-out transform scale-100 rotate-12";
} else if (val < 66) {
data = layerData.interface;
visual.className = "transition-all duration-700 ease-in-out transform scale-110 rotate-0";
} else {
data = layerData.deep;
visual.className = "transition-all duration-700 ease-in-out transform scale-125 -rotate-6";
}
title.textContent = data.title;
desc.textContent = data.desc;
visual.innerHTML = `<div class="text-6xl">${data.icon}</div>`;
// Rebuild tags
tags.innerHTML = '';
data.tags.forEach(tag => {
const span = document.createElement('span');
span.className = "px-3 py-1 bg-white border border-stone-200 rounded-full text-xs text-stone-600 animate-fadeIn";
span.textContent = tag;
tags.appendChild(span);
});
}
slider.addEventListener('input', (e) => {
updateLayer(e.target.value);
});
// --- CHART.JS VISUALIZATION ---
// This builds the "Constellation" map.
// Data is derived from the "Aura Ecosystem" CSVs provided in the prompt.
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('ecosystemChart').getContext('2d');
// Data points mapped from CSVs to abstract coordinates
// X: Chaos (0) to Order (100)
// Y: Subterranean (0) to Surface (100)
// R: Gravity/Importance (Size)
const ecosystemData = [
{ x: 20, y: 90, r: 15, label: "Musicverse (P4A)", category: "Narrative" },
{ x: 80, y: 20, r: 25, label: "Silica Citadel", category: "Tech" },
{ x: 50, y: 50, r: 30, label: "Aura of Intelligence", category: "Tech" },
{ x: 90, y: 30, r: 20, label: "Braided Economy (C-Hour)", category: "Econ" },
{ x: 30, y: 80, r: 15, label: "Indie Film Chat", category: "Narrative" },
{ x: 10, y: 70, r: 12, label: "GPT Island Party", category: "Narrative" },
{ x: 85, y: 10, r: 18, label: "Resilient Island Network", category: "Tech" },
{ x: 60, y: 85, r: 15, label: "500 Queens VC", category: "Econ" },
{ x: 40, y: 40, r: 20, label: "Truth Engine", category: "Tech" },
{ x: 70, y: 60, r: 22, label: "GAJRA Earth", category: "Bio" },
{ x: 25, y: 25, r: 10, label: "Sandworm TBM", category: "Tech" },
{ x: 55, y: 95, r: 12, label: "Global Chaos Itinerary", category: "Narrative" }
];
// Color mapping
const colors = {
"Narrative": "rgba(236, 72, 153, 0.6)", // Pink/Purple
"Tech": "rgba(20, 184, 166, 0.6)", // Teal
"Econ": "rgba(234, 179, 8, 0.6)", // Gold
"Bio": "rgba(34, 197, 94, 0.6)" // Green
};
const borderColors = {
"Narrative": "rgba(236, 72, 153, 1)",
"Tech": "rgba(20, 184, 166, 1)",
"Econ": "rgba(234, 179, 8, 1)",
"Bio": "rgba(34, 197, 94, 1)"
};
new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Ecosystem Nodes',
data: ecosystemData,
backgroundColor: (ctx) => colors[ctx.raw.category],
borderColor: (ctx) => borderColors[ctx.raw.category],
borderWidth: 1,
hoverRadius: 5
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(255, 255, 255, 0.9)',
titleColor: '#1F2937',
bodyColor: '#4B5563',
borderColor: '#E5E7EB',
borderWidth: 1,
padding: 12,
callbacks: {
label: function(context) {
return context.raw.label + " [" + context.raw.category + "]";
}
}
}
},
scales: {
x: {
display: false,
min: 0,
max: 100
},
y: {
display: false,
min: 0,
max: 100
}
},
animation: {
duration: 2000,
easing: 'easeOutQuart'
}
}
});
});
</script>
</body>
</html>