popups

static/index.html

@@ -14,7 +14,7 @@
       <div class="profile-text">
         <h2>Donald J. Trump</h2>
         <span>@realDonaldTrump</span>
-        <p>45th President of the United States of America<br/>
+        <p>45th & 47th President 🇺🇸<br/>
            DonaldJTrump.com<br/>
            A rejoint X en mars 2009</p>
       </div>
@@ -27,6 +27,35 @@
     </div>
   </div>
 
+  <div class="popup" id="gamePopup">
+    <div class="popup-header">
+      <span class="popup-title">Game intro</span>
+      <div class="popup-controls">
+        <button class="control-btn minimize">−</button>
+        <button class="control-btn maximize">□</button>
+        <button class="control-btn close">×</button>
+      </div>
+    </div>
+    <div class="popup-content">
+      <p>Welcome to the 21st century—where America is thriving on the edge of total collapse! Wokeness has spread like a glorious plague, the Democrats have worked their magic to send inflation soaring, and oil production? Oh, it's practically a fairy tale now. But don't worry, salvation is here! A brand-new, ultra-competent (and just a little unpredictable) president has stepped in to save the day. What could possibly go wrong?</p>
+      <img src="/images/trump_popup.jpg" alt="USA Flag" class="popup-gif">
+      <button class="popup-ok">OK</button>
+    </div>
+  </div>
+
+  <div class="popup" id="gameOverPopup">
+    <div class="popup-header">
+      <span class="popup-title">Game Over</span>
+      <div class="popup-controls">
+        <button class="control-btn close">×</button>
+      </div>
+    </div>
+    <div class="popup-content">
+      <img src="/images/game_over.png" alt="Game Over" class="popup-gif">
+      <button class="popup-ok">Try Again</button>
+    </div>
+  </div>
+
   <script>
     function addMessageToChat(message, isUser) {
       const chatWindow = document.getElementById('chatWindow');
@@ -90,6 +119,101 @@
         sendMessage();
       }
     });
+
+    document.addEventListener('DOMContentLoaded', function() {
+      // Show initial game popup after 2 seconds
+      setTimeout(() => {
+        const popup = document.getElementById('gamePopup');
+        popup.style.display = 'block';
+      }, 2000);
+
+      // Show game over popup after 5 seconds
+      setTimeout(() => {
+        const gameOverPopup = document.getElementById('gameOverPopup');
+        gameOverPopup.style.display = 'block';
+      }, 5000);
+
+      // Initialize game popup controls
+      const popup = document.getElementById('gamePopup');
+      const minimizeBtn = popup.querySelector('.minimize');
+      const maximizeBtn = popup.querySelector('.maximize');
+      const closeBtn = popup.querySelector('.close');
+      const okBtn = popup.querySelector('.popup-ok');
+
+      minimizeBtn.addEventListener('click', () => {
+        popup.classList.add('minimized');
+      });
+
+      maximizeBtn.addEventListener('click', () => {
+        popup.classList.remove('minimized');
+      });
+
+      closeBtn.addEventListener('click', () => {
+        popup.style.display = 'none';
+      });
+
+      okBtn.addEventListener('click', () => {
+        popup.classList.add('minimized');
+      });
+
+      // Make the popup draggable
+      const header = popup.querySelector('.popup-header');
+      let isDragging = false;
+      let currentX;
+      let currentY;
+      let initialX;
+      let initialY;
+      let xOffset = 0;
+      let yOffset = 0;
+
+      header.addEventListener('mousedown', dragStart);
+      document.addEventListener('mousemove', drag);
+      document.addEventListener('mouseup', dragEnd);
+
+      function dragStart(e) {
+        initialX = e.clientX - xOffset;
+        initialY = e.clientY - yOffset;
+
+        if (e.target === header) {
+          isDragging = true;
+        }
+      }
+
+      function drag(e) {
+        if (isDragging) {
+          e.preventDefault();
+          currentX = e.clientX - initialX;
+          currentY = e.clientY - initialY;
+          xOffset = currentX;
+          yOffset = currentY;
+
+          setTranslate(currentX, currentY, popup);
+        }
+      }
+
+      function setTranslate(xPos, yPos, el) {
+        el.style.transform = `translate(${xPos}px, ${yPos}px)`;
+      }
+
+      function dragEnd() {
+        initialX = currentX;
+        initialY = currentY;
+        isDragging = false;
+      }
+
+      // Initialize game over popup controls
+      const gameOverPopup = document.getElementById('gameOverPopup');
+      const gameOverCloseBtn = gameOverPopup.querySelector('.close');
+      const gameOverOkBtn = gameOverPopup.querySelector('.popup-ok');
+
+      gameOverCloseBtn.addEventListener('click', () => {
+        location.reload();  // Reload page on close
+      });
+
+      gameOverOkBtn.addEventListener('click', () => {
+        location.reload();  // Reload page on Try Again
+      });
+    });
   </script>
 </body>
 </html>

static/styles.css

@@ -191,4 +191,114 @@
     height: 1px;
     background-color: #2f3336;
     margin-top: 16px;
+  }
+
+  .popup {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    background-color: #fff3e0;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    transition: all 0.3s ease;
+  }
+
+  .popup.minimized {
+    top: unset;
+    bottom: 20px;
+    right: 20px;
+    left: unset;
+    transform: none;
+    width: 200px;
+    height: 40px;
+    overflow: hidden;
+  }
+
+  .popup-header {
+    background-color: #1da1f2;
+    color: white;
+    padding: 8px 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 8px 8px 0 0;
+    cursor: move;
+  }
+
+  .popup-controls {
+    display: flex;
+    gap: 5px;
+  }
+
+  .control-btn {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+  }
+
+  .control-btn:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .popup-content {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+    color: #000;
+  }
+
+  .popup-gif {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .popup-ok {
+    background-color: #1da1f2;
+    color: white;
+    border: none;
+    padding: 8px 24px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+  }
+
+  .popup-ok:hover {
+    background-color: #1a91da;
+  }
+
+  #gameOverPopup {
+    width: fit-content;
+  }
+
+  #gameOverPopup .popup-content {
+    padding: 0;
+    gap: 5px;
+  }
+
+  #gameOverPopup .popup-gif {
+    display: block;
+    width: 600px;
+    height: 300px;
+    margin: 0;
+  }
+
+  #gameOverPopup .popup-header {
+    padding: 5px 10px;
+  }
+
+  #gameOverPopup .popup-ok {
+    margin: 5px 0;
   }