adding template 404 theme for starwars and galaxy

tsparticles · Aug 25, 2024 · 77bf483 · 77bf483
1 parent 7808215
commit 77bf483
Show file tree

Hide file tree

Showing 11 changed files with 384 additions and 0 deletions.
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,67 @@
+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,33 @@
+<!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,65 @@
+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; /* Classic Star Wars yellow */
+    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
diff --git a/starwars/js/script.js b/starwars/js/script.js
@@ -0,0 +1,84 @@
+const particles = {
+    fpsLimit: 60,
+    particles: {
+      number: {
+        value: 300,
+        density: {
+          enable: true,
+          area: 800
+        }
+      },
+      color: {
+        value: ["#ffffff", "#ffcc00", "#ff0000", "#00ff00", "#0000ff"],
+        animation: {
+          enable: true,
+          speed: 20,
+          sync: true
+        }
+      },
+      shape: {
+        type: "image",
+        image: [
+          {
+            src: "./image/deadstar.png", // Replace with path to your custom SVG
+            width: 100,
+            height: 100
+          },
+          {
+            src: "./image/ship1.png", // Replace with path to your custom SVG
+            width: 100,
+            height: 100
+          },
+          {
+            src: "./image/ship2.png", // Replace with path to your custom SVG
+            width: 100,
+            height: 100
+          },
+          {
+            src: "./image/ship3.png", // Replace with path to your custom SVG
+            width: 100,
+            height: 100
+          }
+        ]
+      },
+      size: {
+        value: 25,
+        random: {
+          enable: true,
+          minimumValue: 3
+        }
+      },
+      move: {
+        enable: true,
+        speed: 1.5,
+        direction: "none",
+        outModes: {
+          default: "out"
+        },
+        path: {
+          delay: {
+            value: 0.2
+          },
+          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.4
+        }
+      }
+    },
+    detectRetina: true
+  };
+
+  tsParticles.load("tsparticles", particles);
+