issue#240 solved✨ (#247)

<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description
- solved the problem with the CSS of the signup pages.
- removed some inline css as it slows the whole page .
- the local Storage is working.

## Type of PR
<!-- Mention PR Type according to the issue in brackets below and check
the below box -->
- [X] Feature Enhancement

## Screenshots / videos (if applicable)
<img width="1021" alt="Screenshot 2024-10-05 at 11 41 17 PM"
src="https://github.com/user-attachments/assets/2b47659f-8749-4264-84e9-7577ef137f2e">
<img width="511" alt="Screenshot 2024-10-05 at 11 42 52 PM"
src="https://github.com/user-attachments/assets/859f0455-69f8-481f-a85c-763df4b6ce79">
<img width="1993" alt="Screenshot 2024-10-05 at 11 43 09 PM"
src="https://github.com/user-attachments/assets/e4f6e276-4e0b-40d5-94e9-983f934f9ba2">
<img width="913" alt="Screenshot 2024-10-05 at 11 50 21 PM"
src="https://github.com/user-attachments/assets/a3bb4082-c68b-4eb9-9ef7-36e70d9ad3d1">


## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [X] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [X] I have updated my branch and synced it with project `main` branch
before making this PR
- [X] I have performed a self-review of my code
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [X] I have commented my code, particularly in hard-to-understand
areas.

Css-files/signup1.css

