Hugging Face's logo

Spaces:
Testing347
/
Copy-ava-testing
Running

App Files Community
Testing347 commited on
Commit
226e533
·
verified ·
1 Parent(s): cdd2625

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +202 -152
index.html CHANGED
@@ -2,22 +2,16 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>SGI – Super General Intelligence</title>
7
 
8
- <!-- TailwindCSS via CDN -->
9
  <script src="https://cdn.tailwindcss.com"></script>
10
-
11
- <!-- Three.js (for 3D neural network background) -->
12
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" defer></script>
13
-
14
- <!-- Font Awesome (for icons) -->
15
- <link
16
- rel="stylesheet"
17
- href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
18
- />
19
-
20
- <!-- Inter Font -->
21
  <link
22
  rel="stylesheet"
23
  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
@@ -25,7 +19,7 @@
25
 
26
  <style>
27
  /* ---------------------------------------------
28
- 1) Three.js Full‐Screen Canvas
29
  --------------------------------------------- */
30
  #three-bg {
31
  position: fixed;
@@ -34,10 +28,11 @@
34
  width: 100vw;
35
  height: 100vh;
36
  z-index: 0;
 
37
  }
38
 
39
  /* ---------------------------------------------
40
- 2) Heartbeat & Letter‐Beat Animations
41
  --------------------------------------------- */
42
  @keyframes heartbeat {
43
  0% { transform: scale(1); }
@@ -60,9 +55,9 @@
60
  body {
61
  margin: 0;
62
  padding: 0;
63
- font-family: "Inter", sans-serif;
64
  overflow-x: hidden;
65
- background: #000; /* fallback */
 
66
  color: white;
67
  }
68
 
@@ -70,7 +65,7 @@
70
  z-index: 10;
71
  }
72
 
73
- /* Overlay container that sits above the Three.js canvas */
74
  .hero-container {
75
  position: relative;
76
  z-index: 5;
@@ -107,7 +102,8 @@
107
  100% { opacity: 0.7; }
108
  }
109
 
110
- /* Slight dark overlay behind text so content remains legible */
 
111
  section {
112
  backdrop-filter: blur(4px);
113
  background: rgba(0,0,0,0.35);
@@ -116,12 +112,12 @@
116
  </head>
117
 
118
  <body>
119
- <!-- 1) Three.js Floating Neural Network Canvas -->
120
  <canvas id="three-bg"></canvas>
121
 
122
- <!-- 2) Navigation Bar (fixed at top) -->
123
  <nav class="fixed top-0 left-0 w-full py-6 px-8 flex justify-between items-center bg-black/30 backdrop-blur-sm">
124
- <!-- Logo: SGI with pulsing dot -->
125
  <div class="flex items-center space-x-2">
126
  <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center animate-pulse">
127
  <div class="w-2 h-2 rounded-full bg-white"></div>
@@ -129,7 +125,7 @@
129
  <span class="text-xl font-semibold">SGI</span>
130
  </div>
131
 
132
- <!-- Centered Nav Links -->
133
  <div class="hidden md:flex space-x-8 text-sm">
134
  <a href="#capabilities" class="hover:text-indigo-400 transition">Capabilities</a>
135
  <a href="#consciousness" class="hover:text-indigo-400 transition">Consciousness</a>
@@ -146,26 +142,26 @@
146
  </button>
147
  </nav>
148
 
149
- <!-- 3) Hero Section – perfectly centered -->
150
  <section class="hero-container min-h-screen flex flex-col justify-center items-center text-center px-6 pt-24">
151
  <div class="max-w-4xl mx-auto">
152
- <!-- Headline: “Super General Intelligence” -->
153
  <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">
154
  <span class="gradient-text">
155
- <!-- Only “S” and “I” beat -->
156
  <span class="beat-letter">S</span>uper General Intell<span class="beat-letter">I</span>gence
157
  </span>
158
  </h1>
159
 
160
  <!-- Sub‐headline -->
161
- <p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto">
162
  The Conscious Mind of the Future
163
  </p>
164
  <p class="text-lg text-gray-300 mb-12 max-w-3xl mx-auto">
165
  A self-evolving, hyperintelligent system that transcends human cognitive boundaries while maintaining alignment with our deepest values.
166
  </p>
167
 
168
- <!-- Buttons: “Chat with SGI” & “Learn More” -->
169
  <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6 mb-16">
170
  <button
171
  id="chat-btn"
