gitmedia/thats-me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

20-02-2026

Browse source
This commit is contained in:
Kevin Adametz 2026-02-20 17:56:18 +01:00
parent c62234e1ca
commit 98084de7d0
80 changed files with 9804 additions and 1771 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
frontend/dev/19-02-2026/6aac395fbacf32e19096aa404c0f9d4b.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 10.29.01.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 293 KiB

BIN
frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 11.34.03.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 13.04.56.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 359 KiB

BIN
frontend/dev/19-02-2026/Bildschirmfoto 2026-02-20 um 13.24.12.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 987 KiB

BIN
frontend/dev/19-02-2026/c312dc2d46f8c869160e1e65e6f1d54e.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 80 KiB

59
frontend/dev/19-02-2026/dependency-check.md Normal file
View file

@ -0,0 +1,59 @@
# Dependency Check — 19.02.2026
## Umgebung
- **Node.js:** v22.20.0
- **npm:** 11.6.2
## Versionsvergleich
| Paket | package.json (Range) | Installiert | Latest | Status |
|-------------------------------|----------------------|-------------|---------|----------------|
| **quasar** | ^2.16.0 | 2.18.1 | 2.18.6 | Update möglich |
| **@quasar/app-vite** | ^2.1.0 | 2.2.0 | 2.4.1 | Update möglich |
| **@quasar/extras** | ^1.16.4 | 1.16.17 | 1.17.0 | Update möglich |
| **vue** | ^3.4.18 | 3.5.13 | 3.5.28 | Update möglich |
| **vue-router** | ^4.0.0 | 4.5.0 | 5.0.2 | Major verfügbar (Breaking!) |
| **pinia** | ^3.0.1 | 3.0.1 | 3.0.4 | Update möglich |
| **eslint** | ^9.14.0 | 9.37.0 | 10.0.0 | Major verfügbar |
| **@eslint/js** | ^9.14.0 | 9.37.0 | 10.0.1 | Major verfügbar |
| **eslint-plugin-vue** | ^9.30.0 | 9.33.0 | 10.8.0 | Major verfügbar |
| **prettier** | ^3.3.3 | 3.5.3 | 3.8.1 | Update möglich |
| **vite-plugin-checker** | ^0.9.0 | 0.9.1 | 0.12.0 | Update möglich |
| **@vue/eslint-config-prettier** | ^10.1.0 | 10.2.0 | 10.2.0 | Aktuell |
| **globals** | ^15.12.0 | 15.15.0 | 17.3.0 | Major verfügbar |
| **autoprefixer** | ^10.4.2 | 10.4.21 | 10.4.24 | Update möglich |
| **postcss** | ^8.4.14 | 8.5.3 | 8.5.6 | Update möglich |
## Bewertung
### Sichere Minor/Patch-Updates (empfohlen)
Diese Updates sind innerhalb der bestehenden semver-Ranges und sollten problemlos funktionieren:
```bash
npm update
```
Das aktualisiert: quasar, vue, pinia, prettier, autoprefixer, postcss, @quasar/extras, vite-plugin-checker
### Updates mit Range-Anpassung (empfohlen)
Diese erfordern eine Änderung in `package.json`, sind aber Minor-Updates ohne Breaking Changes:
- `@quasar/app-vite`: ^2.1.0 → ^2.4.1 (signifikante Verbesserungen im Build-Tooling)
### Major-Updates (Vorsicht!)
Diese haben potenziell Breaking Changes und sollten einzeln getestet werden:
- **vue-router 5.0.2** — Major-Release, erfordert Migrations-Arbeit
- **eslint 10.0.0 / @eslint/js 10.0.1** — Neue Major, Config-Änderungen möglich
- **eslint-plugin-vue 10.x** — Abgestimmt auf eslint 10
- **globals 17.x** — Major-Sprung von 15.x
## Empfehlung
1. Zuerst `npm update` ausführen für sichere Patch/Minor-Updates
2. `@quasar/app-vite` manuell auf ^2.4.1 anheben
3. Major-Updates (vue-router 5, eslint 10) separat evaluieren — nicht zusammen upgraden

BIN
frontend/dev/19-02-2026/e37861bce54b932c73be79cd8dfdaf96.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
frontend/dev/19-02-2026/e699b3edd8b9dedfb2232ef3428b8fc7.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

48
frontend/dev/19-02-2026/konzept.md Normal file
View file

@ -0,0 +1,48 @@
### **Der "Thats Me" Wow-Prototyp**
**1. Die Kernphilosophie: "Funktionale Eleganz"**
Unser Design ist nicht nur Dekoration; es ist eine Form der Datenvisualisierung. Jedes visuelle Element hat eine Funktion und leitet sich direkt aus den Emotionen und der Persönlichkeit des Nutzers ab. Wir schaffen eine minimalistische "Bühne", auf der die Erinnerungen des Nutzers die leuchtenden Hauptdarsteller sind.
**2. Visuelle Säule 1: Das UI-Grundgerüst (Die Bühne)**
- **Look & Feel:** Minimalistisch, modern, aufgeräumt. Der Fokus liegt zu 100% auf der LifeWave.
- **Hintergrund:** Ein reiner, neutraler Hintergrund (Hell: Weiß/Beige, Dunkel: Tiefes Grau/Schwarz) - Hell- und Dunkel Modus.
- **Interaktive Elemente (Menüs & Panels):** Wir verwenden einen "Glassmorphism" / "Frosted Glass"-Look, genau wie in den Bildern /workspace/frontend/dev/19-02-2026/e699b3edd8b9dedfb2232ef3428b8fc7.jpg und frontend/dev/19-02-2026/c312dc2d46f8c869160e1e65e6f1d54e.jpg
- Alle Menüs (das User-Menü) und der von unten kommende Slide-Up-Panel (zur Event-Eingabe) nutzen diesen Effekt.
- **Der "Wow-Effekt" hierbei:** Wenn das Panel hochfährt, bleibt die LifeWave im Hintergrund sichtbar, wird aber durch das "Glas" wunderschön diffus und unscharf. Das schafft Tiefe und erhält den Kontext.
- **Navigation:** Extrem reduziert.
- **Oben:** Ein User-Icon (dient als Menü-Button und Login-Status).
- **Unten:** Ein einzelner, schwebender "+" Button (ebenfalls im "Glass-Look"), um ein Event zu starten.
**3. Visuelle Säule 2: Die Events (Die "Glow-Punkte")**
Hier kodieren wir die Emotionen und die Persönlichkeit.
- **Form:** Jedes Event ist ein minimalistischer Kreis.
- **Farbe & Emotion (Das Kernkonzept):** Die Farbe eines Events wird durch einen leuchtenden "Glow" (eine Aura) dargestellt, nicht durch eine flächige Füllung.
- Die Bilder frontend/dev/19-02-2026/e37861bce54b932c73be79cd8dfdaf96.jpg (warm/positiv) und frontend/dev/19-02-2026/6aac395fbacf32e19096aa404c0f9d4b.jpg (kühl/negativ) sind hierfür die perfekte Referenz.
- **Die "Default + Custom"-Logik:**
1. **Default (Der Automatismus):** Die Emotion (Positiv/Negativ) steuert ZWEI Dinge: die **Y-Achse** (Höhe auf der Welle) und die **Farbe des Glows** (z.B. Positiv = Warmes Grün/Gelb, Negativ = Kühles Blau/Rot).
2. **Custom (Der Stempel):** Der Nutzer kann die Default-Farbe JEDERZEIT über einen Color-Picker mit seiner persönlichen "Wunschfarbe" überschreiben. Die Y-Position (Emotion) bleibt davon unberührt.
**4. Visuelle Säule 3: Die LifeWave (Der "Energiestrom")**
Das ist das Bindeglied, das die Geschichte erzählt.
- **Form:** Die Welle ist kein einfacher Strich. Sie ist ein organischer, dynamischer "Energiestrom", der aus vielen feinen Linien besteht, Sie muss sich lebendig und fließend anfühlen. Sie muss Einstellungen haben, indem der User seine Wave selbst anpassen kann mit Krümmung, Farben, Vielfalt dazu habe ich ein super Beispiel gefunden, welches in React umgesetzt ist und welches ich fast genauso adaptieren würde, lokal untner frontend/dev/floating-lines.js, frontend/dev/init-fl.html
- **Farbe (Der "Emotionale Fluss"):** Die Welle ist ein **Verlauf**. Sie nimmt die finale "Glow"-Farbe des Start-Events auf und verläuft fließend zur "Glow"-Farbe des nächsten Events.
- **Beispiel:** Geht ein "Positiv (Grüner Glow)"-Event in ein "Custom (Pinker Glow)"-Event über, erzeugt die Welle dazwischen einen wunderschönen Verlauf von Grün nach Pink.
**5. Das Zusammenspiel (Der Prototyp-Flow)**
Das "Wow"-Erlebnis des Prototyps wird wie folgt visualisiert:
1. **Die Szene:** Der Nutzer sieht eine minimalistische, weiße Leinwand. Darauf schweben 3-4 "Glow-Punkte", verbunden durch die dynamische, farbverlaufende Welle.
2. **Die Interaktion:** Der Nutzer tippt auf den "Glass Look" `+`Button.
3. **Das Panel:** Der "Frosted Glass"-Panel fährt von unten hoch. Die "Glow-Punkte" und die Welle im Hintergrund werden sanft unscharf.
4. **Die Magie:** Der Nutzer füllt die Felder aus. Er bewegt den **Emotions-Regler** auf "Positiv".
5. **Das Live-Feedback:** Im Hintergrund (über dem Panel) sieht der Nutzer _in Echtzeit_, wie ein neuer "Glow-Punkt" entsteht, auf der Y-Achse nach oben wandert und einen warmen, grünen Glow bekommt. Die Welle verbindet sich dynamisch mit dem neuen Punkt.
6. **Der Stempel:** Der Nutzer tippt auf "Farbe anpassen", wählt ein "Lila oder Lila Verlauf". Der Glow des Punktes ändert sich _sofort_ von Grün zu Lila. Die Welle passt ihren Verlauf an.
Dieses Konzept liefert einen klaren visuellen Haken, ist extrem modern und setzt unsere Kernidee – Emotion in Design zu verwandeln – perfekt um.

372
frontend/dev/19-02-2026/umsetzungskonzept.md Normal file
View file

@ -0,0 +1,372 @@
# Umsetzungskonzept — "That's Me" Wow-Prototyp
Dieses Dokument beschreibt die schrittweise Umsetzung des Prototyps. Jeder Schritt baut auf dem vorherigen auf und ist einzeln testbar.
---
## Phase 1: Viewport & Grundgerüst
### 1.1 — Neues App-Layout (`LifeWaveLayout.vue`)
**Ziel:** Minimalistisches Fullscreen-Layout als "Bühne" — ersetzt das bestehende MainLayout für die LifeWave-Ansicht.
**Umsetzung:**
- Neues Layout `src/layouts/LifeWaveLayout.vue` erstellen
- Fullscreen-Viewport (`100dvh`) ohne Quasar-Header/Footer/Drawer
- Neutraler Hintergrund: Hell-Modus `#FAFAFA`, Dunkel-Modus `#0A0A0A`
- CSS Custom Properties für Theme-Switching (`--bg-primary`, `--bg-glass`, `--text-primary`)
- Slot-basiert: `<router-view />` füllt den gesamten Viewport
- Kein Scrolling auf der Hauptebene — alles innerhalb des Viewports
**Struktur:**
```
┌──────────────────────────────┐
│ [User-Icon] top │ ← fixed, z-30
│ │
│ │
│ LifeWave Canvas │ ← absolute, z-0, fullscreen
│ + Glow-Punkte │
│ │
│ │
│ [+] bot │ ← fixed, z-30
└──────────────────────────────┘
```
### 1.2 — Glassmorphism CSS-System
**Ziel:** Wiederverwendbare Glass-Styles als CSS-Klassen (Referenz: die beiden Glassmorphism-Bilder).
**Umsetzung:**
- In `src/css/app.scss` definieren:
- `.glass` — Basis-Glaseffekt (`backdrop-filter: blur(20px)`, halbtransparenter Hintergrund, subtiler Border)
- `.glass--panel` — Variante für das Slide-Up-Panel (stärkerer Blur, ~40px)
- `.glass--button` — Variante für den schwebenden +-Button
- Light/Dark-Mode Varianten über CSS Custom Properties
- Subtiler `box-shadow` für Tiefe
- 1px Border mit `rgba(255,255,255,0.15)` für den "Glas-Rand"
---
## Phase 2: Header & Navigation
### 2.1 — Header-Leiste
**Ziel:** Minimalistischer Header mit Logo links und User-Icon rechts.
**Umsetzung:**
- Direkt im `LifeWaveLayout.vue` als `<header>` Element (fixed, z-20)
- **Links:** "ThatsMe" als Text-Logo (wird später durch echtes Logo ersetzt). Klick = Dark/Light Mode Toggle (temporär).
- **Rechts:** Runder User-Button (40px), `person_outline` Icon, `.glass--button` Styling
- Klick öffnet Off-Canvas-Drawer (rechte Seite)
- Später: Eingeloggt = Avatar/Initialen mit Glow-Ring
### 2.2 — Floating Action Button "+" (Bottom-Center)
**Ziel:** Einzelner schwebender Button zum Erstellen eines neuen Events.
**Umsetzung:**
- Komponente `src/components/AddEventButton.vue`
- Runder Button (56px), positioniert `bottom: 32px; left: 50%; transform: translateX(-50%); position: fixed`
- `.glass--button` Styling mit leichtem Glow-Effekt
- Material Icon `add` (weiß/grau je nach Theme)
- Klick-Animation: leichter Scale-Pulse
- Klick öffnet das Event-Panel (Phase 4)
---
## Phase 3: Timeline & Event-Dots
### 3.1 — FloatingLines als optionaler Hintergrund
**Ziel:** FloatingLines bleibt als optionales Feature erhalten, ist aber standardmäßig deaktiviert.
**Umsetzung:**
- FloatingLines im Layout eingebunden mit `v-if="showFloatingLines"` (default: `false`)
- Zuschaltbar über Toggle im Off-Canvas-Drawer
- Konfiguration: `enabledWaves: ['middle']`, `linesGradient: ['#E94FF5', '#2F4BA2']`, `lineCount: [12]`, `animationSpeed: 0.6`
- Dient als Inspiration für die spätere Verbindungslinie (Phase 3.3)
### 3.2 — Scrollbare Timeline mit Glow-Dots
**Ziel:** Events als leuchtende Kreise auf einer horizontal scrollbaren Zeitachse darstellen — wie ein visuelles Tagebuch.
Referenz: `Bildschirmfoto 2026-02-20 um 10.29.01.png`
**Konzept:**
- Der Viewport zeigt immer nur einen **Ausschnitt** der Timeline
- Die Timeline-Breite berechnet sich aus der Zeitspanne aller Events
- Horizontal scrollen (Touch-Swipe / Maus) navigiert durch die Zeit
- Unten werden **Monat und Jahr** eingeblendet (aktuell sichtbarer Bereich hervorgehoben)
**Umsetzung:**
- Neue Komponente `src/components/TimelineView.vue` — der scrollbare Container
- Timeline-Container: `overflow-x: auto; overflow-y: hidden; height: 100%`
- Innerer Container: Breite berechnet aus Datumsbereich (z.B. 120px pro Monat)
- **X-Achse (horizontal):** Datum-basierte Position — jedes Event wird auf seinen exakten Zeitpunkt positioniert
- **Y-Achse (vertikal):** Emotionswert (-1 bis +1 → unten bis oben, Mitte = unsichtbare Nulllinie = neutral)
- **Monats-Labels:** Am unteren Rand der Timeline, der aktuelle Monat groß/fett, Nachbarmonate kleiner
- **Jahres-Label:** Unter den Monaten, wechselt beim Scrollen
**GlowDot-Komponente** (`src/components/GlowDot.vue`):
- Jeder Punkt ist ein `<div>` mit radialem CSS-Gradient als "Glow"
- Größe: 20-28px Kern
- Glow-Farbe durch Emotion ODER Custom-Farbe
- Glow-Farblogik:
- **Positiv** (> 0): `#FF6B35` (Orange) → `#FFD700` (Gold) → `#4CAF50` (Grün)
- **Negativ** (< 0): `#2196F3` (Blau) → `#9C27B0` (Violett) → `#E91E63` (Pink)
- **Custom:** User-Farbe überschreibt den Glow, Y-Position bleibt
- Klick auf Punkt → öffnet Event-Detail (Phase 5)
### 3.4 — Timeline-Zoom
**Ziel:** Der User kann in die Timeline rein- und rauszoomen. Events und Abstände skalieren, Monats-/Jahres-Schriftgrößen bleiben konstant.
**Umsetzung:**
- `zoomLevel` (0.4–3.0, Default 1.0) multipliziert das `EVENT_SPACING`
- GlowDots skalieren via CSS `transform: scale(var(--dot-scale))` über das `zoom`-Prop
- **Desktop:** Ctrl+Mausrad oder Trackpad-Pinch (beides feuert `wheel` mit `ctrlKey`)
- **Touch:** Zwei-Finger-Pinch-Geste
- Scroll-Position bleibt stabil: Der Punkt unter dem Cursor/Pinch-Zentrum bleibt fixiert
- Monats- und Jahres-Labels behalten ihre feste Schriftgröße
### 3.3 — Verbindungslinien zwischen Dots
**Ziel:** Eine farbverlaufende Linie verbindet die Glow-Punkte und bildet die "LifeWave". Visuell inspiriert durch die FloatingLines-Ästhetik.
**Umsetzung:**
- SVG-Overlay innerhalb des scrollbaren Timeline-Containers
- Cubic Bezier Pfade (`<path>`) zwischen den Dots
- Gradient entlang des Pfades: Start-Farbe = Glow des linken Dots, End-Farbe = Glow des rechten Dots
- Strichbreite: 2-3px, mit `filter: blur(2px)` für weichen Glow
- Organisches Feeling: Bezier-Kontrollpunkte leicht versetzt
---
## Phase 4: Neues Event anlegen (Slide-Up Panel)
### 4.1 — Event-Panel Komponente
**Ziel:** Glassmorphes Panel fährt von unten hoch. LifeWave bleibt sichtbar und wird durch das "Glas" diffus.
**Umsetzung:**
- Neue Komponente `src/components/EventPanel.vue`
- Positionierung: `position: fixed; bottom: 0; left: 0; right: 0; z-index: 20`
- Höhe: ~65% des Viewports (variabel, Drag-Handle zum Resizen optional)
- `.glass--panel` Styling (starker Backdrop-Blur ~40px)
- Abgerundete obere Ecken (`border-radius: 24px 24px 0 0`)
- Slide-Up Animation: `transform: translateY(100%)` → `translateY(0)` mit `transition` oder Vue `<Transition>`
- Kleiner Drag-Handle-Balken oben (visueller Indikator, 40px breit, 4px hoch, zentriert)
- **Wichtig:** Hintergrund-LifeWave wird NICHT ausgeblendet — der Glaseffekt erzeugt die Unschärfe
### 4.2 — Event-Formular (Felder im Panel)
**Ziel:** Minimalistisches Formular mit Live-Feedback.
**Felder:**
1. **Titel** — Textfeld, Placeholder "Was ist passiert?"
2. **Datum** — Date-Picker, Default = heute
3. **Emotions-Regler** — Custom Slider von -1.0 (negativ) bis +1.0 (positiv)
- Visuelles Feedback: Slider-Track ändert Farbe (Blau/Kühl ← → Warm/Grün)
- Thumb-Farbe passt sich an
4. **Farbe anpassen** (optional) — Toggle + Color-Picker
- Default: aus (Emotion bestimmt Farbe)
- Es gibt vorgefertigte Farbverläufe für den emotions Leiter hier zum Beispiel Farbkombinationen
Verläufe
Nagativ -> neutral -> Positiv
#FD1D1D -> #FCB045 -> #833AB4
#ED8153 -> #ED8153 -> #217B9E
#00D4FF -> #164173 -> #440559
#FDBB2D -> #96BE74 -> #22C1C3
#FC466B -> #9A52B6 -> #3F5EFB
#EEAECA -> #C2B4D9 -> #94BBE9
5. **Notiz** — Textarea, optional, 3 Zeilen
6. **Speichern-Button** — Glass-Style, auffällig
### 4.3 — Live-Feedback (Der Wow-Moment)
**Ziel:** Während der User das Formular ausfüllt, erscheint in Echtzeit ein neuer Glow-Punkt im Hintergrund.
**Umsetzung:**
- Sobald das Panel geöffnet wird: ein "Ghost-Dot" (halbtransparent, pulsierend) erscheint auf der Wave
- **Emotions-Regler bewegen:** Ghost-Dot wandert auf der Y-Achse nach oben/unten, Glow-Farbe ändert sich live
- **Custom-Farbe wählen:** Glow-Farbe ändert sich sofort
- **Speichern:** Ghost-Dot wird zum festen Dot (Opacity 1.0, Puls-Animation → statisch), Verbindungslinie animiert sich zum neuen Punkt
- Ghost-Dot hat stärkere Puls-Animation als reguläre Dots
---
## Phase 5: Event bearbeiten & Detail-Ansicht
### 5.1 — Event-Detail (Tap auf Glow-Dot)
**Ziel:** Tap auf einen Glow-Dot öffnet eine kompakte Detail-Ansicht.
**Umsetzung:**
- Wiederverwendung des `EventPanel.vue` im "Edit-Modus"
- Panel fährt hoch, vorbelegt mit den Event-Daten
- Gleiche Felder wie beim Anlegen
- Zusätzlich: "Löschen"-Button (dezent, unten im Panel)
- Live-Feedback: Änderungen am Emotions-Regler / Farbe ändern den existierenden Dot in Echtzeit
### 5.2 — Dot-Selection-State
**Ziel:** Visuelles Feedback welcher Dot ausgewählt ist.
**Umsetzung:**
- Ausgewählter Dot bekommt:
- Vergrößerter Glow (Scale 1.3 mit Transition)
- Pulsierender Ring-Effekt (CSS Animation)
- Alle anderen Dots werden leicht gedimmt (Opacity 0.5)
---
## Phase 6: Smart-Panel & Einstellungen
### 6.1 — LifeWave-Einstellungen (User-Personalisierung)
**Ziel:** Der User kann seine Wave anpassen — das macht die App persönlich.
**Umsetzung:**
- Im User-Menü (Off-Canvas rechts) unter "Life Wave":
- **Wellen-Farben:** Gradient-Picker (2-4 Farben auswählen)
- **Wellen-Intensität:** Slider (lineCount: 4-20)
- **Wellen-Geschwindigkeit:** Slider (animationSpeed: 0.2-2.0)
- **Wellen-Stil:** Auswahl welche Waves aktiv sind (top/middle/bottom)
- Änderungen werden live auf die FloatingLines-Props angewendet
- Einstellungen im Pinia Store + localStorage persistiert
### 6.2 — Dark/Light Mode Toggle
**Ziel:** Nahtloser Wechsel zwischen Hell- und Dunkel-Modus.
**Umsetzung:**
- Toggle im User-Menü oder als kleines Icon neben dem User-Button
- Quasar Dark-Mode Plugin aktivieren (`$q.dark.toggle()`)
- CSS Custom Properties wechseln alle Farben
- FloatingLines `mixBlendMode` wechselt automatisch
- Hintergrundfarbe animiert den Übergang (300ms Transition)
---
## Datenmodell (Pinia Store)
### `src/stores/events.js`
```js
{
events: [
{
id: 'uuid',
title: 'Hochzeit von Lisa',
date: '2024-06-15',
emotion: 0.8, // -1.0 bis +1.0
customColor: null, // null = auto, '#FF00FF' = custom
note: 'Wunderschöner Tag im Garten...',
createdAt: timestamp,
updatedAt: timestamp,
},
]
}
```
### `src/stores/settings.js`
```js
{
theme: 'light', // 'light' | 'dark'
wave: {
gradient: ['#E94FF5', '#2F4BA2'],
lineCount: 12,
speed: 0.6,
enabledWaves: ['middle']
}
}
```
---
## Umsetzungsreihenfolge (Arbeitspakete)
| # | Paket | Abhängigkeit | Geschätzt |
| --- | --------------------------------------- | ------------ | ---------- |
| 1 | Phase 1.1 — LifeWaveLayout + Routing | — | Grundlage |
| 2 | Phase 1.2 — Glassmorphism CSS | — | Grundlage |
| 3 | Phase 3.1 — FloatingLines Fullscreen | #1 | Wow-Basis |
| 4 | Phase 2.1 — UserMenuButton | #1, #2 | Navigation |
| 5 | Phase 2.2 — AddEventButton | #1, #2 | Navigation |
| 6 | Phase 4.1 — EventPanel (Slide-Up, leer) | #2 | Panel |
| 7 | Datenmodell — Pinia Stores | — | Daten |
| 8 | Phase 3.2 — GlowDots | #3, #7 | Events |
| 9 | Phase 3.3 — LifeWavePath (Verbindungen) | #8 | Wave |
| 10 | Phase 4.2 — Event-Formular | #6, #7 | Eingabe |
| 11 | Phase 4.3 — Live-Feedback (Ghost-Dot) | #8, #10 | Wow! |
| 12 | Phase 5 — Event bearbeiten & Detail | #10, #8 | Edit |
| 13 | Phase 6.1 — LifeWave-Einstellungen | #3, #7 | Settings |
| 14 | Phase 6.2 — Dark/Light Mode | #1 | Theme |
---
## Demo-Daten für den Prototyp
8 Events vorbelegt — 4 mit Bildern, 4 ohne. Bilder liegen in `public/demo/`.
```js
;[
{ title: 'Erster Schultag', date: '1995-09-01', emotion: 0.6, image: null },
{
title: 'Abiball',
date: '2004-06-25',
emotion: 0.85,
image: 'demo/photo-1530103862676-de8c9debad1d.jpeg',
},
{ title: 'Trennung', date: '2010-03-15', emotion: -0.7, image: null },
{
title: 'Bergwanderung',
date: '2014-08-12',
emotion: 0.75,
image: 'demo/photo-1534067783941-51c9c23ecefd.jpeg',
},
{ title: 'Jobverlust', date: '2016-11-03', emotion: -0.6, image: null },
{
title: 'Hochzeit',
date: '2018-07-20',
emotion: 0.95,
customColor: '#E94FF5',
image: 'demo/photo-1506905925346-21bda4d32df4.jpeg',
},
{ title: 'Umzug', date: '2021-04-01', emotion: -0.3, image: null },
{
title: 'Neuer Job',
date: '2023-01-10',
emotion: 0.5,
image: 'demo/photo-1530103862676-de8c9debad1d.jpeg',
},
]
```
---
## Technische Hinweise
- **Three.js** ist bereits als Dependency vorhanden (über FloatingLines.vue)
- **Keine neuen Dependencies** nötig für Phase 1-5 (alles mit Quasar + CSS + SVG + Three.js machbar)
- **Performance:** GlowDots und LifeWavePath als separate Schicht ÜBER dem WebGL-Canvas (DOM, nicht WebGL) — einfacher zu implementieren, gute Performance bei <50 Events
- **Mobile-First:** Alle Maße in `dvh`/`dvw`, Touch-Events für Slider, Panel-Swipe