@@ -34,11 +34,14 @@ body {
  align-items: center;
  width: 100%;
  overflow: hidden; /* Ensure nothing overflows from the flexbox */
+ gap: 20px; /* Spacing between the card and image */
+
 }
 .homebtn{
  position: absolute;
  top:30px;
  left:25px;
+
 }
 .homebtn a{
  font-size: 30px;
@@ -69,6 +72,10 @@ body {
  display: flex; /* Flex to stack elements */
  flex-direction: column; /* Column layout for the card */
  overflow: hidden; /* Added to ensure no content spills out */
+ border-radius: 50px;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
 }
 
 .card-login:hover {
@@ -89,23 +96,26 @@ body {
  margin-bottom: 15px; /* Add margin to space fields */
  display: flex; /* Flex for better layout */
  flex-direction: column; /* Column layout for input and label */
+ border-radius: 50px;
 }
 
 .textfield label {
  font-weight: 700; /* Bold label for clarity */
  margin-bottom: 5px; /* Space between label and input */
  color: #555; /* Slightly darker color for the label */
+ border-radius: 50px;
 }
 
 .textfield > input {
  width: 100%;
- padding: 15px;
+ padding: 10px;
  background-color: var(--input-bg);
  border: 2px solid transparent;
  border-radius: var(--border-radius); /* Consistent rounded corners */
  transition: border var(--transition-speed), box-shadow var(--transition-speed);
  font-size: 1rem;
  color: #333;
+ border-radius: 50px;
  box-sizing: border-box; /* Ensures padding doesn't affect input width */
 }
 
@@ -125,9 +135,13 @@ body {
  cursor: pointer;
  transition: background-color var(--transition-speed), box-shadow var(--transition-speed), transform var(--transition-speed);
  letter-spacing: 1.5px; 
- width: 100%; /* Full width for buttons */
+ border-radius: 500px;
+ min-width: 50%;
+}
+.btnNext{
+ display: flex;
+ gap: 10px;
 }
-
 .btn-login:hover, #google-login:hover {
  background-color: var(--hover-color); 
  box-shadow: 0px 15px 45px -10px rgba(0, 0, 0, 0.2); 

Html-files/login.html

@@ -13,83 +13,82 @@
  <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
 
  <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-
- <style>
-
-.circle{
-z-index: 998;
-width: 20px;
-height: 20px;
-border-radius: 50%;
-pointer-events: none;
-animation: colors 5s infinite;
-position: fixed;
-transform: translate(-50%,-50%);
-}
-.circle::before {
-content: "";
-position: fixed;
-width: 50px;
-height: 50px;
-opacity: 0.2;
-transform: translate(-30%,-30%);
-border-radius: 50%;
-}
-</style>
-<style>
- .container {
- width: 350px;
- height: 500px;
- perspective: 800px;
-}
-
-.container:hover > .card {
- cursor: pointer;
- transform: rotateY(180deg);
-}
-
-.card {
- height: 100%;
- width: 100%;
- position: relative;
- transition: transform 1500ms;
- transform-style: preserve-3d;
- border-radius: 40px;
-}
-
-.front,
-.back {
- height: 100%;
- width: 100%;
- border-radius: 2rem;
- box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
- position: absolute;
- backface-visibility: hidden;
-}
-
-.front {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.back {
- background-color: #3a3a3a;
- transform: rotateY(180deg);
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 5rem;
-}
-:root{
- --ff-philosopher: "Philosopher", sans-serif;
- --ff-poppins: "Poppins", sans-serif;
- }
-</style>
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+ <style>
+
+ .circle{
+ z-index: 998;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ pointer-events: none;
+ animation: colors 5s infinite;
+ position: fixed;
+ transform: translate(-50%,-50%);
+ }
+ .circle::before {
+ content: "";
+ position: fixed;
+ width: 50px;
+ height: 50px;
+ opacity: 0.2;
+ transform: translate(-30%,-30%);
+ border-radius: 50%;
+ }
+ </style>
+ <style>
+ .container {
+ width: 350px;
+ height: 500px;
+ perspective: 800px;
+ }
+
+ .container:hover > .card {
+ cursor: pointer;
+ transform: rotateY(180deg);
+ }
+
+ .card {
+ height: 100%;
+ width: 100%;
+ position: relative;
+ transition: transform 1500ms;
+ transform-style: preserve-3d;
+ border-radius: 40px;
+ }
+
+ .front,
+ .back {
+ height: 100%;
+ width: 100%;
+ border-radius: 2rem;
+ box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
+ position: absolute;
+ backface-visibility: hidden;
+ }
+
+ .front {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .back {
+ background-color: #3a3a3a;
+ transform: rotateY(180deg);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 5rem;
+ }
+ :root{
+ --ff-philosopher: "Philosopher", sans-serif;
+ --ff-poppins: "Poppins", sans-serif;
+ }
+ </style>
 </head>
 <body>
  <div class="circle-container">

Html-files/signed.html

@@ -59,7 +59,15 @@
 :root{
  --ff-philosopher: "Philosopher", sans-serif;
  --ff-poppins: "Poppins", sans-serif;
- }
+}
+#btn-login{
+ font-family: var(--ff-philosopher);
+ text-decoration: none;
+ color: black;
+ background-color: #feaea5;
+ padding: 20px;
+ border-radius: 10px;
+}
 </style>
 </head>
 <body>
@@ -87,7 +95,7 @@
 </div>
 <br><br><br><br><br><br><br><br>
 <center><h1 style="font-family: var(--ff-philosopher);font-size: 100px;">Signed in&#33;</h1></center><br>
-<center><button><a style="font-family: var(--ff-philosopher);text-decoration: none;color: black;background-color: #feaea5;" href="../index.html">&#60;&#60;&#60;Back to Home Page</button></a></center>
+<center><button id="btn-login"><a style="font-family: var(--ff-philosopher);text-decoration: none;color: black;background-color: #feaea5;" href="../index.html">&#60;&#60;&#60;Back to Home Page</button></a></center>
 <script>
  const coords = { x: 0, y: 0 };
  const circles = document.querySelectorAll(".circle");

Html-files/signup.html

@@ -229,16 +229,17 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">SIGN U
  <span id="email-error" class="error-message"></span>
  </div>
 
- <div class="textfield tooltip">
+ <div class="textfield ">
  <label for="password">Password</label>
  <input type="password" id="password" name="password" placeholder="Enter Password" title="Special characters are not allowed" required>
  <span id="password-error" class="error-message"></span>
  <span class="tooltiptext">Special characters such as /[<>"/]/ are not allowed</span>
  </div>
 
- <button type="submit" class="btn-login" style="font-family: var(--ff-philosopher);color: #ddd;">Register</button>
+
  </form>
- <button id="google-login" style="font-family: var(--ff-philosopher);color: #ddd;">Signup with Google</button>
+ <div class="btnNext"><button type="submit" class="btn-login" style="font-family: var(--ff-philosopher);color: #ddd;">Register</button>
+ <button id="google-login" style="font-family: var(--ff-philosopher);color: #ddd;">Signup with Google</button></div>
  </div>
  </div>
  </div>