
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet" />
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <style>
    .body-signup {
      font-family: 'Poppins', sans-serif;
      box-sizing: border-box;
      margin: 0;  
      padding: 0;
      height: 100%;
      overflow-y: hidden;
      overflow-x: hidden;
    }
    
    /* Modal styles */
    #modal {
      position: fixed;
      top: 0; 
      left: 0;
      width: 100vw;
      height: 100vh;
      overflow-y: auto;
      transform: translateX(-100%);
      transition: transform 0.6s ease;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0; /* remove padding so content can fill */
    
    }

    #modal::-webkit-scrollbar {
      width: 4px; /* thinner! */
    }

    #modal::-webkit-scrollbar-track {
      background: transparent;
    }

    #modal::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 3px;
    }

    #modal.active {
      transform: translateX(0);
    }

    #modal > .content {
      width: 100%;
      height: 100%;
      background: white; /* or your preferred background */
      overflow-y: auto;
      box-sizing: border-box;
    }

    /* Slide in modal */
    #modal.show {
      transform: translateX(0);
    }

    /* Inner container same as .page-container but with max width for better UX */
    .page-container {
      background:
        linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
        url('images/signinback.png') no-repeat center center;
      background-size: cover;
      background-attachment: fixed;
      color: white;
      min-height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 40px rgba(0,0,0,0.7);
      overflow: hidden;
    }

    .main-content-signin {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 2rem;
      gap: 8rem;
    }

    .left-panel {
      max-width: 30%;
    }

    .left-panel h1 {
      font-size: 1.8rem;
      font-weight: 800;
      margin-bottom: 0.5rem;
    }

    .left-panel p.sub {
      margin: 0.5rem 0 1rem 0;
      border-top: 2px solid white;
      width: fit-content;
      padding-top: 0.5rem;
      font-style: italic;
      font-size: 0.4rem;
      color: white;
    }

    .left-panel p {
      font-size: 0.95rem;
      line-height: 1.4;
      color: white;
      margin-bottom: 1rem;
    }

    .left-panel ul {
      margin-top: 1.2rem;
      list-style: none;
      padding-left: 0;
      font-size: 0.5rem;
    }

    .left-panel ul li {
      margin-bottom: 0.2rem;
      color: white;
    }

    .right-panel {
      background-color: rgba(95, 92, 92, 0.39);
      border-radius: 16px;
      padding: 1.8rem;
      width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
    }

    .right-panel img {
      width: 95px;
    }

    .right-panel h2 {
      color: white;
      font-size: 1rem;
      margin-bottom: .2rem;
      text-align: center;
    }
    .signinform {
      width: 100%;
    }
    .create-account{
      width: 100%;
    }

    .form-group {
      width: 100%;
      margin-bottom: 1.4rem;
    }

    .form-group label {
      display: block;
      margin-bottom: 0.3rem;
      font-size: 0.85rem;
      color: white;
    }

    .form-group input {
      width: 100%;
      padding: 0.55rem;
      border: none;
      border-radius: 8px;
      font-size: 0.9rem;
    }

    .password-wrapper {
      position: relative;
    }

    .password-wrapper input {
      width: 100%;
      padding-right: 2.5rem; /* leave space for the icon */
    }

    .password-wrapper .password-toggle {
      position: absolute;
      top: 50%;
      right: 0.7rem;
      transform: translateY(-50%);
      cursor: pointer;
      color: #666;
    }
   .error {
      color: white;
      font-size: 12px;
      margin: 0 auto;
      margin-bottom:5px;
      display: block;
      text-align: center;
    }
    .remember-container {
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 0.8rem;
      color: #e0e0e0;
      margin-bottom: 1rem;
      gap: 0.5rem;
    }
     .checkbox-container {
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 8px;
      color: #e0e0e0;
      margin-bottom: 1rem;
      gap: 0.5rem;
    }
    .checkbox-container a{
      text-decoration:underline;
      color:white;
    }

    .right-panel button {
      background-color: #0a263d;
      color: white;
      padding: 0.6rem;
      border: none;
      border-radius: 8px;
      width: 100%;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .right-panel button:hover {
      background-color: #114870;
    }

    .right-panel .links {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 0.8rem;
      margin-top: 0.5rem;
    }

    .right-panel .links a {
      color: #fff;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border 0.2s;
    }

    .right-panel .links a:hover {
      border-color: #fff;
    }

    .echosystem-signin {
      max-width: 450px;
    }

    .echo-heading-signin {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1.8em;
      color: white;
      margin: 1.5rem 0 1rem;
    }

    .icon-img-signin {
      width: 25px;
      height: auto;
      filter: invert(1);
    }

    .echosystem-signin ul, .echosystem-signin li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .has-submenu-signin > a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-decoration: none;
      color: white;
      padding: 0rem 1rem;
      border-radius: 8px;
      font-weight: 500;
      font-size: 15px;
      transition: background 0.3s;
    }

    .has-submenu-signin:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .has-submenu-signin p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.5;
      margin: 5px 0 0 0;
      padding-left: 1rem;
      width: 90%;
      text-transform: none;
    }

    .submenu-signin {
      display: none;
      margin-top: 0.4rem;
      padding-left: 1rem;
    }

    .submenu-signin a {
      padding-left: 3rem;
      color: white;
      font-size: 12px;
      text-transform: none;
      text-decoration: none;
    }

    .toggle-icon-signin {
      font-weight: bold;
      font-size: 1.2rem;
      margin-left: 1rem;
    }

    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      color: white;
      border-radius: 12px 12px 0 0;
      width: 95vw;
      margin-top: auto;
    }

    .footer-image img.echologo {
      width: 320px;
      height: auto;
      filter:invert(1);
    }

    .arrow-right p {
      font-size: 1.5rem;
      font-weight: bold;
      margin: 0;
      color: #fff;
    }

   /* Flip container setup */
    .flip-container {
      perspective: 1000px;
      width: 440px;
      height: 100%;
      position: relative;
    }

    .flipper {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }

    .flip-container.flipped .flipper {
      transform: rotateY(180deg);
    }

    .front, .back {
      position: absolute;
      width: 100%;
      height: auto;
      backface-visibility: hidden;
    }

    .back {
      transform: rotateY(180deg);
    }

    .diagonal-separator-signup {
      position: absolute;
      top: 60px; /* adjust starting point */
      left: 50%; /* adjust horizontal position */
      transform: translateX(-50%);
      width: 4px;
      height: 550px; /* custom height here */
      background: rgba(255, 255, 255, 0.3);
      z-index: 0;
    }
    
    /* RESPONSIVE STYLES */
