Fixed Issue #86: Added a registration page

assets/css/style.css

@@ -166,7 +166,7 @@ body {
   font-size: var(--fontSize-body-4);
   font-weight: var(--weight-regular);
   line-height: var(--lineHeight-5);
-  overflow: hidden;
+  /* overflow: hidden; */
   height: 300vh;
 }
 
@@ -2051,4 +2051,68 @@ textarea.input-field {
     left: 0;
   }
 
+}
+
+.loginLabel{
+  color: var(--gold-crayola);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--letterSpacing-1);
+  line-height: 14px;
+  padding-bottom: 1%;
+  padding-top: 3%;
+}
+#login-page {
+  width: 50%;
+  margin: 50px auto;
+  background-color: #444444;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  border-radius: 4px; 
+}
+.loginhead{
+  color: var(--gold-crayola);
+  text-align: center;
+} 
+input, textarea {
+  width: 100%;
+  padding: 10px;
+  background-color: #232327;
+  border: 1px solid #e8c494;
+  color: white;
+  border-radius: 4px;
+  font-size: 2rem;
+}
+
+#password-label{
+  display:flex;
+  align-items: flex-start;
+  gap: 5px;
+}
+
+#submit-button{
+  display: flex;
+  justify-content: center;
+  padding-top: 3%;
+  width: 100%;
+}
+
+hr.divider{
+  border-top: 1px solid var(--gold-crayola);
+  margin-top: 3%;
+}
+
+.doregister{
+  justify-content: center;
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+  padding-top: 2%;
+}
+
+.register{
+  color: var(--gold-crayola);
+}
+
+#regForm{
+  margin-top: 1%;
 }

assets/js/script.js

@@ -1,4 +1,6 @@
 
+
+
 /**
  * PRELOAD
  * 
@@ -13,6 +15,120 @@ window.addEventListener("load", function () {
 });
 
 
+
+const passwordInput = document.getElementById('description');
+const passwordCriteria = document.getElementById('password-criteria');
+const passwordStrength = document.getElementById('password-strength');
+const strengthText = document.getElementById('strength-text');
+const rePasswordInput = document.getElementById('re-password');
+const passwordMatchMessage = document.getElementById('password-match-message');
+
+passwordInput.addEventListener('input', function() {
+    const password = this.value;
+
+    // Show the password criteria and strength only when user starts typing
+    if (password.length > 0) {
+        passwordCriteria.style.display = 'block';
+        passwordStrength.style.display = 'block';
+        strengthText.style.display = 'block';
+    } else {
+        passwordCriteria.style.display = 'none';
+        passwordStrength.style.display = 'none';
+        strengthText.style.display = 'none';
+    }
+
+    // Criteria flags
+    const lengthCriteria = password.length >= 8;
+    const uppercaseCriteria = /[A-Z]/.test(password);
+    const lowercaseCriteria = /[a-z]/.test(password);
+    const numberCriteria = /[0-9]/.test(password);
+    const symbolCriteria = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    // Update criteria list
+    document.getElementById('length-criteria').style.display = lengthCriteria ? 'none' : 'list-item';
+    document.getElementById('uppercase-criteria').style.display = uppercaseCriteria ? 'none' : 'list-item';
+    document.getElementById('lowercase-criteria').style.display = lowercaseCriteria ? 'none' : 'list-item';
+    document.getElementById('number-criteria').style.display = numberCriteria ? 'none' : 'list-item';
+    document.getElementById('symbol-criteria').style.display = symbolCriteria ? 'none' : 'list-item';
+
+    // Determine password strength
+    const criteriaMet = [lengthCriteria, uppercaseCriteria, lowercaseCriteria, numberCriteria, symbolCriteria].filter(Boolean).length;
+
+    if (criteriaMet < 2) {
+        strengthText.textContent = 'Weak';
+        strengthText.style.color = 'red';
+    } else if (criteriaMet >= 2 && criteriaMet < 4) {
+        strengthText.textContent = 'Moderate';
+        strengthText.style.color = 'yellow';
+    } else if (criteriaMet === 5) {
+        strengthText.textContent = 'Strong';
+        strengthText.style.color = 'green';
+    }
+});
+rePasswordInput.addEventListener('input', function() {
+  const password = passwordInput.value;
+  const rePassword = rePasswordInput.value;
+
+  // Check if passwords match
+  if (password !== rePassword) {
+      passwordMatchMessage.style.display = 'block';  // Show the message
+  } else {
+      passwordMatchMessage.style.display = 'none';  // Hide the message when passwords match
+  }
+});
+
+
+const phoneInput = document.getElementById('number');
+const phoneErrorMessage = document.getElementById('phone-error-message');
+
+// Event listener for phone number input
+phoneInput.addEventListener('input', function() {
+    let phoneNumber = phoneInput.value;
+    const firstChar = phoneNumber.charAt(0);
+    const illegalChars = /[^0-9+\- ]/;  // Allows numbers, +, -, and spaces only
+    const multipleDashes = /--+/;  // Matches two or more consecutive dashes
+
+    // Remove spaces and "-" for length check
+    const strippedNumber = phoneNumber.replace(/[\s\-]/g, '');
+
+    // Reset error message
+    phoneErrorMessage.style.display = 'none';
+    phoneErrorMessage.textContent = '';
+
+    // Check for invalid "-" at the start or consecutive dashes
+    if (firstChar === '-' || multipleDashes.test(phoneNumber)) {
+        phoneErrorMessage.style.display = 'block';
+        phoneErrorMessage.textContent = "Invalid Phone Number!";
+        return;  // Stop further validation
+    }
+
+    // Check if the first character is "+" and adjust the max length dynamically
+    if (firstChar === "+") {
+        phoneInput.maxLength = 17;  // Adjust maxLength to allow for spaces and dashes
+        if (strippedNumber.length < 12 || strippedNumber.length > 14) {
+            phoneErrorMessage.style.display = 'block';
+            phoneErrorMessage.textContent = "Phone number must have 10 digits.";
+        }
+    } else {
+        phoneInput.maxLength = 13;  // Adjust maxLength to allow for spaces and dashes
+        if (strippedNumber.length !== 10) {
+            phoneErrorMessage.style.display = 'block';
+            phoneErrorMessage.textContent = "Phone number must have 10 digits.";
+        }
+    }
+
+    // Check for illegal characters (anything other than 0-9, +, -, and space)
+    for (let char of phoneNumber) {
+        if (illegalChars.test(char) || (char === "+" && phoneNumber.indexOf(char) !== 0)) {
+            phoneErrorMessage.style.display = 'block';
+            phoneErrorMessage.textContent = `'${char}' is not valid!`;
+            break;
+        }
+    }
+});
+
+
+
 /**
  * add event listener on multiple elements
  */
