add margin between footer and card div

launch.html

@@ -21,6 +21,12 @@
         color: #222;
       }
 
+      .container {
+        display: flex;
+        flex-direction: column;
+        width: min(700px, calc(100% - 32px));
+      }
+
       .card {
         box-sizing: border-box;
         width: min(600px, calc(100% - 32px));
@@ -31,6 +37,18 @@
         text-align: center;
       }
 
+      .footer {
+        margin-top: 25px;
+        box-sizing: border-box;
+        width: min(600px, calc(100% - 32px));
+        padding: 32px;
+        background: white;
+        border-radius: 14px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
+        text-align: center;
+        float: right;
+      }
+
       h1 {
         margin-top: 0;
       }
@@ -103,6 +121,49 @@
         color: #900;
       }
 
+      .form-group {
+        margin-bottom: 16px;
+        text-align: left;
+      }
+
+      .form-group label {
+        display: block;
+        margin-bottom: 4px;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .form-group input,
+      .form-group textarea {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 14px;
+        box-sizing: border-box;
+      }
+
+      .form-group textarea {
+        min-height: 80px;
+        resize: vertical;
+      }
+
+      .form-actions {
+        margin-top: 24px;
+        display: flex;
+        gap: 12px;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+
+      .success-message {
+        margin-top: 24px;
+        padding: 16px;
+        border-radius: 8px;
+        background: #f0f8ff;
+        color: #0066cc;
+      }
+
       @keyframes spin {
         to {
           transform: rotate(360deg);
@@ -119,6 +180,10 @@
           background: #242424;
         }
 
+        .footer {
+          background: #242424;
+        }
+
         p {
           color: #bbb;
         }
@@ -136,140 +201,211 @@
           border-color: #555;
           border-top-color: #ddd;
         }
+
+        .form-group input,
+        .form-group textarea {
+          background: #303030;
+          border-color: #555;
+          color: #eee;
+        }
+
+        .success-message {
+          background: #1a3a5a;
+          color: #99ccff;
+        }
       }
     </style>
   </head>
 
   <body>
-    <div class="card">
+    <div class="container">
+      <div class="card">
 
-      <!-- NORMALER LAUNCHER -->
+        <!-- NORMALER LAUNCHER -->
-      <div id="launcher" class="hidden">
+        <div id="launcher" class="hidden">
-        <h1 data-i18n="launcher.title">Jitsi Meeting</h1>
+          <h1 data-i18n="launcher.title">Jitsi Meeting</h1>
 
-        <p>
+          <p>
-          <span data-i18n="launcher.meetingPrefix">
+            <span data-i18n="launcher.meetingPrefix">
-            The meeting
+              The meeting
-          </span>
+            </span>
-          <span class="room">
+            <span class="room">
-            <strong id="roomName"></strong>
+              <strong id="roomName"></strong>
-          </span>
+            </span>
-          <span data-i18n="launcher.meetingSuffix">
+            <span data-i18n="launcher.meetingSuffix">
-            will be opened.
+              will be opened.
-          </span>
+            </span>
-        </p>
-
-        <button id="openButton" class="button primary" type="button" data-i18n="launcher.openButton">
-          Open meeting
-        </button>
-      </div>
-
-      <!-- STARTVORGANG -->
-      <div id="starting" class="hidden">
-        <h1 data-i18n="starting.title">
-          Starting Jitsi Meet …
-        </h1>
-
-        <div class="status">
-          <span class="spinner"></span>
-          <span data-i18n="starting.status">
-            The Jitsi Meet desktop client is being opened.
-          </span>
-        </div>
-      </div>
-
-      <!-- FALLBACK -->
-      <div id="fallback" class="hidden">
-        <h1 data-i18n="fallback.title">
-          Jitsi Meet could not be opened
-        </h1>
-
-        <p data-i18n="fallback.description">
-          The Jitsi Meet desktop client may not have been started.
-        </p>
-
-        <button id="retryButton" class="button primary" type="button" data-i18n="fallback.retryButton">
-          Try again
-        </button>
-
-        <!-- Windows -->
-        <div id="windowsDownload" class="download hidden">
-          <h2 data-i18n="downloads.windows.title">
-            Jitsi Meet for Windows
-          </h2>
-
-          <p data-i18n="downloads.windows.description">
-            Install the Jitsi Meet desktop client and then try opening the
-            meeting again.
           </p>
 
-          <a id="windowsLink" class="button secondary" target="_blank" rel="noopener noreferrer" data-i18n="downloads.windows.button">
+          <button id="openButton" class="button primary" type="button" data-i18n="launcher.openButton">
-            Download Jitsi for Windows
+            Open meeting
-          </a>
+          </button>
+          
+          <button id="createNewFromLauncherButton" class="button secondary" type="button" data-i18n="creator.createNewButton">
+            Create New Meeting
+          </button>
         </div>
 
-        <!-- macOS -->
+        <!-- STARTVORGANG -->
-        <div id="macosDownload" class="download hidden">
+        <div id="starting" class="hidden">
-          <h2 data-i18n="downloads.macos.title">
+          <h1 data-i18n="starting.title">
-            Jitsi Meet for macOS
+            Starting Jitsi Meet …
-          </h2>
+          </h1>
 
-          <p data-i18n="downloads.macos.description">
+          <div class="status">
-            Install the Jitsi Meet desktop client and then try opening the
+            <span class="spinner"></span>
-            meeting again.
+            <span data-i18n="starting.status">
+              The Jitsi Meet desktop client is being opened.
+            </span>
+          </div>
+        </div>
+
+        <!-- FALLBACK -->
+        <div id="fallback" class="hidden">
+          <h1 data-i18n="fallback.title">
+            Jitsi Meet could not be opened
+          </h1>
+
+          <p data-i18n="fallback.description">
+            The Jitsi Meet desktop client may not have been started.
           </p>
 
-          <a id="macosLink" class="button secondary" target="_blank" rel="noopener noreferrer" data-i18n="downloads.macos.button">
+          <button id="retryButton" class="button primary" type="button" data-i18n="fallback.retryButton">
-            Download Jitsi for macOS
+            Try again
-          </a>
+          </button>
+
+          <!-- Windows -->
+          <div id="windowsDownload" class="download hidden">
+            <h2 data-i18n="downloads.windows.title">
+              Jitsi Meet for Windows
+            </h2>
+
+            <p data-i18n="downloads.windows.description">
+              Install the Jitsi Meet desktop client and then try opening the
+              meeting again.
+            </p>
+
+            <a id="windowsLink" class="button secondary" target="_blank" rel="noopener noreferrer" data-i18n="downloads.windows.button">
+              Download Jitsi for Windows
+            </a>
+          </div>
+
+          <!-- macOS -->
+          <div id="macosDownload" class="download hidden">
+            <h2 data-i18n="downloads.macos.title">
+              Jitsi Meet for macOS
+            </h2>
+
+            <p data-i18n="downloads.macos.description">
+              Install the Jitsi Meet desktop client and then try opening the
+              meeting again.
+            </p>
+
+            <a id="macosLink" class="button secondary" target="_blank" rel="noopener noreferrer" data-i18n="downloads.macos.button">
+              Download Jitsi for macOS
+            </a>
+          </div>
+
+          <!-- Linux / unbekannt -->
+          <div id="otherDownload" class="download hidden">
+            <h2 data-i18n="downloads.other.title">
+              Jitsi Meet Desktop
+            </h2>
+
+            <p data-i18n="downloads.other.description">
+              No desktop download is configured for your operating system.
+            </p>
+          </div>
+
+          <!-- Browser -->
+          <div class="download">
+            <h2 data-i18n="browser.title">
+              Join in browser
+            </h2>
+
+            <p data-i18n="browser.description">
+              You can also join the meeting directly in your browser.
+            </p>
+
+            <a id="browserLink" class="button secondary" data-i18n="browser.button">
+              Join in browser
+            </a>
+          </div>
         </div>
 
-        <!-- Linux / unbekannt -->
+        <!-- FEHLER -->
-        <div id="otherDownload" class="download hidden">
+        <div id="invalidRoom" class="hidden">
-          <h2 data-i18n="downloads.other.title">
+          <h1 data-i18n="error.title">
-            Jitsi Meet Desktop
+            No meeting specified
-          </h2>
+          </h1>
 
-          <p data-i18n="downloads.other.description">
+          <div class="error">
-            No desktop download is configured for your operating system.
+            <span data-i18n="error.description">
-          </p>
+              Please specify a meeting using the
+            </span>
+            <code>?room=...</code>
+            <span data-i18n="error.descriptionSuffix">
+              parameter.
+            </span>
+          </div>
+
+          <div style="margin-top: 24px;">
+            <button id="createNewMeetingButton" class="button primary" type="button" data-i18n="creator.createNewButton">
+              Create New Meeting
+            </button>
+          </div>
         </div>
 
-        <!-- Browser -->
+        <!-- MEETING CREATOR -->
-        <div class="download">
+        <div id="meetingCreator" class="hidden">
-          <h2 data-i18n="browser.title">
+          <h1 data-i18n="creator.title">Create New Meeting</h1>
-            Join in browser
+          
-          </h2>
+          <div class="form-group">
-
+            <label for="meetingName" data-i18n="creator.meetingNameLabel">Meeting Name</label>
-          <p data-i18n="browser.description">
+            <input type="text" id="meetingName" placeholder="My Meeting" />
-            You can also join the meeting directly in your browser.
+          </div>
-          </p>
+          
-
+          <div class="form-group">
-          <a id="browserLink" class="button secondary" data-i18n="browser.button">
+            <label for="meetingDescription" data-i18n="creator.meetingDescriptionLabel">Description</label>
-            Join in browser
+            <textarea id="meetingDescription" placeholder="Meeting description (optional)"></textarea>
-          </a>
+          </div>
+          
+          <div class="form-group">
+            <label for="meetingStart" data-i18n="creator.meetingStartLabel">Start Date & Time</label>
+            <input type="datetime-local" id="meetingStart" />
+          </div>
+          
+          <div class="form-group">
+            <label for="meetingEnd" data-i18n="creator.meetingEndLabel">End Date & Time</label>
+            <input type="datetime-local" id="meetingEnd" />
+          </div>
+          
+          <div class="form-group">
+            <label for="meetingOrganizer" data-i18n="creator.meetingOrganizerLabel">Organizer Email</label>
+            <input type="email" id="meetingOrganizer" placeholder="organizer@example.com" />
+          </div>
+          
+          <div class="form-actions">
+            <button id="createMeetingButton" class="button primary" type="button" data-i18n="creator.createButton">
+              Create Meeting
+            </button>
+            <button id="cancelCreateButton" class="button secondary" type="button" data-i18n="creator.cancelButton">
+              Cancel
+            </button>
+          </div>
+          
+          <div id="icsSuccess" class="success-message hidden">
+            <span data-i18n="creator.successMessage">Meeting created! Download your calendar file.</span>
+            <a id="downloadIcsLink" class="button primary" style="margin-top: 12px; display: inline-block;" data-i18n="creator.downloadButton">Download ICS File</a>
+          </div>
         </div>
+
       </div>
 
-      <!-- FEHLER -->
+      <div class="footer">
-      <div id="invalidRoom" class="hidden">
+        Impressum
-        <h1 data-i18n="error.title">
-          No meeting specified
-        </h1>
-
-        <div class="error">
-          <span data-i18n="error.description">
-            Please specify a meeting using the
-          </span>
-          <code>?room=...</code>
-          <span data-i18n="error.descriptionSuffix">
-            parameter.
-          </span>
-        </div>
       </div>
-
     </div>
-
     <script>
       "use strict";
 
@@ -282,8 +418,7 @@
         /*
          * Your Jitsi Domain.
          */
-        jitsiHost: "<YOURJITSIINSTANCEADDRESS>",
+        jitsiHost: "meet.bnvb-ingenieure.de",
-
         /*
          * Timeout trying to start the jitsi-meet-electron client
          */
@@ -358,6 +493,25 @@
             title: "No meeting specified",
             description: "Please specify a meeting using the",
             descriptionSuffix: "parameter."
+          },
+
+          creator: {
+            title: "Create New Meeting",
+            meetingNameLabel: "Meeting Name",
+            meetingDescriptionLabel: "Description",
+            meetingStartLabel: "Start Date & Time",
+            meetingEndLabel: "End Date & Time",
+            meetingOrganizerLabel: "Organizer Email",
+            createButton: "Create Meeting",
+            cancelButton: "Cancel",
+            successMessage: "Meeting created! Download your calendar file.",
+            downloadButton: "Download ICS File",
+            createNewButton: "Create New Meeting",
+            meetingNameRequired: "Please enter a meeting name",
+            startTimeRequired: "Please select a start time",
+            endTimeRequired: "Please select an end time",
+            endAfterStart: "End time must be after start time",
+            organizerRequired: "Please enter an organizer email"
           }
         },
 