@media (max-width: 1240px) {
  .main-content-signin {
    flex-direction: column-reverse;
    align-items: center;
    gap: 2rem;
    margin-top:600px;
    padding: 2rem 1rem;
  }
  
   .diagonal-separator-signup{
    display:none;
   }
  .left-panel {
    max-width: 90%;
    text-align: center;
    display:none;
  }

  .right-panel {
    width: 100%;
    max-width: 95%;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2rem 1.5rem;
    margin-left:10px;
    margin-top: -600px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }

  .right-panel h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .right-panel button {
    font-size: 0.95rem;
    padding: 0.75rem;
  }

  .form-group input {
    font-size: 1rem;
    padding: 0.65rem;
  }

  .footer {
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem;
    text-align: center;
  }

  .footer-image img.echologo {
    width: 200px;
  }
}
@media (max-width: 400px) {

  .main-content-signin {
    flex-direction: column-reverse;
    align-items: center;
    gap: 2rem;
    margin-top:500px;
    padding: 2rem 1rem;
  }

  .right-panel {
    padding: 1.5rem 1rem;
  }

  .right-panel h2 {
    font-size: 1.4rem;
  }

  .right-panel button {
    font-size: 0.9rem;
  }

  .form-group input {
    font-size: 0.95rem;
  }
}

  </style>

