mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
start adding banner
This commit is contained in:
Jordan Blasenhauer
parent
5b236e769e
commit
6ef1513d7c
4 changed files with 179 additions and 7 deletions
54
docker-compose.dev.yml
Normal file
54
docker-compose.dev.yml
Normal file
|
|
@ -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
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
64
src/ui/templates/banner.html
vendored
Normal file
64
src/ui/templates/banner.html
vendored
Normal file
|
|
@ -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>
|
||||
4
src/ui/templates/base.html
vendored
4
src/ui/templates/base.html
vendored
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue