<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Screen and Login</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #121212;
      margin: 0;
      flex-direction: column;
      color: white;
      overflow: hidden; /* Prevent scrollbars from appearing due to falling snowflakes */
    }

    h1 {
      font-family: Arial, sans-serif;
      font-size: 48px;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: calc(38% - 20px); /* Adjusted to position over the radar */
      transform: translate(-50%, -50%);
      left: 51%; /* Center horizontally */
    }

    .meme {
      color: white;
    }

    .sense {
      color: #b39ddb; /* light purple */
    }

    .dots {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 8px;
    }

    .dots span {
      width: 10px;
      height: 10px;
      margin: 0 3px;
      background-color: #b39ddb;
      border-radius: 50%;
      animation: bounce 1.5s infinite ease-in-out;
    }

    .dots span:nth-child(2) {
      animation-delay: 0.3s;
    }

    .dots span:nth-child(3) {
      animation-delay: 0.6s;
    }

    @keyframes bounce {
      0%, 80%, 100% {
        transform: scale(0);
      }
      40% {
        transform: scale(1);
      }
    }

    /* Radar Loader */
    .loader {
      position: absolute;
      width: 150px;
      height: 150px;
      background: transparent;
      border-radius: 50%;
      box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.55);
      border: 1px solid #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      /* Adjust position to center under text */
      top: 50%; /* Slightly lower than text */
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .loader::before {
      content: '';
      position: absolute;
      inset: 20px;
      background: transparent;
      border: 1px dashed #444;
      border-radius: 50%;
      box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),
        inset 5px 5px 35px rgba(0, 0, 0, 0.25);
    }

    .loader::after {
      content: '';
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px dashed #444;
      box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),
        inset 5px 5px 35px rgba(0, 0, 0, 0.25);
    }

    .loader span {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 100%;
      background: transparent;
      transform-origin: top left;
      animation: radar81 2s linear infinite;
      border-top: 1px dashed #fff;
    }

    .loader span::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: seagreen;
      transform-origin: top left;
      transform: rotate(-55deg);
      filter: blur(30px) drop-shadow(20px 20px 20px seagreen);
    }

    @keyframes radar81 {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* Snowflake Animation */
    .snowflake {
      position: absolute;
      top: -10px;
      font-size: 1em;
      color: white;
      opacity: 0.8;
      animation: fall linear infinite;
    }

    @keyframes fall {
      0% {
        transform: translateY(-100px);
        opacity: 1;
      }
      100% {
        transform: translateY(110vh);
        opacity: 0.1;
      }
    }

    .login-box {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 400px;
      padding: 40px;
      margin: 20px auto;
      transform: translate(-50%, -55%);
      background: rgba(20, 20, 20);
      box-sizing: border-box;
      box-shadow: 0 15px 25px rgba(179, 157, 219);
      border-radius: 10px;
    }

    .login-box p:first-child {
      margin: 0 0 30px;
      padding: 0;
      color: #fff;
      text-align: center;
      font-size: 1.5rem;
      font-weight: bold;
      letter-spacing: 1px;
    }

    .login-box .user-box {
      position: relative;
    }

    .login-box .user-box input {
      width: 100%;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      margin-bottom: 30px;
      border: none;
      border-bottom: 1px solid #fff;
      outline: none;
      background: transparent;
    }

    .login-box .user-box label {
      position: absolute;
      top: 0;
      left: 0;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      pointer-events: none;
      transition: 0.5s;
    }

    .login-box .user-box input:focus ~ label,
    .login-box .user-box input:valid ~ label {
      top: -20px;
      left: 0;
      color: #fff;
      font-size: 12px;
    }

    .login-box form a {
      position: relative;
      display: inline-block;
      padding: 10px 20px;
      font-weight: bold;
      color: #fff;
      font-size: 16px;
      text-decoration: none;
      text-transform: uppercase;
      overflow: hidden;
      transition: 0.5s;
      margin-top: 40px;
      letter-spacing: 3px;
    }

    .login-box a:hover {
      background: #fff;
      color: #272727;
      border-radius: 5px;
    }

    .login-box a span {
      position: absolute;
      display: block;
    }

    .login-box a span:nth-child(1) {
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #fff);
      animation: btn-anim1 1.5s linear infinite;
    }

    @keyframes btn-anim1 {
      0% {
        left: -100%;
      }
      50%,
      100% {
        left: 100%;
      }
    }

    .login-box a span:nth-child(2) {
      top: -100%;
      right: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(180deg, transparent, #fff);
      animation: btn-anim2 1.5s linear infinite;
      animation-delay: 0.375s;
    }

    @keyframes btn-anim2 {
      0% {
        top: -100%;
      }
      50%,
      100% {
        top: 100%;
      }
    }

    .login-box a span:nth-child(3) {
      bottom: 0;
      right: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(270deg, transparent, #fff);
      animation: btn-anim3 1.5s linear infinite;
      animation-delay: 0.75s;
    }

    @keyframes btn-anim3 {
      0% {
        right: -100%;
      }
      50%,
      100% {
        right: 100%;
      }
    }

    .login-box a span:nth-child(4) {
      bottom: -100%;
      left: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(360deg, transparent, #fff);
      animation: btn-anim4 1.5s linear infinite;
      animation-delay: 1.125s;
    }

    @keyframes btn-anim4 {
      0% {
        bottom: -100%;
      }
      50%,
      100% {
        bottom: 100%;
      }
    }

    .login-box p:last-child {
      color: #aaa;
      font-size: 14px;
    }

    .login-box a.a2 {
      color: #fff;
      text-decoration: none;
    }

    .login-box a.a2:hover {
      background: transparent;
      color: #aaa;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div id="loading-screen">
    <h1>
      <span class="meme">Meme</span>
      <span class="sense">Sense</span>
      <div class="dots">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </h1>
    <div class="loader"><span></span></div>
  </div>

  <div id="login-screen" style="display: none;">
    <div class="login-box">
      <p>Login</p>
      <form>
        <div class="user-box">
          <input type="text" name="username" required>
          <label>Username</label>
        </div>
        <div class="user-box">
          <input type="password" name="password" required>
          <label>Password</label>
        </div>
        <a href="#">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          Submit
        </a>
      </form>
      <p>Don't have an account? <a href="#" class="a2">Sign up</a></p>
    </div>
  </div>

  <script>
    const createSnowflake = () => {
      const snowflake = document.createElement('div');
      snowflake.classList.add('snowflake');
      snowflake.textContent = '❄';

      // Randomize snowflake properties
      snowflake.style.left = Math.random() * 100 + 'vw';
      snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
      snowflake.style.animationDuration = Math.random() * 5 + 5 + 's';
      snowflake.style.opacity = Math.random();

      document.body.appendChild(snowflake);

      // Remove the snowflake after its animation ends
      setTimeout(() => {
        snowflake.remove();
      }, 10000); // Match the max animation duration
    };

    // Create snowflakes at regular intervals
    setInterval(createSnowflake, 300);

    // Switch to the login screen after 3 seconds
    setTimeout(() => {
      document.getElementById('loading-screen').style.display = 'none';
      document.getElementById('login-screen').style.display = 'block';
    }, 3000);
  </script>
</body>
</html>