<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>

  <div class="animated-text">
    <h1 id="rotating-text">BoyKizr Hub</h1>
  </div>
  
  <div class="login-container">
    <div id="main">
      <h1>Sign In</h1>
      <input id="email" type="text" placeholder="@mail" required>
      <input id="password" type="password" placeholder="Password" required>
      <button id="submit">Submit</button>
      <p><span>or</span></p>
      <button id="sign-up">Sign Up</button>
    </div>

    <div id="create-acct">
      <h1>Create an Account</h1>
      <input id="email-signup" type="text" placeholder="Email *" required>
      <input id="confirm-email-signup" type="email" placeholder="Confirm Email *" required>
      <input id="password-signup" type="password" placeholder="Password *" required>
      <input id="confirm-password-signup" type="password" placeholder="Confirm Password *" required>
      <button id="create-acct-btn">Create Account</button>
      <button id="return-btn">Return to Login</button>
    </div>
  </div>

  <script>
    // Rotating Text Logic
    const rotatingText = document.getElementById("rotating-text");
    const texts = ["BoyKizr Hub", "die3six <3 u", "Join us now!", "fun fact, boykizr started as a criminality shitsploit", "if ur reading this (im gay)", "starlx fingered me"];
    let index = 0;
  
    function updateText() {
      rotatingText.innerText = texts[index];
      index = (index + 1) % texts.length;
    }
  

    updateText(); 
    setInterval(updateText, 5000);
  </script>
  
  
</body>
</html>
