added particles.min.js

static/css/extras.css

@@ -31,3 +31,12 @@
     margin: 0 auto;
     border-radius: 10px;
 }
+
+#particles-js {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1; /* This value must be lower than other elements! */
+}

static/css/main.css

@@ -159,10 +159,10 @@ input, select, textarea {
 		}
 
 	a {
-		-moz-transition: color 0.2s ease, border-bottom 0.2s ease;
+		-moz-transition: color 0.3s ease, border-bottom 0.3s ease;
-		-webkit-transition: color 0.2s ease, border-bottom 0.2s ease;
+		-webkit-transition: color 0.3s ease, border-bottom 0.3s ease;
-		-ms-transition: color 0.2s ease, border-bottom 0.2s ease;
+		-ms-transition: color 0.3s ease, border-bottom 0.3s ease;
-		transition: color 0.2s ease, border-bottom 0.2s ease;
+		transition: color 0.3s ease, border-bottom 0.3s ease;
 		text-decoration: none;
 		border-bottom: dotted 1px;
 		color: inherit;
@@ -1836,10 +1836,10 @@ input, select, textarea {
 		-webkit-appearance: none;
 		-ms-appearance: none;
 		appearance: none;
-		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		-moz-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		-webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		-ms-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
 		border-radius: 8px;
 		border: 0;
 		cursor: pointer;
@@ -2218,10 +2218,10 @@ input, select, textarea {
 
 .icon {
     text-decoration: none;
-    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    -moz-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    -ms-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
     border-bottom: none;
     position: relative;
 }
@@ -3220,10 +3220,10 @@ input, select, textarea {
 /* Nav */
 
 	#nav {
-		-moz-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
+		-moz-transition: background-color 0.3s ease, border-top-left-radius 0.3s ease, border-top-right-radius 0.3s ease, padding 0.3s ease;
-		-webkit-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
+		-webkit-transition: background-color 0.3s ease, border-top-left-radius 0.3s ease, border-top-right-radius 0.3s ease, padding 0.3s ease;
-		-ms-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
+		-ms-transition: background-color 0.3s ease, border-top-left-radius 0.3s ease, border-top-right-radius 0.3s ease, padding 0.3s ease;
-		transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
+		transition: background-color 0.3s ease, border-top-left-radius 0.3s ease, border-top-right-radius 0.3s ease, padding 0.3s ease;
 		background-color: #0a0a0a;
 		color: #fafafa;
 		position: absolute;
@@ -3277,10 +3277,10 @@ input, select, textarea {
 		}
 
 			#nav ul li {
-				-moz-transition: margin 0.2s ease;
+				-moz-transition: margin 0.3s ease;
-				-webkit-transition: margin 0.2s ease;
+				-webkit-transition: margin 0.3s ease;
-				-ms-transition: margin 0.2s ease;
+				-ms-transition: margin 0.3s ease;
-				transition: margin 0.2s ease;
+				transition: margin 0.3s ease;
 				display: inline-block;
 				margin: 0 0.35em;
 				padding: 0;
@@ -3288,10 +3288,10 @@ input, select, textarea {
 			}
 
 				#nav ul li a {
-					-moz-transition: font-size 0.2s ease;
+					-moz-transition: font-size 0.3s ease;
-					-webkit-transition: font-size 0.2s ease;
+					-webkit-transition: font-size 0.3s ease;
-					-ms-transition: font-size 0.2s ease;
+					-ms-transition: font-size 0.3s ease;
-					transition: font-size 0.2s ease;
+					transition: font-size 0.3s ease;
 					display: inline-block;
 					height: 2.25em;
 					line-height: 2.25em;
@@ -3301,15 +3301,19 @@ input, select, textarea {
 					box-shadow: inset 0 0 0 1px transparent;
 				}
 
-					#nav ul li a:hover {
-						background-color: #080808;
-					}
-
 					#nav ul li a.active {
-						background-color: #000000;
+						transition: all 0.3s ease;
+						background-color: #1a1a1a;
 						box-shadow: none;
 					}
 
+					#nav ul li a:hover {
+						transition: all 0.3s ease;
+						background-color: #000000;
+					}
+
+
+
 		#nav.alt {
 			position: fixed;
 			top: 0;

static/js/particlesjs-config-alt.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 160,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 1,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 1,
+        "opacity_min": 0,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 4,
+        "size_min": 0.3,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": false,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 1,
+      "direction": "none",
+      "random": true,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 600
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": true,
+        "mode": "bubble"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "repulse"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 250,
+        "size": 0,
+        "duration": 2,
+        "opacity": 0,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 400,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}