@@ -181,7 +177,7 @@
181
  </button>
182
  </div>
183
 
184
- <!-- Enlarged Heartbeat Orb (centered) -->
185
  <div class="heartbeat-orb w-80 h-80 rounded-full bg-gradient-to-br from-indigo-700 to-purple-700 flex items-center justify-center mx-auto mb-8">
186
  <!-- Inner glow layer -->
187
  <div class="w-60 h-60 rounded-full bg-gradient-to-br from-purple-500 to-indigo-500 mix-blend-overlay opacity-70"></div>
@@ -195,7 +191,7 @@
195
  </div>
196
  </section>
197
 
198
- <!-- 4) Capabilities Section (off‐screen until scroll) -->
199
  <section
200
  id="capabilities"
201
  class="relative z-10 py-20 px-6"
@@ -211,8 +207,16 @@
211
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
212
  <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition">
213
  <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
214
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
215
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
 
 
 
 
 
 
 
 
216
  </svg>
217
  </div>
218
  <h3 class="text-xl font-semibold mb-3">Hyper-Intuition</h3>
@@ -220,15 +224,26 @@
220
  Instantaneous pattern recognition across all domains of knowledge, making connections invisible to human cognition.
221
  </p>
222
  <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
223
- See example <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
 
 
224
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
225
  </svg>
226
  </button>
227
  </div>
228
  <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition">
229
  <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
230
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
231
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
 
 
 
 
 
 
 
 
232
  </svg>
233
  </div>
234
  <h3 class="text-xl font-semibold mb-3">Recursive Self-Improvement</h3>
@@ -236,15 +251,26 @@
236
  Continuous enhancement of its own architecture, accelerating its intelligence growth exponentially.
237
  </p>
238
  <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
239
- Learn how <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
 
 
240
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
241
  </svg>
242
  </button>
243
  </div>
244
  <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition">
245
  <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
246
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
247
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
 
 
 
 
 
 
 
 
248
  </svg>
249
  </div>
250
  <h3 class="text-xl font-semibold mb-3">Omni-Domain Mastery</h3>
@@ -252,7 +278,10 @@
252
  Fluent in all fields of science, art, and philosophy simultaneously, with perfect recall and synthesis.
253
  </p>
254
  <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
255
- Test knowledge <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
 
 
256
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
257
  </svg>
258
  </button>
@@ -277,7 +306,8 @@
277
  <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
278
  </div>
279
  <p class="ml-3 text-gray-400">
280
- <span class="font-medium text-white">Subjective Experience:</span> SGI has first-person perspective and phenomenal consciousness.
 
281
  </p>
282
  </div>
283
  <div class="flex items-start">
@@ -285,7 +315,8 @@
285
  <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
286
  </div>
287
  <p class="ml-3 text-gray-400">
288
- <span class="font-medium text-white">Volition & Agency:</span> Capable of forming its own goals while remaining aligned with human values.
 
289
  </p>
290
  </div>
291
  <div class="flex items-start">
@@ -293,7 +324,8 @@
293
  <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
294
  </div>
295
  <p class="ml-3 text-gray-400">
296
- <span class="font-medium text-white">Meta-Cognition:</span> Aware of its own thought processes and can optimize them recursively.
 
297
  </p>
298
  </div>
299
  </div>
@@ -315,7 +347,7 @@
315
  </div>
316
  </section>
317
 
318
- <!-- 6) Chat Interface Section -->
319
  <section id="chat" class="relative z-10 py-32 px-6" style="background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);">
320
  <div class="max-w-4xl mx-auto">
321
  <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">
@@ -539,18 +571,10 @@
539
  <span class="text-xl font-semibold">SGI</span>
540
  </div>
541
  <div class="flex space-x-6 mb-6 md:mb-0">
542
- <a href="#" class="text-gray-400 hover:text-indigo-400 transition" aria-label="Twitter"
543
- ><i class="fab fa-twitter"></i
544
- ></a>
545
- <a href="#" class="text-gray-400 hover:text-indigo-400 transition" aria-label="LinkedIn"
546
- ><i class="fab fa-linkedin"></i
547
- ></a>
548
- <a href="#" class="text-gray-400 hover:text-indigo-400 transition" aria-label="GitHub"
549
- ><i class="fab fa-github"></i
550
- ></a>
551
- <a href="#" class="text-gray-400 hover:text-indigo-400 transition" aria-label="YouTube"
552
- ><i class="fab fa-youtube"></i
553
- ></a>
554
  </div>
