From 8896d492eb0c377e9339d4a4c540527687cf5d28 Mon Sep 17 00:00:00 2001
From: "Luis S. Ruisinger" <ge42deg@mytum.de>
Date: Tue, 12 Jul 2022 18:25:36 +0200
Subject: [PATCH] [Loginpage]

---
 frontend/src/components/LoginPage.vue | 499 +++++++++++++++++++++-----
 1 file changed, 406 insertions(+), 93 deletions(-)

diff --git a/frontend/src/components/LoginPage.vue b/frontend/src/components/LoginPage.vue
index af01b80..df6c65a 100644
--- a/frontend/src/components/LoginPage.vue
+++ b/frontend/src/components/LoginPage.vue
@@ -14,8 +14,8 @@
           <a>Login</a>
         </div>
 
-        <input type="checkbox" class="menu-btn" id="menu-btn">
-        <label for="menu-btn" class="menu-icon">
+        <input id="menu-btn" class="menu-btn" type="checkbox">
+        <label class="menu-icon" for="menu-btn">
           <span class="menu-icon__line"></span>
         </label>
 
@@ -38,16 +38,16 @@
       <section>
         <div class="container">
 
-          <div class="user-login" id="user-sign-in">
+          <div id="user-sign-in" class="user-login">
             <div class="site-background"/>
             <div class="form-background">
               <form>
 
                 <h2>Sign In</h2>
-                <input type="text" placeholder="Username">
-                <input type="password" placeholder="Password">
-                <input type="submit" class="login-btn-apple" value="Login Apple">
-                <input type="submit" class="login-btn" value="Login">
+                <input placeholder="Username" type="text">
+                <input placeholder="Password" type="password">
+                <input class="login-btn-apple" type="submit" value="Login Apple">
+                <input class="login-btn" type="submit" value="Login">
                 <p class="signup">Don't have an account?
                   <a href="#" v-on:click="isSignUp = !isSignUp">Sign up</a>
                 </p>
@@ -56,18 +56,18 @@
             </div>
           </div>
 
-          <div class="user-signup" :class="{toggleOff:isSignUp}">
+          <div :class="{toggleOff:isSignUp}" class="user-signup">
             <div class="site-background"/>
             <div class="form-background">
               <form>
 
                 <h2>Create Account</h2>
-                <input type="text" placeholder="Username">
-                <input type="text" placeholder="Email Address">
-                <input type="password" placeholder="Create Password">
-                <input type="password" placeholder="Confirm Password">
+                <input placeholder="Username" type="text">
+                <input placeholder="Email Address" type="text">
+                <input placeholder="Create Password" type="password">
+                <input placeholder="Confirm Password" type="password">
                 <input type="submit" value="Sign Up">
-                <p class="signup">Already have an account
+                <p class="signup">Already have an account?
                   <br>
                   <a href="#" v-on:click="isSignUp = !isSignUp">Sign in</a>
                 </p>
@@ -78,16 +78,57 @@
 
         </div>
       </section>
-      
+
+      <div class="footer">
+        <div class="container">
+          <div class="row">
+
+            <div class="footer-col">
+              <h4 class="firstHeadline">About Us</h4>
+              <ul>
+                <li class="aboutUs">
+                  <a href="#">The Project</a>
+                  <a href="#">The Team</a>
+                  <a href="#">Our Partners</a>
+                </li>
+              </ul>
+            </div>
+
+            <div class="footer-col">
+              <h4 class="secondHeadline">Help</h4>
+              <ul>
+                <li class="help">
+                  <a href="#">Support</a>
+                  <a href="#">FAQ</a>
+                  <a href="#">AGB</a>
+                </li>
+              </ul>
+            </div>
+
+            <div class="footer-col">
+              <h4 class="thirdHeadline">Follow Us</h4>
+              <ul>
+                <li class="social-links">
+                  <a href="#">
+                    <i class="fa fa-instagram fa-2x"/>
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
     </div>
+
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"
+          type='text/css'/>
   </div>
 
 </template>
 
 