static/js/particlesjs-config.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 160,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 10,
+        "height": 10
+      }
+    },
+    "opacity": {
+      "value": 0.7,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 0.47948982282851027,
+        "opacity_min": 0,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 2,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 4,
+        "size_min": 0.3,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": false,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 0,
+      "direction": "none",
+      "random": true,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 600
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": true,
+        "mode": "bubble"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "repulse"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 250,
+        "size": 0,
+        "duration": 2,
+        "opacity": 0,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 400,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}

templates/download-linux.html

@@ -31,7 +31,7 @@
         </div>
 
         <!-- Top Floater Footer -->
-        <div style="background-color: red; color: white; text-align: center; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 1000;">
+        <div style="background-color: red; color: white; text-align: center; padding: 10px 0; position: fixed; bottom: 0; width: 100%; z-index: 1000;">
             🚧👷‍♂️ This site is under construction! Please check back later. 👷‍♀️🚧
         </div>
 

templates/download.html

@@ -68,7 +68,7 @@
     </div>
 
     <!-- Top Floater Footer -->
-    <div style="background-color: red; color: white; text-align: center; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 1000;">
+    <div style="background-color: red; color: white; text-align: center; padding: 10px 0; position: fixed; bottom: 0; width: 100%; z-index: 1000;">
         🚧👷‍♂️ This site is under construction! Please check back later. 👷‍♀️🚧
     </div>
 

templates/index.html

@@ -28,13 +28,16 @@
 
         <!-- Star Background Divs -->
         <div id="star-background">
+            <div id="particles-js"></div>
+            <noscript>
                 <div id="stars"></div>
                 <div id="stars2"></div>
                 <div id="stars3"></div>
+            </noscript>
         </div>
 
         <!-- Top Floater Footer -->
-        <div style="background-color: red; color: white; text-align: center; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 1000;">
+        <div style="background-color: red; color: white; text-align: center; padding: 10px 0; position: fixed; bottom: 0; width: 100%; z-index: 1000;">
             🚧👷‍♂️ This site is under construction! Please check back later. 👷‍♀️🚧
         </div>
 
@@ -130,7 +133,7 @@
                         <h2>Try Searching</h2>
                         <p></p>
                     </header>
-                    <iframe src="https://search.spitfirebrowser.com" width="100%" height="600px" style="border:none; border-radius: 10px; overflow:hidden;"></iframe>
+                    <iframe src="https://search.spitfirebrowser.com" width="100%" height="700px" style="border:none; border-radius: 10px; overflow:hidden;"></iframe>
                 </section>
                 
                 <!-- Security Section -->
@@ -206,13 +209,13 @@
                             </a>
                         </li>
                         <li>
-                            <a href="#" class="icon alt">
+                            <a href="https://weforgecode.xyz/Spitfire" class="icon alt">
                                 <img src="/static/images/icons/brands/git-alt.svg" alt="Forgejo">
                                 <span class="label">Forgejo</span>
                             </a>
                         </li>
                         <li>
-                            <a href="#" class="icon alt">
+                            <a href="https://www.youtube.com/@Internet.Addict" class="icon alt">
                                 <img src="/static/images/icons/brands/youtube.svg" alt="YouTube">
                                 <span class="label">YouTube</span>
                             </a>
@@ -236,6 +239,13 @@
         <script src="/static/js/util.js" defer></script>
         <script src="/static/js/main.js" defer></script>
         <script src="/static/js/slick-conf.js" defer></script>
+        <script src="/static/js/particles.min.js"></script>
+        <script>
+            /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
+            particlesJS.load('particles-js', '/static/js/particlesjs-config.json', function() {
+            console.log('callback - particles.js config loaded');
+            });
+        </script>
         
         </script>
     </body>

templates/news.html

@@ -27,15 +27,18 @@
 
     <!-- Star Background Divs -->
     <div id="star-background">
+        <div id="particles-js"></div>
+        <noscript>
             <div id="stars"></div>
             <div id="stars2"></div>
             <div id="stars3"></div>
+        </noscript>
     </div>
 
-    <!-- Top Floater Footer -->
+    <!-- Top Floater Footer
     <div style="background-color: red; color: white; text-align: center; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 1000;">
         🚧👷‍♂️ This site is under construction! Please check back later. 👷‍♀️🚧
-    </div>
+    </div> -->
 
     <!-- Wrapper -->
     <div id="wrapper">
@@ -116,6 +119,13 @@
     <script src="/static/js/breakpoints.min.js" defer></script>
     <script src="/static/js/util.js" defer></script>
     <script src="/static/js/main.js" defer></script>
+    <script src="/static/js/particles.min.js"></script>
+    <script>
+        /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
+        particlesJS.load('particles-js', '/static/js/particlesjs-config.json', function() {
+        console.log('callback - particles.js config loaded');
+        });
+    </script>
 
 </body>
 </html>