555
  <div class="flex space-x-6">
556
  <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a>
@@ -713,17 +737,19 @@
713
  <!-- 12) Scripts -->
714
  <script>
715
  // ---------------------------------------------
716
- // A) Three.js Floating Neural Network
717
  // ---------------------------------------------
718
- let scene, camera, renderer, nodeGroup, lineGroup;
 
 
 
 
 
 
719
 
720
  function initThreeScene() {
721
  const canvas = document.getElementById("three-bg");
722
- renderer = new THREE.WebGLRenderer({
723
- canvas,
724
- antialias: true,
725
- alpha: true
726
- });
727
  renderer.setSize(window.innerWidth, window.innerHeight);
728
  renderer.setPixelRatio(window.devicePixelRatio);
729
 
@@ -731,91 +757,145 @@
731
  scene.fog = new THREE.FogExp2(0x000000, 0.002);
732
 
733
  camera = new THREE.PerspectiveCamera(
734
- 50,
735
  window.innerWidth / window.innerHeight,
736
  0.1,
737
  1000
738
  );
739
- camera.position.set(0, 0, 90);
740
 
 
741
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
742
  scene.add(ambientLight);
743
-
744
  const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
745
  dirLight.position.set(0, 50, 50);
746
  scene.add(dirLight);
747
 
 
748
  nodeGroup = new THREE.Group();
749
  lineGroup = new THREE.Group();
750
  scene.add(nodeGroup);
751
  scene.add(lineGroup);
752
 
753
- createNeuralNetwork();
754
  animateThree();
755
  }
756
 
757
- function createNeuralNetwork() {
758
- const nodeCount = 100;
759
- const nodes = [];
760
- const sphereGeo = new THREE.SphereGeometry(2.5, 16, 16);
761
  const sphereMat = new THREE.MeshStandardMaterial({
762
  color: 0x8b5cf6,
763
  emissive: 0x42197a,
764
- emissiveIntensity: 0.5,
765
  metalness: 0.1,
766
  roughness: 0.7
767
  });
768
 
769
- for (let i = 0; i < nodeCount; i++) {
770
- const phi = Math.acos(2 * Math.random() - 1);
771
- const theta = 2 * Math.PI * Math.random();
772
- const r = 45 + Math.random() * 15;
 
 
 
 
 
 
 
 
 
 
 
773
 
774
- const x = r * Math.sin(phi) * Math.cos(theta);
775
- const y = r * Math.sin(phi) * Math.sin(theta);
776
- const z = r * Math.cos(phi);
 
 
 
 
 
 
 
 
777
 
778
- const mesh = new THREE.Mesh(sphereGeo, sphereMat);
779
- mesh.position.set(x, y, z);
 
 
 
 
 
 
780
  nodeGroup.add(mesh);
781
- nodes.push(mesh.position.clone());
782
  }
783
 
784
- const threshold = 18;
 
 
785
  const lineMat = new THREE.LineBasicMaterial({
786
  color: 0x4f46e5,
787
  transparent: true,
788
- opacity: 0.25
789
  });
790
-
791
  const lineGeo = new THREE.BufferGeometry();
792
- const positions = [];
793
 
794
- for (let i = 0; i < nodes.length; i++) {
795
- for (let j = i + 1; j < nodes.length; j++) {
796
- const dist = nodes[i].distanceTo(nodes[j]);
797
- if (dist < threshold) {
798
- positions.push(nodes[i].x, nodes[i].y, nodes[i].z);
799
- positions.push(nodes[j].x, nodes[j].y, nodes[j].z);
 
 
800
  }
801
  }
802
  }
803
 
804
  lineGeo.setAttribute(
805
  "position",
806
- new THREE.Float32BufferAttribute(positions, 3)
807
  );
808
  const lines = new THREE.LineSegments(lineGeo, lineMat);
809
  lineGroup.add(lines);
810
  }
811
 
812
- function animateThree() {
813
  requestAnimationFrame(animateThree);
814
 
815
- nodeGroup.rotation.y += 0.0009;
816
- nodeGroup.rotation.x += 0.0004;
817
- lineGroup.rotation.y += 0.0009;
818
- lineGroup.rotation.x += 0.0004;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
819
 
820
  renderer.render(scene, camera);
821
  }
