Endurman clicker el finalo versio 02

login.css

@@ -5,12 +5,10 @@
 }
 
 body {
-
     font-family: 'Poppins', sans-serif;
     font-weight: 300;
     color: #ffeba7;
     background-color: #1f2029;
-
     width: 100vw;
     height: 65vh;
     display: flex;
@@ -20,7 +18,6 @@ body {
 }
 
 .cube-container {
-
     width: 25em;
     height: 25em;
     text-align: center;
@@ -45,13 +42,13 @@ body {
     background-size: cover;
 }
 
-h6 span{
+h6 span {
     padding: 0 20px;
     font-weight: 700;
     font-size: 1.5em;
 }
 
-.card{
+.card {
     height: 48px;
     width: 100%;
     font-size: 1.5em;
@@ -73,9 +70,8 @@ h6 span{
     color: #c4c3ca;
     background-color: #1f2029;
     border: none;
-    -webkit-transition: all 200ms linear;
     transition: all 200ms linear;
-    box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
+    box-shadow: 0 4px 8px 0 rgba(21, 21, 21, .2);
     margin-top: 1em;
 }
 
@@ -89,8 +85,6 @@ h6 span{
     padding-left: 1em;
 }
 
-
-
 .cube-side:nth-child(1) {
     transform: rotateY(0deg) translateZ(12.5em);
     background-image: var(--image-1);
@@ -105,19 +99,22 @@ h6 span{
     transition-duration: 3s;
     transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 }
+
 .checkbox:nth-child(1):checked ~ .cube {
     transform: rotateX(0deg) rotateY(0deg);
 }
+
 .checkbox:nth-child(2):checked ~ .cube {
     transform: rotateX(0deg) rotateY(-90deg);
 }
 
 [type="checkbox"]:checked,
-[type="checkbox"]:not(:checked){
+[type="checkbox"]:not(:checked) {
     display: none;
 }
+
 .checkbox:checked + label,
-.checkbox:not(:checked) + label{
+.checkbox:not(:checked) + label {
     position: relative;
     display: block;
     text-align: center;
@@ -129,8 +126,9 @@ h6 span{
     cursor: pointer;
     background-color: #ffeba7;
 }
+
 .checkbox:checked + label:before,
-.checkbox:not(:checked) + label:before{
+.checkbox:not(:checked) + label:before {
     position: absolute;
     display: block;
     width: 36px;
@@ -148,35 +146,12 @@ h6 span{
     font-size: 24px;
     transition: all 0.5s ease;
 }
+
 .checkbox:checked + label:before {
     transform: translateX(44px) rotate(-270deg);
 }
 
-.textbox[type="Username"]::placeholder,
-.textbox[type="password"]::placeholder {
-    padding-left: 3px;
-}
-
-.textbox[type="Username"],
-.textbox[type="password"] {
-    padding-left: 1em;
-}
-
-.btn-signup {
-    border: 4px solid #1f2029;
-    background-color: #1f2029;
-    color: rgba(196, 195, 202, 0.7);
-    font-weight: normal;
-    font-size: 18px;
-    padding: 8px 16px;
-    margin-top: 2em;
-    border-radius: 30px;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
+.btn-signup,
 .btn {
     border: 4px solid #1f2029;
     background-color: #1f2029;
@@ -192,10 +167,7 @@ h6 span{
     transition: all 0.3s ease;
 }
 
-.btn:hover {
-    box-shadow: 0px 0px 20px 0px #8a00e3;
-}
-
+.btn:hover,
 .btn-signup:hover {
     box-shadow: 0px 0px 20px 0px #8a00e3;
 }
@@ -204,8 +176,6 @@ h6 span{
     margin-top: -2em;
 }
 
-
-
 @media (max-width: 768px) {
     body {
         height: auto;

login.php

@@ -37,7 +37,7 @@
                 <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
 
                     <div class="signup-side">
-                    <input class="textbox username" type="text" placeholder="Nick (MAX 8 charakters)" name="username" required/>
+                        <input class="textbox username" type="text" placeholder="Nick (MAX 8 characters)" name="username" required maxlength="8" />
                     <input class="textbox password" type="password" placeholder="Password" name="password" required/>
                     <input class="textbox password" type="password" placeholder="Confirm password" name="password_repeat" required/>
 
@@ -63,8 +63,9 @@
 
                 if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["signup"])) {
                     $username = $_POST["username"];
-                    $password = $_POST["password"];
-                    $password_repeat = $_POST["password_repeat"];
+                    $password = md5($_POST["password"]);
+
+                    $password_repeat = md5($_POST["password_repeat"]);
 
                     $check_query = "SELECT * FROM users_clicker WHERE username='$username'";
                     $check_result = $conn->query($check_query);
@@ -99,7 +100,7 @@
 
                 if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["login"])) {
                     $username = $_POST["username"];
-                    $password = $_POST["password"];
+                    $password = md5($_POST["password"]);
 
                     $sql = "SELECT * FROM users_clicker WHERE username='$username'";
 
@@ -123,6 +124,7 @@
 
                 $conn->close();
                 ?>
+
             </div>
         </div>
     </div>

main.css

 @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
 
 body {
-
     font-family: 'Poppins', sans-serif;
     font-weight: 300;
     color: #ffeba7;
@@ -11,7 +10,6 @@ body {
 }
 
 .container {
-
     width: 80vw;
     height: 65vh;
     display: flex;
@@ -36,15 +34,14 @@ body {
     cursor: pointer;
 }
 
-
-
-.menu:hover ~ .popmenu, .popmenu:hover {
-
-    width: 22%;
+.menu:hover ~ .popmenu,
+.popmenu:hover {
+    width: fit-content;
     color: #1f2029;
 }
 
-.menu:hover ~ .popmenu .content .logout, .popmenu:hover .logout {
+.menu:hover ~ .popmenu .content .logout,
+.popmenu:hover .logout {
     background-color: #1f2029;
 }
 
@@ -53,27 +50,21 @@ body {
 }
 
 .popmenu {
-
     border-radius: 3em;
     background-color: #ffeba7;
     align-items: center;
     color: #ffeba7;
-
     position: absolute;
     width: 3em;
     height: 3em;
-
     transition: width 0.5s ease;
     z-index: 1;
     overflow: hidden;
-
     display: flex;
     flex-direction: row;
 }
 
 .content {
-
-
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -83,12 +74,9 @@ body {
     align-items: center;
 }
 
-h3 {
-
-}
+h3 {}
 
 .logout {
-
     top: 0.25em;
     right: 0.33em;
     position: absolute;
@@ -107,16 +95,12 @@ h3 {
 .logout:hover {
     background-color: #292936;
     box-shadow: 0px 0px 1em 0px #8a00e3;
-
 }
 
-
 .endurman {
-
     width: 30em;
     height: 37em;
     background-color: #1f2029;
-
 }
 
 .endurman:hover {
@@ -125,13 +109,11 @@ h3 {
 }
 
 .container h1 {
-
     top: 68%;
     position: fixed;
 }
 
 .btn {
-
     background-color: #1f2029;
     border: none;
 }
@@ -159,7 +141,6 @@ h3 {
 }
 
 .item {
-
     padding-left: 3em;
     display: flex;
     flex-direction: column;
@@ -169,7 +150,6 @@ h3 {
     left: 1%;
     position: fixed;
     bottom: 0;
-
 }
 
 .villager:hover .vill,
@@ -178,12 +158,11 @@ h3 {
     transition: transform 0.5s ease-in-out 0.1s;
 }
 
-
-.vill:hover ~ .shop, .shop:hover {
+.vill:hover ~ .shop,
+.shop:hover {
     bottom: 0;
 }
 
-
 .shop h2 {
     font-size: 24px;
     margin-top: 0;
@@ -216,8 +195,7 @@ h3 {
     color: #999;
 }
 
-.score_board{
-
+.score_board {
     background-color: #17181e;
     color: #ffeba7;
     position: absolute;
@@ -225,17 +203,10 @@ h3 {
     height: 73vh;
     width: 20vw;
     border: 3px solid #ffeba7;
-
-}
-
-.score_board{
-
     padding-left: 1em;
-
 }
 
 .score_board h2 {
-
     text-align: center;
 }
 
@@ -243,9 +214,7 @@ h3 {
     html {
         font-size: 14px;
     }
-}
 
-@media (max-width: 768px) {
     .container h1 {
         font-size: 1.5rem;
         bottom: 10%;
@@ -281,3 +250,4 @@ h3 {
         margin-bottom: 5px;
     }
 }
+