update

Tony-Yes · Sep 10, 2023 · 63b2fa8 · 63b2fa8
1 parent 8c55797
commit 63b2fa8
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 3 deletions.
diff --git a/.user.ini b/.user.ini
diff --git a/css/404.css b/css/404.css
@@ -0,0 +1,20 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
+.text-center {
+  position: absolute;
+  width: 30%;
+  border-radius: 2rem;
+  height: calc(30%);
+  top: calc((100% - 30%) / 2);
+  text-align: center;
+  left: calc((100% - 30% )/2);
+  color: white;
+}
+.text-center h1 {
+  font-size: 11em;
+  font-family: "Roboto Mono", sans-serif;
+}
+.text-center h2 {
+  font-family: "Roboto Mono", sans-serif;
+  font-size: 2rem;
+  margin: 0%;
+}
diff --git a/index.html b/index.html
@@ -2,7 +2,12 @@
 <html lang="en" >
 <head>
   <meta charset="UTF-8">
-  <title>What are you fucking doing?</title>
+  <title>404 Not Found</title>
+          <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css"
+        />
+        <link rel="stylesheet" href="./css/404.css" />
 <style>
 @import url(https://fonts.googleapis.com/css?family=Gilda+Display);
 
@@ -234,7 +239,12 @@
 		</span>
  <span class="orange"></span> 
 
-
+        <script
+            type="text/javascript"
+            src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.bundle.min.js"
+        ></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.path.polygon.min.js"></script>
+        <script src="./js/404.js"></script>
 
 </div>
 <br />

diff --git a/js/404.js b/js/404.js
@@ -0,0 +1,130 @@
+(async () => {
+    await loadPolygonPath(tsParticles);
+
+    await tsParticles.load({
+        particles: {
+            color: {
+                value: "#FFFF00",
+                animation: {
+                    enable: true,
+                    speed: 10,
+                },
+            },
+            move: {
+                attract: {
+                    enable: true,
+                    rotate: {
+                        distance: 100,
+                        x: 2000,
+                        y: 2000,
+                    },
+                },
+                direction: "none",
+                enable: true,
+                outModes: {
+                    default: "destroy",
+                },
+                path: {
+                    clamp: true,
+                    enable: true,
+                    delay: {
+                        value: 0,
+                    },
+                    generator: "polygonPathGenerator",
+                    options: {
+                        sides: 4,
+                        turnSteps: 30,
+                        angle: 0,
+                    },
+                },
+                random: true,
+                speed: 15,
+                straight: true,
+                trail: {
+                    fillColor: "#000",
+                    length: 10,
+                    enable: true,
+                },
+            },
+            number: {
+                density: {
+                    enable: true,
+                    area: 800,
+                },
+                value: 0,
+            },
+            opacity: {
+                value: 1,
+            },
+            shape: {
+                type: "square",
+            },
+            size: {
+                value: 4,
+            },
+        },
+        background: {
+            color: "#000",
+        },
+        fullScreen: {
+            zIndex: -1,
+        },
+        emitters: [{
+            direction: "none",
+            rate: {
+                quantity: 10,
+                delay: 0.25,
+            },
+            size: {
+                width: 0,
+                height: 0,
+            },
+            position: {
+                x: 0,
+                y: 0,
+            },
+        },{
+          direction: "none",
+          rate: {
+              quantity: 10,
+              delay: 0.25,
+          },
+          size: {
+              width: 0,
+              height: 0,
+          },
+          position: {
+              x: 100,
+              y: 100,
+          },
+      },{
+        direction: "none",
+        rate: {
+            quantity: 10,
+            delay: 0.25,
+        },
+        size: {
+            width: 0,
+            height: 0,
+        },
+        position: {
+            x: 0,
+            y: 100,
+        },
+    },{
+      direction: "none",
+      rate: {
+          quantity: 10,
+          delay: 0.25,
+      },
+      size: {
+          width: 0,
+          height: 0,
+      },
+      position: {
+          x: 100,
+          y: 0,
+      },
+  },],
+    });
+})();