@@ -141,4 +257,6 @@ window.addEventListener("mousemove", function (event) {
     parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`;
   }
 
-});
+});
+
+

index.html

@@ -167,6 +167,13 @@
               <span class="span">Contact</span>
             </a>
           </li>
+          <li class="navbar-item">
+            <a href="login.html" class="navbar-link  active">
+              <div class="separator"></div>
+
+              <span class="span">Login</span>
+            </a>
+          </li>
 
         </ul>
 
@@ -1136,17 +1143,20 @@ <h3 class="card-title title-2 text-center">
           <li>
             <a href="#" class="label-2 footer-link hover-underline">About Us</a>
           </li>
-
+          
           <li>
             <a href="#" class="label-2 footer-link hover-underline">Our Chefs</a>
           </li>
 
           <li>
             <a href="#" class="label-2 footer-link hover-underline">Contact</a>
           </li>
+          <li>
+            <a href="#" class="label-2 footer-link hover-underline">Login</a>
+          </li>
 
         </ul>
-
+        
         <ul class="footer-list">
 
           <li>
@@ -1195,5 +1205,4 @@ <h3 class="card-title title-2 text-center">
   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 
 </body>
-
 </html>

login.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Grilli - Login</title>
+      <!-- 
+    - favicon
+  -->
+  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
+
+  <!-- 
+    - google font link
+  -->
+  <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=DM+Sans:wght@400;700&family=Forum&display=swap" rel="stylesheet">
+
+  <!-- 
+    - custom css link
+  -->
+  <link rel="stylesheet" href="./assets/css/style.css">
+
+  <!-- 
+    - preload images
+  -->
+  <link rel="preload" as="image" href="./assets/images/hero-slider-1.jpg">
+  <link rel="preload" as="image" href="./assets/images/hero-slider-2.jpg">
+  <link rel="preload" as="image" href="./assets/images/hero-slider-3.jpg">
+
+</head>
+<body>
+    <section id="login-page">
+        <h2 class="loginhead">Login</h2>
+        <form id="loginForm">
+            <div class="form-group">
+                <label for="email"><span class="loginLabel">E-mail</span></label>
+                <input type="email" id="email" name="email" placeholder="username@email.com" required>
+            </div>
+            <div class="form-group">
+                <label for="password"><span class="loginLabel">Password</span></label>
+                <input type="password" id="description" name="description" pattern="[a-zA-Z0-9]{8,12}" minlength="8" maxlength="15" required></input>
+            </div>
+            <div id="password-label"><p id="password-strength" style="display: none;">Password Strength: </p><div><p ><span id="strength-text" style="display: none;">Weak</span></p></div></div>
+            <div id="password-criteria" style="display: none;">
+              <ul>
+                  <li id="length-criteria" >• Password must be at least 8 characters long</li>
+                  <li id="uppercase-criteria" >• Must contain at least one uppercase letter</li>
+                  <li id="lowercase-criteria">• Must contain at least one lowercase letter</li>
+                  <li id="number-criteria" >• Must contain at least one number</li>
+                  <li id="symbol-criteria" >• Must contain at least one symbol</li>
+              </ul>
+          </div>
+
+
+
+          <div id="submit-button">
+            <button class="btn btn-secondary" type="submit">
+              <span class="text text-1">Login</span>
+              <span class="text text-2" aria-hidden="true">Login</span>
+            </button>
+          </div>
+          <hr class="divider">
+          <div class="doregister">Don't have an account? <a href="register.html" class="register">Sign Up</a></div>
+        </form>
+      </section>
+      <script src="./assets/js/script.js"></script>
+      <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+</body>
+</html>