#EHA-34 Fixed image errors, form for E-mail and Password is added, bu…

…tton fixed.
E-Hayvan · Jan 2, 2024 · e109d98 · e109d98
1 parent 2fa8601
commit e109d98
Showing 1 changed file with 33 additions and 48 deletions.
diff --git a/src/main/Frontend/login.html b/src/main/Frontend/login.html
@@ -19,75 +19,60 @@
     integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 
     crossorigin="anonymous"></script>
   <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
-  <title>{% block title %}Home{% endblock %}</title> <!-- This is the Jinja syntax -->
 </head>
 
-<body style="margin: 0; padding: 0; height: 100%; background: linear-gradient(to top, #D9DFE6, #FFFFFF); display: flex;">
+<body style="margin: 0; padding: 0; height: 100%; background: linear-gradient(to top, #D9DFE6, #FFFFFF); display: flex; overflow: hidden;">
 
 
   <div class="SideMenu" style="width: 50%; height: 100%; flex-direction: column; justify-content: flex-start; margin-left: 0;">
     <div class="Text" style="text-align: left; margin-top: 30px; margin-left: 100px; color: black; font-size: 80px; font-family: RocknRoll One; font-weight: 400">
       E-H
       <div class="Icon" style="display: inline-block; width: 8%; height: 8%">
-        <img class="Vector" src="../../../../../Frontend%20-%20Kopya/Images/Union.png" alt="Logo" style="width: 100%; height: 100%; object-fit: contain; vertical-align: center; padding-bottom: 10px;">
+        <img class="Vector" src="Images/Union.png" alt="Logo" style="width: 100%; height: 100%; object-fit: contain; vertical-align: center; padding-bottom: 10px;">
       </div>
       YV
       <div class="Icon" style="display: inline-block; width: 8%; height: 8%">
-        <img class="Vector" src="../../../../../Frontend%20-%20Kopya/Images/Union.png" alt="Logo" style="width: 100%; height: 100%; object-fit: contain; vertical-align: center; padding-bottom: 10px;">
+        <img class="Vector" src="Images/Union.png" alt="Logo" style="width: 100%; height: 100%; object-fit: contain; vertical-align: center; padding-bottom: 10px;">
       </div>
       N
     </div>
-    <img src="../../../../../Frontend%20-%20Kopya/Images/newdog.png" alt="New Dog Image" style="width: 53%; height: auto;">
+    <img src="Images/newdog.png" alt="New Dog Image" style="width: 52%; height: auto;">
   </div>
-  
+
   <div class="OtherSideMenu" style="width: 50%; height: 100%; flex-direction: column; justify-content: flex-start; margin-left: 0;">
-    <div class="ActionSheet" style="width: 500px; height: 570px; margin-top: 170px; margin-left: 200px; flex-direction: column; align-items: center; display: inline-flex; background-color: white; border-radius: 20px;">
-      <div class="BulletContainer" style="padding: 16px; justify-content: center; align-items: center; gap: 10px; display: inline-flex">
-        <div class="IconFrame" style="padding: 24px; border-radius: 56px; border: 3px #D1E6FF solid; justify-content: center; align-items: center; gap: 10px; display: flex">
-          <div class="Icon" style="width: 48px; height: 48px; position: relative">
-            <img class="Vector" src="../../../../../Frontend%20-%20Kopya/Images/Icon.png" alt="Logo" style="width: 100%; height: 100%; object-fit: contain; vertical-align: center; padding-bottom: 10px;">
-          </div>
-        </div>
-      </div>
-      <div class="ActionSheet" style="align-self: stretch; height: 790px; padding: 70px; flex-direction: column; justify-content: center; align-items: center; display: flex">
-        <div class="ContentContainer" style="align-self: stretch; flex: 1 1 0; padding-top: 24px; padding-bottom: 24px; flex-direction: column; justify-content: center; align-items: center; gap: 40px; display: flex">
-          <div class="TitleAndBody" style="align-self: stretch; height: 42px; flex-direction: column; justify-content: center; align-items: center; gap: 20px; display: flex">
-            <div class="Title" style="align-self: stretch; text-align: center; color: #39434F; font-size: 34px; font-family: Catamaran; font-weight: 700; line-height: 42px; word-wrap: break-word">Log in</div>
-          </div>
-          <div class="InputsContainer" style="align-self: stretch; height: 134px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 26px; display: flex">
-            <div class="InputPet" style="align-self: stretch; height: 54px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 5px; display: flex">
-              <div class="InputBox" style="align-self: stretch; height: 54px; border-radius: 14px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex">
-                <div class="InputContent" style="align-self: stretch; height: 54px; padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; background: white; border-radius: 14px; border: 1px #D9DFE6 solid; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
-                  <div class="Content" style="flex: 1 1 0; height: 18px; justify-content: flex-start; align-items: center; gap: 10px; display: flex">
-                    <div class="Text" style="flex: 1 1 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
-                      <div class="Label" style="align-self: stretch; color: #808B9A; font-size: 16px; font-family: Noto Sans; font-weight: 400; line-height: 18px; word-wrap: break-word">Email</div>
-                    </div>
+      <div class="ActionSheet" style="width: 500px; height: 450px; margin-top: 170px; margin-left: 130px; flex-direction: column; align-items: center; display: inline-flex; background-color: white; border-radius: 20px;">
+          <div class="BulletContainer" style="padding: 16px; justify-content: center; align-items: center; gap: 10px; display: inline-flex">
+              <div class="IconFrame" style="padding: 24px; border-radius: 56px; border: 3px #D1E6FF solid; justify-content: center; align-items: center; gap: 10px; display: flex">
+                  <div class="Icon" style="width: 48px; height: 48px; position: relative">
+                      <img class="Vector" src="Images/Icon.png" alt="Logo" style="width: 100%; height: 100%; object-fit: contain; vertical-align: center; padding-bottom: 10px;">
                   </div>
