joerglohrer
/
fOERbico
mirror of https://git.rpi-virtuell.de/Comenius-Institut/fOERbico
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
fOERbico/docs/relilab-nostr-formular.html

1010 lines
34 KiB
HTML
Raw Permalink Normal View History

Entwurf relilab-Nostr-Events Formular OHNE Funktion
2026-02-11 05:36:39 +01:00
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>relilab – Session einreichen</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- EasyMDE Markdown Editor -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easymde/2.18.0/easymde.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/easymde/2.18.0/easymde.min.js" defer></script>
<style>
:root {
--rl-blue: #34b2f6;
--rl-purple: #d225f8;
--rl-orange: #ff8103;
--rl-pink: #e54d9a;
--rl-dark: #1a1a2e;
--rl-card: #ffffff;
--rl-bg: #f4f6fb;
--rl-text: #2d2d3a;
--rl-muted: #7a7a8e;
--rl-border: #e0e4ef;
--rl-success: #22c55e;
--rl-error: #ef4444;
--gradient-main: linear-gradient(135deg, var(--rl-blue), var(--rl-purple), var(--rl-pink), var(--rl-orange));
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Source Sans 3', sans-serif;
background: var(--rl-bg);
color: var(--rl-text);
min-height: 100vh;
line-height: 1.6;
}
/* ====== HEADER ====== */
.header {
background: var(--rl-dark);
position: relative;
overflow: hidden;
padding: 2rem 1.5rem 3rem;
text-align: center;
}
.header::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--gradient-main);
opacity: 0.12;
}
.header::after {
content: '';
position: absolute;
bottom: -2px; left: 0; right: 0;
height: 40px;
background: var(--rl-bg);
clip-path: ellipse(55% 100% at 50% 100%);
}
.header-logo {
position: relative;
z-index: 1;
height: 64px;
margin-bottom: 1rem;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.header h1 {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
font-size: 2.4rem;
color: #fff;
position: relative;
z-index: 1;
letter-spacing: 0.02em;
}
.header h1 span {
background: var(--gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header p {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 300;
font-size: 1.25rem;
color: rgba(255,255,255,0.7);
position: relative;
z-index: 1;
margin-top: 0.25rem;
}
/* ====== MAIN CONTAINER ====== */
.container {
max-width: 740px;
margin: -1rem auto 3rem;
padding: 0 1.25rem;
position: relative;
z-index: 2;
}
/* ====== SECTIONS ====== */
.form-section {
background: var(--rl-card);
border-radius: 16px;
padding: 2rem 2rem 1.5rem;
margin-bottom: 1.25rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
border: 1px solid var(--rl-border);
transition: box-shadow 0.3s ease;
}
.form-section:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.06);
}
.section-label {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 600;
font-size: 1.35rem;
color: var(--rl-dark);
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-label .icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
flex-shrink: 0;
}
.icon-blue { background: rgba(52,178,246,0.12); color: var(--rl-blue); }
.icon-purple { background: rgba(210,37,248,0.12); color: var(--rl-purple); }
.icon-orange { background: rgba(255,129,3,0.12); color: var(--rl-orange); }
.icon-pink { background: rgba(229,77,154,0.12); color: var(--rl-pink); }
/* ====== FORM ELEMENTS ====== */
.field { margin-bottom: 1.25rem; }
.field:last-child { margin-bottom: 0; }
label {
display: block;
font-weight: 500;
font-size: 0.92rem;
color: var(--rl-text);
margin-bottom: 0.35rem;
}
label .optional {
font-weight: 400;
color: var(--rl-muted);
font-size: 0.82rem;
}
label .required {
color: var(--rl-pink);
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="password"],
select {
width: 100%;
padding: 0.65rem 0.9rem;
border: 1.5px solid var(--rl-border);
border-radius: 10px;
font-family: 'Source Sans 3', sans-serif;
font-size: 0.95rem;
color: var(--rl-text);
background: #fff;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}
input:focus, select:focus {
border-color: var(--rl-blue);
box-shadow: 0 0 0 3px rgba(52,178,246,0.12);
}
input::placeholder { color: var(--rl-muted); opacity: 0.7; }
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 520px) {
.row { grid-template-columns: 1fr; }
}
/* ====== FILE UPLOAD ====== */
.file-drop {
border: 2px dashed var(--rl-border);
border-radius: 12px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
position: relative;
}
.file-drop:hover, .file-drop.dragover {
border-color: var(--rl-blue);
background: rgba(52,178,246,0.04);
}
.file-drop.has-file {
border-color: var(--rl-success);
background: rgba(34,197,94,0.04);
}
.file-drop input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.file-drop-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.file-drop-text { font-size: 0.9rem; color: var(--rl-muted); }
.file-drop-text strong { color: var(--rl-blue); }
.file-preview {
margin-top: 1rem;
display: none;
}
.file-preview img {
max-width: 100%;
max-height: 200px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.file-preview .file-name {
font-size: 0.85rem;
color: var(--rl-muted);
margin-top: 0.5rem;
}
.file-remove {
display: inline-block;
margin-top: 0.5rem;
font-size: 0.82rem;
color: var(--rl-error);
cursor: pointer;
text-decoration: underline;
background: none;
border: none;
font-family: inherit;
}
/* ====== CC LICENSE SELECT ====== */
.license-grid {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.license-option {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.85rem;
border-radius: 10px;
cursor: pointer;
border: 1.5px solid transparent;
transition: all 0.2s;
font-size: 0.9rem;
}
.license-option:hover {
background: rgba(0,0,0,0.02);
}
.license-option input[type="radio"] {
accent-color: var(--rl-blue);
width: 16px;
height: 16px;
flex-shrink: 0;
}
.license-option.selected {
border-color: var(--rl-blue);
background: rgba(52,178,246,0.06);
}
.license-green {
background: rgba(34,197,94,0.06);
border-color: rgba(34,197,94,0.2);
}
.license-green:hover { background: rgba(34,197,94,0.1); }
.license-green.selected {
border-color: var(--rl-success);
background: rgba(34,197,94,0.12);
}
.license-red {
background: rgba(239,68,68,0.04);
border-color: rgba(239,68,68,0.15);
}
.license-red:hover { background: rgba(239,68,68,0.08); }
.license-red.selected {
border-color: var(--rl-error);
background: rgba(239,68,68,0.1);
}
.license-badge {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 600;
font-size: 0.72rem;
padding: 0.15rem 0.45rem;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.badge-green { background: rgba(34,197,94,0.15); color: #16a34a; }
.badge-red { background: rgba(239,68,68,0.12); color: #dc2626; }
/* ====== CHECKBOX GRID (Zielgruppe) ====== */
.checkbox-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.chip {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
border-radius: 50px;
border: 1.5px solid var(--rl-border);
cursor: pointer;
font-size: 0.88rem;
transition: all 0.2s;
user-select: none;
}
.chip:hover { border-color: var(--rl-purple); background: rgba(210,37,248,0.04); }
.chip input[type="checkbox"] { display: none; }
.chip.active {
border-color: var(--rl-purple);
background: rgba(210,37,248,0.1);
color: var(--rl-purple);
font-weight: 500;
}
.chip .checkmark { font-size: 0.75rem; display: none; }
.chip.active .checkmark { display: inline; }
/* ====== TOGGLE / VIDEOKONFERENZ ====== */
.toggle-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.toggle {
position: relative;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--rl-border);
border-radius: 24px;
transition: background 0.25s;
}
.toggle-slider::before {
content: '';
position: absolute;
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: transform 0.25s;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle input:checked + .toggle-slider {
background: var(--rl-orange);
}
.toggle input:checked + .toggle-slider::before {
transform: translateX(20px);
}
.toggle-label {
font-size: 0.9rem;
color: var(--rl-text);
}
.custom-url-field {
display: none;
margin-top: 0.75rem;
padding: 0.85rem;
border-radius: 10px;
background: rgba(255,129,3,0.04);
border: 1px solid rgba(255,129,3,0.15);
}
.custom-url-field.visible { display: block; }
.zoom-default {
font-size: 0.85rem;
color: var(--rl-muted);
margin-top: 0.35rem;
}
.zoom-default a { color: var(--rl-blue); text-decoration: none; }
.zoom-default a:hover { text-decoration: underline; }
/* ====== SUBMIT ====== */
.submit-section {
text-align: center;
padding: 1.5rem 2rem 2rem;
}
.submit-btn {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
font-size: 1.35rem;
letter-spacing: 0.03em;
padding: 0.85rem 3rem;
border: none;
border-radius: 50px;
color: #fff;
background: var(--gradient-main);
background-size: 200% 200%;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 16px rgba(52,178,246,0.25);
position: relative;
overflow: hidden;
}
.submit-btn:hover {
background-position: 100% 0;
box-shadow: 0 6px 24px rgba(210,37,248,0.3);
transform: translateY(-1px);
}
.submit-btn:active { transform: translateY(0); }
.submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.submit-btn .spinner {
display: none;
width: 20px;
height: 20px;
border: 2.5px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.7s linear infinite;
margin-right: 0.5rem;
vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.submit-btn.loading .spinner { display: inline-block; }
.submit-btn.loading .btn-text { opacity: 0.8; }
/* ====== STATUS MESSAGES ====== */
.status-msg {
margin-top: 1.25rem;
padding: 1rem 1.25rem;
border-radius: 12px;
font-size: 0.92rem;
display: none;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.status-msg.success {
display: block;
background: rgba(34,197,94,0.08);
border: 1px solid rgba(34,197,94,0.25);
color: #16a34a;
}
.status-msg.error {
display: block;
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.2);
color: #dc2626;
}
/* ====== EASYMDE OVERRIDES ====== */
.EasyMDEContainer .CodeMirror {
border-radius: 10px;
border-color: var(--rl-border);
font-family: 'Source Sans 3', sans-serif;
font-size: 0.95rem;
min-height: 120px;
}
.EasyMDEContainer .CodeMirror-focused {
border-color: var(--rl-blue);
box-shadow: 0 0 0 3px rgba(52,178,246,0.12);
}
.EasyMDEContainer .editor-toolbar {
border-color: var(--rl-border);
border-radius: 10px 10px 0 0;
}
.EasyMDEContainer .editor-toolbar button:hover {
background: rgba(52,178,246,0.08);
}
.editor-toolbar button.active, .editor-toolbar button:hover {
border-color: var(--rl-blue);
}
/* ====== FOOTER ====== */
.footer {
text-align: center;
padding: 1.5rem;
font-size: 0.8rem;
color: var(--rl-muted);
}
.footer a { color: var(--rl-blue); text-decoration: none; }
/* ====== RESPONSIVE ====== */
@media (max-width: 520px) {
.header h1 { font-size: 1.8rem; }
.form-section { padding: 1.5rem 1.25rem 1.25rem; }
.submit-btn { width: 100%; }
}
</style>
</head>
<body>
<!-- ====== HEADER ====== -->
<header class="header">
<img src="https://relilab.org/wp-content/uploads/2021/06/Design-ohne-Titel.png" alt="relilab Logo" class="header-logo">
<h1><span>Session</span> einreichen</h1>
<p>Erstelle ein Nostr-Kalender-Event für das relilab</p>
</header>
<!-- ====== FORM ====== -->
<main class="container">
<form id="eventForm" novalidate>
<!-- KONTAKT -->
<div class="form-section">
<div class="section-label">
<span class="icon icon-blue">✉</span>
Kontakt
</div>
<div class="field">
<label for="email">E-Mail-Adresse <span class="optional">(optional)</span></label>
<input type="email" id="email" name="email" placeholder="deine@email.de">
</div>
</div>
<!-- SESSION -->
<div class="form-section">
<div class="section-label">
<span class="icon icon-purple">📋</span>
Session-Details
</div>
<div class="field">
<label for="title">Session-Titel <span class="required">*</span></label>
<input type="text" id="title" name="title" placeholder="z.B. KI im Religionsunterricht" required>
</div>
<div class="field">
<label for="summary">Kurzbeschreibung <span class="optional">(optional)</span></label>
<textarea id="summary" name="summary"></textarea>
</div>
<div class="field">
<label for="content">Inhaltsbeschreibung <span class="optional">(optional)</span></label>
<textarea id="content" name="content"></textarea>
</div>
</div>
<!-- BILD -->
<div class="form-section">
<div class="section-label">
<span class="icon icon-orange">🖼</span>
Beitragsbild
</div>
<div class="field">
<div class="file-drop" id="fileDrop">
<input type="file" id="image" name="image" accept="image/jpeg,image/png,image/webp">
<div class="file-drop-icon">📷</div>
<div class="file-drop-text">Bild hierher ziehen oder <strong>klicken</strong> zum Auswählen<br><small>JPG, PNG oder WebP</small></div>
</div>
<div class="file-preview" id="filePreview">
<img id="previewImg" src="" alt="Vorschau">
<div class="file-name" id="fileName"></div>
<button type="button" class="file-remove" id="fileRemove">Bild entfernen</button>
</div>
</div>
<div id="imageMetaFields" style="display:none;">
<div class="field">
<label for="imageCredit">Bildquelle / Credit <span class="optional">(optional)</span></label>
<input type="text" id="imageCredit" name="imageCredit" placeholder="z.B. Foto: Max Mustermann">
</div>
<div class="field">
<label>Creative-Commons-Lizenz <span class="required">*</span></label>
<div class="license-grid" id="licenseGrid">
<!-- Grün (empfohlen) -->
<label class="license-option license-green">
<input type="radio" name="license" value="CC0">
<span class="license-badge badge-green">empfohlen</span>
<span><strong>CC0</strong> – Public Domain / Keine Rechte vorbehalten</span>
</label>
<label class="license-option license-green">
<input type="radio" name="license" value="CC BY 4.0">
<span class="license-badge badge-green">empfohlen</span>
<span><strong>CC BY</strong> – Namensnennung</span>
</label>
<label class="license-option license-green">
<input type="radio" name="license" value="CC BY-SA 4.0">
<span class="license-badge badge-green">empfohlen</span>
<span><strong>CC BY-SA</strong> – Namensnennung, Weitergabe unter gleichen Bedingungen</span>
</label>
<!-- Rot (einschränkend) -->
<label class="license-option license-red">
<input type="radio" name="license" value="CC BY-NC 4.0">
<span class="license-badge badge-red">einschränkend</span>
<span><strong>CC BY-NC</strong> – Nicht kommerziell</span>
</label>
<label class="license-option license-red">
<input type="radio" name="license" value="CC BY-NC-SA 4.0">
<span class="license-badge badge-red">einschränkend</span>
<span><strong>CC BY-NC-SA</strong> – Nicht kommerziell, Weitergabe unter gleichen Bed.</span>
</label>
<label class="license-option license-red">
<input type="radio" name="license" value="CC BY-ND 4.0">
<span class="license-badge badge-red">einschränkend</span>
<span><strong>CC BY-ND</strong> – Keine Bearbeitung</span>
</label>
<label class="license-option license-red">
<input type="radio" name="license" value="CC BY-NC-ND 4.0">
<span class="license-badge badge-red">einschränkend</span>
<span><strong>CC BY-NC-ND</strong> – Nicht kommerziell, Keine Bearbeitung</span>
</label>
</div>
</div>
</div>
</div>
<!-- DATUM & ZEIT -->
<div class="form-section">
<div class="section-label">
<span class="icon icon-pink">📅</span>
Datum & Uhrzeit
</div>
<div class="row">
<div class="field">
<label for="startDate">Start-Datum <span class="required">*</span></label>
<input type="date" id="startDate" name="startDate" required>
</div>
<div class="field">
<label for="startTime">Start-Uhrzeit <span class="required">*</span></label>
<input type="time" id="startTime" name="startTime" required>
</div>
</div>
<div class="row">
<div class="field">
<label for="endDate">End-Datum <span class="required">*</span></label>
<input type="date" id="endDate" name="endDate" required>
</div>
<div class="field">
<label for="endTime">End-Uhrzeit <span class="required">*</span></label>
<input type="time" id="endTime" name="endTime" required>
</div>
</div>
</div>
<!-- VIDEOKONFERENZ -->
<div class="form-section">
<div class="section-label">
<span class="icon icon-blue">🎥</span>
Videokonferenz
</div>
<div class="zoom-default">
Standard: <a href="https://relilab.org/live/" target="_blank" rel="noopener">relilab-Zoom (relilab.org/live)</a>
</div>
<div class="toggle-row" style="margin-top: 0.75rem;">
<label class="toggle">
<input type="checkbox" id="customZoom">
<span class="toggle-slider"></span>
</label>
<span class="toggle-label">Veranstaltung findet <strong>nicht</strong> im relilab-Zoom statt</span>
</div>
<div class="custom-url-field" id="customUrlField">
<div class="field">
<label for="customUrl">Videokonferenz-URL <span class="required">*</span></label>
<input type="url" id="customUrl" name="customUrl" placeholder="https://meet.example.com/...">
</div>
</div>
</div>
<!-- ZIELGRUPPE -->
<div class="form-section">
<div class="section-label">
<span class="icon icon-purple">🎯</span>
Zielgruppe
</div>
<div class="checkbox-grid" id="audienceGrid">
<label class="chip"><input type="checkbox" name="audience" value="elementar"><span class="checkmark">✓</span> Elementar</label>
<label class="chip"><input type="checkbox" name="audience" value="Grundschule"><span class="checkmark">✓</span> Grundschule</label>
<label class="chip"><input type="checkbox" name="audience" value="Sek1"><span class="checkmark">✓</span> Sek 1</label>
<label class="chip"><input type="checkbox" name="audience" value="Sek2"><span class="checkmark">✓</span> Sek 2</label>
<label class="chip"><input type="checkbox" name="audience" value="BRU"><span class="checkmark">✓</span> BRU</label>
<label class="chip"><input type="checkbox" name="audience" value="Erwachsenenbildung"><span class="checkmark">✓</span> Erwachsenenbildung</label>
<label class="chip"><input type="checkbox" name="audience" value="Hochschule"><span class="checkmark">✓</span> Hochschule</label>
</div>
</div>
<!-- HASHTAGS -->
<div class="form-section">
<div class="section-label">
<span class="icon icon-orange">🏷</span>
Hashtags / Kategorien
</div>
<div class="field">
<label for="hashtags">Hashtags <span class="optional">(kommagetrennt, optional)</span></label>
<input type="text" id="hashtags" name="hashtags" placeholder="z.B. ki, religionsunterricht, digital">
</div>
</div>
<!-- AUTH -->
<div class="form-section">
<div class="section-label">
<span class="icon icon-pink">🔑</span>
Authentifizierung
</div>
<div class="field">
<label for="token">Zugangs-Token <span class="required">*</span></label>
<input type="password" id="token" name="token" placeholder="Dein Passwort / Token" required>
</div>
</div>
<!-- SUBMIT -->
<div class="form-section submit-section">
<button type="submit" class="submit-btn" id="submitBtn">
<span class="spinner"></span>
<span class="btn-text">Session veröffentlichen</span>
</button>
<div class="status-msg" id="statusMsg"></div>
</div>
</form>
</main>
<footer class="footer">
relilab – Religionspädagogisches Labor · Powered by <a href="https://nostr.com" target="_blank" rel="noopener">Nostr</a>
</footer>
<script>
// ============================================
// KONFIGURATION – Webhook-URL hier eintragen!
// ============================================
const WEBHOOK_URL = 'https://DEIN-N8N-SERVER.example.com/webhook/nostr-calendar-event';
document.addEventListener('DOMContentLoaded', () => {
// ============================================
// WYSIWYG Editors (EasyMDE)
// ============================================
let summaryEditor, contentEditor;
function initEditors() {
if (typeof EasyMDE === 'undefined') {
// Fallback: retry after a short delay
setTimeout(initEditors, 200);
return;
}
summaryEditor = new EasyMDE({
element: document.getElementById('summary'),
placeholder: 'Kurzer Teaser-Text zur Session…',
spellChecker: false,
status: false,
toolbar: ['bold', 'italic', 'link', '|', 'preview'],
minHeight: '80px',
});
contentEditor = new EasyMDE({
element: document.getElementById('content'),
placeholder: 'Ausführliche Beschreibung der Session-Inhalte…',
spellChecker: false,
status: ['lines', 'words'],
toolbar: ['bold', 'italic', 'heading', '|', 'unordered-list', 'ordered-list', '|', 'link', 'image', '|', 'preview', 'side-by-side'],
minHeight: '160px',
});
}
initEditors();
// ============================================
// AUTO-FILL: Start → End
// ============================================
const startDate = document.getElementById('startDate');
const startTime = document.getElementById('startTime');
const endDate = document.getElementById('endDate');
const endTime = document.getElementById('endTime');
let endManuallyEdited = false;
startDate.addEventListener('change', () => {
if (!endManuallyEdited || endDate.value === '' || endDate.value === startDate.dataset.prev) {
endDate.value = startDate.value;
}
startDate.dataset.prev = startDate.value;
});
startTime.addEventListener('change', () => {
if (!endManuallyEdited || endTime.value === '' || endTime.value === startTime.dataset.prev) {
endTime.value = startTime.value;
}
startTime.dataset.prev = startTime.value;
});
endDate.addEventListener('input', () => { endManuallyEdited = true; });
endTime.addEventListener('input', () => { endManuallyEdited = true; });
// ============================================
// FILE UPLOAD / PREVIEW
// ============================================
const fileDrop = document.getElementById('fileDrop');
const fileInput = document.getElementById('image');
const filePreview = document.getElementById('filePreview');
const previewImg = document.getElementById('previewImg');
const fileNameEl = document.getElementById('fileName');
const fileRemove = document.getElementById('fileRemove');
const imageMetaFields = document.getElementById('imageMetaFields');
function showImagePreview(file) {
const reader = new FileReader();
reader.onload = (e) => {
previewImg.src = e.target.result;
fileNameEl.textContent = file.name + ' (' + (file.size / 1024).toFixed(0) + ' KB)';
filePreview.style.display = 'block';
fileDrop.classList.add('has-file');
imageMetaFields.style.display = 'block';
};
reader.readAsDataURL(file);
}
fileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) showImagePreview(e.target.files[0]);
});
fileDrop.addEventListener('dragover', (e) => { e.preventDefault(); fileDrop.classList.add('dragover'); });
fileDrop.addEventListener('dragleave', () => { fileDrop.classList.remove('dragover'); });
fileDrop.addEventListener('drop', (e) => {
e.preventDefault();
fileDrop.classList.remove('dragover');
if (e.dataTransfer.files.length > 0) {
fileInput.files = e.dataTransfer.files;
showImagePreview(e.dataTransfer.files[0]);
}
});
fileRemove.addEventListener('click', () => {
fileInput.value = '';
filePreview.style.display = 'none';
fileDrop.classList.remove('has-file');
imageMetaFields.style.display = 'none';
});
// ============================================
// LICENSE SELECTION HIGHLIGHT
// ============================================
document.querySelectorAll('#licenseGrid .license-option').forEach(opt => {
const radio = opt.querySelector('input[type="radio"]');
radio.addEventListener('change', () => {
document.querySelectorAll('#licenseGrid .license-option').forEach(o => o.classList.remove('selected'));
opt.classList.add('selected');
});
});
// ============================================
// AUDIENCE CHIPS
// ============================================
document.querySelectorAll('#audienceGrid .chip').forEach(chip => {
chip.addEventListener('click', (e) => {
// Let the checkbox toggle naturally, then update class
setTimeout(() => {
const cb = chip.querySelector('input[type="checkbox"]');
chip.classList.toggle('active', cb.checked);
}, 0);
});
});
// ============================================
// CUSTOM ZOOM TOGGLE
// ============================================
const customZoom = document.getElementById('customZoom');
const customUrlField = document.getElementById('customUrlField');
customZoom.addEventListener('change', () => {
customUrlField.classList.toggle('visible', customZoom.checked);
if (!customZoom.checked) {
document.getElementById('customUrl').value = '';
}
});
// ============================================
// FORM SUBMISSION
// ============================================
const form = document.getElementById('eventForm');
const submitBtn = document.getElementById('submitBtn');
const statusMsg = document.getElementById('statusMsg');
form.addEventListener('submit', async (e) => {
e.preventDefault();
statusMsg.className = 'status-msg';
statusMsg.style.display = 'none';
// Validation
const title = document.getElementById('title').value.trim();
const sDate = startDate.value;
const sTime = startTime.value;
const eDate = endDate.value;
const eTime = endTime.value;
const token = document.getElementById('token').value;
if (!title) return showError('Bitte gib einen Session-Titel ein.');
if (!sDate || !sTime) return showError('Bitte gib Start-Datum und -Uhrzeit ein.');
if (!eDate || !eTime) return showError('Bitte gib End-Datum und -Uhrzeit ein.');
if (!token) return showError('Bitte gib den Zugangs-Token ein.');
// Check end > start
const startTs = new Date(sDate + 'T' + sTime).getTime() / 1000;
const endTs = new Date(eDate + 'T' + eTime).getTime() / 1000;
if (endTs < startTs) return showError('Das End-Datum/Zeit muss nach dem Start liegen.');
// Custom URL required?
if (customZoom.checked && !document.getElementById('customUrl').value.trim()) {
return showError('Bitte gib eine Videokonferenz-URL ein.');
}
// License required if image?
if (fileInput.files.length > 0) {
const selectedLicense = document.querySelector('input[name="license"]:checked');
if (!selectedLicense) return showError('Bitte wähle eine Creative-Commons-Lizenz für das Bild.');
}
// Build payload
const audiences = Array.from(document.querySelectorAll('input[name="audience"]:checked')).map(cb => cb.value);
const hashtagsRaw = document.getElementById('hashtags').value.trim();
const hashtags = hashtagsRaw ? hashtagsRaw.split(',').map(t => t.trim().toLowerCase()).filter(Boolean) : [];
const payload = {
token: token,
email: document.getElementById('email').value.trim(),
title: title,
summary: summaryEditor ? summaryEditor.value() : document.getElementById('summary').value,
content: contentEditor ? contentEditor.value() : document.getElementById('content').value,
startTimestamp: startTs,
endTimestamp: endTs,
location: customZoom.checked ? document.getElementById('customUrl').value.trim() : 'https://relilab.org/live/',
audiences: audiences,
hashtags: hashtags,
imageCredit: document.getElementById('imageCredit').value.trim(),
license: fileInput.files.length > 0 ? document.querySelector('input[name="license"]:checked')?.value || '' : '',
};
// Build FormData (for image upload)
const formData = new FormData();
formData.append('data', JSON.stringify(payload));
if (fileInput.files.length > 0) {
formData.append('image', fileInput.files[0]);
}
// Submit
submitBtn.disabled = true;
submitBtn.classList.add('loading');
try {
const res = await fetch(WEBHOOK_URL, {
method: 'POST',
body: formData,
});
const result = await res.json();
if (res.ok && result.success) {
showSuccess('Session erfolgreich veröffentlicht! 🎉' + (result.eventId ? '<br><small>Event-ID: ' + result.eventId.substring(0, 16) + '…</small>' : ''));
form.reset();
summaryEditor && summaryEditor.value('');
contentEditor && contentEditor.value('');
filePreview.style.display = 'none';
fileDrop.classList.remove('has-file');
imageMetaFields.style.display = 'none';
customUrlField.classList.remove('visible');
document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
document.querySelectorAll('.license-option').forEach(o => o.classList.remove('selected'));
endManuallyEdited = false;
} else {
showError(result.error || 'Fehler beim Veröffentlichen. Bitte versuche es erneut.');
}
} catch (err) {
showError('Verbindungsfehler: ' + err.message);
} finally {
submitBtn.disabled = false;
submitBtn.classList.remove('loading');
}
});
function showError(msg) {
statusMsg.className = 'status-msg error';
statusMsg.innerHTML = msg;
statusMsg.style.display = 'block';
statusMsg.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
function showSuccess(msg) {
statusMsg.className = 'status-msg success';
statusMsg.innerHTML = msg;
statusMsg.style.display = 'block';
statusMsg.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}); // end DOMContentLoaded
</script>
</body>
</html>