change flash messages style

This commit is contained in:
BlasenhauerJ 2022-12-12 16:59:37 +01:00
parent b1ca472537
commit e5574fbdc6
8 changed files with 468 additions and 216 deletions

View File

@ -743,26 +743,14 @@ h6 {
left: 0px;
}
.top-3 {
top: 0.75rem;
.top-20 {
top: 5rem;
}
.right-4 {
right: 1rem;
}
.top-2 {
top: 0.5rem;
}
.right-2 {
right: 0.5rem;
}
.top-20 {
top: 5rem;
}
.-right-0 {
right: -0px;
}
@ -775,6 +763,18 @@ h6 {
top: 1rem;
}
.top-3 {
top: 0.75rem;
}
.top-2 {
top: 0.5rem;
}
.right-2 {
right: 0.5rem;
}
.top-3\.5 {
top: 0.875rem;
}
@ -783,6 +783,50 @@ h6 {
right: -22.5rem;
}
.bottom-20 {
bottom: 5rem;
}
.right-20 {
right: 5rem;
}
.top-16 {
top: 4rem;
}
.right-16 {
right: 4rem;
}
.right-19 {
right: 4.75rem;
}
.right-6 {
right: 1.5rem;
}
.right-5 {
right: 1.25rem;
}
.right-10 {
right: 2.5rem;
}
.right-14 {
right: 3.5rem;
}
.right-1 {
right: 0.25rem;
}
.right-8 {
right: 2rem;
}
.z-100 {
z-index: 100;
}
@ -799,6 +843,18 @@ h6 {
z-index: 110;
}
.z-990 {
z-index: 990;
}
.z-sticky {
z-index: 1020;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
@ -811,22 +867,10 @@ h6 {
z-index: 0;
}
.z-10 {
z-index: 10;
}
.z-990 {
z-index: 990;
}
.z-\[1000\] {
z-index: 1000;
}
.z-sticky {
z-index: 1020;
}
.z-50 {
z-index: 50;
}
@ -875,14 +919,14 @@ h6 {
margin: 0px;
}
.m-4 {
margin: 1rem;
}
.m-2 {
margin: 0.5rem;
}
.m-4 {
margin: 1rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
@ -898,6 +942,16 @@ h6 {
margin-bottom: 0px;
}
.mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
@ -918,11 +972,6 @@ h6 {
margin-right: 0.125rem;
}
.mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
@ -933,11 +982,6 @@ h6 {
margin-bottom: 1rem;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mx-2\.5 {
margin-left: 0.625rem;
margin-right: 0.625rem;
@ -998,6 +1042,30 @@ h6 {
margin-right: 0.75rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mb-7 {
margin-bottom: 1.75rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-3 {
margin-top: 0.75rem;
}
@ -1014,10 +1082,6 @@ h6 {
margin-right: 3rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
@ -1030,26 +1094,10 @@ h6 {
margin-left: 1.5rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-7 {
margin-bottom: 1.75rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-0 {
margin-top: 0px;
}
@ -1062,10 +1110,6 @@ h6 {
margin-left: 0px;
}
.mb-4 {
margin-bottom: 1rem;
}
.ml-auto {
margin-left: auto;
}
@ -1158,6 +1202,14 @@ h6 {
height: 12rem;
}
.h-px {
height: 1px;
}
.h-30 {
height: 7.5rem;
}
.h-3 {
height: 0.75rem;
}
@ -1166,10 +1218,6 @@ h6 {
height: 4.75rem;
}
.h-px {
height: 1px;
}
.h-sidenav {
height: calc(100vh - 360px);
}
@ -1178,10 +1226,6 @@ h6 {
height: 1.375rem;
}
.h-30 {
height: 7.5rem;
}
.h-\[90vh\] {
height: 90vh;
}
@ -1230,6 +1274,10 @@ h6 {
min-height: 91vh;
}
.min-h-52 {
min-height: 13rem;
}
.min-h-50-screen {
min-height: 50vh;
}
@ -1242,10 +1290,6 @@ h6 {
min-height: 1.5rem;
}
.min-h-52 {
min-height: 13rem;
}
.min-h-\[55vh\] {
min-height: 55vh;
}
@ -1298,14 +1342,18 @@ h6 {
width: 12rem;
}
.w-12 {
width: 3rem;
.w-90 {
width: 22.5rem;
}
.w-3 {
width: 0.75rem;
}
.w-12 {
width: 3rem;
}
.w-28 {
width: 7rem;
}
@ -1318,14 +1366,18 @@ h6 {
width: 1.375rem;
}
.w-90 {
width: 22.5rem;
}
.w-80 {
width: 20rem;
}
.w-11\/12 {
width: 91.666667%;
}
.w-10\/12 {
width: 83.333333%;
}
.min-w-0 {
min-width: 0px;
}
@ -1350,6 +1402,10 @@ h6 {
max-width: 10rem;
}
.max-w-full {
max-width: 100%;
}
.max-w-\[400px\] {
max-width: 400px;
}
@ -1362,10 +1418,6 @@ h6 {
max-width: 16rem;
}
.max-w-full {
max-width: 100%;
}
.max-w-screen-sm {
max-width: 576px;
}
@ -1410,6 +1462,16 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-90 {
--tw-translate-x: 22.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5 {
--tw-translate-x: 0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1440,11 +1502,6 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
--tw-translate-x: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1455,11 +1512,6 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-90 {
--tw-translate-x: 22.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-7 {
--tw-translate-y: -1.75rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1480,11 +1532,46 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-0\.4 {
--tw-translate-y: -0.1rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-2 {
--tw-translate-y: -0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-2 {
--tw-translate-x: -0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-6 {
--tw-rotate: 6deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-6 {
--tw-rotate: -6deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-12 {
--tw-rotate: 12deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-12 {
--tw-rotate: -12deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-50 {
--tw-scale-x: .5;
--tw-scale-y: .5;
@ -1503,6 +1590,12 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-90 {
--tw-scale-x: .9;
--tw-scale-y: .9;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@ -1575,10 +1668,6 @@ h6 {
justify-content: space-between;
}
.justify-evenly {
justify-content: space-evenly;
}
.justify-items-center {
justify-items: center;
}
@ -1624,6 +1713,10 @@ h6 {
overflow-x: hidden;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.whitespace-nowrap {
white-space: nowrap;
}
@ -1690,6 +1783,11 @@ h6 {
border-top-right-radius: 0.25rem;
}
.rounded-t-2xl {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.rounded-b-lg {
border-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
@ -1705,11 +1803,6 @@ h6 {
border-bottom-left-radius: 0.25rem;
}
.rounded-t-2xl {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.border-2 {
border-width: 2px;
}
@ -1780,6 +1873,11 @@ h6 {
border-color: rgb(147 197 253 / var(--tw-border-opacity));
}
.border-gray-900 {
--tw-border-opacity: 1;
border-color: rgb(20 23 39 / var(--tw-border-opacity));
}
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(8 85 119 / var(--tw-bg-opacity));
@ -1859,16 +1957,16 @@ h6 {
background-color: rgb(64 187 107 / 0.8);
}
.bg-none {
background-image: none;
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-tl {
background-image: linear-gradient(to top left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
.bg-none {
background-image: none;
}
.from-transparent {
@ -2075,9 +2173,9 @@ h6 {
padding-right: 0.25rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
.px-0\.5 {
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.px-0 {
@ -2085,6 +2183,11 @@ h6 {
padding-right: 0px;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
@ -2115,11 +2218,6 @@ h6 {
padding-bottom: 1.5rem;
}
.px-0\.5 {
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
@ -2152,6 +2250,14 @@ h6 {
padding-top: 0.25rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pl-0 {
padding-left: 0px;
}
@ -2180,14 +2286,6 @@ h6 {
padding-left: 1rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pb-8 {
padding-bottom: 2rem;
}
@ -2260,16 +2358,16 @@ h6 {
line-height: 1rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-normal {
font-weight: 400;
}
@ -2360,6 +2458,11 @@ h6 {
color: rgb(52 71 103 / var(--tw-text-opacity));
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(94 114 228 / var(--tw-text-opacity));
}
.text-yellow-500 {
--tw-text-opacity: 1;
color: rgb(251 177 64 / var(--tw-text-opacity));
@ -2380,11 +2483,6 @@ h6 {
color: rgb(210 214 218 / var(--tw-text-opacity));
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(94 114 228 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(108 117 125 / var(--tw-text-opacity));
@ -2449,12 +2547,6 @@ h6 {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07);
--tw-shadow-colored: 0 .25rem .375rem -.0625rem var(--tw-shadow-color), 0 .125rem .25rem -.0625rem var(--tw-shadow-color);
@ -2467,6 +2559,12 @@ h6 {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@ -2483,11 +2581,6 @@ h6 {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.brightness-75 {
--tw-brightness: brightness(.75);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.brightness-90 {
--tw-brightness: brightness(.9);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@ -2974,16 +3067,16 @@ h6 {
background-color: rgb(52 71 103 / var(--tw-bg-opacity));
}
.dark .dark\:bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(8 85 119 / var(--tw-bg-opacity));
}
.dark .dark\:bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(173 181 189 / var(--tw-bg-opacity));
}
.dark .dark\:bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(8 85 119 / var(--tw-bg-opacity));
}
.dark .dark\:bg-primary\/50 {
background-color: rgb(8 85 119 / 0.5);
}
@ -3167,6 +3260,26 @@ h6 {
right: 5rem;
}
.sm\:bottom-3 {
bottom: 0.75rem;
}
.sm\:right-40 {
right: 10rem;
}
.sm\:right-42 {
right: 10.5rem;
}
.sm\:right-36 {
right: 9rem;
}
.sm\:right-4 {
right: 1rem;
}
.sm\:col-span-6 {
grid-column: span 6 / span 6;
}
@ -3233,6 +3346,12 @@ h6 {
width: 1.75rem;
}
.sm\:scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.sm\:flex-row {
flex-direction: row;
}
@ -3258,6 +3377,11 @@ h6 {
padding-right: 1.5rem;
}
.sm\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.sm\:pt-6 {
padding-top: 1.5rem;
}
@ -3386,6 +3510,10 @@ h6 {
position: relative;
}
.lg\:bottom-24 {
bottom: 6rem;
}
.lg\:order-1 {
order: 1;
}
@ -3494,18 +3622,22 @@ h6 {
}
@media (min-width: 1200px) {
.xl\:left-0 {
left: 0px;
}
.xl\:right-4 {
right: 1rem;
}
.xl\:left-0 {
left: 0px;
}
.xl\:top-3 {
top: 0.75rem;
}
.xl\:right-20 {
right: 5rem;
}
.xl\:mx-4 {
margin-left: 1rem;
margin-right: 1rem;

View File

@ -39,6 +39,26 @@ class News {
}
}
class Sidebar {
constructor(elAtt, btnOpenAtt, btnCloseAtt) {
this.sidebarEl = document.querySelector(elAtt);
this.openBtn = document.querySelector(btnOpenAtt);
this.closeBtn = document.querySelector(btnCloseAtt);
this.openBtn.addEventListener("click", this.open.bind(this));
this.closeBtn.addEventListener("click", this.close.bind(this));
}
open() {
this.sidebarEl.classList.add("translate-x-0");
this.sidebarEl.classList.remove("translate-x-90");
}
close() {
this.sidebarEl.classList.add("translate-x-90");
this.sidebarEl.classList.remove("translate-x-0");
}
}
class darkMode {
constructor() {
this.htmlEl = document.querySelector("html");
@ -83,22 +103,26 @@ class darkMode {
class FlashMsg {
constructor() {
this.delayBeforeRemove = 8000;
this.openBtn = document.querySelector("[flash-sidebar-open]");
this.flashCount = document.querySelector("[flash-count]");
this.isMsgCheck = false;
this.init();
}
//remove flash message after this.delay if exist
init() {
window.addEventListener("DOMContentLoaded", () => {
//animate message button if message + never opened
window.addEventListener("load", (e) => {
if (this.flashCount.textContent > 0) this.animeBtn();
});
//stop animate if clicked once
this.openBtn.addEventListener("click", (e) => {
try {
const flashEl = document.querySelector("[flash-message]");
setTimeout(() => {
try {
flashEl.remove();
} catch (err) {}
}, this.delayBeforeRemove);
if (e.target.closest("button").hasAttribute("flash-sidebar-open")) {
this.isMsgCheck = true;
}
} catch (err) {}
});
//remove message after click
window.addEventListener("click", (e) => {
try {
if (e.target.closest("button").hasAttribute("close-flash-message")) {
@ -109,6 +133,25 @@ class FlashMsg {
} catch (err) {}
});
}
animeBtn() {
this.openBtn.classList.add("rotate-12");
setTimeout(() => {
this.openBtn.classList.remove("rotate-12");
this.openBtn.classList.add("-rotate-12");
}, 150);
setTimeout(() => {
this.openBtn.classList.remove("-rotate-12");
}, 300);
setTimeout(() => {
if (!this.isMsgCheck) {
this.animeBtn();
}
}, 1500);
}
}
class Loader {
@ -151,6 +194,11 @@ class Loader {
const setLoader = new Loader();
const setMenu = new Menu();
const setNews = new News();
const setFlashSidebar = new Sidebar(
"[flash-sidebar]",
"[flash-sidebar-open]",
"[flash-sidebar-close]"
);
const setDarkM = new darkMode();
const setCheckbox = new Checkbox("[sidebar-info]");
const setFlash = new FlashMsg();

View File

@ -21,50 +21,12 @@
/>
</div>
{% include "menu.html" %} {% include "news.html" %}
{% include "menu.html" %} {% include "news.html" %} {% include "flashs.html"
%}
<div
class="w-full relative h-full max-h-screen transition-all duration-200 ease-in-out xl:ml-68 rounded-xl"
>
{% include "header.html" %} {% with messages =
get_flashed_messages(with_categories=true) %} {% if messages %}
<!-- flash message-->
{% for category, message in messages %}
<div
flash-message
class="p-4 mb-1 md:mb-3 md:mr-3 z-[1001] flex flex-col fixed bottom-0 right-0 w-full md:w-1/2 max-w-[300px] min-h-20 bg-white rounded-lg dark:brightness-110 hover:scale-102 transition shadow-md break-words dark:bg-slate-850 dark:shadow-dark-xl bg-clip-border"
>
<button
close-flash-message
role="close alert message"
type="button"
class="absolute right-7 top-1.5"
>
<svg
class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
></path>
</svg>
</button>
{% if category == 'error' %}
<h5 class="text-lg mb-0 text-red-500">Error</h5>
<p class="text-gray-700 dark:text-gray-300 mb-0 text-sm">
{{ message|safe }}
</p>
{% else %}
<h5 class="text-lg mb-0 text-green-500">Success</h5>
<p class="text-gray-700 dark:text-gray-300 mb-0 text-sm">
{{ message|safe }}
</p>
{% endif %}
</div>
{% endfor %}
<!-- end flash message-->
{% endif %} {% endwith %}
{% include "header.html" %}
</div>
<!-- info -->

View File

@ -0,0 +1,108 @@
<!-- float button-->
{% with messages = get_flashed_messages(with_categories=true) %}
<button
type="button"
flash-sidebar-open
class="transition scale-90 sm:scale-100 dark:bg-gray-500 dark:brightness-110 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-2 sm:top-3 right-19 sm:right-20 xl:right-20 z-990 rounded-circle text-slate-700"
>
<svg
class="fill-yellow-500 -translate-y-0.4 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"
/>
</svg>
<div
class="px-2 translate-x-1 bottom-0 right-0 absolute rounded-full dark:bg-gray-500 bg-white"
>
<p flash-count class="mb-0 text-sm text-bold text-red-500">
{%if messages %} {{messages.length}}{%else%}0 {%endif%}
</p>
</div>
</button>
<!-- end float button-->
<!-- right sidebar -->
<aside
flash-sidebar
class="translate-x-90 -right-0 transition z-sticky dark:bg-slate-850 dark:brightness-110 shadow-3xl max-w-full w-90 ease fixed top-0 left-auto flex h-full min-w-0 flex-col break-words rounded-none border-0 bg-white bg-clip-border px-0.5"
>
<!-- close btn-->
<svg
flash-sidebar-close
class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
/>
</svg>
<!-- close btn-->
<!-- header -->
<div class="px-6 pt-4 pb-0 mb-0 border-b-0 rounded-t-2xl">
<div class="float-left">
<h5 class="mt-4 mb-1 dark:text-white font-bold">MESSAGES</h5>
<p class="dark:text-white dark:opacity-80 mb-0">Feedback actions</p>
</div>
<!-- close button -->
<div class="float-right mt-6">
<button
flash-sidebar-close
class="inline-block p-0 mb-4 text-sm font-bold leading-normal text-center uppercase align-middle transition-all ease-in bg-transparent border-0 rounded-lg shadow-none cursor-pointer hover:-translate-y-px tracking-tight-rem bg-150 bg-x-25 active:opacity-85 dark:text-white text-slate-700"
>
<i class="fa fa-close"></i>
</button>
</div>
<!-- end close button -->
</div>
<!-- end header -->
<!-- messages-->
<div
class="flex flex-col justify-start items-center h-full m-2 overflow-y-auto"
>
{% if messages %}
<!-- flash message-->
{% for category, message in messages %}
<div
flash-message
class="{% if category == 'error' %}bg-red-500 {%else%} bg-green-500 {%endif %} my-2 border relative p-4 w-11/12 min-h-20 rounded-lg hover:scale-102 transition shadow-md break-words dark:brightness-90"
>
<div class="flex justify-between align-top items-start">
{% if category == 'error' %}
<h5 class="text-lg mb-0 text-white">Error</h5>
{%else%}
<h5 class="text-lg mb-0 text-white">Success</h5>
{%endif%}
<button
close-flash-message
role="close alert message"
type="button"
class="absolute right-8 top-2"
>
<svg
class="cursor-pointer fill-white dark:opacity-80 absolute h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
></path>
</svg>
</button>
</div>
<p class="text-white mt-2 mb-0 text-sm">{{ message|safe }}</p>
</div>
{% endfor %}
<!-- end flash message-->
{% endif %} {% endwith %}
</div>
<!-- end message-->
<!-- end messages -->
</aside>
<!-- end right sidebar -->

View File

@ -17,12 +17,12 @@
</div>
</div>
<ul
class="order-1 lg:order-2 flex justify-center pl-0 mb-0 list-none lg:justify-end"
class="order-1 lg:order-2 flex flex-wrap flex-col sm:flex-row items-center justify-center pl-0 mb-0 list-none lg:justify-end"
>
<li class="nav-item">
<a
href="https://www.bunkerweb.io"
class="block px-4 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank"
>Bunkerweb</a
>
@ -30,7 +30,7 @@
<li class="nav-item">
<a
href="https://docs.bunkerweb.io"
class="block px-4 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank"
>Docs</a
>
@ -38,7 +38,7 @@
<li class="nav-item">
<a
href="https://www.bunkerweb.io/privacy-policy"
class="block px-4 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank"
>Privacy</a
>
@ -46,7 +46,7 @@
<li class="nav-item">
<a
href="https://www.bunkerity.com/fr/blog/"
class="block px-4 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank"
>Blog</a
>
@ -54,7 +54,7 @@
<li class="nav-item">
<a
href="https://github.com/bunkerity/bunkerweb/blob/master/LICENSE"
class="block px-4 pr-0 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
class="block sm:px-4 py-1 pr-0 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
target="_blank"
>License</a
>

View File

@ -5,7 +5,10 @@
<base href="{{ config["ABSOLUTE_URI"] }}">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"
/>
<meta name="description" content="bunkerweb user interface" />
<meta name="author" content="bunkerity" />
<title>BunkerWeb UI</title>

View File

@ -5,7 +5,7 @@
<button
type="button"
sidebar-menu-toggle
class="dark:bg-gray-500 dark:brightness-110 hover:brightness-75 xl:hidden fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-3 right-4 z-990 rounded-circle text-slate-700"
class="scale-90 sm:scale-100 dark:bg-gray-500 dark:brightness-110 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-4 z-990 rounded-circle text-slate-700"
>
<svg
fill="#0D6EFD"

View File

@ -2,11 +2,10 @@
<button
type="button"
sidebar-info-open
class="dark:bg-gray-500 dark:brightness-110 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-20 sm:top-3 right-4 sm:right-20 xl:right-4 z-990 rounded-circle text-slate-700"
class="scale-90 sm:scale-100 dark:bg-gray-500 dark:brightness-110 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-16 sm:top-3 right-5 sm:right-4 sm:right-20 xl:right-4 z-990 rounded-circle text-slate-700"
>
<svg
fill="#0D6EFD"
class="h-6 w-6"
class="fill-sky-500 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>