function openCreateAccountForm() {
  // Dimensions for the popup window
  const width = 500;
  const height = 500;

  // Calculate the position to center the popup
  const left = (window.innerWidth / 2) - (width / 2);
  const top = (window.innerHeight / 2) - (height / 2);

  // Open the popup window with the calculated position
  window.open('../Forms/createAccount.html', 'popup', `width=${width},height=${height},top=${top},left=${left}`);
}

function openSignInForm() {
  // Dimensions for the popup window
  const width = 500;
  const height = 500;

  // Calculate the position to center the popup
  const left = (window.innerWidth / 2) - (width / 2);
  const top = (window.innerHeight / 2) - (height / 2);

  // Open the popup window with the calculated position
  window.open('../Forms/signIn.html', 'popup', `width=${width},height=${height},top=${top},left=${left}`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">




<script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>

<link rel="stylesheet" href="../static/background1.css">
<link rel="stylesheet" href="../static/signInPage.css">



<div class="musicContainer">
  <audio class="loungeMusic" controls loop>
            <source src="https://www.dropbox.com/scl/fi/l69tv279l3cn1ulzm4j0l/Enter-Friend.mp3?rlkey=76rteultp73bzlqn5si4m4mnx&st=gjl4htn9&dl=1" type="audio/mpeg">
        </audio>
  <p class="loungeMessage">Press Play Too Lounge With Me</p>
</div>
<!-- Heading's Color ans size -->
<h1>

  <span class="welcome">Hello & Welcome To:</span>
  <span class="redRat"> THE RED RAT'S ACRCHIVES </span>

</h1>


<!-- Paragraph text -->
<p class="welcomeMessage"> This is a collection containing the most popular browser games from all over the internet with games that are old and new. <br> I hope you will enjoy and share with your friends.<br> </p>
<br>
<p class="createAccountMessage"> Please sign in or create an account to access the website</p>

<!-- Log In Buttons-->
<div class="createAccountButton">
  <button onclick="openCreateAccountForm()" id="createAccount" type="button" class="btn btn-outline-light">Create Account</button>
</div>

<div class="signInButton">
  <button onclick="openSignInForm()" id="signIn" type="button" class="btn btn-outline-light">Sign In</button>
</div>

<!-- Paragraph text -->
<p class="contactInfo"> email me at [email protected] with any feedback, recommendations, or errors you encounter </p>

<img class="pfp" src="https://wallpapers.com/images/hd/pickle-rick-coming-out-of-portal-33vnk00t94f7eezj.jpg" alt="style" width="640">


<canvas id="projector" width="800" height="600"></canvas>

function validateForm(event) {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const errorMessage = document.getElementById('error-message');

  if (username === '' || password === '') {
    event.preventDefault(); // Prevent form submission
    errorMessage.textContent = 'Username and password cannot be empty';
  } else {
    errorMessage.textContent = ''; // Clear any previous error messages
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #1e374f;
}

form {
  border: 1px solid #ced4da;
  padding: 20px;
  border-radius: 5px;
  background-color: rgb(95, 17, 61);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

input[type="text"],
input[type="password"] {
  width: 90%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ced4da;
  border-radius: 4px;
  margin-top: 1px;
}

input[type="submit"] {
  background-color: #6f00ff;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
}

input[type="submit"]:hover {
  background-color: #0056b3;
}

.error {
  color: red;
  margin-top: 10px;
}

<form method="post" action="../Databases/accountInfo.php" onsubmit="validateForm(event)">
  <h2 style="color: rgb(255, 255, 255);">Create Account</h2>
  <label style="color: rgb(255, 255, 255);" for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Enter your username" required>

  <label style="color: rgb(255, 255, 255);" for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Enter your password" required>

  <div id="error-message" class="error"></div>

  <input type="submit" name="submit" value="Submit">
</form>