f09b5e7c48
- Speicherort hängt vom Server-Betreiber ab, nicht hardcoded "Schweiz" - Home Assistant-Anbindung erwähnt mit Hinweis auf Datenaustausch - Trademark-Hinweis: Home Assistant ist eingetragene Marke der Home Assistant Foundation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
906 lines
49 KiB
HTML
906 lines
49 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
|
<!-- APP_VERSION: update here + version.js on every release -->
|
|
<title>Calendarr v11</title>
|
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<meta name="theme-color" content="#4285f4" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="Calendarr" />
|
|
<link rel="apple-touch-icon" href="/icons/icon-192.png" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css" />
|
|
<link rel="stylesheet" href="/static/css/app.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ─── SETUP SCREEN ─────────────────────────────────────── -->
|
|
<div id="screen-setup" class="auth-screen hidden">
|
|
<div class="auth-card">
|
|
<div class="auth-logo">
|
|
<svg class="logo-icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
|
<h1>Calendarr</h1>
|
|
</div>
|
|
<h2>Ersteinrichtung</h2>
|
|
<p class="auth-sub">Erstelle den Administrator-Account</p>
|
|
<form id="setup-form">
|
|
<div class="form-group">
|
|
<label>Benutzername</label>
|
|
<input type="text" id="setup-username" required autocomplete="username" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>E-Mail (optional)</label>
|
|
<input type="email" id="setup-email" autocomplete="email" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Passwort</label>
|
|
<input type="password" id="setup-password" required autocomplete="new-password" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Passwort wiederholen</label>
|
|
<input type="password" id="setup-password2" required autocomplete="new-password" />
|
|
</div>
|
|
<div id="setup-error" class="form-error hidden"></div>
|
|
<button type="submit" class="btn btn-primary btn-full">Admin-Account erstellen</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ─── LOGIN SCREEN ─────────────────────────────────────── -->
|
|
<div id="screen-login" class="auth-screen hidden">
|
|
<div class="auth-card">
|
|
<div class="auth-logo">
|
|
<svg class="logo-icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
|
<div>
|
|
<h1>Calendarr</h1>
|
|
<p class="auth-tagline">das minimalistische Kalender Frontend</p>
|
|
</div>
|
|
</div>
|
|
<h2>Anmelden</h2>
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label>Benutzername</label>
|
|
<input type="text" id="login-username" required autocomplete="username" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Passwort</label>
|
|
<input type="password" id="login-password" required autocomplete="current-password" />
|
|
</div>
|
|
<div class="form-group hidden" id="login-totp-row">
|
|
<label>2FA-Code</label>
|
|
<input type="text" id="login-totp" placeholder="6-stelliger Code" maxlength="6" inputmode="numeric" autocomplete="one-time-code" />
|
|
</div>
|
|
<label class="toggle-label" style="margin-bottom:14px">
|
|
<input type="checkbox" id="login-remember" /> Angemeldet bleiben
|
|
</label>
|
|
<div id="login-error" class="form-error hidden"></div>
|
|
<button type="submit" class="btn btn-primary btn-full">Anmelden</button>
|
|
</form>
|
|
</div>
|
|
<button class="impressum-link" onclick="openImpressum()">© 2026 Scarriffleservices · v11</button>
|
|
</div>
|
|
|
|
<!-- ─── MAIN APP ──────────────────────────────────────────── -->
|
|
<div id="app" class="hidden">
|
|
|
|
<!-- TOP BAR -->
|
|
<header class="topbar">
|
|
<div class="topbar-left">
|
|
<button class="icon-btn" id="sidebar-toggle" title="Seitenleiste">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
|
|
</button>
|
|
<div class="topbar-logo">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
|
<span class="logo-text">Calendarr</span>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-center">
|
|
<button class="btn btn-ghost" id="btn-today" data-i18n="btn_today">Heute</button>
|
|
<button class="icon-btn" id="btn-prev">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
|
|
</button>
|
|
<button class="icon-btn" id="btn-next">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
|
</button>
|
|
<h2 id="view-title" class="view-title"></h2>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<div class="view-switcher">
|
|
<button class="view-btn" data-view="quarter" data-i18n="view_quarter">Quartal</button>
|
|
<button class="view-btn" data-view="month" data-i18n="view_month">Monat</button>
|
|
<button class="view-btn" data-view="week" data-i18n="view_week">Woche</button>
|
|
<button class="view-btn" data-view="day" data-i18n="view_day">Tag</button>
|
|
<button class="view-btn" data-view="agenda" data-i18n="view_agenda">Termine</button>
|
|
</div>
|
|
<div class="view-mobile-wrapper">
|
|
<button class="icon-btn" id="btn-view-mobile" title="Ansicht wechseln" aria-label="Ansicht wechseln">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>
|
|
</button>
|
|
<div id="view-mobile-dropdown" class="user-dropdown hidden" style="right:0;top:50px;min-width:180px">
|
|
<button class="dropdown-item" data-mobile-view="quarter" data-i18n="view_quarter">Quartal</button>
|
|
<button class="dropdown-item" data-mobile-view="month" data-i18n="view_month">Monat</button>
|
|
<button class="dropdown-item" data-mobile-view="week" data-i18n="view_week">Woche</button>
|
|
<button class="dropdown-item" data-mobile-view="day" data-i18n="view_day">Tag</button>
|
|
<button class="dropdown-item" data-mobile-view="agenda" data-i18n="view_agenda">Termine</button>
|
|
<button class="dropdown-item" id="btn-today-mobile" style="border-top:1px solid var(--border)" data-i18n="btn_today">Heute</button>
|
|
</div>
|
|
</div>
|
|
<button class="icon-btn" id="btn-settings" data-i18n-title="settings_title" title="Einstellungen">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
|
|
</button>
|
|
<div class="user-menu-wrapper">
|
|
<div class="user-avatar" id="user-avatar" title="Benutzer"></div>
|
|
<div class="user-dropdown hidden" id="user-dropdown">
|
|
<div class="dropdown-user" id="dropdown-username"></div>
|
|
<button class="dropdown-item" id="btn-profile">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
|
|
<span data-i18n="btn_profile">Profil</span>
|
|
</button>
|
|
<button class="dropdown-item dropdown-item-mobile-only" id="btn-settings-from-user">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
|
|
<span data-i18n="settings_title">Einstellungen</span>
|
|
</button>
|
|
<button class="dropdown-item" id="btn-logout">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>
|
|
<span data-i18n="btn_logout">Abmelden</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- CONTENT -->
|
|
<div class="content-wrapper">
|
|
|
|
<!-- SIDEBAR -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-inner">
|
|
<button class="btn btn-fab" id="btn-create-event">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
|
<span data-i18n="btn_create">Erstellen</span>
|
|
</button>
|
|
|
|
<!-- Mini Calendar -->
|
|
<div class="mini-cal" id="mini-cal">
|
|
<div class="mini-cal-header">
|
|
<button class="icon-btn mini-btn" id="mini-prev">‹</button>
|
|
<span id="mini-title" class="mini-title"></span>
|
|
<button class="icon-btn mini-btn" id="mini-next">›</button>
|
|
</div>
|
|
<div class="mini-cal-grid">
|
|
<div class="mini-dow">Mo</div><div class="mini-dow">Di</div>
|
|
<div class="mini-dow">Mi</div><div class="mini-dow">Do</div>
|
|
<div class="mini-dow">Fr</div><div class="mini-dow">Sa</div>
|
|
<div class="mini-dow">So</div>
|
|
</div>
|
|
<div class="mini-cal-days" id="mini-days"></div>
|
|
</div>
|
|
|
|
<!-- Calendar List -->
|
|
<div class="cal-list" id="cal-list">
|
|
<div class="cal-list-header">
|
|
<span data-i18n="my_calendars">Meine Kalender</span>
|
|
<div class="add-cal-dropdown-wrap">
|
|
<button class="icon-btn mini-btn" id="btn-add-cal" title="Kalender hinzufügen">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v11h-2v-6H5v-2h6V5h2v11h6v2z"/></svg>
|
|
</button>
|
|
<div class="add-cal-dropdown hidden" id="add-cal-dropdown">
|
|
<button data-action="local">Lokaler Kalender</button>
|
|
<button data-action="caldav">CalDAV-Konto</button>
|
|
<button data-action="ical">iCal-URL abonnieren</button>
|
|
<button data-action="google">Google Kalender</button>
|
|
<button data-action="homeassistant">Home Assistant</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="cal-list-items"></div>
|
|
</div>
|
|
</div>
|
|
<button class="sidebar-copyright" onclick="openImpressum()">© 2026 Scarriffleservices · v11</button>
|
|
</aside>
|
|
<div id="sidebar-backdrop" class="sidebar-backdrop"></div>
|
|
|
|
<!-- MAIN VIEW -->
|
|
<main class="main-view" id="main-view">
|
|
<div id="view-container"></div>
|
|
</main>
|
|
|
|
</div><!-- content-wrapper -->
|
|
</div><!-- app -->
|
|
|
|
<!-- ─── MODALS ────────────────────────────────────────────── -->
|
|
|
|
<!-- Event Modal -->
|
|
<div id="modal-event" class="modal-overlay hidden">
|
|
<div class="modal-card" style="max-width:520px">
|
|
<div class="modal-header">
|
|
<h3 id="modal-event-title-label">Termin erstellen</h3>
|
|
<button class="icon-btn modal-close" data-modal="modal-event">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<input type="text" id="ev-title" placeholder="Titel hinzufügen" class="input-title" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" id="ev-allday" /> Ganztägig
|
|
</label>
|
|
</div>
|
|
<div class="form-row" id="ev-time-row">
|
|
<div class="form-group half">
|
|
<label>Start</label>
|
|
<input type="hidden" id="ev-start" />
|
|
<div class="dt-display" id="ev-start-display" tabindex="0" role="button">
|
|
<span class="dt-display-text">—</span>
|
|
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v11H7z"/></svg>
|
|
</div>
|
|
</div>
|
|
<div class="form-group half">
|
|
<label>Ende</label>
|
|
<input type="hidden" id="ev-end" />
|
|
<div class="dt-display" id="ev-end-display" tabindex="0" role="button">
|
|
<span class="dt-display-text">—</span>
|
|
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v11H7z"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-row" id="ev-date-row" style="display:none">
|
|
<div class="form-group half">
|
|
<label>Start</label>
|
|
<input type="hidden" id="ev-start-date" />
|
|
<div class="dt-display" id="ev-start-date-display" tabindex="0" role="button">
|
|
<span class="dt-display-text">—</span>
|
|
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v11H7z"/></svg>
|
|
</div>
|
|
</div>
|
|
<div class="form-group half">
|
|
<label>Ende</label>
|
|
<input type="hidden" id="ev-end-date" />
|
|
<div class="dt-display" id="ev-end-date-display" tabindex="0" role="button">
|
|
<span class="dt-display-text">—</span>
|
|
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v11H7z"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label id="ev-rec-label">Wiederholung</label>
|
|
<select id="ev-recurrence">
|
|
<option value="">Keine</option>
|
|
<option value="FREQ=DAILY">Täglich</option>
|
|
<option value="FREQ=WEEKLY">Wöchentlich</option>
|
|
<option value="FREQ=MONTHLY">Monatlich</option>
|
|
<option value="FREQ=YEARLY">Jährlich</option>
|
|
<option value="custom">Benutzerdefiniert…</option>
|
|
</select>
|
|
</div>
|
|
<div id="ev-recurrence-custom" class="form-group hidden">
|
|
<div class="form-row" style="gap:8px;align-items:center">
|
|
<label style="white-space:nowrap" id="ev-rec-every-label">Alle</label>
|
|
<input type="number" id="ev-rec-interval" value="1" min="1" max="99" style="width:60px" />
|
|
<select id="ev-rec-freq">
|
|
<option value="DAILY">Tage</option>
|
|
<option value="WEEKLY">Wochen</option>
|
|
<option value="MONTHLY">Monate</option>
|
|
</select>
|
|
</div>
|
|
<div id="ev-rec-weekdays" class="rec-weekdays hidden">
|
|
<button type="button" class="rec-day-btn" data-day="MO">Mo</button>
|
|
<button type="button" class="rec-day-btn" data-day="TU">Di</button>
|
|
<button type="button" class="rec-day-btn" data-day="WE">Mi</button>
|
|
<button type="button" class="rec-day-btn" data-day="TH">Do</button>
|
|
<button type="button" class="rec-day-btn" data-day="FR">Fr</button>
|
|
<button type="button" class="rec-day-btn" data-day="SA">Sa</button>
|
|
<button type="button" class="rec-day-btn" data-day="SU">So</button>
|
|
</div>
|
|
<div class="form-row" style="gap:8px;align-items:center;margin-top:8px">
|
|
<label id="ev-rec-ends-label">Endet</label>
|
|
<select id="ev-rec-end-type">
|
|
<option value="never">Nie</option>
|
|
<option value="count">Nach Anzahl</option>
|
|
<option value="until">Am Datum</option>
|
|
</select>
|
|
</div>
|
|
<div id="ev-rec-end-count" class="hidden" style="margin-top:4px">
|
|
<input type="number" id="ev-rec-count" value="10" min="1" max="999" style="width:80px" />
|
|
<span id="ev-rec-occ-label"> Termine</span>
|
|
</div>
|
|
<div id="ev-rec-end-until" class="hidden" style="margin-top:4px">
|
|
<input type="hidden" id="ev-rec-until" />
|
|
<div class="dt-display" id="ev-rec-until-display" tabindex="0" role="button">
|
|
<span class="dt-display-text">—</span>
|
|
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v11H7z"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Kalender</label>
|
|
<select id="ev-calendar"></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Ort</label>
|
|
<input type="text" id="ev-location" placeholder="Ort hinzufügen" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Beschreibung</label>
|
|
<textarea id="ev-description" placeholder="Beschreibung hinzufügen" rows="3"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Farbe</label>
|
|
<div class="ev-color-row">
|
|
<input type="text" id="ev-color-hex" class="ev-color-hex" maxlength="7" placeholder="#4285f4" spellcheck="false" />
|
|
<div class="ev-color-preview" id="ev-color-preview" title="Farbe wählen"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-danger hidden" id="ev-delete">Löschen</button>
|
|
<div style="flex:1"></div>
|
|
<button class="btn btn-ghost" data-modal="modal-event">Abbrechen</button>
|
|
<button class="btn btn-primary" id="ev-save">Speichern</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirm Modal -->
|
|
<div id="modal-delete-confirm" class="modal-overlay hidden">
|
|
<div class="modal-card" style="max-width:400px">
|
|
<div class="modal-header">
|
|
<h3 id="delete-confirm-title">Termin löschen</h3>
|
|
<button class="icon-btn modal-close" data-modal="modal-delete-confirm">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="delete-confirm-text"></p>
|
|
<div id="delete-series-options" class="hidden" style="margin-top:12px">
|
|
<label class="toggle-label" style="display:block;margin-bottom:8px">
|
|
<input type="radio" name="delete-scope" value="single" checked /> Nur diesen Termin
|
|
</label>
|
|
<label class="toggle-label" style="display:block">
|
|
<input type="radio" name="delete-scope" value="all" /> Alle Serienelemente
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div style="flex:1"></div>
|
|
<button class="btn btn-ghost" data-modal="modal-delete-confirm">Abbrechen</button>
|
|
<button class="btn btn-danger" id="delete-confirm-ok">Löschen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Event Detail Popup -->
|
|
<div id="popup-event" class="event-popup hidden">
|
|
<div class="popup-header">
|
|
<div class="popup-color-dot" id="popup-color-dot"></div>
|
|
<h4 id="popup-title"></h4>
|
|
<button class="icon-btn popup-action" id="popup-edit" title="Bearbeiten">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
|
</button>
|
|
<button class="icon-btn popup-action" id="popup-copy" title="Kopieren nach…">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 1H4c-1.1 0-2 .9-2 2v24h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v24z"/></svg>
|
|
</button>
|
|
<button class="icon-btn popup-action" id="popup-delete" title="Löschen">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v22zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
|
|
</button>
|
|
<button class="icon-btn popup-close" id="popup-close">×</button>
|
|
</div>
|
|
<div class="popup-body">
|
|
<div class="popup-time" id="popup-time"></div>
|
|
<div class="popup-location" id="popup-location"></div>
|
|
<div class="popup-description" id="popup-description"></div>
|
|
<div class="popup-calendar" id="popup-calendar"></div>
|
|
</div>
|
|
<div id="popup-copy-menu" class="popup-copy-menu hidden"></div>
|
|
</div>
|
|
|
|
<!-- Add CalDAV Account Modal -->
|
|
<div id="modal-account" class="modal-overlay hidden">
|
|
<div class="modal-card" style="max-width:480px">
|
|
<div class="modal-header">
|
|
<h3>CalDAV-Konto hinzufügen</h3>
|
|
<button class="icon-btn modal-close" data-modal="modal-account">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Anzeigename</label>
|
|
<input type="text" id="acc-name" placeholder="z.B. Mein Nextcloud" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>CalDAV-URL</label>
|
|
<input type="url" id="acc-url" placeholder="https://cloud.example.com/remote.php/dav" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Benutzername</label>
|
|
<input type="text" id="acc-username" autocomplete="username" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Passwort</label>
|
|
<input type="password" id="acc-password" autocomplete="current-password" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Farbe</label>
|
|
<div class="ev-color-row">
|
|
<input type="text" id="acc-color-hex" class="ev-color-hex" maxlength="7" value="#4285f4" spellcheck="false" />
|
|
<div class="ev-color-preview" id="acc-color-preview" style="background:#4285f4" title="Farbe wählen"></div>
|
|
</div>
|
|
</div>
|
|
<div id="acc-error" class="form-error hidden"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-ghost" data-modal="modal-account">Abbrechen</button>
|
|
<button class="btn btn-primary" id="acc-save">Verbinden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Local Calendar Modal -->
|
|
<div id="modal-local-cal" class="modal-overlay hidden">
|
|
<div class="modal-card" style="max-width:400px">
|
|
<div class="modal-header">
|
|
<h3>Lokalen Kalender erstellen</h3>
|
|
<button class="icon-btn modal-close" data-modal="modal-local-cal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" id="local-cal-name" placeholder="z.B. Persönlich" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Farbe</label>
|
|
<div class="ev-color-row">
|
|
<input type="text" id="local-cal-color-hex" class="ev-color-hex" maxlength="7" value="#34a853" spellcheck="false" />
|
|
<div class="ev-color-preview" id="local-cal-color-preview" style="background:#34a853" title="Farbe wählen"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-ghost" data-modal="modal-local-cal">Abbrechen</button>
|
|
<button class="btn btn-primary" id="local-cal-save">Erstellen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- iCal Subscription Modal -->
|
|
<div id="modal-ical-sub" class="modal-overlay hidden">
|
|
<div class="modal-card" style="max-width:480px">
|
|
<div class="modal-header">
|
|
<h3>iCal-URL abonnieren</h3>
|
|
<button class="icon-btn modal-close" data-modal="modal-ical-sub">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" id="ical-sub-name" placeholder="z.B. Feiertage" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>iCal-URL</label>
|
|
<input type="url" id="ical-sub-url" placeholder="https://example.com/calendar.ics" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Farbe</label>
|
|
<div class="ev-color-row">
|
|
<input type="text" id="ical-sub-color-hex" class="ev-color-hex" maxlength="7" value="#46bdc6" spellcheck="false" />
|
|
<div class="ev-color-preview" id="ical-sub-color-preview" style="background:#46bdc6" title="Farbe wählen"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Aktualisierung</label>
|
|
<select id="ical-sub-refresh">
|
|
<option value="15">Alle 15 Minuten</option>
|
|
<option value="30">Alle 30 Minuten</option>
|
|
<option value="60" selected>Stündlich</option>
|
|
<option value="360">Alle 6 Stunden</option>
|
|
<option value="1440">Täglich</option>
|
|
</select>
|
|
</div>
|
|
<div id="ical-sub-error" class="form-error hidden"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-ghost" data-modal="modal-ical-sub">Abbrechen</button>
|
|
<button class="btn btn-primary" id="ical-sub-save">Abonnieren</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Home Assistant Account Modal -->
|
|
<div id="modal-ha-account" class="modal-overlay hidden">
|
|
<div class="modal-card" style="max-width:480px">
|
|
<div class="modal-header">
|
|
<h3>Home Assistant verbinden</h3>
|
|
<button class="icon-btn modal-close" data-modal="modal-ha-account">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Anzeigename</label>
|
|
<input type="text" id="ha-account-name" placeholder="z.B. Mein Home Assistant" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Home Assistant URL</label>
|
|
<input type="url" id="ha-account-url" placeholder="http://homeassistant.local:8123" />
|
|
</div>
|
|
<div style="margin-bottom:16px">
|
|
<div style="font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--text-2);margin-bottom:8px">Anmeldemethode</div>
|
|
<div style="display:flex;gap:20px">
|
|
<label style="display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text-1);font-size:14px">
|
|
<input type="radio" name="ha-auth-method" value="oauth" id="ha-auth-oauth" checked style="width:auto;accent-color:var(--primary)" /> Mit Home Assistant anmelden
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text-1);font-size:14px">
|
|
<input type="radio" name="ha-auth-method" value="token" id="ha-auth-token" style="width:auto;accent-color:var(--primary)" /> Long-Lived Token
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div id="ha-oauth-info" style="margin-bottom:16px;padding:10px 12px;background:var(--bg-app);border-radius:var(--radius-sm);font-size:13px;color:var(--text-2);line-height:1.5">
|
|
Du wirst zur Login-Seite deiner Home Assistant Instanz weitergeleitet und nach erfolgreichem Login wieder zurück zu Calendarr.
|
|
</div>
|
|
<div class="form-group hidden" id="ha-token-group">
|
|
<label>Long-Lived Access Token</label>
|
|
<input type="password" id="ha-account-token" placeholder="Token aus Profil → Sicherheit" autocomplete="off" />
|
|
</div>
|
|
<div id="ha-account-error" class="form-error hidden"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-ghost" data-modal="modal-ha-account">Abbrechen</button>
|
|
<button class="btn btn-primary" id="ha-account-save">Mit Home Assistant anmelden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Page -->
|
|
<div id="modal-settings" class="modal-overlay hidden">
|
|
<div class="settings-page-card">
|
|
<div class="settings-page-header">
|
|
<button class="icon-btn modal-close" data-modal="modal-settings" style="margin-right:8px">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
|
|
</button>
|
|
<button class="icon-btn settings-nav-toggle" id="settings-nav-toggle" title="Menü" aria-label="Menü">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
|
|
</button>
|
|
<h3 data-i18n="settings_title">Einstellungen</h3>
|
|
<button class="btn btn-primary" id="settings-save" style="margin-left:auto" data-i18n="save">Speichern</button>
|
|
</div>
|
|
<div class="settings-page-body">
|
|
<div class="settings-nav-backdrop" id="settings-nav-backdrop"></div>
|
|
<nav class="settings-nav">
|
|
<button class="settings-nav-btn active" data-panel="general" data-i18n="settings_nav_appearance">Darstellung</button>
|
|
<button class="settings-nav-btn" data-panel="accounts" data-i18n="settings_nav_accounts">Konten</button>
|
|
<button class="settings-nav-btn hidden" data-panel="users" id="settings-nav-users" data-i18n="settings_nav_users">Benutzerverwaltung</button>
|
|
</nav>
|
|
|
|
<div class="settings-panels">
|
|
|
|
<!-- Einstellungen (merged: Darstellung + Ansicht & Raster + Ausgeblendete Kalender) -->
|
|
<div class="settings-panel active" id="settings-panel-general">
|
|
|
|
<h4 class="panel-title" data-i18n="settings_language">Sprache</h4>
|
|
<div class="form-group">
|
|
<select id="cfg-language">
|
|
<option value="de">Deutsch</option>
|
|
<option value="en">English</option>
|
|
</select>
|
|
</div>
|
|
|
|
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_colors">Farben</h4>
|
|
<div class="form-group">
|
|
<label data-i18n="settings_primary_color">Primärfarbe</label>
|
|
<div class="ev-color-row">
|
|
<input type="text" id="cfg-primary-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
|
|
<div class="ev-color-preview" id="cfg-primary-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label data-i18n="settings_accent_color">Akzentfarbe</label>
|
|
<div class="ev-color-row">
|
|
<input type="text" id="cfg-accent-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
|
|
<div class="ev-color-preview" id="cfg-accent-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label data-i18n="settings_today_color">Heutige-Tag-Farbe</label>
|
|
<div class="ev-color-row">
|
|
<input type="text" id="cfg-today-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
|
|
<div class="ev-color-preview" id="cfg-today-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label data-i18n="settings_month_divider_color">Monatswechsel-Linie</label>
|
|
<div class="ev-color-row">
|
|
<input type="text" id="cfg-month-divider-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
|
|
<div class="ev-color-preview" id="cfg-month-divider-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label data-i18n="settings_month_label_color">Monatskürzel</label>
|
|
<div class="ev-color-row">
|
|
<input type="text" id="cfg-month-label-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
|
|
<div class="ev-color-preview" id="cfg-month-label-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_text_contrast">Schriftkontrast</h4>
|
|
<p class="panel-desc" data-i18n="settings_text_contrast_desc">Helligkeit der Beschriftungen und Texte</p>
|
|
<div class="contrast-selector" id="cfg-text-contrast" data-setting="text_contrast">
|
|
<button class="contrast-btn" data-val="1"><span style="color:#606070">Aa</span><span class="contrast-lbl" data-i18n="contrast_dark">Dunkel</span></button>
|
|
<button class="contrast-btn" data-val="2"><span style="color:#9090a8">Aa</span><span class="contrast-lbl" data-i18n="contrast_medium">Mittel</span></button>
|
|
<button class="contrast-btn" data-val="3"><span style="color:#c8c8d8">Aa</span><span class="contrast-lbl" data-i18n="contrast_light">Hell</span></button>
|
|
<button class="contrast-btn" data-val="4"><span style="color:#ffffff">Aa</span><span class="contrast-lbl" data-i18n="contrast_max">Maximum</span></button>
|
|
</div>
|
|
|
|
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_line_contrast">Linienkontrast</h4>
|
|
<p class="panel-desc" data-i18n="settings_line_contrast_desc">Sichtbarkeit von Trennlinien und Rahmen</p>
|
|
<div class="contrast-selector" id="cfg-line-contrast" data-setting="line_contrast">
|
|
<button class="contrast-btn" data-val="1"><span class="line-preview" style="border-color:#1e1e2c"></span><span class="contrast-lbl" data-i18n="line_barely">Kaum</span></button>
|
|
<button class="contrast-btn" data-val="2"><span class="line-preview" style="border-color:#2a2a3c"></span><span class="contrast-lbl" data-i18n="line_subtle">Subtil</span></button>
|
|
<button class="contrast-btn" data-val="3"><span class="line-preview" style="border-color:#3a3a52"></span><span class="contrast-lbl" data-i18n="line_normal">Normal</span></button>
|
|
<button class="contrast-btn" data-val="4"><span class="line-preview" style="border-color:#5a5a78"></span><span class="contrast-lbl" data-i18n="line_strong">Stark</span></button>
|
|
</div>
|
|
|
|
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_calendar_view">Kalenderansicht</h4>
|
|
<div class="form-group">
|
|
<label data-i18n="settings_default_view">Standardansicht</label>
|
|
<select id="cfg-default-view">
|
|
<option value="month" data-i18n="view_month">Monat</option>
|
|
<option value="week" data-i18n="view_week">Woche</option>
|
|
<option value="day" data-i18n="view_day">Tag</option>
|
|
<option value="quarter" data-i18n="view_quarter">Quartal</option>
|
|
<option value="agenda" data-i18n="view_agenda">Termine</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label data-i18n="settings_week_start">Erster Wochentag</label>
|
|
<select id="cfg-week-start">
|
|
<option value="monday" data-i18n="week_start_monday">Montag</option>
|
|
<option value="sunday" data-i18n="week_start_sunday">Sonntag</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" id="cfg-dim-past" />
|
|
<span data-i18n="settings_dim_past">Vergangene Termine ausgrauen</span>
|
|
</label>
|
|
</div>
|
|
|
|
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_hour_height">Stundenhöhe (Wochen- & Tagesansicht)</h4>
|
|
<p class="panel-desc" data-i18n="settings_hour_height_desc">Wie viel Platz eine Stunde in der Zeitrasteransicht einnimmt</p>
|
|
<div class="contrast-selector" id="cfg-hour-height" data-setting="hour_height">
|
|
<button class="contrast-btn" data-val="28"><span class="hour-preview">━━</span><span class="contrast-lbl" data-i18n="hour_compact">Kompakt</span></button>
|
|
<button class="contrast-btn" data-val="44"><span class="hour-preview">━━━</span><span class="contrast-lbl" data-i18n="hour_normal">Normal</span></button>
|
|
<button class="contrast-btn" data-val="60"><span class="hour-preview">━━━━</span><span class="contrast-lbl" data-i18n="hour_comfort">Komfort</span></button>
|
|
<button class="contrast-btn" data-val="80"><span class="hour-preview">━━━━━</span><span class="contrast-lbl" data-i18n="hour_large">Gross</span></button>
|
|
</div>
|
|
|
|
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_hidden_cals">Ausgeblendete Kalender</h4>
|
|
<div id="hidden-cals-list"><span style="font-size:13px;color:var(--text-3)" data-i18n="settings_no_hidden_cals">Keine ausgeblendeten Kalender</span></div>
|
|
</div>
|
|
|
|
<!-- Konten (CalDAV, Lokal, iCal, Google) -->
|
|
<div class="settings-panel" id="settings-panel-accounts">
|
|
<h4 class="panel-title" data-i18n="settings_nav_accounts">Konten</h4>
|
|
|
|
<div class="accounts-section">
|
|
<div class="accounts-section-heading" data-i18n="settings_accounts_caldav">CalDAV-Konten</div>
|
|
<div id="accounts-caldav-list"><span class="accounts-section-empty" data-i18n="settings_no_caldav_accounts">Keine CalDAV-Konten</span></div>
|
|
</div>
|
|
|
|
<div class="accounts-section">
|
|
<div class="accounts-section-heading" data-i18n="settings_accounts_local">Lokale Kalender</div>
|
|
<div id="accounts-local-list"><span class="accounts-section-empty" data-i18n="settings_no_local_cals">Keine lokalen Kalender</span></div>
|
|
</div>
|
|
|
|
<div class="accounts-section">
|
|
<div class="accounts-section-heading" data-i18n="settings_accounts_ical">iCal-Abonnements</div>
|
|
<div id="accounts-ical-list"><span class="accounts-section-empty" data-i18n="settings_no_ical_subs">Keine Abonnements</span></div>
|
|
</div>
|
|
|
|
<div class="accounts-section">
|
|
<div class="accounts-section-heading" data-i18n="settings_accounts_google">Google-Konten</div>
|
|
<div id="google-accounts-list"><span class="accounts-section-empty" data-i18n="settings_no_google_accounts">Keine Google-Konten</span></div>
|
|
</div>
|
|
|
|
<div class="accounts-section">
|
|
<div class="accounts-section-heading">Home Assistant</div>
|
|
<div id="accounts-ha-list"><span class="accounts-section-empty">Keine HA-Konten</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Benutzerverwaltung -->
|
|
<div class="settings-panel" id="settings-panel-users">
|
|
<h4 class="panel-title"><span data-i18n="settings_nav_users">Benutzerverwaltung</span> <span class="badge-admin">Admin</span></h4>
|
|
<div id="users-list"></div>
|
|
<button class="btn btn-secondary" id="btn-add-user" style="margin-top:12px" data-i18n="users_add">Benutzer hinzufügen</button>
|
|
<div id="add-user-form" class="hidden" style="margin-top:12px">
|
|
<div class="form-group">
|
|
<label data-i18n="username">Benutzername</label>
|
|
<input type="text" id="new-username" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Passwort</label>
|
|
<input type="password" id="new-password" />
|
|
</div>
|
|
<label class="toggle-label" style="margin-bottom:8px">
|
|
<input type="checkbox" id="new-is-admin" /> Administrator
|
|
</label>
|
|
<button class="btn btn-primary" id="new-user-save">Erstellen</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- settings-panels -->
|
|
</div><!-- settings-page-body -->
|
|
</div><!-- settings-page-card -->
|
|
</div>
|
|
|
|
<!-- Profile Modal -->
|
|
<div id="modal-profile" class="modal-overlay hidden">
|
|
<div class="modal-card" style="max-width:540px">
|
|
<div class="modal-header">
|
|
<h3>Profil</h3>
|
|
<button class="icon-btn modal-close" data-modal="modal-profile">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
|
|
<!-- Avatar Section -->
|
|
<div class="profile-avatar-section">
|
|
<div class="profile-avatar" id="profile-avatar">
|
|
<span id="profile-avatar-letter"></span>
|
|
<img id="profile-avatar-img" class="hidden" />
|
|
</div>
|
|
<div class="profile-avatar-actions">
|
|
<button class="btn btn-secondary btn-sm" id="profile-avatar-upload">Bild hochladen</button>
|
|
<button class="btn btn-ghost btn-sm hidden" id="profile-avatar-remove">Entfernen</button>
|
|
<input type="file" id="profile-avatar-input" accept="image/jpeg,image/png,image/webp" class="hidden" />
|
|
<div class="profile-username" id="profile-display-name"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Info -->
|
|
<div class="settings-section">
|
|
<h4>Konto</h4>
|
|
<div class="form-group">
|
|
<label>Benutzername</label>
|
|
<input type="text" id="profile-username" disabled class="input-disabled" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>E-Mail</label>
|
|
<input type="email" id="profile-email" placeholder="Keine E-Mail hinterlegt" />
|
|
</div>
|
|
<button class="btn btn-primary btn-sm" id="profile-save-info">Speichern</button>
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="settings-section">
|
|
<h4>Passwort ändern</h4>
|
|
<div class="form-group">
|
|
<label>Aktuelles Passwort</label>
|
|
<input type="password" id="profile-pw-current" autocomplete="current-password" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Neues Passwort</label>
|
|
<input type="password" id="profile-pw-new" autocomplete="new-password" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Neues Passwort wiederholen</label>
|
|
<input type="password" id="profile-pw-confirm" autocomplete="new-password" />
|
|
</div>
|
|
<button class="btn btn-primary btn-sm" id="profile-pw-save">Passwort ändern</button>
|
|
</div>
|
|
|
|
<!-- 2FA -->
|
|
<div class="settings-section">
|
|
<h4>Zwei-Faktor-Authentifizierung</h4>
|
|
<div id="2fa-status">
|
|
<div id="2fa-disabled-section">
|
|
<p class="text-muted">2FA ist deaktiviert. Schütze dein Konto mit einem Authenticator.</p>
|
|
<button class="btn btn-primary btn-sm" id="2fa-setup-btn">2FA einrichten</button>
|
|
</div>
|
|
<div id="2fa-setup-section" class="hidden">
|
|
<p class="text-muted">Scanne den QR-Code mit deiner Authenticator-App (z.B. Bitwarden, Google Authenticator).</p>
|
|
<div class="totp-qr-wrapper">
|
|
<img id="2fa-qr-img" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Oder gib diesen Schlüssel manuell ein</label>
|
|
<div class="totp-secret-row">
|
|
<code id="2fa-secret-code"></code>
|
|
<button class="btn btn-ghost btn-sm" id="2fa-copy-secret" title="Kopieren">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M16 1H4c-1.1 0-2 .9-2 2v24h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v24z"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Bestätigungscode eingeben</label>
|
|
<input type="text" id="2fa-verify-code" placeholder="6-stelliger Code" maxlength="6" inputmode="numeric" autocomplete="one-time-code" />
|
|
</div>
|
|
<button class="btn btn-primary btn-sm" id="2fa-enable-btn">Aktivieren</button>
|
|
<button class="btn btn-ghost btn-sm" id="2fa-cancel-btn">Abbrechen</button>
|
|
</div>
|
|
<div id="2fa-enabled-section" class="hidden">
|
|
<p class="text-success">2FA ist aktiviert.</p>
|
|
<div class="form-group">
|
|
<label>Passwort zum Deaktivieren</label>
|
|
<input type="password" id="2fa-disable-pw" autocomplete="current-password" />
|
|
</div>
|
|
<button class="btn btn-danger btn-sm" id="2fa-disable-btn">2FA deaktivieren</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calendars -->
|
|
<div class="settings-section">
|
|
<h4>Meine Kalender</h4>
|
|
<div id="profile-calendars"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-ghost" data-modal="modal-profile">Schließen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Avatar Crop Modal -->
|
|
<div id="modal-crop" class="modal-overlay hidden" style="z-index:1000">
|
|
<div class="modal-card" style="max-width:480px">
|
|
<div class="modal-header">
|
|
<h3>Bildausschnitt wählen</h3>
|
|
<button class="icon-btn modal-close" data-modal="modal-crop">×</button>
|
|
</div>
|
|
<div class="modal-body" style="padding:0">
|
|
<div class="crop-container">
|
|
<img id="crop-image" />
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-ghost" data-modal="modal-crop">Abbrechen</button>
|
|
<button class="btn btn-primary" id="crop-save">Zuschneiden & Hochladen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast -->
|
|
<!-- Floating action button (mobile only — create event) -->
|
|
<button id="btn-create-fab" class="create-fab" title="Termin erstellen" aria-label="Termin erstellen">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="28" height="28"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
|
</button>
|
|
|
|
<div id="toast" class="toast hidden"></div>
|
|
|
|
<!-- Impressum Modal -->
|
|
<div id="modal-impressum" class="modal-overlay hidden" style="z-index:1100" onclick="if(event.target===this)closeImpressum()">
|
|
<div class="modal-card" style="max-width:460px">
|
|
<div class="modal-header">
|
|
<h3>Impressum</h3>
|
|
<button class="icon-btn" style="font-size:20px;line-height:1" onclick="closeImpressum()">×</button>
|
|
</div>
|
|
<div class="modal-body" style="line-height:1.7">
|
|
<p><strong>Scarriffleservices</strong><br>
|
|
Software & Webentwicklung</p>
|
|
<p>Diese Software wurde von Scarriffleservices mit grösster Sorgfalt entwickelt und bereitgestellt. Alle Rechte vorbehalten © 2026 Scarriffleservices.</p>
|
|
<p><strong>Datenspeicherung</strong><br>
|
|
Alle Anwendungsdaten werden auf dem Server gespeichert und verarbeitet, auf dem diese Calendarr-Instanz betrieben wird. Der Speicherort hängt damit vom Betreiber des jeweiligen Servers ab. Bei Nutzung der Google Kalender-Anbindung werden Daten über die Google API ausgetauscht; für diese Daten gelten die Datenschutzbestimmungen von Google. Bei Nutzung der Home Assistant-Anbindung werden Daten mit der jeweiligen Home Assistant-Instanz ausgetauscht. Home Assistant ist eine eingetragene Marke der Home Assistant Foundation.</p>
|
|
<p><strong>Haftungsausschluss</strong><br>
|
|
Trotz sorgfältiger Erstellung wird keine Haftung für die Richtigkeit, Vollständigkeit oder Aktualität der bereitgestellten Inhalte übernommen. Die Nutzung erfolgt auf eigene Verantwortung.</p>
|
|
<p><strong>Kontakt</strong><br>
|
|
<a href="mailto:scarriffleservices@gmail.com">scarriffleservices@gmail.com</a></p>
|
|
</div>
|
|
<div class="modal-footer" style="justify-content:space-between;align-items:center">
|
|
<span style="font-size:12px;color:var(--text-3)">Calendarr v11</span>
|
|
<button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openImpressum() {
|
|
document.getElementById('modal-impressum').classList.remove('hidden');
|
|
}
|
|
function closeImpressum() {
|
|
document.getElementById('modal-impressum').classList.add('hidden');
|
|
}
|
|
</script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
|
|
<script type="module" src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|