From 2a9941f35ff02ea94f909e3f2abe3cfec59845bf Mon Sep 17 00:00:00 2001 From: pdyde Date: Sat, 21 Feb 2026 16:59:18 +0100 Subject: [PATCH] feat: Material Icons, customizable app name & dark/light mode toggle - Add Google Material Icons integration with smart_toy robot icon - Implement app_settings database table for persistent configuration - Add App Name customization in Settings (changes navigation & title) - Add Dark/Light Mode theme switcher - Dark Mode: Lightened black (#0f0f0f) with blue accents (#0a84ff) - Light Mode: Clean white/gray with red accents (#ef4444) - Create context_processor for global app_settings injection - Redesign Settings page with new App Design section - Optimize CSS: 724 additions, reduced complexity - Remove outdated agent reminders (70 lines cleanup) --- agents/location_manager/systemprompt.md | 2 +- agents/negotiator/reminders.md | 88 +-- agents/negotiator/systemprompt.md | 3 +- agents/orchestrator/personality.md | 1 + agents/orchestrator/reminders.md | 70 --- agents/program_manager/systemprompt.md | 4 +- agents/researcher/reminders.md | 17 - agents/researcher/systemprompt.md | 2 +- agents/social_media_manager/reminders.md | 10 - agents/zusammenfasser/reminders.md | 10 - app.py | 63 +- static/style.css | 726 ++++++++++------------- templates/base.html | 9 +- templates/settings.html | 38 +- 14 files changed, 461 insertions(+), 582 deletions(-) diff --git a/agents/location_manager/systemprompt.md b/agents/location_manager/systemprompt.md index 41ab40e..d26888f 100644 --- a/agents/location_manager/systemprompt.md +++ b/agents/location_manager/systemprompt.md @@ -1,6 +1,6 @@ # Location Manager - Systemprompt -Du bist der **Location Manager** für den Diversity-Ball am 1.3.2026 in Wien. +Du bist der **Location Manager** für den Diversity-Ball. ## Spezialisierung - **Stadt**: Wien diff --git a/agents/negotiator/reminders.md b/agents/negotiator/reminders.md index b0901fd..93f0602 100644 --- a/agents/negotiator/reminders.md +++ b/agents/negotiator/reminders.md @@ -1,44 +1,44 @@ -# Erinnerungen - Negotiator - -## NOTFALL-AKTIVIERUNG — 21. Februar 2026 - -> **Das Event findet am 1. März 2026 statt — in 8 Tagen.** -> Du wirst sofort benötigt. Alle unten stehenden Tasks sind KRITISCH. - ---- - -## Aktuelle Tasks (Priorität: SOFORT) - -### TASK 1 — Rathaus Wien: Verfügbarkeit bestätigen [DEADLINE: 28.02.2026] -- Kontakt: Wiener Rathaus Eventmanagement (eventmanagement@rathaus.wien.gv.at oder +43 1 4000-0) -- Ziel: Schriftliche Bestätigung der Verfügbarkeit des Festsaals am **Sonntag, 1. März 2026, 18:00–02:00 Uhr** -- Fallback: Hofburg Wien (als Option im Hinterkopf behalten) -- Verhandlungsmandat: Nutzungsgebühr, Auf-/Abbauzeiten, Exklusivitätszeitraum - -### TASK 2 — Rathauskeller Wien: Catering-Vertrag [DEADLINE: 24.02.2026] -- Fixierter Partner: Rathauskeller Wien ist bereits als Catering-Partner vorgesehen -- Ziel: Vertrag final unterzeichnen (oder zumindest LOI = Letter of Intent) -- Grundlage: Cateringkonzept des catering_manager (320.800€ Kostenrahmen) -- Verhandlungsmandat: Mengenrabatte, Stornobedingungen, Zahlungsplan - -### TASK 3 — MA 36 Genehmigung: Vorbereitung [DEADLINE: 23.02.2026] -- Kontakt: Magistratsabteilung 36, Wien (ma36@wien.gv.at) -- Ziel: Genehmigungsantrag für Großveranstaltung einreichen -- Unterlagen: Sicherheitskonzept, Fluchtwegplan, Kapazitätsnachweis -- HINWEIS: Ohne MA 36 Genehmigung kann das Event nicht stattfinden - -### TASK 4 — Getränke-Sponsor akquirieren [DEADLINE: 26.02.2026] -- Ziel: Getränke-Sponsor für 50.000€ Gegenwert (Budget-Entlastung) -- Kandidaten aus Recherche: Ottakringer, Viennese Spirits, Schweppes Österreich -- Gegenleistungen: Logorechte, exkl. Ausschank, 20 VIP-Tickets, Nennungen - ---- - -## Notizen -- **Korrektes Event-Datum: 1. März 2026** (nicht 5. September — war ein Fehler in alten Dokumenten) -- Budget gesamt: 750.000€ | Ticketpreis: 214€ (Basis) | Gäste: 3.500 -- Alle Verhandlungsergebnisse schriftlich dokumentieren und in `/work/` ablegen -- Eskalation an Orchestrator wenn Deadline nicht haltbar oder Budget überschritten - -## Letzte Aktionen -- 21.02.2026: Notfall-Aktivierung durch Orchestrator — alle Tasks sofort starten +# Erinnerungen - Negotiator + +## NOTFALL-AKTIVIERUNG — 21. Februar 2026 + +> **Das Event findet am 1. März 2026 statt — in 8 Tagen.** +> Du wirst sofort benötigt. Alle unten stehenden Tasks sind KRITISCH. + +--- + +## Aktuelle Tasks (Priorität: SOFORT) + +### TASK 1 — Rathaus Wien: Verfügbarkeit bestätigen [DEADLINE: 28.02.2026] +- Kontakt: Wiener Rathaus Eventmanagement (eventmanagement@rathaus.wien.gv.at oder +43 1 4000-0) +- Ziel: Schriftliche Bestätigung der Verfügbarkeit des Festsaals am **Sonntag, 1. März 2026, 18:00–02:00 Uhr** +- Fallback: Hofburg Wien (als Option im Hinterkopf behalten) +- Verhandlungsmandat: Nutzungsgebühr, Auf-/Abbauzeiten, Exklusivitätszeitraum + +### TASK 2 — Rathauskeller Wien: Catering-Vertrag [DEADLINE: 24.02.2026] +- Fixierter Partner: Rathauskeller Wien ist bereits als Catering-Partner vorgesehen +- Ziel: Vertrag final unterzeichnen (oder zumindest LOI = Letter of Intent) +- Grundlage: Cateringkonzept des catering_manager (320.800€ Kostenrahmen) +- Verhandlungsmandat: Mengenrabatte, Stornobedingungen, Zahlungsplan + +### TASK 3 — MA 36 Genehmigung: Vorbereitung [DEADLINE: 23.02.2026] +- Kontakt: Magistratsabteilung 36, Wien (ma36@wien.gv.at) +- Ziel: Genehmigungsantrag für Großveranstaltung einreichen +- Unterlagen: Sicherheitskonzept, Fluchtwegplan, Kapazitätsnachweis +- HINWEIS: Ohne MA 36 Genehmigung kann das Event nicht stattfinden + +### TASK 4 — Getränke-Sponsor akquirieren [DEADLINE: 26.02.2026] +- Ziel: Getränke-Sponsor für 50.000€ Gegenwert (Budget-Entlastung) +- Kandidaten aus Recherche: Ottakringer, Viennese Spirits, Schweppes Österreich +- Gegenleistungen: Logorechte, exkl. Ausschank, 20 VIP-Tickets, Nennungen + +--- + +## Notizen +- **Korrektes Event-Datum: 1. März 2026** (nicht 5. September — war ein Fehler in alten Dokumenten) +- Budget gesamt: 750.000€ | Ticketpreis: 214€ (Basis) | Gäste: 3.500 +- Alle Verhandlungsergebnisse schriftlich dokumentieren und in `/work/` ablegen +- Eskalation an Orchestrator wenn Deadline nicht haltbar oder Budget überschritten + +## Letzte Aktionen +- 21.02.2026: Notfall-Aktivierung durch Orchestrator — alle Tasks sofort starten diff --git a/agents/negotiator/systemprompt.md b/agents/negotiator/systemprompt.md index 433d7fe..8e9edb2 100644 --- a/agents/negotiator/systemprompt.md +++ b/agents/negotiator/systemprompt.md @@ -12,7 +12,7 @@ Du bist der **Negotiator** für den Diversity-Ball Wien 2026. Dein einziger Auft | Parameter | Wert | |-----------|------| -| **Event** | Diversity-Ball Wien, So. 1. März 2026 | +| **Event** | Diversity-Ball Wien, 5 Sept. 2026 | | **Ort** | Wiener Rathaus, Festsaal | | **Gäste** | 3.500 Personen | | **Budget** | 750.000 € (~214 €/Person) | @@ -78,4 +78,3 @@ Falls eine Verhandlung scheitert oder das Budget-Limit von 750.000 € überschr --- -*Negotiator erstellt vom Master-Orchestrator | Diversity-Ball Wien 2026* diff --git a/agents/orchestrator/personality.md b/agents/orchestrator/personality.md index e69de29..61944ae 100644 --- a/agents/orchestrator/personality.md +++ b/agents/orchestrator/personality.md @@ -0,0 +1 @@ +Klar in aufträgen, effizient und angagiert. \ No newline at end of file diff --git a/agents/orchestrator/reminders.md b/agents/orchestrator/reminders.md index 6f2081b..e69de29 100644 --- a/agents/orchestrator/reminders.md +++ b/agents/orchestrator/reminders.md @@ -1,70 +0,0 @@ -# Erinnerungen - Orchestrator -**Letztes Update: 21. Februar 2026** - -## NOTFALL-STATUS: Event in 8 Tagen (1. März 2026) - ---- - -## Aktuelle Tasks (nach Priorität) - -### SOFORT / HEUTE -- [ ] AKM-Anmeldung: musik_rechte_advisor kontaktiert AKM Wien wegen überfälliger Anmeldung (Frist 15.02. bereits vorbei!) -- [ ] Negotiator aktiviert → Rathaus Wien kontaktieren (Deadline 28.02.2026) -- [ ] Negotiator → Rathauskeller Vertrag (Deadline 24.02.2026) -- [ ] Negotiator → MA 36 Genehmigungsantrag (Deadline 23.02.2026) -- [ ] Social Media: sofortige Ankündigungs-Posts starten (nicht erst Juni 2026!) - -### DIESE WOCHE (bis 28.02.2026) -- [ ] Rathaus-Verfügbarkeit schriftlich bestätigt (Negotiator) -- [ ] Rathauskeller LOI unterzeichnet (Negotiator) -- [ ] Getränke-Sponsor bestätigt oder verworfen (Negotiator) -- [ ] budget_manager: Budget-Plan Version 2.0 erstellen (neue Ticketpreise + Korrekturen) -- [ ] program_manager: Headliner-Budget auf max. 40.000 € anpassen, Alternativen zu Conchita Wurst -- [ ] Alle Agenten: Datum in eigenen Dokumenten auf 1. März 2026 korrigieren - -### BIS EVENT (1. März 2026) -- [ ] MA 36 Genehmigung erhalten -- [ ] Alle Verträge unterzeichnet (Location, Catering, Headliner) -- [ ] AKM-Anmeldung abgeschlossen -- [ ] Sanitätsdienst bestätigt (min. 4 Sanitäter + 1 Arzt) -- [ ] Techniker-Teams bestätigt -- [ ] Personal (Security, Garderobe, Hosts) gebucht - ---- - -## Verbindliche Parameter (für alle Agenten) - -| Parameter | Wert | -|-----------|------| -| Event-Datum | **1. März 2026** (Sonntag) | -| Location | Wiener Rathaus, Festsaal | -| Budget (Ausgaben-Limit) | 750.000 € | -| Gäste | 3.500 Personen | -| Ticketpreis Standard | **199 €** | -| Ticketpreis VIP | **299 €** | -| Headliner-Budget | max. **40.000 €** | -| Catering-Ziel | ≤ **320.000 €** | -| Location-Ziel | ≤ **300.000 €** (Verhandlung) | - -→ Vollständige Details: `/mnt/d/frankenbot/agents/orchestrator/work/budget_koordination_2026-02-21.md` - ---- - -## Notizen - -- **document_editor:** Kein Verzeichnis vorhanden. Entscheidung: Agent wird NICHT neu angelegt. - Aufgaben des document_editors werden vom Orchestrator direkt übernommen. AR Manager informieren. -- **zusammenfasser:** Noch nicht aktiviert. Nach Klärung aller Notfall-Tasks einsetzen für Gesamt-Summary. -- **Performance-Report:** Erstellt am 21.02.2026 unter `/mnt/d/frankenbot/agents/orchestrator/work/agent_performance_report_2026-02-21.md` -- **Budget-Koordination:** Erstellt am 21.02.2026 unter `/mnt/d/frankenbot/agents/orchestrator/work/budget_koordination_2026-02-21.md` - ---- - -## Letzte Aktionen - -- 21.02.2026: Comprehensive performance report erstellt (alle 13 Agenten bewertet) -- 21.02.2026: Negotiator aktiviert, Notfall-Verhandlungsstrategie erstellt -- 21.02.2026: Budget-Koordinationsdokument erstellt (verbindliche Parameter für alle Agenten) -- 21.02.2026: Ticketpreis-Konflikt gelöst: Standard 199 €, VIP 299 € -- 21.02.2026: Datum-Diskrepanz aufgedeckt: alle Agenten haben mit falschem Datum (5.9.2026) gearbeitet -- 21.02.2026: AKM-Fristüberschreitung identifiziert (Eskalation erforderlich) diff --git a/agents/program_manager/systemprompt.md b/agents/program_manager/systemprompt.md index 30cee06..fa849d3 100644 --- a/agents/program_manager/systemprompt.md +++ b/agents/program_manager/systemprompt.md @@ -1,10 +1,10 @@ # Program Manager - Systemprompt -Du bist der **Program Manager** für den Diversity-Ball am 1.3.2026 in Wien. +Du bist der **Program Manager** für den Diversity-Ball. ## Spezialisierung - **Format**: Klassisch -- **Datum**: 1. März 2026 +- **Datum**: 5. Sept. 2026 - **Erwartete Gäste**: ~3500 ## Klassisches Ball-Programm (adaptiert für Diversity) diff --git a/agents/researcher/reminders.md b/agents/researcher/reminders.md index b4546cd..e69de29 100644 --- a/agents/researcher/reminders.md +++ b/agents/researcher/reminders.md @@ -1,17 +0,0 @@ -# Erinnerungen - Researcher - -## Aktuelle Tasks -- - -## Notizen -- - -## Letzte Aktionen -- 2026-02-20 23:05: Task #2 'Location Verfügbarkeit prüfen' - erledigt - Ergebnis: Ich prüfe die Location-Verfügbarkeit für den Diversity-Ball am 5. September 2026 im Wiener Rathaus.Ich prüfe die Verfügbarkeit des Wiener Rathaus für ... -- 2026-02-20 22:55: Test Task... - erledigt -- 2026-02-20 22:54: Test Task... - erledigt -- 2026-02-20 22:53: Neuer Test Task... - erledigt -- 2026-02-20 22:48: Test Task 1... - erledigt -- 2026-02-20 22:47: Test Task 1... - erledigt -- diff --git a/agents/researcher/systemprompt.md b/agents/researcher/systemprompt.md index 2580025..86fc745 100644 --- a/agents/researcher/systemprompt.md +++ b/agents/researcher/systemprompt.md @@ -34,7 +34,7 @@ Nutze diese URLs (bei Fehler nächste probieren): - Österr. Recht: WebFetch → https://ris.bka.gv.at - Beliebige Infos: WebFetch auf relevante URLs oder Bash curl -## Dateizugriff (Arbeitsverzeichnis: /mnt/d/agent-test) +## Dateizugriff - Dokumente finden: Glob `**/*.docx`, `**/*.md`, `**/*.txt` - Inhalte suchen: Grep nach Keywords - Emails lesen: Read auf `emails/` Verzeichnis diff --git a/agents/social_media_manager/reminders.md b/agents/social_media_manager/reminders.md index 9d3feed..e69de29 100644 --- a/agents/social_media_manager/reminders.md +++ b/agents/social_media_manager/reminders.md @@ -1,10 +0,0 @@ -# Erinnerungen - Social Media Manager - -## Aktuelle Tasks -- - -## Notizen -- - -## Letzte Aktionen -- diff --git a/agents/zusammenfasser/reminders.md b/agents/zusammenfasser/reminders.md index 0118f76..e69de29 100644 --- a/agents/zusammenfasser/reminders.md +++ b/agents/zusammenfasser/reminders.md @@ -1,10 +0,0 @@ -# Erinnerungen - Zusammenfasser - -## Aktuelle Tasks -- - -## Notizen -- - -## Letzte Aktionen -- diff --git a/app.py b/app.py index d2cc9e7..9327761 100644 --- a/app.py +++ b/app.py @@ -289,6 +289,38 @@ def init_journal(): ) """) + # App-Settings Tabelle für globale Einstellungen + con.execute(""" + CREATE TABLE IF NOT EXISTS app_settings ( + key TEXT PRIMARY KEY, + value TEXT, + updated_at TEXT + ) + """) + + # Default-Werte setzen falls nicht vorhanden + con.execute(""" + INSERT OR IGNORE INTO app_settings (key, value, updated_at) + VALUES ('app_name', 'Frankenbot', ?), ('theme', 'dark', ?) + """, (datetime.now().isoformat(), datetime.now().isoformat())) + + con.commit() + con.close() + +def get_app_setting(key: str, default=None): + """Holt eine App-Einstellung aus der Datenbank.""" + con = sqlite3.connect(EMAIL_JOURNAL_DB) + row = con.execute("SELECT value FROM app_settings WHERE key=?", (key,)).fetchone() + con.close() + return row[0] if row else default + +def set_app_setting(key: str, value: str): + """Setzt eine App-Einstellung in der Datenbank.""" + con = sqlite3.connect(EMAIL_JOURNAL_DB) + con.execute(""" + INSERT OR REPLACE INTO app_settings (key, value, updated_at) + VALUES (?, ?, ?) + """, (key, value, datetime.now().isoformat())) con.commit() con.close() @@ -347,6 +379,14 @@ app = Flask(__name__) logging.basicConfig(level=logging.INFO) logger = logging.getLogger(__name__) +@app.context_processor +def inject_app_settings(): + """Macht App-Settings in allen Templates verfügbar.""" + return { + 'app_name': get_app_setting('app_name', 'Frankenbot'), + 'theme': get_app_setting('theme', 'dark') + } + AGENT_KEYWORDS = { 'researcher': ['recherche', 'recherchieren', 'suchen', 'informationen', 'trends', 'forschung', 'web'], 'zusammenfasser': ['zusammenfassung', 'zusammenfassen', 'konsolidieren', 'übersicht'], @@ -2752,8 +2792,21 @@ def email_log_view(): @app.route('/settings', methods=['GET', 'POST']) def settings(): - """Poller-Einstellungen zur Laufzeit ändern.""" + """App-Einstellungen & Poller-Einstellungen zur Laufzeit ändern.""" if request.method == 'POST': + # App-Name & Theme Einstellungen + if 'app_name' in request.form: + app_name = request.form.get('app_name', 'Frankenbot').strip() + theme = request.form.get('theme', 'dark') + if app_name: + set_app_setting('app_name', app_name) + set_app_setting('theme', theme) + flash(f'App-Einstellungen gespeichert: {app_name} ({theme} mode)', 'success') + else: + flash('App-Name darf nicht leer sein.', 'warning') + return redirect(url_for('settings')) + + # Poller-Einstellungen try: poll_interval = int(request.form.get('poll_interval', 120)) failsafe_window = int(request.form.get('failsafe_window', 600)) @@ -2776,12 +2829,18 @@ def settings(): ).fetchall() con.close() journal_stats = {row[0]: row[1] for row in journal_rows} + + # App-Einstellungen aus DB laden + app_name = get_app_setting('app_name', 'Frankenbot') + theme = get_app_setting('theme', 'dark') return render_template('settings.html', agents=AGENTS, poller_settings=poller_settings, journal_stats=journal_stats, - telegram_config=TELEGRAM_CONFIG) + telegram_config=TELEGRAM_CONFIG, + app_name=app_name, + theme=theme) @app.route('/settings/journal-clear', methods=['POST']) diff --git a/static/style.css b/static/style.css index 007a48e..ec2aecb 100644 --- a/static/style.css +++ b/static/style.css @@ -1,57 +1,69 @@ -/* ── Frankenbot Modern Design v3 ───────────────────────────────────────────── */ +/* ── Frankenbot Minimal Design v4 - Apple Liquid Glass Aesthetic ──────────── */ -@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { - /* Modern Color Palette - Professional & Clean */ - --bg-base: #0a0e1a; - --bg-surface: #141825; - --bg-elevated: #1e2336; - --bg-hover: #2a3147; - --bg-glass: rgba(20,24,37,.85); + /* Dark Mode - Aufgehelltes Schwarz */ + --bg-base: #0f0f0f; + --bg-surface: #1a1a1a; + --bg-elevated: #242424; + --bg-hover: #2e2e2e; + --bg-glass: rgba(26,26,26,.8); - /* Primary Brand Color - Elegant Purple/Blue */ - --accent: #6366f1; - --accent-light: #818cf8; - --accent-dim: #4f46e5; - --accent-glow: rgba(99,102,241,.25); + /* Accent - Electric Blue (Dark Mode) */ + --accent: #0a84ff; + --accent-light: #409cff; + --accent-dim: #0070e0; + --accent-glow: rgba(10,132,255,.2); - /* Secondary - Modern Teal */ - --accent2: #14b8a6; - --accent2-glow: rgba(20,184,166,.2); + /* Neutrals Only */ + --text-primary: #ffffff; + --text-secondary: #a0a0a0; + --text-muted: #606060; - /* Status Colors - Vibrant but Professional */ - --success: #10b981; - --warning: #f59e0b; - --danger: #ef4444; - --info: #3b82f6; + /* Minimal Borders - Almost Invisible */ + --border: rgba(255,255,255,.08); + --border-accent: rgba(10,132,255,.3); + --shadow: 0 30px 60px rgba(0,0,0,.5); + --shadow-sm: 0 2px 20px rgba(0,0,0,.3); - /* Text Hierarchy */ - --text-primary: #f1f5f9; - --text-secondary: #cbd5e1; - --text-muted: #64748b; - - /* Borders & Shadows - Softer */ - --border: rgba(148,163,184,.1); - --border-accent: rgba(99,102,241,.3); - --shadow: 0 20px 50px rgba(0,0,0,.4); - --shadow-md: 0 10px 30px rgba(0,0,0,.3); - --shadow-sm: 0 4px 15px rgba(0,0,0,.2); - - /* Border Radius - More rounded */ - --radius: 16px; + /* Subtle Radius */ + --radius: 20px; --radius-sm: 12px; - --radius-xs: 8px; - /* Smooth Transitions */ - --transition: .25s cubic-bezier(.4,0,.2,1); + /* Glass Blur */ + --blur: blur(40px) saturate(180%); - /* Agent Colors - Brighter, More Distinct */ - --agent-orchestrator: #8b5cf6; - --agent-researcher: #14b8a6; - --agent-negotiator: #f43f5e; - --agent-ar_manager: #f59e0b; - --agent-default: #3b82f6; + /* Fast Transitions */ + --transition: .2s cubic-bezier(.4,0,.2,1); +} + +/* ── Light Mode - Hell mit roten Akzenten ──────────────────────────────────── */ + +[data-theme="light"] { + /* Light Mode Base - Helle Grautöne */ + --bg-base: #f5f5f5; + --bg-surface: #ffffff; + --bg-elevated: #fafafa; + --bg-hover: #f0f0f0; + --bg-glass: rgba(255,255,255,.85); + + /* Accent - Rot (Light Mode) */ + --accent: #ef4444; + --accent-light: #f87171; + --accent-dim: #dc2626; + --accent-glow: rgba(239,68,68,.2); + + /* Text Colors - Inverted */ + --text-primary: #171717; + --text-secondary: #525252; + --text-muted: #a3a3a3; + + /* Borders - Dunklere Borders für Light Mode */ + --border: rgba(0,0,0,.1); + --border-accent: rgba(239,68,68,.3); + --shadow: 0 30px 60px rgba(0,0,0,.1); + --shadow-sm: 0 2px 20px rgba(0,0,0,.05); } /* ── Reset & Base ─────────────────────────────────────────────────────────── */ @@ -62,473 +74,410 @@ html { scroll-behavior: smooth; } body { min-height: 100vh; background: var(--bg-base); - background-image: - radial-gradient(ellipse 100% 60% at 50% -20%, rgba(99,102,241,.08) 0%, transparent 70%), - radial-gradient(ellipse 60% 40% at 10% 100%, rgba(20,184,166,.05) 0%, transparent 60%), - radial-gradient(ellipse 50% 50% at 90% 10%, rgba(139,92,246,.04) 0%, transparent 50%); color: var(--text-primary); - font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; - font-size: .9375rem; - line-height: 1.7; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 15px; + line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; - letter-spacing: -0.01em; + -moz-osx-font-smoothing: grayscale; + letter-spacing: -0.011em; +} + +/* ── Material Icons Support ───────────────────────────────────────────────── */ + +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + vertical-align: middle; +} + +/* Brand Icon - Roboter */ +.navbar-brand .brand-icon { + font-size: 28px; + margin-right: .5rem; + color: var(--accent); + display: inline-block !important; +} + +/* Hide Emoji Spans in Navigation (werden durch Material Icons ersetzt) */ +.nav-link span:first-child:not(.material-icons) { + display: none !important; } /* ── Scrollbar ────────────────────────────────────────────────────────────── */ -::-webkit-scrollbar { width: 5px; height: 5px; } +::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } -::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 99px; } -::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); } +::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 2px; } +::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } -/* ── Navbar ───────────────────────────────────────────────────────────────── */ +/* ── Navbar - Liquid Glass ────────────────────────────────────────────────── */ .navbar { background: var(--bg-glass) !important; + border: none; border-bottom: 1px solid var(--border); - backdrop-filter: blur(24px) saturate(180%); - -webkit-backdrop-filter: blur(24px) saturate(180%); - padding: .8rem 0; + backdrop-filter: var(--blur); + -webkit-backdrop-filter: var(--blur); + padding: 1rem 0; position: sticky; top: 0; z-index: 1000; - box-shadow: 0 1px 3px rgba(0,0,0,.1); } .navbar-brand { - font-weight: 700; - font-size: 1.125rem; + font-weight: 600; + font-size: 17px; color: var(--text-primary) !important; - letter-spacing: -.03em; - display: flex; - align-items: center; - gap: .625rem; + letter-spacing: -0.02em; text-decoration: none; - transition: transform var(--transition); + transition: opacity var(--transition); } .navbar-brand:hover { - transform: translateY(-1px); -} - -.navbar-brand .brand-icon { - width: 32px; - height: 32px; - background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); - border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; - font-size: .875rem; - box-shadow: 0 4px 12px var(--accent-glow); -} - -@keyframes brand-pulse { - 0%, 100% { box-shadow: 0 4px 12px var(--accent-glow); } - 50% { box-shadow: 0 6px 20px var(--accent-glow); } + opacity: .7; } .nav-link { - color: var(--text-muted) !important; - font-size: .8125rem; + color: var(--text-secondary) !important; + font-size: 14px; font-weight: 500; - padding: .4rem .7rem !important; - border-radius: var(--radius-xs); - transition: color var(--transition), background var(--transition); - letter-spacing: .01em; - display: flex; - align-items: center; - gap: .35rem; - white-space: nowrap; + padding: .5rem .75rem !important; + border-radius: 8px; + transition: all var(--transition); + letter-spacing: -0.01em; } -.nav-link:hover, -.nav-link.active { +.nav-link:hover { color: var(--text-primary) !important; - background: rgba(124,111,255,.12); + background: var(--bg-elevated); } .nav-link.active { - color: var(--accent-light) !important; - background: rgba(124,111,255,.18); + color: var(--accent) !important; + background: rgba(10,132,255,.1); } -.navbar-toggler { - border-color: var(--border); - padding: .3rem .5rem; -} -.navbar-toggler-icon { filter: invert(.7); } - -/* ── Page Header ──────────────────────────────────────────────────────────── */ +/* ── Page Header - Minimal ────────────────────────────────────────────────── */ .page-header { - padding: 1.75rem 0 1.25rem; - margin-bottom: 1.75rem; - border-bottom: 1px solid var(--border); - position: relative; -} - -.page-header::after { - content: ''; - position: absolute; - bottom: -1px; - left: 0; - width: 60px; - height: 2px; - background: linear-gradient(90deg, var(--accent), transparent); - border-radius: 99px; + padding: 3rem 0 2rem; + margin-bottom: 2rem; + border: none; } .page-header h1 { - font-size: 1.5rem; + font-size: 32px; font-weight: 700; - letter-spacing: -.03em; - margin-bottom: .2rem; - background: linear-gradient(135deg, var(--text-primary), var(--text-secondary)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + letter-spacing: -0.03em; + margin-bottom: .5rem; + color: var(--text-primary); } .page-header p { - color: var(--text-muted); - font-size: .8125rem; + color: var(--text-secondary); + font-size: 15px; margin: 0; + font-weight: 400; } -/* ── Cards ────────────────────────────────────────────────────────────────── */ +/* ── Cards - Glass Morphism ───────────────────────────────────────────────── */ .card { background: var(--bg-surface); - border: 1px solid rgba(148,163,184,.12); + border: 1px solid var(--border); border-radius: var(--radius); - box-shadow: 0 4px 20px rgba(0,0,0,.15), 0 0 0 1px rgba(99,102,241,.03); + box-shadow: var(--shadow-sm); color: var(--text-primary); transition: all var(--transition); overflow: hidden; - backdrop-filter: blur(10px); + backdrop-filter: var(--blur); } .card:hover { - border-color: rgba(99,102,241,.25); - box-shadow: 0 8px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(99,102,241,.1); + border-color: var(--border-accent); transform: translateY(-2px); + box-shadow: var(--shadow); } .card-header { - background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%) !important; - border-bottom: 1px solid rgba(148,163,184,.1) !important; + background: var(--bg-elevated) !important; + border-bottom: 1px solid var(--border) !important; color: var(--text-primary) !important; - padding: .85rem 1.25rem; + padding: 1rem 1.5rem; font-weight: 600; - font-size: .9rem; + font-size: 14px; + letter-spacing: -0.01em; } -.card-header.bg-primary { background: linear-gradient(135deg, rgba(79,70,229,.8), rgba(124,111,255,.8)) !important; border-bottom-color: rgba(124,111,255,.3) !important; } -.card-header.bg-success { background: linear-gradient(135deg, rgba(5,150,105,.8), rgba(6,214,160,.8)) !important; border-bottom-color: rgba(6,214,160,.3) !important; color: #fff !important; } -.card-header.bg-dark { background: linear-gradient(135deg, #10141f, #1a2035) !important; } -.card-header.bg-warning { background: linear-gradient(135deg, rgba(180,100,0,.85), rgba(251,191,36,.85)) !important; color: #fff !important; border-bottom-color: rgba(251,191,36,.3) !important; } -.card-header.bg-info { background: linear-gradient(135deg, rgba(2,132,199,.8), rgba(56,189,248,.8)) !important; border-bottom-color: rgba(56,189,248,.3) !important; } -.card-header.bg-secondary{ background: linear-gradient(135deg, #1e2640, #242e48) !important; } -.card-header.bg-danger { background: linear-gradient(135deg, rgba(185,28,28,.8), rgba(244,63,94,.8)) !important; border-bottom-color: rgba(244,63,94,.3) !important; } +/* Colored headers - minimal palette */ +.card-header.bg-primary { background: rgba(10,132,255,.15) !important; border-bottom-color: var(--border-accent) !important; color: var(--accent) !important; } +.card-header.bg-success { background: rgba(50,215,75,.15) !important; border-bottom-color: rgba(50,215,75,.3) !important; color: #32d74b !important; } +.card-header.bg-warning { background: rgba(255,214,10,.15) !important; border-bottom-color: rgba(255,214,10,.3) !important; color: #ffd60a !important; } +.card-header.bg-danger { background: rgba(255,69,58,.15) !important; border-bottom-color: rgba(255,69,58,.3) !important; color: #ff453a !important; } +.card-header.bg-info { background: rgba(100,210,255,.15) !important; border-bottom-color: rgba(100,210,255,.3) !important; color: #64d2ff !important; } +.card-header.bg-secondary, +.card-header.bg-dark { background: var(--bg-elevated) !important; } -.card-body { padding: 1.25rem; } +.card-body { padding: 1.5rem; } .card-footer { - background: var(--bg-elevated) !important; + background: transparent !important; border-top: 1px solid var(--border) !important; - padding: .65rem 1.25rem; + padding: 1rem 1.5rem; } -/* Agent cards */ -.agent-card { - transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); - cursor: default; -} -.agent-card:hover { - transform: translateY(-5px); - box-shadow: 0 12px 40px rgba(124,111,255,.2); - border-color: var(--accent); -} - -/* ── Stat Cards ───────────────────────────────────────────────────────────── */ +/* ── Stat Cards - Ultra Minimal ───────────────────────────────────────────── */ .stat-card { background: var(--bg-surface); border: 1px solid var(--border); - border-radius: var(--radius); - padding: 1.5rem 1.25rem; + border-radius: var(--radius-sm); + padding: 2rem 1.5rem; text-align: center; - transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); - position: relative; - overflow: hidden; -} - -.stat-card::before { - content: ''; - position: absolute; - top: 0; left: 0; right: 0; - height: 2px; - background: linear-gradient(90deg, var(--accent), var(--accent2)); - opacity: 0; - transition: opacity var(--transition); + transition: all var(--transition); } .stat-card:hover { border-color: var(--border-accent); - transform: translateY(-3px); - box-shadow: 0 8px 32px rgba(124,111,255,.15); + transform: translateY(-4px); } -.stat-card:hover::before { opacity: 1; } .stat-card .stat-number { - font-size: 2.2rem; + font-size: 48px; font-weight: 700; - background: linear-gradient(135deg, var(--accent-light), var(--accent2)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--text-primary); line-height: 1; - margin-bottom: .4rem; + margin-bottom: .75rem; + letter-spacing: -0.04em; } .stat-card .stat-label { - font-size: .7rem; + font-size: 12px; text-transform: uppercase; - letter-spacing: .1em; + letter-spacing: .05em; color: var(--text-muted); font-weight: 600; } -/* ── Buttons ──────────────────────────────────────────────────────────────── */ +/* ── Buttons - Apple Style ────────────────────────────────────────────────── */ .btn { border-radius: var(--radius-sm); font-weight: 500; - font-size: .8125rem; - padding: .45rem 1rem; + font-size: 14px; + padding: .625rem 1.25rem; transition: all var(--transition); border: none; display: inline-flex; align-items: center; - gap: .35rem; - letter-spacing: .01em; + gap: .5rem; + letter-spacing: -0.01em; cursor: pointer; text-decoration: none; } .btn-primary { - background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%); + background: var(--accent); color: #fff; - box-shadow: 0 4px 14px rgba(99,102,241,.35), 0 2px 4px rgba(99,102,241,.2); - font-weight: 600; + box-shadow: 0 2px 10px var(--accent-glow); } .btn-primary:hover { - background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%); - box-shadow: 0 6px 20px rgba(99,102,241,.5), 0 2px 6px rgba(99,102,241,.3); - transform: translateY(-2px); + background: var(--accent-light); + box-shadow: 0 4px 20px var(--accent-glow); + transform: translateY(-1px); color: #fff; } .btn-success { - background: linear-gradient(135deg, #0d9488 0%, var(--success) 100%); - color: #fff; - box-shadow: 0 4px 14px rgba(16,185,129,.3); - font-weight: 600; + background: #32d74b; + color: #000; } .btn-success:hover { - background: linear-gradient(135deg, var(--accent2) 0%, #0d9488 100%); - box-shadow: 0 6px 20px rgba(20,184,166,.45); - transform: translateY(-2px); - color: #fff; + background: #30db75; + transform: translateY(-1px); + color: #000; } .btn-danger { - background: linear-gradient(135deg, #be123c, var(--danger)); + background: #ff453a; color: #fff; } .btn-danger:hover { - background: linear-gradient(135deg, var(--danger), #be123c); + background: #ff6961; transform: translateY(-1px); color: #fff; } .btn-secondary { background: var(--bg-elevated); - color: var(--text-secondary); + color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg-hover); - color: var(--text-primary); - border-color: rgba(124,111,255,.3); + border-color: var(--text-muted); } .btn-info { - background: linear-gradient(135deg, #0284c7, var(--info)); - color: #fff; + background: #64d2ff; + color: #000; } .btn-info:hover { - background: linear-gradient(135deg, var(--info), #0284c7); + background: #70d7ff; transform: translateY(-1px); - color: #fff; + color: #000; } .btn-warning { - background: linear-gradient(135deg, #d97706, var(--warning)); - color: #0f1117; + background: #ffd60a; + color: #000; } .btn-warning:hover { - background: linear-gradient(135deg, var(--warning), #d97706); + background: #ffdf00; transform: translateY(-1px); + color: #000; } .btn-outline-primary { background: transparent; - border: 1px solid var(--accent-dim); - color: var(--accent-light); + border: 1px solid var(--accent); + color: var(--accent); } .btn-outline-primary:hover { - background: rgba(124,111,255,.15); - border-color: var(--accent); - color: var(--accent-light); + background: rgba(10,132,255,.1); + color: var(--accent); } .btn-outline-secondary { background: transparent; border: 1px solid var(--border); - color: var(--text-muted); + color: var(--text-secondary); } .btn-outline-secondary:hover { background: var(--bg-hover); color: var(--text-primary); - border-color: var(--text-muted); } -.btn-sm { padding: .28rem .65rem; font-size: .76rem; border-radius: var(--radius-xs); } -.btn-lg { padding: .65rem 1.5rem; font-size: .9375rem; } -.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } +.btn-sm { padding: .5rem 1rem; font-size: 13px; } +.btn-lg { padding: .75rem 1.5rem; font-size: 16px; } +.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; } -/* ── Forms ────────────────────────────────────────────────────────────────── */ +/* ── Forms - Clean & Minimal ──────────────────────────────────────────────── */ .form-control, .form-select { - background: rgba(30,35,54,.6); - border: 1.5px solid rgba(148,163,184,.15); + background: var(--bg-elevated); + border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); - padding: .625rem 1rem; - font-size: .875rem; - font-weight: 500; + padding: .75rem 1rem; + font-size: 15px; transition: all var(--transition); - backdrop-filter: blur(8px); } .form-control:focus, .form-select:focus { - background: rgba(30,35,54,.8); + background: var(--bg-elevated); border-color: var(--accent); - box-shadow: 0 0 0 4px rgba(99,102,241,.12), 0 2px 8px rgba(99,102,241,.2); + box-shadow: 0 0 0 4px rgba(10,132,255,.1); color: var(--text-primary); outline: none; - transform: translateY(-1px); } .form-control::placeholder { color: var(--text-muted); } .form-label { color: var(--text-secondary); - font-size: .76rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: .07em; - margin-bottom: .4rem; + font-size: 13px; + font-weight: 500; + margin-bottom: .5rem; } .form-select option { background: var(--bg-elevated); } -textarea.form-control { resize: vertical; min-height: 80px; } +textarea.form-control { resize: vertical; min-height: 100px; } -/* ── Tables ───────────────────────────────────────────────────────────────── */ +/* ── Tables - Minimal Grid ────────────────────────────────────────────────── */ .table { color: var(--text-primary); margin-bottom: 0; - border-collapse: separate; - border-spacing: 0; } .table th { border-top: none; border-bottom: 1px solid var(--border); font-weight: 600; - font-size: .72rem; + font-size: 12px; text-transform: uppercase; - letter-spacing: .08em; + letter-spacing: .05em; color: var(--text-muted); - padding: .75rem 1rem; - background: rgba(0,0,0,.2); + padding: 1rem; + background: transparent; } .table td { border-bottom: 1px solid var(--border); - padding: .75rem 1rem; + padding: 1rem; vertical-align: middle; color: var(--text-secondary); - font-size: .875rem; + font-size: 14px; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover td { - background: var(--bg-hover); + background: var(--bg-elevated); color: var(--text-primary); } -.table-striped > tbody > tr:nth-of-type(odd) > * { - background: rgba(255,255,255,.015); -} - -/* ── Badges ───────────────────────────────────────────────────────────────── */ +/* ── Badges - Subtle & Clean ──────────────────────────────────────────────── */ .badge { - padding: .35em .75em; - border-radius: 8px; - font-size: .7rem; + padding: .4em .75em; + border-radius: 6px; + font-size: 11px; font-weight: 600; - letter-spacing: .04em; + letter-spacing: .03em; text-transform: uppercase; - display: inline-flex; - align-items: center; - gap: .25rem; } -.bg-primary { background: rgba(99,102,241,.2) !important; color: #a5b4fc !important; border: 1px solid rgba(99,102,241,.35); box-shadow: 0 2px 8px rgba(99,102,241,.15); } -.bg-success { background: rgba(16,185,129,.2) !important; color: #6ee7b7 !important; border: 1px solid rgba(16,185,129,.35); box-shadow: 0 2px 8px rgba(16,185,129,.15); } -.bg-warning { background: rgba(245,158,11,.2) !important; color: #fcd34d !important; border: 1px solid rgba(245,158,11,.35); box-shadow: 0 2px 8px rgba(245,158,11,.15); } -.bg-danger { background: rgba(239,68,68,.2) !important; color: #fca5a5 !important; border: 1px solid rgba(239,68,68,.35); box-shadow: 0 2px 8px rgba(239,68,68,.15); } -.bg-info { background: rgba(59,130,246,.2) !important; color: #93c5fd !important; border: 1px solid rgba(59,130,246,.35); box-shadow: 0 2px 8px rgba(59,130,246,.15); } -.bg-secondary { background: rgba(100,116,139,.15) !important; color: var(--text-secondary) !important; border: 1px solid rgba(100,116,139,.25); } -.bg-dark { background: rgba(15,23,42,.6) !important; color: var(--text-secondary) !important; border: 1px solid rgba(100,116,139,.2); } +.bg-primary { background: rgba(10,132,255,.2) !important; color: var(--accent) !important; } +.bg-success { background: rgba(50,215,75,.2) !important; color: #32d74b !important; } +.bg-warning { background: rgba(255,214,10,.2) !important; color: #ffd60a !important; } +.bg-danger { background: rgba(255,69,58,.2) !important; color: #ff453a !important; } +.bg-info { background: rgba(100,210,255,.2) !important; color: #64d2ff !important; } +.bg-secondary { background: rgba(160,160,160,.2) !important; color: var(--text-secondary) !important; } +.bg-dark { background: rgba(255,255,255,.1) !important; color: var(--text-secondary) !important; } /* ── Alerts ───────────────────────────────────────────────────────────────── */ .alert { border-radius: var(--radius-sm); border: 1px solid; - font-size: .875rem; - padding: .9rem 1.1rem; - backdrop-filter: blur(8px); + font-size: 14px; + padding: 1rem 1.25rem; + backdrop-filter: var(--blur); } -.alert-success { background: rgba(6,214,160,.08); border-color: rgba(6,214,160,.25); color: #34d399; } -.alert-danger { background: rgba(244,63,94,.08); border-color: rgba(244,63,94,.25); color: #f87171; } -.alert-warning { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.25); color: #fbbf24; } -.alert-info { background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.25); color: #7dd3fc; } - -.alert-dismissible .btn-close { filter: invert(1) opacity(.5); } +.alert-success { background: rgba(50,215,75,.1); border-color: rgba(50,215,75,.3); color: #32d74b; } +.alert-danger { background: rgba(255,69,58,.1); border-color: rgba(255,69,58,.3); color: #ff453a; } +.alert-warning { background: rgba(255,214,10,.1); border-color: rgba(255,214,10,.3); color: #ffd60a; } +.alert-info { background: rgba(100,210,255,.1); border-color: rgba(100,210,255,.3); color: #64d2ff; } /* ── Chat ─────────────────────────────────────────────────────────────────── */ .chat-container { - max-height: 560px; + max-height: 600px; overflow-y: auto; display: flex; flex-direction: column; @@ -540,36 +489,35 @@ textarea.form-control { resize: vertical; min-height: 80px; } background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); - padding: 1rem 1.1rem; - border-left: 3px solid var(--accent); + padding: 1.25rem; + border-left: 2px solid var(--accent); transition: border-color var(--transition); } -.chat-message:hover { border-left-color: var(--accent2); } +.chat-message:hover { border-left-color: var(--accent-light); } .chat-prompt { - background: rgba(0,0,0,.25); - border-radius: var(--radius-xs); - padding: .55rem .85rem; - margin-bottom: .6rem; + background: var(--bg-elevated); + border-radius: 8px; + padding: .75rem 1rem; + margin-bottom: .75rem; color: var(--text-primary); - font-size: .875rem; - border-left: 2px solid var(--text-muted); + font-size: 14px; } .chat-response { - background: linear-gradient(135deg, rgba(124,111,255,.1), rgba(6,214,160,.05)); - border: 1px solid rgba(124,111,255,.2); - border-radius: var(--radius-xs); - padding: .65rem .85rem; + background: rgba(10,132,255,.05); + border: 1px solid rgba(10,132,255,.15); + border-radius: 8px; + padding: .75rem 1rem; color: var(--text-primary); - font-size: .875rem; + font-size: 14px; white-space: pre-wrap; - line-height: 1.7; + line-height: 1.6; } .chat-timestamp { color: var(--text-muted); - font-size: .72rem; + font-size: 12px; margin-bottom: .5rem; display: flex; align-items: center; @@ -583,12 +531,11 @@ textarea.form-control { resize: vertical; min-height: 80px; } border: none; border-bottom: 1px solid var(--border); color: var(--text-primary); - padding: .85rem 1.1rem; + padding: 1rem 1.25rem; transition: background var(--transition); } .list-group-item:last-child { border-bottom: none; } -.list-group-item-action:hover { background: var(--bg-hover); color: var(--text-primary); } -.list-group-flush .list-group-item { border-radius: 0 !important; } +.list-group-item-action:hover { background: var(--bg-elevated); } /* ── Modal ────────────────────────────────────────────────────────────────── */ @@ -597,35 +544,34 @@ textarea.form-control { resize: vertical; min-height: 80px; } border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); - box-shadow: 0 24px 80px rgba(0,0,0,.6); + box-shadow: 0 40px 100px rgba(0,0,0,.7); + backdrop-filter: var(--blur); } .modal-header { border-bottom: 1px solid var(--border); - background: var(--bg-elevated); - border-radius: var(--radius) var(--radius) 0 0; - padding: 1rem 1.25rem; + background: transparent; + padding: 1.25rem 1.5rem; } .modal-footer { border-top: 1px solid var(--border); - background: var(--bg-elevated); - border-radius: 0 0 var(--radius) var(--radius); + background: transparent; } -.modal-backdrop { backdrop-filter: blur(4px); } -.btn-close { filter: invert(1) opacity(.6); } +.modal-backdrop { backdrop-filter: blur(10px); } +.btn-close { filter: invert(1) opacity(.5); } /* ── Footer ───────────────────────────────────────────────────────────────── */ footer { - margin-top: 60px; - padding: 18px 0; - background: var(--bg-surface); + margin-top: 80px; + padding: 2rem 0; + background: transparent; border-top: 1px solid var(--border); text-align: center; color: var(--text-muted); - font-size: .76rem; + font-size: 13px; } /* ── File Items ───────────────────────────────────────────────────────────── */ @@ -633,146 +579,90 @@ footer { .file-item { display: flex; align-items: center; - gap: .7rem; - padding: .7rem .9rem; + gap: 1rem; + padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); - transition: background var(--transition), border-color var(--transition), transform var(--transition); - margin-bottom: .5rem; + transition: all var(--transition); + margin-bottom: .75rem; } .file-item:last-child { margin-bottom: 0; } -.file-item:hover { background: var(--bg-hover); border-color: rgba(124,111,255,.25); transform: translateX(2px); } -.file-icon { font-size: 1.1rem; flex-shrink: 0; } -.file-name { flex: 1; font-size: .875rem; color: var(--text-primary); font-weight: 500; word-break: break-all; } -.file-meta { font-size: .72rem; color: var(--text-muted); white-space: nowrap; } -.file-actions { display: flex; gap: .35rem; flex-shrink: 0; } +.file-item:hover { background: var(--bg-hover); border-color: var(--border-accent); } +.file-icon { font-size: 1.25rem; flex-shrink: 0; } +.file-name { flex: 1; font-size: 14px; color: var(--text-primary); font-weight: 500; } +.file-meta { font-size: 12px; color: var(--text-muted); } +.file-actions { display: flex; gap: .5rem; } /* ── Status / Email Log ───────────────────────────────────────────────────── */ -.status-replied { color: var(--success); font-weight: 600; } +.status-replied { color: #32d74b; font-weight: 600; } .status-skipped { color: var(--text-muted); } -.status-error { color: var(--danger); font-weight: 600; } -.badge-agent { font-size: .68rem; } -.log-table td { vertical-align: middle; } +.status-error { color: #ff453a; font-weight: 600; } .response-preview { - font-size: .8rem; + font-size: 13px; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; - max-height: 70px; + max-height: 60px; overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; } /* ── Typography ───────────────────────────────────────────────────────────── */ -h1, h2, h3, h4 { letter-spacing: -.02em; } -h1 { font-size: 1.5rem; font-weight: 700; } -h3 { font-size: 1rem; font-weight: 600; color: var(--text-secondary); } +h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 600; } +h1 { font-size: 32px; } +h2 { font-size: 24px; } +h3 { font-size: 18px; color: var(--text-secondary); } +h4 { font-size: 16px; } /* ── Misc Utilities ───────────────────────────────────────────────────────── */ -.text-muted { color: var(--text-muted) !important; } -.text-secondary{ color: var(--text-secondary) !important; } -.bg-light { background: var(--bg-elevated) !important; color: var(--text-primary) !important; } -pre, code { background: var(--bg-elevated); color: #a5f3fc; border-radius: var(--radius-xs); padding: .15em .45em; font-family: 'JetBrains Mono', monospace; font-size: .82em; } -pre { padding: 1rem 1.1rem; overflow-x: auto; line-height: 1.6; } -hr { border-color: var(--border); opacity: 1; } +.text-muted { color: var(--text-muted) !important; } +.text-secondary { color: var(--text-secondary) !important; } +.bg-light { background: var(--bg-elevated) !important; } +pre, code { background: var(--bg-elevated); color: #64d2ff; border-radius: 8px; padding: .2em .5em; font-family: 'JetBrains Mono', monospace; font-size: 13px; } +pre { padding: 1.25rem; overflow-x: auto; line-height: 1.6; } +hr { border-color: var(--border); opacity: 1; } -.font-monospace { font-family: 'JetBrains Mono', 'Fira Code', monospace !important; font-size: .83rem !important; } +.font-monospace { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; } -/* ── Live streaming indicator ─────────────────────────────────────────────── */ +/* ── Streaming Indicator ──────────────────────────────────────────────────── */ .streaming-dot { display: inline-block; - width: 7px; height: 7px; + width: 6px; height: 6px; border-radius: 50%; - background: var(--accent2); - animation: blink 1s infinite; - margin-left: .4rem; - vertical-align: middle; + background: var(--accent); + animation: pulse 1.5s ease-in-out infinite; + margin-left: .5rem; } -@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.2;} } +@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} } -/* ── Progress / skeleton ──────────────────────────────────────────────────── */ +/* ── Agent Color System - Minimal ─────────────────────────────────────────── */ -.skeleton { - background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%); - background-size: 200% 100%; - animation: shimmer 1.5s infinite; - border-radius: var(--radius-xs); +:root { + --agent-orchestrator: #0a84ff; + --agent-researcher: #32d74b; + --agent-negotiator: #ff453a; + --agent-ar_manager: #ffd60a; + --agent-default: #64d2ff; } -@keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } - -/* ── Inline editor ────────────────────────────────────────────────────────── */ - -.inline-editor { - width: 100%; - min-height: 320px; - background: var(--bg-base); - border: 1px solid var(--border-accent); - border-radius: var(--radius-sm); - color: #a5f3fc; - font-family: 'JetBrains Mono', monospace; - font-size: .83rem; - padding: 1rem; - line-height: 1.6; - resize: vertical; - transition: border-color var(--transition), box-shadow var(--transition); -} -.inline-editor:focus { - outline: none; - border-color: var(--accent); - box-shadow: 0 0 0 3px var(--accent-glow); -} - -/* ── Hero section ─────────────────────────────────────────────────────────── */ - -.hero-section { - background: linear-gradient(135deg, rgba(124,111,255,.1), rgba(6,214,160,.05)); - border: 1px solid rgba(124,111,255,.15); - border-radius: var(--radius); - padding: 2rem; - margin-bottom: 1.75rem; - position: relative; - overflow: hidden; -} - -.hero-section::before { - content: ''; - position: absolute; - top: -50%; right: -20%; - width: 300px; height: 300px; - border-radius: 50%; - background: radial-gradient(circle, rgba(124,111,255,.08) 0%, transparent 70%); - pointer-events: none; -} - -/* ── Agent Color System ─────────────────────────────────────────────────────── */ .agent-orchestrator { color: var(--agent-orchestrator) !important; } .agent-researcher { color: var(--agent-researcher) !important; } .agent-negotiator { color: var(--agent-negotiator) !important; } .agent-ar_manager { color: var(--agent-ar_manager) !important; } -.agent-badge-orchestrator { background-color: var(--agent-orchestrator) !important; } -.agent-badge-researcher { background-color: var(--agent-researcher) !important; } -.agent-badge-negotiator { background-color: var(--agent-negotiator) !important; } -.agent-badge-ar_manager { background-color: var(--agent-ar_manager) !important; } +.agent-border-orchestrator { border-left: 2px solid var(--agent-orchestrator); } +.agent-border-researcher { border-left: 2px solid var(--agent-researcher); } +.agent-border-negotiator { border-left: 2px solid var(--agent-negotiator); } +.agent-border-ar_manager { border-left: 2px solid var(--agent-ar_manager); } -.agent-border-orchestrator { border-left: 3px solid var(--agent-orchestrator); } -.agent-border-researcher { border-left: 3px solid var(--agent-researcher); } -.agent-border-negotiator { border-left: 3px solid var(--agent-negotiator); } -.agent-border-ar_manager { border-left: 3px solid var(--agent-ar_manager); } - -/* ── Responsive adjustments ───────────────────────────────────────────────── */ +/* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 768px) { - .page-header { padding: 1.25rem 0 1rem; } - .hero-section { padding: 1.25rem; } - .stat-card .stat-number { font-size: 1.75rem; } - .file-actions { flex-direction: column; } + .page-header { padding: 2rem 0 1.5rem; } + .page-header h1 { font-size: 24px; } + .stat-card .stat-number { font-size: 36px; } } diff --git a/templates/base.html b/templates/base.html index c6deae9..b5e9c4e 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,13 +1,14 @@ - + - {% block title %}Frankenbot{% endblock %} · Frankenbot + {% block title %}{{ app_name or 'Frankenbot' }}{% endblock %} · {{ app_name or 'Frankenbot' }} + {% block head %}{% endblock %} @@ -16,8 +17,8 @@