Hugging Face's logo

Spaces:
GXSNetwork
/
sdgliv
Running

App Files Community
IAMOK1111 commited on
Commit
32bc5bb
·
verified ·
1 Parent(s): 97cbffa

can u make a seperate page for all hyperlinks

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. index.html +569 -18
  3. links.html +282 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Singularity Horizon Portal
3
- emoji: 🌖
4
- colorFrom: pink
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: Singularity Horizon Portal 🌌
3
+ colorFrom: yellow
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,570 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Singularity Horizon | Future Humanity Portal</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
16
+
17
+ body {
18
+ font-family: 'Space Grotesk', sans-serif;
19
+ background-color: #0a0a16;
20
+ color: #e0e0ff;
21
+ overflow-x: hidden;
22
+ }
23
+
24
+ .gradient-text {
25
+ background: linear-gradient(90deg, #3d8dff 0%, #8b5cf6 50%, #ec4899 100%);
26
+ -webkit-background-clip: text;
27
+ background-clip: text;
28
+ color: transparent;
29
+ }
30
+
31
+ .glow {
32
+ text-shadow: 0 0 15px rgba(61, 141, 255, 0.6);
33
+ }
34
+
35
+ .nav-link::after {
36
+ content: '';
37
+ display: block;
38
+ width: 0;
39
+ height: 2px;
40
+ background: linear-gradient(90deg, #3d8dff, #8b5cf6);
41
+ transition: width 0.3s;
42
+ }
43
+
44
+ .nav-link:hover::after {
45
+ width: 100%;
46
+ }
47
+
48
+ .futuristic-card {
49
+ backdrop-filter: blur(16px);
50
+ background: rgba(15, 23, 42, 0.7);
51
+ border: 1px solid rgba(255, 255, 255, 0.1);
52
+ transition: all 0.3s ease;
53
+ }
54
+
55
+ .futuristic-card:hover {
56
+ transform: translateY(-5px);
57
+ box-shadow: 0 10px 25px rgba(61, 141, 255, 0.2);
58
+ }
59
+
60
+ .timeline-item::before {
61
+ content: '';
62
+ position: absolute;
63
+ left: -24px;
64
+ top: 0;
65
+ width: 12px;
66
+ height: 12px;
67
+ border-radius: 50%;
68
+ background: linear-gradient(135deg, #3d8dff, #8b5cf6);
69
+ box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.7);
70
+ }
71
+
72
+ .scroll-indicator {
73
+ animation: bounce 2s infinite;
74
+ }
75
+
76
+ @keyframes bounce {
77
+ 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
78
+ 40% {transform: translateY(-20px);}
79
+ 60% {transform: translateY(-10px);}
80
+ }
81
+
82
+ .gradient-border {
83
+ position: relative;
84
+ }
85
+
86
+ .gradient-border::before {
87
+ content: '';
88
+ position: absolute;
89
+ top: -1px;
90
+ left: -1px;
91
+ right: -1px;
92
+ bottom: -1px;
93
+ border-radius: 0.5rem;
94
+ background: linear-gradient(90deg, #3d8dff, #8b5cf6, #ec4899);
95
+ z-index: -1;
96
+ opacity: 0.7;
97
+ }
98
+ </style>
99
+ </head>
100
+ <body class="antialiased">
101
+ <!-- Vanta.js Background -->
102
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
103
+
104
+ <!-- Navigation -->
105
+ <nav class="fixed w-full backdrop-blur-md bg-black/50 border-b border-white/10 z-50">
106
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
107
+ <div class="flex items-center justify-between h-16">
108
+ <div class="flex items-center">
109
+ <div class="flex-shrink-0 font-bold text-xl gradiant-text glow">
110
+ Singularity<span class="text-white">Horizon</span>
111
+ </div>
112
+ </div>
113
+ <div class="hidden md:block">
114
+ <div class="ml-10 flex items-center space-x-8">
115
+ <a href="#home" class="nav-link text-white hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
116
+ <a href="#vision" class="nav-link text-white hover:text-purple-300 px-3 py-2 rounded-md text-sm font-medium">Vision</a>
117
+ <a href="#technologies" class="nav-link text-white hover:text-pink-300 px-3 py-2 rounded-md text-sm font-medium">Technologies</a>
118
+ <a href="#timeline" class="nav-link text-white hover:text-indigo-300 px-3 py-2 rounded-md text-sm font-medium">Timeline</a>
119
+ <a href="#contact" class="nav-link text-white hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
120
+ <a href="links.html" class="nav-link text-white hover:text-green-300 px-3 py-2 rounded-md text-sm font-medium">Resources</a>
121
+ </div>
122
+ </div>
123
+ <div class="md:hidden">
124
+ <button id="mobile-menu-button" class="text-white hover:text-gray-300 focus:outline-none">
125
+ <i data-feather="menu"></i>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Mobile menu -->
132
+ <div id="mobile-menu" class="hidden md:hidden bg-black/90 border-t border-white/10">
133
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
134
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Home</a>
135
+ <a href="#vision" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Vision</a>
136
+ <a href="#technologies" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Technologies</a>
137
+ <a href="#timeline" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Timeline</a>
138
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Contact</a>
139
+ <a href="links.html" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Resources</a>
140
+ </div>
141
+ </div>
142
+ </nav>
143
+
144
+ <!-- Hero Section -->
145
+ <section id="home" class="min-h-screen flex items-center justify-center pt-16 px-4 sm:px-6 lg:px-8">
146
+ <div class="max-w-6xl mx-auto text-center">
147
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
148
+ <span class="gradient-text glow">The Future</span>
149
+ <span class="text-white">of Humanity</span>
150
+ </h1>
151
+ <p class="text-xl md:text-2xl text-white/90 max-w-3xl mx-auto mb-12">
152
+ Exploring the frontiers of technological singularity and its transformative impact on civilization and the cosmos.
153
+ </p>
154
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
155
+ <a href="#vision" class="px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full font-medium text-white hover:opacity-90 transition duration-300 shadow-lg">
156
+ Explore the Vision
157
+ </a>
158
+ <a href="#contact" class="px-8 py-3 border border-white/20 rounded-full font-medium text-white hover:bg-white/10 transition duration-300">
159
+ Join the Movement
160
+ </a>
161
+ </div>
162
+ <div class="mt-24 scroll-indicator">
163
+ <a href="#vision" class="inline-block animate-bounce">
164
+ <i data-feather="chevron-down" class="text-white w-8 h-8"></i>
165
+ </a>
166
+ </div>
167
+ </div>
168
+ </section>
169
+
170
+ <!-- Vision Section -->
171
+ <section id="vision" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black/0 to-black/50">
172
+ <div class="max-w-7xl mx-auto">
173
+ <div class="text-center mb-16">
174
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">
175
+ <span class="gradient-text">Our Singularity</span>
176
+ <span class="text-white">Vision</span>
177
+ </h2>
178
+ <p class="text-xl text-white/80 max-w-3xl mx-auto">
179
+ We envision a future where technology accelerates human potential beyond Earth's boundaries.
180
+ </p>
181
+ </div>
182
+
183
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
184
+ <div class="futuristic-card p-8 rounded-xl">
185
+ <div class="w-14 h-14 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mb-6">
186
+ <i data-feather="globe" class="w-6 h-6 text-white"></i>
187
+ </div>
188
+ <h3 class="text-xl font-bold text-white mb-4">Interplanetary Civilization</h3>
189
+ <p class="text-white/70">
190
+ Sustainable habitats on Mars and lunar bases as stepping stones to interstellar expansion.
191
+ </p>
192
+ </div>
193
+
194
+ <div class="futuristic-card p-8 rounded-xl">
195
+ <div class="w-14 h-14 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center mb-6">
196
+ <i data-feather="cpu" class="w-6 h-6 text-white"></i>
197
+ </div>
198
+ <h3 class="text-xl font-bold text-white mb-4">AI-Human Symbiosis</h3>
199
+ <p class="text-white/70">
200
+ Neural interfaces and augmented cognition creating a seamless blend of biological and artificial intelligence.
201
+ </p>
202
+ </div>
203
+
204
+ <div class="futuristic-card p-8 rounded-xl">
205
+ <div class="w-14 h-14 bg-gradient-to-r from-pink-500 to-red-600 rounded-lg flex items-center justify-center mb-6">
206
+ <i data-feather="activity" class="w-6 h-6 text-white"></i>
207
+ </div>
208
+ <h3 class="text-xl font-bold text-white mb-4">Planetary Restoration</h3>
209
+ <p class="text-white/70">
210
+ Advanced climate engineering reversing ecological damage and establishing planetary equilibrium.
211
+ </p>
212
+ </div>
213
+
214
+ <div class="futuristic-card p-8 rounded-xl">
215
+ <div class="w-14 h-14 bg-gradient-to-r from-red-500 to-orange-600 rounded-lg flex items-center justify-center mb-6">
216
+ <i data-feather="zap" class="w-6 h-6 text-white"></i>
217
+ </div>
218
+ <h3 class="text-xl font-bold text-white mb-4">Quantum Revolution</h3>
219
+ <p class="text-white/70">
220
+ Quantum computing solving currently intractable problems in medicine, materials science, and cosmology.
221
+ </p>
222
+ </div>
223
+
224
+ <div class="futuristic-card p-8 rounded-xl">
225
+ <div class="w-14 h-14 bg-gradient-to-r from-orange-500 to-yellow-600 rounded-lg flex items-center justify-center mb-6">
226
+ <i data-feather="users" class="w-6 h-6 text-white"></i>
227
+ </div>
228
+ <h3 class="text-xl font-bold text-white mb-4">Post-Scarcity Society</h3>
229
+ <p class="text-white/70">
230
+ Molecular manufacturing and fusion energy eliminating material constraints on human flourishing.
231
+ </p>
232
+ </div>
233
+
234
+ <div class="futuristic-card p-8 rounded-xl">
235
+ <div class="w-14 h-14 bg-gradient-to-r from-yellow-500 to-green-600 rounded-lg flex items-center justify-center mb-6">
236
+ <i data-feather="star" class="w-6 h-6 text-white"></i>
237
+ </div>
238
+ <h3 class="text-xl font-bold text-white mb-4">Cosmic Consciousness</h3>
239
+ <p class="text-white/70">
240
+ Expanded awareness through neuroscience advances unlocking higher states of consciousness.
241
+ </p>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </section>
246
+
247
+ <!-- Technologies Section -->
248
+ <section id="technologies" class="py-20 px-4 sm:px-6 lg:px-8 bg-black/30">
249
+ <div class="max-w-7xl mx-auto">
250
+ <div class="text-center mb-16">
251
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">
252
+ <span class="gradient-text">Breakthrough</span>
253
+ <span class="text-white">Technologies</span>
254
+ </h2>
255
+ <p class="text-xl text-white/80 max-w-3xl mx-auto">
256
+ The foundational innovations that will define the next era of civilization.
257
+ </p>
258
+ </div>
259
+
260
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
261
+ <div class="gradient-border p-1 rounded-xl">
262
+ <div class="futuristic-card p-8 rounded-lg h-full">
263
+ <h3 class="text-2xl font-bold text-white mb-6">Quantum Communication Network</h3>
264
+ <div class="flex items-center mb-6">
265
+ <div class="w-16 h-16 bg-blue-900/30 rounded-lg flex items-center justify-center mr-4">
266
+ <i data-feather="radio" class="w-8 h-8 text-blue-400"></i>
267
+ </div>
268
+ <p class="text-white/80">
269
+ Instantaneous data transfer across solar systems using quantum entanglement principles.
270
+ </p>
271
+ </div>
272
+ <div class="flex">
273
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-blue-900/30 text-blue-400 mr-2">Space</span>
274
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-purple-900/30 text-purple-400">Quantum</span>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="gradient-border p-1 rounded-xl">
280
+ <div class="futuristic-card p-8 rounded-lg h-full">
281
+ <h3 class="text-2xl font-bold text-white mb-6">Neural Lace Integration</h3>
282
+ <div class="flex items-center mb-6">
283
+ <div class="w-16 h-16 bg-purple-900/30 rounded-lg flex items-center justify-center mr-4">
284
+ <i data-feather="brain" class="w-8 h-8 text-purple-400"></i>
285
+ </div>
286
+ <p class="text-white/80">
287
+ Nanoscale mesh that integrates with the human brain, enabling direct neural interface with AI systems.
288
+ </p>
289
+ </div>
290
+ <div class="flex">
291
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-pink-900/30 text-pink-400 mr-2">Biotech</span>
292
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-indigo-900/30 text-indigo-400">AI</span>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="gradient-border p-1 rounded-xl">
298
+ <div class="futuristic-card p-8 rounded-lg h-full">
299
+ <h3 class="text-2xl font-bold text-white mb-6">Atmospheric Reprogramming</h3>
300
+ <div class="flex items-center mb-6">
301
+ <div class="w-16 h-16 bg-green-900/30 rounded-lg flex items-center justify-center mr-4">
302
+ <i data-feather="wind" class="w-8 h-8 text-green-400"></i>
303
+ </div>
304
+ <p class="text-white/80">
305
+ Nanobot swarms that modify atmospheric composition to reverse climate change effects.
306
+ </p>
307
+ </div>
308
+ <div class="flex">
309
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-900/30 text-green-400 mr-2">Climate</span>
310
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-teal-900/30 text-teal-400">Nano</span>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <div class="gradient-border p-1 rounded-xl">
316
+ <div class="futuristic-card p-8 rounded-lg h-full">
317
+ <h3 class="text-2xl font-bold text-white mb-6">Dyson Swarm Energy</h3>
318
+ <div class="flex items-center mb-6">
319
+ <div class="w-16 h-16 bg-yellow-900/30 rounded-lg flex items-center justify-center mr-4">
320
+ <i data-feather="sun" class="w-8 h-8 text-yellow-400"></i>
321
+ </div>
322
+ <p class="text-white/80">
323
+ Orbital solar collectors harvesting near-unlimited energy from our star.
324
+ </p>
325
+ </div>
326
+ <div class="flex">
327
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-yellow-900/30 text-yellow-400 mr-2">Energy</span>
328
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-orange-900/30 text-orange-400">Space</span>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="text-center">
335
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:opacity-90 shadow-lg">
336
+ Explore All Technologies
337
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
338
+ </a>
339
+ </div>
340
+ </div>
341
+ </section>
342
+
343
+ <!-- Timeline Section -->
344
+ <section id="timeline" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black/30 to-black/50">
345
+ <div class="max-w-4xl mx-auto">
346
+ <div class="text-center mb-16">
347
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">
348
+ <span class="gradient-text">Singularity</span>
349
+ <span class="text-white">Timeline</span>
350
+ </h2>
351
+ <p class="text-xl text-white/80 max-w-3xl mx-auto">
352
+ Projected milestones on humanity's journey to technological transcendence.
353
+ </p>
354
+ </div>
355
+
356
+ <div class="relative">
357
+ <!-- Timeline line -->
358
+ <div class="absolute left-4 md:left-1/2 h-full w-0.5 bg-gradient-to-b from-blue-500 to-purple-600 -z-10"></div>
359
+
360
+ <!-- Timeline items -->
361
+ <div class="space-y-12">
362
+ <!-- Item 1 -->
363
+ <div class="relative pl-12 md:pl-0 md:pr-12 md:odd:pl-12 md:text-right">
364
+ <div class="timeline-item">
365
+ <div class="futuristic-card p-6 rounded-xl">
366
+ <span class="text-sm font-semibold text-blue-400">2025-2035</span>
367
+ <h3 class="text-xl font-bold text-white mt-1 mb-2">Artificial General Intelligence Emergence</h3>
368
+ <p class="text-white/70">
369
+ The first true AGI systems achieve human-level cognition across diverse domains.
370
+ </p>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- Item 2 -->
376
+ <div class="relative pl-12">
377
+ <div class="timeline-item">
378
+ <div class="futuristic-card p-6 rounded-xl">
379
+ <span class="text-sm font-semibold text-purple-400">2035-2045</span>
380
+ <h3 class="text-xl font-bold text-white mt-1 mb-2">Mars Permanent Settlement</h3>
381
+ <p class="text-white/70">
382
+ Self-sustaining colony established with over 10,000 residents living under domes.
383
+ </p>
384
+ </div>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Item 3 -->
389
+ <div class="relative pl-12 md:pl-0 md:pr-12 md:odd:pl-12 md:text-right">
390
+ <div class="timeline-item">
391
+ <div class="futuristic-card p-6 rounded-xl">
392
+ <span class="text-sm font-semibold text-pink-400">2045-2055</span>
393
+ <h3 class="text-xl font-bold text-white mt-1 mb-2">Human-Machine Merger</h3>
394
+ <p class="text-white/70">
395
+ Neural interfaces become ubiquitous, blurring the line between human and artificial cognition.
396
+ </p>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <!-- Item 4 -->
402
+ <div class="relative pl-12">
403
+ <div class="timeline-item">
404
+ <div class="futuristic-card p-6 rounded-xl">
405
+ <span class="text-sm font-semibold text-green-400">2055-2075</span>
406
+ <h3 class="text-xl font-bold text-white mt-1 mb-2">Climate Restoration Completion</h3>
407
+ <p class="text-white/70">
408
+ Atmospheric CO2 levels returned to pre-industrial levels through advanced geoengineering.
409
+ </p>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Item 5 -->
415
+ <div class="relative pl-12 md:pl-0 md:pr-12 md:odd:pl-12 md:text-right">
416
+ <div class="timeline-item">
417
+ <div class="futuristic-card p-6 rounded-xl">
418
+ <span class="text-sm font-semibold text-yellow-400">2075-2100</span>
419
+ <h3 class="text-xl font-bold text-white mt-1 mb-2">Interstellar Probes Launch</h3>
420
+ <p class="text-white/70">
421
+ First light-sail missions to nearby star systems with AI-driven exploration systems.
422
+ </p>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </section>
430
+
431
+ <!-- Contact Section -->
432
+ <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-black/40">
433
+ <div class="max-w-4xl mx-auto">
434
+ <div class="text-center mb-16">
435
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">
436
+ <span class="gradient-text">Join the</span>
437
+ <span class="text-white">Evolution</span>
438
+ </h2>
439
+ <p class="text-xl text-white/80 max-w-3xl mx-auto">
440
+ Connect with our network of visionaries, scientists, and future-shapers.
441
+ </p>
442
+ </div>
443
+
444
+ <div class="futuristic-card p-8 rounded-xl">
445
+ <form class="space-y-6">
446
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
447
+ <div>
448
+ <label for="name" class="block text-sm font-medium text-white/80 mb-1">Full Name</label>
449
+ <input type="text" id="name" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-blue-500">
450
+ </div>
451
+ <div>
452
+ <label for="email" class="block text-sm font-medium text-white/80 mb-1">Email Address</label>
453
+ <input type="email" id="email" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-purple-500">
454
+ </div>
455
+ </div>
456
+ <div>
457
+ <label for="interest" class="block text-sm font-medium text-white/80 mb-1">Area of Interest</label>
458
+ <select id="interest" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-pink-500 appearance-none">
459
+ <option>Select your interest</option>
460
+ <option>AI Development</option>
461
+ <option>Space Colonization</option>
462
+ <option>Quantum Computing</option>
463
+ <option>Neural Interfaces</option>
464
+ <option>Climate Restoration</option>
465
+ <option>Investment Opportunities</option>
466
+ </select>
467
+ </div>
468
+ <div>
469
+ <label for="message" class="block text-sm font-medium text-white/80 mb-1">Your Message</label>
470
+ <textarea id="message" rows="4" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
471
+ </div>
472
+ <div>
473
+ <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg font-medium text-white hover:opacity-90 transition duration-300 shadow-lg">
474
+ Submit Application
475
+ </button>
476
+ </div>
477
+ </form>
478
+ </div>
479
+ </div>
480
+ </section>
481
+
482
+ <!-- Footer -->
483
+ <footer class="py-12 px-4 sm:px-6 lg:px-8 border-t border-white/10">
484
+ <div class="max-w-7xl mx-auto">
485
+ <div class="flex flex-col md:flex-row justify-between items-center">
486
+ <div class="mb-6 md:mb-0">
487
+ <div class="font-bold text-xl gradiant-text glow">
488
+ Singularity<span class="text-white">Horizon</span>
489
+ </div>
490
+ <p class="text-white/60 mt-2 text-sm">
491
+ Exploring the frontiers of human potential.
492
+ </p>
493
+ </div>
494
+ <div class="flex space-x-6">
495
+ <a href="#" class="text-white/60 hover:text-blue-400 transition duration-300">
496
+ <i data-feather="twitter"></i>
497
+ </a>
498
+ <a href="#" class="text-white/60 hover:text-purple-400 transition duration-300">
499
+ <i data-feather="linkedin"></i>
500
+ </a>
501
+ <a href="#" class="text-white/60 hover:text-pink-400 transition duration-300">
502
+ <i data-feather="github"></i>
503
+ </a>
504
+ <a href="#" class="text-white/60 hover:text-green-400 transition duration-300">
505
+ <i data-feather="youtube"></i>
506
+ </a>
507
+ </div>
508
+ </div>
509
+ <div class="mt-8 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center">
510
+ <p class="text-white/50 text-sm text-center md:text-left">
511
+ © 2023 Singularity Horizon. All rights reserved.
512
+ </p>
513
+ <div class="mt-4 md:mt-0 flex space-x-6">
514
+ <a href="#" class="text-white/60 hover:text-white text-sm">Privacy Policy</a>
515
+ <a href="#" class="text-white/60 hover:text-white text-sm">Terms of Service</a>
516
+ <a href="#" class="text-white/60 hover:text-white text-sm">Contact</a>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </footer>
521
+
522
+ <script>
523
+ // Initialize Vanta.js background
524
+ VANTA.GLOBE({
525
+ el: "#vanta-bg",
526
+ mouseControls: true,
527
+ touchControls: true,
528
+ gyroControls: false,
529
+ minHeight: 200.00,
530
+ minWidth: 200.00,
531
+ scale: 1.00,
532
+ scaleMobile: 1.00,
533
+ color: 0x3d8dff,
534
+ backgroundColor: 0x0a0a16,
535
+ size: 0.8
536
+ });
537
+
538
+ // Mobile menu toggle
539
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
540
+ const menu = document.getElementById('mobile-menu');
541
+ menu.classList.toggle('hidden');
542
+ });
543
+
544
+ // Smooth scrolling for navigation links
545
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
546
+ anchor.addEventListener('click', function(e) {
547
+ e.preventDefault();
548
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
549
+ behavior: 'smooth'
550
+ });
551
+ });
552
+ });
553
+
554
+ // Initialize Feather Icons
555
+ feather.replace();
556
+
557
+ // Animation for futuristic cards on scroll
558
+ document.addEventListener('DOMContentLoaded', function() {
559
+ anime({
560
+ targets: '.futuristic-card',
561
+ translateY: [50, 0],
562
+ opacity: [0, 1],
563
+ duration: 1000,
564
+ delay: anime.stagger(100),
565
+ easing: 'easeOutExpo'
566
+ });
567
+ });
568
+ </script>
569
+ </body>
570
  </html>
