integrate Apple iOS & fix some styles

swaraj-das · Oct 16, 2024 · cc746fd · cc746fd
1 parent f332139
commit cc746fd
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 18 deletions.
diff --git a/SignUp/signup.html b/SignUp/signup.html
@@ -19,6 +19,31 @@
             font-size: 0.85em;
             margin-top: 5px;
         }
+        .social-buttons {
+            display: flex;
+            flex-direction: column; /* Stack buttons vertically */
+            gap: 10px; /* Space between buttons */
+            margin-top: 20px; /* Space above buttons */
+        }
+        .google-signup-button, .apple-signup-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 10px;
+            background-color: #db4437; /* Google color */
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1em;
+            width: 100%; /* Full width */
+        }
+        .apple-signup-button {
+            background-color: #000; /* Apple color */
+        }
+        .google-icon, .apple-icon {
+            margin-right: 8px; /* Space between icon and text */
+        }
     </style>
 </head>
 <body>
@@ -51,7 +76,7 @@ <h1>Create Your Account</h1>
                 <p id="lowercase" class="condition">Contains lowercase letters</p>
                 <p id="number" class="condition">Contains numbers</p>
                 <p id="special" class="condition">Contains special characters</p>
-
+            </div>
 
             <div class="input-group">
                 <label for="confirm-password">Confirm Password</label>
@@ -60,13 +85,22 @@ <h1>Create Your Account</h1>
             <div id="password-error" class="error-message"></div> <!-- Password error container -->
             <button type="submit" class="signup-button">Sign Up</button>
         </form>
+
         <div class="or-divider">
             <span>OR</span>
         </div>
-        <button id="google-signup" class="google-signup-button">
-            <img src="../images/google-icon.png" alt="Google Icon" class="google-icon">
-            Sign up with Google
-        </button>
+
+        <div class="social-buttons">
+            <button id="google-signup" class="google-signup-button">
+                <img src="../images/google-icon.png" alt="Google Icon" class="google-icon">
+                Sign up with Google
+            </button>
+            <button id="apple-signup" class="apple-signup-button">
+                <img src="../images/apple-icon.png" alt="Apple Icon" class="apple-icon">
+                Sign up with Apple
+            </button>
+        </div>
+
         <div class="links">
             <a href="../login/login.html"><u>Already have an account? Login</u></a>
         </div>
@@ -76,3 +110,4 @@ <h1>Create Your Account</h1>
     <script src="signup.js"></script> <!-- Link to the signup.js file -->
 </body>
 </html>
+
diff --git a/login/login.css b/login/login.css
@@ -184,12 +184,34 @@ body {
     transition: all 0.3s ease;
 }
 
+.social-buttons {
+    display: flex; /* Use flexbox for alignment */
+    gap: 10px; /* Add gap between buttons */
+}
+
+.social-button {
+    /* Optional: Add padding and styling to buttons */
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1.5rem; /* Adjust font size as needed */
+}
+
 .google {
-    background-color: #171a21;
-    color: #fff;
+    background-color: #ede5e4; /* Google color */
+    color: rgb(9, 7, 7); /* Text color */
 }
 
+.apple {
+    background-color: #000; /* Apple color */
+    color: white; /* Text color */
+}
 .google:hover {
+    background-color: #e6f0f3;
+    color: rgb(21, 164, 240);
+}
+.apple:hover {
     background-color: #cccccc;
     color: black;
 }
@@ -348,3 +370,4 @@ body {
         right: 10px; /* Reduce right spacing for smaller screens */
     }
 }
+
diff --git a/login/login.html b/login/login.html
@@ -9,6 +9,7 @@
     <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
     <link rel="stylesheet" href="login.css">
+
 </head>
 <body>
     <div class="button-container">
@@ -39,7 +40,14 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
             </div>
             <div class="social-login">
                 <p>Or Login With</p>
-                <button type="button" class="social-button google">Login with Google</button>
+                <div class="social-buttons">
+                    <button type="button" class="social-button google">
+                        <i class="fab fa-google"></i>
+                    </button>
+                    <button type="button" class="social-button apple">
+                        <i class="fab fa-apple"></i>
+                    </button>
+                </div>
             </div>
         </div>
     </div>

diff --git a/style.css b/style.css
@@ -128,14 +128,6 @@ button[type="submit"]:hover {
     transform: scale(1.1);
 
 }
-
-
-
-
-
-
-
-
 * {
     margin: 0;
     padding: 0;
@@ -1669,7 +1661,7 @@ button {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: white;
+    background-color: rgb(34, 33, 33);
     color: #000;
 }
 .container-swipe
@@ -1881,4 +1873,3 @@ button {
         width: 1000vw !important;
     }
 }
-