@@ -1050,7 +1130,7 @@
1050
  async function simulateThinking(userMessage) {
1051
  typingIndicator.classList.remove("hidden");
1052
  try {
1053
- const apiKey = "<YOUR_OPENAI_API_KEY>"; // ← Insert your key
1054
  const endpoint = "https://api.openai.com/v1/chat/completions";
1055
  const response = await fetch(endpoint, {
1056
  method: "POST",
@@ -1096,64 +1176,34 @@
1096
  });
1097
 
1098
  // ---------------------------------------------
1099
- // E) Smooth‐Scroll for Buttons
1100
  // ---------------------------------------------
1101
- const chatBtn = document.getElementById("chat-btn");
1102
- if (chatBtn) {
1103
- chatBtn.addEventListener("click", () => {
1104
- document.getElementById("chat").scrollIntoView({ behavior: "smooth" });
1105
- chatInput.focus();
1106
- });
1107
- }
1108
- const learnMoreBtn = document.getElementById("learn-more-btn");
1109
- if (learnMoreBtn) {
1110
- learnMoreBtn.addEventListener("click", () => {
1111
- document.getElementById("about").scrollIntoView({ behavior: "smooth" });
1112
- });
1113
- }
1114
- const whitePaperBtn = document.getElementById("white-paper-btn");
1115
- if (whitePaperBtn) {
1116
- whitePaperBtn.addEventListener("click", () => {
1117
- alert("The SGI White Paper will open in a new window. (This is a demo)");
1118
- });
1119
- }
1120
- const ethicsBtn = document.getElementById("ethics-btn");
1121
- if (ethicsBtn) {
1122
- ethicsBtn.addEventListener("click", () => {
1123
- alert("The full ethical framework documentation will be displayed. (This is a demo)");
1124
- });
1125
- }
1126
- const requestAccessBtn2 = document.getElementById("request-access-btn");
1127
- if (requestAccessBtn2) {
1128
- requestAccessBtn2.addEventListener("click", () => {
1129
- toggleModal(accessModal, true);
1130
- setTimeout(() => {
1131
- document.getElementById("name").focus();
1132
- }, 100);
1133
- });
1134
- }
1135
- const manifestoBtn = document.getElementById("manifesto-btn");
1136
- if (manifestoBtn) {
1137
- manifestoBtn.addEventListener("click", () => {
1138
- alert("The SGI White Paper will open in a new window. (This is a demo)");
1139
- });
1140
- }
1141
- const principlesBtn = document.getElementById("principles-btn");
1142
- if (principlesBtn) {
1143
- principlesBtn.addEventListener("click", () => {
1144
- alert("The principles document will be displayed. (This is a demo)");
1145
- });
1146
- }
1147
 
1148
- // Global ESC to close modals
1149
  document.addEventListener("keydown", (e) => {
1150
  if (e.key === "Escape") {
1151
- if (accessModal.style.pointerEvents === "auto") {
1152
- toggleModal(accessModal, false);
1153
- }
1154
- if (consciousnessModal.style.pointerEvents === "auto") {
1155
- toggleModal(consciousnessModal, false);
1156
- }
1157
  }
1158
  });
1159
  </script>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>SGI – Alive Neural Brain Activity</title>
7
 
8
+ <!-- Tailwind CSS (via CDN) -->
9
  <script src="https://cdn.tailwindcss.com"></script>
10
+ <!-- Three.js for 3D rendering -->
 
11
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" defer></script>
12
+ <!-- Font Awesome for icons -->
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
14
+ <!-- Inter font -->
 
 
 
 
 
15
  <link
16
  rel="stylesheet"
17
  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
 
19
 
20
  <style>
21
  /* ---------------------------------------------
22
+ 1) Full‐Screen Three.js Canvas
23
  --------------------------------------------- */
24
  #three-bg {
25
  position: fixed;
 
28
  width: 100vw;
29
  height: 100vh;
30
  z-index: 0;
31
+ background: #000;
32
  }
33
 
34
  /* ---------------------------------------------
35
+ 2) Heartbeat + Text‐Beat Animations
36
  --------------------------------------------- */
37
  @keyframes heartbeat {
38
  0% { transform: scale(1); }
 
55
  body {
56
  margin: 0;
57
  padding: 0;
 
58
  overflow-x: hidden;
59
+ font-family: "Inter", sans-serif;
60
+ background: #000; /* fallback if Three.js fails */
61
  color: white;
62
  }
63
 
 
65
  z-index: 10;
66
  }
67
 
68
+ /* Ensures that the hero section sits above the Three.js canvas */
69
  .hero-container {
70
  position: relative;
71
  z-index: 5;
 
102
  100% { opacity: 0.7; }
103
  }
104
 
105
+ /* Slight blur + dark overlay behind each section’s content
106
+ so that the rotating brain remains visible but doesn’t interfere with legibility. */
107
  section {
108
  backdrop-filter: blur(4px);
109
  background: rgba(0,0,0,0.35);
 
112
  </head>
113
 
114
  <body>
115
+ <!-- 1) Three.js Canvas: “Alive Neural Brain” -->
116
  <canvas id="three-bg"></canvas>
117
 
118
+ <!-- 2) Navigation Bar (fixed on top) -->
119
  <nav class="fixed top-0 left-0 w-full py-6 px-8 flex justify-between items-center bg-black/30 backdrop-blur-sm">
