diff --git a/assets/css/animations.css b/assets/css/animations.css index fde746e..577590b 100755 --- a/assets/css/animations.css +++ b/assets/css/animations.css @@ -38,3 +38,13 @@ 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%; + } +} + diff --git a/assets/css/style.css b/assets/css/style.css index 08c8eb1..9bddd66 100755 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,14 +1,38 @@ 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:20px; - background-color: rgb(186, 186, 186); + padding:50px 20px 20px 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{ @@ -67,9 +91,12 @@ html { scroll-behavior: smooth; font-family: ubuntu; } .alert_red{ background-color: #df1414; - color:#ff9175; + color:#ffe9e3; box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;; - animation: bumping_red_bg 4s linear 2s infinite; + /* 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{ @@ -77,4 +104,25 @@ html { scroll-behavior: smooth; font-family: ubuntu; } color:#c3ffb4; box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;; animation: bumping_green_bg 4s linear 2s infinite; +} + +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); } \ No newline at end of file diff --git a/assets/css/variables.css b/assets/css/variables.css index 37fe40e..9c4d8cc 100755 --- a/assets/css/variables.css +++ b/assets/css/variables.css @@ -1,83 +1,9 @@ :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*/ + --menu-color: #000000; + --menu-border-col: #61f061; } /* ### Use Example ### diff --git a/mainpage.php b/mainpage.php index d6d0021..c52557a 100644 --- a/mainpage.php +++ b/mainpage.php @@ -1,3 +1,3 @@ -