LogIn and SignUp Page added

lcrojano · Oct 18, 2024 · 77d3704 · 77d3704
1 parent 7bf46a4
commit 77d3704
Show file tree

Hide file tree

Showing 4 changed files with 254 additions and 2 deletions.
diff --git a/favs.html b/favs.html
@@ -70,7 +70,9 @@ <h1 class="grow-2" id="logo">Giphy Search</h1>
           </caption>
         </div>
         <div style="display: flex">
-          <button class="secondary-btn">Log in</button>
+          <button class="secondary-btn">
+            <a href="login.html" style="text-decoration: none; color: inherit;">Log In</a>
+          </button>          
           <!-- Add this button to trigger the modal for uploading GIFs -->
           <button
             id="upload-button"

diff --git a/index.html b/index.html
@@ -71,7 +71,9 @@ <h1 class="grow-2" id="logo">Giphy Search</h1>
           </caption>
         </div>
         <div style="display: flex">
-          <button class="secondary-btn">Log in</button>
+          <button class="secondary-btn">
+            <a href="login.html" style="text-decoration: none; color: inherit;">Log In</a>
+          </button> 
           <!-- Add this button to trigger the modal for uploading GIFs -->
           <button
             id="upload-button"

diff --git a/login.html b/login.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Page</title>
+    <style>
+        /* CSS for styling the login page */
+        body {
+            font-family: 'Arial', sans-serif;
+            background-color: #f0f4f8;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .login-container {
+            background-color: #fff;
+            padding: 40px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 300px;
+            text-align: center;
+        }
+
+        h2 {
+            font-family: 'Georgia', serif;
+            font-size: 28px;
+            margin-bottom: 20px;
+        }
+
+        label {
+            display: block;
+            text-align: left;
+            font-family: 'Verdana', sans-serif;
+            font-size: 14px;
+            margin-bottom: 8px;
+        }
+
+        input[type="text"], input[type="password"] {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 20px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-family: 'Courier New', monospace;
+        }
+
+        button {
+            width: 100%;
+            padding: 10px;
+            background-color: #6F4FFF;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+            font-family: 'Arial', sans-serif;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background-color: #434190;
+        }
+
+        .signup-link {
+            margin-top: 20px;
+            font-size: 14px;
+            font-family: 'Helvetica', sans-serif;
+        }
+
+        .signup-link a {
+            color: #5A67D8;
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        .signup-link a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="login-container">
+        <h2>Login</h2>
+        <form id="loginForm">
+            <label for="username">Username</label>
+            <input type="text" id="username" name="username" required>
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" required>
+            <button type="submit">Login</button>
+        </form>
+        <div class="signup-link">
+            Don't have an account? <a href="signup.html">Sign up</a>
+        </div>
+    </div>
+
+    <script>
+        // JavaScript for handling form submission
+        document.getElementById('loginForm').addEventListener('submit', function(event) {
+            event.preventDefault(); // Prevent form from submitting
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+
+            if (username && password) {
+                alert('Logged in successfully');
+            } else {
+                alert('Please enter both username and password');
+            }
+        });
+    </script>
+
+</body>
+</html>
diff --git a/signup.html b/signup.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up Page</title>
+    <style>
+        /* General reset and box-sizing */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f4f8;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .signup-container {
+            background-color: white;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            width: 400px;
+            font-family: 'Helvetica Neue', sans-serif;
+        }
+
+        h2 {
+            text-align: center;
+            font-family: 'Georgia', serif;
+            font-size: 24px;
+            margin-bottom: 20px;
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+        }
+
+        label {
+            font-family: 'Georgia', serif;
+            font-size: 14px;
+            margin-bottom: 5px;
+            color: #333;
+        }
+
+        input[type="text"],
+        input[type="email"],
+        input[type="password"] {
+            padding: 10px;
+            font-size: 14px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            margin-bottom: 15px;
+        }
+
+        button {
+            background-color: #6F4FFF;
+            color: white;
+            padding: 10px;
+            font-family: 'Arial', sans-serif;
+            font-size: 16px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background-color: #4cae4c;
+        }
+
+        .login-text {
+            text-align: center;
+            margin-top: 15px;
+            font-size: 14px;
+        }
+
+        .login-text a {
+            color: #007bff;
+            text-decoration: none;
+        }
+
+        .login-text a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="signup-container">
+        <h2>Sign Up</h2>
+        <form id="signupForm">
+            <label for="username">Username</label>
+            <input type="text" id="username" name="username" placeholder="Enter your username" required>
+
+            <label for="email">Email</label>
+            <input type="email" id="email" name="email" placeholder="Enter your email" required>
+
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" placeholder="Enter your password" required>
+
+            <button type="submit">Sign Up</button>
+        </form>
+
+        <div class="login-text">
+            Already have an account? <a href="login.html">Login</a> <!-- This line is updated -->
+        </div>
+    </div>
+
+    <script>
+        document.getElementById("signupForm").addEventListener("submit", function(event){
+            event.preventDefault();
+            let username = document.getElementById("username").value;
+            let email = document.getElementById("email").value;
+            let password = document.getElementById("password").value;
+
+            if(username && email && password) {
+                alert("Signed up successfully!");
+                // Here, you could add code to send data to a server, etc.
+            } else {
+                alert("Please fill in all fields.");
+            }
+        });
+    </script>
+
+</body>
+</html>