387
frontend/dev/UMSETZUNG-FLOATING-LINES.md Normal file
View file

@ -0,0 +1,387 @@
# FloatingLines Migration & Event-Integration
**Stand:** 20. Februar 2026
**Bereich:** Frontend (Quasar/Vue.js 3)
---
## 1. Zusammenfassung
Die alte LifeWave-Visualisierung (zwei Versionen: Spline + Glow) wurde komplett durch eine einzige **FloatingLines**-Implementierung ersetzt. Diese basiert auf einem WebGL-Fragment-Shader (Three.js), der animierte Bezier-Linien zwischen Event-Punkten zeichnet, inklusive farbiger Glow-Kreise pro Event.
### Was wurde gemacht
1. **Shader aus `dev/floating-lines.js` migriert** → `FloatingLines.vue`
2. **Settings aus `dev/init-fl.html` migriert** → `LifeWaveSettings.vue` + `settings.js` Store
3. **Event-Punkte mit Shader synchronisiert** — Shader-Kreise sitzen exakt auf den GlowDots
4. **Per-Event-Farben** — Jeder Shader-Kreis und jedes Liniensegment nutzt die Emotion-Farbe des Events
5. **GlowDot vereinfacht** — Nur noch weißer Kreis + Bild als Klick-Target, Glow kommt vom Shader
6. **Kreisgröße synchronisiert** — Settings-Slider steuert Shader-Kreis UND DOM-Dot
7. **Zoom entkoppelt** — Zoom ändert Abstände, nicht Kreisgrößen
### Gelöschte Dateien
- `LifeWavePath.vue` — Alte SVG-Pfad-Visualisierung
- `LifeWaveSpline.vue` — Alte Spline-Kurven-Variante
- `LifeWaveGlow.vue` — Alte Glow-Effekt-Variante
- `WaveSettings.vue` — Alte Settings (ersetzt durch `LifeWaveSettings.vue`)
---
## 2. Architektur-Übersicht
```
┌─────────────────────────────────────────────────────────┐
│ LifeWaveLayout.vue │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ FloatingLines.vue (WebGL Fullscreen) │ │
│ │ - Fragment Shader (GLSL) │ │
│ │ - Bezier-Linien zwischen Events │ │
│ │ - Glow-Kreise pro Event (pointColor[]) │ │
│ │ - Animierte Wellen │ │
│ │ - Background Gradient + optionales Bild │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ TimelineView.vue (scrollbar, z-index: 5) │ │
│ │ - Horizontales Scroll-Container │ │
│ │ - GlowDot pro Event (Klick-Target) │ │
│ │ - Monat/Jahr-Labels │ │
│ │ - Pinch-to-Zoom │ │
│ │ - Emittiert @view-update an Layout │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ Header | AddEventButton | EventPanel | LifeWaveSettings│
└─────────────────────────────────────────────────────────┘
```
---
## 3. Datenfluss
### 3.1 Event-Positionen → Shader
```
TimelineView LifeWaveLayout FloatingLines
───────────── ────────────── ──────────────
displayEvents ──@viewUpdate──► onViewUpdate()
(emotion, x, color) │
├─ shaderNumPoints (computed)
├─ shaderPointX[] (computed) ──► pointX[8] uniform
├─ shaderPointY[] (computed) ──► pointY[8] uniform
└─ shaderPointColors[] (comp.) ──► pointColor[8] uniform
```
**Koordinaten-Konvertierung (Screen → Shader UV):**
```js
// Layout: screenToUV(sx, sy)
// sx, sy = CSS-Pixel vom oberen linken Viewport-Rand
function screenToUV(sx, sy) {
const w = layoutWidth // = 100dvh Breite
const h = layoutHeight // = 100dvh Höhe
return {
x: (2 * sx - w) / h,
y: (2 * sy - h) / h
}
}
```
```glsl
// Shader: gleiche Formel
vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
baseUv.y *= -1.0; // Y-Flip (CSS: top→bottom, GL: bottom→top)
```
**GlowDot Y-Position:**
```
yPercent = 50 - emotion * 35
emotion +1.0 → top (15%)
emotion 0.0 → mitte (50%)
emotion -1.0 → unten (85%)
```
**Screen Y für Shader:**
```
TIMELINE_TOP = 60px (CSS: .timeline { top: 60px })
screenY = TIMELINE_TOP + (yPercent / 100) * containerHeight
```
### 3.2 Emotion-Slider → Live-Update
```
EventPanel Events Store TimelineView Shader
────────── ──────────── ──────────── ──────
v-model="ghostEmotion" ──► ghostEmotion (ref)
│
├─ watch → persistToEvent()
│ (updates events[])
│
└─ sortedEvents (computed) ──► displayEvents
│
└─ watch → emitViewState()
│
Layout: shaderPointY[]
Layout: shaderPointColors[]
│
FloatingLines: watch → uniform update
```
### 3.3 Event-Farben
Jeder Event hat eine Glow-Farbe basierend auf:
1. `event.customColor` (falls gesetzt, hat Priorität)
2. `emotionToColor(emotion, gradientPreset)` — interpoliert zwischen 3 Farben
```
events.js: getGlowColor(event)
→ customColor || emotionToColor(emotion, gradientPreset)
10 Gradient-Presets: Standard, Sunset, Earth, Ocean, Spring,
Neon, Pastel, Aurora, Forest, Berry
```
Die Farbe fließt als `pointColor[8]` Uniform in den Shader:
- **Kreise:** `vec3 circCol = pointColor[p]`
- **Liniensegmente:** `vec3 lineCol = mix(pointColor[s], pointColor[s+1], t_seg)`
---
## 4. Komponenten-Referenz
### 4.1 FloatingLines.vue
**Zweck:** Fullscreen WebGL-Hintergrund mit animierten Bezier-Linien und Glow-Kreisen.
**Technologie:** Three.js mit custom Fragment Shader (GLSL).
**Props:**
| Prop | Typ | Default | Beschreibung |
|------|-----|---------|-------------|
| `numPoints` | Number | 0 | Anzahl aktiver Punkte (max 8) |
| `pointXValues` | Array | [] | X-UV-Koordinaten der Punkte |
| `pointYValues` | Array | [] | Y-UV-Koordinaten der Punkte |
| `pointColors` | Array | [] | Hex-Farben pro Punkt (z.B. '#ff0000') |
| `lineCount` | Array/Number | [10] | Anzahl Wellenlinien |
| `animationSpeed` | Number | 1 | Geschwindigkeit der Wellenanimation |
| `lineSpread` | Number | 0.05 | Wellenamplitude |
| `fanSpread` | Number | 0.05 | Fächerbreite der Linien |
| `lineSharpness` | Number | 8.0 | Feinheit/Schärfe der Linien |
| `waveFrequency` | Number | 7.0 | Welligkeit |
| `bezierCurvature` | Number | 0.2 | Kurvenstärke der Bezier-Verbindungen |
| `circleRadiusPx` | Number | 75 | Kreisradius in Pixeln |
| `circleGlowSize` | Number | 18 | Glow-Ausdehnung um den Kreis |
| `circleGlowStrength` | Number | 1.5 | Glow-Intensität |
| `linesGradient` | Array | [...] | Hex-Farbwerte für Linien-Gradient |
| `bgColorCenter` | String | '#0a0514' | Hintergrundfarbe Mitte |
| `bgColorEdge` | String | '#000000' | Hintergrundfarbe Rand |
| `backgroundImage` | String | '' | URL für Hintergrundbild |
| `mixBlendMode` | String | 'screen' | CSS Blend-Mode des Canvas |
**Shader-Architektur:**
- `drawCircle()` — Zeichnet weißen Kern + farbigen Glow + Fog
- `waveFocal()` — Berechnet Wellenlinien entlang Bezier-Segmenten
- `bezierClosestT()` — Findet nächsten Punkt auf quadratischer Bezier-Kurve
- `mainImage()` — Compositing: Background + Segmente + Kreise
### 4.2 GlowDot.vue
**Zweck:** Klickbarer DOM-Overlay pro Event (weißer Kreis + optionales Bild).
**Größe:** Dynamisch aus `settingsStore.floatingLines.circleRadius`:
```js
const dpr = Math.min(window.devicePixelRatio || 1, 2)
const dotSize = 2 * circleRadius / dpr // Matches shader circle
```
**Kein Zoom-Scaling** — Größe ist konstant, unabhängig vom Zoom-Level.
**Props:** `event`, `x`, `isGhost`, `selected`
### 4.3 TimelineView.vue
**Zweck:** Horizontal scrollbarer Container mit GlowDots und Labels.
**CSS-Position:** `top: 60px; bottom: 70px` (unterhalb Header, oberhalb AddButton)
**Features:**
- Pinch-to-Zoom (Touch + Ctrl+Wheel)
- Zoom-Range: 0.4x – 3.0x
- Scroll-to-center beim Mount (letztes Event)
- Ghost-Event-Insertion bei Panel-Open (Create-Mode)
**Emits:**
- `@dotSelect(eventId)` — Event angeklickt
- `@viewUpdate({ scrollLeft, viewportWidth, containerHeight, events[] })` — Bei jedem Scroll/Zoom/Resize/Event-Change
### 4.4 LifeWaveLayout.vue
**Zweck:** Haupt-Layout, orchestriert alle Komponenten.
**Verantwortlichkeiten:**
- Empfängt `@view-update` von TimelineView
- Konvertiert Screen-Pixel → Shader-UV-Koordinaten
- Berechnet `shaderNumPoints`, `shaderPointX[]`, `shaderPointY[]`, `shaderPointColors[]`
- Reicht Settings-Store-Werte an FloatingLines weiter
- Parsed Gradient-Stops aus dem Textarea-String
**Wichtige Konstante:** `TIMELINE_TOP = 60` (muss mit `.timeline { top: 60px }` übereinstimmen)
### 4.5 LifeWaveSettings.vue
**Zweck:** Einstellungs-Panel (Slide-Up, 75dvh).
**Sektionen:**
1. **Linien** — Speed, Anzahl, Wellen-Amp, Fächerbreite, Feinheit, Welligkeit, Kurve, Kreis, Glow Größe, Glow Stärke
2. **Hintergrundbild** — 10 vordefinierte Bilder (`/images/bg-image-1.jpg` bis `10.jpg`)
3. **Hintergrundfarbe** — BG Mitte + BG Rand (Color Picker)
4. **Farbverlauf** — Textarea mit Hex-Werten (eine pro Zeile)
5. **Extras** — Dark/Light-Mode Toggle
6. **Reset** — Setzt alle Werte auf Defaults zurück
### 4.6 EventPanel.vue
**Zweck:** Event-Erstellung und -Bearbeitung (Slide-Up, 75dvh).
**Features:**
- Key Image Upload (Platzhalter)
- Titel-Input (inline, groß)
- Datum-Picker (QDate mit deutscher Locale)
- Emotion-Slider (-1 bis +1) mit Gradient-Track
- 10 Gradient-Presets + "Standard"-Option
- Beschreibungs-Textarea
- Weitere Medien (Platzhalter)
- Event löschen (nur Edit-Mode)
- Auto-Save: Änderungen werden sofort auf das Event persistiert
---
## 5. Stores
### 5.1 events.js
```js
// State
events // Array aller Events
selectedEventId // Aktuell ausgewählter Event (oder null)
panelOpen // Ob EventPanel offen ist
editingEventId // ID des Events im Edit-Mode (null = Create)
ghost* // Temporäre Felder für Live-Preview (ghostEmotion, ghostTitle, ...)
// Computed
ghostEvent // Computed Event-Objekt aus ghost-Feldern
sortedEvents // Nach Datum sortierte Events
// Methods
selectEvent(id), openPanel(eventId?), closePanel(), deleteEvent(id)
getGlowColor(event) // → Hex-Farbe basierend auf Emotion + Preset
```
**Demo-Daten:** 8 Events (1995–2023) mit verschiedenen Emotionen, Presets und Bildern.
### 5.2 settings.js
```js
// State
theme // 'light' | 'dark'
floatingLines // Objekt mit allen Shader-Parametern
// Methods
toggleTheme(), updateFloatingLines(changes), resetFloatingLines()
// Persistence
localStorage.setItem('thatsme-settings', JSON.stringify({...}))
```
**Defaults:** Siehe `FLOATING_LINES_DEFAULTS` in `settings.js`.
---
## 6. CSS-Architektur
### 6.1 Globale Styles (`app.scss`)
- `.glass--button` — Glasmorphismus für Buttons (blur + transparenter Hintergrund)
- `.glass--panel` — Glasmorphismus für Slide-Up-Panels
- Light: `background: rgba(255,255,255,0.7); color: #1a1a1a`
- Dark: `background: rgba(30,30,30,0.7); color: #f5f5f5`
### 6.2 Quasar Theme (`quasar.variables.scss`)
```scss
$primary : #d946ef; // Fuchsia — Slider, Toggles, aktive States
$secondary : #a855f7; // Purple
$accent : #ec4899; // Pink
```
### 6.3 Wichtige CSS-Hinweise
**Timeline-Positionierung:**
```css
/* TimelineView.vue — eigene Positionierung */
.timeline { position: absolute; top: 60px; bottom: 70px; }
/* LifeWaveLayout.vue — NUR z-index, KEIN inset: 0! */
/* inset: 0 würde top/bottom der Timeline überschreiben (CSS Cascade) */
.lifewave-layout__timeline { z-index: 5; }
```
**GlowDot — kein Zoom-Scaling:**
```css
.glow-dot { transform: translate(-50%, -50%); }
/* Breite/Höhe kommt dynamisch aus dem Settings-Store */
```
---
## 7. Bekannte Einschränkungen
1. **Max 8 Events im Shader** — `pointX[8]`, `pointY[8]`, `pointColor[8]` sind fest auf 8 begrenzt. Bei mehr als 8 Events werden nur die ersten 8 als Shader-Punkte dargestellt.
2. **Bilder nur als Demo** — Key-Image-Upload und Medien-Upload sind Platzhalter (TODO).
3. **Kein Backend-Sync** — Alle Daten liegen nur lokal (Demo-Events + localStorage für Settings).
4. **DPR-Abhängigkeit** — Die GlowDot-Größe wird einmalig beim Mount aus `window.devicePixelRatio` berechnet. Bei Wechsel zwischen Displays (z.B. Retina → Nicht-Retina) stimmt die Größe nicht mehr exakt.
5. **Hintergrundbilder** — Müssen unter `/images/bg-image-{1-10}.jpg` auf dem Webspace liegen.
---
## 8. Entwicklung fortsetzen
### Dev-Server starten
```bash
# Im Docker-Container quasar.app:
npm run dev
# → http://app.thats-me.test:9000
```
### Produktions-Build
```bash
npm run build
# → Output: frontend/dist/spa/
# Statisches SPA, einfach hochladen
```
### Dateien für die Weiterentwicklung
| Was | Wo |
|-----|-----|
| Shader-Code (GLSL) | `FloatingLines.vue` (Zeile ~67–366) |
| UV-Konvertierung | `LifeWaveLayout.vue` → `screenToUV()` |
| Event-Farben | `events.js` → `emotionToColor()`, `getGlowColor()` |
| Settings-Defaults | `settings.js` → `FLOATING_LINES_DEFAULTS` |
| Slider-Ranges | `LifeWaveSettings.vue` (`:min`, `:max`, `:step` auf jedem `q-slider`) |
| Quasar-Theme | `quasar.variables.scss` |
| Glass-Styles | `app.scss` → `.glass--panel`, `.glass--button` |
| Dev-Referenz | `dev/init-fl.html`, `dev/floating-lines.js` (Original-Prototyp) |
### Nächste Schritte (offen)
- [ ] Key-Image-Upload implementieren (Camera/File-Picker → IndexedDB/S3)
- [ ] Medien-Gallery pro Event
- [ ] Backend-Sync über Laravel REST API
- [ ] Mehr als 8 Events im Shader unterstützen (dynamisches Chunking oder LOD)
- [ ] Touch-Gesten: Long-Press auf GlowDot für Kontextmenü
- [ ] Onboarding / Leer-Zustand wenn keine Events vorhanden

457
frontend/dev/floating-lines copy 2.js Normal file
View file

@ -0,0 +1,457 @@
import {
Scene,
OrthographicCamera,
WebGLRenderer,
PlaneGeometry,
Mesh,
ShaderMaterial,
Vector3,
Vector2,
Clock,
} from 'three'
const vertexShader = `
precision highp float;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`
const fragmentShader = `
precision highp float;
uniform float iTime;
uniform vec3 iResolution;
uniform float animationSpeed;
uniform bool enableTop;
uniform bool enableMiddle;
uniform bool enableBottom;
uniform int topLineCount;
uniform int middleLineCount;
uniform int bottomLineCount;
uniform float topLineDistance;
uniform float middleLineDistance;
uniform float bottomLineDistance;
uniform vec3 topWavePosition;
uniform vec3 middleWavePosition;
uniform vec3 bottomWavePosition;
uniform vec2 iMouse;
uniform bool interactive;
uniform float bendRadius;
uniform float bendStrength;
uniform float bendInfluence;
uniform bool parallax;
uniform float parallaxStrength;
uniform vec2 parallaxOffset;
uniform vec3 lineGradient[8];
uniform int lineGradientCount;
const vec3 BLACK = vec3(0.0);
const vec3 PINK = vec3(233.0, 71.0, 245.0) / 255.0;
const vec3 BLUE = vec3(47.0, 75.0, 162.0) / 255.0;
mat2 rotate(float r) {
return mat2(cos(r), sin(r), -sin(r), cos(r));
}
vec3 background_color(vec2 uv) {
vec3 col = vec3(0.0);
float y = sin(uv.x - 0.2) * 0.3 - 0.1;
float m = uv.y - y;
col += mix(BLUE, BLACK, smoothstep(0.0, 1.0, abs(m)));
col += mix(PINK, BLACK, smoothstep(0.0, 1.0, abs(m - 0.8)));
return col * 0.5;
}
vec3 getLineColor(float t, vec3 baseColor) {
if (lineGradientCount <= 0) {
return baseColor;
}
vec3 gradientColor;
if (lineGradientCount == 1) {
gradientColor = lineGradient[0];
} else {
float clampedT = clamp(t, 0.0, 0.9999);
float scaled = clampedT * float(lineGradientCount - 1);
int idx = int(floor(scaled));
float f = fract(scaled);
int idx2 = min(idx + 1, lineGradientCount - 1);
vec3 c1 = lineGradient[idx];
vec3 c2 = lineGradient[idx2];
gradientColor = mix(c1, c2, f);
}
return gradientColor * 0.5;
}
float wave(vec2 uv, float offset, vec2 screenUv, vec2 mouseUv, bool shouldBend) {
float time = iTime * animationSpeed;
float x_offset = offset;
float x_movement = time * 0.1;
float amp = sin(offset + time * 0.2) * 0.3;
float y = sin(uv.x + x_offset + x_movement) * amp;
if (shouldBend) {
vec2 d = screenUv - mouseUv;
float influence = exp(-dot(d, d) * bendRadius);
float bendOffset = (mouseUv.y - screenUv.y) * influence * bendStrength * bendInfluence;
y += bendOffset;
}
float m = uv.y - y;
return 0.0175 / max(abs(m) + 0.01, 1e-3) + 0.01;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
baseUv.y *= -1.0;
if (parallax) {
baseUv += parallaxOffset;
}
vec3 col = vec3(0.0);
vec3 b = lineGradientCount > 0 ? vec3(0.0) : background_color(baseUv);
vec2 mouseUv = vec2(0.0);
if (interactive) {
mouseUv = (2.0 * iMouse - iResolution.xy) / iResolution.y;
mouseUv.y *= -1.0;
}
if (enableBottom) {
for (int i = 0; i < bottomLineCount; ++i) {
float fi = float(i);
float t = fi / max(float(bottomLineCount - 1), 1.0);
vec3 lineCol = getLineColor(t, b);
float angle = bottomWavePosition.z * log(length(baseUv) + 1.0);
vec2 ruv = baseUv * rotate(angle);
col += lineCol * wave(
ruv + vec2(bottomLineDistance * fi + bottomWavePosition.x, bottomWavePosition.y),
1.5 + 0.2 * fi,
baseUv,
mouseUv,
interactive
) * 0.2;
}
}
if (enableMiddle) {
for (int i = 0; i < middleLineCount; ++i) {
float fi = float(i);
float t = fi / max(float(middleLineCount - 1), 1.0);
vec3 lineCol = getLineColor(t, b);
float angle = middleWavePosition.z * log(length(baseUv) + 1.0);
vec2 ruv = baseUv * rotate(angle);
col += lineCol * wave(
ruv + vec2(middleLineDistance * fi + middleWavePosition.x, middleWavePosition.y),
2.0 + 0.15 * fi,
baseUv,
mouseUv,
interactive
);
}
}
if (enableTop) {
for (int i = 0; i < topLineCount; ++i) {
float fi = float(i);
float t = fi / max(float(topLineCount - 1), 1.0);
vec3 lineCol = getLineColor(t, b);
float angle = topWavePosition.z * log(length(baseUv) + 1.0);
vec2 ruv = baseUv * rotate(angle);
ruv.x *= -1.0;
col += lineCol * wave(
ruv + vec2(topLineDistance * fi + topWavePosition.x, topWavePosition.y),
1.0 + 0.2 * fi,
baseUv,
mouseUv,
interactive
) * 0.1;
}
}
fragColor = vec4(col, 1.0);
}
void main() {
vec4 color = vec4(0.0);
mainImage(color, gl_FragCoord.xy);
gl_FragColor = color;
}
`
const MAX_GRADIENT_STOPS = 8
function hexToVec3(hex) {
let value = hex.trim()
if (value.startsWith('#')) {
value = value.slice(1)
}
let r = 255
let g = 255
let b = 255
if (value.length === 3) {
r = parseInt(value[0] + value[0], 16)
g = parseInt(value[1] + value[1], 16)
b = parseInt(value[2] + value[2], 16)
} else if (value.length === 6) {
r = parseInt(value.slice(0, 2), 16)
g = parseInt(value.slice(2, 4), 16)
b = parseInt(value.slice(4, 6), 16)
}
return new Vector3(r / 255, g / 255, b / 255)
}
export default class FloatingLines {
constructor(
container,
{
linesGradient,
enabledWaves = ['top', 'middle', 'bottom'],
lineCount = [6],
lineDistance = [5],
topWavePosition,
middleWavePosition,
bottomWavePosition = { x: 2.0, y: -0.7, rotate: -1 },
animationSpeed = 1,
interactive = true,
bendRadius = 5.0,
bendStrength = -0.5,
mouseDamping = 0.05,
parallax = true,
parallaxStrength = 0.2,
mixBlendMode = 'screen',
} = {},
) {
this.container = container
this.interactive = interactive
this.parallax = parallax
this.mouseDamping = mouseDamping
this.parallaxStrength = parallaxStrength
this.targetMouse = new Vector2(-1000, -1000)
this.currentMouse = new Vector2(-1000, -1000)
this.targetInfluence = 0
this.currentInfluence = 0
this.targetParallax = new Vector2(0, 0)
this.currentParallax = new Vector2(0, 0)
const getLineCount = (waveType) => {
if (typeof lineCount === 'number') return lineCount
if (!enabledWaves.includes(waveType)) return 0
const index = enabledWaves.indexOf(waveType)
return lineCount[index] ?? 6
}
const getLineDistance = (waveType) => {
if (typeof lineDistance === 'number') return lineDistance
if (!enabledWaves.includes(waveType)) return 0.1
const index = enabledWaves.indexOf(waveType)
return lineDistance[index] ?? 0.1
}
const topLineCount = enabledWaves.includes('top') ? getLineCount('top') : 0
const middleLineCount = enabledWaves.includes('middle') ? getLineCount('middle') : 0
const bottomLineCount = enabledWaves.includes('bottom') ? getLineCount('bottom') : 0
const topLineDistance = enabledWaves.includes('top') ? getLineDistance('top') * 0.01 : 0.01
const middleLineDistance = enabledWaves.includes('middle')
? getLineDistance('middle') * 0.01
: 0.01
const bottomLineDistance = enabledWaves.includes('bottom')
? getLineDistance('bottom') * 0.01
: 0.01
this.scene = new Scene()
this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
this.camera.position.z = 1
this.renderer = new WebGLRenderer({ antialias: true, alpha: false })
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2))
this.renderer.domElement.style.width = '100%'
this.renderer.domElement.style.height = '100%'
this.renderer.domElement.style.mixBlendMode = mixBlendMode
container.appendChild(this.renderer.domElement)
this.uniforms = {
iTime: { value: 0 },
iResolution: { value: new Vector3(1, 1, 1) },
animationSpeed: { value: animationSpeed },
enableTop: { value: enabledWaves.includes('top') },
enableMiddle: { value: enabledWaves.includes('middle') },
enableBottom: { value: enabledWaves.includes('bottom') },
topLineCount: { value: topLineCount },
middleLineCount: { value: middleLineCount },
bottomLineCount: { value: bottomLineCount },
topLineDistance: { value: topLineDistance },
middleLineDistance: { value: middleLineDistance },
bottomLineDistance: { value: bottomLineDistance },
topWavePosition: {
value: new Vector3(
topWavePosition?.x ?? 10.0,
topWavePosition?.y ?? 0.5,
topWavePosition?.rotate ?? -0.4,
),
},
middleWavePosition: {
value: new Vector3(
middleWavePosition?.x ?? 5.0,
middleWavePosition?.y ?? 0.0,
middleWavePosition?.rotate ?? 0.2,
),
},
bottomWavePosition: {
value: new Vector3(
bottomWavePosition?.x ?? 2.0,
bottomWavePosition?.y ?? -0.7,
bottomWavePosition?.rotate ?? 0.4,
),
},
iMouse: { value: new Vector2(-1000, -1000) },
interactive: { value: interactive },
bendRadius: { value: bendRadius },
bendStrength: { value: bendStrength },
bendInfluence: { value: 0 },
parallax: { value: parallax },
parallaxStrength: { value: parallaxStrength },
parallaxOffset: { value: new Vector2(0, 0) },
lineGradient: {
value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1)),
},
lineGradientCount: { value: 0 },
}
if (linesGradient && linesGradient.length > 0) {
const stops = linesGradient.slice(0, MAX_GRADIENT_STOPS)
this.uniforms.lineGradientCount.value = stops.length
stops.forEach((hex, i) => {
const color = hexToVec3(hex)
this.uniforms.lineGradient.value[i].set(color.x, color.y, color.z)
})
}
const material = new ShaderMaterial({
uniforms: this.uniforms,
vertexShader,
fragmentShader,
})
const geometry = new PlaneGeometry(2, 2)
this.mesh = new Mesh(geometry, material)
this.scene.add(this.mesh)
this.geometry = geometry
this.material = material
this.clock = new Clock()
this._setSize = () => {
const width = container.clientWidth || 1
const height = container.clientHeight || 1
this.renderer.setSize(width, height, false)
const canvasWidth = this.renderer.domElement.width
const canvasHeight = this.renderer.domElement.height
this.uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1)
}
this._setSize()
this.ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(this._setSize) : null
if (this.ro) this.ro.observe(container)
this._handlePointerMove = (event) => {
const rect = this.renderer.domElement.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
const dpr = this.renderer.getPixelRatio()
this.targetMouse.set(x * dpr, (rect.height - y) * dpr)
this.targetInfluence = 1.0
if (this.parallax) {
const centerX = rect.width / 2
const centerY = rect.height / 2
const offsetX = (x - centerX) / rect.width
const offsetY = -(y - centerY) / rect.height
this.targetParallax.set(
offsetX * this.parallaxStrength,
offsetY * this.parallaxStrength,
)
}
}
this._handlePointerLeave = () => {
this.targetInfluence = 0.0
}
this.renderer.domElement.addEventListener('pointermove', this._handlePointerMove)
this.renderer.domElement.addEventListener('pointerleave', this._handlePointerLeave)
this.raf = 0
const renderLoop = () => {
this.uniforms.iTime.value = this.clock.getElapsedTime()
if (this.interactive) {
this.currentMouse.lerp(this.targetMouse, this.mouseDamping)
this.uniforms.iMouse.value.copy(this.currentMouse)
this.currentInfluence += (this.targetInfluence - this.currentInfluence) * this.mouseDamping
this.uniforms.bendInfluence.value = this.currentInfluence
}
if (this.parallax) {
this.currentParallax.lerp(this.targetParallax, this.mouseDamping)
this.uniforms.parallaxOffset.value.copy(this.currentParallax)
}
this.renderer.render(this.scene, this.camera)
this.raf = requestAnimationFrame(renderLoop)
}
renderLoop()
}
destroy() {
cancelAnimationFrame(this.raf)
if (this.ro) this.ro.disconnect()
this.renderer.domElement.removeEventListener('pointermove', this._handlePointerMove)
this.renderer.domElement.removeEventListener('pointerleave', this._handlePointerLeave)
this.geometry.dispose()
this.material.dispose()
this.renderer.dispose()
if (this.renderer.domElement.parentElement) {
this.renderer.domElement.parentElement.removeChild(this.renderer.domElement)
}
}
}

