The First War

/* Style the popup and make it hidden by default */ .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } /* Style the content of the popup */ .popup-content { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 5px; } /* Style the close button */ .popup-close { position: absolute; top: 20px; right: 20px; cursor: pointer; font-size: 18px; color: black; } /* Style the button inside the popup */ #approve-button { background-color: green; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } // Get a reference to the popup element, the checkbox, and the approve button const popup = document.getElementById("pre-order-popup"); const termsCheckbox = document.getElementById("terms-checkbox"); const approveButton = document.getElementById("approve-button"); // Add an event listener to the terms checkbox termsCheckbox.addEventListener("change", function() { // Enable or disable the approve button based on the checkbox state approveButton.disabled = !termsCheckbox.checked; }); // Add an event listener to the approve button approveButton.addEventListener("click", function() { // Hide the popup when the button is clicked popup.style.display = "none"; // Allow the purchase to proceed // You can add your own code here to proceed with the purchase }); // Show the popup when the page loads window.onload = function() { popup.style.display = "block"; };