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,11 +201,24 @@
           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="container">
       <div class="card">
 
         <!-- NORMALER LAUNCHER -->
@@ -162,6 +240,10 @@
           <button id="openButton" class="button primary" type="button" data-i18n="launcher.openButton">
             Open meeting
           </button>
+          
+          <button id="createNewFromLauncherButton" class="button secondary" type="button" data-i18n="creator.createNewButton">
+            Create New Meeting
+          </button>
         </div>
 
         <!-- STARTVORGANG -->
@@ -266,10 +348,64 @@
               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>
+
+        <!-- MEETING CREATOR -->
+        <div id="meetingCreator" class="hidden">
+          <h1 data-i18n="creator.title">Create New Meeting</h1>
+          
+          <div class="form-group">
+            <label for="meetingName" data-i18n="creator.meetingNameLabel">Meeting Name</label>
+            <input type="text" id="meetingName" placeholder="My Meeting" />
+          </div>
+          
+          <div class="form-group">
+            <label for="meetingDescription" data-i18n="creator.meetingDescriptionLabel">Description</label>
+            <textarea id="meetingDescription" placeholder="Meeting description (optional)"></textarea>
+          </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>
 
+      <div class="footer">
+        Impressum
+      </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
        * ============================================================