<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Server Messages "Would You Rather℠"</title>
  <style>
    body {
      font-family: 'Courier New', Courier, monospace;
      background: linear-gradient(135deg, #0d0d0d, #1a1a2e);
      color: #00ffcc;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    .container {
      width: 90%;
      max-width: 1200px;
      padding: 20px;
      background: rgba(15, 15, 30, 0.95);
      border-radius: 15px;
      border: 2px solid #00ffcc;
      box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
    }
    h1 {
      text-align: center;
      color: #ff00ff;
      margin-bottom: 20px;
      text-transform: uppercase;
    }
    .message-card {
      background: #262626;
      border: 1px solid #00ffcc;
      border-radius: 10px;
      padding: 15px 20px;
      margin-bottom: 15px;
      box-shadow: 0 5px 15px rgba(0, 255, 204, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .message-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 255, 204, 0.3);
    }
    .username {
      color: #ff80ff;
      font-weight: bold;
    }
    .date {
      font-size: 0.8em;
      color: #aaa;
      margin-bottom: 10px;
    }
    .message-content {
      color: #e6e6e6;
      font-size: 1.1em;
    }
    footer {
      text-align: center;
      margin-top: 20px;
      font-size: 0.8em;
      color: #555;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Server Messages « Would You Rather℠ »</h1>
    <div id="messages-container">Loading messages...</div>
    <footer>Created by <strong>Masked</strong> for <strong>Next.Gen.Innocators</strong>.</footer>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const messagesContainer = document.getElementById('messages-container');

      // URL de l'API
      const apiUrl = 'https://script.google.com/macros/s/AKfycbzcytMfMhywcH1hMa_HCe0JU8l7WZUwK64VlAvJj9125tj_OCUE4MtYPkjP06QngM6F/exec?action=getMessages';

      // Fonction pour charger les messages
      fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
          // Vider le conteneur avant d'afficher les messages
          messagesContainer.innerHTML = '';

          // Vérifier si des messages existent
          if (data.length === 0) {
            messagesContainer.innerHTML = '<p>No messages found.</p>';
            return;
          }

          // Parcourir et afficher chaque message
          data.forEach(item => {
            const messageCard = document.createElement('div');
            messageCard.className = 'message-card';

            messageCard.innerHTML = `
              <div class="username">${item.username}</div>
              <div class="date">${new Date(item.date).toLocaleString()}</div>
              <div class="message-content">${item.message}</div>
            `;
            messagesContainer.appendChild(messageCard);
          });
        })
        .catch(error => {
          console.error('Error loading messages:', error);
          messagesContainer.innerHTML = '<p>Unable to load messages.</p>';
        });
    });
  </script>
</body>
</html>