457
frontend/dev/floating-lines copy.js Normal file
View file

@ -0,0 +1,457 @@
import {
Scene,
OrthographicCamera,
WebGLRenderer,
PlaneGeometry,
Mesh,
ShaderMaterial,
Vector3,
Vector2,
Clock,
} from 'three'
const vertexShader = `
precision highp float;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`
const fragmentShader = `
precision highp float;
uniform float iTime;
uniform vec3 iResolution;
uniform float animationSpeed;
uniform bool enableTop;
uniform bool enableMiddle;
uniform bool enableBottom;
uniform int topLineCount;
uniform int middleLineCount;
uniform int bottomLineCount;
uniform float topLineDistance;
uniform float middleLineDistance;
uniform float bottomLineDistance;
uniform vec3 topWavePosition;
uniform vec3 middleWavePosition;
uniform vec3 bottomWavePosition;
uniform vec2 iMouse;
uniform bool interactive;
uniform float bendRadius;
uniform float bendStrength;
uniform float bendInfluence;
uniform bool parallax;
uniform float parallaxStrength;
uniform vec2 parallaxOffset;
uniform vec3 lineGradient[8];
uniform int lineGradientCount;
const vec3 BLACK = vec3(0.0);
const vec3 PINK = vec3(233.0, 71.0, 245.0) / 255.0;
const vec3 BLUE = vec3(47.0, 75.0, 162.0) / 255.0;
mat2 rotate(float r) {
return mat2(cos(r), sin(r), -sin(r), cos(r));
}
vec3 background_color(vec2 uv) {
vec3 col = vec3(0.0);
float y = sin(uv.x - 0.2) * 0.3 - 0.1;
float m = uv.y - y;
col += mix(BLUE, BLACK, smoothstep(0.0, 1.0, abs(m)));
col += mix(PINK, BLACK, smoothstep(0.0, 1.0, abs(m - 0.8)));
return col * 0.5;
}
vec3 getLineColor(float t, vec3 baseColor) {
if (lineGradientCount <= 0) {
return baseColor;
}
vec3 gradientColor;
if (lineGradientCount == 1) {
gradientColor = lineGradient[0];
} else {
float clampedT = clamp(t, 0.0, 0.9999);
float scaled = clampedT * float(lineGradientCount - 1);
int idx = int(floor(scaled));
float f = fract(scaled);
int idx2 = min(idx + 1, lineGradientCount - 1);
vec3 c1 = lineGradient[idx];
vec3 c2 = lineGradient[idx2];
gradientColor = mix(c1, c2, f);
}
return gradientColor * 0.5;
}
float wave(vec2 uv, float offset, vec2 screenUv, vec2 mouseUv, bool shouldBend) {
float time = iTime * animationSpeed;
float x_offset = offset;
float x_movement = time * 0.1;
float amp = sin(offset + time * 0.2) * 0.3;
float y = sin(uv.x + x_offset + x_movement) * amp;
if (shouldBend) {
vec2 d = screenUv - mouseUv;
float influence = exp(-dot(d, d) * bendRadius);
float bendOffset = (mouseUv.y - screenUv.y) * influence * bendStrength * bendInfluence;
y += bendOffset;
}
float m = uv.y - y;
return 0.0175 / max(abs(m) + 0.01, 1e-3) + 0.01;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
baseUv.y *= -1.0;
if (parallax) {
baseUv += parallaxOffset;
}
vec3 col = vec3(0.0);
vec3 b = lineGradientCount > 0 ? vec3(0.0) : background_color(baseUv);
vec2 mouseUv = vec2(0.0);
if (interactive) {
mouseUv = (2.0 * iMouse - iResolution.xy) / iResolution.y;
mouseUv.y *= -1.0;
}
if (enableBottom) {
for (int i = 0; i < bottomLineCount; ++i) {
float fi = float(i);
float t = fi / max(float(bottomLineCount - 1), 1.0);
vec3 lineCol = getLineColor(t, b);
float angle = bottomWavePosition.z * log(length(baseUv) + 1.0);
vec2 ruv = baseUv * rotate(angle);
col += lineCol * wave(
ruv + vec2(bottomLineDistance * fi + bottomWavePosition.x, bottomWavePosition.y),
1.5 + 0.2 * fi,
baseUv,
mouseUv,
interactive
) * 0.2;
}
}
if (enableMiddle) {
for (int i = 0; i < middleLineCount; ++i) {
float fi = float(i);
float t = fi / max(float(middleLineCount - 1), 1.0);
vec3 lineCol = getLineColor(t, b);
float angle = middleWavePosition.z * log(length(baseUv) + 1.0);
vec2 ruv = baseUv * rotate(angle);
col += lineCol * wave(
ruv + vec2(middleLineDistance * fi + middleWavePosition.x, middleWavePosition.y),
2.0 + 0.15 * fi,
baseUv,
mouseUv,
interactive
);
}
}
if (enableTop) {
for (int i = 0; i < topLineCount; ++i) {
float fi = float(i);
float t = fi / max(float(topLineCount - 1), 1.0);
vec3 lineCol = getLineColor(t, b);
float angle = topWavePosition.z * log(length(baseUv) + 1.0);
vec2 ruv = baseUv * rotate(angle);
ruv.x *= -1.0;
col += lineCol * wave(
ruv + vec2(topLineDistance * fi + topWavePosition.x, topWavePosition.y),
1.0 + 0.2 * fi,
baseUv,
mouseUv,
interactive
) * 0.1;
}
}
fragColor = vec4(col, 1.0);
}
void main() {
vec4 color = vec4(0.0);
mainImage(color, gl_FragCoord.xy);
gl_FragColor = color;
}
`
const MAX_GRADIENT_STOPS = 8
function hexToVec3(hex) {
let value = hex.trim()
if (value.startsWith('#')) {
value = value.slice(1)
}
let r = 255
let g = 255
let b = 255
if (value.length === 3) {
r = parseInt(value[0] + value[0], 16)
g = parseInt(value[1] + value[1], 16)
b = parseInt(value[2] + value[2], 16)
} else if (value.length === 6) {
r = parseInt(value.slice(0, 2), 16)
g = parseInt(value.slice(2, 4), 16)
b = parseInt(value.slice(4, 6), 16)
}
return new Vector3(r / 255, g / 255, b / 255)
}
export default class FloatingLines {
constructor(
container,
{
linesGradient,
enabledWaves = ['top', 'middle', 'bottom'],
lineCount = [6],
lineDistance = [5],
topWavePosition,
middleWavePosition,
bottomWavePosition = { x: 2.0, y: -0.7, rotate: -1 },
animationSpeed = 1,
interactive = true,
bendRadius = 5.0,
bendStrength = -0.5,
mouseDamping = 0.05,
parallax = true,
parallaxStrength = 0.2,
mixBlendMode = 'screen',
} = {},
) {
this.container = container
this.interactive = interactive
this.parallax = parallax
this.mouseDamping = mouseDamping
this.targetMouse = new Vector2(-1000, -1000)
this.currentMouse = new Vector2(-1000, -1000)
this.targetInfluence = 0
this.currentInfluence = 0
this.targetParallax = new Vector2(0, 0)
this.currentParallax = new Vector2(0, 0)
const getLineCount = (waveType) => {
if (typeof lineCount === 'number') return lineCount
if (!enabledWaves.includes(waveType)) return 0
const index = enabledWaves.indexOf(waveType)
return lineCount[index] ?? 6
}
const getLineDistance = (waveType) => {
if (typeof lineDistance === 'number') return lineDistance
if (!enabledWaves.includes(waveType)) return 0.1
const index = enabledWaves.indexOf(waveType)
return lineDistance[index] ?? 0.1
}
const topLineCount = enabledWaves.includes('top') ? getLineCount('top') : 0
const middleLineCount = enabledWaves.includes('middle') ? getLineCount('middle') : 0
const bottomLineCount = enabledWaves.includes('bottom') ? getLineCount('bottom') : 0
const topLineDistance = enabledWaves.includes('top') ? getLineDistance('top') * 0.01 : 0.01
const middleLineDistance = enabledWaves.includes('middle')
? getLineDistance('middle') * 0.01
: 0.01
const bottomLineDistance = enabledWaves.includes('bottom')
? getLineDistance('bottom') * 0.01
: 0.01
this.scene = new Scene()
this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
this.camera.position.z = 1
this.renderer = new WebGLRenderer({ antialias: true, alpha: false })
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2))
this.renderer.domElement.style.width = '100%'
this.renderer.domElement.style.height = '100%'
this.renderer.domElement.style.mixBlendMode = mixBlendMode
container.appendChild(this.renderer.domElement)
this.uniforms = {
iTime: { value: 0 },
iResolution: { value: new Vector3(1, 1, 1) },
animationSpeed: { value: animationSpeed },
enableTop: { value: enabledWaves.includes('top') },
enableMiddle: { value: enabledWaves.includes('middle') },
enableBottom: { value: enabledWaves.includes('bottom') },
topLineCount: { value: topLineCount },
middleLineCount: { value: middleLineCount },
bottomLineCount: { value: bottomLineCount },
topLineDistance: { value: topLineDistance },
middleLineDistance: { value: middleLineDistance },
bottomLineDistance: { value: bottomLineDistance },
topWavePosition: {
value: new Vector3(
topWavePosition?.x ?? 10.0,
topWavePosition?.y ?? 0.5,
topWavePosition?.rotate ?? -0.4,
),
},
middleWavePosition: {
value: new Vector3(
middleWavePosition?.x ?? 5.0,
middleWavePosition?.y ?? 0.0,
middleWavePosition?.rotate ?? 0.2,
),
},
bottomWavePosition: {
value: new Vector3(
bottomWavePosition?.x ?? 2.0,
bottomWavePosition?.y ?? -0.7,
bottomWavePosition?.rotate ?? 0.4,
),
},
iMouse: { value: new Vector2(-1000, -1000) },
interactive: { value: interactive },
bendRadius: { value: bendRadius },
bendStrength: { value: bendStrength },
bendInfluence: { value: 0 },
parallax: { value: parallax },
parallaxStrength: { value: parallaxStrength },
parallaxOffset: { value: new Vector2(0, 0) },
lineGradient: {
value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1)),
},
lineGradientCount: { value: 0 },
}
if (linesGradient && linesGradient.length > 0) {
const stops = linesGradient.slice(0, MAX_GRADIENT_STOPS)
this.uniforms.lineGradientCount.value = stops.length
stops.forEach((hex, i) => {
const color = hexToVec3(hex)
this.uniforms.lineGradient.value[i].set(color.x, color.y, color.z)
})
}
const material = new ShaderMaterial({
uniforms: this.uniforms,
vertexShader,
fragmentShader,
})
const geometry = new PlaneGeometry(2, 2)
this.mesh = new Mesh(geometry, material)
this.scene.add(this.mesh)
this.geometry = geometry
this.material = material
this.clock = new Clock()
this._setSize = () => {
const width = container.clientWidth || 1
const height = container.clientHeight || 1
this.renderer.setSize(width, height, false)
const canvasWidth = this.renderer.domElement.width
const canvasHeight = this.renderer.domElement.height
this.uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1)
}
this._setSize()
this.ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(this._setSize) : null
if (this.ro) this.ro.observe(container)
this._handlePointerMove = (event) => {
const rect = this.renderer.domElement.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
const dpr = this.renderer.getPixelRatio()
this.targetMouse.set(x * dpr, (rect.height - y) * dpr)
this.targetInfluence = 1.0
if (parallax) {
const centerX = rect.width / 2
const centerY = rect.height / 2
const offsetX = (x - centerX) / rect.width
const offsetY = -(y - centerY) / rect.height
this.targetParallax.set(offsetX * parallaxStrength, offsetY * parallaxStrength)
}
}
this._handlePointerLeave = () => {
this.targetInfluence = 0.0
}
if (interactive) {
this.renderer.domElement.addEventListener('pointermove', this._handlePointerMove)
this.renderer.domElement.addEventListener('pointerleave', this._handlePointerLeave)
}
this.raf = 0
const renderLoop = () => {
this.uniforms.iTime.value = this.clock.getElapsedTime()
if (interactive) {
this.currentMouse.lerp(this.targetMouse, mouseDamping)
this.uniforms.iMouse.value.copy(this.currentMouse)
this.currentInfluence += (this.targetInfluence - this.currentInfluence) * mouseDamping
this.uniforms.bendInfluence.value = this.currentInfluence
}
if (parallax) {
this.currentParallax.lerp(this.targetParallax, mouseDamping)
this.uniforms.parallaxOffset.value.copy(this.currentParallax)
}
this.renderer.render(this.scene, this.camera)
this.raf = requestAnimationFrame(renderLoop)
}
renderLoop()
}
destroy() {
cancelAnimationFrame(this.raf)
if (this.ro) this.ro.disconnect()
if (this.interactive) {
this.renderer.domElement.removeEventListener('pointermove', this._handlePointerMove)
this.renderer.domElement.removeEventListener('pointerleave', this._handlePointerLeave)
}
this.geometry.dispose()
this.material.dispose()
this.renderer.dispose()
if (this.renderer.domElement.parentElement) {
this.renderer.domElement.parentElement.removeChild(this.renderer.domElement)
}
}
}

610
frontend/dev/floating-lines.js Normal file
View file