@@ -417,6 +571,102 @@
             description:
               "Bitte gib ein Meeting über den Parameter",
             descriptionSuffix: "an."
+          },
+
+          creator: {
+            title: "Neues Meeting erstellen",
+            meetingNameLabel: "Meeting-Name",
+            meetingDescriptionLabel: "Beschreibung",
+            meetingStartLabel: "Start Datum & Uhrzeit",
+            meetingEndLabel: "Ende Datum & Uhrzeit",
+            meetingOrganizerLabel: "Organisator E-Mail",
+            createButton: "Meeting erstellen",
+            cancelButton: "Abbrechen",
+            successMessage: "Meeting erstellt! Lade deine Kalenderdatei herunter.",
+            downloadButton: "ICS-Datei herunterladen",
+            createNewButton: "Neues Meeting erstellen",
+            meetingNameRequired: "Bitte gib einen Meeting-Namen ein",
+            startTimeRequired: "Bitte wähle eine Startzeit",
+            endTimeRequired: "Bitte wähle eine Endzeit",
+            endAfterStart: "Die Endzeit muss nach der Startzeit liegen",
+            organizerRequired: "Bitte gib eine Organisator-E-Mail ein"
+          }
+        },
+
+        fr: {
+          pageTitle: "Réunion Jitsi",
+
+          launcher: {
+            title: "Réunion Jitsi",
+            meetingPrefix: "La réunion",
+            meetingSuffix: "va être ouverte.",
+            openButton: "Rejoindre la réunion"
+          },
+
+          starting: {
+            title: "Démarrage de Jitsi Meet…",
+            status: "Le client bureau Jitsi Meet est en cours d'ouverture."
+          },
+
+          fallback: {
+            title: "Jitsi Meet n'a pas pu être ouvert",
+            description:
+              "Le client bureau Jitsi Meet n'a peut-être pas été démarré.",
+            retryButton: "Réessayer"
+          },
+
+          downloads: {
+            windows: {
+              title: "Jitsi Meet pour Windows",
+              description:
+                "Installez le client bureau Jitsi Meet, puis essayez de rouvrir la réunion.",
+              button: "Télécharger Jitsi pour Windows"
+            },
+
+            macos: {
+              title: "Jitsi Meet pour macOS",
+              description:
+                "Installez le client bureau Jitsi Meet, puis essayez de rouvrir la réunion.",
+              button: "Télécharger Jitsi pour macOS"
+            },
+
+            other: {
+              title: "Jitsi Meet Desktop",
+              description:
+                "Aucun téléchargement bureau n'est configuré pour votre système d'exploitation."
+            }
+          },
+
+          browser: {
+            title: "Rejoindre dans le navigateur",
+            description:
+              "Vous pouvez également rejoindre la réunion directement dans votre navigateur.",
+            button: "Rejoindre dans le navigateur"
+          },
+
+          error: {
+            title: "Aucune réunion spécifiée",
+            description: "Veuillez spécifier une réunion à l'aide du paramètre",
+            descriptionSuffix: "."
+          },
+
+          creator: {
+            title: "Créer une nouvelle réunion",
+            meetingNameLabel: "Nom de la réunion",
+            meetingDescriptionLabel: "Description",
+            meetingStartLabel: "Date et heure de début",
+            meetingEndLabel: "Date et heure de fin",
+            meetingOrganizerLabel: "Email de l'organisateur",
+            createButton: "Créer la réunion",
+            cancelButton: "Annuler",
+            successMessage: "Réunion créée ! Téléchargez votre fichier calendrier.",
+            downloadButton: "Télécharger le fichier ICS",
+            createNewButton: "Créer une nouvelle réunion",
+            meetingNameRequired: "Veuillez entrer un nom de réunion",
+            startTimeRequired: "Veuillez sélectionner une heure de début",
+            endTimeRequired: "Veuillez sélectionner une heure de fin",
+            endAfterStart: "L'heure de fin doit être après l'heure de début",
+            organizerRequired: "Veuillez entrer un email d'organisateur"
           }
         }
       };
