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
bunkerity · Dec 13, 2023 · ed06c51 · ed06c51
1 parent 02d6c41
commit ed06c51
Show file tree

Hide file tree

Showing 16 changed files with 92 additions and 3,963 deletions.
diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css
diff --git a/src/ui/static/images/BUNKERWEB-print-hd-blanc.png b/src/ui/static/images/BUNKERWEB-print-hd-blanc.png
diff --git a/src/ui/static/images/BUNKERWEB-print-hd.png b/src/ui/static/images/BUNKERWEB-print-hd.png
diff --git a/src/ui/static/images/logo-menu-2.png b/src/ui/static/images/logo-menu-2.png
diff --git a/src/ui/static/images/logo-menu.png b/src/ui/static/images/logo-menu.png
diff --git a/src/ui/static/js/global.js b/src/ui/static/js/global.js
@@ -301,10 +301,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 +350,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();

diff --git a/src/ui/tailwind.config.js b/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,

diff --git a/src/ui/templates/banner.html b/src/ui/templates/banner.html
@@ -2,63 +2,60 @@
   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="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="font-medium underline text-primary text-center 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="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="font-medium underline text-primary text-center 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="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="font-medium underline text-primary text-center 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>
diff --git a/src/ui/templates/base.html b/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>

diff --git a/src/ui/templates/flashs.html b/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"

diff --git a/src/ui/templates/footer.html b/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,39 +20,39 @@
         <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
           >
         </li>
         <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
           >
         </li>
         <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
           >
         </li>
         <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
           >
         </li>
         <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
           >

diff --git a/src/ui/templates/header.html b/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 @@ <h6 class="mb-0 text-lg font-bold text-white capitalize">
         {{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:;"

diff --git a/src/ui/templates/loading.html b/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 %}

diff --git a/src/ui/templates/menu.html b/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-32 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>

diff --git a/src/ui/templates/news.html b/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"

diff --git a/src/ui/templates/setup.html b/src/ui/templates/setup.html