<div class="body-signup">

  <div id="modal">
    <div class="page-container">
      <div class="main-content-signin">
        <div class="left-panel">
          <h1>Welcome<br>Back.</h1>
          <p class="sub">One Sign-In. Endless Possibilities.</p>
          <p>Your Echopass account gives you seamless access to the entire ECHOSystem —</p>
          <ul class="echosystem-signin">
            <h3 class="echo-heading-signin">
              ECHOSystem
              <img src="images/molecule2.png" alt="Echo System Icon" class="icon-img-signin" />
            </h3>
            <li class="has-submenu-signin">
              <a href="Echopass.php">ECHOpass&trade;<span class="toggle-icon-signin">+</span></a>
              <p>For Creators, Makers, and Doers — Echopass® Has You Covered.</p>
              <ul class="submenu-signin">
                <li><a href="Echopass.php">What is Echopass</a></li>
                <li><a href="Echopass.php">Log in membership account</a></li>
              </ul>
            </li>
            <li class="has-submenu-signin">
              <a href="#">ECHOSphere&trade;<span class="toggle-icon-signin">+</span></a>
              <p>Creative and Professional hub — knowledge sharing, certification, mentorship, and engagement.</p>
              <ul class="submenu-signin">
                <li><a href="Learnmore.php">What is ECHOSphere</a></li>
              </ul>
            </li>
            <li class="has-submenu-signin">
              <a href="#">ECHOSmart&trade;<span class="toggle-icon-signin">+</span></a>
              <p>Training, certification, and professional growth.</p>
              <ul class="submenu-signin">
                <li><a href="Learnmore.php">What is ECHOSmart</a></li>
              </ul>
            </li>
            <li class="has-submenu-signin">
              <a href="#">Resonance Awards&trade;<span class="toggle-icon-signin">+</span></a>
              <p>The Resonance Awards spotlight the most creative, sustainable, and technically impressive uses of Echocraft's PET acoustic materials.</p>
              <ul class="submenu-signin">
                <li><a href="Learnmore.php">Awards</a></li>
              </ul>
            </li>
          </ul>
        </div>

        <div class="diagonal-separator-signup"></div>

        <div class="flip-container" id="flip-container">
          <div class="flipper">
             <div class="front">
              <div class="right-panel">
                <img src="images/echopasslogo.png" alt="Echopass Logo" />
                <h2>ECHO<strong>PASS</strong>&reg;</h2>
                <form class="signinform" id="login-form" action="users/Controller/login-form.php" method="POST">
                <div class="form-group">
                  <input type="text" name="user_username" id="email" maxlength="60" placeholder="Username"/>
                </div>
                <span class="error" id="error-email"></span>
                <div class="form-group password-group">
                  <div class="password-wrapper">
                    <input type="password" name="user_password" id="password" placeholder="Password"/>
                    <i class='bx bx-show password-toggle' onclick="togglePasswordVisibility(this)"></i>
                  </div>
                </div>
                 <span class="error" id="error-password"></span>
                <div class="remember-container">
                  <input type="checkbox" id="remember" />
                  <label for="remember" style="color:white;">remember me</label>
                </div>
                <button name="signin" id="signin" onclick="">SIGN IN</button>
                </form>
                <div class="links">
                  <a href="forgetpassword.php">forgot password</a>
                  <a onclick="flipCard()">Create Account</a>
                </div>
              </div>
              </div>

              <div class="back">
                <div class="right-panel">
                    <h2>Create Account</h2>
                    <form class="create-account" action="users/Controller/create_account.php" method="POST" id="createaccount"> 

                      <div class="form-group">
                        <input name="user_firstname" placeholder="Firstname" type="text" id="firstname" maxlength="35" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" />
                      </div>
                      <span class="error" id="error-firstname"></span>

                      <div class="form-group">
                        <input name="user_lastname" type="text" id="lastname" maxlength="40" placeholder="Lastname" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')"/>
                      </div>
                      <span class="error" id="error-lastname"></span>

                      <div class="form-group">
                        <input name="user_email" type="text" id="create-email" maxlength="60" placeholder="Valid Email"/>
                      </div>
                      <span class="error" id="error-create-email"></span>

                      <div class="form-group password-group">
                        <div class="password-wrapper">
                          <input name="user_password" type="password" id="create-password" placeholder="Password"/>
                          <i class='bx bx-show password-toggle' onclick="togglePasswordVisibility(this)"></i>
                        </div>
                      </div>
                      <span class="error" id="error-create-password"></span>
                      
                      <div class="form-group password-group">
                        <div class="password-wrapper">
                          <input name="user_confirm_password" type="password" id="confirm-password" placeholder="Confirm Password"/>
                          <i class='bx bx-show password-toggle' onclick="togglePasswordVisibility(this)"></i>
                        </div>
                      </div>
                      <span class="error" id="error-confirm" id="recaptcha-container" ></span>
                      <div class="checkbox-container">
                        <input type="checkbox" id="terms" />
                        <label for="terms" style="color:white;">I have read and agree to the <a href="terms.php">Terms and Conditions </a> of Echopass. I consent to providing my email
                          address to receive newsletters and to be contacted by Echocraft regarding products, services, and
                          updates.</label>
                      </div>
                      <span class="error" id="error-terms"></span>

                      <div class="recaptcha" style="display:none;">
                      <div class="g-recaptcha" data-sitekey="6Le2s0wrAAAAANCB7comYjIz6RI3-5topbqdB_tK"></div>
                      <span class="error" id="error-recaptcha"></span>
                      <br>
                      </div>
                     <button type="submit" name="create" id="create">Create account</button>
                     <button type="button" id="processing" style="display:none;" disabled>Processing..</button>

                      <div class="links">
                        <a onclick="flipCard()">Back to login</a>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
          </div>
        </div>

      <div class="footer">
        <div class="footer-image">
          <img src="images/echologoreg.png" alt="echo logo" class="echologo" />
        </div>
        <div class="arrow-right" id="closeModalBtn" onclick="closeModalsign()">
          <p>&lt;&lt;&lt;&lt;</p>
        </div>
      </div>
    </div>
  </div>