@ -0,0 +1,610 @@
import {
Scene,
OrthographicCamera,
WebGLRenderer,
PlaneGeometry,
Mesh,
ShaderMaterial,
Vector3,
Vector2,
Clock,
} from 'three'
const vertexShader = `
precision highp float;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`
const fragmentShader = `
precision highp float;
uniform float iTime;
uniform vec3 iResolution;
uniform float animationSpeed;
uniform bool enableTop;
uniform bool enableMiddle;
uniform bool enableBottom;
uniform int topLineCount;
uniform int middleLineCount;
uniform int bottomLineCount;
uniform float topLineDistance;
uniform float bottomLineDistance;
uniform vec3 topWavePosition;
uniform vec3 bottomWavePosition;
uniform int numPoints;
uniform float pointSpacingX;
uniform float pointsOffsetX;
uniform float pointY[8];
uniform float lineSpread;
uniform float fanSpread;
uniform float lineSharpness;
uniform float waveFrequency;
uniform float bezierCurvature;
uniform float circleRadiusPx;
uniform float circleGlowSize;
uniform float circleGlowStrength;
uniform vec2 iMouse;
uniform bool interactive;
uniform float bendRadius;
uniform float bendStrength;
uniform float bendInfluence;
uniform bool parallax;
uniform float parallaxStrength;
uniform vec2 parallaxOffset;
uniform vec3 lineGradient[8];
uniform int lineGradientCount;
uniform vec3 bgColorCenter;
uniform vec3 bgColorEdge;
const vec3 BLACK = vec3(0.0);
const vec3 PINK = vec3(233.0, 71.0, 245.0) / 255.0;
const vec3 BLUE = vec3(47.0, 75.0, 162.0) / 255.0;
mat2 rotate(float r) {
return mat2(cos(r), sin(r), -sin(r), cos(r));
}
vec3 background_color(vec2 uv) {
vec3 col = vec3(0.0);
float y = sin(uv.x - 0.2) * 0.3 - 0.1;
float m = uv.y - y;
col += mix(BLUE, BLACK, smoothstep(0.0, 1.0, abs(m)));
col += mix(PINK, BLACK, smoothstep(0.0, 1.0, abs(m - 0.8)));
return col * 0.5;
}
vec3 getLineColor(float t, vec3 baseColor) {
if (lineGradientCount <= 0) {
return baseColor;
}
vec3 gradientColor;
if (lineGradientCount == 1) {
gradientColor = lineGradient[0];
} else {
float clampedT = clamp(t, 0.0, 0.9999);
float scaled = clampedT * float(lineGradientCount - 1);
int idx = int(floor(scaled));
float f = fract(scaled);
int idx2 = min(idx + 1, lineGradientCount - 1);
vec3 c1 = lineGradient[idx];
vec3 c2 = lineGradient[idx2];
gradientColor = mix(c1, c2, f);
}
return gradientColor * 0.5;
}
vec3 drawCircle(vec2 uv, vec2 center, float r, vec3 color) {
float d = length(uv - center);
// Glow: Größe und Stärke per Uniform steuerbar
float glowW = circleGlowSize / iResolution.y * 2.0;
float glow = exp(-pow(max(d - r, 0.0) / glowW, 2.0)) * circleGlowStrength;
float fog = 0.008 / max(d * d * 3.0 + 0.016, 0.001);
// Weißer Kreis: harte Kante, 1px Antialiasing
float aa = 1.5 / iResolution.y;
float core = 1.0 - smoothstep(r - aa, r + aa, d);
// Glow nur außerhalb des weißen Kreises
vec3 result = color * (glow + fog) * (1.0 - core);
result += vec3(core);
return result;
}
// Nächsten t-Parameter auf quadratischer Bézier (Newton + Coarse-Search)
float bezierClosestT(vec2 q, vec2 p0, vec2 pc, vec2 p1) {
// Grobe Suche über 8 Samples für guten Startwert
float bestT = 0.0;
float bestD = 1e9;
for (int k = 0; k <= 8; ++k) {
float t = float(k) / 8.0;
float mt = 1.0 - t;
vec2 b = mt*mt*p0 + 2.0*mt*t*pc + t*t*p1;
float d = dot(q - b, q - b);
if (d < bestD) { bestD = d; bestT = t; }
}
// Newton-Verfahren: minimiert |B(t)-q|²
// f(t) = a·t³ + b·t² + c·t + d, f'(t) = 3a·t² + 2b·t + c
vec2 A = pc - p0;
vec2 B = p0 - 2.0*pc + p1;
vec2 D = p0 - q;
float a = 2.0*dot(B,B);
float bco = 6.0*dot(A,B);
float c = 4.0*dot(A,A) + 2.0*dot(D,B);
float dco = 2.0*dot(D,A);
// Etwas breiterer Bereich erlaubt leichten Überlauf in benachbarte Segmente
float t = clamp(bestT, 0.001, 0.999);
for (int k = 0; k < 4; ++k) {
float f = a*t*t*t + bco*t*t + c*t + dco;
float fp = 3.0*a*t*t + 2.0*bco*t + c;
if (abs(fp) > 1e-8) t -= f / fp;
t = clamp(t, -0.08, 1.08);
}
return t;
}
float waveFocal(vec2 uv, float fi, float totalLines, vec2 sp, vec2 ep) {
// Bézier-Kontrollpunkt: Mittelpunkt + senkrechter Versatz
vec2 seg = ep - sp;
float segLen = length(seg);
if (segLen < 0.001) return 0.0;
vec2 segDir = seg / segLen;
vec2 segPerp = vec2(-segDir.y, segDir.x);
vec2 pc = (sp + ep) * 0.5 + segPerp * segLen * bezierCurvature;
float t = bezierClosestT(uv, sp, pc, ep);
float mt = 1.0 - t;
// Position und Tangente auf der Kurve
vec2 curvePos = mt*mt*sp + 2.0*mt*t*pc + t*t*ep;
vec2 tang = normalize(2.0*mt*(pc - sp) + 2.0*t*(ep - pc));
vec2 norm = vec2(-tang.y, tang.x);
// Senkrechter Abstand von der Kurve
float s = dot(uv - curvePos, norm);
float time = iTime * animationSpeed;
float normalizedI = totalLines > 1.0 ? fi / (totalLines - 1.0) : 0.5;
float envelope = sin(t * 3.14159265359);
float linePos = (normalizedI - 0.5) * fanSpread * envelope;
float amp = lineSpread * 0.3 * envelope;
float waveDisp = sin(t * waveFrequency + fi * 1.3 + time * 0.4) * amp
* sin(fi * 0.9 + time * 0.18);
float dist = s - linePos - waveDisp;
float fade = smoothstep(-0.06, 0.04, t) * smoothstep(1.06, 0.96, t);
return fade * (0.013 / max(abs(dist) * lineSharpness + 0.004, 1e-4) + 0.003);
}
float wave(vec2 uv, float offset, vec2 screenUv, vec2 mouseUv, bool shouldBend) {
float time = iTime * animationSpeed;
float x_offset = offset;
float x_movement = time * 0.1;
float amp = sin(offset + time * 0.2) * 0.3;
float y = sin(uv.x + x_offset + x_movement) * amp;
if (shouldBend) {
vec2 d = screenUv - mouseUv;
float influence = exp(-dot(d, d) * bendRadius);
float bendOffset = (mouseUv.y - screenUv.y) * influence * bendStrength * bendInfluence;
y += bendOffset;
}
float m = uv.y - y;
return 0.0175 / max(abs(m) + 0.01, 1e-3) + 0.01;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
baseUv.y *= -1.0;
if (parallax) {
baseUv += parallaxOffset;
}
vec3 col = vec3(0.0);
vec3 b = lineGradientCount > 0 ? bgColorCenter : background_color(baseUv);
vec2 mouseUv = vec2(0.0);
if (interactive) {
mouseUv = (2.0 * iMouse - iResolution.xy) / iResolution.y;
mouseUv.y *= -1.0;
}
if (enableBottom) {
for (int i = 0; i < bottomLineCount; ++i) {
float fi = float(i);
float t = fi / max(float(bottomLineCount - 1), 1.0);
vec3 lineCol = getLineColor(t, b);
float angle = bottomWavePosition.z * log(length(baseUv) + 1.0);
vec2 ruv = baseUv * rotate(angle);
col += lineCol * wave(
ruv + vec2(bottomLineDistance * fi + bottomWavePosition.x, bottomWavePosition.y),
1.5 + 0.2 * fi,
baseUv,
mouseUv,
interactive
) * 0.2;
}
}
if (enableMiddle) {
const int MAX_PTS = 8;
const int MAX_SEGS = 7;
float r = circleRadiusPx / iResolution.y * 2.0;
float tScale = numPoints > 1 ? 1.0 / float(numPoints - 1) : 1.0;
// Segmente: Punkt s → Punkt s+1
for (int s = 0; s < MAX_SEGS; ++s) {
if (s >= numPoints - 1) break;
float x0 = pointsOffsetX + (float(s) - float(numPoints - 1) * 0.5) * pointSpacingX;
float x1 = pointsOffsetX + (float(s + 1) - float(numPoints - 1) * 0.5) * pointSpacingX;
vec2 sp = vec2(x0, pointY[s]);
vec2 ep = vec2(x1, pointY[s + 1]);
// Gradient: globaler t-Bereich [s, s+1] / (numPoints-1)
vec2 pd = ep - sp;
float pl = length(pd);
vec2 pa = pl > 0.001 ? pd / pl : vec2(1.0, 0.0);
float t_seg = clamp(dot(baseUv - sp, pa) / pl, 0.0, 1.0);
float t_global = (float(s) + t_seg) * tScale;
vec3 lineCol = getLineColor(t_global, b);
// Bézier-Kontrollpunkt für Nebel (gleiche Logik wie in waveFocal)
vec2 segD = ep - sp;
float segL = length(segD);
vec2 segDir = segL > 0.001 ? segD / segL : vec2(1.0, 0.0);
vec2 sPerp = vec2(-segDir.y, segDir.x);
vec2 pc = (sp + ep) * 0.5 + sPerp * segL * bezierCurvature;
// Weicher Nebel entlang der Bézier-Kurve → füllt dunkle Winkel organisch
float bt = bezierClosestT(baseUv, sp, pc, ep);
float bmt = 1.0 - bt;
vec2 bPos = bmt*bmt*sp + 2.0*bmt*bt*pc + bt*bt*ep;
float bDist = length(baseUv - bPos);
float fogFade = smoothstep(-0.06, 0.05, bt) * smoothstep(1.06, 0.95, bt);
float fogEnv = sin(bt * 3.14159265359);
float segFog = fogFade * fogEnv * 0.0018 / max(bDist * bDist * 4.0 + 0.012, 0.001);
col += lineCol * segFog;
for (int i = 0; i < middleLineCount; ++i) {
col += lineCol * waveFocal(baseUv, float(i), float(middleLineCount), sp, ep);
}
}
// Kreise an jedem Punkt
for (int p = 0; p < MAX_PTS; ++p) {
if (p >= numPoints) break;
float px = pointsOffsetX + (float(p) - float(numPoints - 1) * 0.5) * pointSpacingX;
float t_pt = numPoints > 1 ? float(p) * tScale : 0.0;
vec3 circCol = getLineColor(t_pt, b) * 2.5;
col += drawCircle(baseUv, vec2(px, pointY[p]), r, circCol);
}
}
if (enableTop) {
for (int i = 0; i < topLineCount; ++i) {
float fi = float(i);
float t = fi / max(float(topLineCount - 1), 1.0);
vec3 lineCol = getLineColor(t, b);
float angle = topWavePosition.z * log(length(baseUv) + 1.0);
vec2 ruv = baseUv * rotate(angle);
ruv.x *= -1.0;
col += lineCol * wave(
ruv + vec2(topLineDistance * fi + topWavePosition.x, topWavePosition.y),
1.0 + 0.2 * fi,
baseUv,
mouseUv,
interactive
) * 0.1;
}
}
// Hintergrundverlauf: radial von bgColorCenter (Mitte) nach bgColorEdge (Rand)
float dist = length(baseUv) / 1.8;
vec3 bg = mix(bgColorCenter, bgColorEdge, clamp(dist, 0.0, 1.0));
fragColor = vec4(clamp(bg + col, 0.0, 1.0), 1.0);
}
void main() {
vec4 color = vec4(0.0);
mainImage(color, gl_FragCoord.xy);
gl_FragColor = color;
}
`
const MAX_GRADIENT_STOPS = 8
function hexToVec3(hex) {
let value = hex.trim()
if (value.startsWith('#')) {
value = value.slice(1)
}
let r = 255
let g = 255
let b = 255
if (value.length === 3) {
r = parseInt(value[0] + value[0], 16)
g = parseInt(value[1] + value[1], 16)
b = parseInt(value[2] + value[2], 16)
} else if (value.length === 6) {
r = parseInt(value.slice(0, 2), 16)
g = parseInt(value.slice(2, 4), 16)
b = parseInt(value.slice(4, 6), 16)
}
return new Vector3(r / 255, g / 255, b / 255)
}
export default class FloatingLines {
constructor(
container,
{
linesGradient,
enabledWaves = ['top', 'middle', 'bottom'],
lineCount = [6],
lineDistance = [5],
topWavePosition,
middleWavePosition,
bottomWavePosition = { x: 2.0, y: -0.7, rotate: -1 },
numPoints = 4,
pointSpacingX = 0.8,
pointsOffsetX = 0.0,
pointYValues = [0.75, -0.5, 0.3, -0.75, 0.6, -0.4, 0.5, -0.6],
lineSpread = 0.6,
fanSpread = 0.25,
lineSharpness = 1.0,
waveFrequency = 8.0,
bezierCurvature = 0.3,
circleRadiusPx = 50,
animationSpeed = 1,
interactive = true,
bendRadius = 5.0,
bendStrength = -0.5,
mouseDamping = 0.05,
parallax = true,
parallaxStrength = 0.2,
circleGlowSize = 18.0,
circleGlowStrength = 1.5,
mixBlendMode = 'screen',
} = {},
) {
this.container = container
this.interactive = interactive
this.parallax = parallax
this.mouseDamping = mouseDamping
this.parallaxStrength = parallaxStrength
this.targetMouse = new Vector2(-1000, -1000)
this.currentMouse = new Vector2(-1000, -1000)
this.targetInfluence = 0
this.currentInfluence = 0
this.targetParallax = new Vector2(0, 0)
this.currentParallax = new Vector2(0, 0)
const getLineCount = (waveType) => {
if (typeof lineCount === 'number') return lineCount
if (!enabledWaves.includes(waveType)) return 0
const index = enabledWaves.indexOf(waveType)
return lineCount[index] ?? 6
}
const getLineDistance = (waveType) => {
if (typeof lineDistance === 'number') return lineDistance
if (!enabledWaves.includes(waveType)) return 0.1
const index = enabledWaves.indexOf(waveType)
return lineDistance[index] ?? 0.1
}
const topLineCount = enabledWaves.includes('top') ? getLineCount('top') : 0
const middleLineCount = enabledWaves.includes('middle') ? getLineCount('middle') : 0
const bottomLineCount = enabledWaves.includes('bottom') ? getLineCount('bottom') : 0
const topLineDistance = enabledWaves.includes('top') ? getLineDistance('top') * 0.01 : 0.01
const bottomLineDistance = enabledWaves.includes('bottom')
? getLineDistance('bottom') * 0.01
: 0.01
this.scene = new Scene()
this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
this.camera.position.z = 1
this.renderer = new WebGLRenderer({ antialias: true, alpha: false })
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2))
this.renderer.domElement.style.width = '100%'
this.renderer.domElement.style.height = '100%'
this.renderer.domElement.style.mixBlendMode = mixBlendMode
container.appendChild(this.renderer.domElement)
this.uniforms = {
iTime: { value: 0 },
iResolution: { value: new Vector3(1, 1, 1) },
animationSpeed: { value: animationSpeed },
enableTop: { value: enabledWaves.includes('top') },
enableMiddle: { value: enabledWaves.includes('middle') },
enableBottom: { value: enabledWaves.includes('bottom') },
topLineCount: { value: topLineCount },
middleLineCount: { value: middleLineCount },
bottomLineCount: { value: bottomLineCount },
topLineDistance: { value: topLineDistance },
bottomLineDistance: { value: bottomLineDistance },
topWavePosition: {
value: new Vector3(
topWavePosition?.x ?? 10.0,
topWavePosition?.y ?? 0.5,
topWavePosition?.rotate ?? -0.4,
),
},
bottomWavePosition: {
value: new Vector3(
bottomWavePosition?.x ?? 2.0,
bottomWavePosition?.y ?? -0.7,
bottomWavePosition?.rotate ?? 0.4,
),
},
numPoints: { value: numPoints },
pointSpacingX: { value: pointSpacingX },
pointsOffsetX: { value: pointsOffsetX },
pointY: { value: [...pointYValues].slice(0, 8).concat(Array(8).fill(0)).slice(0, 8) },
lineSpread: { value: lineSpread },
fanSpread: { value: fanSpread },
lineSharpness: { value: lineSharpness },
waveFrequency: { value: waveFrequency },
bezierCurvature: { value: bezierCurvature },
circleRadiusPx: { value: circleRadiusPx },
circleGlowSize: { value: circleGlowSize },
circleGlowStrength: { value: circleGlowStrength },
iMouse: { value: new Vector2(-1000, -1000) },
interactive: { value: interactive },
bendRadius: { value: bendRadius },
bendStrength: { value: bendStrength },
bendInfluence: { value: 0 },
parallax: { value: parallax },
parallaxStrength: { value: parallaxStrength },
parallaxOffset: { value: new Vector2(0, 0) },
lineGradient: {
value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1)),
},
lineGradientCount: { value: 0 },
bgColor: { value: new Vector3(0, 0, 0) },
}
if (linesGradient && linesGradient.length > 0) {
const stops = linesGradient.slice(0, MAX_GRADIENT_STOPS)
this.uniforms.lineGradientCount.value = stops.length
stops.forEach((hex, i) => {
const color = hexToVec3(hex)
this.uniforms.lineGradient.value[i].set(color.x, color.y, color.z)
})
}
const material = new ShaderMaterial({
uniforms: this.uniforms,
vertexShader,
fragmentShader,
})
const geometry = new PlaneGeometry(2, 2)
this.mesh = new Mesh(geometry, material)
this.scene.add(this.mesh)
this.geometry = geometry
this.material = material
this.clock = new Clock()
this._setSize = () => {
const width = container.clientWidth || 1
const height = container.clientHeight || 1
this.renderer.setSize(width, height, false)
const canvasWidth = this.renderer.domElement.width
const canvasHeight = this.renderer.domElement.height
this.uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1)
}
this._setSize()
this.ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(this._setSize) : null
if (this.ro) this.ro.observe(container)
this._handlePointerMove = (event) => {
const rect = this.renderer.domElement.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
const dpr = this.renderer.getPixelRatio()
this.targetMouse.set(x * dpr, (rect.height - y) * dpr)
this.targetInfluence = 1.0
if (this.parallax) {
const centerX = rect.width / 2
const centerY = rect.height / 2
const offsetX = (x - centerX) / rect.width
const offsetY = -(y - centerY) / rect.height
this.targetParallax.set(offsetX * this.parallaxStrength, offsetY * this.parallaxStrength)
}
}
this._handlePointerLeave = () => {
this.targetInfluence = 0.0
}
this.renderer.domElement.addEventListener('pointermove', this._handlePointerMove)
this.renderer.domElement.addEventListener('pointerleave', this._handlePointerLeave)
this.raf = 0
const renderLoop = () => {
this.uniforms.iTime.value = this.clock.getElapsedTime()
if (this.interactive) {
this.currentMouse.lerp(this.targetMouse, this.mouseDamping)
this.uniforms.iMouse.value.copy(this.currentMouse)
this.currentInfluence += (this.targetInfluence - this.currentInfluence) * this.mouseDamping
this.uniforms.bendInfluence.value = this.currentInfluence
}
if (this.parallax) {
this.currentParallax.lerp(this.targetParallax, this.mouseDamping)
this.uniforms.parallaxOffset.value.copy(this.currentParallax)
}
this.renderer.render(this.scene, this.camera)
this.raf = requestAnimationFrame(renderLoop)
}
renderLoop()
}
destroy() {
cancelAnimationFrame(this.raf)
if (this.ro) this.ro.disconnect()
this.renderer.domElement.removeEventListener('pointermove', this._handlePointerMove)
this.renderer.domElement.removeEventListener('pointerleave', this._handlePointerLeave)
this.geometry.dispose()
this.material.dispose()
this.renderer.dispose()
if (this.renderer.domElement.parentElement) {
this.renderer.domElement.parentElement.removeChild(this.renderer.domElement)
}
}
}

279
frontend/dev/init-fl copy.html Normal file
View file

