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
298
public/app.js
Normal file
298
public/app.js
Normal file
@@ -0,0 +1,298 @@
|
||||
const state = {
|
||||
mode: "auto",
|
||||
analysis: null,
|
||||
contacts: [],
|
||||
recognition: null,
|
||||
listening: false,
|
||||
};
|
||||
|
||||
const elements = {
|
||||
apiStatus: document.querySelector("#apiStatus"),
|
||||
inputText: document.querySelector("#inputText"),
|
||||
analyzeButton: document.querySelector("#analyzeButton"),
|
||||
clearButton: document.querySelector("#clearButton"),
|
||||
voiceButton: document.querySelector("#voiceButton"),
|
||||
review: document.querySelector("#review"),
|
||||
writeToMonica: document.querySelector("#writeToMonica"),
|
||||
contactSearch: document.querySelector("#contactSearch"),
|
||||
contactSelect: document.querySelector("#contactSelect"),
|
||||
typeSelect: document.querySelector("#typeSelect"),
|
||||
summaryInput: document.querySelector("#summaryInput"),
|
||||
noteEnabled: document.querySelector("#noteEnabled"),
|
||||
noteBody: document.querySelector("#noteBody"),
|
||||
journalEnabled: document.querySelector("#journalEnabled"),
|
||||
journalTitle: document.querySelector("#journalTitle"),
|
||||
journalPost: document.querySelector("#journalPost"),
|
||||
reminders: document.querySelector("#reminders"),
|
||||
reminderTemplate: document.querySelector("#reminderTemplate"),
|
||||
addReminder: document.querySelector("#addReminder"),
|
||||
saveButton: document.querySelector("#saveButton"),
|
||||
discardButton: document.querySelector("#discardButton"),
|
||||
messageLog: document.querySelector("#messageLog"),
|
||||
};
|
||||
|
||||
document.querySelectorAll("[data-mode]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
state.mode = button.dataset.mode;
|
||||
document.querySelectorAll("[data-mode]").forEach((item) => item.classList.toggle("active", item === button));
|
||||
});
|
||||
});
|
||||
|
||||
elements.analyzeButton.addEventListener("click", analyzeInput);
|
||||
elements.clearButton.addEventListener("click", () => {
|
||||
elements.inputText.value = "";
|
||||
elements.review.hidden = true;
|
||||
log("");
|
||||
});
|
||||
elements.discardButton.addEventListener("click", () => {
|
||||
elements.review.hidden = true;
|
||||
state.analysis = null;
|
||||
});
|
||||
elements.addReminder.addEventListener("click", () => addReminderRow());
|
||||
elements.saveButton.addEventListener("click", saveEntry);
|
||||
elements.contactSearch.addEventListener("input", debounce(loadContacts, 240));
|
||||
elements.voiceButton.addEventListener("click", toggleSpeech);
|
||||
|
||||
await boot();
|
||||
|
||||
async function boot() {
|
||||
await checkHealth();
|
||||
await loadContacts();
|
||||
setupSpeechRecognition();
|
||||
}
|
||||
|
||||
async function checkHealth() {
|
||||
try {
|
||||
const health = await api("/api/health");
|
||||
elements.apiStatus.textContent = health.monicaConfigured
|
||||
? `Monica verbunden: ${health.monicaBaseUrl}`
|
||||
: "Demo-Modus: Monica Token fehlt";
|
||||
elements.writeToMonica.disabled = !health.monicaConfigured;
|
||||
} catch (error) {
|
||||
elements.apiStatus.textContent = "Backend nicht erreichbar";
|
||||
log(error.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function loadContacts() {
|
||||
const query = elements.contactSearch.value.trim();
|
||||
try {
|
||||
const payload = await api(`/api/contacts${query ? `?query=${encodeURIComponent(query)}` : ""}`);
|
||||
state.contacts = payload.data || [];
|
||||
renderContacts();
|
||||
} catch (error) {
|
||||
log(error.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
function renderContacts(selectedName = "") {
|
||||
elements.contactSelect.innerHTML = "";
|
||||
const empty = new Option("Kein Kontakt ausgewählt", "");
|
||||
elements.contactSelect.append(empty);
|
||||
|
||||
for (const contact of state.contacts) {
|
||||
const option = new Option(contact.name, contact.id);
|
||||
option.dataset.name = contact.name;
|
||||
if (selectedName && contact.name.toLowerCase().includes(selectedName.toLowerCase())) {
|
||||
option.selected = true;
|
||||
}
|
||||
elements.contactSelect.append(option);
|
||||
}
|
||||
}
|
||||
|
||||
async function analyzeInput() {
|
||||
const text = elements.inputText.value.trim();
|
||||
if (!text) {
|
||||
log("Erst etwas diktieren oder eintippen.");
|
||||
return;
|
||||
}
|
||||
|
||||
elements.analyzeButton.disabled = true;
|
||||
try {
|
||||
const analysis = await api("/api/analyze", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ text, mode: state.mode }),
|
||||
});
|
||||
state.analysis = analysis;
|
||||
renderAnalysis(analysis);
|
||||
log("Ich habe daraus einen Vorschlag gemacht. Bitte kurz prüfen.");
|
||||
} catch (error) {
|
||||
log(error.message, "error");
|
||||
} finally {
|
||||
elements.analyzeButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function renderAnalysis(analysis) {
|
||||
elements.review.hidden = false;
|
||||
elements.typeSelect.value = analysis.type;
|
||||
elements.summaryInput.value = analysis.summary;
|
||||
elements.noteEnabled.checked = Boolean(analysis.note?.enabled);
|
||||
elements.noteBody.value = analysis.note?.body || "";
|
||||
elements.journalEnabled.checked = Boolean(analysis.journal?.enabled);
|
||||
elements.journalTitle.value = analysis.journal?.title || "";
|
||||
elements.journalPost.value = analysis.journal?.post || "";
|
||||
elements.reminders.innerHTML = "";
|
||||
|
||||
const inferredContact = analysis.contact?.name || "";
|
||||
if (inferredContact) {
|
||||
elements.contactSearch.value = inferredContact;
|
||||
loadContacts().then(() => renderContacts(inferredContact));
|
||||
}
|
||||
|
||||
for (const reminder of analysis.reminders || []) {
|
||||
addReminderRow(reminder);
|
||||
}
|
||||
}
|
||||
|
||||
function addReminderRow(reminder = {}) {
|
||||
const fragment = elements.reminderTemplate.content.cloneNode(true);
|
||||
const row = fragment.querySelector(".reminder");
|
||||
row.querySelector(".reminderEnabled").checked = reminder.enabled ?? true;
|
||||
row.querySelector(".reminderTitle").value = reminder.title || "";
|
||||
row.querySelector(".reminderDate").value = reminder.initial_date || "";
|
||||
row.querySelector(".reminderDescription").value = reminder.description || "";
|
||||
row.querySelector(".removeReminder").addEventListener("click", () => row.remove());
|
||||
elements.reminders.append(row);
|
||||
}
|
||||
|
||||
async function saveEntry() {
|
||||
const selectedOption = elements.contactSelect.selectedOptions[0];
|
||||
const entry = {
|
||||
writeToMonica: elements.writeToMonica.checked,
|
||||
type: elements.typeSelect.value,
|
||||
summary: elements.summaryInput.value.trim(),
|
||||
rawText: state.analysis?.rawText || elements.inputText.value,
|
||||
contact: selectedOption?.value
|
||||
? { id: Number(selectedOption.value), name: selectedOption.dataset.name || selectedOption.textContent }
|
||||
: null,
|
||||
note: {
|
||||
enabled: elements.noteEnabled.checked,
|
||||
body: elements.noteBody.value.trim(),
|
||||
isFavorited: state.analysis?.note?.isFavorited || false,
|
||||
},
|
||||
journal: {
|
||||
enabled: elements.journalEnabled.checked,
|
||||
title: elements.journalTitle.value.trim(),
|
||||
post: elements.journalPost.value.trim(),
|
||||
},
|
||||
reminders: collectReminders(),
|
||||
};
|
||||
|
||||
elements.saveButton.disabled = true;
|
||||
try {
|
||||
const result = await api("/api/save", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(entry),
|
||||
});
|
||||
const monicaSummary = result.monicaResults?.length
|
||||
? ` Monica: ${result.monicaResults.map((item) => `${item.type} ${item.ok ? "ok" : "Fehler"}`).join(", ")}.`
|
||||
: "";
|
||||
log(`Gespeichert.${monicaSummary}`);
|
||||
} catch (error) {
|
||||
log(error.message, "error");
|
||||
} finally {
|
||||
elements.saveButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function collectReminders() {
|
||||
return [...elements.reminders.querySelectorAll(".reminder")].map((row) => ({
|
||||
enabled: row.querySelector(".reminderEnabled").checked,
|
||||
title: row.querySelector(".reminderTitle").value.trim(),
|
||||
initial_date: row.querySelector(".reminderDate").value,
|
||||
description: row.querySelector(".reminderDescription").value.trim(),
|
||||
frequency_type: "one_time",
|
||||
frequency_number: 1,
|
||||
}));
|
||||
}
|
||||
|
||||
function setupSpeechRecognition() {
|
||||
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||||
if (!SpeechRecognition) {
|
||||
elements.voiceButton.textContent = "Sprache nicht unterstützt";
|
||||
elements.voiceButton.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const recognition = new SpeechRecognition();
|
||||
recognition.lang = "de-DE";
|
||||
recognition.continuous = true;
|
||||
recognition.interimResults = true;
|
||||
|
||||
recognition.addEventListener("result", (event) => {
|
||||
let finalText = "";
|
||||
let interimText = "";
|
||||
|
||||
for (let index = event.resultIndex; index < event.results.length; index += 1) {
|
||||
const transcript = event.results[index][0].transcript;
|
||||
if (event.results[index].isFinal) {
|
||||
finalText += transcript;
|
||||
} else {
|
||||
interimText += transcript;
|
||||
}
|
||||
}
|
||||
|
||||
if (finalText) {
|
||||
elements.inputText.value = `${elements.inputText.value.trim()} ${finalText}`.trim();
|
||||
}
|
||||
|
||||
if (interimText) {
|
||||
log(`Höre: ${interimText}`);
|
||||
}
|
||||
});
|
||||
|
||||
recognition.addEventListener("end", () => {
|
||||
state.listening = false;
|
||||
elements.voiceButton.classList.remove("listening");
|
||||
elements.voiceButton.textContent = "Aufnehmen";
|
||||
});
|
||||
|
||||
recognition.addEventListener("error", (event) => {
|
||||
log(`Spracherkennung: ${event.error}`, "error");
|
||||
});
|
||||
|
||||
state.recognition = recognition;
|
||||
}
|
||||
|
||||
function toggleSpeech() {
|
||||
if (!state.recognition) return;
|
||||
|
||||
if (state.listening) {
|
||||
state.recognition.stop();
|
||||
return;
|
||||
}
|
||||
|
||||
state.listening = true;
|
||||
elements.voiceButton.classList.add("listening");
|
||||
elements.voiceButton.textContent = "Stoppen";
|
||||
state.recognition.start();
|
||||
}
|
||||
|
||||
async function api(url, options = {}) {
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(options.headers || {}),
|
||||
},
|
||||
});
|
||||
const payload = await response.json().catch(() => ({}));
|
||||
if (!response.ok) {
|
||||
throw new Error(payload.detail || payload.error || response.statusText);
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
function log(message, level = "info") {
|
||||
elements.messageLog.textContent = message || "";
|
||||
elements.messageLog.dataset.level = level;
|
||||
}
|
||||
|
||||
function debounce(fn, delay) {
|
||||
let timer;
|
||||
return (...args) => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => fn(...args), delay);
|
||||
};
|
||||
}
|
||||
BIN
public/icons/app-icon-source.png
Normal file
BIN
public/icons/app-icon-source.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
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>
|
||||
408
public/styles.css
Normal file
408
public/styles.css
Normal file
@@ -0,0 +1,408 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #070914;
|
||||
--surface: #111624;
|
||||
--surface-2: #171d2d;
|
||||
--surface-hover: #1c2435;
|
||||
--border: rgba(226, 232, 240, 0.1);
|
||||
--border-strong: rgba(226, 232, 240, 0.18);
|
||||
--text: #eef2ff;
|
||||
--muted: #9aa6bd;
|
||||
--dim: #647085;
|
||||
--ok: #34d399;
|
||||
--warn: #fbbf24;
|
||||
--down: #fb7185;
|
||||
--cyan: #67e8f9;
|
||||
--radius: 8px;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
font-size: 16px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--text);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(8, 13, 27, 0.98)),
|
||||
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 120px);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1160px, calc(100% - 32px));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
padding: 32px 0 22px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: var(--radius);
|
||||
object-fit: cover;
|
||||
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
.brand h1 {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
background: linear-gradient(135deg, #38bdf8 0%, #c084fc 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: clamp(2rem, 6vw, 4.4rem);
|
||||
line-height: 0.95;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.section-kicker {
|
||||
color: var(--cyan);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
max-width: 560px;
|
||||
margin-top: 10px;
|
||||
color: var(--muted);
|
||||
font-size: clamp(0.95rem, 2vw, 1.05rem);
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(92px, 1fr));
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.metric {
|
||||
min-width: 92px;
|
||||
padding: 13px 14px;
|
||||
background: rgba(17, 22, 36, 0.78);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 0.96rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.control-bar,
|
||||
.composer,
|
||||
.review,
|
||||
.log {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(17, 22, 36, 0.74);
|
||||
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.control-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.composer,
|
||||
.review {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.composer textarea {
|
||||
margin-top: 10px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.review {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.segments {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(7, 9, 20, 0.45);
|
||||
}
|
||||
|
||||
.segment,
|
||||
button {
|
||||
min-height: 38px;
|
||||
padding: 0 14px;
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.segment {
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.segment.is-active,
|
||||
.segment.active,
|
||||
.primary {
|
||||
color: #062027;
|
||||
background: var(--cyan);
|
||||
border-color: transparent;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 10px 28px rgba(103, 232, 249, 0.16);
|
||||
}
|
||||
|
||||
.icon-button,
|
||||
.ghost,
|
||||
.small {
|
||||
color: var(--text);
|
||||
background: rgba(17, 22, 36, 0.82);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: rgba(103, 232, 249, 0.1);
|
||||
border-color: rgba(103, 232, 249, 0.32);
|
||||
}
|
||||
|
||||
.voice.listening {
|
||||
color: #062027;
|
||||
background: var(--cyan);
|
||||
}
|
||||
|
||||
.actions,
|
||||
.reviewHead,
|
||||
.panelTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.input-label,
|
||||
label {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
padding: 11px 12px;
|
||||
color: var(--text);
|
||||
background: rgba(7, 9, 20, 0.58);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea:focus,
|
||||
input:focus,
|
||||
select:focus {
|
||||
border-color: rgba(103, 232, 249, 0.62);
|
||||
box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.1);
|
||||
}
|
||||
|
||||
textarea::placeholder,
|
||||
input::placeholder {
|
||||
color: var(--dim);
|
||||
}
|
||||
|
||||
.grid,
|
||||
.cards {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: minmax(0, 1.5fr) minmax(180px, 0.7fr);
|
||||
margin: 18px 0 12px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 14px;
|
||||
background: rgba(7, 9, 20, 0.28);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.panel > * + * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: inline-flex;
|
||||
grid-template-columns: auto auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.toggle input {
|
||||
width: 18px;
|
||||
min-height: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--cyan);
|
||||
}
|
||||
|
||||
.small {
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: #fecdd3;
|
||||
}
|
||||
|
||||
.reminder {
|
||||
display: grid;
|
||||
grid-template-columns: 90px minmax(0, 1fr) 170px auto;
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.reminder textarea {
|
||||
grid-column: 2 / 4;
|
||||
}
|
||||
|
||||
.log {
|
||||
margin-top: 16px;
|
||||
min-height: 46px;
|
||||
padding: 12px 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.log:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.hero,
|
||||
.control-bar,
|
||||
.actions,
|
||||
.reviewHead {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.control-bar,
|
||||
.actions,
|
||||
.reviewHead {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.brand {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.hero-meta,
|
||||
.grid,
|
||||
.cards,
|
||||
.reminder {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.reminder textarea {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.segments {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.segment {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user