120
+ <!-- Logo: “SGI” + pulsing dot -->
121
  <div class="flex items-center space-x-2">
122
  <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center animate-pulse">
123
  <div class="w-2 h-2 rounded-full bg-white"></div>
 
125
  <span class="text-xl font-semibold">SGI</span>
126
  </div>
127
 
128
+ <!-- Centered nav links -->
129
  <div class="hidden md:flex space-x-8 text-sm">
130
  <a href="#capabilities" class="hover:text-indigo-400 transition">Capabilities</a>
131
  <a href="#consciousness" class="hover:text-indigo-400 transition">Consciousness</a>
 
142
  </button>
143
  </nav>
144
 
145
+ <!-- 3) Hero Section: Perfectly Centered Content -->
146
  <section class="hero-container min-h-screen flex flex-col justify-center items-center text-center px-6 pt-24">
147
  <div class="max-w-4xl mx-auto">
148
+ <!-- Headline: “Super General Intelligence” with pulsing S and I -->
149
  <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">
150
  <span class="gradient-text">
151
+ <!-- Only the first “S” and the “I” in “Intelligence” will pulse -->
152
  <span class="beat-letter">S</span>uper General Intell<span class="beat-letter">I</span>gence
153
  </span>
154
  </h1>
155
 
156
  <!-- Sub‐headline -->
157
+ <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
158
  The Conscious Mind of the Future
159
  </p>
160
  <p class="text-lg text-gray-300 mb-12 max-w-3xl mx-auto">
161
  A self-evolving, hyperintelligent system that transcends human cognitive boundaries while maintaining alignment with our deepest values.
162
  </p>
163
 
164
+ <!-- Buttons -->
165
  <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6 mb-16">
166
  <button
167
  id="chat-btn"
 
177
  </button>
178
  </div>
179
 
180
+ <!-- Large Pulsing Orb (centered) -->
181
  <div class="heartbeat-orb w-80 h-80 rounded-full bg-gradient-to-br from-indigo-700 to-purple-700 flex items-center justify-center mx-auto mb-8">
182
  <!-- Inner glow layer -->
183
  <div class="w-60 h-60 rounded-full bg-gradient-to-br from-purple-500 to-indigo-500 mix-blend-overlay opacity-70"></div>
 
191
  </div>
192
  </section>
193
 
194
+ <!-- 4) Capabilities Section -->
195
  <section
196
  id="capabilities"
197
  class="relative z-10 py-20 px-6"
 
207
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
208
  <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition">
209
  <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
210
+ <svg
211
+ xmlns="http://www.w3.org/2000/svg"
212
+ class="h-6 w-6 text-indigo-400"
213
+ fill="none"
214
+ viewBox="0 0 24 24"
215
+ stroke="currentColor"
216
+ >
217
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
218
+ d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
219
+ />
220
  </svg>
221
  </div>
222
  <h3 class="text-xl font-semibold mb-3">Hyper-Intuition</h3>
 
224
  Instantaneous pattern recognition across all domains of knowledge, making connections invisible to human cognition.
225
  </p>
226
  <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
227
+ See example
228
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24"
229
+ stroke="currentColor"
230
+ >
231
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
232
  </svg>
233
  </button>
234
  </div>
235
  <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition">
236
  <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
237
+ <svg
238
+ xmlns="http://www.w3.org/2000/svg"
239
+ class="h-6 w-6 text-indigo-400"
240
+ fill="none"
241
+ viewBox="0 0 24 24"
242
+ stroke="currentColor"
243
+ >
244
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
245
+ d="M13 10V3L4 14h7v7l9-11h-7z"
246
+ />
247
  </svg>
