<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EMPRESS</title>
  <link rel="stylesheet" type="text/css" href="styles.css"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
  <link rel="icon" type="image/x-icon" href="./assets/favico/default.ico">
  <style>
    /* Basic Reset */
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    /* Snowflakes */
    .snowflake {
      position: absolute;
      top: -10px; /* Start above the screen */
      pointer-events: none;
      font-size: 1.5rem;
      color: #FFF;
      opacity: 0.7;
      z-index: 9999;
      user-select: none;
      animation: snowfall linear infinite;
    }

    @keyframes snowfall {
      0% {
        transform: translateY(0);
        opacity: 0.7;
      }
      100% {
        transform: translateY(100vh); /* Move snowflakes to the bottom of the screen */
        opacity: 0.5;
      }
    }

    /* Adjusted Background Styles */
    #video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: blur(15px);
    }

    #audio-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    #blurred-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      max-width: 1200px;
      padding: 20px;
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 15px;
      text-align: center;
      color: white;
      z-index: 2;
    }

    #ascii-art-logo {
      color: white;
      font-family: 'Courier New', monospace;
      font-size: large;
      margin: 20px 0;
      text-align: center;
    }

    .user-description {
      margin-top: 10px;
    }

    .links a {
      margin: 0 10px;
      color: white;
      text-decoration: none;
    }

    .links i {
      font-size: 30px;
      margin-right: 10px;
    }

    /* Style for the profile picture section */
    #profile-picture {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 5px solid white;
      margin-top: 20px;
    }

    /* Snow Particles Container */
    .snowflakes-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 10000;
    }
  </style>
</head>
<body class="custom-cursor">
  <!-- Snowflakes Container -->
  <div class="snowflakes-container" id="snowflakes-container"></div>

  <!-- Terminal Window -->
  <div id="terminal" class="custom-cursor">
    <div id="terminal-header">
      <div id="terminal-buttons">
        <!-- Terminal Control Buttons -->
        <div class="terminal-button" id="close-button"></div> <!-- Close button -->
        <div class="terminal-button" id="minimize-button"></div> <!-- Minimize button -->
        <div class="terminal-button" id="maximize-button"></div> <!-- Maximize button -->
      </div>
    </div>
    <div id="terminal-content">
      <p id="terminal-text"></p> <!-- Terminal text content -->
    </div>
  </div>

  <!-- Background Elements -->
  <div id="video-background">
    <video autoplay muted loop id="myVideo"> <!-- Video background -->
      <source src="./assets/back/default.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>

  <div id="audio-background">
    <audio autoplay loop id="myAudio"> <!-- Audio background -->
      <source src="./assets/music/default.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </div>

  <div id="blurred-box">
    <!-- ASCII Art Logo and Profile Picture Section -->
    <div class="profile-container">
      <div id="ascii-art">
        <pre>
 ____  _  _  ____  ____  ____  ____  ____ 
(  __)( \/ )(  _ \(  _ \(  __)/ ___)/ ___)
 ) _) / \/ \ ) __/ )   / ) _) \___ \\___ \
(____)\_)(_/(__)  (__\_)(____)(____/(____/
        </pre>
      </div>
      <img id="profile-picture" src="./assets/pfp/default.jpg" alt="Profile Picture">
    </div>

    <p id="username" style="font-weight: bold; font-size: large;">Empress</p> <!-- Username -->

    <!-- User Description -->
    <div class="user-description">
      <p id="user-description"> Hello losers on computers :^), Relax, chill and listen to some Persikovyles while you're here :), life's good.</p>
    </div>

    <!-- Links -->
    <div class="links">
      </a> 
      <a href="https://github.com/Serverdump" target="_blank">
        <i class="fab fa-github"></i> 
      </a> 
    </div>
  </div>

  <!-- Credits Section -->
  <div id="credits" style="text-align: center; padding: 20px; color: white; position: absolute; bottom: 0; width: 100%;">
    <p>Dea was here</p>
  </div>

  <script src="./assets/js/script.js"></script> <!-- Script for functionality -->
  <script src="./assets/js/title.js"></script> <!-- Script for title functionality -->
  <script src="./assets/js/discord.js"></script> <!-- Script for discord functionality -->

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Test 1: Verify terminal text content
      var terminalText = document.getElementById('terminal-text');
      console.assert(terminalText.textContent.includes("User: unknown"), "Test 1 Failed: Terminal text content is incorrect");

      // Test 2: Ensure video and audio are paused initially
      var videoBackground = document.getElementById('myVideo');
      var audioBackground = document.getElementById('myAudio');
      console.assert(videoBackground.paused, "Test 2 Failed: Video is not paused initially");
      console.assert(audioBackground.paused, "Test 2 Failed: Audio is not paused initially");

      // Test 3: Check terminal container is centered
      var terminalContainer = document.getElementById('terminal');
      var centerX = (window.innerWidth - terminalContainer.offsetWidth) / 2;
      var centerY = (window.innerHeight - terminalContainer.offsetHeight) / 2;
      console.assert(terminalContainer.style.left === centerX + 'px', "Test 3 Failed: Terminal container is not centered horizontally");
      console.assert(terminalContainer.style.top === centerY + 'px', "Test 3 Failed: Terminal container is not centered vertically");

      // Test 4: Confirm snowflakes start appearing after pressing "Enter"
      var event = new KeyboardEvent('keydown', {'key': 'Enter'});
      document.dispatchEvent(event);
      setTimeout(function() {
        var snowflakes = document.getElementsByClassName('snowflake');
        console.assert(snowflakes.length > 0, "Test 4 Failed: Snowflakes did not start appearing after pressing Enter");
      }, 1000);
    });
  </script>
</body>
</html>