@ -0,0 +1,279 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FloatingLines Dev</title>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.183.0/build/three.module.js"
}
}
</script>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
font-family: ui-monospace, 'Cascadia Code', monospace;
}
#app {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
#container {
flex: 1;
min-height: 0;
position: relative;
}
/* ── Footer ─────────────────────────────────────────────────────── */
#controls {
flex-shrink: 0;
background: #0d0d0f;
border-top: 1px solid #222;
padding: 10px 14px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px 16px;
max-height: 220px;
overflow-y: auto;
}
.ctrl-group {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.ctrl-group h3 {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #555;
padding-bottom: 3px;
border-bottom: 1px solid #1e1e1e;
margin-bottom: 2px;
}
.row {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.row label {
font-size: 10px;
color: #777;
white-space: nowrap;
min-width: 70px;
flex-shrink: 0;
}
.row input[type='range'] {
flex: 1;
min-width: 0;
height: 3px;
accent-color: #a855f7;
cursor: pointer;
}
.row .val {
font-size: 10px;
color: #bbb;
min-width: 36px;
text-align: right;
flex-shrink: 0;
}
</style>
</head>
<body>
<div id="app">
<div id="container"></div>
<footer id="controls">
<!-- Col 1: Allgemein -->
<div class="ctrl-group">
<h3>Allgemein</h3>
<div class="row">
<label for="speed">Speed</label>
<input type="range" id="speed" min="0.1" max="3" step="0.05" value="1" />
<span class="val" id="speed-val">1.00</span>
</div>
</div>
<!-- Col 2: Middle Wave -->
<div class="ctrl-group">
<h3>Middle Wave</h3>
<div class="row">
<label for="midCount">Lines</label>
<input type="range" id="midCount" min="0" max="40" step="1" value="15" />
<span class="val" id="midCount-val">10</span>
</div>
<div class="row">
<label for="midDist">Distance</label>
<input type="range" id="midDist" min="1" max="30" step="0.5" value="6" />
<span class="val" id="midDist-val">6.0</span>
</div>
<div class="row">
<label for="midX">X</label>
<input type="range" id="midX" min="-20" max="20" step="0.1" value="5" />
<span class="val" id="midX-val">5.0</span>
</div>
<div class="row">
<label for="midY">Y</label>
<input type="range" id="midY" min="-2" max="2" step="0.05" value="0" />
<span class="val" id="midY-val">0.00</span>
</div>
<div class="row">
<label for="midR">Rotate</label>
<input type="range" id="midR" min="-2" max="2" step="0.05" value="0.2" />
<span class="val" id="midR-val">0.20</span>
</div>
</div>
<!-- Col 3: Gradient -->
<div class="ctrl-group">
<h3>Gradient</h3>
<div class="row" style="flex-direction: column; align-items: flex-start; gap: 4px">
<label style="color: #555; font-size: 9px">Farbstopps (je Zeile ein Hex)</label>
<textarea
id="gradientInput"
spellcheck="false"
style="
width: 100%;
height: 80px;
background: #111;
border: 1px solid #2a2a2a;
color: #ccc;
font-family: inherit;
font-size: 10px;
padding: 4px 6px;
resize: none;
border-radius: 3px;
outline: none;
line-height: 1.5;
"
>
#e947f5
#2f4ba2
#0a0a12</textarea
>
<button
id="applyGradient"
style="
background: #1e1e2e;
border: 1px solid #333;
color: #a855f7;
font-family: inherit;
font-size: 10px;
padding: 3px 10px;
border-radius: 3px;
cursor: pointer;
align-self: flex-end;
"
>
Anwenden
</button>
</div>
<div class="row" style="margin-top: 4px">
<input
type="checkbox"
id="clearGradient"
style="accent-color: #a855f7; cursor: pointer; width: 12px; height: 12px"
/>
<label for="clearGradient" style="cursor: pointer; min-width: unset">
Gradient deaktivieren
</label>
</div>
</div>
</footer>
</div>
<script type="module">
import FloatingLines from './floating-lines.js'
const container = document.getElementById('container')
const fl = new FloatingLines(container, {
enabledWaves: ['middle'],
lineCount: [10],
lineDistance: [2],
interactive: false,
parallax: false,
linesGradient: ['#e947f5', '#2f4ba2', '#0a0a12'],
})
// ── Hilfsfunktionen ────────────────────────────────────────────────
function slider(id, decimals, onChange) {
const input = document.getElementById(id)
const display = document.getElementById(id + '-val')
input.addEventListener('input', () => {
const v = parseFloat(input.value)
if (display) display.textContent = v.toFixed(decimals)
onChange(v)
})
}
function hexToVec3(hex) {
let v = hex.trim().replace('#', '')
if (v.length === 3) v = v[0] + v[0] + v[1] + v[1] + v[2] + v[2]
return [
parseInt(v.slice(0, 2), 16) / 255,
parseInt(v.slice(2, 4), 16) / 255,
parseInt(v.slice(4, 6), 16) / 255,
]
}
// ── Allgemein ──────────────────────────────────────────────────────
slider('speed', 2, (v) => (fl.uniforms.animationSpeed.value = v))
// ── Middle Wave ────────────────────────────────────────────────────
slider('midCount', 0, (v) => (fl.uniforms.middleLineCount.value = Math.round(v)))
slider('midDist', 1, (v) => (fl.uniforms.middleLineDistance.value = v * 0.01))
slider('midX', 1, (v) => (fl.uniforms.middleWavePosition.value.x = v))
slider('midY', 2, (v) => (fl.uniforms.middleWavePosition.value.y = v))
slider('midR', 2, (v) => (fl.uniforms.middleWavePosition.value.z = v))
// ── Gradient ───────────────────────────────────────────────────────
const MAX_STOPS = 8
function applyGradient() {
const lines = document
.getElementById('gradientInput')
.value.split('\n')
.map((s) => s.trim())
.filter((s) => s.length > 0)
const stops = lines.slice(0, MAX_STOPS)
fl.uniforms.lineGradientCount.value = stops.length
stops.forEach((hex, i) => {
const [r, g, b] = hexToVec3(hex)
fl.uniforms.lineGradient.value[i].set(r, g, b)
})
}
document.getElementById('applyGradient').addEventListener('click', applyGradient)
document.getElementById('clearGradient').addEventListener('change', (e) => {
fl.uniforms.lineGradientCount.value = e.target.checked
? 0
: document
.getElementById('gradientInput')
.value.split('\n')
.filter((s) => s.trim()).length
})
</script>
</body>
</html>

522
frontend/dev/init-fl.html Normal file
View file

@ -0,0 +1,522 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FloatingLines Dev</title>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.183.0/build/three.module.js"
}
}
</script>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
font-family: ui-monospace, 'Cascadia Code', monospace;
}
#app {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
#container {
flex: 1;
min-height: 0;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* ── Footer ──────────────────────────────────────────────────────── */
#controls {
flex-shrink: 0;
background: #0d0d0f;
border-top: 1px solid #222;
padding: 10px 14px;
display: grid;
grid-template-columns: 1fr 1fr 2fr 1.2fr;
gap: 10px 16px;
max-height: 230px;
overflow-y: auto;
}
.ctrl-group {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.ctrl-group h3 {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #555;
padding-bottom: 3px;
border-bottom: 1px solid #1e1e1e;
margin-bottom: 2px;
}
.row {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.row label {
font-size: 10px;
color: #777;
white-space: nowrap;
min-width: 60px;
flex-shrink: 0;
}
.row input[type='range'] {
flex: 1;
min-width: 0;
height: 3px;
accent-color: #a855f7;
cursor: pointer;
}
.row .val {
font-size: 10px;
color: #bbb;
min-width: 36px;
text-align: right;
flex-shrink: 0;
}
/* Punkthöhen-Grid */
#point-sliders {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 10px;
}
.point-row {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
}
.point-row label {
font-size: 10px;
flex-shrink: 0;
min-width: 22px;
}
.point-row input[type='range'] {
flex: 1;
min-width: 0;
height: 3px;
accent-color: #a855f7;
cursor: pointer;
}
.point-row .val {
font-size: 10px;
color: #bbb;
min-width: 32px;
text-align: right;
flex-shrink: 0;
}
.point-row.inactive {
opacity: 0.25;
pointer-events: none;
}
.img-btn {
background: #1a1a2e;
border: 1px solid #333;
color: #888;
font-family: inherit;
font-size: 10px;
padding: 3px 7px;
border-radius: 3px;
cursor: pointer;
transition: all 0.15s;
}
.img-btn:hover {
border-color: #a855f7;
color: #ccc;
}
.img-btn.active {
border-color: #a855f7;
color: #a855f7;
background: #2a1a3e;
}
</style>
</head>
<body>
<div id="app">
<div id="container"></div>
<footer id="controls">
<!-- Col 1: Linien -->
<div class="ctrl-group">
<h3>Linien</h3>
<div class="row">
<label for="speed">Speed</label>
<input type="range" id="speed" min="0.1" max="3" step="0.05" value="1" />
<span class="val" id="speed-val">1.00</span>
</div>
<div class="row">
<label for="lineCount">Anzahl</label>
<input type="range" id="lineCount" min="1" max="40" step="1" value="10" />
<span class="val" id="lineCount-val">10</span>
</div>
<div class="row">
<label for="spread">Wellen-Amp</label>
<input type="range" id="spread" min="0.01" max="1" step="0.01" value="0.5" />
<span class="val" id="spread-val">0.05</span>
</div>
<div class="row">
<label for="fanSpread">Fächerbreite</label>
<input type="range" id="fanSpread" min="0.01" max="0.5" step="0.005" value="0.05" />
<span class="val" id="fanSpread-val">0.5</span>
</div>
<div class="row">
<label for="lineSharpness">Feinheit</label>
<input type="range" id="lineSharpness" min="0.3" max="10" step="0.1" value="8" />
<span class="val" id="lineSharpness-val">8.0</span>
</div>
<div class="row">
<label for="waveFreq">Welligkeit</label>
<input type="range" id="waveFreq" min="1" max="30" step="0.5" value="7" />
<span class="val" id="waveFreq-val">7.0</span>
</div>
<div class="row">
<label for="bezierCurv">Kurve</label>
<input type="range" id="bezierCurv" min="-1" max="1" step="0.05" value="0.2" />
<span class="val" id="bezierCurv-val">0.20</span>
</div>
<div class="row">
<label for="circleRadius">Kreis</label>
<input type="range" id="circleRadius" min="10" max="200" step="5" value="75" />
<span class="val" id="circleRadius-val">75px</span>
</div>
<div class="row">
<label for="glowSize">Glow Größe</label>
<input type="range" id="glowSize" min="5" max="100" step="1" value="18" />
<span class="val" id="glowSize-val">18px</span>
</div>
<div class="row">
<label for="glowStrength">Glow Stärke</label>
<input type="range" id="glowStrength" min="0.5" max="12" step="0.5" value="1.5" />
<span class="val" id="glowStrength-val">1.5</span>
</div>
</div>
<!-- Col 2: Raster -->
<div class="ctrl-group">
<h3>Raster</h3>
<div class="row">
<label for="numPoints">Punkte</label>
<input type="range" id="numPoints" min="2" max="8" step="1" value="4" />
<span class="val" id="numPoints-val">4</span>
</div>
<div class="row">
<label for="spacing">Abstand</label>
<input type="range" id="spacing" min="0.1" max="3" step="0.05" value="0.8" />
<span class="val" id="spacing-val">0.80</span>
</div>
<div class="row">
<label for="offsetX">Versatz X</label>
<input type="range" id="offsetX" min="-2" max="2" step="0.05" value="0" />
<span class="val" id="offsetX-val">0.00</span>
</div>
</div>
<!-- Col 3: Punkt-Höhen (2×4 Grid) -->
<div class="ctrl-group">
<h3>Punkt-Höhen</h3>
<div id="point-sliders">
<!-- P1–P8, je Zeile: Label + Slider + Wert -->
<div class="point-row" id="pr0">
<label style="color: #a78bfa">P1</label>
<input type="range" id="py0" min="-1.2" max="1.2" step="0.02" value="-0.75" />
<span class="val" id="py0-val">-0.75</span>
</div>
<div class="point-row" id="pr1">
<label style="color: #a78bfa">P2</label>
<input type="range" id="py1" min="-1.2" max="1.2" step="0.02" value="0.5" />
<span class="val" id="py1-val">0.50</span>
</div>
<div class="point-row" id="pr2">
<label style="color: #818cf8">P3</label>
<input type="range" id="py2" min="-1.2" max="1.2" step="0.02" value="-0.3" />
<span class="val" id="py2-val">-0.30</span>
</div>
<div class="point-row" id="pr3">
<label style="color: #818cf8">P4</label>
<input type="range" id="py3" min="-1.2" max="1.2" step="0.02" value="0.75" />
<span class="val" id="py3-val">0.75</span>
</div>
<div class="point-row inactive" id="pr4">
<label style="color: #6366f1">P5</label>
<input type="range" id="py4" min="-1.2" max="1.2" step="0.02" value="-0.6" />
<span class="val" id="py4-val">-0.60</span>
</div>
<div class="point-row inactive" id="pr5">
<label style="color: #6366f1">P6</label>
<input type="range" id="py5" min="-1.2" max="1.2" step="0.02" value="0.4" />
<span class="val" id="py5-val">0.40</span>
</div>
<div class="point-row inactive" id="pr6">
<label style="color: #4f46e5">P7</label>
<input type="range" id="py6" min="-1.2" max="1.2" step="0.02" value="-0.2" />
<span class="val" id="py6-val">-0.20</span>
</div>
<div class="point-row inactive" id="pr7">
<label style="color: #4f46e5">P8</label>
<input type="range" id="py7" min="-1.2" max="1.2" step="0.02" value="0.8" />
<span class="val" id="py7-val">0.80</span>
</div>
</div>
</div>
<!-- Col 4: Hintergrundbild + Farben -->
<div class="ctrl-group">
<h3>Hintergrundbild</h3>
<div style="display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px">
<button class="img-btn active" data-img="">Keins</button>
<button class="img-btn" data-img="../public/images/bg-image-1.jpg">1</button>
<button class="img-btn" data-img="../public/images/bg-image-2.jpg">2</button>
<button class="img-btn" data-img="../public/images/bg-image-3.jpg">3</button>
<button class="img-btn" data-img="../public/images/bg-image-4.jpg">4</button>
<button class="img-btn" data-img="../public/images/bg-image-5.jpg">5</button>
<button class="img-btn" data-img="../public/images/bg-image-6.jpg">6</button>
<button class="img-btn" data-img="../public/images/bg-image-7.jpg">7</button>
<button class="img-btn" data-img="../public/images/bg-image-8.jpg">8</button>
<button class="img-btn" data-img="../public/images/bg-image-9.jpg">9</button>
<button class="img-btn" data-img="../public/images/bg-image-10.jpg">10</button>
</div>
<h3>Hintergrundfarbe</h3>
<div class="row">
<label for="bgCenter">BG Mitte</label>
<input
type="color"
id="bgCenter"
value="#0a0514"
style="
width: 36px;
height: 18px;
border: none;
padding: 0;
background: none;
cursor: pointer;
"
/>
</div>
<div class="row">
<label for="bgEdge">BG Rand</label>
<input
type="color"
id="bgEdge"
value="#000000"
style="
width: 36px;
height: 18px;
border: none;
padding: 0;
background: none;
cursor: pointer;
"
/>
</div>
<div class="row" style="flex-direction: column; align-items: flex-start; gap: 4px">
<label style="color: #555; font-size: 9px">Farbstopps (je Zeile ein Hex)</label>
<textarea
id="gradientInput"
spellcheck="false"
style="
width: 100%;
height: 70px;
background: #111;
border: 1px solid #2a2a2a;
color: #ccc;
font-family: inherit;
font-size: 10px;
padding: 4px 6px;
resize: none;
border-radius: 3px;
outline: none;
line-height: 1.5;
"
>
#e947f5
#2f4ba2
#0a0a12</textarea
>
<button
id="applyGradient"
style="
background: #1e1e2e;
border: 1px solid #333;
color: #a855f7;
font-family: inherit;
font-size: 10px;
padding: 3px 10px;
border-radius: 3px;
cursor: pointer;
align-self: flex-end;
"
>
Anwenden
</button>
</div>
</div>
</footer>
</div>
<script type="module">
import FloatingLines from './floating-lines.js'
const container = document.getElementById('container')
// Slider-Y ist screen-intuitiv: +1 = oben = shader-Y negativ → Y-Flip beim Setzen
const initPointY = [-0.75, 0.5, -0.3, 0.75, -0.6, 0.4, -0.2, 0.8].map((v) => -v) // flip für shader
const fl = new FloatingLines(container, {
enabledWaves: ['middle'],
lineCount: [10],
numPoints: 4,
pointSpacingX: 0.8,
pointsOffsetX: 0.0,
pointYValues: initPointY,
lineSpread: 0.05,
fanSpread: 0.05,
lineSharpness: 8.0,
waveFrequency: 7.0,
circleRadiusPx: 75,
circleGlowSize: 18,
circleGlowStrength: 1.5,
interactive: false,
parallax: false,
linesGradient: ['#e947f5', '#2f4ba2', '#0a0a12'],
})
// ── Helpers ───────────────────────────────────────────────────────
function slider(id, decimals, onChange) {
const input = document.getElementById(id)
const disp = document.getElementById(id + '-val')
input.addEventListener('input', () => {
const v = parseFloat(input.value)
if (disp) disp.textContent = v.toFixed(decimals)
onChange(v)
})
}
function hexToVec3(hex) {
let v = hex.trim().replace('#', '')
if (v.length === 3) v = v[0] + v[0] + v[1] + v[1] + v[2] + v[2]
return [
parseInt(v.slice(0, 2), 16) / 255,
parseInt(v.slice(2, 4), 16) / 255,
parseInt(v.slice(4, 6), 16) / 255,
]
}
// ── Linien ────────────────────────────────────────────────────────
slider('speed', 2, (v) => (fl.uniforms.animationSpeed.value = v))
slider('lineCount', 0, (v) => (fl.uniforms.middleLineCount.value = Math.round(v)))
slider('spread', 2, (v) => (fl.uniforms.lineSpread.value = v))
slider('fanSpread', 2, (v) => (fl.uniforms.fanSpread.value = v))
slider('lineSharpness', 1, (v) => (fl.uniforms.lineSharpness.value = v))
slider('waveFreq', 1, (v) => (fl.uniforms.waveFrequency.value = v))
slider('bezierCurv', 2, (v) => (fl.uniforms.bezierCurvature.value = v))
slider('glowSize', 1, (v) => (fl.uniforms.circleGlowSize.value = v))
slider('glowStrength', 1, (v) => (fl.uniforms.circleGlowStrength.value = v))
const crInput = document.getElementById('circleRadius')
const crVal = document.getElementById('circleRadius-val')
crInput.addEventListener('input', () => {
const px = parseFloat(crInput.value)
crVal.textContent = px + 'px'
fl.uniforms.circleRadiusPx.value = px
})
// ── Raster ────────────────────────────────────────────────────────
function updateActivePoints(n) {
for (let i = 0; i < 8; i++) {
document.getElementById('pr' + i).classList.toggle('inactive', i >= n)
}
}
const numPointsInput = document.getElementById('numPoints')
const numPointsVal = document.getElementById('numPoints-val')
numPointsInput.addEventListener('input', () => {
const n = parseInt(numPointsInput.value)
numPointsVal.textContent = n
fl.uniforms.numPoints.value = n
updateActivePoints(n)
})
slider('spacing', 2, (v) => (fl.uniforms.pointSpacingX.value = v))
slider('offsetX', 2, (v) => (fl.uniforms.pointsOffsetX.value = v))
// ── Punkt-Höhen (Y-Flip) ──────────────────────────────────────────
for (let i = 0; i < 8; i++) {
const input = document.getElementById('py' + i)
const disp = document.getElementById('py' + i + '-val')
input.addEventListener('input', () => {
const v = parseFloat(input.value)
disp.textContent = v.toFixed(2)
fl.uniforms.pointY.value[i] = -v // Y-Flip
})
}
// ── Hintergrundbild ───────────────────────────────────────────────
document.querySelectorAll('.img-btn').forEach((btn) => {
btn.addEventListener('click', () => {
document.querySelectorAll('.img-btn').forEach((b) => b.classList.remove('active'))
btn.classList.add('active')
const img = btn.dataset.img
container.style.backgroundImage = img ? `url('${img}')` : 'none'
})
})
// ── Hintergrundverlauf ────────────────────────────────────────────
function hexToUniformVec3(hex, uniform) {
const [r, g, b] = hexToVec3(hex)
uniform.value.set(r, g, b)
}
document.getElementById('bgCenter').addEventListener('input', (e) => {
hexToUniformVec3(e.target.value, fl.uniforms.bgColorCenter)
})
document.getElementById('bgEdge').addEventListener('input', (e) => {
hexToUniformVec3(e.target.value, fl.uniforms.bgColorEdge)
})
// ── Gradient ──────────────────────────────────────────────────────
const MAX_STOPS = 8
function applyGradient() {
const lines = document
.getElementById('gradientInput')
.value.split('\n')
.map((s) => s.trim())
.filter((s) => s.length > 0)
const stops = lines.slice(0, MAX_STOPS)
fl.uniforms.lineGradientCount.value = stops.length
stops.forEach((hex, i) => {
const [r, g, b] = hexToVec3(hex)
fl.uniforms.lineGradient.value[i].set(r, g, b)
})
}
document.getElementById('applyGradient').addEventListener('click', applyGradient)
</script>
</body>
</html>

2162
frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
frontend/package.json
View file

@ -16,9 +16,9 @@
},
"dependencies": {
"@quasar/extras": "^1.16.4",
"gsap": "^3.13.0",
"pinia": "^3.0.1",
"quasar": "^2.16.0",
"three": "^0.183.0",
"vue": "^3.4.18",
"vue-router": "^4.0.0",
"vue-select": "^4.0.0-beta.6"

BIN
frontend/public/demo/photo-1506905925346-21bda4d32df4.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
frontend/public/demo/photo-1530103862676-de8c9debad1d.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
frontend/public/demo/photo-1534067783941-51c9c23ecefd.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 193 KiB

BIN
frontend/public/images/bg-image-1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.8 MiB

BIN
frontend/public/images/bg-image-10.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
frontend/public/images/bg-image-2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 295 KiB

BIN
frontend/public/images/bg-image-3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 562 KiB

BIN
frontend/public/images/bg-image-4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 238 KiB

BIN
frontend/public/images/bg-image-5.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 197 KiB

BIN
frontend/public/images/bg-image-6.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
frontend/public/images/bg-image-7.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
frontend/public/images/bg-image-8.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
frontend/public/images/bg-image-9.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 299 KiB

2
frontend/quasar.config.js
View file

@ -91,7 +91,7 @@ export default defineConfig((/* ctx */) => {
// directives: [],
// Quasar plugins
plugins: []
plugins: ['Dark']
},
htmlVariables: {

13
frontend/src-capacitor/ios/.gitignore vendored Normal file
View file

@ -0,0 +1,13 @@
App/build
App/Pods
App/output
App/App/public
DerivedData
xcuserdata
# Cordova plugins for Capacitor
capacitor-cordova-ios-plugins
# Generated Config files
App/App/capacitor.config.json
App/App/config.xml

424
frontend/src-capacitor/ios/App/App.xcodeproj/project.pbxproj Normal file
View file

@ -0,0 +1,424 @@
// !$*UTF8*$!
{
archiveVersion = 1;
classes = {
};
objectVersion = 48;
objects = {
/* Begin PBXBuildFile section */
2FAD9763203C412B000D30F8 /* config.xml in Resources */ = {isa = PBXBuildFile; fileRef = 2FAD9762203C412B000D30F8 /* config.xml */; };
50379B232058CBB4000EE86E /* capacitor.config.json in Resources */ = {isa = PBXBuildFile; fileRef = 50379B222058CBB4000EE86E /* capacitor.config.json */; };
504EC3081FED79650016851F /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 504EC3071FED79650016851F /* AppDelegate.swift */; };
504EC30D1FED79650016851F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30B1FED79650016851F /* Main.storyboard */; };
504EC30F1FED79650016851F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30E1FED79650016851F /* Assets.xcassets */; };
504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC3101FED79650016851F /* LaunchScreen.storyboard */; };
50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; };
A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */; };
/* End PBXBuildFile section */
/* Begin PBXFileReference section */
2FAD9762203C412B000D30F8 /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = config.xml; sourceTree = "<group>"; };
50379B222058CBB4000EE86E /* capacitor.config.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = capacitor.config.json; sourceTree = "<group>"; };
504EC3041FED79650016851F /* App.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = App.app; sourceTree = BUILT_PRODUCTS_DIR; };
504EC3071FED79650016851F /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
504EC30C1FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_App.framework; sourceTree = BUILT_PRODUCTS_DIR; };
AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.release.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig"; sourceTree = "<group>"; };
FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.debug.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig"; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
504EC3011FED79650016851F /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXFrameworksBuildPhase section */
/* Begin PBXGroup section */
27E2DDA53C4D2A4D1A88CE4A /* Frameworks */ = {
isa = PBXGroup;
children = (
AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */,
);
name = Frameworks;
sourceTree = "<group>";
};
504EC2FB1FED79650016851F = {
isa = PBXGroup;
children = (
504EC3061FED79650016851F /* App */,
504EC3051FED79650016851F /* Products */,
7F8756D8B27F46E3366F6CEA /* Pods */,
27E2DDA53C4D2A4D1A88CE4A /* Frameworks */,
);
sourceTree = "<group>";
};
504EC3051FED79650016851F /* Products */ = {
isa = PBXGroup;
children = (
504EC3041FED79650016851F /* App.app */,
);
name = Products;
sourceTree = "<group>";
};
504EC3061FED79650016851F /* App */ = {
isa = PBXGroup;
children = (
50379B222058CBB4000EE86E /* capacitor.config.json */,
504EC3071FED79650016851F /* AppDelegate.swift */,
504EC30B1FED79650016851F /* Main.storyboard */,
504EC30E1FED79650016851F /* Assets.xcassets */,
504EC3101FED79650016851F /* LaunchScreen.storyboard */,
504EC3131FED79650016851F /* Info.plist */,
2FAD9762203C412B000D30F8 /* config.xml */,
50B271D01FEDC1A000F3C39B /* public */,
);
path = App;
sourceTree = "<group>";
};
7F8756D8B27F46E3366F6CEA /* Pods */ = {
isa = PBXGroup;
children = (
FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */,
AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */,
);
name = Pods;
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
504EC3031FED79650016851F /* App */ = {
isa = PBXNativeTarget;
buildConfigurationList = 504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */;
buildPhases = (
6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */,
504EC3001FED79650016851F /* Sources */,
504EC3011FED79650016851F /* Frameworks */,
504EC3021FED79650016851F /* Resources */,
9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */,
);
buildRules = (
);
dependencies = (
);
name = App;
productName = App;
productReference = 504EC3041FED79650016851F /* App.app */;
productType = "com.apple.product-type.application";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
504EC2FC1FED79650016851F /* Project object */ = {
isa = PBXProject;
attributes = {
LastSwiftUpdateCheck = 0920;
LastUpgradeCheck = 2620;
TargetAttributes = {
504EC3031FED79650016851F = {
CreatedOnToolsVersion = 9.2;
LastSwiftMigration = 1100;
ProvisioningStyle = Automatic;
};
};
};
buildConfigurationList = 504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */;
compatibilityVersion = "Xcode 8.0";
developmentRegion = en;
hasScannedForEncodings = 0;
knownRegions = (
en,
Base,
);
mainGroup = 504EC2FB1FED79650016851F;
packageReferences = (
);
productRefGroup = 504EC3051FED79650016851F /* Products */;
projectDirPath = "";
projectRoot = "";
targets = (
504EC3031FED79650016851F /* App */,
);
};
/* End PBXProject section */
/* Begin PBXResourcesBuildPhase section */
504EC3021FED79650016851F /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */,
50B271D11FEDC1A000F3C39B /* public in Resources */,
504EC30F1FED79650016851F /* Assets.xcassets in Resources */,
50379B232058CBB4000EE86E /* capacitor.config.json in Resources */,
504EC30D1FED79650016851F /* Main.storyboard in Resources */,
2FAD9763203C412B000D30F8 /* config.xml in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXResourcesBuildPhase section */
/* Begin PBXShellScriptBuildPhase section */
6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
"${PODS_ROOT}/Manifest.lock",
);
name = "[CP] Check Pods Manifest.lock";
outputPaths = (
"$(DERIVED_FILE_DIR)/Pods-App-checkManifestLockResult.txt",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-App/Pods-App-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
/* End PBXShellScriptBuildPhase section */
/* Begin PBXSourcesBuildPhase section */
504EC3001FED79650016851F /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
504EC3081FED79650016851F /* AppDelegate.swift in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin PBXVariantGroup section */
504EC30B1FED79650016851F /* Main.storyboard */ = {
isa = PBXVariantGroup;
children = (
504EC30C1FED79650016851F /* Base */,
);
name = Main.storyboard;
sourceTree = "<group>";
};
504EC3101FED79650016851F /* LaunchScreen.storyboard */ = {
isa = PBXVariantGroup;
children = (
504EC3111FED79650016851F /* Base */,
);
name = LaunchScreen.storyboard;
sourceTree = "<group>";
};
/* End PBXVariantGroup section */
/* Begin XCBuildConfiguration section */
504EC3141FED79650016851F /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_ANALYZER_NONNULL = YES;
CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_COMMA = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
CLANG_WARN_STRICT_PROTOTYPES = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
CODE_SIGN_IDENTITY = "iPhone Developer";
COPY_PHASE_STRIP = NO;
DEBUG_INFORMATION_FORMAT = dwarf;
DEVELOPMENT_TEAM = ZLND8K74VD;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_TESTABILITY = YES;
ENABLE_USER_SCRIPT_SANDBOXING = YES;
GCC_C_LANGUAGE_STANDARD = gnu11;
GCC_DYNAMIC_NO_PIC = NO;
GCC_NO_COMMON_BLOCKS = YES;
GCC_OPTIMIZATION_LEVEL = 0;
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 26.0;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
STRING_CATALOG_GENERATE_SYMBOLS = YES;
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
};
name = Debug;
};
504EC3151FED79650016851F /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_ANALYZER_NONNULL = YES;
CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_COMMA = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
CLANG_WARN_STRICT_PROTOTYPES = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
CODE_SIGN_IDENTITY = "iPhone Developer";
COPY_PHASE_STRIP = NO;
DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
DEVELOPMENT_TEAM = ZLND8K74VD;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_USER_SCRIPT_SANDBOXING = YES;
GCC_C_LANGUAGE_STANDARD = gnu11;
GCC_NO_COMMON_BLOCKS = YES;
GCC_OPTIMIZATION_LEVEL = 2;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 26.0;
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
STRING_CATALOG_GENERATE_SYMBOLS = YES;
SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";
VALIDATE_PRODUCT = YES;
};
name = Release;
};
504EC3171FED79650016851F /* Debug */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 1;
ENABLE_USER_SCRIPT_SANDBOXING = NO;
INFOPLIST_FILE = App/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 26.0;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
MARKETING_VERSION = 1.0;
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
PRODUCT_BUNDLE_IDENTIFIER = media.adametz.thatsme;
PRODUCT_NAME = "$(TARGET_NAME)";
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";
};
name = Debug;
};
504EC3181FED79650016851F /* Release */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 1;
ENABLE_USER_SCRIPT_SANDBOXING = NO;
GCC_OPTIMIZATION_LEVEL = s;
INFOPLIST_FILE = App/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 26.0;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
MARKETING_VERSION = 1.0;
PRODUCT_BUNDLE_IDENTIFIER = media.adametz.thatsme;
PRODUCT_NAME = "$(TARGET_NAME)";
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";
};
name = Release;
};
/* End XCBuildConfiguration section */
/* Begin XCConfigurationList section */
504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */ = {
isa = XCConfigurationList;
buildConfigurations = (
504EC3141FED79650016851F /* Debug */,
504EC3151FED79650016851F /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */ = {
isa = XCConfigurationList;
buildConfigurations = (
504EC3171FED79650016851F /* Debug */,
504EC3181FED79650016851F /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
/* End XCConfigurationList section */
};
rootObject = 504EC2FC1FED79650016851F /* Project object */;
}

80
frontend/src-capacitor/ios/App/App.xcodeproj/xcshareddata/xcschemes/App.xcscheme Normal file
View file

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "2620"
version = "1.7">
<BuildAction
parallelizeBuildables = "YES"
buildImplicitDependencies = "YES"
buildArchitectures = "Automatic">
<BuildActionEntries>
<BuildActionEntry
buildForTesting = "YES"
buildForRunning = "YES"
buildForProfiling = "YES"
buildForArchiving = "YES"
buildForAnalyzing = "YES">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "504EC3031FED79650016851F"
BuildableName = "App.app"
BlueprintName = "App"
ReferencedContainer = "container:App.xcodeproj">
</BuildableReference>
</BuildActionEntry>
</BuildActionEntries>
</BuildAction>
<TestAction
buildConfiguration = "Debug"
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
shouldUseLaunchSchemeArgsEnv = "YES"
shouldAutocreateTestPlan = "YES">
</TestAction>
<LaunchAction
buildConfiguration = "Debug"
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
launchStyle = "0"
useCustomWorkingDirectory = "NO"
ignoresPersistentStateOnLaunch = "NO"
debugDocumentVersioning = "YES"
debugServiceExtension = "internal"
enableGPUFrameCaptureMode = "3"
enableGPUValidationMode = "1"
allowLocationSimulation = "YES">
<BuildableProductRunnable
runnableDebuggingMode = "0">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "504EC3031FED79650016851F"
BuildableName = "App.app"
BlueprintName = "App"
ReferencedContainer = "container:App.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
</LaunchAction>
<ProfileAction
buildConfiguration = "Release"
shouldUseLaunchSchemeArgsEnv = "YES"
savedToolIdentifier = ""
useCustomWorkingDirectory = "NO"
debugDocumentVersioning = "YES">
<BuildableProductRunnable
runnableDebuggingMode = "0">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "504EC3031FED79650016851F"
BuildableName = "App.app"
BlueprintName = "App"
ReferencedContainer = "container:App.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
</ProfileAction>
<AnalyzeAction
buildConfiguration = "Debug">
</AnalyzeAction>
<ArchiveAction
buildConfiguration = "Release"
revealArchiveInOrganizer = "YES">
</ArchiveAction>
</Scheme>

10
frontend/src-capacitor/ios/App/App.xcworkspace/contents.xcworkspacedata generated Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<Workspace
version = "1.0">
<FileRef
location = "group:App.xcodeproj">
</FileRef>
<FileRef
location = "group:Pods/Pods.xcodeproj">
</FileRef>
</Workspace>

8
frontend/src-capacitor/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEDidComputeMac32BitWarning</key>
<true/>
</dict>
</plist>

49
frontend/src-capacitor/ios/App/App/AppDelegate.swift Normal file
View file

@ -0,0 +1,49 @@
import UIKit
import Capacitor
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
return true
}
func applicationWillResignActive(_ application: UIApplication) {
// Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
// Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
}
func applicationDidEnterBackground(_ application: UIApplication) {
// Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
// If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
}
func applicationWillEnterForeground(_ application: UIApplication) {
// Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
}
func applicationDidBecomeActive(_ application: UIApplication) {
// Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
}
func applicationWillTerminate(_ application: UIApplication) {
// Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
}
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
// Called when the app was launched with a url. Feel free to add additional processing here,
// but if you want the App API to support tracking app url opens, make sure to keep this call
return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
}
func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
// Called when the app was launched with an activity, including Universal Links.
// Feel free to add additional processing here, but if you want the App API to support
// tracking app url opens, make sure to keep this call
return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
}
}

BIN
frontend/src-capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 108 KiB

14
frontend/src-capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json Normal file
View file

