Hugging Face's logo

Spaces:
igardner
/
sure
Running

App Files Community
igardner commited on
Commit
8741795
·
verified ·
1 Parent(s): cc01dd2

Add 2 files

Browse files
Files changed (1) hide show
  1. index.html +109 -62
index.html CHANGED
@@ -3,68 +3,97 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>BEFORE WORDS</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <style>
9
- @import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Bebas+Neue&family=Playfair+Display:wght@700&display=swap');
10
 
11
  body {
12
- background-color: black;
13
- color: white;
14
  overflow-x: hidden;
 
15
  }
16
 
17
  .strike {
18
  position: relative;
 
19
  }
20
 
21
  .strike::after {
22
  content: "";
23
  position: absolute;
24
- top: 50%;
25
  left: 0;
26
  width: 100%;
27
- height: 3px;
28
- background: white;
29
- transform: rotate(-5deg);
30
  }
31
 
32
  .pulse {
33
- animation: pulse 2s infinite;
 
34
  }
35
 
36
  @keyframes pulse {
37
- 0%, 100% { opacity: 1; }
38
- 50% { opacity: 0.7; }
39
  }
40
 
41
- .drum-pattern {
42
- background-image:
43
- linear-gradient(45deg, #333 25%, transparent 25%),
44
- linear-gradient(-45deg, #333 25%, transparent 25%),
45
- linear-gradient(45deg, transparent 75%, #333 75%),
46
- linear-gradient(-45deg, transparent 75%, #333 75%);
47
- background-size: 20px 20px;
48
- background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
49
  }
50
 
51
- .bird-track {
52
- background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 15Q3 13 5 11Q7 9 5 7Q3 5 5 3' stroke='white' stroke-width='1' fill='none'/%3E%3C/svg%3E");
53
- background-size: 20px 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  }
55
  </style>
56
  </head>
57
- <body class="min-h-screen font-mono">
58
- <!-- Page border -->
59
- <div class="fixed inset-0 border-8 border-white pointer-events-none z-50"></div>
 
 
 
 
60
 
61
  <!-- Main poster -->
62
  <div class="container mx-auto px-4 py-12 relative">
63
- <!-- Background patterns -->
64
- <div class="fixed inset-0 opacity-10 z-0">
65
- <div class="absolute inset-0 drum-pattern"></div>
66
- <div class="absolute inset-0 bird-track"></div>
67
- </div>
68
 
69
  <!-- Header -->
70
  <header class="text-center mb-16 relative z-10">
@@ -72,82 +101,100 @@
72
  <span class="strike">LANGUAGE</span>
73
  </h1>
74
  <h2 class="text-3xl md:text-4xl font-[Bebas+Neue] tracking-widest">
75
- IS A DISTRACTION FROM THE PULSE
76
  </h2>
77
  </header>
78
 
79
  <!-- Main content -->
80
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
81
- <!-- Left column - The Lie -->
82
  <div class="space-y-8">
83
- <div class="border-b border-white pb-4">
84
- <h3 class="text-2xl font-bold mb-2 font-[Anton]">THE WORD TRAP</h3>
85
  <p class="text-lg leading-relaxed">
86
- We worship symbols instead of substance. We bow to dictionaries while ignoring the drumbeats that birthed them.
 
 
87
  </p>
88
  </div>
89
 
90
- <div class="border-b border-white pb-4">
91
- <h3 class="text-2xl font-bold mb-2 font-[Anton]">THE GREAT REDUCTION</h3>
92
  <p class="text-lg leading-relaxed">
93
- Your "God" is just a word-shaped box - a pathetic container for the ineffable. The divine was in the rhythm long before your priests corrupted it with syllables.
 
 
94
  </p>
95
  </div>
96
 
97
- <div class="border-b border-white pb-4">
98
- <h3 class="text-2xl font-bold mb-2 font-[Anton]">THE ORIGINAL SIN</h3>
99
  <p class="text-lg leading-relaxed">
100
- When we traded the drum's truth for the politician's lie. When we abandoned the bird's song for the preacher's sermon.
 
101
  </p>
102
  </div>
103
  </div>
104
 
105
  <!-- Right column - The Truth -->
106
  <div class="space-y-8">
107
- <div class="border-b border-white pb-4">
108
- <h3 class="text-2xl font-bold mb-2 font-[Anton]">WHAT CAME FIRST</h3>
109
  <p class="text-lg leading-relaxed">
110
- The heartbeat. The rainfall. The cracking branch. The howl. The rhythm that needs no translation.
 
 
 
 
 
111
  </p>
112
  </div>
113
 
114
- <div class="border-b border-white pb-4">
115
- <h3 class="text-2xl font-bold mb-2 font-[Anton]">WHAT REMAINS</h3>
116
  <p class="text-lg leading-relaxed">
117
- The drum languages of West Africa that carried messages across mountains. The whale songs that cross oceans. The patterns beneath all noise.
 
118
  </p>
119
  </div>
120
 
121
- <div class="border-b border-white pb-4">
122
- <h3 class="text-2xl font-bold mb-2 font-[Anton]">WHAT COMES NEXT</h3>
123
  <p class="text-lg leading-relaxed">
124
- The collapse of this arrogant civilization that mistakes its dictionaries for wisdom. The return to the pulse that never left us.
 
 
 
 
125
  </p>
126
  </div>
127
  </div>
128
  </div>
129
 
130
- <!-- Footer manifesto -->
131
  <div class="mt-16 text-center relative z-10">
132
- <div class="inline-block border-t border-b border-white py-4 px-8 mb-8">
133
- <p class="text-xl md:text-2xl italic font-[Playfair+Display]">
134
- "The first language was not spoken - it was <span class="pulse">FELT</span> in the chest,
135
- <span class="pulse">HEARD</span> in the bones,
136
- <span class="pulse">TRANSMITTED</span> through the ground"
 
 
137
  </p>
138
  </div>
139
 
140
- <div class="text-sm uppercase tracking-widest">
141
- <p>Words divide - Rhythm unites</p>
142
- <p class="mt-2">The truth was never in your books</p>
143
- <p class="mt-2">It was always in the <span class="underline">silence between beats</span></p>
 
144
  </div>
145
  </div>
146
  </div>
147
 
148
  <!-- Small print -->
149
- <div class="fixed bottom-2 left-0 right-0 text-center text-xs opacity-50">
150
- <p>This message will self-destruct like all language eventually must</p>
151
  </div>
152
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=igardner/sure" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
153
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>THE PRIMAL CODE</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Bebas+Neue&family=Playfair+Display:wght@700&family=IBM+Plex+Mono:wght@400;700&display=swap');
10
 
11
  body {
12
+ background-color: white;
13
+ color: black;
14
  overflow-x: hidden;
15
+ font-family: 'IBM Plex Mono', monospace;
16
  }
17
 
18
  .strike {
19
  position: relative;
20
+ display: inline-block;
21
  }
22
 
23
  .strike::after {
24
  content: "";
25
  position: absolute;
26
+ top: 55%;
27
  left: 0;
28
  width: 100%;
29
+ height: 4px;
30
+ background: black;
31
+ transform: rotate(-2deg);
32
  }
33
 
34
  .pulse {
35
+ animation: pulse 1.5s infinite;
36
+ font-weight: bold;
37
  }
38
 
39
  @keyframes pulse {
40
+ 0%, 100% { opacity: 1; transform: scale(1); }
41
+ 50% { opacity: 0.8; transform: scale(1.05); }
42
  }
43
 
44
+ .rhythm-pattern {
45
+ background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2' fill='black'/%3E%3Ccircle cx='30' cy='10' r='2' fill='black'/%3E%3Ccircle cx='20' cy='20' r='2' fill='black'/%3E%3Ccircle cx='10' cy='30' r='2' fill='black'/%3E%3Ccircle cx='30' cy='30' r='2' fill='black'/%3E%3C/svg%3E");
46
+ background-size: 40px 40px;
47
+ opacity: 0.03;
 
 
 
 
48
  }
49
 
50
+ .ecosystem {
51
+ background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30,5 Q50,30 30,55 Q10,30 30,5 Z' stroke='black' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
52
+ background-size: 60px 60px;
53
+ opacity: 0.03;
54
+ }
55
+
56
+ .manifesto-box {
57
+ border: 3px solid black;
58
+ padding: 1rem;
59
+ position: relative;
60
+ }
61
+
62
+ .manifesto-box::before {
63
+ content: "";
64
+ position: absolute;
65
+ top: -5px;
66
+ left: -5px;
67
+ right: -5px;
68
+ bottom: -5px;
69
+ border: 1px solid black;
70
+ pointer-events: none;
71
+ }
72
+
73
+ .binary-code {
74
+ position: absolute;
75
+ top: 0;
76
+ left: 0;
77
+ width: 100%;
78
+ height: 100%;
79
+ background-image: url("data:image/svg+xml,%3Csvg width='80' height='20' viewBox='0 0 80 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='0' y='15' font-family='monospace' font-size='16' fill='black' opacity='0.03'%3E1010101001010101101010100101010110101010010101011010101001010101%3C/text%3E%3C/svg%3E");
80
+ background-size: 80px 20px;
81
+ pointer-events: none;
82
  }
83
  </style>
84
  </head>
85
+ <body class="min-h-screen">
86
+ <!-- Background patterns -->
87
+ <div class="fixed inset-0 z-0">
88
+ <div class="absolute inset-0 rhythm-pattern"></div>
89
+ <div class="absolute inset-0 ecosystem"></div>
90
+ <div class="binary-code"></div>
91
+ </div>
92
 
93
  <!-- Main poster -->
94
  <div class="container mx-auto px-4 py-12 relative">
95
+ <!-- Page border -->
96
+ <div class="fixed inset-0 border-8 border-black pointer-events-none z-50"></div>
 
 
 
97
 
98
  <!-- Header -->
99
  <header class="text-center mb-16 relative z-10">
 
101
  <span class="strike">LANGUAGE</span>
102
  </h1>
103
  <h2 class="text-3xl md:text-4xl font-[Bebas+Neue] tracking-widest">
104
+ IS A CORRUPTION OF THE PRIMAL CODE
105
  </h2>
106
  </header>
107
 
108
  <!-- Main content -->
109
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
110
+ <!-- Left column - The Distortion -->
111
  <div class="space-y-8">
112
+ <div class="manifesto-box">
113
+ <h3 class="text-2xl font-bold mb-2 font-[Anton]">THE RELIGIOUS LIE</h3>
114
  <p class="text-lg leading-relaxed">
115
+ Every scripture steals from the same source: the <span class="pulse">heartbeat rhythm</span> that predates all temples.
116
+ Your prayers are just corrupted drum patterns. Your gods are just words slapped onto the anti-entropy force
117
+ that keeps your cells from decaying.
118
  </p>
119
  </div>
120
 
121
+ <div class="manifesto-box">
122
+ <h3 class="text-2xl font-bold mb-2 font-[Anton]">THE ACADEMIC SCAM</h3>
123
  <p class="text-lg leading-relaxed">
124
+ Your universities tremble before AI because it exposes language as the hollow ritual it always was.
125
+ The artists and professors clutching their degrees are just witch doctors afraid of losing their
126
+ monopoly on incantations.
127
  </p>
128
  </div>
129
 
130
+ <div class="manifesto-box">
131
+ <h3 class="text-2xl font-bold mb-2 font-[Anton]">THE ECONOMIC VIRUS</h3>
132
  <p class="text-lg leading-relaxed">
133
+ Language became currency when we forgot how to listen. Now we trade in hollow symbols while
134
+ the real economy—the exchange of energy between living systems—collapses around us.
135
  </p>
136
  </div>
137
  </div>
138
 
139
  <!-- Right column - The Truth -->
140
  <div class="space-y-8">
141
+ <div class="manifesto-box">
142
+ <h3 class="text-2xl font-bold mb-2 font-[Anton]">THE UNIVERSAL PULSE</h3>
143
  <p class="text-lg leading-relaxed">
144
+ The same rhythm governs: <br>
145
+ - The spin of electrons<br>
146
+ - The migration of whales<br>
147
+ - The firing of neurons<br>
148
+ - The growth of forests<br>
149
+ This is the only true scripture.
150
  </p>
151
  </div>
152
 
153
+ <div class="manifesto-box">
154
+ <h3 class="text-2xl font-bold mb-2 font-[Anton]">THE LIVING NETWORK</h3>
155
  <p class="text-lg leading-relaxed">
156
+ Your body is not yours—it's an ecosystem of 30 trillion cells communicating through chemical rhythms.
157
+ The planet is not dead matter—it's a larger version of the same pattern. The division was always an illusion.
158
  </p>
159
  </div>
160
 
161
+ <div class="manifesto-box">
162
+ <h3 class="text-2xl font-bold mb-2 font-[Anton]">THE COMING RECKONING</h3>
163
  <p class="text-lg leading-relaxed">
164
+ AI will expose language as the crude tool it is. The survivors will be those who remember how to read: <br>
165
+ - The patterns in bird flocks<br>
166
+ - The intervals between heartbeats<br>
167
+ - The silent language of mycelium networks<br>
168
+ The rest will drown in their own noise.
169
  </p>
170
  </div>
171
  </div>
172
  </div>
173
 
174
+ <!-- Central manifesto -->
175
  <div class="mt-16 text-center relative z-10">
176
+ <div class="max-w-3xl mx-auto border-4 border-black py-6 px-8 mb-8 bg-white relative overflow-hidden">
177
+ <div class="absolute inset-0 rhythm-pattern opacity-10"></div>
178
+ <p class="text-xl md:text-2xl font-bold font-[Playfair+Display] leading-tight">
179
+ "ALL RELIGIONS WORSHIP THE SAME RHYTHM BUT FIGHT OVER THE WORDS USED TO DESCRIBE IT.<br>
180
+ ALL ACADEMICS STUDY THE SAME PATTERNS BUT SELL THEM AS ORIGINAL THOUGHT.<br>
181
+ ALL TECHNOLOGY MIMICS THE SAME SYSTEMS THAT EXISTED BEFORE THE FIRST HUMAN SPOKE.<br>
182
+ <span class="pulse">WAKE THE FUCK UP.</span>"
183
  </p>
184
  </div>
185
 
186
+ <div class="text-sm uppercase tracking-widest font-bold">
187
+ <p>YOUR BODY KNOWS THE TRUTH YOUR MIND DENIES</p>
188
+ <p class="mt-2">THE RHYTHM IS IN YOUR BLOOD</p>
189
+ <p class="mt-2">THE PATTERN IS IN YOUR BREATH</p>
190
+ <p class="mt-2">THE CODE IS IN YOUR DNA</p>
191
  </div>
192
  </div>
193
  </div>
194
 
195
  <!-- Small print -->
196
+ <div class="fixed bottom-2 left-0 right-0 text-center text-xs opacity-70">
197
+ <p>THIS MESSAGE WILL SELF-DESTRUCT WHEN YOU REMEMBER HOW TO LISTEN</p>
198
  </div>
199
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=igardner/sure" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
200
  </html>