<script>
  const modal = document.getElementById('modal');
  const openBtn = document.getElementById('openModalBtn');
  const closeBtn = document.getElementById('closeModalBtn');

  // Open modal on button click
  openBtn.addEventListener('click', () => {
    modal.classList.add('show');
  });

  // Close modal on close button click
  closeBtn.addEventListener('click', () => {
    modal.classList.remove('show');
  });

  function openModalsign() {
    modal.classList.add('show');
  }

  // Optional: Define closeModal function for reuse
  function closeModalsign() {
    modal.classList.remove('show');
  }

  // Optional: You can add a close button inside the modal to hide it again
  // Example close handler:
  /*
  const closeBtn = document.getElementById('closeModalBtn');
  closeBtn.addEventListener('click', () => {
    modal.classList.remove('show');
  });
  */

  function signIn() {
    alert("Sign-in logic not implemented.");
  }

  document.querySelectorAll('.has-submenu-signin > a').forEach(link => {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      const submenu = this.parentElement.querySelector('.submenu-signin');
      const toggleIcon = this.parentElement.querySelector('.toggle-icon-signin');

      const isVisible = submenu.style.display === 'block';
      submenu.style.display = isVisible ? 'none' : 'block';
      toggleIcon.textContent = isVisible ? '+' : '-';

    });
  });
</script>
<script>
  function flipCard() {
    document.getElementById('flip-container').classList.toggle('flipped');
  }
