9f62eebed6
All checks were successful
Build & Push Friends Image to Gitea Registry / build-and-push (push) Successful in 10s
247 lines
9.6 KiB
HTML
247 lines
9.6 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Misch & Friends</title>
|
|
<meta name="description" content="Voice-first relationship companion for MischLabs and Monica CRM." />
|
|
<meta name="theme-color" content="#070914" />
|
|
<link rel="icon" type="image/png" href="/icons/app-icon-source.png" />
|
|
|
|
<!-- Google 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=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
|
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="shell hero">
|
|
<div class="brand">
|
|
<img class="brand-mark" src="/icons/app-icon-source.png" alt="" width="72" height="72" />
|
|
<div>
|
|
<p class="eyebrow">Voice-first companion</p>
|
|
<h1>Misch & Friends</h1>
|
|
<p class="subtitle">Freundschaften festhalten, ohne Formularwahnsinn.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-meta" aria-label="Status">
|
|
<div class="metric">
|
|
<span class="metric-value">Voice</span>
|
|
<span class="metric-label">Eingabe</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-value" id="apiStatus">Prüfe...</span>
|
|
<span class="metric-label">Monica</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="shell tab-nav">
|
|
<button class="tab-btn is-active" data-tab="dictate" type="button"><i data-lucide="mic"></i> Diktieren</button>
|
|
<button class="tab-btn" data-tab="contact-info" type="button" id="tabBtnContactInfo"><i data-lucide="user"></i> Kontakt-Info</button>
|
|
<button class="tab-btn" data-tab="new-contact" type="button"><i data-lucide="user-plus"></i> Neuer Kontakt</button>
|
|
</nav>
|
|
|
|
<main class="shell">
|
|
<!-- VIEW 1: DIKTIEREN -->
|
|
<div id="view-dictate" class="tab-view is-active">
|
|
<section class="control-bar" aria-label="Neue Erinnerung erfassen">
|
|
<div class="mode-cluster">
|
|
<div class="segments" role="group" aria-label="Modus">
|
|
<button class="segment is-active" data-mode="auto" type="button">Auto</button>
|
|
<button class="segment" data-mode="contact" type="button">Kontakt</button>
|
|
<button class="segment" data-mode="journal" type="button">Tagebuch</button>
|
|
</div>
|
|
</div>
|
|
<button id="voiceButton" class="icon-button voice" type="button">
|
|
<span class="mic-pulse-circle"></span> Aufnehmen
|
|
</button>
|
|
</section>
|
|
|
|
<section class="composer">
|
|
<label class="input-label" for="inputText">Freitext</label>
|
|
<textarea
|
|
id="inputText"
|
|
rows="8"
|
|
placeholder="Beispiel: Ich habe heute Aaron getroffen. Er ist gestresst wegen der Prüfung nächste Woche. Frag ihn am Freitag, wie es lief. War ein guter Abend."
|
|
></textarea>
|
|
|
|
<div class="actions">
|
|
<button id="analyzeButton" class="primary" type="button">Verstehen</button>
|
|
<button id="clearButton" class="ghost" type="button">Leeren</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="review" id="review" hidden>
|
|
<div class="reviewHead">
|
|
<div>
|
|
<p class="section-kicker">Review</p>
|
|
<h2>Das habe ich verstanden</h2>
|
|
</div>
|
|
<label class="toggle">
|
|
<input id="writeToMonica" type="checkbox" />
|
|
<span>Nach Monica schreiben</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<label>
|
|
Kontakt
|
|
<input id="contactSearch" type="search" placeholder="Kontakt suchen..." />
|
|
<select id="contactSelect"></select>
|
|
</label>
|
|
|
|
<label>
|
|
Typ
|
|
<select id="typeSelect">
|
|
<option value="contact">Kontakt</option>
|
|
<option value="journal">Tagebuch</option>
|
|
<option value="mixed">Gemischt</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<label>
|
|
Zusammenfassung
|
|
<input id="summaryInput" type="text" />
|
|
</label>
|
|
|
|
<div class="cards">
|
|
<article class="panel">
|
|
<div class="panelTitle">
|
|
<label class="toggle">
|
|
<input id="noteEnabled" type="checkbox" />
|
|
<span>Kontakt-Notiz</span>
|
|
</label>
|
|
</div>
|
|
<textarea id="noteBody" rows="7"></textarea>
|
|
</article>
|
|
|
|
<article class="panel">
|
|
<div class="panelTitle">
|
|
<label class="toggle">
|
|
<input id="journalEnabled" type="checkbox" />
|
|
<span>Tagebuch</span>
|
|
</label>
|
|
</div>
|
|
<input id="journalTitle" type="text" placeholder="Titel" />
|
|
<textarea id="journalPost" rows="6"></textarea>
|
|
</article>
|
|
</div>
|
|
|
|
<article class="panel">
|
|
<div class="panelTitle">
|
|
<h3>Erinnerungen</h3>
|
|
<button id="addReminder" class="small" type="button">Hinzufügen</button>
|
|
</div>
|
|
<div id="reminders"></div>
|
|
</article>
|
|
|
|
<div class="actions">
|
|
<button id="saveButton" class="primary" type="button">Speichern</button>
|
|
<button id="discardButton" class="ghost" type="button">Verwerfen</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- VIEW 2: KONTAKT-INFO -->
|
|
<div id="view-contact-info" class="tab-view">
|
|
<section class="panel glass-card contact-details-view">
|
|
<div id="contact-info-placeholder" class="info-placeholder">
|
|
<i data-lucide="info" class="placeholder-icon"></i>
|
|
<p>Wähle einen Kontakt im Diktieren-Tab aus, um Details anzuzeigen.</p>
|
|
</div>
|
|
<div id="contact-info-content" hidden>
|
|
<div class="contact-header">
|
|
<div class="contact-avatar" id="contactDetailsAvatar">A</div>
|
|
<div>
|
|
<h2 id="contactDetailsName">Kontaktname</h2>
|
|
<p class="eyebrow" id="contactDetailsDesc">Beschreibung</p>
|
|
</div>
|
|
</div>
|
|
<div class="contact-grid">
|
|
<div class="info-item">
|
|
<span class="info-label"><i data-lucide="mail"></i> E-Mail</span>
|
|
<span class="info-value" id="contactDetailsEmail">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label"><i data-lucide="phone"></i> Telefon</span>
|
|
<span class="info-value" id="contactDetailsPhone">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label"><i data-lucide="map-pin"></i> Adresse</span>
|
|
<span class="info-value" id="contactDetailsAddress">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- VIEW 3: NEUER KONTAKT -->
|
|
<div id="view-new-contact" class="tab-view">
|
|
<section class="composer new-contact-form">
|
|
<p class="section-kicker">Hinzufügen</p>
|
|
<h2>Neuen Kontakt erstellen</h2>
|
|
<p class="subtitle">Lege eine neue Person direkt in deinem CRM an.</p>
|
|
|
|
<form id="createContactForm">
|
|
<div class="grid">
|
|
<label>
|
|
Vorname *
|
|
<input id="newContactFirstName" type="text" required placeholder="z. B. Aaron" />
|
|
</label>
|
|
<label>
|
|
Nachname
|
|
<input id="newContactLastName" type="text" placeholder="z. B. Lingel" />
|
|
</label>
|
|
</div>
|
|
<div class="grid">
|
|
<label>
|
|
E-Mail
|
|
<input id="newContactEmail" type="email" placeholder="aaron.lingel@example.com" />
|
|
</label>
|
|
<label>
|
|
Telefon
|
|
<input id="newContactPhone" type="tel" placeholder="+49 176 ..." />
|
|
</label>
|
|
</div>
|
|
<label>
|
|
Adresse
|
|
<input id="newContactAddress" type="text" placeholder="Straße, PLZ Ort" />
|
|
</label>
|
|
<label>
|
|
Beschreibung / Notiz
|
|
<textarea id="newContactDesc" rows="4" placeholder="z. B. Kumpel aus der Uni, studiert Informatik..."></textarea>
|
|
</label>
|
|
<div class="actions">
|
|
<button class="primary" type="submit"><i data-lucide="check"></i> Kontakt anlegen</button>
|
|
<button class="ghost" type="reset" id="newContactResetBtn">Leeren</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="log" id="messageLog" aria-live="polite"></section>
|
|
</main>
|
|
|
|
<template id="reminderTemplate">
|
|
<div class="reminder">
|
|
<label class="toggle">
|
|
<input class="reminderEnabled" type="checkbox" checked />
|
|
<span>Aktiv</span>
|
|
</label>
|
|
<input class="reminderTitle" type="text" placeholder="Titel" />
|
|
<input class="reminderDate" type="date" />
|
|
<textarea class="reminderDescription" rows="3" placeholder="Details"></textarea>
|
|
<button class="removeReminder small danger" type="button">Entfernen</button>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Lucide Icons & App Script -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|