Merge pull request #156 from Khushalsarode/new404template

Adding new 404 error themes
tsparticles · Oct 27, 2024 · 866c699 · 866c699
2 parents 7808215 + 7492e0b
commit 866c699
Show file tree

Hide file tree

Showing 14 changed files with 401 additions and 0 deletions.
diff --git a/__screenshots/galaxy.png b/__screenshots/galaxy.png
diff --git a/__screenshots/starwars.png b/__screenshots/starwars.png
diff --git a/data/pages.json b/data/pages.json
@@ -148,5 +148,15 @@
     "description": "Jitter 404",
     "imageUrl": "https://raw.githubusercontent.com/tsparticles/404-templates/main/__screenshots/jitter.png?raw=true",
     "url": "jitter/404.html"
+  },
+  {
+    "description": "Galaxy 404",
+    "imageUrl": "https://raw.githubusercontent.com/tsparticles/404-templates/main/__screenshots/galaxy.png?raw=true",
+    "url": "galaxy/404.html"
+  },
+  {
+    "description": "Starwars 404",
+    "imageUrl": "https://raw.githubusercontent.com/tsparticles/404-templates/main/__screenshots/starwars.png?raw=true",
+    "url": "starwars/404.html"
   }
 ]
diff --git a/galaxy/404.html b/galaxy/404.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Google tag (gtag.js) -->
+    <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>
+
+    <title>Milky Way | tsParticles 404</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Orbitron"
+      rel="stylesheet"
+    />
+    <link type="text/css" rel="stylesheet" href="css/404.css" />
+    <link rel="icon" type="image/x-icon" href="../images/tsParticles-64.png" />
+  </head>
+
+  <body class="galaxy-background">
+    <!-- tsParticles container -->
+    <div id="tsparticles"></div>
+
+    <div class="galaxy-message">
+      <h3>Oops... something went wrong!</h3>
+      <h2>🚀 404 Not Found 🚀</h2>
+      <h3>The galaxy has hidden this page from us.</h3>
+      <p>It seems the page you were looking for is lost among the stars.</p>
+      <a href="#"
+        ><button id="go_home_button" class="galaxy-link" title="Return Home">
+          Back to the Cosmos
+        </button></a
+      >
+    </div>
+
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/tsparticles@2/tsparticles.bundle.min.js"
+    ></script>
+    <script type="text/javascript" src="js/404.js"></script>
+  </body>
+</html>
diff --git a/galaxy/css/404.css b/galaxy/css/404.css
@@ -0,0 +1,84 @@
+@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");
+
+/** Styles for the 404 Page **/
+
+.galaxy-background,
+#tsparticles {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  margin: 0;
+  overflow: hidden;
+}
+
+#tsparticles {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.galaxy-message {
+  color: #ffffff;
+  max-width: 600px;
+  width: 90%;
+  height: auto;
+  display: block;
+  margin: 0 auto;
+  position: relative;
+  text-align: center;
+  font-family: "Orbitron", sans-serif;
+  z-index: 1;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.galaxy-message h1,
+h2,
+h3,
+p {
+  margin: 0;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.galaxy-message h1 {
+  color: #00f5e4;
+  font-size: 4em;
+  font-weight: bold;
+}
+
+.galaxy-message h2 {
+  color: #ff0044;
+  font-size: 2.5em;
+}
+
+.galaxy-message h3 {
+  color: #ffffff;
+  font-size: 1.5em;
+}
+
+.galaxy-message p {
+  color: #e0e0e0;
+  font-size: 1.2em;
+}
+
+.galaxy-link {
+  background: #ff0044;
+  color: #ffffff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  font-size: 1.2em;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+  margin-top: 20px;
+}
+
+.galaxy-link:hover {
+  background: #ff9f00;
+  color: #000000;
+}
diff --git a/galaxy/image/astroid.png b/galaxy/image/astroid.png
diff --git a/galaxy/js/404.js b/galaxy/js/404.js
@@ -0,0 +1,66 @@
+const particles = {
+  fpsLimit: 60,
+  particles: {
+    number: {
+      value: 500,
+      density: {
+        enable: true,
+        area: 800,
+      },
+    },
+    color: {
+      value: ["#ffffff"],
+      animation: {
+        enable: true,
+        speed: 30,
+        sync: true,
+      },
+    },
+    shape: {
+      type: "image", // Use image shape
+      image: {
+        src: "./image/astroid.png",
+        width: 100,
+        height: 100,
+      },
+    },
+    size: {
+      value: 30,
+      random: {
+        enable: true,
+        minimumValue: 5,
+      },
+    },
+    move: {
+      enable: true,
+      speed: 1,
+      direction: "none",
+      outModes: {
+        default: "out",
+      },
+      path: {
+        delay: {
+          value: 0.5,
+        },
+        generator: (particle, time) => {
+          const angle = time / 1000;
+          const radius = 200;
+          return {
+            x: Math.cos(angle) * radius,
+            y: Math.sin(angle) * radius,
+          };
+        },
+      },
+    },
+    opacity: {
+      value: 0.8,
+      random: {
+        enable: true,
+        minimumValue: 0.3,
+      },
+    },
+  },
+  detectRetina: true,
+};
+
+tsParticles.load("tsparticles", particles);
diff --git a/starwars/404.html b/starwars/404.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Google Analytics -->
+    <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>
+
+    <title>404 | Star Wars Error</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Star+Wars:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="icon" type="image/x-icon" href="star-wars-icon.png" />
+  </head>
+  <body>
+    <!-- tsParticles container -->
+    <div id="tsparticles"></div>
+
+    <div class="error-container">
+      <h1>404 WARS!</h1>
+      <h2>The Force is not with you</h2>
+      <p>It seems the page you are looking for is lost in the galaxy...</p>
+      <a href="#" class="home-button">Return to Home</a>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/tsparticles@2/tsparticles.bundle.min.js"></script>
+    <script src="js/script.js"></script>
+  </body>
+</html>
diff --git a/starwars/css/style.css b/starwars/css/style.css
@@ -0,0 +1,66 @@
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background: #000;
+  color: #fff;
+  font-family: "Star Wars", sans-serif;
+}
+
+#tsparticles {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.error-container {
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+}
+
+.error-container h1 {
+  font-size: 10em;
+  color: #ffcc00;
+  margin: 0;
+  text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.8);
+}
+
+.error-container h2 {
+  font-size: 2em;
+  color: #ffffff;
+  margin: 10px 0;
+  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
+}
+
+.error-container p {
+  font-size: 1.2em;
+  color: #cccccc;
+  margin: 20px 0;
+  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.4);
+}
+
+.home-button {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 1.2em;
+  color: #fff;
+  background-color: #ffcc00; /* Classic Star Wars yellow */
+  text-decoration: none;
+  border-radius: 5px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  transition:
+    background-color 0.3s,
+    box-shadow 0.3s;
+}
+
+.home-button:hover {
+  background-color: #e0b600;
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
+}
diff --git a/starwars/image/deadstar.png b/starwars/image/deadstar.png
diff --git a/starwars/image/ship1.png b/starwars/image/ship1.png
diff --git a/starwars/image/ship2.png b/starwars/image/ship2.png
diff --git a/starwars/image/ship3.png b/starwars/image/ship3.png