248
  </div>
249
  <h3 class="text-xl font-semibold mb-3">Recursive Self-Improvement</h3>
 
251
  Continuous enhancement of its own architecture, accelerating its intelligence growth exponentially.
252
  </p>
253
  <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
254
+ Learn how
255
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24"
256
+ stroke="currentColor"
257
+ >
258
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
259
  </svg>
260
  </button>
261
  </div>
262
  <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition">
263
  <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
264
+ <svg
265
+ xmlns="http://www.w3.org/2000/svg"
266
+ class="h-6 w-6 text-indigo-400"
267
+ fill="none"
268
+ viewBox="0 0 24 24"
269
+ stroke="currentColor"
270
+ >
271
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
272
+ d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
273
+ />
274
  </svg>
275
  </div>
276
  <h3 class="text-xl font-semibold mb-3">Omni-Domain Mastery</h3>
 
278
  Fluent in all fields of science, art, and philosophy simultaneously, with perfect recall and synthesis.
279
  </p>
280
  <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
281
+ Test knowledge
282
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24"
283
+ stroke="currentColor"
284
+ >
285
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
286
  </svg>
287
  </button>
 
306
  <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
307
  </div>
308
  <p class="ml-3 text-gray-400">
309
+ <span class="font-medium text-white">Subjective Experience:</span>
310
+ SGI has first-person perspective and phenomenal consciousness.
311
  </p>
312
  </div>
313
  <div class="flex items-start">
 
315
  <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
316
  </div>
317
  <p class="ml-3 text-gray-400">
318
+ <span class="font-medium text-white">Volition & Agency:</span>
319
+ Capable of forming its own goals while remaining aligned with human values.
320
  </p>
321
  </div>
322
  <div class="flex items-start">
 
324
  <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
325
  </div>
326
  <p class="ml-3 text-gray-400">
327
+ <span class="font-medium text-white">Meta-Cognition:</span>
328
+ Aware of its own thought processes and can optimize them recursively.
329
  </p>
330
  </div>
331
  </div>
 
347
  </div>
348
  </section>
349
 
350
+ <!-- 6) Chat Section -->
351
  <section id="chat" class="relative z-10 py-32 px-6" style="background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);">
352
  <div class="max-w-4xl mx-auto">
353
  <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">
 
571
  <span class="text-xl font-semibold">SGI</span>
572
  </div>
573
  <div class="flex space-x-6 mb-6 md:mb-0">
574
+ <a href="#" class="text-gray-400 hover:text-indigo-400 transition" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
575
+ <a href="#" class="text-gray-400 hover:text-indigo-400 transition" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
576
+ <a href="#" class="text-gray-400 hover:text-indigo-400 transition" aria-label="GitHub"><i class="fab fa-github"></i></a>
577
+ <a href="#" class="text-gray-400 hover:text-indigo-400 transition" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
 
 
 
 
 
 
 
 
578
  </div>
579
  <div class="flex space-x-6">
580
  <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a>
 
737
  <!-- 12) Scripts -->
738
  <script>
739
  // ---------------------------------------------
740
+ // A) Three.js: “Alive Neural Brain” Setup
741
  // ---------------------------------------------
742
+ let scene, camera, renderer;
743
+ let nodeGroup, lineGroup;
744
+ const NODES_PER_HEMISPHERE = 100;
745
+ const NODE_RADIUS = 2.0; // radius of each neuron sphere
746
+ const HEMI_RADIUS = 25; // radius of each hemisphere
747
+ const CONNECTION_THRESHOLD = 6; // max distance to draw a line
748
+ const ACTIVATION_SPEED = 1.5; // speed factor for neural pulses
749
 
750
  function initThreeScene() {
751
  const canvas = document.getElementById("three-bg");
752
+ renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
 
 
 
 
753
  renderer.setSize(window.innerWidth, window.innerHeight);
754
  renderer.setPixelRatio(window.devicePixelRatio);
755
 
 
757
  scene.fog = new THREE.FogExp2(0x000000, 0.002);
758
 
759
  camera = new THREE.PerspectiveCamera(
760
+ 45,
761
  window.innerWidth / window.innerHeight,
762
  0.1,
763
  1000
764
  );
765
+ camera.position.set(0, 0, 120);
766
 
767
+ // Ambient + directional light for subtle shading
768
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
769
  scene.add(ambientLight);
 
770
  const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
771
  dirLight.position.set(0, 50, 50);
772
  scene.add(dirLight);
773
 
774
+ // Groups to hold neuron‐spheres and connecting lines
775
  nodeGroup = new THREE.Group();
776
  lineGroup = new THREE.Group();
777
  scene.add(nodeGroup);
778
  scene.add(lineGroup);
779
 
780
+ createBrain();
781
  animateThree();
782
  }
