tsparticles · Khushalsarode · Oct 28, 2023
diff --git a/__screenshots/maxtrickdark.png b/__screenshots/maxtrickdark.png
diff --git a/data/pages.json b/data/pages.json
@@ -1,4 +1,9 @@
 [
+  {
+    "description": "maxtricks 404",
+    "imageUrl": "https://raw.githubusercontent.com/tsparticles/404-templates/main/__screenshots/maxtrickdark.png?raw=true",
+    "url": "maxtricks/404.html"
+  },
   {
     "description": "Glitch 404",
     "imageUrl": "https://raw.githubusercontent.com/tsparticles/404-templates/main/__screenshots/glitch.png?raw=true",

diff --git a/maxtricks/404.html b/maxtricks/404.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 Error - Secret Page</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap">
+    <link rel="stylesheet" href="styles.css"> <!-- Link to the CSS file -->
+
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-1752YPLP7H"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-1752YPLP7H");
+    </script>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Nerko+One&display=swap" rel="stylesheet"/>
+
+</head>
+    <div id="tsparticles"></div>
+    <body class="light-mode">
+        <div class="toggle-button"></div>
+        <div class="error-container">
+            <h1 class="error-text">404</h1>
+            <p class="secret-text">You found the secret page of the website! 🚀🌌</p>
+            <p class="joke">Why did the developer go broke? Because he used up all his cache! 😄</p>
+            <a href="/" class="back-button">Back to Home</a>
+
+        </div>
+    <script>
+      // Toggle button functionality
+const toggleButton = document.querySelector(".toggle-button");
+
+toggleButton.addEventListener("click", () => {
+  document.body.classList.toggle("dark-mode");
+});
+
+    </script>
+<!-- https://github.com/matteobruni/tsparticles -->
+<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tsparticles@2/tsparticles.bundle.min.js"></script>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/maxtricks/script.js b/maxtricks/script.js
@@ -0,0 +1,79 @@
+document.addEventListener("DOMContentLoaded", function () {
+  // Your code that uses tsParticles goes here
+  tsParticles.load("tsparticles", {
+    fps_limit: 60,
+    interactivity: {
+      detect_on: "canvas",
+      events: {
+        onclick: { enable: true, mode: "push" },
+        onhover: {
+          enable: true,
+          mode: "attract",
+          parallax: { enable: false, force: 60, smooth: 10 },
+        },
+        resize: true,
+      },
+      modes: {
+        push: { quantity: 4 },
+        attract: { distance: 200, duration: 0.4, factor: 5 },
+      },
+    },
+    particles: {
+      color: { value: "#ffffff" },
+      line_linked: {
+        color: "#ffffff",
+        distance: 150,
+        enable: true,
+        opacity: 0.4,
+        width: 1,
+      },
+      move: {
+        attract: { enable: false, rotateX: 600, rotateY: 1200 },
+        bounce: false,
+        direction: "none",
+        enable: true,
+        out_mode: "out",
+        random: false,
+        speed: 2,
+        straight: false,
+      },
+      number: { density: { enable: true, value_area: 800 }, value: 80 },
+      opacity: {
+        anim: { enable: false, opacity_min: 0.1, speed: 1, sync: false },
+        random: false,
+        value: 0.5,
+      },
+      shape: {
+        character: {
+          fill: false,
+          font: "Verdana",
+          style: "",
+          value: "*",
+          weight: "400",
+        },
+        image: {
+          height: 100,
+          replace_color: true,
+          src: "images/github.svg",
+          width: 100,
+        },
+        polygon: { nb_sides: 5 },
+        stroke: { color: "#000000", width: 0 },
+        type: "circle",
+      },
+      size: {
+        anim: { enable: false, size_min: 0.1, speed: 40, sync: false },
+        random: true,
+        value: 5,
+      },
+    },
+    polygon: {
+      draw: { enable: false, lineColor: "#ffffff", lineWidth: 0.5 },
+      move: { radius: 10 },
+      scale: 1,
+      type: "none",
+      url: "",
+    },
+    retina_detect: true,
+  });
+});