Merge branch 'main' of https://gitea.sld-server.org/sld-admin/sld-web-health-check

assets/css/animations.css

@@ -0,0 +1,50 @@
+@keyframes example {
+  0%   {background-color: red;}
+  25%  {background-color: yellow;}
+  50%  {background-color: blue;}
+  100% {background-color: green;}
+}
+
+/* ### EXAMPLE SETTING CODE ###  
+  animation-name: example;
+  animation-duration: 4s;
+  animation-iteration-count: 2;
+  animation-direction: alternate-reverse;
+  animation-delay: -2s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in-out;}
+	
+  ### SAME ABOVE ANIMATION IN ONE LINE CODE ###
+  animation: example 5s linear 2s infinite alternate;
+*/
+
+@keyframes bumping {
+  0% {text-shadow: 0 0 0 yellow;}
+  50% {text-shadow: 0 0 5px yellow;}
+  100% {text-shadow: 0 0 0 yellow;}
+}
+
+@keyframes bumping_red_bg {
+  0% {box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;}
+  30% {box-shadow: 0px 0px 7px 1px #ff3535, 0 0 10px 1px black inset;}
+  70% {box-shadow: 0px 0px 7px 1px #ff3535, 0 0 10px 1px black inset;}
+  90% {box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;}
+}
+
+@keyframes bumping_green_bg {
+  0% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
+  30% {box-shadow: 0px 0px 5px 1px #41e920, 0 0 10px 1px black inset;}
+  70% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
+  90% {box-shadow: 0px 0px 5px 1px #41e920, 0 0 10px 1px black inset;}
+  100% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+}
+

assets/css/style.css

@@ -0,0 +1,141 @@
+html { scroll-behavior: smooth; font-family: ubuntu; }
+*{ box-sizing: border-box; margin:0; padding:0;}
+body{overflow-y: hidden;}
+
+header{
+  position:fixed;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  width:100vw;
+  padding:5px 10px;
+  background-color: var(--menu-color);
+  border-bottom: 2px solid var(--menu-border-col);
+  color:white;
+}
+
+.main-title{
+  -webkit-text-stroke: 1.2px var(--menu-border-col);
+}
+
+.main-container{
+  padding:50px 20px 50px 20px ;
+  background-color: #363636;
+  width:100vw;
+  height:100vh;
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: scroll;
+  scrollbar-width: none;   /* Firefox */
+  -ms-overflow-style: none;/* IE e Edge vecchio */
+}
+
+.main-container::-webkit-scrollbar {
+  display: none;           /* Chrome, Safari, Edge Chromium */
+}
+
+.alert-container{
+  margin-bottom:10px;
+  border: 2px solid black;
+  width:fit-content;
+  padding:8px 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  background-color: #3380c8;
+}
+
+.alert-container:first-of-type{ margin-top:15px;}
+.alert-container:last-of-type{ margin-bottom: 15px;}
+
+.alert-info{
+  display:grid;
+  grid-template-columns: 200px 400px auto auto;
+}
+
+.alert-info > div {
+  margin: 5px auto 3px auto;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  
+}
+
+.alert-container div{
+  text-align: left;
+  min-width: 200px;
+  
+}
+
+.alert-details{
+  display:none;
+  padding:10px;
+  border:1px solid black;
+  border-radius: 10px;
+  margin:5px;
+  background-color: rgba(255, 255, 255, 0.774);
+  color:black;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  
+}
+
+.alert-details > div{
+  margin:10px;
+}
+
+.details-show{
+  display:flex;
+}
+
+.alert_red{
+  background-color: #df1414;
+  color:#ffe9e3;
+  box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;;
+  /* animation: bumping_red_bg 4s linear 2s infinite; */
+  background: linear-gradient(-45deg,#ff0000, #bb0000, #ff0000);
+	background-size: 200% 200%;
+  animation: gradient 3s linear infinite;
+}
+
+.alert_green{
+  background-color: #1f991b;
+  color:#c3ffb4;
+  box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;;
+  animation: bumping_green_bg 4s linear 2s infinite;
+}
+
+.alert_orange{
+  background-color: #e26e00;
+  color:#ffd2a8;
+  box-shadow: 0 0 10px 1px black inset;;
+}
+
+.alert_yellow{
+  background-color: #d1ce00;
+  color:#fffebf;
+  box-shadow: 0 0 10px 1px black inset;;
+}
+
+
+footer{
+  position:fixed;
+  display:flex;
+  justify-content: space-around;
+  align-items: center;
+  bottom:0;
+  background-color: black !important;
+  width:100vw;
+  padding:14px;
+  border-top: 2px solid var(--menu-border-col);
+  color:white;
+}
+
+footer > div{
+  background-color: #cccccc;
+  color:black;
+  padding:5px 10px;
+  border-radius: 20px;
+  border: 2px solid var(--menu-border-col);
+}

assets/css/variables.css

@@ -0,0 +1,12 @@
+:root {
+
+
+  /*##### Default Variable #####*/
+  --menu-color: #000000;
+  --menu-border-col: #61f061;
+}
+
+/* ### Use Example ### 
+background-color:var(--main-bg-color)
+*/
+