@@ -513,6 +763,7 @@
       const starting = document.getElementById("starting");
       const fallback = document.getElementById("fallback");
       const invalidRoom = document.getElementById("invalidRoom");
+      const meetingCreator = document.getElementById("meetingCreator");
       const roomName = document.getElementById("roomName");
       const openButton = document.getElementById("openButton");
       const retryButton = document.getElementById("retryButton");
@@ -522,6 +773,19 @@
       const otherDownload = document.getElementById("otherDownload");
       const windowsLink = document.getElementById("windowsLink");
       const macosLink = document.getElementById("macosLink");
+      const createNewMeetingButton = document.getElementById("createNewMeetingButton");
+      const createNewFromLauncherButton = document.getElementById("createNewFromLauncherButton");
+      
+      /* Meeting Creator DOM elements */
+      const meetingNameInput = document.getElementById("meetingName");
+      const meetingDescriptionInput = document.getElementById("meetingDescription");
+      const meetingStartInput = document.getElementById("meetingStart");
+      const meetingEndInput = document.getElementById("meetingEnd");
+      const meetingOrganizerInput = document.getElementById("meetingOrganizer");
+      const createMeetingButton = document.getElementById("createMeetingButton");
+      const cancelCreateButton = document.getElementById("cancelCreateButton");
+      const icsSuccess = document.getElementById("icsSuccess");
+      const downloadIcsLink = document.getElementById("downloadIcsLink");
 
       /* ============================================================
        * GET ROOM FROM QUERY-PARAMETER
@@ -863,6 +1127,161 @@
         }, CONFIG.launchTimeout);
       }
 
+      /* ============================================================
+       * ICS FILE GENERATION
+       * ============================================================
+       */
+
+      function generateICS(meetingName, description, startTime, endTime, organizer) {
+        /* Generate a unique room name from the meeting name */
+        const roomName = meetingName.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
+        const meetingUrl = `https://${CONFIG.jitsiHost}/launch.html?room=${encodeURIComponent(roomName)}`;
+        
+        /* Format dates for ICS */
+        const formatICSDate = (date) => {
+          const pad = (num) => num.toString().padStart(2, '0');
+          const year = date.getFullYear();
+          const month = pad(date.getMonth() + 1);
+          const day = pad(date.getDate());
+          const hours = pad(date.getHours());
+          const minutes = pad(date.getMinutes());
+          const seconds = pad(date.getSeconds());
+          return `${year}${month}${day}T${hours}${minutes}${seconds}`;
+        };
+
+        const uid = `jitsi-${Date.now()}@${CONFIG.jitsiHost}`;
+        const dtStamp = formatICSDate(new Date());
+        const dtStart = formatICSDate(startTime);
+        const dtEnd = formatICSDate(endTime);
+
+        /* Build ICS content */
+        const icsContent = `BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//BNVB//Jitsi Meeting//EN
+CALSCALE:GREGORIAN
+METHOD:PUBLISH
+BEGIN:VEVENT
+UID:${uid}
+DTSTAMP:${dtStamp}
+DTSTART:${dtStart}
+DTEND:${dtEnd}
+SUMMARY:${meetingName.replace(/,/g, '\\,')}
+DESCRIPTION:${description.replace(/,/g, '\\,').replace(/\n/g, '\\n')}
+LOCATION:${meetingUrl}
+ORGANIZER:MAILTO:${organizer}
+STATUS:CONFIRMED
+URL:${meetingUrl}
+SEQUENCE:0
+TRANSP:OPAQUE
+BEGIN:VALARM
+ACTION:DISPLAY
+DESCRIPTION:Reminder
+TRIGGER:-PT15M
+END:VALARM
+END:VEVENT
+END:VCALENDAR`;
+
+        return {
+          content: icsContent,
+          roomName: roomName,
+          url: meetingUrl
+        };
+      }
+
+      function downloadICS(content, filename) {
+        const blob = new Blob([content], { type: 'text/calendar;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        return url;
+      }
+
+      function showMeetingCreator() {
+        /* Hide all other views */
+        launcher.classList.add("hidden");
+        starting.classList.add("hidden");
+        fallback.classList.add("hidden");
+        invalidRoom.classList.add("hidden");
+        
+        /* Show meeting creator */
+        meetingCreator.classList.remove("hidden");
+        
+        /* Reset form */
+        meetingNameInput.value = '';
+        meetingDescriptionInput.value = '';
+        meetingStartInput.value = '';
+        meetingEndInput.value = '';
+        meetingOrganizerInput.value = '';
+        icsSuccess.classList.add("hidden");
+        
+        /* Set default start and end times */
+        const now = new Date();
+        const inOneHour = new Date(now.getTime() + 60 * 60 * 1000);
+        
+        meetingStartInput.value = now.toISOString().slice(0, 16);
+        meetingEndInput.value = inOneHour.toISOString().slice(0, 16);
+      }
+
+      function createMeeting() {
+        const meetingName = meetingNameInput.value.trim();
+        const description = meetingDescriptionInput.value.trim();
+        const startTime = new Date(meetingStartInput.value);
+        const endTime = new Date(meetingEndInput.value);
+        const organizer = meetingOrganizerInput.value.trim();
+
+        if (!meetingName) {
+          alert(getTranslation('creator.meetingNameRequired') || 'Please enter a meeting name');
+          return;
+        }
+
+        if (!meetingStartInput.value) {
+          alert(getTranslation('creator.startTimeRequired') || 'Please select a start time');
+          return;
+        }
+
+        if (!meetingEndInput.value) {
+          alert(getTranslation('creator.endTimeRequired') || 'Please select an end time');
+          return;
+        }
+
+        if (startTime >= endTime) {
+          alert(getTranslation('creator.endAfterStart') || 'End time must be after start time');
+          return;
+        }
+
+        if (!organizer) {
+          alert(getTranslation('creator.organizerRequired') || 'Please enter an organizer email');
+          return;
+        }
+
+        /* Generate ICS */
+        const icsData = generateICS(meetingName, description || meetingName, startTime, endTime, organizer);
+        
+        /* Create download link */
+        const blob = new Blob([icsData.content], { type: 'text/calendar;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        downloadIcsLink.href = url;
+        downloadIcsLink.download = `${icsData.roomName}.ics`;
+        
+        /* Show success message */
+        icsSuccess.classList.remove("hidden");
+        
+        /* Scroll to success message */
+        icsSuccess.scrollIntoView({ behavior: 'smooth' });
+      }
+
+      function cancelCreateMeeting() {
+        meetingCreator.classList.add("hidden");
+        
+        /* If there was a room parameter, show the launcher */
+        const room = getRoom();
+        if (isValidRoom(room)) {
+          roomName.textContent = room;
+          browserLink.href = createBrowserUrl(room);
+          launcher.classList.remove("hidden");
+        } else {
+          invalidRoom.classList.remove("hidden");
+        }
+      }
+
       /* ============================================================
        * INITIALISIERUNG
        * ============================================================
@@ -925,6 +1344,27 @@
         launchJitsi
       );
 
+      /* Meeting Creator Events */
+      createNewMeetingButton.addEventListener(
+        "click",
+        showMeetingCreator
+      );
+
+      createNewFromLauncherButton.addEventListener(
+        "click",
+        showMeetingCreator
+      );
+
+      createMeetingButton.addEventListener(
+        "click",
+        createMeeting
+      );
+
+      cancelCreateButton.addEventListener(
+        "click",
+        cancelCreateMeeting
+      );
+
       /* ============================================================
        * START
        * ============================================================