From 5bee2cb694097955c1c0151520d78d2261b19dd5 Mon Sep 17 00:00:00 2001
From: SimolZimol <70102430+SimolZimol@users.noreply.github.com>
Date: Wed, 4 Jun 2025 17:27:49 +0200
Subject: [PATCH] 	modified:   locales/de-DE.json 	modified:  
 locales/en-EN.json 	modified:   templates/playlists.html

---
 locales/de-DE.json       |   6 ++-
 locales/en-EN.json       |   6 ++-
 templates/playlists.html | 106 +++++++++++++++++++++++++++++++++++----
 3 files changed, 107 insertions(+), 11 deletions(-)

diff --git a/locales/de-DE.json b/locales/de-DE.json
index f078962..d991a16 100644
--- a/locales/de-DE.json
+++ b/locales/de-DE.json
@@ -40,5 +40,9 @@
   "logout": "Abmelden",
   "custom": "Anpassbar",
   "quiz_mode": "Quiz-Modus",
-  "quiz_mode_desc": "Errate Künstler, Titel oder Jahr. Klassisches Musik-Quiz."
+  "quiz_mode_desc": "Errate Künstler, Titel oder Jahr. Klassisches Musik-Quiz.",
+  "invite_guest": "Gast einladen",
+  "invite_duration": "Link gültig für (Minuten):",
+  "generate_link": "Link generieren",
+  "invite_link": "Einladungslink:"
 }
\ No newline at end of file
diff --git a/locales/en-EN.json b/locales/en-EN.json
index 0603951..4087d5d 100644
--- a/locales/en-EN.json
+++ b/locales/en-EN.json
@@ -40,5 +40,9 @@
   "logout": "Logout",
   "custom": "custom",
   "quiz_mode": "Quiz Mode",
-  "quiz_mode_desc": "Guess artist, title or year. Classic music quiz."
+  "quiz_mode_desc": "Guess artist, title or year. Classic music quiz.",
+  "invite_guest": "Invite Guest",
+  "invite_duration": "Link valid for (minutes):",
+  "generate_link": "Generate Link",
+  "invite_link": "Invite Link:"
 }
\ No newline at end of file
diff --git a/templates/playlists.html b/templates/playlists.html
index 05fddd2..c16b537 100644
--- a/templates/playlists.html
+++ b/templates/playlists.html
@@ -51,21 +51,66 @@
       background-color: #1ed760;
       transform: scale(1.04);
     }
+    /* Invite Button and Popup Styles */
     .btn {
-      display: inline-block;
-      padding: 10px 20px;
-      background-color: #007bff;
+      background-color: #1DB954;
       color: #fff;
-      border-radius: 5px;
-      text-decoration: none;
+      border: none;
+      border-radius: 30px;
+      padding: 10px 20px;
       font-size: 1em;
       font-weight: bold;
+      cursor: pointer;
       transition: background 0.2s, transform 0.2s;
-      margin-top: 20px;
     }
     .btn:hover {
-      background-color: #0056b3;
-      transform: scale(1.05);
+      background-color: #1ed760;
+      transform: scale(1.04);
+    }
+    #invitePopup {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: rgba(0, 0, 0, 0.5);
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+    #invitePopup > div {
+      background: #191414;
+      color: #fff;
+      padding: 30px 40px;
+      border-radius: 18px;
+      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+      min-width: 320px;
+      text-align: center;
+      position: relative;
+    }
+    #invitePopup span {
+      position: absolute;
+      top: 10px;
+      right: 18px;
+      cursor: pointer;
+      font-size: 1.5em;
+    }
+    #invitePopup label {
+      display: block;
+      margin: 15px 0 5px;
+    }
+    #invitePopup input {
+      width: 60px;
+      margin: 10px auto;
+      padding: 5px;
+      border: none;
+      border-radius: 5px;
+      text-align: center;
+    }
+    #invitePopup #inviteLinkResult {
+      margin-top: 18px;
+      word-break: break-all;
     }
   </style>
 </head>
@@ -73,6 +118,9 @@
   <a href="{{ url_for('logout') }}" class="logout-btn" style="position:absolute;top:20px;right:30px;">
     {{ translations['logout'] if translations['logout'] else 'Logout' }}
   </a>
+  <button class="btn" onclick="openInvitePopup()" style="position:absolute;top:20px;left:30px;">
+    {{ translations['invite_guest'] if translations['invite_guest'] else 'Invite Guest' }}
+  </button>
   <div class="playlist-container">
     <h2>{{ translations['choose_playlist'] }}</h2>
     <ul>
@@ -80,7 +128,47 @@
         <li><a class="playlist-link" href="/gamemodes/{{ pl.id }}">{{ pl.name }}</a></li>
       {% endfor %}
     </ul>
-    <a href="{{ url_for('invite') }}?duration=60" class="btn">Gast einladen (1h-Link)</a>
   </div>
+
+  <!-- Invite Popup -->
+  <div id="invitePopup">
+    <div>
+      <span onclick="closeInvitePopup()">&times;</span>
+      <h3>{{ translations['invite_guest'] if translations['invite_guest'] else 'Invite Guest' }}</h3>
+      <label for="inviteDuration">{{ translations['invite_duration'] if translations['invite_duration'] else 'Link valid for (minutes):' }}</label>
+      <input type="number" id="inviteDuration" min="1" max="1440" value="60">
+      <br>
+      <button class="btn" onclick="generateInviteLink()">{{ translations['generate_link'] if translations['generate_link'] else 'Generate Link' }}</button>
+      <div id="inviteLinkResult"></div>
+    </div>
+  </div>
+
+  <script>
+function openInvitePopup() {
+  document.getElementById('invitePopup').style.display = 'flex';
+  document.getElementById('inviteLinkResult').innerHTML = '';
+}
+function closeInvitePopup() {
+  document.getElementById('invitePopup').style.display = 'none';
+}
+function generateInviteLink() {
+  const duration = document.getElementById('inviteDuration').value || 60;
+  fetch(`/invite?duration=${duration}`)
+    .then(response => response.text())
+    .then(html => {
+      // Extrahiere den Link aus dem HTML (da /invite ein Template rendert)
+      const match = html.match(/href="([^"]+)"/);
+      if (match) {
+        document.getElementById('inviteLinkResult').innerHTML =
+          `<div style="margin-top:10px;">
+            <strong>{{ translations['invite_link'] if translations['invite_link'] else 'Invite Link:' }}</strong><br>
+            <a href="${match[1]}" target="_blank" style="color:#1DB954;">${match[1]}</a>
+          </div>`;
+      } else {
+        document.getElementById('inviteLinkResult').innerHTML = "Error generating link.";
+      }
+    });
+}
+  </script>
 </body>
 </html>