feat: add Misch & Friends companion app
All checks were successful
Build & Push Friends Image to Gitea Registry / build-and-push (push) Successful in 16s
All checks were successful
Build & Push Friends Image to Gitea Registry / build-and-push (push) Successful in 16s
This commit is contained in:
Kroonk
150
public/index.html
Normal file
150
public/index.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<!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" />
|
||||
<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>
|
||||
|
||||
<main class="shell">
|
||||
<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">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>
|
||||
|
||||
<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>
|
||||
|
||||
<script src="/app.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user