added img slider

README.md

@@ -1,14 +1,16 @@
-# Spitfire Browser Website
+<div style="text-align: center;">
+  <img src="https://weforgecode.xyz/Spitfire/Branding/raw/branch/main/icon5.svg" alt="Logo" style="width: 64px; height: 64px;">
+</div>
 
-Spitfire Browser is a fast, secure, and elegant web browser built on Firefox. This repository contains the source code for the Spitfire Browser's official website.
+<h1 style="text-align: center;">Spitfire Browser Website</h1>
+
+Unlike some other browser sites flexing with their 98.8% TypeScript (yikes), i keep it cool with minimal JavaScript just enough to get the job done, no extra BS.
+
+Spitfire Browser's website is built without Next.js, TypeScript, and Tailwind CSS or any other bullshit.
 
 ## TO-DO:
 
-- [ ] Add screenshots
-- [X] Add search-engine test
-- [ ] Add working downloads
-- [X] Add blog/updates
-- [ ] Add config file
+- [ ] Add browser download/screenshots for this web browser website (optional)
 
 ### Blog entries should be fromated this way:
 

static/css/fancy-gallery.css

@@ -1,64 +1,138 @@
-.fancy-gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-    gap: 20px;
-    margin-top: 30px;
-}
-
-.gallery-item {
+/* Adjust the gallery wrapper */
+.gallery-wrapper {
     position: relative;
-    overflow: hidden;
-    border-radius: 15px;
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-    transform: scale(1);
-    transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out;
-}
-
-.gallery-item img {
     width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.6s ease, filter 0.6s ease;
+    max-width: 800px;
+    margin: 0 auto; /* Center the gallery */
+    overflow: hidden; /* Ensure content is within bounds */
 }
 
-.gallery-item::before {
-    content: '';
+.gallery-wrapper img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+/* Slick carousel specific styles */
+.slick-prev, .slick-next {
+    background: #444; /* Button background color */
+    border: none; /* Remove any border */
+    border-radius: 50%; /* Make the buttons circular */
+    color: #fff; /* Text color */
+    font-size: 18px; /* Font size for the arrow */
+    height: 40px; /* Button height */
+    width: 40px; /* Button width */
+    line-height: 40px; /* Center text vertically */
+    text-align: center; /* Center text horizontally */
+    z-index: 1000; /* Make sure buttons are above the carousel images */
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(45deg, rgba(255, 0, 150, 0.3), rgba(0, 204, 255, 0.3));
-    mix-blend-mode: overlay;
-    opacity: 0;
-    transition: opacity 0.6s ease;
+    top: 50%; /* Position vertically centered */
+    transform: translateY(-50%);
 }
 
-.gallery-item:hover {
-    transform: scale(1.05);
-    filter: brightness(1.2);
+.slick-prev {
+    left: -50px; /* Position to the left of the carousel */
 }
 
-.gallery-item:hover img {
-    transform: scale(1.1) rotate(2deg);
-    filter: grayscale(20%)
+.slick-next {
+    right: -50px; /* Position to the right of the carousel */
 }
 
-.gallery-item:hover::before {
-    opacity: 1;
-}
-/* 
-@keyframes pulse {
-    0%, 100% {
-        transform: scale(1);
-        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-    }
-    50% {
-        transform: scale(1.02);
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
-    }
+/* Center the dots under the image */
+.slick-dots {
+    text-align: center;
+    margin-top: 15px; /* Space between image and dots */
+    padding-left: 0;
+    list-style: none;
 }
 
-.gallery-item {
-    animation: pulse 5s infinite;
-} */
+.slick-dots li {
+    display: inline-block; /* Align dots horizontally */
+    margin: 0 8px; /* Space between dots */
+}
+
+.slick-dots li button {
+    background: #ccc; /* Dot background color */
+    border: none; /* Remove any border */
+    border-radius: 50%; /* Make the dots circular */
+    width: 12px; /* Dot width */
+    height: 12px; /* Dot height */
+    position: relative;
+}
+
+.slick-dots li button::before {
+    content: '';
+    display: block;
+    width: 16px; /* Adjusted circle width */
+    height: 16px; /* Adjusted circle height */
+    border-radius: 50%;
+    background-color: transparent;
+    border: 2px solid #ccc; /* Circle border color */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.slick-dots li.slick-active button::before {
+    background-color: #fff; /* Active dot background color */
+    border-color: #fff; /* Active dot border color */
+}
+
+/* This is what I get for global styling and using templates */
+
+/* Override the border-radius to remove rounded corners */
+.slick-prev, .slick-next {
+    border-radius: 0 !important;
+    background: none !important;
+    box-shadow: none !important;
+}
+
+/* If you want a specific shape, like a square or a different background */
+.slick-prev, .slick-next {
+    border-radius: 0 !important;
+    background: transparent !important;
+}
+
+/* Ensure the active dot buttons are not rounded */
+.slick-dots li button {
+    border-radius: 0 !important; 
+    background: none !important;
+}
+
+.slick-dots li button::before {
+    border-radius: 0 !important;
+}
+
+/* General button override */
+button[type="button"][role="tab"] {
+    border-radius: 0 !important;
+    background: none !important;
+    box-shadow: none !important;
+    border: none !important;
+    color: inherit !important;
+    padding: 0 !important;
+}
+
+/* Restore the round shape for the dots */
+.slick-dots li button {
+    border-radius: 50% !important;
+    background: #ccc !important;
+    width: 12px;
+    height: 12px;
+}
+
+/* Ensure the pseudo-element is also circular */
+.slick-dots li button::before {
+    border-radius: 50% !important;
+    background-color: transparent;
+    border: 2px solid #ccc;
+    width: 16px;
+    height: 16px;
+}
+
+/* Style for the active dot */
+.slick-dots li.slick-active button::before {
+    background-color: #fff; 
+    border-color: #fff;
+}

static/css/slick.min.css

@@ -0,0 +1,2 @@
+.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
+/*# sourceMappingURL=/sm/fb3ed351cd5c0f1f30f88778ee1f9b056598e6d25ac4fdcab1eebcd8be521cd9.map */

static/js/slick-conf.js

@@ -0,0 +1,16 @@
+$(document).ready(function(){
+    $('.the-slider').slick({
+        dots: true,
+        infinite: true,
+        speed: 300,
+        slidesToShow: 1,
+        adaptiveHeight: true,
+        autoplay: true,
+        autoplaySpeed: 2000,
+        prevArrow: '<button type="button" class="slick-prev">❮</button>',
+        nextArrow: '<button type="button" class="slick-next">❯</button>',
+        customPaging: function(slider, i) {
+            return '<button type="button">' + '</button>';
+        }
+    });
+});

templates/index.html

@@ -21,6 +21,7 @@
         <link rel="stylesheet" href="/static/css/stars.css" />
         <link rel="stylesheet" href="/static/css/fancy-gallery.css" />
         <link rel="stylesheet" href="/static/css/extras.css" />
+        <link rel="stylesheet" href="/static/css/slick.min.css" />
         <noscript><link rel="stylesheet" href="/static/css/noscript.css" /></noscript>
     </head>
     <body class="is-preload">
@@ -70,17 +71,20 @@
                             <h2>Welcome to Spitfire Browser</h2>
                         </header>
                         <p>Spitfire Browser is your gateway to a fast, secure, and elegant browsing experience. Built on Firefox, Spitfire includes essential features like ad blocking, enhanced security, and anonymous browsing with Ocásek search engine.</p>
-                        <div class="box alt">
-                            <div class="fancy-gallery">
-                                <div class="gallery-item"><img src="/static/images/screenshots/1.png" alt="Screenshot 1" /></div>
-                                <div class="gallery-item"><img src="/static/images/screenshots/1.png" alt="Screenshot 2" /></div>
+                        <br> <!-- br? I call it super.fancy.tailor.r.css.react.native.way.to.add.super.padding.on.top.of.images.T3.js.express.lodash.moment.axios.jquery.vue.nft.d3.angular.bloat.typescript.webpack.web3.babel.parcel.T4 -->
+                        <div class="gallery-wrapper">
+                            <div class="the-slider"> <!-- Is this fucking centered? -->
+                                <div><img src="/static/images/screenshots/1.png" alt="Screenshot 1"></div>
+                                <div><img src="/static/images/screenshots/1.png" alt="Screenshot 2"></div>
+                                <div><img src="/static/images/screenshots/1.png" alt="Screenshot 3"></div>
                             </div>
                         </div>                        
-                        <ul class="actions">
-                            <li><a href="#intro" class="button">More Screenshots</a></li>
-                        </ul>
+                        <!-- <ul class="actions js-disabled">
+                            <li><a href="#intro" class="button">See More Screenshots</a></li>
+                        </ul> -->
                     </div>
                 </section>
+            
                 <!-- Features Section -->
                 <section id="features" class="main special">
                     <header class="major">
@@ -223,13 +227,16 @@
         </div>
 
         <!-- Scripts -->
-        <script src="/static/js/jquery.min.js" defer></script>
+        <script src="/static/js/jquery.min.js"></script>
+        <script src="/static/js/slick.min.js"></script>
         <script src="/static/js/jquery.scrollex.min.js" defer></script>
         <script src="/static/js/jquery.scrolly.min.js" defer></script>
         <script src="/static/js/browser.min.js" defer></script>
         <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/slick-conf.js" defer></script>
         
+        </script>
     </body>
 </html>