fix news + enhance style

*fetch news working + enhance light and darkmode
*fix menu float btn position
*enhance newsletter form darkmode
*enhance banner style

src/ui/static/js/global.js

@@ -40,15 +40,19 @@ class News {
   }
 
   init() {
-    window.addEventListener("load", async () => {
+    window.addEventListener("load", () => {
       try {
-        const res = await fetch("https://www.bunkerweb.io/api/posts/0/2", {
-          headers: {
-            method: "GET",
-          },
-        });
-        return await this.render(res);
-      } catch (err) {}
+        fetch("https://www.bunkerweb.io/api/posts/0/1")
+          .then((res) => {
+            return res.json();
+          })
+          .then((res) => {
+            console.log(res);
+            return this.render(res.data);
+          });
+      } catch (err) {
+        console.log(err);
+      }
     });
   }
 
@@ -58,21 +62,14 @@ class News {
     newsContainer.textContent = "";
     //render last 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
       const cardHTML = this.template(
-        slug,
-        img,
-        excerpt,
-        tags,
-        date,
-        lastUpdate
+        news.title,
+        news.slug,
+        news.photo.url,
+        news.excerpt,
+        news.tags,
+        news.date
       );
       let cleanHTML = DOMPurify.sanitize(cardHTML);
       //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
     let tagList = "";
     tags.forEach((tag) => {
@@ -96,7 +93,7 @@ class News {
     //create card
     const card = `
       <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>
             <img  role="link"
@@ -107,12 +104,12 @@ class News {
             />
             <h3 role="link"
             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  role="link"
             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}
             </div>
             <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">
                 <span class="text-xs  dark:text-gray-300 text-gray-600"
-                >Posted on : ${date}</span
-                >
-                {% if post["updatedAt"] %}
-                <span class="text-xs  dark:text-gray-300 text-gray-600"
-                >Last update : ${lastUpdate}</span
-                >
-                {%endif%}
+                >Posted on : ${date}
+                </span>
             </div>
         </div>
       </div>  `;
@@ -301,10 +293,15 @@ class Banner {
     this.bannerItems = this.bannerEl.querySelectorAll('[role="listitem"]');
     this.nextDelay = 9000;
     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();
   }
 
   init() {
+    this.changeMenu();
     setInterval(() => {
       // Get current visible
       let visibleEl;
@@ -345,6 +342,42 @@ class Banner {
       nextEl.setAttribute("aria-hidden", "false");
     }, 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();

src/ui/tailwind.config.js

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

src/ui/templates/banner.html

@@ -2,63 +2,66 @@
   id="banner"
   tabindex="-1"
   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
     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"
+    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">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    <p
+      class="dark:brightness-125 mb-0 text-center text-xs xs:text-sm text-white"
+    >
+      Need premium support ?
       <a
-        class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
-        href="#"
+        class="dark:brightness-125 font-medium underline text-gray-100 hover:no-underline"
+        href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui"
       >
-        link
+        Check BunkerWeb Panel
       </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"
+    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">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    <p
+      class="dark:brightness-125 mb-0 text-center text-xs xs:text-sm text-white"
+    >
+      Try BunkerWeb on our
       <a
-        class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
-        href="#"
+        class="dark:brightness-125 font-medium underline text-gray-100 hover:no-underline"
+        href="https://demo.bunkerweb.io/link/?utm_campaign=self&utm_source=ui"
       >
-        link
+        demo wep app !
       </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"
+    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">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    <p
+      class="dark:brightness-125 mb-0 text-center text-xs xs:text-sm text-white"
+    >
+      All informations about BunkerWeb on our
       <a
-        class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
-        href="#"
+        class="dark:brightness-125 font-medium underline text-gray-100 hover:no-underline"
+        href="https://www.bunkerweb.io/?utm_campaign=self&utm_source=ui"
       >
-        link
+        website !
       </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>

src/ui/templates/base.html

@@ -31,11 +31,10 @@
 
     <!-- info -->
     <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
-        style="max-width: 1920px"
-        class="grid gap-y-4 gap-3 sm:gap-4 lg:gap-6 grid-cols-12 w-full"
+        class="max-w-[1920px] grid gap-y-4 gap-3 sm:gap-4 lg:gap-6 grid-cols-12 w-full"
       >
         {% block content %} {% endblock %}
       </div>

src/ui/templates/flashs.html

@@ -1,7 +1,8 @@
 <!-- float button-->
 {% with messages = get_flashed_messages(with_categories=true) %}
 <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
     type="button"

src/ui/templates/footer.html

@@ -1,13 +1,11 @@
-<footer
-  class="dark:bg-green-500/90 relative mt-4 rounded-lg w-full py-2 lg:py-4 mb-2 bg-secondary"
->
+<footer class="relative w-full mt-16 lg:mt-0">
   <div class="w-full px-6 mx-auto">
     <div
       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
-          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 ©
           <script>
@@ -22,7 +20,7 @@
         <li class="nav-item">
           <a
             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"
             >Bunkerweb</a
           >
@@ -30,7 +28,7 @@
         <li class="nav-item">
           <a
             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"
             >Docs</a
           >
@@ -38,7 +36,7 @@
         <li class="nav-item">
           <a
             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"
             >Privacy</a
           >
@@ -46,7 +44,7 @@
         <li class="nav-item">
           <a
             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"
             >Blog</a
           >
@@ -54,7 +52,7 @@
         <li class="nav-item">
           <a
             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"
             >License</a
           >

src/ui/templates/header.html

@@ -3,7 +3,7 @@
 
 <!-- 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
     class="flex items-center justify-between w-full px-4 py-1 mx-auto flex-wrap-inherit"
@@ -14,7 +14,7 @@
         {{current_endpoint}}
       </h6>
       <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">
           <a class="text-white opacity-50 dark:opacity-75" href="javascript:;"

src/ui/templates/loading.html

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

src/ui/templates/menu.html

@@ -5,7 +5,7 @@
 <button
   type="button"
   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
     fill="#0D6EFD"
@@ -23,7 +23,7 @@
 <!-- left sidebar  -->
 <aside
   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"
 >
   <!-- close btn-->
@@ -384,7 +384,7 @@
               <a
                 class="leading-8 font-bold hover:brightness-75"
                 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
               >
             </h6>

src/ui/templates/news.html

@@ -2,7 +2,7 @@
 <button
   type="button"
   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
     class="fill-sky-500 h-6 w-6"
@@ -113,14 +113,14 @@
           </svg>
         </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
         <a
           class="italic"
           href="https://www.bunkerity.com/privacy-policy/?utm_campaign=self&utm_source=ui"
           target="_blank"
-          >privacy policy</a
-        >
+          >privacy policy
+        </a>
       </label>
     </div>
     <button