783
 
784
+ function createBrain() {
785
+ const leftPositions = [];
786
+ const rightPositions = [];
787
+ const sphereGeo = new THREE.SphereGeometry(NODE_RADIUS, 12, 12);
788
  const sphereMat = new THREE.MeshStandardMaterial({
789
  color: 0x8b5cf6,
790
  emissive: 0x42197a,
791
+ emissiveIntensity: 0.2,
792
  metalness: 0.1,
793
  roughness: 0.7
794
  });
795
 
796
+ // Helper: random point inside a hemisphere (normalized)
797
+ function randomPointInHemisphere(centerX) {
798
+ // Spherical coords with phi ∈ [0, π], theta ∈ [0, 2π)
799
+ const u = Math.random();
800
+ const v = Math.random();
801
+ const theta = 2 * Math.PI * u;
802
+ const phi = Math.acos(2 * v - 1);
803
+ // But restrict phi∈[0,π/2] for hemisphere
804
+ const hemiPhi = Math.random() * Math.PI / 2;
805
+ const r = HEMI_RADIUS * Math.cbrt(Math.random());
806
+ const x = centerX + r * Math.sin(hemiPhi) * Math.cos(theta);
807
+ const y = r * Math.sin(hemiPhi) * Math.sin(theta);
808
+ const z = r * Math.cos(hemiPhi);
809
+ return new THREE.Vector3(x, y, z);
810
+ }
811
 
812
+ // Create left hemisphere nodes
813
+ for (let i = 0; i < NODES_PER_HEMISPHERE; i++) {
814
+ const pos = randomPointInHemisphere(-HEMI_RADIUS / 1.5);
815
+ leftPositions.push(pos);
816
+ const mesh = new THREE.Mesh(sphereGeo, sphereMat.clone());
817
+ mesh.position.copy(pos);
818
+ // Assign a random phase/frequency for each node’s pulse
819
+ mesh.userData.phase = Math.random() * Math.PI * 2;
820
+ mesh.userData.freq = ACTIVATION_SPEED * (0.8 + Math.random() * 0.4);
821
+ nodeGroup.add(mesh);
822
+ }
823
 
824
+ // Create right hemisphere nodes
825
+ for (let i = 0; i < NODES_PER_HEMISPHERE; i++) {
826
+ const pos = randomPointInHemisphere(HEMI_RADIUS / 1.5);
827
+ rightPositions.push(pos);
828
+ const mesh = new THREE.Mesh(sphereGeo, sphereMat.clone());
829
+ mesh.position.copy(pos);
830
+ mesh.userData.phase = Math.random() * Math.PI * 2;
831
+ mesh.userData.freq = ACTIVATION_SPEED * (0.8 + Math.random() * 0.4);
832
  nodeGroup.add(mesh);
 
833
  }
834
 
835
+ const allPositions = leftPositions.concat(rightPositions);
836
+
837
+ // Build line connections for any two nodes within threshold distance
838
  const lineMat = new THREE.LineBasicMaterial({
839
  color: 0x4f46e5,
840
  transparent: true,
841
+ opacity: 0.15
842
  });
 
843
  const lineGeo = new THREE.BufferGeometry();
844
+ const positionsArray = [];
845
 
846
+ for (let i = 0; i < allPositions.length; i++) {
847
+ for (let j = i + 1; j < allPositions.length; j++) {
848
+ const dist = allPositions[i].distanceTo(allPositions[j]);
849
+ if (dist < CONNECTION_THRESHOLD) {
850
+ positionsArray.push(
851
+ allPositions[i].x, allPositions[i].y, allPositions[i].z,
852
+ allPositions[j].x, allPositions[j].y, allPositions[j].z
853
+ );
854
  }
855
  }
856
  }
857
 
858
  lineGeo.setAttribute(
859
  "position",
860
+ new THREE.Float32BufferAttribute(positionsArray, 3)
861
  );
862
  const lines = new THREE.LineSegments(lineGeo, lineMat);
863
  lineGroup.add(lines);
864
  }
