StarterPack Formular WIP

index.html

@@ -48,6 +48,7 @@
         <div class="hint-box">
             <p class="hint-title">💡 StarterPacks?!</p>
             <p>StarterPacks bieten thematisch kuratierte Listen von Fediverse-Accounts, um dir den Einstieg in verschiedene Bereiche und Communities – rund um den Hashtag #Fedikirche – zu erleichtern.</p>
+            <p>Möchtest du dein eigenes StarterKit erstellen? <button id="create-starterkit-btn" class="hint-button">Jetzt loslegen!</button></p>
         </div>
         <div class="recommendations shuffle-container" id="starterkit-container">
             <!-- StarterKits will be loaded dynamically here -->

src/main.js

@@ -1,5 +1,7 @@
 import { createStarterKitElement, enhanceStarterKits } from './utils/starterkit-utils.js';
 import { seededShuffleChildren } from './utils/shuffle-utils.js';
+import { initializeCreateStarterKitPopup } from './utils/create-starterkit.js';
+
 
 let userConsent = null;
 export { userConsent };
@@ -17,6 +19,8 @@ async function loadTemplates() {
 document.addEventListener('DOMContentLoaded', async function () {
     await loadTemplates(); // Templates laden
 
+    initializeCreateStarterKitPopup();
+
     const container = document.getElementById('starterkit-container');
     const shuffleContainers = document.querySelectorAll('.shuffle-container');
     const seed = Date.now();

src/template/template.html

@@ -28,3 +28,38 @@
         </div>
     </div>
 </template>
+
+
+<template id="create-starterkit-popup-template">
+    <div id="create-starterkit-popup" class="popup">
+        <div class="popup-content">
+            <button id="close-popup-btn" class="close-popup">x</button>
+            <h3>Neues StarterKit erstellen</h3>
+            <p>
+                Unsere StarterKits werden über das <a href="https://codeberg.org/kirche-im-netz/Startodon-Hub" target="_blank">Codeberg-Repository</a>
+                ausgeliefert. Du kannst Änderungen oder neue StarterKits als Pull-Request vorschlagen.
+            </p>
+            <h4>Erstelle dein StarterKit</h4>
+            <form id="starterkit-form">
+                <label for="kit-name">Name des StarterKits:</label>
+                <input type="text" id="kit-name" name="kitName" required />
+                <label for="kit-description">Beschreibung:</label>
+                <textarea id="kit-description" name="kitDescription" required></textarea>
+                <label for="kit-author">Autor (z. B. @user@libori.social):</label>
+                <input type="text" id="kit-author" name="kitAuthor" required />
+                <label for="kit-accounts">Accounts (eine URL pro Zeile):</label>
+                <textarea id="kit-accounts" name="kitAccounts" required></textarea>
+                <button type="submit">StarterKit generieren</button>
+            </form>
+            <h4>Dein StarterKit</h4>
+            <h5>Pull-Request erstellen</h5>
+            <p>
+                Um ein StarterKit einzureichen, erstelle einen Pull-Request in unserem Repository.
+                <br />
+                Alternativ kannst du die StarterKit-JSON-Datei auch an uns per Mail schicken:
+                <a href="mailto:support@example.com">support@example.com</a>
+            </p>
+        </div>
+    </div>
+</template>
+

src/utils/create-starterkit.js

@@ -0,0 +1,83 @@
+export function initializeCreateStarterKitPopup() {
+    const createButton = document.getElementById('create-starterkit-btn');
+    const popupTemplate = document.getElementById('create-starterkit-popup-template');
+
+    if (!popupTemplate) {
+        console.error('Template für StarterKit-Popup nicht gefunden!');
+        return;
+    }
+
+    createButton.addEventListener('click', () => {
+        const popupClone = popupTemplate.content.cloneNode(true);
+        const popupElement = popupClone.querySelector('#create-starterkit-popup');
+
+        // Events für Popup schließen
+        const closePopupButton = popupClone.querySelector('.close-popup');
+        closePopupButton.addEventListener('click', () => popupElement.remove());
+
+        popupElement.addEventListener('click', (event) => {
+            if (event.target === popupElement) {
+                popupElement.remove();
+            }
+        });
+
+        // Verarbeite das Formular und richte Logik ein
+        setupFormEvents(popupClone);
+
+        document.body.appendChild(popupClone);
+        popupElement.classList.add('show');
+    });
+}
+
+function setupFormEvents(popupClone) {
+    const form = popupClone.querySelector('#starterkit-form');
+    const downloadButton = popupClone.querySelector('#download-starterkit-btn');
+
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        const formData = new FormData(form);
+
+        const kitName = formData.get('kitName');
+        const kitDescription = formData.get('kitDescription');
+        let kitAuthor = formData.get('kitAuthor');
+        const kitAccounts = formData
+            .get('kitAccounts')
+            .split('\n')
+            .map((url) => url.trim())
+            .filter((url) => url);
+
+        if (kitAuthor && kitAuthor.startsWith('@')) {
+            const [username, domain] = kitAuthor.slice(1).split('@');
+            if (username && domain) {
+                kitAuthor = `https://${domain}/@${username}`;
+            } else {
+                alert('Ungültiger Mastodon-Handle. Bitte im Format @benutzername@domain eingeben.');
+                return;
+            }
+        }
+
+        if (!kitName || !kitDescription || !kitAuthor || kitAccounts.length === 0) {
+            alert('Bitte alle Felder ausfüllen.');
+            return;
+        }
+
+        const starterKit = {
+            name: kitName,
+            description: kitDescription,
+            author: kitAuthor,
+            accounts: kitAccounts,
+        };
+
+        const jsonString = JSON.stringify(starterKit, null, 2);
+        const blob = new Blob([jsonString], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+
+        const tempLink = document.createElement('a');
+        tempLink.href = url;
+        tempLink.download = `${kitName.toLowerCase().replace(/\s+/g, '_')}.json`;
+        document.body.appendChild(tempLink);
+        tempLink.click();
+        document.body.removeChild(tempLink);
+        URL.revokeObjectURL(url);
+    });
+}

style/site.css

@@ -17,6 +17,7 @@ a {
     text-decoration: none;
 }
 .container {
+    position:relative;
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
@@ -219,7 +220,23 @@ section {
     gap: 5px;
 }
 
+.hint-button {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    cursor: pointer;
+    border-radius: 4px;
+    margin-left: 0.5rem;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
 
+.hint-button:hover {
+    background-color: var(--primary-color-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
 
 footer {
     text-align: center;
@@ -256,3 +273,133 @@ footer p {
     color: #fff;
     text-decoration: underline;
 }
+
+
+/* ------------------------------------------------------*/
+  /* Popup-Styles */
+  .popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(53, 53, 53, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+  }
+  
+  .popup.hidden {
+    display: none;
+}
+
+.popup-content {
+    position: relative;
+    background-color: var(--background-color);
+    padding: 20px;
+    border-radius: 15px;
+    width: 90vh;
+    max-width: 800px;
+    max-height: 90vh;
+    overflow-y: scroll;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.popup-content h3 {
+    margin-top: 0;
+    font-size: 1.5rem;
+    color: var(--primary-color, #333);
+}
+
+.popup-content p {
+    font-size: 1rem;
+    margin: 10px 0;
+    color: #555;
+}
+
+/* Buttons */
+button {
+    display: inline-block;
+    background-color: var(--primary-color, #6364FF);
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    margin-top: 10px;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+button:hover {
+    background-color: var(--primary-color-hover, #4444CC);
+    transform: translateY(-2px);
+}
+
+button:active {
+    background-color: var(--primary-color-hover, #4444CC);
+    transform: translateY(0);
+}
+
+/* Formularstile */
+form {
+    margin: 20px 0;
+}
+
+form label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: bold;
+    margin-bottom: 5px;
+    color: #444;
+}
+
+form input[type="text"],
+form textarea {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
+    color: #333;
+    box-sizing: border-box;
+}
+
+form textarea {
+    height: 80px;
+    resize: vertical;
+}
+
+/* Erklärung unter dem Formular */
+.popup-content h5 {
+    margin: 20px 0 10px;
+    font-size: 1.2rem;
+    color: var(--primary-color, #333);
+}
+
+.popup-content a {
+    color: var(--primary-color, #6364FF);
+    text-decoration: none;
+}
+
+.popup-content a:hover {
+    text-decoration: underline;
+}
+
+/* Hintergrund für das Popup */
+.popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 999;
+    display: none;
+}
+
+.popup-overlay.active {
+    display: block;
+}