Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Registration</title>
    <style>
        body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.container {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 900px;
  box-sizing: border-box;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.tabs {
  display: flex;// flex
  justify-content: space-around;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tabs button {
  background: none;
  border: none;
  font-weight: bold;
  cursor: pointer;
  padding: 10px;
  border-bottom: 2px solid transparent;
  flex: 1;
  text-align: center;
}

.tabs button.active {
  border-bottom: 2px solid green;
  color: green;
}

form {
  display: none;
  flex-direction:column;
}

form.active {
  display: flex;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}

.name-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.name-fields input {
  flex: 1;
  min-width: 45%;
}

.captcha,company {
  margin: 15px 0;
}

.btn {
  background: green;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.social-login {
  text-align: center;
  margin-top: 15px;
}

.social-login button {
  margin: 5px;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  max-width: 200px;
}

.google { background: #db4437; color: white; }
.facebook { background: #4267B2; color: white; }


}
    </style>
</head>
<body>
<div class="container">
    <h2>Let's get started, Genius!</h2>
    <div class="tabs">
        <button id="loginTab">Log In</button>
        <button id="registerTab" class="active">Create Account</button>
    </div>

    
    <form id="registerForm" class="active" onsubmit="return validateRegisterForm()">
        <div class="name-fields">
            <input type="text" id="firstName" placeholder="First Name" required pattern="[A-Za-z]+" />
            <input type="text" id="lastName" placeholder="Last Name" required pattern="[A-Za-z]+" />
            <input type="text" id="companyName" placeholder="Company Name"  />

        </div>
        <div class="company">
            <input type="checkbox" id="privateCustomer" /> Private Customer
        </div>
        <input type="email" id="email" placeholder="Email" required />
        <input type="password" id="password" placeholder="Password" required />
        <div class="captcha">
            <input type="checkbox" id="captcha" required /> I'm not a robot
        </div>
        <button type="register" class="btn">Register Now</button>
    </form>

    
    <form id="loginForm" onsubmit="return validateLoginForm()">
        <input type="email" id="loginEmail" placeholder="Email" required />
        <input type="password" id="loginPassword" placeholder="Password" required />
        <div class="captcha">
            <input type="checkbox" id="loginCaptcha" required /> I'm not a robot
        </div>
        <button type="submit" class="btn">Log In</button>
    </form>

    <div class="social-login">
        <p>OR</p>
        <button class="google">Sign in with Google</button>
        <button class="facebook">Sign in with Facebook</button>
    </div>
</div>

<script>
    // Tab switching
    const loginTab = document.getElementById('loginTab');
    const registerTab = document.getElementById('registerTab');
    const loginForm = document.getElementById('loginForm');
    const registerForm = document.getElementById('registerForm');

    loginTab.addEventListener('click', () => {
      loginTab.classList.add('active');
      registerTab.classList.remove('active');
      loginForm.classList.add('active');
      registerForm.classList.remove('active');
    });

    registerTab.addEventListener('click', () => {
      registerTab.classList.add('active');
      loginTab.classList.remove('active');
      registerForm.classList.add('active');
      loginForm.classList.remove('active');
    });

    // Form validation
    function validateRegisterForm() {
      const firstName = document.getElementById('firstName').value.trim();
      const lastName = document.getElementById('lastName').value.trim();
      const companyName = document.getElementById('companyName').value.trim();
      const email = document.getElementById('email').value.trim();
      const password = document.getElementById('password').value.trim();
      const captcha = document.getElementById('captcha').checked;
      const privateCustomer = document.getElementById('privateCustomer').checked;

      const nameRegex = /^[A-Za-z]+$/;
      //const companyRegex = /^[a-zA-Z0-9]+$/;
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

      if (!nameRegex.test(firstName) || !nameRegex.test(lastName)) {
        alert("Name must contain only letters.");
        return false;
      }

      if (!emailRegex.test(email)) {
        alert("Please enter a valid email address.");
        return false;
      }

      if (!captcha) {
        alert("Please verify you're not a robot.");
        return false;
      }
      if (!privateCustomer) {
        alert("Please Input Your Company Name.");
        //const companyName = document.getElementById('companyName').value.trim();
        return false;
      }

      return true;
      resetFormFields();

    }

    function validateLoginForm() {
      const email = document.getElementById('loginEmail').value.trim();
      const password = document.getElementById('loginPassword').value.trim();
      const captcha = document.getElementById('loginCaptcha').checked;

      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

      if (!emailRegex.test(email)) {
        alert("Please enter a valid email address.");
        return false;
      }

      if (!captcha) {
        alert("Please verify you're not a robot.");
        return false;
      }

      return true;
    }

  function resetFormFields() {
  document.getElementById("firstName").value = "";
  document.getElementById("lastName").value = "";
  document.getElementById("companyName").value = "";
  document.getElementById("email").value = "";
  document.getElementById("password").value = "";
  document.getElementById("privateCustomer").checked = false;
  document.getElementById("captcha").checked = false;
}
</script>
</body>
</html>

cademyo

Our Coaching and Computer German Vocabulary IT Training Institute offers a unique and comprehensive approach to accelerate professional integration, enhance productivity, and improve job placement outcomes for international tech talent in Germany.