-
-
-
 <script>
 
 export default {
@@ -103,9 +144,6 @@ export default {
 </script>
 
 
-
-
-
 <style lang="scss">
 
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
@@ -117,6 +155,7 @@ export default {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  list-style: none;
 }
 
 .main {
@@ -125,11 +164,145 @@ export default {
   display: grid;
   justify-content: center;
   align-items: center;
-  font-size: 1.25rem;
   background: #213737;
 }
 
-section{
+.logo a {
+  color: white;
+}
+
+.menu-icon {
+  &__line, &__line:before, &__line::after {
+    background-color: white;
+  }
+}
+
+
+/* footer styling */
+
+.footer {
+  position: fixed;
+  display: flex;
+  left: 0;
+  top: 90%;
+  width: 100vw;
+  height: 8vh;
+  z-index: 3;
+  background: white;
+}
+
+.container {
+  position: relative;
+  background: darkorange;
+  padding: 40px;
+  width: 100%;
+  height: 96%;
+  margin: auto;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.footer-col {
+  width: 25%;
+}
+
+.footer-col h4 {
+  text-align: center;
+  text-transform: uppercase;
+  position: relative;
+  letter-spacing: 2px;
+  font-size: 24px;
+  color: white;
+  left: 50%;
+  top: -20px;
+}
+
+
+.footer-col h4::before {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  background-color: black;
+  height: 2px;
+  box-sizing: border-box;
+  width: 65px;
+}
+
+.footer-col ul li a {
+  position: sticky;
+  text-align: left;
+  font-size: 20px;
+  width: 140px;
+  text-decoration: none;
+  font-weight: 300;
+  color: white;
+  display: block;
+  transition: all 0.3s ease;
+  left: 8000%;
+  margin: 0 -60px;
+}
+
+.aboutUs {
+  position: relative;
+  left: 6px;
+}
+
+.help {
+  position: relative;
+  left: 44px;
+}
+
+.social-links {
+  position: relative;
+  left: -13.5px;
+  top: 5px;
+}
+
+.fa-instagram {
+  position: relative;
+  top: 14px;
+  color: black;
+  left: 1px;
+}
+
+.footer-col .social-links a {
+  height: 65px;
+  width: 65px;
+  background-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
+  margin: 0 10px 10px 0;
+  row-gap: 10px;
+  text-align: center;
+  border-radius: 50%;
+  color: black;
+  transition: all 0.5s ease;
+}
+
+.footer-col h4:hover {
+  cursor: default;
+}
+
+.footer-col .aboutUs a:hover {
+  color: black;
+  padding-left: 8px;
+}
+
+.footer .help a:hover {
+  color: black;
+  padding-left: 8px;
+}
+
+.footer-col .social-links a:hover {
+  color: #24262b;
+  background-color: #ffffff;
+}
+
+/* login / signin styling */
+
+section {
   position: relative;
   min-height: 100vh;
   display: flex;
@@ -138,7 +311,7 @@ section{
   padding: 40px;
   transition: 0.5s;
 
-  .container{
+  .container {
     position: relative;
     width: 1200px;
     height: 750px;
@@ -146,7 +319,7 @@ section{
     box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
   }
 
-  .user-login{
+  .user-login {
     position: absolute;
     top: 0;
     left: 0;
@@ -154,7 +327,7 @@ section{
     height: 100%;
     display: flex;
 
-    .site-background{
+    .site-background {
       position: relative;
       width: 50%;
       height: 100%;
@@ -162,7 +335,7 @@ section{
       background: url('../ressouce/5008bf96009ea69ba157815061bce4f2.png');
     }
 
-    .form-background{
+    .form-background {
       position: relative;
       width: 50%;
       height: 100%;
@@ -173,7 +346,7 @@ section{
       padding: 80px;
     }
 
-    h2{
+    h2 {
       position: relative;
       font-size: 30px;
       font-weight: 600;
@@ -186,17 +359,17 @@ section{
       top: -15px;
     }
 
-    h2:after{
-      content:'';
-      display:block;
-      border-bottom:2px solid #000;
-      height:0;
-      position:relative;
+    h2:after {
+      content: '';
+      display: block;
+      border-bottom: 2px solid #000;
+      height: 0;
+      position: relative;
       top: 25px;
 
     }
 
-    input{
+    input {
       position: relative;
       width: 100%;
       padding: 20px;
@@ -211,7 +384,7 @@ section{
       color: black;
     }
 
-    input[type="submit"]{
+    input[type="submit"] {
       cursor: pointer;
       max-width: 210px;
       transition: 0.5s;
@@ -219,12 +392,12 @@ section{
       color: white;
     }
 
-    .login-btn{
+    .login-btn {
       position: relative;
       left: 20px;
     }
 
-    .signup{
+    .signup {
       text-align: center;
       position: relative;
       margin-top: 300px;
@@ -233,7 +406,7 @@ section{
       letter-spacing: 2px;
     }
 
-    a{
+    a {
       font-weight: 600;
       text-decoration: none;
       color: darkslategrey;
@@ -241,14 +414,14 @@ section{
     }
   }
 
-  .user-signup{
+  .user-signup {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 
-    .site-background{
+    .site-background {
       position: relative;
       width: 50%;
       height: 100%;
@@ -257,7 +430,7 @@ section{
       background: url('../ressouce/5008bf96009ea69ba157815061bce4f2.png');
     }
 
-    .form-background{
+    .form-background {
       position: relative;
       width: 50%;
       height: 100%;
@@ -269,7 +442,7 @@ section{
       top: -100%;
     }
 
-    h2{
+    h2 {
       position: relative;
       font-size: 30px;
       font-weight: 600;
@@ -282,17 +455,17 @@ section{
       top: 75px;
     }
 
-    h2:after{
-      content:'';
-      display:block;
-      border-bottom:2px solid #000;
-      height:0;
-      position:relative;
+    h2:after {
+      content: '';
+      display: block;
+      border-bottom: 2px solid #000;
+      height: 0;
+      position: relative;
       top: 25px;
 
     }
 
-    input{
+    input {
       position: relative;
       width: 100%;
       padding: 20px;
@@ -307,7 +480,7 @@ section{
       color: black;
     }
 
-    input[type="submit"]{
+    input[type="submit"] {
       cursor: pointer;
       max-width: 210px;
       transition: 0.5s;
@@ -316,7 +489,7 @@ section{
       left: 52%;
     }
 
-    .signup{
+    .signup {
       text-align: center;
       position: relative;
       margin-top: 280px;
@@ -326,7 +499,7 @@ section{
       top: -85px;
     }
 
-    a{
+    a {
       text-align: center;
       font-weight: 600;
       text-decoration: none;
@@ -336,36 +509,106 @@ section{
   }
 }
 
-.toggleOff{
+.toggleOff {
   display: none;
 }
 
 @media (max-height: 1440px) {
 
-  section{
+  /* footer styling */
+
+  .footer {
+    position: fixed;
+    display: flex;
+    left: 0;
+    top: 87.5%;
+    width: 100vw;
+    height: 10.5vh;
+    z-index: 3;
+    background: white;
+  }
+
+  .footer-col h4 {
+    letter-spacing: 2px;
+    font-size: 12px;
+  }
+
+  .footer-col h4::before {
+    bottom: -7px;
+    height: 2px;
+    width: 43px;
+  }
+
+  .footer-col ul li a {
+    font-size: 12px;
+    width: 120px;
+    top: 13px;
+  }
+
+  .aboutUs {
+    position: relative;
+    left: 2px;
+    top: -6px;
+  }
+
+  .help {
+    left: 30px;
+    top: -6px;
+  }
+
+  .social-links {
+    left: -23px;
+    top: 5px;
+  }
+
+  .fa-instagram {
+    top: 2px;
+    left: 0.5px;
+  }
+
+  .footer-col .social-links a {
+    height: 37px;
+    width: 37px;
+    margin: 0 7px 7px 0;
+    line-height: 27px;
+    top: 20px;
+    left: 76%;
+  }
+
+  .footer-col .aboutUs a:hover {
+    padding-left: 5px;
+  }
+
+  .footer .help a:hover {
+    padding-left: 5px;
+  }
+
+  /* login / signin styling */
+
+  section {
     padding: 27px;
 
-    .container{
+    .container {
       width: 800px;
       height: 500px;
       box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
     }
 
-    .user-login{
+    .user-login {
 
-      .form-background{
+      .form-background {
         padding: 53px;
       }
 
-      h2{
+      h2 {
         font-size: 20px;
         letter-spacing: 3px;
         margin-bottom: 7px;
         top: 0;
       }
 
-      h2:after{
-        border-bottom:2px solid #000;
+      h2:after {
+        border-bottom: 2px solid #000;
         top: 13px;
 
       }
@@ -378,45 +621,45 @@ section{
         top: 17px;
       }
 
-      input[type="submit"]{
+      input[type="submit"] {
         max-width: 140px;
       }
 
-      .login-btn{
+      .login-btn {
         left: 13px;
       }
 
-      .signup{
+      .signup {
         margin-top: 200px;
         font-size: 8px;
         letter-spacing: 1px;
       }
 
-      a{
+      a {
         letter-spacing: 2px;
       }
     }
 
-    .user-signup{
+    .user-signup {
 
-      .form-background{
+      .form-background {
         padding: 53px;
       }
 
-      h2{
+      h2 {
         font-size: 20px;
         letter-spacing: 3px;
         margin-bottom: 7px;
         top: 70px;
       }
 
-      h2:after{
-        border-bottom:2px solid #000;
+      h2:after {
+        border-bottom: 2px solid #000;
         top: 13px;
 
       }
 
-      input{
+      input {
         padding: 13px;
         font-size: 13px;
         letter-spacing: 2px;
@@ -424,18 +667,18 @@ section{
         top: 87px;
       }
 
-      input[type="submit"]{
+      input[type="submit"] {
         max-width: 140px;
       }
 
-      .signup{
+      .signup {
         margin-top: 187px;
         font-size: 13px;
         letter-spacing: 1px;
         top: -57px;
       }
 
-      a{
+      a {
         letter-spacing: 2px;
       }
     }
@@ -444,35 +687,106 @@ section{
 
 @media (max-height: 1080px) {
 
-  section{
+  /* footer styling */
+
+  .footer {
+    position: fixed;
+    display: flex;
+    left: 0;
+    top: 83.5%;
+    width: 100vw;
+    height: 14vh;
+    z-index: 3;
+    background: white;
+  }
+
+  .footer-col h4 {
+    letter-spacing: 1px;
+    font-size: 12px;
+  }
+
+  .footer-col h4::before {
+    bottom: -5px;
+    height: 1px;
+    width: 32.5px;
+  }
+
+  .footer-col ul li a {
+    font-size: 10px;
+    width: 118px;
+    top: 10px;
+    left: 78%;
+  }
+
+  .aboutUs {
+    position: relative;
+    left: 2px;
+    top: -6px;
+  }
+
+  .help {
+    left: 30px;
+    top: -6px;
+  }
+
+  .social-links {
+    left: -23px;
+    top: -1px;
+  }
+
+  .fa-instagram {
+    top: -4px;
+    left: 0.5px;
+  }
+
+  .footer-col .social-links a {
+    height: 37px;
+    width: 37px;
+    margin: 0 7px 7px 0;
+    line-height: 27px;
+    top: 20px;
+    left: 76%;
+  }
+
+  .footer-col .aboutUs a:hover {
+    padding-left: 5px;
+  }
+
+  .footer .help a:hover {
+    padding-left: 5px;
+  }
+
+  /* login / signin styling */
+
+  section {
     padding: 20px;
 
-    .container{
+    .container {
       width: 600px;
       height: 375px;
       box-shadow: 0 7.5px 25px rgba(0, 0, 0, 0.6);
     }
 
-    .user-login{
+    .user-login {
 
-      .form-background{
+      .form-background {
         padding: 40px;
       }
 
-      h2{
+      h2 {
         font-size: 15px;
         letter-spacing: 2px;
         margin-bottom: 5px;
         top: -7.5px;
       }
 
-      h2:after{
+      h2:after {
         border-bottom: 1px solid #000;
         top: 12.5px;
 
       }
 
-      input{
+      input {
         padding: 4px;
         font-size: 6px;
         letter-spacing: 2px;
@@ -480,46 +794,46 @@ section{
         top: 12.5px;
       }
 
-      input[type="submit"]{
+      input[type="submit"] {
         max-width: 105px;
       }
 
-      .login-btn{
+      .login-btn {
         left: 10px;
       }
 
-      .signup{
+      .signup {
         position: relative;
         margin-top: 150px;
         font-size: 4px;
         letter-spacing: 1px;
       }
 
-      a{
+      a {
         letter-spacing: 1px;
       }
     }
 
-    .user-signup{
+    .user-signup {
 
-      .form-background{
+      .form-background {
         padding: 40px;
       }
 
-      h2{
+      h2 {
         font-size: 15px;
         letter-spacing: 2px;
         margin-bottom: 5px;
         top: 37.5px;
       }
 
-      h2:after{
+      h2:after {
         border-bottom: 1px solid #000;
         top: 12.5px;
 
       }
 
-      input{
+      input {
         padding: 4px;
         font-size: 6px;
         letter-spacing: 2px;
@@ -527,23 +841,22 @@ section{
         top: 57.5px;
       }
 
-      input[type="submit"]{
+      input[type="submit"] {
         max-width: 105px;
       }
 
-      .signup{
+      .signup {
         margin-top: 140px;
         font-size: 4px;
         letter-spacing: 1px;
         top: -42.5px;
       }
 
-      a{
+      a {
         letter-spacing: 1px;
       }
     }
   }
 }
 
-
 </style>
\ No newline at end of file