start adding banner

bunkerity · Dec 11, 2023 · 6ef1513 · 6ef1513
1 parent 5b236e7
commit 6ef1513
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 7 deletions.
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -0,0 +1,54 @@
+version: "3.5"
+
+services:
+  bunkerweb:
+    image: bunkerity/bunkerweb:1.5.4
+    ports:
+      - 80:8080
+      - 443:8443
+    labels:
+      - "bunkerweb.INSTANCE=yes"
+    environment:
+      - SERVER_NAME=www.example.com
+      - API_WHITELIST_IP=127.0.0.0/8 10.20.30.0/24
+    networks:
+      - bw-universe
+      - bw-services
+
+  bw-scheduler:
+    image: bunkerity/bunkerweb-scheduler:1.5.4
+    depends_on:
+      - bunkerweb
+      - bw-docker
+    volumes:
+      - bw-data:/data
+    environment:
+      - DOCKER_HOST=tcp://bw-docker:2375
+    networks:
+      - bw-universe
+      - bw-docker
+
+  bw-docker:
+    image: tecnativa/docker-socket-proxy:nightly
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    environment:
+      - CONTAINERS=1
+      - LOG_LEVEL=warning
+    networks:
+      - bw-docker
+
+volumes:
+  bw-data:
+
+networks:
+  bw-universe:
+    name: bw-universe
+    ipam:
+      driver: default
+      config:
+        - subnet: 10.20.30.0/24
+  bw-services:
+    name: bw-services
+  bw-docker:
+    name: bw-docker
diff --git a/src/ui/static/js/global.js b/src/ui/static/js/global.js
@@ -72,7 +72,7 @@ class News {
         excerpt,
         tags,
         date,
-        lastUpdate,
+        lastUpdate
       );
       let cleanHTML = DOMPurify.sanitize(cardHTML);
       //add to DOM
@@ -191,7 +191,7 @@ class darkMode {
     };
     const send = await fetch(
       `${location.href.split("/").slice(0, -1).join("/")}/darkmode`,
-      data,
+      data
     );
   }
 }
@@ -231,7 +231,7 @@ class FlashMsg {
           flashEl.remove();
           //update count
           this.flashCount.textContent = document.querySelectorAll(
-            "[data-flash-message]",
+            "[data-flash-message]"
           ).length;
         }
       } catch (err) {}
@@ -295,12 +295,64 @@ class Loader {
   }
 }
 
+class Banner {
+  constructor() {
+    this.bannerEl = document.getElementById("banner");
+    this.bannerItems = this.bannerEl.querySelectorAll('[role="listitem"]');
+    this.nextDelay = 9000;
+    this.transDuration = 700;
+    this.init();
+  }
+
+  init() {
+    setInterval(() => {
+      // Get current visible
+      let visibleEl;
+      this.bannerItems.forEach((item) => {
+        if (item.getAttribute("aria-hidden") === "false") {
+          visibleEl = item;
+        }
+      });
+
+      // Get next one to show (next index or first one)
+      let nextEl =
+        this.bannerEl.querySelector(
+          `[role="listitem"][data-id="${
+            +visibleEl.getAttribute("data-id") + 1
+          }"]`
+        ) || this.bannerEl.querySelector(`[role="listitem"][data-id="0"]`);
+
+      // Hide current one
+      visibleEl.classList.add("-left-full");
+      visibleEl.classList.remove("left-0");
+      visibleEl.setAttribute("aria-hidden", "true");
+      setTimeout(() => {
+        visibleEl.classList.remove("transition-all");
+      }, this.transDuration + 10);
+      setTimeout(() => {
+        visibleEl.classList.add("opacity-0");
+      }, this.transDuration + 20);
+      setTimeout(() => {
+        visibleEl.classList.remove("-left-full");
+        visibleEl.classList.add("left-full");
+      }, this.transDuration * 2);
+
+      // Show next one
+      nextEl.classList.remove("opacity-0");
+      nextEl.classList.add("transition-all");
+      nextEl.classList.add("left-0");
+      nextEl.classList.remove("left-full");
+      nextEl.setAttribute("aria-hidden", "false");
+    }, this.nextDelay);
+  }
+}
+
 const setLoader = new Loader();
 const setMenu = new Menu();
 const setNewsSidebar = new Sidebar(
   "[data-sidebar-info]",
   "[data-sidebar-info-open]",
-  "[data-sidebar-info-close]",
+  "[data-sidebar-info-close]"
 );
 
 const setCheckbox = new Checkbox();