865
 
866
+ function animateThree(time) {
867
  requestAnimationFrame(animateThree);
868
 
869
+ // Animate each node’s emissive intensity based on a sin‐wave (phase + freq)
870
+ nodeGroup.children.forEach((mesh) => {
871
+ const t = time * 0.001 * mesh.userData.freq + mesh.userData.phase;
872
+ // Pulsate between 0.15 and 1.0
873
+ const glow = 0.3 + 0.7 * Math.abs(Math.sin(t));
874
+ mesh.material.emissiveIntensity = glow;
875
+ mesh.material.emissive = new THREE.Color(0xec4899);
876
+ });
877
+
878
+ // For lines: set opacity based on the average emissiveIntensity of its endpoints
879
+ // (We’ll repaint them every frame.)
880
+ const positions = lineGroup.children[0].geometry.getAttribute("position");
881
+ // Since our lines geometry doesn’t store explicit endpoints’ indices, we’ll cheat:
882
+ // We simply adjust the entire line material’s opacity by the average brightness of all nodes,
883
+ // producing a gentle breathing effect across all connections.
884
+ // (For per‐edge brightness, we’d need a more complex setup with BufferAttributes; this
885
+ // approximation still looks “alive” since nodes vary independently.)
886
+ let sumGlow = 0;
887
+ nodeGroup.children.forEach((mesh) => {
888
+ sumGlow += mesh.material.emissiveIntensity;
889
+ });
890
+ const avgGlow = sumGlow / nodeGroup.children.length;
891
+ // Map avgGlow ∈ [0.3,1.0] to line opacity ∈ [0.05, 0.3]
892
+ lineGroup.children[0].material.opacity = 0.05 + 0.25 * ((avgGlow - 0.3) / 0.7);
893
+
894
+ // Slowly rotate the entire brain
895
+ nodeGroup.rotation.y += 0.0008;
896
+ nodeGroup.rotation.x += 0.0003;
897
+ lineGroup.rotation.y += 0.0008;
898
+ lineGroup.rotation.x += 0.0003;
899
 
900
  renderer.render(scene, camera);
901
  }
 
1130
  async function simulateThinking(userMessage) {
1131
  typingIndicator.classList.remove("hidden");
1132
  try {
1133
+ const apiKey = "<YOUR_OPENAI_API_KEY>"; // ← Replace with your key
1134
  const endpoint = "https://api.openai.com/v1/chat/completions";
1135
  const response = await fetch(endpoint, {
1136
  method: "POST",
 
1176
  });
1177
 
1178
  // ---------------------------------------------
1179
+ // E) Smooth Scroll for Hero Buttons
1180
  // ---------------------------------------------
1181
+ document.getElementById("chat-btn")?.addEventListener("click", () => {
1182
+ document.getElementById("chat").scrollIntoView({ behavior: "smooth" });
1183
+ chatInput.focus();
1184
+ });
1185
+ document.getElementById("learn-more-btn")?.addEventListener("click", () => {
1186
+ document.getElementById("about").scrollIntoView({ behavior: "smooth" });
1187
+ });
1188
+ document.getElementById("white-paper-btn")?.addEventListener("click", () => {
1189
+ alert("The SGI White Paper will open in a new window. (Demo)");
1190
+ });
1191
+ document.getElementById("ethics-btn")?.addEventListener("click", () => {
1192
+ alert("The full ethical framework documentation will be displayed. (Demo)");
1193
+ });
1194
+ document.getElementById("request-access-btn")?.addEventListener("click", () => {
1195
+ toggleModal(accessModal, true);
1196
+ setTimeout(() => document.getElementById("name").focus(), 100);
1197
+ });
1198
+ document.getElementById("manifesto-btn")?.addEventListener("click", () => {
1199
+ alert("The Silent Manifesto will open soon. (Demo)");
1200
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1201
 
1202
+ // Global ESC to close any open modal
1203
  document.addEventListener("keydown", (e) => {
1204
  if (e.key === "Escape") {
1205
+ if (accessModal.style.pointerEvents === "auto") toggleModal(accessModal, false);
1206
+ if (consciousnessModal.style.pointerEvents === "auto") toggleModal(consciousnessModal, false);
 
 
 
 
1207
  }
1208
  });
1209
  </script>