<!-- Warning Modal with renamed ID and auto-open on page load -->
<div id="warning-modal" class="modalwarning">
  <div class="modal-contentwarning">
    <div class="modal-headerwarning">
      <h5 class="titlewarning" style="padding:15px; font-weight:400; font-size:1.5rem;">
       <i class="material-icons">warning</i>&nbsp; Warning
      </h5>
   
    </div>
    <hr><br>
    <p>Invite your friends here. We regularly updating our site to bring new features so some options might donot work. If you notice any bug here then contact us.<br>
      Once you close the chat, you will only be able to log in as "<strong class="bold">{{VAR(USER_NAME)}}</strong>" again if you are using the same device.<br />
      If you want to keep your username, please logout and <a href="#">register</a>.
    </p>
  </div>
  <div class="modal-footerwarning">
    <button class="float-right btn-closewarning" onclick="closeModalWarning()">Close</button>
  </div>
</div>

<!-- Custom Styling for Modal -->
<style>
/* Modal Styling for Warning */
.modalwarning {
  display: none;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white; /* Modal background white */
  width: 90%;
  max-width: 300px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: opacity 0.3s ease-in-out;
}

.modalwarning.open {
  display: block;
  opacity: 1;
}

.modalwarning .modal-contentwarning {
  color: black; /* Text color black */
}

.modalwarning .titlewarning {
  font-weight: 400;
  font-size: 1.5rem;
  color: black; /* Title text color black */
}

.modalwarning .modal-footerwarning {
  display: flex;
  justify-content: flex-end;
  padding-top: 15px;
}

.modalwarning .btn-closewarning {
  background-color: black; /* Close button background black */
  color: white; /* Close button font white */
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
}

.modalwarning .btn-closewarning:hover {
  background-color: #333; /* Close button hover color */
}

/* Close button at top-right corner */
.modalwarning .modal-headerwarning {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modalwarning .modal-closewarning {
  background: none;
  border: none;
  font-size: 24px;
  color: black;
  cursor: pointer;
  padding: 0;
}
</style>

<!-- JavaScript to Open/Close Modal -->
<script>
// Open modal function
function openModalWarning() {
  const modal = document.getElementById('warning-modal');
  modal.classList.add('open');
}

// Close modal function
function closeModalWarning() {
  const modal = document.getElementById('warning-modal');
  modal.classList.remove('open');
}

// Close modal when clicking outside the modal
window.onclick = function(event) {
  const modal = document.getElementById('warning-modal');
  if (event.target === modal) {
    closeModalWarning();
  }
}

// Automatically open the modal when the page loads
window.addEventListener('load', function() {
  setTimeout(openModalWarning, 0); // Opens immediately when page loads
});
</script>