@@ -311,8 +363,10 @@ const setDisabledPop = new DisabledPop();
 const setFlashSidebar = new Sidebar(
   "[data-flash-sidebar]",
   "[data-flash-sidebar-open]",
-  "[data-flash-sidebar-close]",
+  "[data-flash-sidebar-close]"
 );
 const setNews = new News();
 const setDarkM = new darkMode();
 const setFlash = new FlashMsg();
+
+const setBanner = new Banner();
diff --git a/src/ui/templates/banner.html b/src/ui/templates/banner.html
@@ -0,0 +1,64 @@
+<div
+  id="banner"
+  tabindex="-1"
+  role="list"
+  class="relative flex justify-center z-50 gap-8 px-4 w-full"
+>
+  <div
+    role="listitem"
+    aria-hidden="false"
+    data-id="0"
+    class="flex justify-center w-full left-0 transition-all duration-700 absolute dark:border-gray-700 md:px-4 py-6 dark:bg-gray-800 bg-gray-50 border border-b border-gray-200"
+  >
+    <p class="text-sm font-light text-gray-500 dark:text-gray-400">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      <a
+        class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
+        href="#"
+      >
+        link
+      </a>
+      Illo beatae dicta voluptate aperiam facilis ducimus culpa ad repudiandae
+      error, autem molestiae quisquam aliquam rem sunt dolorum qui rerum maxime
+      corporis.
+    </p>
+  </div>
+  <div
+    role="listitem"
+    aria-hidden="true"
+    data-id="1"
+    class="left-full flex justify-center w-full transition-all duration-700 absolute dark:border-gray-700 md:px-4 py-6 dark:bg-gray-800 bg-gray-50 border border-b border-gray-200"
+  >
+    <p class="text-sm font-light text-gray-500 dark:text-gray-400">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      <a
+        class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
+        href="#"
+      >
+        link
+      </a>
+      Illo beatae dicta voluptate aperiam facilis ducimus culpa ad repudiandae
+      error, autem molestiae quisquam aliquam rem sunt dolorum qui rerum maxime
+      corporis.
+    </p>
+  </div>
+  <div
+    role="listitem"
+    aria-hidden="true"
+    data-id="2"
+    class="left-full flex justify-center w-full transition-all duration-700 absolute dark:border-gray-700 md:px-4 py-6 dark:bg-gray-800 bg-gray-50 border border-b border-gray-200"
+  >
+    <p class="text-sm font-light text-gray-500 dark:text-gray-400">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      <a
+        class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
+        href="#"
+      >
+        link
+      </a>
+      Illo beatae dicta voluptate aperiam facilis ducimus culpa ad repudiandae
+      error, autem molestiae quisquam aliquam rem sunt dolorum qui rerum maxime
+      corporis.
+    </p>
+  </div>
+</div>
diff --git a/src/ui/templates/base.html b/src/ui/templates/base.html
@@ -16,13 +16,13 @@
       <img
         data-loader-img
         src="images/logo-menu-2.png"
-        class="-translate-x-1.5 lg:-transalte-x-3 duration-300 w-50 h-14 md:w-60 md:h-16 lg:w-80 lg:h-24 inline transition-all"
+        class="-translate-x-1.5 duration-300 w-50 h-14 md:w-60 md:h-16 lg:w-80 lg:h-24 inline transition-all"
         alt="main logo"
       />
     </div>
 
     {% include "menu.html" %} {% include "news.html" %} {% include "flashs.html"
-    %}
+    %} {% include "banner.html" %}
     <div
       class="w-full relative h-full max-h-screen transition-all duration-200 ease-in-out xl:ml-68 rounded-xl"
     >