@ -0,0 +1,14 @@
{
"images" : [
{
"filename" : "AppIcon-512@2x.png",
"idiom" : "universal",
"platform" : "ios",
"size" : "1024x1024"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

6
frontend/src-capacitor/ios/App/App/Assets.xcassets/Contents.json Normal file
View file

@ -0,0 +1,6 @@
{
"info" : {
"version" : 1,
"author" : "xcode"
}
}

23
frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json vendored Normal file
View file

@ -0,0 +1,23 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "splash-2732x2732-2.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "splash-2732x2732-1.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "splash-2732x2732.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
frontend/src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

32
frontend/src-capacitor/ios/App/App/Base.lproj/LaunchScreen.storyboard Normal file
View file

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17132" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17105"/>
<capability name="System colors in document resources" minToolsVersion="11.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="EHf-IW-A2E">
<objects>
<viewController id="01J-lp-oVM" sceneMemberID="viewController">
<imageView key="view" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Splash" id="snD-IY-ifK">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
</imageView>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="53" y="375"/>
</scene>
</scenes>
<resources>
<image name="Splash" width="1366" height="1366"/>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
</resources>
</document>

19
frontend/src-capacitor/ios/App/App/Base.lproj/Main.storyboard Normal file
View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14111" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
</dependencies>
<scenes>
<!--Bridge View Controller-->
<scene sceneID="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="CAPBridgeViewController" customModule="Capacitor" sceneMemberID="viewController"/>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
</scene>
</scenes>
</document>

49
frontend/src-capacitor/ios/App/App/Info.plist Normal file
View file

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>Thats Me</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>$(MARKETING_VERSION)</string>
<key>CFBundleVersion</key>
<string>$(CURRENT_PROJECT_VERSION)</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIMainStoryboardFile</key>
<string>Main</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>
</dict>
</plist>

25
frontend/src-capacitor/ios/App/Podfile Normal file
View file

@ -0,0 +1,25 @@
require_relative '../../node_modules/@capacitor/ios/scripts/pods_helpers'
platform :ios, '14.0'
use_frameworks!
# workaround to avoid Xcode caching of Pods that requires
# Product -> Clean Build Folder after new Cordova plugins installed
# Requires CocoaPods 1.6 or newer
install! 'cocoapods', :disable_input_output_paths => true
def capacitor_pods
pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
end
target 'App' do
capacitor_pods
# Add your Pods here
end
post_install do |installer|
assertDeploymentTarget(installer)
end

34
frontend/src-capacitor/ios/App/Podfile.lock Normal file
View file

@ -0,0 +1,34 @@
PODS:
- Capacitor (7.5.0):
- CapacitorCordova
- CapacitorApp (7.1.2):
- Capacitor
- CapacitorCordova (7.5.0)
- CapacitorStatusBar (7.0.5):
- Capacitor
DEPENDENCIES:
- "Capacitor (from `../../node_modules/@capacitor/ios`)"
- "CapacitorApp (from `../../node_modules/@capacitor/app`)"
- "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
- "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
EXTERNAL SOURCES:
Capacitor:
:path: "../../node_modules/@capacitor/ios"
CapacitorApp:
:path: "../../node_modules/@capacitor/app"
CapacitorCordova:
:path: "../../node_modules/@capacitor/ios"
CapacitorStatusBar:
:path: "../../node_modules/@capacitor/status-bar"
SPEC CHECKSUMS:
Capacitor: 0a78ec6b54580fa055c11744a4e83cd7942d98ca
CapacitorApp: f01a913211780e0718dae9750442c3e23f96e106
CapacitorCordova: ae35646a9b46cfd00d637f195509c86594026aad
CapacitorStatusBar: 6de542f202c0dd3f9d0a73b240d4c9d3dddc49b4
PODFILE CHECKSUM: 21111980a22580fb2d11fb4b5462ec0155a12abe
COCOAPODS: 1.16.2

33
frontend/src/components/AddEventButton.vue Normal file
View file

@ -0,0 +1,33 @@
<template>
<button class="add-event-btn glass--button" @click="$emit('click')">
<q-icon name="add" size="22px" :color="isDark ? 'white' : 'grey-8'" />
</button>
</template>
<script setup>
import { computed } from 'vue'
import { useQuasar } from 'quasar'
defineEmits(['click'])
const $q = useQuasar()
const isDark = computed(() => $q.dark.isActive)
</script>
<style scoped>
.add-event-btn {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 30;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
</style>

511
frontend/src/components/EventPanel.vue Normal file
View file

@ -0,0 +1,511 @@
<template>
<Transition name="slide-up">
<div v-if="eventsStore.panelOpen" class="event-panel glass--panel">
<!-- Drag Handle — tap to close -->
<div class="event-panel__handle" @click="eventsStore.closePanel()">
<div class="event-panel__handle-bar"></div>
</div>
<!-- Scrollable content -->
<div class="event-panel__scroll">
<!-- Key Image -->
<div class="event-panel__image-section">
<div v-if="eventsStore.ghostImage" class="event-panel__image-wrap">
<img :src="eventsStore.ghostImage" class="event-panel__image" alt="" />
<span class="event-panel__image-badge">Key Image</span>
</div>
<div v-else class="event-panel__image-placeholder" @click="onAddImage">
<q-icon name="add_photo_alternate" size="32px" color="grey-5" />
<span>Key Image hinzufügen</span>
</div>
</div>
<!-- Title — large, editable inline -->
<q-input
v-model="eventsStore.ghostTitle"
placeholder="Was ist passiert?"
borderless
class="event-panel__title"
input-class="event-panel__title-input"
:dark="isDark"
/>
<!-- Date row — tap to open QDate picker -->
<div class="event-panel__date-row">
<q-icon name="event" size="18px" class="event-panel__date-icon" />
<span class="event-panel__date-label">{{ formattedDate }}</span>
<q-popup-proxy transition-show="scale" transition-hide="scale">
<q-date
v-model="ghostDateSlash"
mask="YYYY/MM/DD"
:dark="isDark"
:locale="dateLocale"
minimal
/>
</q-popup-proxy>
</div>
<!-- Emotional Level — card style with gradient track -->
<div class="event-panel__card" :class="{ 'event-panel__card--dark': isDark }">
<div class="event-panel__card-header">
<span class="event-panel__card-label">Emotional Level</span>
<span class="event-panel__emotion-value" :style="{ color: emotionColor }">
{{ emotionLabel }}
</span>
</div>
<!-- Gradient slider -->
<div class="event-panel__slider-wrap">
<q-slider
v-model="eventsStore.ghostEmotion"
:min="-1"
:max="1"
:step="0.05"
track-size="8px"
thumb-size="22px"
class="event-panel__slider"
:style="{
'--gradient-bg': sliderGradientCSS,
'--thumb-color': emotionColor
}"
/>
</div>
<div class="event-panel__slider-hints">
<span>Sehr negativ</span>
<span>Neutral</span>
<span>Sehr positiv</span>
</div>
<!-- Gradient Preset Selector -->
<div class="event-panel__presets">
<span class="event-panel__presets-label">Farbverlauf</span>
<div class="event-panel__presets-grid">
<div
v-for="(preset, index) in gradientPresets"
:key="index"
class="event-panel__preset"
:class="{ 'event-panel__preset--active': eventsStore.ghostGradientPreset === index }"
:style="{ background: presetGradientCSS(preset.colors) }"
:title="preset.name"
@click="selectPreset(index)"
></div>
<!-- "None" option to clear preset -->
<div
class="event-panel__preset event-panel__preset--none"
:class="{ 'event-panel__preset--active': eventsStore.ghostGradientPreset === null }"
title="Standard"
@click="selectPreset(null)"
>
<q-icon name="auto_awesome" size="12px" />
</div>
</div>
</div>
</div>
<!-- Beschreibung — card style -->
<div class="event-panel__card" :class="{ 'event-panel__card--dark': isDark }">
<span class="event-panel__card-label">Beschreibung</span>
<q-input
v-model="eventsStore.ghostNote"
type="textarea"
placeholder="Ein neutraler, aber wichtiger Tag"
borderless
autogrow
class="event-panel__note"
:dark="isDark"
/>
</div>
<!-- Weitere Medien -->
<div class="event-panel__card" :class="{ 'event-panel__card--dark': isDark }">
<span class="event-panel__card-label">Weitere Medien</span>
<div class="event-panel__media-grid">
<div class="event-panel__media-add" @click="onAddMedia">
<q-icon name="add_photo_alternate" size="24px" color="grey-5" />
</div>
</div>
</div>
<!-- Delete (edit mode only) -->
<div v-if="eventsStore.editingEventId" class="event-panel__delete">
<q-btn
flat
dense
no-caps
label="Event löschen"
icon="delete_outline"
color="negative"
size="sm"
@click="eventsStore.deleteEvent(eventsStore.editingEventId)"
/>
</div>
</div>
</div>
</Transition>
</template>
<script setup>
import { computed } from 'vue'
import { useQuasar } from 'quasar'
import { useEventsStore, emotionToColor, GRADIENT_PRESETS } from 'stores/events'
const $q = useQuasar()
const eventsStore = useEventsStore()
const isDark = computed(() => $q.dark.isActive)
const gradientPresets = GRADIENT_PRESETS
// Current glow color based on emotion + gradient
const emotionColor = computed(() => {
if (eventsStore.ghostCustomColor) return eventsStore.ghostCustomColor
return emotionToColor(eventsStore.ghostEmotion, eventsStore.ghostGradientPreset)
})
// Date: store uses YYYY-MM-DD, QDate uses YYYY/MM/DD
const ghostDateSlash = computed({
get: () => eventsStore.ghostDate.replace(/-/g, '/'),
set: (val) => { eventsStore.ghostDate = val.replace(/\//g, '-') }
})
const formattedDate = computed(() => {
const d = new Date(eventsStore.ghostDate)
if (isNaN(d.getTime())) return eventsStore.ghostDate
return d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' })
})
const dateLocale = {
days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
daysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
}
const emotionLabel = computed(() => {
const e = eventsStore.ghostEmotion
if (e > 0.5) return 'Sehr positiv'
if (e > 0.15) return 'Positiv'
if (e > -0.15) return 'Neutral'
if (e > -0.5) return 'Negativ'
return 'Sehr negativ'
})
// CSS gradient for the slider track
const sliderGradientCSS = computed(() => {
const idx = eventsStore.ghostGradientPreset
if (idx !== null && GRADIENT_PRESETS[idx]) {
const [neg, mid, pos] = GRADIENT_PRESETS[idx].colors
return `linear-gradient(90deg, ${neg} 0%, ${mid} 50%, ${pos} 100%)`
}
// Default gradient matching the default emotionToColor
return 'linear-gradient(90deg, #E91E63 0%, #9C27B0 20%, #2196F3 35%, #FFD700 50%, #FF6B35 65%, #FFD700 80%, #4CAF50 100%)'
})
// CSS gradient for a preset swatch
function presetGradientCSS(colors) {
return `linear-gradient(90deg, ${colors[0]}, ${colors[1]}, ${colors[2]})`
}
function selectPreset(index) {
eventsStore.ghostGradientPreset = index
// Clear custom color when selecting a gradient
eventsStore.ghostCustomColor = null
}
function onAddImage() {
// TODO: File picker for key image
}
function onAddMedia() {
// TODO: File picker for additional media
}
</script>
<style scoped>
.event-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 20;
height: 75dvh;
display: flex;
flex-direction: column;
border-radius: 20px 20px 0 0;
}
.event-panel__handle {
display: flex;
justify-content: center;
padding: 10px 0 4px;
flex-shrink: 0;
}
.event-panel__handle-bar {
width: 36px;
height: 4px;
border-radius: 2px;
background: rgba(128, 128, 128, 0.3);
}
.event-panel__scroll {
flex: 1;
overflow-y: auto;
padding: 0 20px 32px;
-webkit-overflow-scrolling: touch;
}
/* Key Image */
.event-panel__image-section {
margin-bottom: 16px;
}
.event-panel__image-wrap {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.event-panel__image {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.event-panel__image-badge {
position: absolute;
top: 12px;
left: 12px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 6px;
backdrop-filter: blur(4px);
}
.event-panel__image-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
height: 120px;
border-radius: 16px;
border: 2px dashed rgba(128, 128, 128, 0.2);
cursor: pointer;
font-size: 13px;
opacity: 0.5;
transition: opacity 0.2s;
}
.event-panel__image-placeholder:hover {
opacity: 0.8;
}
/* Title */
.event-panel__title {
margin-bottom: 0;
}
.event-panel__title :deep(.event-panel__title-input) {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
}
/* Date row */
.event-panel__date-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 20px;
opacity: 0.6;
cursor: pointer;
transition: opacity 0.2s;
}
.event-panel__date-row:hover {
opacity: 0.9;
}
.event-panel__date-icon {
flex-shrink: 0;
}
.event-panel__date-label {
font-size: 14px;
}
/* Card sections */
.event-panel__card {
background: rgba(128, 128, 128, 0.06);
border: 1px solid rgba(128, 128, 128, 0.1);
border-radius: 14px;
padding: 16px;
margin-bottom: 12px;
}
.event-panel__card--dark {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.06);
}
.event-panel__card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.event-panel__card-label {
font-size: 13px;
font-weight: 600;
opacity: 0.7;
}
.event-panel__emotion-value {
font-size: 13px;
font-weight: 600;
}
/* Slider with gradient track via Quasar deep styling */
.event-panel__slider-wrap {
padding: 8px 0;
}
/* The actual visible track bar — apply gradient here */
.event-panel__slider :deep(.q-slider__track) {
background: var(--gradient-bg) !important;
border-radius: 4px;
}
/* Hide the default grey inner bar */
.event-panel__slider :deep(.q-slider__inner) {
background: transparent !important;
}
/* Hide the blue selection bar */
.event-panel__slider :deep(.q-slider__selection) {
background: transparent !important;
}
/* Thumb — SVG-based, use color for fill/stroke */
.event-panel__slider :deep(.q-slider__thumb) {
color: var(--thumb-color, #fff);
}
.event-panel__slider :deep(.q-slider__thumb-shape) {
filter: drop-shadow(0 0 6px var(--thumb-color, #fff));
}
.event-panel__slider :deep(.q-slider__focus-ring) {
display: none;
}
.event-panel__slider-hints {
display: flex;
justify-content: space-between;
font-size: 10px;
opacity: 0.4;
margin-top: 4px;
}
/* Gradient Preset Selector */
.event-panel__presets {
margin-top: 16px;
border-top: 1px solid rgba(128, 128, 128, 0.1);
padding-top: 12px;
}
.event-panel__presets-label {
font-size: 11px;
font-weight: 600;
opacity: 0.5;
display: block;
margin-bottom: 8px;
}
.event-panel__presets-grid {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.event-panel__preset {
width: 45px;
height: 25px;
border-radius: 6px;
cursor: pointer;
border: 2px solid #eee;
transition: border-color 0.2s, transform 0.15s;
}
.event-panel__preset:hover {
transform: scale(1.1);
}
.event-panel__preset--active {
border-color: currentColor;
transform: scale(1.1);
box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3);
}
.event-panel__preset--none {
background: rgba(128, 128, 128, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
/* Note */
.event-panel__note {
margin-top: 4px;
font-size: 14px;
}
/* Media grid */
.event-panel__media-grid {
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.event-panel__media-add {
width: 64px;
height: 64px;
border-radius: 10px;
border: 2px dashed rgba(128, 128, 128, 0.2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.2s;
}
.event-panel__media-add:hover {
border-color: rgba(128, 128, 128, 0.4);
}
/* Delete */
.event-panel__delete {
display: flex;
justify-content: center;
margin-top: 20px;
padding-bottom: 8px;
opacity: 0.6;
}
/* Slide-up transition */
.slide-up-enter-active,
.slide-up-leave-active {
transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.slide-up-enter-from,
.slide-up-leave-to {
transform: translateY(100%);
}
</style>

658
frontend/src/components/FloatingLines.vue Normal file
View file

@ -0,0 +1,658 @@
<template>
<div
ref="containerRef"
class="floating-lines-container"
:style="containerStyle"
></div>
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref, computed, watch } from 'vue'
import {
Scene,
OrthographicCamera,
WebGLRenderer,
PlaneGeometry,
Mesh,
ShaderMaterial,
Vector3,
Vector2,
Clock
} from 'three'
const props = defineProps({
enabledWaves: { type: Array, default: () => ['middle'] },
lineCount: { type: [Array, Number], default: () => [10] },
numPoints: { type: Number, default: 0 },
pointXValues: { type: Array, default: () => [] },
pointYValues: { type: Array, default: () => [] },
pointColors: { type: Array, default: () => [] },
lineSpread: { type: Number, default: 0.05 },
fanSpread: { type: Number, default: 0.05 },
lineSharpness: { type: Number, default: 8.0 },
waveFrequency: { type: Number, default: 7.0 },
bezierCurvature: { type: Number, default: 0.2 },
circleRadiusPx: { type: Number, default: 75 },
circleGlowSize: { type: Number, default: 18 },
circleGlowStrength: { type: Number, default: 1.5 },
animationSpeed: { type: Number, default: 1 },
linesGradient: { type: Array, default: () => ['#e947f5', '#2f4ba2', '#0a0a12'] },
bgColorCenter: { type: String, default: '#0a0514' },
bgColorEdge: { type: String, default: '#000000' },
backgroundImage: { type: String, default: '' },
mixBlendMode: { type: String, default: 'screen' },
interactive: { type: Boolean, default: false },
parallax: { type: Boolean, default: false }
})
const containerStyle = computed(() => {
const style = {}
if (props.backgroundImage) {
style.backgroundImage = `url('${props.backgroundImage}')`
style.backgroundSize = 'cover'
style.backgroundPosition = 'center'
style.backgroundRepeat = 'no-repeat'
}
return style
})
// --- Shader Definitions ---
const vertexShader = `
precision highp float;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`
const fragmentShader = `
precision highp float;
uniform float iTime;
uniform vec3 iResolution;
uniform float animationSpeed;
uniform bool enableTop;
uniform bool enableMiddle;
uniform bool enableBottom;
uniform int topLineCount;
uniform int middleLineCount;
uniform int bottomLineCount;
uniform float topLineDistance;
uniform float bottomLineDistance;
uniform vec3 topWavePosition;
uniform vec3 bottomWavePosition;
uniform int numPoints;
uniform float pointX[8];
uniform float pointY[8];
uniform float lineSpread;
uniform float fanSpread;
uniform float lineSharpness;
uniform float waveFrequency;
uniform float bezierCurvature;
uniform float circleRadiusPx;
uniform float circleGlowSize;
uniform float circleGlowStrength;
uniform vec3 pointColor[8];
uniform vec2 iMouse;
uniform bool interactive;
uniform float bendRadius;
uniform float bendStrength;
uniform float bendInfluence;
uniform bool parallax;
uniform float parallaxStrength;
uniform vec2 parallaxOffset;
uniform vec3 lineGradient[8];
uniform int lineGradientCount;
uniform vec3 bgColorCenter;
uniform vec3 bgColorEdge;
const vec3 BLACK = vec3(0.0);
const vec3 PINK = vec3(233.0, 71.0, 245.0) / 255.0;
const vec3 BLUE = vec3(47.0, 75.0, 162.0) / 255.0;
mat2 rotate(float r) {
return mat2(cos(r), sin(r), -sin(r), cos(r));
}
vec3 background_color(vec2 uv) {
vec3 col = vec3(0.0);
float y = sin(uv.x - 0.2) * 0.3 - 0.1;
float m = uv.y - y;
col += mix(BLUE, BLACK, smoothstep(0.0, 1.0, abs(m)));
col += mix(PINK, BLACK, smoothstep(0.0, 1.0, abs(m - 0.8)));
return col * 0.5;
}
vec3 getLineColor(float t, vec3 baseColor) {
if (lineGradientCount <= 0) {
return baseColor;
}
vec3 gradientColor;
if (lineGradientCount == 1) {
gradientColor = lineGradient[0];
} else {
float clampedT = clamp(t, 0.0, 0.9999);
float scaled = clampedT * float(lineGradientCount - 1);
int idx = int(floor(scaled));
float f = fract(scaled);
int idx2 = min(idx + 1, lineGradientCount - 1);
vec3 c1 = lineGradient[idx];
vec3 c2 = lineGradient[idx2];
gradientColor = mix(c1, c2, f);
}
return gradientColor * 0.5;
}
vec3 drawCircle(vec2 uv, vec2 center, float r, vec3 color) {
float d = length(uv - center);
float glowW = circleGlowSize / iResolution.y * 2.0;
float glow = exp(-pow(max(d - r, 0.0) / glowW, 2.0)) * circleGlowStrength;
float fog = 0.008 / max(d * d * 3.0 + 0.016, 0.001);
float aa = 1.5 / iResolution.y;
float core = 1.0 - smoothstep(r - aa, r + aa, d);
vec3 result = color * (glow + fog) * (1.0 - core);
result += vec3(core);
return result;
}
float bezierClosestT(vec2 q, vec2 p0, vec2 pc, vec2 p1) {
float bestT = 0.0;
float bestD = 1e9;
for (int k = 0; k <= 8; ++k) {
float t = float(k) / 8.0;
float mt = 1.0 - t;
vec2 b = mt*mt*p0 + 2.0*mt*t*pc + t*t*p1;
float d = dot(q - b, q - b);
if (d < bestD) { bestD = d; bestT = t; }
}
vec2 A = pc - p0;
vec2 B = p0 - 2.0*pc + p1;
vec2 D = p0 - q;
float a = 2.0*dot(B,B);
float bco = 6.0*dot(A,B);
float c = 4.0*dot(A,A) + 2.0*dot(D,B);
float dco = 2.0*dot(D,A);
float t = clamp(bestT, 0.001, 0.999);
for (int k = 0; k < 4; ++k) {
float f = a*t*t*t + bco*t*t + c*t + dco;
float fp = 3.0*a*t*t + 2.0*bco*t + c;
if (abs(fp) > 1e-8) t -= f / fp;
t = clamp(t, -0.08, 1.08);
}
return t;
}
float waveFocal(vec2 uv, float fi, float totalLines, vec2 sp, vec2 ep) {
vec2 seg = ep - sp;
float segLen = length(seg);
if (segLen < 0.001) return 0.0;
vec2 segDir = seg / segLen;
vec2 segPerp = vec2(-segDir.y, segDir.x);
vec2 pc = (sp + ep) * 0.5 + segPerp * segLen * bezierCurvature;
float t = bezierClosestT(uv, sp, pc, ep);
float mt = 1.0 - t;
vec2 curvePos = mt*mt*sp + 2.0*mt*t*pc + t*t*ep;
vec2 tang = normalize(2.0*mt*(pc - sp) + 2.0*t*(ep - pc));
vec2 norm = vec2(-tang.y, tang.x);
float s = dot(uv - curvePos, norm);
float time = iTime * animationSpeed;
float normalizedI = totalLines > 1.0 ? fi / (totalLines - 1.0) : 0.5;
float envelope = sin(t * 3.14159265359);
float linePos = (normalizedI - 0.5) * fanSpread * envelope;
float amp = lineSpread * 0.3 * envelope;
float waveDisp = sin(t * waveFrequency + fi * 1.3 + time * 0.4) * amp
* sin(fi * 0.9 + time * 0.18);
float dist = s - linePos - waveDisp;
float fade = smoothstep(-0.06, 0.04, t) * smoothstep(1.06, 0.96, t);
return fade * (0.013 / max(abs(dist) * lineSharpness + 0.004, 1e-4) + 0.003);
}
float wave(vec2 uv, float offset, vec2 screenUv, vec2 mouseUv, bool shouldBend) {
float time = iTime * animationSpeed;
float x_offset = offset;
float x_movement = time * 0.1;
float amp = sin(offset + time * 0.2) * 0.3;
float y = sin(uv.x + x_offset + x_movement) * amp;
if (shouldBend) {
vec2 d = screenUv - mouseUv;
float influence = exp(-dot(d, d) * bendRadius);
float bendOffset = (mouseUv.y - screenUv.y) * influence * bendStrength * bendInfluence;
y += bendOffset;
}
float m = uv.y - y;
return 0.0175 / max(abs(m) + 0.01, 1e-3) + 0.01;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
baseUv.y *= -1.0;
if (parallax) {
baseUv += parallaxOffset;
}
vec3 col = vec3(0.0);
vec3 b = lineGradientCount > 0 ? bgColorCenter : background_color(baseUv);
vec2 mouseUv = vec2(0.0);
if (interactive) {
mouseUv = (2.0 * iMouse - iResolution.xy) / iResolution.y;
mouseUv.y *= -1.0;
}
if (enableBottom) {
for (int i = 0; i < bottomLineCount; ++i) {
float fi = float(i);
float t = fi / max(float(bottomLineCount - 1), 1.0);
vec3 lineCol = getLineColor(t, b);
float angle = bottomWavePosition.z * log(length(baseUv) + 1.0);
vec2 ruv = baseUv * rotate(angle);
col += lineCol * wave(
ruv + vec2(bottomLineDistance * fi + bottomWavePosition.x, bottomWavePosition.y),
1.5 + 0.2 * fi,
baseUv,
mouseUv,
interactive
) * 0.2;
}
}
if (enableMiddle) {
const int MAX_PTS = 8;
const int MAX_SEGS = 7;
float r = circleRadiusPx / iResolution.y * 2.0;
// Segments: connect consecutive points using pointX[] and pointY[]
for (int s = 0; s < MAX_SEGS; ++s) {
if (s >= numPoints - 1) break;
vec2 sp = vec2(pointX[s], pointY[s]);
vec2 ep = vec2(pointX[s + 1], pointY[s + 1]);
vec2 pd = ep - sp;
float pl = length(pd);
vec2 pa = pl > 0.001 ? pd / pl : vec2(1.0, 0.0);
float t_seg = clamp(dot(baseUv - sp, pa) / pl, 0.0, 1.0);
vec3 lineCol = mix(pointColor[s], pointColor[s + 1], t_seg);
vec2 segD = ep - sp;
float segL = length(segD);
vec2 segDir = segL > 0.001 ? segD / segL : vec2(1.0, 0.0);
vec2 sPerp = vec2(-segDir.y, segDir.x);
vec2 pc = (sp + ep) * 0.5 + sPerp * segL * bezierCurvature;
float bt = bezierClosestT(baseUv, sp, pc, ep);
float bmt = 1.0 - bt;
vec2 bPos = bmt*bmt*sp + 2.0*bmt*bt*pc + bt*bt*ep;
float bDist = length(baseUv - bPos);
float fogFade = smoothstep(-0.06, 0.05, bt) * smoothstep(1.06, 0.95, bt);
float fogEnv = sin(bt * 3.14159265359);
float segFog = fogFade * fogEnv * 0.0018 / max(bDist * bDist * 4.0 + 0.012, 0.001);
col += lineCol * segFog;
for (int i = 0; i < middleLineCount; ++i) {
col += lineCol * waveFocal(baseUv, float(i), float(middleLineCount), sp, ep);
}
}
// Circles at each point
for (int p = 0; p < MAX_PTS; ++p) {
if (p >= numPoints) break;
vec3 circCol = pointColor[p];
col += drawCircle(baseUv, vec2(pointX[p], pointY[p]), r, circCol);
}
}
if (enableTop) {
for (int i = 0; i < topLineCount; ++i) {
float fi = float(i);
float t = fi / max(float(topLineCount - 1), 1.0);
vec3 lineCol = getLineColor(t, b);
float angle = topWavePosition.z * log(length(baseUv) + 1.0);
vec2 ruv = baseUv * rotate(angle);
ruv.x *= -1.0;
col += lineCol * wave(
ruv + vec2(topLineDistance * fi + topWavePosition.x, topWavePosition.y),
1.0 + 0.2 * fi,
baseUv,
mouseUv,
interactive
) * 0.1;
}
}
float dist = length(baseUv) / 1.8;
vec3 bg = mix(bgColorCenter, bgColorEdge, clamp(dist, 0.0, 1.0));
fragColor = vec4(clamp(bg + col, 0.0, 1.0), 1.0);
}
void main() {
vec4 color = vec4(0.0);
mainImage(color, gl_FragCoord.xy);
gl_FragColor = color;
}
`
// --- Helpers ---
const MAX_GRADIENT_STOPS = 8
function hexToVec3(hex) {
let value = hex.trim()
if (value.startsWith('#')) value = value.slice(1)
let r = 255, g = 255, b = 255
if (value.length === 3) {
r = parseInt(value[0] + value[0], 16)
g = parseInt(value[1] + value[1], 16)
b = parseInt(value[2] + value[2], 16)
} else if (value.length === 6) {
r = parseInt(value.slice(0, 2), 16)
g = parseInt(value.slice(2, 4), 16)
b = parseInt(value.slice(4, 6), 16)
}
return new Vector3(r / 255, g / 255, b / 255)
}
// --- Component Logic ---
const containerRef = ref(null)
let scene = null
let camera = null
let renderer = null
let material = null
let geometry = null
let mesh = null
let clock = null
let rafId = null
let resizeObserver = null
let uniforms = null
// Mouse tracking
let targetMouse = null
let currentMouse = null
let targetInfluence = 0
let currentInfluence = 0
let targetParallax = null
let currentParallax = null
const mouseDamping = 0.05
function getLineCount(waveType) {
if (typeof props.lineCount === 'number') return props.lineCount
if (!props.enabledWaves.includes(waveType)) return 0
const index = props.enabledWaves.indexOf(waveType)
return props.lineCount[index] ?? 6
}
function applyGradient() {
if (!uniforms) return
const lines = props.linesGradient.filter(s => s && s.trim().length > 0)
const stops = lines.slice(0, MAX_GRADIENT_STOPS)
uniforms.lineGradientCount.value = stops.length
stops.forEach((hex, i) => {
const c = hexToVec3(hex)
uniforms.lineGradient.value[i].set(c.x, c.y, c.z)
})
}
function applyPointColors() {
if (!uniforms) return
for (let i = 0; i < 8; i++) {
const hex = props.pointColors[i]
if (hex) {
const c = hexToVec3(hex)
uniforms.pointColor.value[i].set(c.x, c.y, c.z)
} else {
uniforms.pointColor.value[i].set(1, 1, 1)
}
}
}
function applyBgColors() {
if (!uniforms) return
const center = hexToVec3(props.bgColorCenter)
uniforms.bgColorCenter.value.set(center.x, center.y, center.z)
const edge = hexToVec3(props.bgColorEdge)
uniforms.bgColorEdge.value.set(edge.x, edge.y, edge.z)
}
// Watch all props for live updates
watch(() => props.animationSpeed, (v) => { if (uniforms) uniforms.animationSpeed.value = v })
watch(() => props.lineCount, () => {
if (!uniforms) return
uniforms.middleLineCount.value = props.enabledWaves.includes('middle') ? getLineCount('middle') : 0
})
watch(() => props.lineSpread, (v) => { if (uniforms) uniforms.lineSpread.value = v })
watch(() => props.fanSpread, (v) => { if (uniforms) uniforms.fanSpread.value = v })
watch(() => props.lineSharpness, (v) => { if (uniforms) uniforms.lineSharpness.value = v })
watch(() => props.waveFrequency, (v) => { if (uniforms) uniforms.waveFrequency.value = v })
watch(() => props.bezierCurvature, (v) => { if (uniforms) uniforms.bezierCurvature.value = v })
watch(() => props.circleRadiusPx, (v) => { if (uniforms) uniforms.circleRadiusPx.value = v })
watch(() => props.circleGlowSize, (v) => { if (uniforms) uniforms.circleGlowSize.value = v })
watch(() => props.circleGlowStrength, (v) => { if (uniforms) uniforms.circleGlowStrength.value = v })
watch(() => props.numPoints, (v) => { if (uniforms) uniforms.numPoints.value = v })
watch(() => props.pointXValues, (values) => {
if (!uniforms) return
for (let i = 0; i < 8; i++) {
uniforms.pointX.value[i] = values[i] ?? 0
}
}, { deep: true })
watch(() => props.pointYValues, (values) => {
if (!uniforms) return
for (let i = 0; i < 8; i++) {
uniforms.pointY.value[i] = values[i] ?? 0
}
}, { deep: true })
watch(() => props.pointColors, applyPointColors, { deep: true })
watch(() => props.linesGradient, applyGradient, { deep: true })
watch(() => props.bgColorCenter, applyBgColors)
watch(() => props.bgColorEdge, applyBgColors)
onMounted(() => {
if (!containerRef.value) return
targetMouse = new Vector2(-1000, -1000)
currentMouse = new Vector2(-1000, -1000)
targetParallax = new Vector2(0, 0)
currentParallax = new Vector2(0, 0)
scene = new Scene()
camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
camera.position.z = 1
renderer = new WebGLRenderer({ antialias: true, alpha: false })
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2))
renderer.domElement.style.width = '100%'
renderer.domElement.style.height = '100%'
renderer.domElement.style.display = 'block'
renderer.domElement.style.mixBlendMode = props.mixBlendMode
containerRef.value.appendChild(renderer.domElement)
const middleLineCount = props.enabledWaves.includes('middle') ? getLineCount('middle') : 0
// Initial point positions (UV space, no flip)
const initX = [...props.pointXValues].slice(0, 8).concat(Array(8).fill(0)).slice(0, 8)
const initY = [...props.pointYValues].slice(0, 8).concat(Array(8).fill(0)).slice(0, 8)
uniforms = {
iTime: { value: 0 },
iResolution: { value: new Vector3(1, 1, 1) },
animationSpeed: { value: props.animationSpeed },
enableTop: { value: props.enabledWaves.includes('top') },
enableMiddle: { value: props.enabledWaves.includes('middle') },
enableBottom: { value: props.enabledWaves.includes('bottom') },
topLineCount: { value: 0 },
middleLineCount: { value: middleLineCount },
bottomLineCount: { value: 0 },
topLineDistance: { value: 0.01 },
bottomLineDistance: { value: 0.01 },
topWavePosition: { value: new Vector3(10.0, 0.5, -0.4) },
bottomWavePosition: { value: new Vector3(2.0, -0.7, -1) },
numPoints: { value: props.numPoints },
pointX: { value: initX },
pointY: { value: initY },
lineSpread: { value: props.lineSpread },
fanSpread: { value: props.fanSpread },
lineSharpness: { value: props.lineSharpness },
waveFrequency: { value: props.waveFrequency },
bezierCurvature: { value: props.bezierCurvature },
circleRadiusPx: { value: props.circleRadiusPx },
circleGlowSize: { value: props.circleGlowSize },
circleGlowStrength: { value: props.circleGlowStrength },
pointColor: {
value: Array.from({ length: 8 }, () => new Vector3(1, 1, 1))
},
iMouse: { value: new Vector2(-1000, -1000) },
interactive: { value: props.interactive },
bendRadius: { value: 5.0 },
bendStrength: { value: -0.5 },
bendInfluence: { value: 0 },
parallax: { value: props.parallax },
parallaxStrength: { value: 0.2 },
parallaxOffset: { value: new Vector2(0, 0) },
lineGradient: {
value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1))
},
lineGradientCount: { value: 0 },
bgColorCenter: { value: new Vector3(0, 0, 0) },
bgColorEdge: { value: new Vector3(0, 0, 0) }
}
// Apply initial values
applyGradient()
applyBgColors()
applyPointColors()
material = new ShaderMaterial({
uniforms,
vertexShader,
fragmentShader
})
geometry = new PlaneGeometry(2, 2)
mesh = new Mesh(geometry, material)
scene.add(mesh)
clock = new Clock()
// Resize
const setSize = () => {
if (!containerRef.value || !renderer) return
const width = containerRef.value.clientWidth || 1
const height = containerRef.value.clientHeight || 1
renderer.setSize(width, height, false)
const canvasWidth = renderer.domElement.width
const canvasHeight = renderer.domElement.height
uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1)
}
setSize()
resizeObserver = new ResizeObserver(setSize)
resizeObserver.observe(containerRef.value)
// Pointer events
const handlePointerMove = (event) => {
const rect = renderer.domElement.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
const dpr = renderer.getPixelRatio()
targetMouse.set(x * dpr, (rect.height - y) * dpr)
targetInfluence = 1.0
if (props.parallax) {
const centerX = rect.width / 2
const centerY = rect.height / 2
const offsetX = (x - centerX) / rect.width
const offsetY = -(y - centerY) / rect.height
targetParallax.set(offsetX * 0.2, offsetY * 0.2)
}
}
const handlePointerLeave = () => {
targetInfluence = 0.0
}
renderer.domElement.addEventListener('pointermove', handlePointerMove)
renderer.domElement.addEventListener('pointerleave', handlePointerLeave)
// Render loop
const renderLoop = () => {
uniforms.iTime.value = clock.getElapsedTime()
if (props.interactive) {
currentMouse.lerp(targetMouse, mouseDamping)
uniforms.iMouse.value.copy(currentMouse)
currentInfluence += (targetInfluence - currentInfluence) * mouseDamping
uniforms.bendInfluence.value = currentInfluence
}
if (props.parallax) {
currentParallax.lerp(targetParallax, mouseDamping)
uniforms.parallaxOffset.value.copy(currentParallax)
}
renderer.render(scene, camera)
rafId = requestAnimationFrame(renderLoop)
}
renderLoop()
})
onBeforeUnmount(() => {
if (rafId) cancelAnimationFrame(rafId)
if (resizeObserver) resizeObserver.disconnect()
if (geometry) geometry.dispose()
if (material) material.dispose()
if (renderer) {
renderer.dispose()
if (renderer.domElement && renderer.domElement.parentNode) {
renderer.domElement.parentNode.removeChild(renderer.domElement)
}
}
})
</script>
<style scoped>
.floating-lines-container {
position: absolute;
inset: 0;
overflow: hidden;
}
</style>

110
frontend/src/components/GlowDot.vue Normal file
View file

@ -0,0 +1,110 @@
<template>
<div
class="glow-dot"
:class="{
'glow-dot--ghost': isGhost,
'glow-dot--selected': selected,
'glow-dot--dimmed': isDimmed
}"
:style="dotStyle"
@click.stop="onSelect"
>
<!-- White inner circle — shader provides the glow -->
<div class="glow-dot__inner">
<img
v-if="event.image"
:src="event.image"
class="glow-dot__image"
alt=""
/>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
import { useEventsStore } from 'stores/events'
import { useSettingsStore } from 'stores/settings'
const props = defineProps({
event: { type: Object, required: true },
x: { type: Number, default: 0 },
isGhost: { type: Boolean, default: false },
selected: { type: Boolean, default: false }
})
const emit = defineEmits(['select'])
const eventsStore = useEventsStore()
const settingsStore = useSettingsStore()
// Match shader circle: CSS diameter = 2 * circleRadiusPx / dpr
const dpr = Math.min(window.devicePixelRatio || 1, 2)
const dotSize = computed(() => {
return 2 * settingsStore.floatingLines.circleRadius / dpr
})
// Y position: emotion +1 → top (15%), 0 → middle (50%), -1 → bottom (85%)
const yPercent = computed(() => {
return 50 - props.event.emotion * 35
})
const dotStyle = computed(() => ({
left: `${props.x}px`,
top: `${yPercent.value}%`,
width: `${dotSize.value}px`,
height: `${dotSize.value}px`
}))
const isDimmed = computed(() => {
return eventsStore.selectedEventId !== null && !props.selected && !props.isGhost
})
function onSelect() {
if (!props.isGhost) {
emit('select')
}
}
</script>
<style scoped>
.glow-dot {
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 10;
transition: opacity 0.3s ease, transform 0.15s ease;
}
/* Clean inner circle — shader provides the glow around it */
.glow-dot__inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
overflow: hidden;
}
.glow-dot__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* States */
.glow-dot--ghost {
opacity: 0.7;
cursor: default;
}
.glow-dot--selected {
transform: translate(-50%, -50%) scale(1.15);
z-index: 15;
}
.glow-dot--dimmed {
opacity: 0.5;
}
</style>

385
frontend/src/components/LifeWaveSettings.vue Normal file
View file

@ -0,0 +1,385 @@
<template>
<Transition name="slide-up">
<div v-if="open" class="lw-settings glass--panel">
<!-- Handle — tap to close -->
<div class="lw-settings__handle" @click="$emit('close')">
<div class="lw-settings__handle-bar"></div>
</div>
<div class="lw-settings__scroll">
<div class="lw-settings__title">Einstellungen</div>
<!-- Linien -->
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
<span class="lw-settings__card-label">Linien</span>
<div class="lw-settings__row">
<span>Speed</span>
<span class="lw-settings__value">{{ fl.speed.toFixed(2) }}</span>
</div>
<q-slider
:model-value="fl.speed"
@update:model-value="v => update({ speed: v })"
:min="0.1" :max="3" :step="0.05"
/>
<div class="lw-settings__row">
<span>Anzahl</span>
<span class="lw-settings__value">{{ fl.lineCount }}</span>
</div>
<q-slider
:model-value="fl.lineCount"
@update:model-value="v => update({ lineCount: v })"
:min="1" :max="40" :step="1"
/>
<div class="lw-settings__row">
<span>Wellen-Amp</span>
<span class="lw-settings__value">{{ fl.spread.toFixed(2) }}</span>
</div>
<q-slider
:model-value="fl.spread"
@update:model-value="v => update({ spread: v })"
:min="0.01" :max="1" :step="0.01"
/>
<div class="lw-settings__row">
<span>Fächerbreite</span>
<span class="lw-settings__value">{{ fl.fanSpread.toFixed(3) }}</span>
</div>
<q-slider
:model-value="fl.fanSpread"
@update:model-value="v => update({ fanSpread: v })"
:min="0.01" :max="0.5" :step="0.005"
/>
<div class="lw-settings__row">
<span>Feinheit</span>
<span class="lw-settings__value">{{ fl.lineSharpness.toFixed(1) }}</span>
</div>
<q-slider
:model-value="fl.lineSharpness"
@update:model-value="v => update({ lineSharpness: v })"
:min="0.3" :max="10" :step="0.1"
/>
<div class="lw-settings__row">
<span>Welligkeit</span>
<span class="lw-settings__value">{{ fl.waveFrequency.toFixed(1) }}</span>
</div>
<q-slider
:model-value="fl.waveFrequency"
@update:model-value="v => update({ waveFrequency: v })"
:min="1" :max="30" :step="0.5"
/>
<div class="lw-settings__row">
<span>Kurve</span>
<span class="lw-settings__value">{{ fl.bezierCurvature.toFixed(2) }}</span>
</div>
<q-slider
:model-value="fl.bezierCurvature"
@update:model-value="v => update({ bezierCurvature: v })"
:min="-1" :max="1" :step="0.05"
/>
<div class="lw-settings__row">
<span>Kreis</span>
<span class="lw-settings__value">{{ fl.circleRadius }}px</span>
</div>
<q-slider
:model-value="fl.circleRadius"
@update:model-value="v => update({ circleRadius: v })"
:min="10" :max="200" :step="5"
/>
<div class="lw-settings__row">
<span>Glow Größe</span>
<span class="lw-settings__value">{{ fl.glowSize }}px</span>
</div>
<q-slider
:model-value="fl.glowSize"
@update:model-value="v => update({ glowSize: v })"
:min="5" :max="100" :step="1"
/>
<div class="lw-settings__row">
<span>Glow Stärke</span>
<span class="lw-settings__value">{{ fl.glowStrength.toFixed(1) }}</span>
</div>
<q-slider
:model-value="fl.glowStrength"
@update:model-value="v => update({ glowStrength: v })"
:min="0.5" :max="12" :step="0.5"
/>
</div>
<!-- Hintergrundbild -->
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
<span class="lw-settings__card-label">Hintergrundbild</span>
<div class="lw-settings__img-grid">
<button
class="lw-settings__img-btn"
:class="{ 'lw-settings__img-btn--active': fl.backgroundImage === '' }"
@click="update({ backgroundImage: '' })"
>
Keins
</button>
<button
v-for="n in 10"
:key="'bg' + n"
class="lw-settings__img-btn"
:class="{ 'lw-settings__img-btn--active': fl.backgroundImage === `/images/bg-image-${n}.jpg` }"
@click="update({ backgroundImage: `/images/bg-image-${n}.jpg` })"
>
{{ n }}
</button>
</div>
</div>
<!-- Hintergrundfarbe -->
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
<span class="lw-settings__card-label">Hintergrundfarbe</span>
<div class="lw-settings__row">
<span>BG Mitte</span>
<input
type="color"
:value="fl.bgCenter"
@input="e => update({ bgCenter: e.target.value })"
class="lw-settings__color-input"
/>
</div>
<div class="lw-settings__row">
<span>BG Rand</span>
<input
type="color"
:value="fl.bgEdge"
@input="e => update({ bgEdge: e.target.value })"
class="lw-settings__color-input"
/>
</div>
</div>
<!-- Farbstopps -->
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
<span class="lw-settings__card-label">Farbverlauf (je Zeile ein Hex)</span>
<textarea
:value="fl.gradientStops"
@input="e => update({ gradientStops: e.target.value })"
class="lw-settings__gradient-input"
rows="4"
spellcheck="false"
></textarea>
</div>
<!-- Extras -->
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
<span class="lw-settings__card-label">Extras</span>
<div class="lw-settings__row">
<span>{{ isDark ? 'Hell-Modus' : 'Dunkel-Modus' }}</span>
<q-toggle
:model-value="isDark"
@update:model-value="toggleDark"
dense
/>
</div>
</div>
<!-- Reset -->
<div class="lw-settings__reset">
<q-btn
flat dense no-caps
label="Zurücksetzen"
icon="restart_alt"
size="sm"
@click="settingsStore.resetFloatingLines()"
/>
</div>
</div>
</div>
</Transition>
</template>
<script setup>
import { computed } from 'vue'
import { useQuasar } from 'quasar'
import { useSettingsStore } from 'stores/settings'
defineProps({ open: { type: Boolean, default: false } })
defineEmits(['close'])
const $q = useQuasar()
const settingsStore = useSettingsStore()
const isDark = computed(() => $q.dark.isActive)
const fl = computed(() => settingsStore.floatingLines)
function update(changes) {
settingsStore.updateFloatingLines(changes)
}
function toggleDark() {
$q.dark.toggle()
}
</script>
<style scoped>
.lw-settings {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 20;
height: 75dvh;
display: flex;
flex-direction: column;
border-radius: 20px 20px 0 0;
}
.lw-settings__handle {
display: flex;
justify-content: center;
padding: 10px 0 4px;
flex-shrink: 0;
cursor: pointer;
}
.lw-settings__handle-bar {
width: 36px;
height: 4px;
border-radius: 2px;
background: rgba(128, 128, 128, 0.3);
}
.lw-settings__scroll {
flex: 1;
overflow-y: auto;
padding: 0 20px 32px;
-webkit-overflow-scrolling: touch;
}
.lw-settings__title {
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
}
.lw-settings__card {
background: rgba(128, 128, 128, 0.06);
border: 1px solid rgba(128, 128, 128, 0.1);
border-radius: 14px;
padding: 16px;
margin-bottom: 12px;
}
.lw-settings__card--dark {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.06);
}
.lw-settings__card-label {
font-size: 13px;
font-weight: 600;
opacity: 0.7;
display: block;
margin-bottom: 12px;
}
.lw-settings__row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
margin-top: 12px;
}
.lw-settings__row:first-of-type {
margin-top: 0;
}
.lw-settings__value {
font-weight: 600;
opacity: 0.6;
}
.lw-settings__img-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lw-settings__img-btn {
background: rgba(128, 128, 128, 0.1);
border: 1px solid rgba(128, 128, 128, 0.2);
color: inherit;
font-family: inherit;
font-size: 12px;
padding: 4px 10px;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
opacity: 0.6;
}
.lw-settings__img-btn:hover {
opacity: 1;
border-color: #a855f7;
}
.lw-settings__img-btn--active {
border-color: #a855f7;
color: #a855f7;
opacity: 1;
}
.lw-settings__color-input {
width: 36px;
height: 22px;
border: none;
padding: 0;
background: none;
cursor: pointer;
border-radius: 4px;
}
.lw-settings__gradient-input {
width: 100%;
background: rgba(0, 0, 0, 0.15);
border: 1px solid rgba(128, 128, 128, 0.2);
color: inherit;
font-family: ui-monospace, 'Cascadia Code', monospace;
font-size: 12px;
padding: 8px 10px;
resize: none;
border-radius: 8px;
outline: none;
line-height: 1.6;
}
.body--dark .lw-settings__gradient-input {
background: rgba(255, 255, 255, 0.05);
}
.lw-settings__reset {
display: flex;
justify-content: center;
margin-top: 20px;
padding-bottom: 8px;
opacity: 0.6;
}
/* Slide-up transition */
.slide-up-enter-active,
.slide-up-leave-active {
transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.slide-up-enter-from,
.slide-up-leave-to {
transform: translateY(100%);
}
</style>

384
frontend/src/components/TimelineView.vue Normal file
View file

@ -0,0 +1,384 @@
<template>
<div
class="timeline"
ref="timelineRef"
@scroll="onScroll"
@wheel.prevent="onWheel"
@touchstart.passive="onTouchStart"
@touchmove.passive="onTouchMove"
@touchend.passive="onTouchEnd"
>
<div class="timeline__track" :style="{ width: trackWidth + 'px' }">
<!-- GlowDots (real events + ghost) -->
<GlowDot
v-for="(event, index) in displayEvents"
:key="event.id"
:event="event"
:x="getEventX(index)"
:is-ghost="event.id === '__ghost__'"
:selected="eventsStore.selectedEventId === event.id"
@select="$emit('dotSelect', event.id)"
/>
<!-- Month labels — one per event, clickable -->
<div class="timeline__labels">
<div
v-for="(label, index) in eventLabels"
:key="label.key"
class="timeline__month"
:style="{ left: getEventX(index) + 'px' }"
:class="{ 'timeline__month--active': label.key === activeLabel }"
@click="scrollToIndex(index)"
>
{{ label.month }}
</div>
</div>
<!-- Year labels — shown at year transitions, clickable -->
<div class="timeline__years">
<div
v-for="year in yearMarkers"
:key="year.key"
class="timeline__year"
:style="{ left: year.x + 'px' }"
@click="scrollToX(year.x)"
>
{{ year.year }}
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { useEventsStore } from 'stores/events'
import GlowDot from 'components/GlowDot.vue'
const emit = defineEmits(['dotSelect', 'viewUpdate'])
const eventsStore = useEventsStore()
const timelineRef = ref(null)
const scrollLeft = ref(0)
const viewportWidth = ref(400)
const containerHeight = ref(400)
// Zoom: 1.0 = default, range 0.4–3.0
const zoomLevel = ref(1)
const MIN_ZOOM = 0.4
const MAX_ZOOM = 3.0
const ZOOM_STEP = 0.08
// Spacing: ~4 events visible at a time, scaled by zoom
const BASE_SPACING = computed(() => viewportWidth.value / 2.5)
const EVENT_SPACING = computed(() => BASE_SPACING.value * zoomLevel.value)
const PADDING = computed(() => viewportWidth.value / 2)
// Display events: sorted events + ghost when creating
const showGhost = computed(() => eventsStore.panelOpen && !eventsStore.editingEventId)
const displayEvents = computed(() => {
const sorted = [...eventsStore.sortedEvents]
if (!showGhost.value) return sorted
const ghost = eventsStore.ghostEvent
const ghostDate = new Date(ghost.date)
const insertIdx = sorted.findIndex((e) => new Date(e.date) > ghostDate)
if (insertIdx === -1) {
sorted.push(ghost)
} else {
sorted.splice(insertIdx, 0, ghost)
}
return sorted
})
// Track width
const trackWidth = computed(() => {
const count = displayEvents.value.length
if (count === 0) return viewportWidth.value
return PADDING.value * 2 + (count - 1) * EVENT_SPACING.value
})
// X position for event at given index
function getEventX(index) {
return PADDING.value + index * EVENT_SPACING.value
}
// Month names
const MONTHS = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
// One label per event showing its month
const eventLabels = computed(() => {
return displayEvents.value.map((event, index) => {
const d = new Date(event.date)
return {
key: `${event.id}-${index}`,
month: MONTHS[d.getMonth()],
year: d.getFullYear(),
fullMonth: `${d.getFullYear()}-${d.getMonth()}`
}
})
})
// Year markers — shown between events where the year changes
const yearMarkers = computed(() => {
const markers = []
const sorted = displayEvents.value
if (sorted.length === 0) return markers
// First event's year
const firstDate = new Date(sorted[0].date)
markers.push({
key: `year-0`,
year: firstDate.getFullYear(),
x: getEventX(0)
})
for (let i = 1; i < sorted.length; i++) {
const prevYear = new Date(sorted[i - 1].date).getFullYear()
const currYear = new Date(sorted[i].date).getFullYear()
if (currYear !== prevYear) {
// Position between the two events
const x = (getEventX(i - 1) + getEventX(i)) / 2
markers.push({
key: `year-${i}`,
year: currYear,
x
})
}
}
return markers
})
// Active label — closest event to center of viewport
const activeLabel = computed(() => {
const sorted = displayEvents.value
if (sorted.length === 0) return null
const centerX = scrollLeft.value + viewportWidth.value / 2
let closestIndex = 0
let closestDist = Infinity
for (let i = 0; i < sorted.length; i++) {
const dist = Math.abs(getEventX(i) - centerX)
if (dist < closestDist) {
closestDist = dist
closestIndex = i
}
}
return eventLabels.value[closestIndex]?.key ?? null
})
function onScroll() {
if (timelineRef.value) {
scrollLeft.value = timelineRef.value.scrollLeft
}
}
function scrollToIndex(index) {
if (!timelineRef.value) return
const x = getEventX(index)
timelineRef.value.scrollTo({
left: x - viewportWidth.value / 2,
behavior: 'smooth'
})
}
function scrollToX(x) {
if (!timelineRef.value) return
timelineRef.value.scrollTo({
left: x - viewportWidth.value / 2,
behavior: 'smooth'
})
}
function updateViewportWidth() {
if (timelineRef.value) {
viewportWidth.value = timelineRef.value.clientWidth || 400
containerHeight.value = timelineRef.value.clientHeight || 400
}
}
// Zoom while keeping the viewport center stable
function applyZoom(newZoom, centerClientX) {
const el = timelineRef.value
if (!el) return
// Default center to viewport middle
const rect = el.getBoundingClientRect()
const cx = centerClientX !== undefined ? centerClientX - rect.left : viewportWidth.value / 2
// World-space X under the center point before zoom
const worldXBefore = el.scrollLeft + cx
// Ratio of old spacing to new
const oldZoom = zoomLevel.value
const ratio = newZoom / oldZoom
zoomLevel.value = newZoom
// After Vue updates, restore scroll so the same world point stays under center
nextTick(() => {
el.scrollLeft = worldXBefore * ratio - cx
scrollLeft.value = el.scrollLeft
})
}
// Desktop: Ctrl+wheel or pinch on trackpad (both fire wheel with ctrlKey)
function onWheel(e) {
if (e.ctrlKey || e.metaKey) {
// Pinch / Ctrl+scroll → zoom
const delta = -e.deltaY * ZOOM_STEP * 0.1
const newZoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoomLevel.value + delta))
if (newZoom !== zoomLevel.value) {
applyZoom(newZoom, e.clientX)
}
} else {
// Normal scroll — let the browser handle horizontal scroll
const el = timelineRef.value
if (el) {
el.scrollLeft += e.deltaX || e.deltaY
scrollLeft.value = el.scrollLeft
}
}
}
// Touch: pinch-to-zoom
let touchStartDist = 0
let touchStartZoom = 1
function getTouchDist(touches) {
const dx = touches[0].clientX - touches[1].clientX
const dy = touches[0].clientY - touches[1].clientY
return Math.sqrt(dx * dx + dy * dy)
}
function onTouchStart(e) {
if (e.touches.length === 2) {
touchStartDist = getTouchDist(e.touches)
touchStartZoom = zoomLevel.value
}
}
function onTouchMove(e) {
if (e.touches.length === 2) {
const dist = getTouchDist(e.touches)
const scale = dist / touchStartDist
const newZoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, touchStartZoom * scale))
const cx = (e.touches[0].clientX + e.touches[1].clientX) / 2
applyZoom(newZoom, cx)
}
}
function onTouchEnd() {
touchStartDist = 0
}
// Scroll to center on the last event on mount
let resizeObserver = null
// Emit timeline state so the layout can position shader points
function emitViewState() {
emit('viewUpdate', {
scrollLeft: scrollLeft.value,
viewportWidth: viewportWidth.value,
containerHeight: containerHeight.value,
events: displayEvents.value.map((e, i) => ({
emotion: e.emotion,
x: getEventX(i),
color: eventsStore.getGlowColor(e)
}))
})
}
watch(
[scrollLeft, viewportWidth, containerHeight, displayEvents, zoomLevel],
emitViewState,
{ deep: true }
)
onMounted(async () => {
await nextTick()
if (!timelineRef.value) return
updateViewportWidth()
const events = displayEvents.value
if (events.length === 0) return
const lastX = getEventX(events.length - 1)
timelineRef.value.scrollLeft = lastX - viewportWidth.value / 2
scrollLeft.value = timelineRef.value.scrollLeft
// Update viewport width on resize
resizeObserver = new ResizeObserver(updateViewportWidth)
resizeObserver.observe(timelineRef.value)
// Emit initial state
emitViewState()
})
onUnmounted(() => {
resizeObserver?.disconnect()
})
</script>
<style scoped>
.timeline {
position: absolute;
top: 60px;
left: 0;
right: 0;
bottom: 70px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.timeline::-webkit-scrollbar {
display: none;
}
.timeline__track {
position: relative;
height: 100%;
}
/* Month labels */
.timeline__labels {
position: absolute;
bottom: 28px;
left: 0;
right: 0;
height: 24px;
}
.timeline__month {
position: absolute;
transform: translateX(-50%);
font-size: 12px;
font-weight: 400;
opacity: 0.35;
transition: opacity 0.3s ease, font-size 0.3s ease, font-weight 0.3s ease;
white-space: nowrap;
cursor: pointer;
}
.timeline__month--active {
font-size: 15px;
font-weight: 700;
opacity: 1;
}
/* Year labels */
.timeline__years {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
height: 20px;
}
.timeline__year {
position: absolute;
transform: translateX(-50%);
font-size: 12px;
font-weight: 600;
opacity: 0.4;
white-space: nowrap;
cursor: pointer;
}
</style>

32
frontend/src/components/UserMenuButton.vue Normal file
View file

@ -0,0 +1,32 @@
<template>
<button class="user-menu-btn glass--button" @click="$emit('openMenu')">
<q-icon name="person_outline" size="22px" :color="isDark ? 'white' : 'grey-8'" />
</button>
</template>
<script setup>
import { computed } from 'vue'
import { useQuasar } from 'quasar'
defineEmits(['openMenu'])
const $q = useQuasar()
const isDark = computed(() => $q.dark.isActive)
</script>
<style scoped>
.user-menu-btn {
position: fixed;
top: 16px;
left: 16px;
z-index: 30;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
</style>

249
frontend/src/css/app.scss
View file

@ -1,211 +1,54 @@
// Variables
$primary-color: #4f46e5;
$gradient-colors: (45deg, #8634f9, #ffab1a, #ff2fa2);
$button-radius: 4px;
$button-padding: 6px 12px;
$tooltip-radius: 4px;
$image-size: 80px;
// Glass button style
.glass--button {
background: rgba(128, 128, 128, 0.1);
border: 1px solid rgba(128, 128, 128, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background 0.2s ease;
// Mixins
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// Global Styles
.controls {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 500px;
margin-bottom: 10px;
}
.button {
padding: $button-padding;
background-color: $primary-color;
color: white;
border: none;
border-radius: $button-radius;
cursor: pointer;
}
// Wave Visualization Styles
.visualization-container {
position: relative;
width: 100%;
height: calc(100vh - 86px);
overflow: hidden;
}
.gradient-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2);
background-size: 200% 200%;
animation: gradientAnimation 20s ease infinite;
}
@keyframes gradientAnimation {
0% { background-position: 0% 0%; }
25% { background-position: 100% 0%; }
50% { background-position: 100% 100%; }
75% { background-position: 0% 100%; }
100% { background-position: 0% 0%; }
}
.median {
position: absolute;
top: 51.2%;
left: 0;
right: 0;
height: 1px;
background-color: rgba(255,255,255,0.3);
z-index: 1;
}
.scroll-container {
position: relative;
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
min-height:400px;
z-index: 2;
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.smooth-scroll {
scroll-behavior: smooth;
}
.active {
cursor: grabbing;
}
.spacer {
height: 100vh;
}
.dot-tooltip {
pointer-events: none;
opacity: 1;
.tooltip-background {
fill: rgba(0, 0, 0, 0.0);
}
.tooltip-content {
@include flex-center;
flex-direction: column;
width: 100%;
height: 100%;
color: white;
}
.image_container {
margin-top: 8px;
box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25);
transition: box-shadow 0.25s ease-in-out;
width: $image-size;
height: $image-size;
overflow: hidden;
border-radius: 50%;
border: 2px solid white;
display: flex;
justify-content: center;
&:hover {
box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8);
}
}
.tooltip-image {
width: 100%;
height: auto;
display: block;
pointer-events: auto;
}
.tooltip-title {
font-size: 14px;
font-weight: 400;
margin-bottom: 2px;
text-align: center;
text-wrap: balance;
hyphens: auto;
line-height: 1.1;
}
.tooltip-description {
font-size: 12px;
font-weight: 300;
}
.tooltip-arrow {
width: 1px;
height: 30px;
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent);
}
}
.dot {
transition: r 0.2s ease, fill 0.2s ease;
cursor: pointer;
&:hover {
fill: rgba(255, 255, 255, 0.9);
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}
}
.tooltip-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: $tooltip-radius;
}
// Remove Quasar card shadows globally
.q-card {
box-shadow: none !important;
&--bordered {
box-shadow: none !important;
&:hover {
background: rgba(128, 128, 128, 0.18);
}
&--flat {
box-shadow: none !important;
&:active {
transform: scale(0.95);
}
}
// .q-drawer{
// background: transparent !important;
// Glass panel style — strong blur for slide-up panels
.glass--panel {
background: rgba(255, 255, 255, 0.7);
border-top: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: #1a1a1a;
// .q-item{
// color: white;
// }
// }
.bg-white,
.q-layout__section--marginal{
background: transparent !important;
.body--dark & {
background: rgba(30, 30, 30, 0.7);
border-top-color: rgba(255, 255, 255, 0.08);
color: #f5f5f5;
}
}
footer{
.text-primary,
.text-grey{
color: white !important;
}
}
// GlowDot animations — soft opacity pulse on the glow aura
@keyframes glowPulse {
0%, 100% {
opacity: 0.85;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.06);
}
}
@keyframes ghostPulse {
0%, 100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.12);
}
}