links.html ADDED
@@ -0,0 +1,282 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Resource Links | Singularity Horizon</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
14
+
15
+ body {
16
+ font-family: 'Space Grotesk', sans-serif;
17
+ background-color: #0a0a16;
18
+ color: #e0e0ff;
19
+ }
20
+
21
+ .gradient-text {
22
+ background: linear-gradient(90deg, #3d8dff 0%, #8b5cf6 50%, #ec4899 100%);
23
+ -webkit-background-clip: text;
24
+ background-clip: text;
25
+ color: transparent;
26
+ }
27
+
28
+ .futuristic-card {
29
+ backdrop-filter: blur(16px);
30
+ background: rgba(15, 23, 42, 0.7);
31
+ border: 1px solid rgba(255, 255, 255, 0.1);
32
+ transition: all 0.3s ease;
33
+ }
34
+
35
+ .futuristic-card:hover {
36
+ transform: translateY(-5px);
37
+ box-shadow: 0 10px 25px rgba(61, 141, 255, 0.2);
38
+ }
39
+
40
+ .link-card:hover .link-icon {
41
+ transform: translateX(5px);
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="antialiased">
46
+ <!-- Vanta.js Background -->
47
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
48
+
49
+ <!-- Navigation -->
50
+ <nav class="fixed w-full backdrop-blur-md bg-black/50 border-b border-white/10 z-50">
51
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
52
+ <div class="flex items-center justify-between h-16">
53
+ <div class="flex items-center">
54
+ <a href="index.html" class="flex-shrink-0 font-bold text-xl gradiant-text">
55
+ Singularity<span class="text-white">Horizon</span>
56
+ </a>
57
+ </div>
58
+ <div class="hidden md:block">
59
+ <div class="ml-10 flex items-center space-x-8">
60
+ <a href="index.html" class="text-white hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
61
+ <a href="links.html" class="text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Links</a>
62
+ </div>
63
+ </div>
64
+ <div class="md:hidden">
65
+ <button id="mobile-menu-button" class="text-white hover:text-gray-300 focus:outline-none">
66
+ <i data-feather="menu"></i>
67
+ </button>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </nav>
72
+
73
+ <!-- Main Content -->
74
+ <section class="min-h-screen pt-32 pb-20 px-4 sm:px-6 lg:px-8">
75
+ <div class="max-w-6xl mx-auto">
76
+ <div class="text-center mb-16">
77
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
78
+ <span class="gradient-text">Resource</span>
79
+ <span class="text-white">Links</span>
80
+ </h1>
81
+ <p class="text-xl text-white/80 max-w-3xl mx-auto">
82
+ Curated collection of valuable resources about the technological singularity and future technologies.
83
+ </p>
84
+ </div>
85
+
86
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
87
+ <!-- AI/ML Section -->
88
+ <div class="futuristic-card p-6 rounded-xl">
89
+ <h3 class="text-xl font-bold text-white mb-4 flex items-center">
90
+ <i data-feather="cpu" class="mr-2 text-blue-400"></i>
91
+ AI & Machine Learning
92
+ </h3>
93
+ <div class="space-y-3">
94
+ <a href="https://openai.com/research" class="link-card flex items-center text-white/80 hover:text-white transition">
95
+ <span>OpenAI Research</span>
96
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
97
+ </a>
98
+ <a href="https://deepmind.com/research" class="link-card flex items-center text-white/80 hover:text-white transition">
99
+ <span>DeepMind Research</span>
100
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
101
+ </a>
102
+ <a href="https://futureoflife.org" class="link-card flex items-center text-white/80 hover:text-white transition">
103
+ <span>Future of Life Institute</span>
104
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
105
+ </a>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Space Exploration -->
110
+ <div class="futuristic-card p-6 rounded-xl">
111
+ <h3 class="text-xl font-bold text-white mb-4 flex items-center">
112
+ <i data-feather="globe" class="mr-2 text-purple-400"></i>
113
+ Space Exploration
114
+ </h3>
115
+ <div class="space-y-3">
116
+ <a href="https://www.nasa.gov" class="link-card flex items-center text-white/80 hover:text-white transition">
117
+ <span>NASA Official Site</span>
118
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
119
+ </a>
120
+ <a href="https://www.spacex.com" class="link-card flex items-center text-white/80 hover:text-white transition">
121
+ <span>SpaceX</span>
122
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
123
+ </a>
124
+ <a href="https://mars.nasa.gov" class="link-card flex items-center text-white/80 hover:text-white transition">
125
+ <span>Mars Exploration Program</span>
126
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
127
+ </a>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Quantum Computing -->
132
+ <div class="futuristic-card p-6 rounded-xl">
133
+ <h3 class="text-xl font-bold text-white mb-4 flex items-center">
134
+ <i data-feather="activity" class="mr-2 text-pink-400"></i>
135
+ Quantum Computing
136
+ </h3>
137
+ <div class="space-y-3">
138
+ <a href="https://quantum-computing.ibm.com" class="link-card flex items-center text-white/80 hover:text-white transition">
139
+ <span>IBM Quantum</span>
140
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
141
+ </a>
142
+ <a href="https://quantumai.google" class="link-card flex items-center text-white/80 hover:text-white transition">
143
+ <span>Google Quantum AI</span>
144
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
145
+ </a>
146
+ <a href="https://www.quantum.gov" class="link-card flex items-center text-white/80 hover:text-white transition">
147
+ <span>National Quantum Initiative</span>
148
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
149
+ </a>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Futurism & Ethics -->
154
+ <div class="futuristic-card p-6 rounded-xl">
155
+ <h3 class="text-xl font-bold text-white mb-4 flex items-center">
156
+ <i data-feather="zap" class="mr-2 text-yellow-400"></i>
157
+ Futurism & Ethics
158
+ </h3>
159
+ <div class="space-y-3">
160
+ <a href="https://www.singularityweblog.com" class="link-card flex items-center text-white/80 hover:text-white transition">
161
+ <span>Singularity Weblog</span>
162
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
163
+ </a>
164
+ <a href="https://www.kurzweilai.net" class="link-card flex items-center text-white/80 hover:text-white transition">
165
+ <span>KurzweilAI</span>
166
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
167
+ </a>
168
+ <a href="https://futureoflife.org" class="link-card flex items-center text-white/80 hover:text-white transition">
169
+ <span>Future of Humanity Institute</span>
170
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
171
+ </a>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Neuroscience -->
176
+ <div class="futuristic-card p-6 rounded-xl">
177
+ <h3 class="text-xl font-bold text-white mb-4 flex items-center">
178
+ <i data-feather="brain" class="mr-2 text-green-400"></i>
179
+ Neuroscience
180
+ </h3>
181
+ <div class="space-y-3">
182
+ <a href="https://www.braininitiative.org" class="link-card flex items-center text-white/80 hover:text-white transition">
183
+ <span>BRAIN Initiative</span>
184
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
185
+ </a>
186
+ <a href="https://neuralink.com" class="link-card flex items-center text-white/80 hover:text-white transition">
187
+ <span>Neuralink</span>
188
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
189
+ </a>
190
+ <a href="https://www.neuroscienceblueprint.nih.gov" class="link-card flex items-center text-white/80 hover:text-white transition">
191
+ <span>NIH Neuroscience</span>
192
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
193
+ </a>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Energy & Environment -->
198
+ <div class="futuristic-card p-6 rounded-xl">
199
+ <h3 class="text-xl font-bold text-white mb-4 flex items-center">
200
+ <i data-feather="wind" class="mr-2 text-cyan-400"></i>
201
+ Energy & Environment
202
+ </h3>
203
+ <div class="space-y-3">
204
+ <a href="https://www.iter.org" class="link-card flex items-center text-white/80 hover:text-white transition">
205
+ <span>ITER Fusion Project</span>
206
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
207
+ </a>
208
+ <a href="https://www.climate.gov" class="link-card flex items-center text-white/80 hover:text-white transition">
209
+ <span>Climate.gov</span>
210
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
211
+ </a>
212
+ <a href="https://www.drawdown.org" class="link-card flex items-center text-white/80 hover:text-white transition">
213
+ <span>Project Drawdown</span>
214
+ <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i>
215
+ </a>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </section>
221
+
222
+ <!-- Footer -->
223
+ <footer class="py-12 px-4 sm:px-6 lg:px-8 border-t border-white/10">
224
+ <div class="max-w-7xl mx-auto">
225
+ <div class="flex flex-col md:flex-row justify-between items-center">
226
+ <div class="mb-6 md:mb-0">
227
+ <div class="font-bold text-xl gradiant-text">
228
+ Singularity<span class="text-white">Horizon</span>
229
+ </div>
230
+ <p class="text-white/60 mt-2 text-sm">
231
+ Exploring the frontiers of human potential.
232
+ </p>
233
+ </div>
234
+ <div class="flex space-x-6">
235
+ <a href="#" class="text-white/60 hover:text-blue-400 transition duration-300">
236
+ <i data-feather="twitter"></i>
237
+ </a>
238
+ <a href="#" class="text-white/60 hover:text-purple-400 transition duration-300">
239
+ <i data-feather="linkedin"></i>
240
+ </a>
241
+ <a href="#" class="text-white/60 hover:text-pink-400 transition duration-300">
242
+ <i data-feather="github"></i>
243
+ </a>
244
+ <a href="#" class="text-white/60 hover:text-green-400 transition duration-300">
245
+ <i data-feather="youtube"></i>
246
+ </a>
247
+ </div>
248
+ </div>
249
+ <div class="mt-8 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center">
250
+ <p class="text-white/50 text-sm text-center md:text-left">
251
+ © 2023 Singularity Horizon. All rights reserved.
252
+ </p>
253
+ <div class="mt-4 md:mt-0 flex space-x-6">
254
+ <a href="#" class="text-white/60 hover:text-white text-sm">Privacy Policy</a>
255
+ <a href="#" class="text-white/60 hover:text-white text-sm">Terms of Service</a>
256
+ <a href="contact" class="text-white/60 hover:text-white text-sm">Contact</a>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </footer>
261
+
262
+ <script>
263
+ // Initialize Vanta.js background
264
+ VANTA.GLOBE({
265
+ el: "#vanta-bg",
266
+ mouseControls: true,
267
+ touchControls: true,
268
+ gyroControls: false,
269
+ minHeight: 200.00,
270
+ minWidth: 200.00,
271
+ scale: 1.00,
272
+ scaleMobile: 1.00,
273
+ color: 0x3d8dff,
274
+ backgroundColor: 0x0a0a16,
275
+ size: 0.8
276
+ });
277
+
278
+ // Initialize Feather Icons
279
+ feather.replace();
280
+ </script>
281
+ </body>
282
+ </html>