Compare commits

...

2 Commits

Author SHA1 Message Date
Jordan Blasenhauer 549bbe170d fix news + enhance style
*fetch news working + enhance light and darkmode
*fix menu float btn position
*enhance newsletter form darkmode
*enhance banner style
2023-12-13 17:45:15 +01:00
Jordan Blasenhauer ed06c513c8 udpate ui and utm
*update logo
*fix loading centering
*add banner element + replace float btn + add script to move on scroll float btn relate to banner
*change footer style
*enhance header style
*update utm
2023-12-13 16:17:24 +01:00
16 changed files with 125 additions and 3998 deletions

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 53 KiB

View File

@ -40,15 +40,19 @@ class News {
} }
init() { init() {
window.addEventListener("load", async () => { window.addEventListener("load", () => {
try { try {
const res = await fetch("https://www.bunkerweb.io/api/posts/0/2", { fetch("https://www.bunkerweb.io/api/posts/0/1")
headers: { .then((res) => {
method: "GET", return res.json();
}, })
}); .then((res) => {
return await this.render(res); console.log(res);
} catch (err) {} return this.render(res.data);
});
} catch (err) {
console.log(err);
}
}); });
} }
@ -58,21 +62,14 @@ class News {
newsContainer.textContent = ""; newsContainer.textContent = "";
//render last news //render last news
lastNews.forEach((news) => { lastNews.forEach((news) => {
//get info
const slug = news.slug;
const img = news.photo.url;
const excerpt = news.excerpt;
const tags = news.tags;
const date = news.date;
const lastUpdate = news.lastUpdate;
//create html card from infos //create html card from infos
const cardHTML = this.template( const cardHTML = this.template(
slug, news.title,
img, news.slug,
excerpt, news.photo.url,
tags, news.excerpt,
date, news.tags,
lastUpdate news.date
); );
let cleanHTML = DOMPurify.sanitize(cardHTML); let cleanHTML = DOMPurify.sanitize(cardHTML);
//add to DOM //add to DOM
@ -82,7 +79,7 @@ class News {
}); });
} }
template(slug, img, excerpt, tags, date, lastUpdate) { template(title, slug, img, excerpt, tags, date) {
//loop on tags to get list //loop on tags to get list
let tagList = ""; let tagList = "";
tags.forEach((tag) => { tags.forEach((tag) => {
@ -96,7 +93,7 @@ class News {
//create card //create card
const card = ` const card = `
<div <div
class="min-h-[400px] w-full col-span-12 transition hover:-translate-y-2 bg-gray-100 dark:bg-slate-900 rounded px-6 py-4 m-2 flex flex-col justify-between" class="min-h-[350px] w-full col-span-12 transition dark:bg-slate-700 dark:brightness-[0.885] bg-gray-100 rounded px-6 py-4 my-4 mx-0 flex flex-col justify-between"
> >
<div> <div>
<img role="link" <img role="link"
@ -107,12 +104,12 @@ class News {
/> />
<h3 role="link" <h3 role="link"
onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'" onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'"
class="cursor-pointer mt-3 mb-1 text-3xl dark:text-white tracking-wide">{{ post['title'] }}</h3> class="cursor-pointer mt-3 mb-1 text-xl dark:text-white tracking-wide">${title}</h3>
</div> </div>
<div> <div>
<div role="link" <div role="link"
onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'" onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'"
class="cursor-pointer min-h-[130px] mb-3 text-lg dark:text-gray-300 text-gray-600 pt-3"> class="cursor-pointer min-h-[100px] mb-3 dark:text-gray-300 text-gray-600 pt-3">
${excerpt} ${excerpt}
</div> </div>
<div class="min-h-[75px] mt-2 flex flex-wrap justify-start items-end align-bottom"> <div class="min-h-[75px] mt-2 flex flex-wrap justify-start items-end align-bottom">
@ -121,13 +118,8 @@ class News {
<div class="mt-2 flex flex-col justify-start items-start"> <div class="mt-2 flex flex-col justify-start items-start">
<span class="text-xs dark:text-gray-300 text-gray-600" <span class="text-xs dark:text-gray-300 text-gray-600"
>Posted on : ${date}</span >Posted on : ${date}
> </span>
{% if post["updatedAt"] %}
<span class="text-xs dark:text-gray-300 text-gray-600"
>Last update : ${lastUpdate}</span
>
{%endif%}
</div> </div>
</div> </div>
</div> `; </div> `;
@ -301,10 +293,15 @@ class Banner {
this.bannerItems = this.bannerEl.querySelectorAll('[role="listitem"]'); this.bannerItems = this.bannerEl.querySelectorAll('[role="listitem"]');
this.nextDelay = 9000; this.nextDelay = 9000;
this.transDuration = 700; this.transDuration = 700;
this.menuBtn = document.querySelector("[data-sidebar-menu-toggle]");
this.menuEl = document.querySelector("[data-sidebar-menu]");
this.newsBtn = document.querySelector("[data-sidebar-info-open]");
this.flashBtn = document.querySelector("[data-flash-group]");
this.init(); this.init();
} }
init() { init() {
this.changeMenu();
setInterval(() => { setInterval(() => {
// Get current visible // Get current visible
let visibleEl; let visibleEl;
@ -345,6 +342,42 @@ class Banner {
nextEl.setAttribute("aria-hidden", "false"); nextEl.setAttribute("aria-hidden", "false");
}, this.nextDelay); }, this.nextDelay);
} }
changeMenu() {
let options = {
root: null,
rootMargin: "0px",
threshold: 0.35,
};
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
this.menuEl.classList.add("mt-[4.5rem]");
this.menuBtn.classList.add("top-[8.2rem]", "sm:top-[4.5rem]");
this.newsBtn.classList.add("top-[4.5rem]");
this.flashBtn.classList.add("top-[4.5rem]");
this.menuBtn.classList.remove("top-16", "sm:top-2");
this.newsBtn.classList.remove("top-2");
this.flashBtn.classList.remove("top-2");
this.menuEl.classList.remove("mt-2");
}
if (!entry.isIntersecting) {
this.menuEl.classList.add("mt-2");
this.menuBtn.classList.add("top-16", "sm:top-2");
this.newsBtn.classList.add("top-2");
this.flashBtn.classList.add("top-2");
this.menuBtn.classList.remove("top-[8.2rem]", "sm:top-[4.5rem]");
this.newsBtn.classList.remove("top-[4.5rem]");
this.flashBtn.classList.remove("top-[4.5rem]");
this.menuEl.classList.remove("mt-[4.5rem]");
}
});
}, options);
observer.observe(this.bannerEl);
}
} }
const setLoader = new Loader(); const setLoader = new Loader();

View File

@ -38,10 +38,10 @@ module.exports = {
black: colors.black, black: colors.black,
white: colors.white, white: colors.white,
primary: { primary: {
DEFAULT: "#085577", DEFAULT: "#0b5577",
}, },
secondary: { secondary: {
DEFAULT: "#40bb6b", DEFAULT: "#2eac68",
}, },
slate: { slate: {
DEFAULT: colors.slate, DEFAULT: colors.slate,

View File

@ -2,63 +2,66 @@
id="banner" id="banner"
tabindex="-1" tabindex="-1"
role="list" role="list"
class="relative flex justify-center z-50 gap-8 px-4 w-full" class="relative flex justify-center z-50 gap-8 px-4 w-full h-[4rem] z-100"
> >
<!-- background-->
<div
class="absolute left-0 h-[3.5rem] w-full bg-secondary dark:brightness-95"
></div>
<!--end background-->
<div <div
role="listitem" role="listitem"
aria-hidden="false" aria-hidden="false"
data-id="0" 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" class="h-[3.5rem] overflow-hidden flex justify-center items-center w-full left-0 transition-all duration-700 absolute px-1 md:px-4 py-1 bg-secondary dark:brightness-95"
> >
<p class="text-sm font-light text-gray-500 dark:text-gray-400"> <p
Lorem ipsum dolor sit amet, consectetur adipisicing elit. class="dark:brightness-125 mb-0 text-center text-xs xs:text-sm text-white"
>
Need premium support ?
<a <a
class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline" class="dark:brightness-125 font-medium underline text-gray-100 hover:no-underline"
href="#" href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui"
> >
link Check BunkerWeb Panel
</a> </a>
Illo beatae dicta voluptate aperiam facilis ducimus culpa ad repudiandae
error, autem molestiae quisquam aliquam rem sunt dolorum qui rerum maxime
corporis.
</p> </p>
</div> </div>
<div <div
role="listitem" role="listitem"
aria-hidden="true" aria-hidden="true"
data-id="1" 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" class="h-[3.5rem] overflow-hidden left-full flex justify-center items-center w-full transition-all duration-700 absolute px-1 md:px-4 py-1 bg-secondary dark:brightness-95"
> >
<p class="text-sm font-light text-gray-500 dark:text-gray-400"> <p
Lorem ipsum dolor sit amet, consectetur adipisicing elit. class="dark:brightness-125 mb-0 text-center text-xs xs:text-sm text-white"
>
Try BunkerWeb on our
<a <a
class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline" class="dark:brightness-125 font-medium underline text-gray-100 hover:no-underline"
href="#" href="https://demo.bunkerweb.io/link/?utm_campaign=self&utm_source=ui"
> >
link demo wep app !
</a> </a>
Illo beatae dicta voluptate aperiam facilis ducimus culpa ad repudiandae
error, autem molestiae quisquam aliquam rem sunt dolorum qui rerum maxime
corporis.
</p> </p>
</div> </div>
<div <div
role="listitem" role="listitem"
aria-hidden="true" aria-hidden="true"
data-id="2" 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" class="h-[3.5rem] overflow-hidden left-full flex justify-center items-center w-full transition-all duration-700 absolute px-1 md:px-4 py-1 bg-secondary dark:brightness-95"
> >
<p class="text-sm font-light text-gray-500 dark:text-gray-400"> <p
Lorem ipsum dolor sit amet, consectetur adipisicing elit. class="dark:brightness-125 mb-0 text-center text-xs xs:text-sm text-white"
>
All informations about BunkerWeb on our
<a <a
class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline" class="dark:brightness-125 font-medium underline text-gray-100 hover:no-underline"
href="#" href="https://www.bunkerweb.io/?utm_campaign=self&utm_source=ui"
> >
link website !
</a> </a>
Illo beatae dicta voluptate aperiam facilis ducimus culpa ad repudiandae
error, autem molestiae quisquam aliquam rem sunt dolorum qui rerum maxime
corporis.
</p> </p>
</div> </div>
</div> </div>

View File

@ -31,11 +31,10 @@
<!-- info --> <!-- info -->
<main <main
class="absolute xl:pl-75 w-full px-2 sm:px-6 pb-0 pt-20 sm:pt-6 min-h-[91vh] flex flex-col justify-between" class="absolute xl:pl-75 w-full px-2 sm:px-6 pb-0 pt-20 sm:pt-6 min-h-[80vh] flex flex-col justify-between"
> >
<div <div
style="max-width: 1920px" class="max-w-[1920px] grid gap-y-4 gap-3 sm:gap-4 lg:gap-6 grid-cols-12 w-full"
class="grid gap-y-4 gap-3 sm:gap-4 lg:gap-6 grid-cols-12 w-full"
> >
{% block content %} {% endblock %} {% block content %} {% endblock %}
</div> </div>

View File

@ -1,7 +1,8 @@
<!-- float button--> <!-- float button-->
{% with messages = get_flashed_messages(with_categories=true) %} {% with messages = get_flashed_messages(with_categories=true) %}
<div <div
class="group group-hover hover:brightness-75 dark:hover:brightness-105 fixed top-2 sm:top-3 right-20 sm:right-24 xl:right-24 z-990" data-flash-group
class="transition-all group group-hover hover:brightness-75 dark:hover:brightness-105 fixed top-[4.5rem] right-20 sm:right-24 xl:right-24 z-990"
> >
<button <button
type="button" type="button"

View File

@ -1,13 +1,11 @@
<footer <footer class="relative w-full mt-16 lg:mt-0">
class="dark:bg-green-500/90 relative mt-4 rounded-lg w-full py-2 lg:py-4 mb-2 bg-secondary"
>
<div class="w-full px-6 mx-auto"> <div class="w-full px-6 mx-auto">
<div <div
class="flex flex-col items-center lg:flex-row justify-center lg:justify-between" class="flex flex-col items-center lg:flex-row justify-center lg:justify-between"
> >
<div class="order-2 lg:order-1 px-0 mt-3 lg:mt-0"> <div class="order-2 lg:order-1 px-0 mt-3 lg:mt-0 mb-0.5">
<div <div
class="transition duration-300 text-xs lg:text-sm tracking-wide leading-normal text-center text-white opacity-100 dark:text-white lg:text-left" class="transition duration-300 text-xs tracking-wide leading-normal text-center text-white opacity-100 dark:text-white lg:text-left"
> >
Copyright © Copyright ©
<script> <script>
@ -22,7 +20,7 @@
<li class="nav-item"> <li class="nav-item">
<a <a
href="https://www.bunkerweb.io/?utm_campaign=self&utm_source=ui" href="https://www.bunkerweb.io/?utm_campaign=self&utm_source=ui"
class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white" class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-xs tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank" target="_blank"
>Bunkerweb</a >Bunkerweb</a
> >
@ -30,7 +28,7 @@
<li class="nav-item"> <li class="nav-item">
<a <a
href="https://docs.bunkerweb.io/?utm_campaign=self&utm_source=ui" href="https://docs.bunkerweb.io/?utm_campaign=self&utm_source=ui"
class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white" class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-xs tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank" target="_blank"
>Docs</a >Docs</a
> >
@ -38,7 +36,7 @@
<li class="nav-item"> <li class="nav-item">
<a <a
href="https://www.bunkerweb.io/privacy-policy" href="https://www.bunkerweb.io/privacy-policy"
class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white" class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-xs tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank" target="_blank"
>Privacy</a >Privacy</a
> >
@ -46,7 +44,7 @@
<li class="nav-item"> <li class="nav-item">
<a <a
href="https://www.bunkerity.com/fr/blog/?utm_campaign=self&utm_source=ui" href="https://www.bunkerity.com/fr/blog/?utm_campaign=self&utm_source=ui"
class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white" class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 text-xs tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank" target="_blank"
>Blog</a >Blog</a
> >
@ -54,7 +52,7 @@
<li class="nav-item"> <li class="nav-item">
<a <a
href="https://github.com/bunkerity/bunkerweb/blob/master/LICENSE" href="https://github.com/bunkerity/bunkerweb/blob/master/LICENSE"
class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 pr-0 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white" class="hover:italic hover:brightness-90 block sm:px-4 pt-1 pb-0 lg:pb-1 pr-0 text-xs tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank" target="_blank"
>License</a >License</a
> >

View File

@ -3,7 +3,7 @@
<!-- header --> <!-- header -->
<header <header
class="relative flex flex-wrap items-center justify-between px-0 py-2 mx-6 transition-all ease-in shadow-none duration-250 rounded-2xl lg:flex-nowrap lg:justify-start" class="relative flex flex-wrap items-center justify-between px-0 pb-2 sm:mx-6 transition-all ease-in shadow-none duration-250 rounded-2xl lg:flex-nowrap lg:justify-start"
> >
<div <div
class="flex items-center justify-between w-full px-4 py-1 mx-auto flex-wrap-inherit" class="flex items-center justify-between w-full px-4 py-1 mx-auto flex-wrap-inherit"
@ -14,7 +14,7 @@
{{current_endpoint}} {{current_endpoint}}
</h6> </h6>
<ul <ul
class="flex flex-col xs:flex-row flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16" class="hidden xs:flex flex-col xs:flex-row flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16"
> >
<li class="text-sm leading-normal"> <li class="text-sm leading-normal">
<a class="text-white opacity-50 dark:opacity-75" href="javascript:;" <a class="text-white opacity-50 dark:opacity-75" href="javascript:;"

View File

@ -18,7 +18,7 @@
<div> <div>
<img <img
src="images/logo-menu-2.png" 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="duration-300 w-50 h-14 md:w-60 md:h-16 lg:w-80 lg:h-24 inline transition-all"
alt="main logo" alt="main logo"
/> />
{%if message %} {%if message %}

View File

@ -5,7 +5,7 @@
<button <button
type="button" type="button"
data-sidebar-menu-toggle data-sidebar-menu-toggle
class="scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 xl:hidden fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-2 sm:top-3 right-5 sm:right-6 z-990 rounded-circle text-slate-700" class="transition-all scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 xl:hidden fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-16 sm:top-[4.5rem] right-5 sm:right-6 z-990 rounded-circle text-slate-700"
> >
<svg <svg
fill="#0D6EFD" fill="#0D6EFD"
@ -23,7 +23,7 @@
<!-- left sidebar --> <!-- left sidebar -->
<aside <aside
data-sidebar-menu data-sidebar-menu
class="fixed flex inset-y-0 flex-wrap justify-between w-full p-0 my-4 overflow-y-auto antialiased transition-transform duration-200 -translate-x-full bg-white border-0 shadow-xl dark:shadow-none dark:bg-slate-850 dark:brightness-110 max-w-64 z-[1000] xl:ml-6 rounded-2xl xl:left-0 xl:translate-x-0" class="transition-all mt-[4.5rem] fixed flex inset-y-0 flex-wrap justify-between w-full p-0 my-4 overflow-y-auto antialiased transition-transform duration-200 -translate-x-full bg-white border-0 shadow-xl dark:shadow-none dark:bg-slate-850 dark:brightness-110 max-w-64 z-[1000] xl:ml-6 rounded-2xl xl:left-0 xl:translate-x-0"
aria-expanded="false" aria-expanded="false"
> >
<!-- close btn--> <!-- close btn-->
@ -384,7 +384,7 @@
<a <a
class="leading-8 font-bold hover:brightness-75" class="leading-8 font-bold hover:brightness-75"
target="_blank" target="_blank"
href="https://docs.bunkerweb.io/1.5.4/plugins/#writing-a-plugin?utm_campaign=self&utm_source=ui" href="https://docs.bunkerweb.io/1.5.4/plugins/?utm_campaign=self&utm_source=ui#writing-a-plugin"
>check doc</a >check doc</a
> >
</h6> </h6>

View File

@ -2,7 +2,7 @@
<button <button
type="button" type="button"
data-sidebar-info-open data-sidebar-info-open
class="scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-16 sm:top-3 right-5 sm:right-40 xl:right-6 z-990 rounded-circle text-slate-700" class="transition-all scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-[4.5rem] right-5 sm:right-40 xl:right-6 z-990 rounded-circle text-slate-700"
> >
<svg <svg
class="fill-sky-500 h-6 w-6" class="fill-sky-500 h-6 w-6"
@ -113,14 +113,14 @@
</svg> </svg>
</div> </div>
</div> </div>
<label class="text-sm" for="newsletter-check"> <label class="text-sm dark:text-gray-300" for="newsletter-check">
I've read and agree to the I've read and agree to the
<a <a
class="italic" class="italic"
href="https://www.bunkerity.com/privacy-policy/?utm_campaign=self&utm_source=ui" href="https://www.bunkerity.com/privacy-policy/?utm_campaign=self&utm_source=ui"
target="_blank" target="_blank"
>privacy policy</a >privacy policy
> </a>
</label> </label>
</div> </div>
<button <button

File diff suppressed because one or more lines are too long