6
frontend/src/css/quasar.variables.scss
View file

@ -12,9 +12,9 @@
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.
$primary : #1976D2;
$secondary : #26A69A;
$accent : #9C27B0;
$primary : #d946ef;
$secondary : #a855f7;
$accent : #ec4899;
$dark : #1D1D1D;
$dark-page : #121212;

293
frontend/src/layouts/LifeWaveLayout.vue Normal file
View file

@ -0,0 +1,293 @@
<template>
<div ref="layoutRef" class="lifewave-layout" :class="{ 'lifewave-layout--dark': isDark }">
<!-- FloatingLines Fullscreen Background (always visible) -->
<FloatingLines
class="lifewave-layout__background"
:enabled-waves="['middle']"
:line-count="[fl.lineCount]"
:animation-speed="fl.speed"
:num-points="shaderNumPoints"
:point-x-values="shaderPointX"
:point-y-values="shaderPointY"
:point-colors="shaderPointColors"
:line-spread="fl.spread"
:fan-spread="fl.fanSpread"
:line-sharpness="fl.lineSharpness"
:wave-frequency="fl.waveFrequency"
:bezier-curvature="fl.bezierCurvature"
:circle-radius-px="fl.circleRadius"
:circle-glow-size="fl.glowSize"
:circle-glow-strength="fl.glowStrength"
:lines-gradient="parsedGradient"
:bg-color-center="fl.bgCenter"
:bg-color-edge="fl.bgEdge"
:background-image="fl.backgroundImage"
:mix-blend-mode="'screen'"
/>
<!-- Scrollable Timeline -->
<TimelineView
class="lifewave-layout__timeline"
@dot-select="onDotSelect"
@view-update="onViewUpdate"
/>
<!-- Header -->
<header class="lifewave-header">
<span class="lifewave-header__logo" @click="toggleDarkMode">ThatsMe</span>
<button class="lifewave-header__user glass--button" @click="settingsOpen = !settingsOpen">
<q-icon name="tune" size="22px" />
</button>
</header>
<!-- Content -->
<main class="lifewave-content">
<router-view />
</main>
<!-- Add Event Button (Bottom-Center) — hidden when panel is open -->
<AddEventButton v-if="!eventsStore.panelOpen" @click="onAddEvent" />
<!-- Backdrop blur when panel is open -->
<Transition name="fade">
<div
v-if="eventsStore.panelOpen"
class="lifewave-backdrop"
@click="eventsStore.closePanel()"
/>
</Transition>
<!-- Event Panel (Slide-Up) -->
<EventPanel />
<!-- Wave Settings Backdrop -->
<Transition name="fade">
<div
v-if="settingsOpen && !eventsStore.panelOpen"
class="lifewave-backdrop"
@click="settingsOpen = false"
/>
</Transition>
<!-- Wave Settings Panel (Slide-Up) -->
<LifeWaveSettings
:open="settingsOpen && !eventsStore.panelOpen"
@close="settingsOpen = false"
/>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useQuasar } from 'quasar'
import AddEventButton from 'components/AddEventButton.vue'
import EventPanel from 'components/EventPanel.vue'
import FloatingLines from 'components/FloatingLines.vue'
import LifeWaveSettings from 'components/LifeWaveSettings.vue'
import TimelineView from 'components/TimelineView.vue'
import { useEventsStore } from 'stores/events'
import { useSettingsStore } from 'stores/settings'
const $q = useQuasar()
const eventsStore = useEventsStore()
const settingsStore = useSettingsStore()
const isDark = computed(() => $q.dark.isActive)
const settingsOpen = ref(false)
const fl = computed(() => settingsStore.floatingLines)
// Layout dimensions (for screen→UV conversion)
const layoutRef = ref(null)
const layoutWidth = ref(window.innerWidth)
const layoutHeight = ref(window.innerHeight)
let layoutResizeObserver = null
onMounted(() => {
if (layoutRef.value) {
layoutWidth.value = layoutRef.value.clientWidth
layoutHeight.value = layoutRef.value.clientHeight
layoutResizeObserver = new ResizeObserver(() => {
layoutWidth.value = layoutRef.value.clientWidth
layoutHeight.value = layoutRef.value.clientHeight
})
layoutResizeObserver.observe(layoutRef.value)
}
})
onBeforeUnmount(() => {
layoutResizeObserver?.disconnect()
})
// Timeline state (received from TimelineView via emit)
const timelineState = ref(null)
function onViewUpdate(state) {
timelineState.value = state
}
// Convert screen pixel coordinates → shader UV space
// Shader: baseUv = (2*fragCoord - iResolution) / iResolution.y; baseUv.y *= -1;
// For CSS pixel (sx, sy) from top-left:
// uvX = (2*sx - cssWidth) / cssHeight
// uvY = (2*sy - cssHeight) / cssHeight
function screenToUV(sx, sy) {
const w = layoutWidth.value
const h = layoutHeight.value
return {
x: (2 * sx - w) / h,
y: (2 * sy - h) / h
}
}
// Compute shader point positions from event positions
const TIMELINE_TOP = 60 // CSS: .timeline { top: 60px }
const shaderNumPoints = computed(() => {
if (!timelineState.value) return 0
return Math.min(timelineState.value.events.length, 8)
})
const shaderPointX = computed(() => {
const xs = Array(8).fill(0)
if (!timelineState.value) return xs
const { scrollLeft, events } = timelineState.value
const count = Math.min(events.length, 8)
for (let i = 0; i < count; i++) {
const screenX = events[i].x - scrollLeft
xs[i] = screenToUV(screenX, 0).x
}
return xs
})
const shaderPointY = computed(() => {
const ys = Array(8).fill(0)
if (!timelineState.value) return ys
const { containerHeight: tlHeight, events } = timelineState.value
const count = Math.min(events.length, 8)
for (let i = 0; i < count; i++) {
// GlowDot: top = (50 - emotion*35)% of timeline container
const yPercent = 50 - events[i].emotion * 35
const screenY = TIMELINE_TOP + (yPercent / 100) * tlHeight
ys[i] = screenToUV(0, screenY).y
}
return ys
})
const shaderPointColors = computed(() => {
if (!timelineState.value) return []
const { events } = timelineState.value
const count = Math.min(events.length, 8)
const colors = []
for (let i = 0; i < count; i++) {
colors.push(events[i].color || '#ffffff')
}
return colors
})
// Parse gradient stops from textarea string
const parsedGradient = computed(() => {
return fl.value.gradientStops
.split('\n')
.map(s => s.trim())
.filter(s => s.length > 0 && s.startsWith('#'))
})
const toggleDarkMode = () => {
$q.dark.toggle()
}
const onAddEvent = () => {
eventsStore.openPanel()
}
const onDotSelect = (id) => {
eventsStore.selectEvent(id)
eventsStore.openPanel(id)
}
</script>
<style scoped>
.lifewave-layout {
position: relative;
width: 100%;
height: 100dvh;
overflow: hidden;
background: #000;
color: #F5F5F5;
transition: background 0.3s ease, color 0.3s ease;
}
.lifewave-layout--dark {
background: #000;
color: #F5F5F5;
}
/* FloatingLines Background */
.lifewave-layout__background {
position: absolute;
inset: 0;
z-index: 0;
}
/* Timeline — positioning comes from TimelineView's own .timeline class */
.lifewave-layout__timeline {
z-index: 5;
}
/* Header */
.lifewave-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
}
.lifewave-header__logo {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.3px;
cursor: pointer;
user-select: none;
}
.lifewave-header__user {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
/* Content */
.lifewave-content {
padding-top: 72px;
height: 100%;
}
/* Backdrop blur overlay */
.lifewave-backdrop {
position: fixed;
inset: 0;
z-index: 15;
background: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

8
frontend/src/pages/LifeWavePage.vue Normal file
View file

@ -0,0 +1,8 @@
<template>
<!-- LifeWave page is intentionally empty — all visuals are rendered by LifeWaveLayout -->
<div></div>
</template>
<script setup>
//
</script>

56
frontend/src/router/routes.js
View file

@ -1,60 +1,10 @@
const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
component: () => import('layouts/LifeWaveLayout.vue'),
children: [
{ path: '', component: () => import('pages/IndexPage.vue') },
{
path: 'login',
name: 'login',
component: () => import('pages/LoginPage.vue'),
},
{
path: 'sign-up',
name: 'sign-up',
component: () => import('pages/SignUpPage.vue'),
},
{
path: 'password-reset',
name: 'password-reset',
component: () => import('pages/PasswordResetPage.vue'),
},
{
path: 'wave',
name: 'wave',
component: () => import('pages/WavePage.vue')
},
{
path: 'edit',
name: 'edit',
component: () => import('pages/EditPage.vue'),
meta: { hideFooter: true }
},
{
path: 'person-selector',
name: 'person-selector',
component: () => import('pages/PersonSelector.vue'),
meta: { hideFooter: true }
},
{
path: 'category-selector',
name: 'category-selector',
component: () => import('pages/CategorySelector.vue'),
meta: { hideFooter: true }
},
{
path: 'tag-selector',
name: 'tag-selector',
component: () => import('pages/TagSelector.vue'),
meta: { hideFooter: true }
},
{
path: 'entry/:id',
name: 'entry-detail',
component: () => import('pages/EntryDetailPage.vue'),
meta: { hideFooter: true }
},
],
{ path: '', component: () => import('pages/LifeWavePage.vue') }
]
},
// Always leave this as last one

