Merge pull request #63 from NOOB-3301/feature/supabase

Enhace the auth pages and added supabase

index2.html

@@ -302,7 +302,7 @@ <h3>${job['Job Title']}</h3>
     </script>
 
     <!-- script for checking if user is logged in or not -->
-    <script type="module">
+    <!-- <script type="module">
         import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
     
         // Supabase configuration
@@ -329,8 +329,7 @@ <h3>${job['Job Title']}</h3>
     
         // Run the auth state check on page load
         checkAuthState();
-    </script>
-
+    </script> -->
 
 </body>
 </html>

login.css

@@ -0,0 +1,213 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    /* background: #f8f9fa; */
+    background-color: antiquewhite;
+  }
+
+  .container {
+    display: flex;
+    width: 80%;
+    max-width: 1200px;
+    background: #fff;
+    border-radius: 15px;
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    animation: fadeIn 1s ease-in-out;
+  }
+
+  .left-section {
+    flex: 1;
+    /* background: linear-gradient(to bottom right, #ffb347, #ffcc33); */
+    background: linear-gradient(to bottom right, antiquewhite, white );
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    /* color: #fff; */
+    color: black;
+    text-align: center;
+    padding: 40px;
+    animation: slideInLeft 1s ease-in-out;
+  }
+
+  .logo img {
+    width: 100px;
+    margin-bottom: 20px;
+    animation: bounce 2s infinite;
+  }
+
+  .logo h2 {
+    font-size: 32px;
+    margin-bottom: 10px;
+  }
+
+  .logo p {
+    font-size: 18px;
+    font-weight: 300;
+  }
+
+  .right-section {
+    flex: 1;
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    animation: slideInRight 1s ease-in-out;
+  }
+
+  .right-section h1 {
+    font-size: 28px;
+    margin-bottom: 10px;
+    color: #333;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    color: #666;
+    margin-bottom: 20px;
+  }
+
+  .login-form .input-group {
+    margin-bottom: 20px;
+  }
+
+  .login-form .input-group label {
+    display: block;
+    font-size: 14px;
+    margin-bottom: 5px;
+    color: #555;
+  }
+
+  .login-form .input-group input {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    transition: all 0.3s;
+  }
+
+  .login-form .input-group input:focus {
+    outline: none;
+    border-color: #ffb347;
+    box-shadow: 0 0 8px rgba(255, 179, 71, 0.5);
+  }
+
+  .checkbox-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .checkbox-group input {
+    margin-right: 10px;
+  }
+
+  .login-btn {
+    width: 100%;
+    padding: 12px;
+    background: #ffb347;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background 0.3s ease-in-out;
+  }
+
+  .login-btn:hover {
+    background: #ffcc33;
+  }
+
+  .register-link {
+    margin-top: 10px;
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .register-link a {
+    color: #ff5733;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s ease-in-out;
+  }
+
+  .register-link a:hover {
+    color: #ffcc33;
+  }
+
+  .social-login {
+    margin-top: 20px;
+    text-align: center;
+  }
+
+  .social-btn {
+    width: 100%;
+    padding: 12px;
+    background: #3b5998;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background 0.3s ease-in-out;
+  }
+
+  .social-btn:hover {
+    background: #2d4373;
+  }
+
+  .social-btn i {
+    margin-right: 10px;
+  }
+
+  /* Animations */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideInLeft {
+    from {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideInRight {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+