-                </div>
               </div>
-            </div>
-            <div class="InputPet" style="align-self: stretch; height: 54px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 5px; display: flex">
-              <div class="InputBox" style="align-self: stretch; height: 54px; border-radius: 14px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex">
-                <div class="InputContent" style="align-self: stretch; height: 54px; padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; background: white; border-radius: 14px; border: 1px #D9DFE6 solid; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
-                  <div class="Content" style="flex: 1 1 0; height: 20px; justify-content: flex-start; align-items: center; gap: 10px; display: flex">
-                    <div class="Text" style="flex: 1 1 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
-                      <div class="Label" style="align-self: stretch; color: #808B9A; font-size: 16px; font-family: Noto Sans; font-weight: 400; line-height: 18px; word-wrap: break-word">Password</div>
-                    </div>
-                  </div>
-                </div>
+          </div>
+              <div class="TitleAndBody" style="align-self: stretch; height: 42px; flex-direction: column; justify-content: center; align-items: center; gap: 20px; display: flex">
+                  <div class="Title" style="align-self: stretch; text-align: center; color: #39434F; font-size: 34px; font-family: RocknRoll One; font-weight: 700; line-height: 42px; word-wrap: break-word">Log in</div>
               </div>
-            </div>
+              <form id="loginForm" action="your_backend_endpoint" method="post">
+                  <div class="InputsContainer" style="align-self: stretch; height: 134px; margin-top: 30px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 26px; display: flex">
+                      <div class="InputPet" style="align-self: stretch; height: 54px; width: 250px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 5px; display: flex">
+                          <div class="InputBox" style="align-self: stretch; height: 54px; border-radius: 14px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex">
+                              <div class="InputContent" style="align-self: stretch; height: 54px; padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; background: white; border-radius: 14px; border: 1px #D9DFE6 solid; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
+                                  <input type="email" name="email" id="email" required placeholder="Email" style="flex: 1 1 0; height: 100%; border: none; background: none; outline: none;">
+                              </div>
+                          </div>
+                      </div>
+                      <div class="InputPet" style="align-self: stretch; height: 54px; width: 250px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 5px; display: flex">
+                          <div class="InputBox" style="align-self: stretch; height: 54px; border-radius: 14px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex">
+                              <div class="InputContent" style="align-self: stretch; height: 54px; padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; background: white; border-radius: 14px; border: 1px #D9DFE6 solid; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
+                                  <input type="password" name="password" id="password" required placeholder="Password" style="flex: 1 1 0; height: 100%; border: none; background: none; outline: none;">
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+                  <button type="submit" style="align-self: stretch; height: 54px; width: 250px; padding: 17px; margin-top: 30px; background: #1B85F3; border-radius: 14px; justify-content: center; color:white; border: none; align-items: center; gap: 6px; display: inline-flex">Login</button>
+              </form>
+
           </div>
-        </div>
-        <div class="ButtonsContainer" style="align-self: stretch; height: 124px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 16px; display: flex">
-          <div class="PrimaryButton" style="align-self: stretch; padding: 17px; background: #1B85F3; border-radius: 14px; justify-content: center; align-items: center; gap: 6px; display: inline-flex">
-            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#login-modal" style="background-color: #1B85F3; border: none; color: white;">
-              Login
-            </button>          </div>
-          <div class="SecondaryButton" style="align-self: stretch; padding: 17px; border-radius: 14px"></div>
-        </div>
       </div>
-    </div>
   </div>