298
frontend/src/stores/events.js Normal file
View file

@ -0,0 +1,298 @@
import { defineStore } from 'pinia'
import { ref, computed, watch } from 'vue'
// Color interpolation
function lerpColor(a, b, t) {
const ar = parseInt(a.slice(1, 3), 16)
const ag = parseInt(a.slice(3, 5), 16)
const ab = parseInt(a.slice(5, 7), 16)
const br = parseInt(b.slice(1, 3), 16)
const bg = parseInt(b.slice(3, 5), 16)
const bb = parseInt(b.slice(5, 7), 16)
const r = Math.round(ar + (br - ar) * t)
const g = Math.round(ag + (bg - ag) * t)
const blue = Math.round(ab + (bb - ab) * t)
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`
}
// Gradient presets: [negative, neutral, positive]
const GRADIENT_PRESETS = [
{ name: 'Standard', colors: ['#E91E63', '#FFD700', '#4CAF50'] },
{ name: 'Sunset', colors: ['#FD1D1D', '#FCB045', '#833AB4'] },
{ name: 'Earth', colors: ['#ED8153', '#ED8153', '#217B9E'] },
{ name: 'Ocean', colors: ['#00D4FF', '#164173', '#440559'] },
{ name: 'Spring', colors: ['#FDBB2D', '#96BE74', '#22C1C3'] },
{ name: 'Neon', colors: ['#FC466B', '#9A52B6', '#3F5EFB'] },
{ name: 'Pastel', colors: ['#EEAECA', '#C2B4D9', '#94BBE9'] },
{ name: 'Aurora', colors: ['#FF6B6B', '#C084FC', '#67E8F9'] },
{ name: 'Forest', colors: ['#DC2626', '#A3A830', '#059669'] },
{ name: 'Berry', colors: ['#F472B6', '#FB923C', '#A78BFA'] }
]
// Glow color logic: emotion value → color, with optional gradient preset
function emotionToColor(emotion, gradientIdx = null) {
const preset = gradientIdx !== null ? GRADIENT_PRESETS[gradientIdx] : null
if (preset) {
// 3-stop gradient: negative → neutral → positive
const [neg, mid, pos] = preset.colors
if (emotion >= 0) {
return lerpColor(mid, pos, emotion)
} else {
return lerpColor(mid, neg, Math.abs(emotion))
}
}
// Default: 6-stop interpolation
if (emotion >= 0) {
if (emotion < 0.5) {
return lerpColor('#FF6B35', '#FFD700', emotion / 0.5)
}
return lerpColor('#FFD700', '#4CAF50', (emotion - 0.5) / 0.5)
} else {
const abs = Math.abs(emotion)
if (abs < 0.5) {
return lerpColor('#2196F3', '#9C27B0', abs / 0.5)
}
return lerpColor('#9C27B0', '#E91E63', (abs - 0.5) / 0.5)
}
}
// Demo data — 8 events, 4 with images, 4 without
const demoEvents = [
{
id: crypto.randomUUID(),
title: 'Erster Schultag',
date: '1995-09-01',
emotion: 0.6,
customColor: null,
gradientPreset: null,
image: null,
note: '',
createdAt: Date.now(),
updatedAt: Date.now()
},
{
id: crypto.randomUUID(),
title: 'Abiball',
date: '2004-06-25',
emotion: 0.85,
customColor: null,
gradientPreset: 1,
image: 'demo/photo-1530103862676-de8c9debad1d.jpeg',
note: 'Was für eine Party!',
createdAt: Date.now(),
updatedAt: Date.now()
},
{
id: crypto.randomUUID(),
title: 'Trennung',
date: '2010-03-15',
emotion: -0.7,
customColor: null,
gradientPreset: null,
image: null,
note: '',
createdAt: Date.now(),
updatedAt: Date.now()
},
{
id: crypto.randomUUID(),
title: 'Bergwanderung',
date: '2014-08-12',
emotion: 0.75,
customColor: null,
gradientPreset: 4,
image: 'demo/photo-1534067783941-51c9c23ecefd.jpeg',
note: 'Unvergesslicher Ausblick',
createdAt: Date.now(),
updatedAt: Date.now()
},
{
id: crypto.randomUUID(),
title: 'Jobverlust',
date: '2016-11-03',
emotion: -0.6,
customColor: null,
gradientPreset: null,
image: null,
note: '',
createdAt: Date.now(),
updatedAt: Date.now()
},
{
id: crypto.randomUUID(),
title: 'Hochzeit',
date: '2018-07-20',
emotion: 0.95,
customColor: null,
gradientPreset: 5,
image: 'demo/photo-1506905925346-21bda4d32df4.jpeg',
note: 'Der schönste Tag',
createdAt: Date.now(),
updatedAt: Date.now()
},
{
id: crypto.randomUUID(),
title: 'Umzug',
date: '2021-04-01',
emotion: -0.3,
customColor: null,
gradientPreset: null,
image: null,
note: '',
createdAt: Date.now(),
updatedAt: Date.now()
},
{
id: crypto.randomUUID(),
title: 'Neuer Job',
date: '2023-01-10',
emotion: 0.5,
customColor: null,
gradientPreset: null,
image: 'demo/photo-1530103862676-de8c9debad1d.jpeg',
note: 'Neues Kapitel',
createdAt: Date.now(),
updatedAt: Date.now()
}
]
export { emotionToColor, GRADIENT_PRESETS }
export const useEventsStore = defineStore('events', () => {
const events = ref([...demoEvents])
const selectedEventId = ref(null)
const panelOpen = ref(false)
const editingEventId = ref(null)
// Ghost event for live preview while creating/editing
const ghostEmotion = ref(0)
const ghostCustomColor = ref(null)
const ghostGradientPreset = ref(null)
const ghostTitle = ref('')
const ghostDate = ref(new Date().toISOString().slice(0, 10))
const ghostNote = ref('')
const ghostImage = ref(null)
const ghostEvent = computed(() => ({
id: '__ghost__',
title: ghostTitle.value || 'New Event',
date: ghostDate.value,
emotion: ghostEmotion.value,
customColor: ghostCustomColor.value,
gradientPreset: ghostGradientPreset.value,
image: ghostImage.value,
note: ghostNote.value
}))
const sortedEvents = computed(() => {
return [...events.value].sort((a, b) => new Date(a.date) - new Date(b.date))
})
function selectEvent(id) {
selectedEventId.value = id
}
function openPanel(eventId = null) {
if (eventId) {
// Edit mode
editingEventId.value = eventId
const event = events.value.find((e) => e.id === eventId)
if (event) {
ghostTitle.value = event.title
ghostDate.value = event.date
ghostEmotion.value = event.emotion
ghostCustomColor.value = event.customColor
ghostGradientPreset.value = event.gradientPreset ?? null
ghostImage.value = event.image || null
ghostNote.value = event.note
}
} else {
// Create mode
editingEventId.value = null
ghostTitle.value = ''
ghostDate.value = new Date().toISOString().slice(0, 10)
ghostEmotion.value = 0
ghostCustomColor.value = null
ghostGradientPreset.value = null
ghostImage.value = null
ghostNote.value = ''
}
panelOpen.value = true
}
// Auto-save: persist ghost → event in edit mode on every change
function persistToEvent() {
if (!editingEventId.value) return
const idx = events.value.findIndex((e) => e.id === editingEventId.value)
if (idx === -1) return
events.value[idx] = {
...events.value[idx],
title: ghostTitle.value,
date: ghostDate.value,
emotion: ghostEmotion.value,
customColor: ghostCustomColor.value,
gradientPreset: ghostGradientPreset.value,
image: ghostImage.value,
note: ghostNote.value,
updatedAt: Date.now()
}
}
// Watch all ghost fields — auto-save in edit mode
watch(
[ghostTitle, ghostDate, ghostEmotion, ghostCustomColor, ghostGradientPreset, ghostImage, ghostNote],
() => { persistToEvent() }
)
function closePanel() {
// Create mode: auto-create event if there's content
if (!editingEventId.value && ghostTitle.value.trim()) {
events.value.push({
id: crypto.randomUUID(),
title: ghostTitle.value,
date: ghostDate.value,
emotion: ghostEmotion.value,
customColor: ghostCustomColor.value,
gradientPreset: ghostGradientPreset.value,
image: ghostImage.value,
note: ghostNote.value,
createdAt: Date.now(),
updatedAt: Date.now()
})
}
panelOpen.value = false
editingEventId.value = null
selectedEventId.value = null
}
function deleteEvent(id) {
events.value = events.value.filter((e) => e.id !== id)
closePanel()
}
function getGlowColor(event) {
if (event.customColor) return event.customColor
return emotionToColor(event.emotion, event.gradientPreset ?? null)
}
return {
events,
selectedEventId,
panelOpen,
editingEventId,
ghostEmotion,
ghostCustomColor,
ghostGradientPreset,
ghostTitle,
ghostDate,
ghostNote,
ghostImage,
ghostEvent,
sortedEvents,
selectEvent,
openPanel,
closePanel,
deleteEvent,
getGlowColor
}
})

BIN
frontend/src/stores/images/photo-1506905925346-21bda4d32df4.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
frontend/src/stores/images/photo-1530103862676-de8c9debad1d.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
frontend/src/stores/images/photo-1534067783941-51c9c23ecefd.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 193 KiB

73
frontend/src/stores/settings.js Normal file
View file

@ -0,0 +1,73 @@
import { defineStore } from 'pinia'
import { ref, watch } from 'vue'
const STORAGE_KEY = 'thatsme-settings'
const FLOATING_LINES_DEFAULTS = {
// Linien
speed: 1.0,
lineCount: 10,
spread: 0.05,
fanSpread: 0.05,
lineSharpness: 8.0,
waveFrequency: 7.0,
bezierCurvature: 0.2,
circleRadius: 75,
glowSize: 18,
glowStrength: 1.5,
// Hintergrund
bgCenter: '#0a0514',
bgEdge: '#000000',
gradientStops: '#e947f5\n#2f4ba2\n#0a0a12',
backgroundImage: ''
}
function loadFromStorage() {
try {
const stored = localStorage.getItem(STORAGE_KEY)
return stored ? JSON.parse(stored) : null
} catch {
return null
}
}
export { FLOATING_LINES_DEFAULTS }
export const useSettingsStore = defineStore('settings', () => {
const stored = loadFromStorage()
const theme = ref(stored?.theme ?? 'light')
const floatingLines = ref(stored?.floatingLines ?? { ...FLOATING_LINES_DEFAULTS })
function persist() {
localStorage.setItem(
STORAGE_KEY,
JSON.stringify({
theme: theme.value,
floatingLines: floatingLines.value
})
)
}
watch([theme, floatingLines], persist, { deep: true })
function toggleTheme() {
theme.value = theme.value === 'light' ? 'dark' : 'light'
}
function updateFloatingLines(updates) {
floatingLines.value = { ...floatingLines.value, ...updates }
}
function resetFloatingLines() {
floatingLines.value = { ...FLOATING_LINES_DEFAULTS }
}
return {
theme,
floatingLines,
toggleTheme,
updateFloatingLines,
resetFloatingLines
}
})