First Commit

assets/css/animations.css

@@ -0,0 +1,40 @@
+@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;}
+}

assets/css/style.css

@@ -0,0 +1,80 @@
+html { scroll-behavior: smooth; font-family: ubuntu; }
+*{ box-sizing: border-box; margin:0; padding:0;}
+
+.main-container{
+  padding:20px;
+  background-color: rgb(186, 186, 186);
+  width:100vw;
+  height:100vh;
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.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;
+  
+  justify-content: space-between;
+  flex-wrap: wrap;
+  
+}
+
+.alert-details > div{
+  margin:10px;
+}
+
+.details-show{
+  display:flex;
+}
+
+.alert_red{
+  background-color: #df1414;
+  color:#ff9175;
+  box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;;
+  animation: bumping_red_bg 4s linear 2s 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;
+}

assets/css/variables.css

@@ -0,0 +1,86 @@
+:root {
+  /*### PrimaryColor ###*/
+  --demo1:hsl(98, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
+  --pri:98; /*Change only this from the color that you need! Don't Touch the code below!*/
+  /*The color below is automaticaly created 20 levels of lightness*/
+  --priCol20:hsl(var(--pri), 100%, 100%);
+  --priCol19:hsl(var(--pri), 100%, 95%);
+  --priCol18:hsl(var(--pri), 100%, 90%);
+  --priCol17:hsl(var(--pri), 100%, 85%);
+  --priCol16:hsl(var(--pri), 100%, 80%);
+  --priCol15:hsl(var(--pri), 100%, 75%);
+  --priCol14:hsl(var(--pri), 100%, 70%);
+  --priCol13:hsl(var(--pri), 100%, 65%);
+  --priCol12:hsl(var(--pri), 100%, 60%);
+  --priCol11:hsl(var(--pri), 100%, 55%);
+  --priCol10:hsl(var(--pri), 100%, 50%);
+  --priCol9:hsl(var(--pri), 100%, 45%);
+  --priCol8:hsl(var(--pri), 100%, 40%);
+  --priCol7:hsl(var(--pri), 100%, 35%);
+  --priCol6:hsl(var(--pri), 100%, 30%);
+  --priCol5:hsl(var(--pri), 100%, 25%);
+  --priCol4:hsl(var(--pri), 100%, 20%);
+  --priCol3:hsl(var(--pri), 100%, 15%);
+  --priCol2:hsl(var(--pri), 100%, 10%);
+  --priCol1:hsl(var(--pri), 100%, 5%);
+
+  /*### SecondColor ###*/
+  --demo2:hsl(207, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
+  --sec:207; /*Change only this from the color that you need! Don't Touch the code below!*/
+  /*The color below is automaticaly created 20 levels of lightness*/
+  --secCol20:hsl(var(--sec), 100%, 100%);
+  --secCol19:hsl(var(--sec), 100%, 95%);
+  --secCol18:hsl(var(--sec), 100%, 90%);
+  --secCol17:hsl(var(--sec), 100%, 85%);
+  --secCol16:hsl(var(--sec), 100%, 80%);
+  --secCol15:hsl(var(--sec), 100%, 75%);
+  --secCol14:hsl(var(--sec), 100%, 70%);
+  --secCol13:hsl(var(--sec), 100%, 65%);
+  --secCol12:hsl(var(--sec), 100%, 60%);
+  --secCol11:hsl(var(--sec), 100%, 55%);
+  --secCol10:hsl(var(--sec), 100%, 50%);
+  --secCol9:hsl(var(--sec), 100%, 45%);
+  --secCol8:hsl(var(--sec), 100%, 40%);
+  --secCol7:hsl(var(--sec), 100%, 35%);
+  --secCol6:hsl(var(--sec), 100%, 30%);
+  --secCol5:hsl(var(--sec), 100%, 25%);
+  --secCol4:hsl(var(--sec), 100%, 20%);
+  --secCol3:hsl(var(--sec), 100%, 15%);
+  --secCol2:hsl(var(--sec), 100%, 10%);
+  --secCol1:hsl(var(--sec), 100%, 5%);
+
+    /*### ThirdColor ###*/
+    --demo3:hsl(280, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
+    --thi:280; /*Change only this from the color that you need! Don't Touch the code below!*/
+    /*The color below is automaticaly created 20 levels of lightness*/
+    --thiCol20:hsl(var(--thi), 100%, 100%);
+    --thiCol19:hsl(var(--thi), 100%, 95%);
+    --thiCol18:hsl(var(--thi), 100%, 90%);
+    --thiCol17:hsl(var(--thi), 100%, 85%);
+    --thiCol16:hsl(var(--thi), 100%, 80%);
+    --thiCol15:hsl(var(--thi), 100%, 75%);
+    --thiCol14:hsl(var(--thi), 100%, 70%);
+    --thiCol13:hsl(var(--thi), 100%, 65%);
+    --thiCol12:hsl(var(--thi), 100%, 60%);
+    --thiCol11:hsl(var(--thi), 100%, 55%);
+    --thiCol10:hsl(var(--thi), 100%, 50%);
+    --thiCol9:hsl(var(--thi), 100%, 45%);
+    --thiCol8:hsl(var(--thi), 100%, 40%);
+    --thiCol7:hsl(var(--thi), 100%, 35%);
+    --thiCol6:hsl(var(--thi), 100%, 30%);
+    --thiCol5:hsl(var(--thi), 100%, 25%);
+    --thiCol4:hsl(var(--thi), 100%, 20%);
+    --thiCol3:hsl(var(--thi), 100%, 15%);
+    --thiCol2:hsl(var(--thi), 100%, 10%);
+    --thiCol1:hsl(var(--thi), 100%, 5%);
+
+  /*######################################*/
+
+  /*##### Default Variable #####*/
+  --padsidepage:0 25px; /*Padding side for page*/
+}
+
+/* ### Use Example ### 
+background-color:var(--main-bg-color)
+*/
+