add dashbord information in xlsx

public/css/bouton.css

@@ -103,6 +103,13 @@ div.footer.sorts {
     }
 }
 
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #333;
+        color: #fff;
+    }
+}
+
 .content>div {
     max-width: 350px;
 }
@@ -338,6 +345,7 @@ body.dark {
 .grid-container-description {
     grid-area: description;
     font-size: min(max(3.25vw, 8px), 18px);
+    padding: 10px;
 }
 
 .grid-container-description.jp {
@@ -368,6 +376,7 @@ body.dark {
 /** https://webdeasy.de/en/top-css-buttons-en */
 
 .glow-on-hover {
+    display: inline-block;
     width: 90vw;
     max-width: 400px;
     height: 45vw;
@@ -512,4 +521,179 @@ div.crossfade>img.top {
     100% {
         opacity: 0;
     }
+}
+
+
+/* loading.css   */
+
+#fountainG {
+    position: relative;
+    width: 234px;
+    height: 38px;
+    margin: auto;
+}
+
+.fountainG {
+    position: absolute;
+    top: 0;
+    background-color: rgb(255, 255, 255);
+    width: 28px;
+    height: 28px;
+    animation-name: bounce_fountainG;
+    -o-animation-name: bounce_fountainG;
+    -ms-animation-name: bounce_fountainG;
+    -webkit-animation-name: bounce_fountainG;
+    -moz-animation-name: bounce_fountainG;
+    animation-duration: 0.975s;
+    -o-animation-duration: 0.975s;
+    -ms-animation-duration: 0.975s;
+    -webkit-animation-duration: 0.975s;
+    -moz-animation-duration: 0.975s;
+    animation-iteration-count: infinite;
+    -o-animation-iteration-count: infinite;
+    -ms-animation-iteration-count: infinite;
+    -webkit-animation-iteration-count: infinite;
+    -moz-animation-iteration-count: infinite;
+    animation-direction: normal;
+    -o-animation-direction: normal;
+    -ms-animation-direction: normal;
+    -webkit-animation-direction: normal;
+    -moz-animation-direction: normal;
+    transform: scale(.3);
+    -o-transform: scale(.3);
+    -ms-transform: scale(.3);
+    -webkit-transform: scale(.3);
+    -moz-transform: scale(.3);
+    border-radius: 19px;
+    -o-border-radius: 19px;
+    -ms-border-radius: 19px;
+    -webkit-border-radius: 19px;
+    -moz-border-radius: 19px;
+}
+
+#fountainG_1 {
+    left: 0;
+    animation-delay: 0.386s;
+    -o-animation-delay: 0.386s;
+    -ms-animation-delay: 0.386s;
+    -webkit-animation-delay: 0.386s;
+    -moz-animation-delay: 0.386s;
+}
+
+#fountainG_2 {
+    left: 29px;
+    animation-delay: 0.4825s;
+    -o-animation-delay: 0.4825s;
+    -ms-animation-delay: 0.4825s;
+    -webkit-animation-delay: 0.4825s;
+    -moz-animation-delay: 0.4825s;
+}
+
+#fountainG_3 {
+    left: 58px;
+    animation-delay: 0.589s;
+    -o-animation-delay: 0.589s;
+    -ms-animation-delay: 0.589s;
+    -webkit-animation-delay: 0.589s;
+    -moz-animation-delay: 0.589s;
+}
+
+#fountainG_4 {
+    left: 88px;
+    animation-delay: 0.6855s;
+    -o-animation-delay: 0.6855s;
+    -ms-animation-delay: 0.6855s;
+    -webkit-animation-delay: 0.6855s;
+    -moz-animation-delay: 0.6855s;
+}
+
+#fountainG_5 {
+    left: 117px;
+    animation-delay: 0.782s;
+    -o-animation-delay: 0.782s;
+    -ms-animation-delay: 0.782s;
+    -webkit-animation-delay: 0.782s;
+    -moz-animation-delay: 0.782s;
+}
+
+#fountainG_6 {
+    left: 146px;
+    animation-delay: 0.8785s;
+    -o-animation-delay: 0.8785s;
+    -ms-animation-delay: 0.8785s;
+    -webkit-animation-delay: 0.8785s;
+    -moz-animation-delay: 0.8785s;
+}
+
+#fountainG_7 {
+    left: 175px;
+    animation-delay: 0.975s;
+    -o-animation-delay: 0.975s;
+    -ms-animation-delay: 0.975s;
+    -webkit-animation-delay: 0.975s;
+    -moz-animation-delay: 0.975s;
+}
+
+#fountainG_8 {
+    left: 205px;
+    animation-delay: 1.0715s;
+    -o-animation-delay: 1.0715s;
+    -ms-animation-delay: 1.0715s;
+    -webkit-animation-delay: 1.0715s;
+    -moz-animation-delay: 1.0715s;
+}
+
+@keyframes bounce_fountainG {
+    0% {
+        transform: scale(1);
+        background-color: rgb(255, 0, 0);
+    }
+    100% {
+        transform: scale(.3);
+        background-color: rgb(255, 255, 255);
+    }
+}
+
+@-o-keyframes bounce_fountainG {
+    0% {
+        -o-transform: scale(1);
+        background-color: rgb(255, 0, 0);
+    }
+    100% {
+        -o-transform: scale(.3);
+        background-color: rgb(255, 255, 255);
+    }
+}
+
+@-ms-keyframes bounce_fountainG {
+    0% {
+        -ms-transform: scale(1);
+        background-color: rgb(255, 0, 0);
+    }
+    100% {
+        -ms-transform: scale(.3);
+        background-color: rgb(255, 255, 255);
+    }
+}
+
+@-webkit-keyframes bounce_fountainG {
+    0% {
+        -webkit-transform: scale(1);
+        background-color: rgb(255, 0, 0);
+    }
+    100% {
+        -webkit-transform: scale(.3);
+        background-color: rgb(255, 255, 255);
+    }
+}
+
+@-moz-keyframes bounce_fountainG {
+    0% {
+        -moz-transform: scale(1);
+        background-color: rgb(255, 0, 0);
+    }
+    100% {
+        -moz-transform: scale(.3);
+        background-color: rgb(255, 255, 255);
+    }
 }