</script>
<script>
function togglePasswordVisibility(icon) {
  const input = icon.previousElementSibling;
  if (input.type === "password") {
    input.type = "text";
    icon.classList.replace('bx-show', 'bx-hide');
  } else {
    input.type = "password";
    icon.classList.replace('bx-hide', 'bx-show');
  }
}
</script>
</div>
<script>
  document.getElementById('login-form').addEventListener('submit', function (e) {
    let isValid = true;
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const email = emailInput.value.trim();
    const password = passwordInput.value.trim();

    // Clear previous errors (reset placeholders to default if needed)
    emailInput.placeholder = 'Email';
    passwordInput.placeholder = 'Password';

    // Validate email
    if (email === '') {
      emailInput.value = '';
      emailInput.placeholder = 'Email is required';
      emailInput.style.setProperty('--placeholder-color', 'red');
      isValid = false;
    } else if (!validateEmail(email)) {
      emailInput.value = '';
      emailInput.placeholder = 'Email is invalid';
      emailInput.style.setProperty('--placeholder-color', 'red');
      isValid = false;
    }

    // Validate password
    if (password === '') {
      passwordInput.value = '';
      passwordInput.placeholder = 'Password is required';
      passwordInput.style.setProperty('--placeholder-color', 'red');
      isValid = false;
    }

    // Prevent form submission if invalid
    if (!isValid) {
      e.preventDefault();
    }
  });

  // Remove placeholder error on typing
  document.getElementById('email').addEventListener('input', function () {
    this.placeholder = 'Email';
  });

  document.getElementById('password').addEventListener('input', function () {
    this.placeholder = 'Password';
  });

  function validateEmail(email) {
    // Simple email format check
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  }
</script>
<script>
document.getElementById('createaccount').addEventListener('submit', function (e) {
  let isValid = true;

  const firstnameInput = document.getElementById('firstname');
  const lastnameInput = document.getElementById('lastname');
  const emailInput = document.getElementById('create-email');
  const passwordInput = document.getElementById('create-password');
  const confirmPasswordInput = document.getElementById('confirm-password');
  const termsCheckbox = document.getElementById('terms');
  const termsError = document.getElementById('error-terms');
  const recaptchaContainer = document.querySelector('.recaptcha');

  const createBtn = document.getElementById('create');
  const processingBtn = document.getElementById('processing');

  const firstname = firstnameInput.value.trim();
  const lastname = lastnameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();
  const confirmPassword = confirmPasswordInput.value.trim();

  // Clear previous placeholder-based errors and reset styles
  resetField(firstnameInput, 'Firstname');
  resetField(lastnameInput, 'Lastname');
  resetField(emailInput, 'Valid Email');
  resetField(passwordInput, 'Password');
  resetField(confirmPasswordInput, 'Confirm Password');
  termsError.textContent = '';

  // Hide reCAPTCHA by default
  recaptchaContainer.style.display = 'none';
  document.getElementById('error-recaptcha').textContent = '';

  // First name validation
  if (firstname === '') {
    showPlaceholderError(firstnameInput, 'Firstname is required');
    isValid = false;
  }

  // Last name validation
  if (lastname === '') {
    showPlaceholderError(lastnameInput, 'Lastname is required');
    isValid = false;
  }

  // Email validation
  if (email === '') {
    showPlaceholderError(emailInput, 'Email is required');
    isValid = false;
  } else if (!validateEmail(email)) {
    showPlaceholderError(emailInput, 'Invalid email format');
    isValid = false;
  }

  // Password validation
  if (password === '') {
    showPlaceholderError(passwordInput, 'Password is required');
    isValid = false;
  } else if (!validatePassword(password)) {
    document.getElementById('error-create-password').textContent = 'Password must be Minimum of 10 characters, 1 capital, 1 special, 1 number';
    document.getElementById('error-create-password').style.color = '#FFDCDC';
    isValid = false;
  } else {
    document.getElementById('error-create-password').textContent = '';
  }

  // Confirm password validation
  if (confirmPassword === '') {
    showPlaceholderError(confirmPasswordInput, 'Confirm password is required');
    isValid = false;
  } else if (password !== confirmPassword) {
    showPlaceholderError(confirmPasswordInput, 'Passwords do not match');
    isValid = false;
  }

  // Terms validation
  if (!termsCheckbox.checked) {
    termsError.textContent = 'You must agree to the terms and conditions';
    termsError.style.color = '#FFDCDC';
    isValid = false;
  }

  if (isValid) {
    // Show reCAPTCHA and check it
    recaptchaContainer.style.display = 'block';

    const recaptchaResponse = grecaptcha.getResponse();
    const recaptchaError = document.getElementById('error-recaptcha');

    if (recaptchaResponse.length === 0) {
      recaptchaError.textContent = 'Please verify that you are not a robot';
      recaptchaError.style.color = '#FFDCDC';
      isValid = false;
    } else {
      recaptchaError.textContent = '';
    }
  }

  if (!isValid) {
    e.preventDefault();
    // Make sure "Create account" button is visible and "Processing" is hidden if errors exist
    createBtn.style.display = 'inline-block';
    processingBtn.style.display = 'none';
  } else {
    // No errors, form will submit, so hide "Create account" button and show "Processing.."
    createBtn.style.display = 'none';
    processingBtn.style.display = 'inline-block';
  }
});

// Utility to show placeholder error
function showPlaceholderError(input, message) {
  input.value = '';
  input.placeholder = message;
  input.style.borderColor = 'red';
  input.style.setProperty('--placeholder-color', 'red');
}

// Utility to reset placeholder and styles
function resetField(input, defaultPlaceholder) {
  input.placeholder = defaultPlaceholder;
  input.style.borderColor = '';
  input.style.setProperty('--placeholder-color', '');
  if (input.id === 'create-password') {
    document.getElementById('error-create-password').textContent = '';
  }
}

// Listen for input events to reset placeholder and border
const fields = ['firstname', 'lastname', 'create-email', 'create-password', 'confirm-password'];
fields.forEach(function (id) {
  document.getElementById(id).addEventListener('input', function () {
    this.style.borderColor = '';
    if (id === 'create-email') {
      this.placeholder = 'Valid Email';
    } else if (id === 'create-password') {
      this.placeholder = 'Password';
    } else if (id === 'confirm-password') {
      this.placeholder = 'Confirm Password';
    } else {
      this.placeholder = id.charAt(0).toUpperCase() + id.slice(1);
    }
    this.style.setProperty('--placeholder-color', '');
    if (id === 'create-password') {
      document.getElementById('error-create-password').textContent = '';
    }
  });
});

// Email validation function
function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

// Password validation function
function validatePassword(password) {
  const re = /^(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{10,}$/;
  return re.test(password);
}

// CSS for placeholder color on error
const style = document.createElement('style');
style.textContent = `
  input::placeholder {
    color: var(--placeholder-color, #999);
  }
`;
document.head.appendChild(style);

</script>
