Designed the warning in figma and turned it into html and css and have putten it in place in the second and added Github logo in the navbar

Author: Subsussp

homepage.js

@@ -1330,41 +1330,42 @@ function animate(time){
   if(firstRender){
     firstRender = false    
     if(window.scrollY == 0){
-  let timeline = gsap.timeline({
-      defaults:{
-          ease:'power4.inOut',
-          duration:3,
+    let timeline = gsap.timeline({
+        defaults:{
+            ease:'power4.inOut',
+            duration:3,
+        }
+    })
+    timeline.to('#wave2',{
+        scale:1,
+        x:window.innerWidth/ 2 - 60,
+        y:-window.innerHeight/ 2 + 50,
+    })
+    .to('#loader-cont',{
+      opacity:0
+    },"<")
+
+    .to('#wave',{
+          opacity:1,
+          duration:2,
+          onComplete:()=>{
+            opacityallowance = true
+          }
+    })
+    .to(factor,{
+      o:1,
+      duration:2
+      ,onComplete:()=>{
+          document.getElementById('loader-cont').remove()         
+          Loadercanvas.remove()
+          clearInterval(loaderanimationr)
       }
-  })
-  timeline.to('#wave2',{
-      scale:1,
-      x:window.innerWidth/ 2 - 60,
-      y:-window.innerHeight/ 2 + 50,
-  })
-  .to('#loader-cont',{
-    opacity:0
-  },"<")
-
-  .to('#wave',{
-        opacity:1,
+    },"<-.5")
+    .to('#wave2',{
+        opacity:0,
         duration:2,
-        onComplete:()=>{
-          opacityallowance = true
-        }
-  })
-  .to(factor,{
-    o:1,
-    duration:2
-    ,onComplete:()=>{
-        document.getElementById('loader-cont').remove()         
-        Loadercanvas.remove()
-        clearInterval(loaderanimationr)
-    }
-  },"<-.5")
-  .to('#wave2',{
-      opacity:0,
-      duration:2,
-  },'<')
+    },'<')
+
 }else{
   Loadercanvas.remove()
   document.getElementById('loader-cont').remove()         

index.html

@@ -95,7 +95,15 @@
       transform: translateX(-50%);
       opacity: 0;
     }
-
+    .content{
+        font-family: 'Myfont';
+        font-size: 32px;
+        width: calc(100% - 94px);
+    }
+    .Warning::before,
+    .Warning::after {
+      box-sizing: content-box !important;
+    }
     textPath {
       fill: #ffffff;      
       font-family: "MyCustomFont";
@@ -138,6 +146,11 @@
 #Third{
   transform-origin: center;
 }
+    .header{
+        font-family: 'sub';
+        font-size:53px ;
+    }
+
 @font-face {
   font-family: 'Myfont';
   src: url("./fonts/NeueRegradeVariable.ttf") format("truetype");
@@ -156,6 +169,12 @@
   font-style: normal;
   font-display: swap;
 }
+@font-face {
+  font-family: 'sub';
+  src: url('fonts/Subatomic.otf') format('opentype');
+  font-style: normal;
+  font-display: swap;
+}
 
 </style>
  		<script type="importmap">
@@ -419,8 +438,15 @@
       </div> 
     </a>
     <ul style="
-    align-self: center;margin: 0;
+    align-self: center;margin: 0;display: flex;
+    gap: 30px;
+    align-items: center;
 ">
+<a title="Subsussp" target="_blank" href="https://github.com/Subsussp/THE">
+  <svg xmlns="http://www.w3.org/2000/svg" style="scale: 1.5;" width="20" height="20" fill="white" viewBox="0 0 24 24">
+    <path d="M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.87 10.94c.58.1.79-.25.79-.56v-2.17c-3.2.7-3.88-1.54-3.88-1.54-.53-1.34-1.3-1.7-1.3-1.7-1.07-.73.08-.72.08-.72 1.18.08 1.8 1.2 1.8 1.2 1.05 1.8 2.75 1.28 3.42.98.1-.76.41-1.28.75-1.57-2.55-.29-5.23-1.27-5.23-5.65 0-1.25.45-2.27 1.2-3.07-.12-.3-.52-1.5.11-3.12 0 0 .98-.31 3.2 1.17a11.1 11.1 0 0 1 5.82 0c2.22-1.48 3.2-1.17 3.2-1.17.63 1.62.23 2.82.11 3.12.75.8 1.2 1.82 1.2 3.07 0 4.4-2.69 5.36-5.25 5.64.42.36.8 1.08.8 2.18v3.23c0 .31.21.67.8.56A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5z"/>
+  </svg>
+</a>
       <li>
         <div class="disposable">
           <canvas id="wave" style="cursor: pointer;height: 100%;opacity: 0;" class="sfxbtn"></canvas>

src/js/three.js

@@ -7,8 +7,6 @@ import { RenderPass } from 'https://cdn.jsdelivr.net/npm/three@0.158.0/examples/
 import { UnrealBloomPass } from 'https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/postprocessing/UnrealBloomPass.js';
 import { OutputPass } from 'https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/postprocessing/OutputPass.js';
 import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/controls/OrbitControls.js';
-import { fetchaudio } from './fetchaudio.js';
-import { audioCache } from './var/audiocache.js';
 import { GUI } from 'https://cdn.jsdelivr.net/npm/lil-gui@0.18/+esm';
 import { float, If, PI, color, cos, instanceIndex, Loop, mix,atan,vec2,length , mod, sin, instancedArray, Fn, uint, uniform, uniformArray, hash, vec3, vec4, ceil, min, time } from '../../build/three.tsl.js';
 import { listener, sound } from './var/threesound.js';
@@ -21,6 +19,47 @@ let button1 = document.createElement('button')
 const audioLoader = new THREE.AudioLoader();
 let main = document.getElementById('main')
 let currentSceneHandler = null;
+let inject = true
+document.body.insertAdjacentHTML('beforebegin',`<div class="Warning" id="warnin" style="position: absolute;border: 2px solid white;top: 50%;padding-top:44px;left: 50%;transform: translate(-50%,-50%) scale(0.7);transform-origin: center ;display: flex;width: 750px;height: 400px;flex-direction:column;background-color: black;z-index:600">
+	<div>
+		<div style="color: white;text-align: center;" class="header">GPU REQUIRED</div>
+		<svg width="100%" height="20">
+		<line x1="224" y1="10" x2="528" y2="10" stroke="white"/>
+		</svg>
+	</div>
+	<div class="content" style="color: white;width:100%;position: absolute;top: 58%;left: 50%;transform: translate(-50%,-50%);text-align: center;padding: 0 47px;">
+		You need a GPU or at least an integrated one <br /> for the website to work properly, though <br /> integrated GPUs aren't recommended.
+	</div>
+	</div>`)
+function handleClick() {
+  const item = document.getElementById('warnin');
+
+  if (inject && item) {
+    inject = false;
+
+    item.innerHTML = `
+      <div style="font-size: 46px;font-family: 'MyCustomFont1';color: azure;position: absolute;top: 25%;left: 50%;transform: translate(-50%,-50%);text-align: center;width: 100%;">
+        If the website isn't working <span style="color: rgb(133, 23, 23);">properly</span>
+      </div>
+
+      <svg style="width: 100%;height:10%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
+        <line x1="32.5" y1="20" x2="718.5" y2="20" stroke="white"/>
+      </svg>
+
+      <div style="font-size: 48px;font-family: 'MyCustomFont1';color: azure;position: absolute;top: 70%;left: 50%;transform: translate(-50%,-50%);text-align: center;width: 100%;">
+        check out the <a target="_blank" href="https://flavortown.hackclub.com/projects/4068" style="background-color: rgb(24, 20, 20);color: white;text-decoration: none;">\`Demo\`</a> in my repo
+      </div>
+    `;
+  } else if (item && !inject) {
+    item.remove();
+    document.removeEventListener('click', handleClick);
+  }
+}
+
+document.addEventListener('click', handleClick);
+
+
+
 function configaudio(buffer) {
 	minN = 0
 	minh = 0;