mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 08:21:08 +02:00
c712a2504a
- Add uload project with apps/web structure
- Reorganize from flat to monorepo structure
- Remove PocketBase binary and local data
- Update to pnpm and @uload/web namespace
- Add picture project to monorepo
- Remove embedded git repository
- Unify all package names to @{project}/{app} schema:
- @maerchenzauber/* (was @storyteller/*)
- @manacore/* (was manacore-*, manacore)
- @manadeck/* (was web, backend, manadeck)
- @memoro/* (was memoro-web, landing, memoro)
- @picture/* (already unified)
- @uload/web
- Add convenient dev scripts for all apps:
- pnpm dev:{project}:web
- pnpm dev:{project}:landing
- pnpm dev:{project}:mobile
- pnpm dev:{project}:backend
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
55 lines
No EOL
1.6 KiB
Markdown
55 lines
No EOL
1.6 KiB
Markdown
# Profile Background Color Feature
|
|
|
|
## Übersicht
|
|
Nutzer können jetzt die Hintergrundfarbe ihrer Profilseite anpassen.
|
|
|
|
## So funktioniert's
|
|
|
|
### 1. Einstellung ändern
|
|
1. Gehe zu **Settings** (`/settings`)
|
|
2. Scrolle zum Abschnitt **Profile Appearance**
|
|
3. Wähle eine Farbe aus:
|
|
- **Color Picker**: Klicke auf das Farbfeld für eine individuelle Farbe
|
|
- **Presets**: Wähle aus vordefinierten Farben (Light Gray, Light Blue, Light Green, etc.)
|
|
|
|
### 2. Vorschau
|
|
Die gewählte Farbe wird sofort auf deiner Profilseite (`/p/[username]`) angezeigt.
|
|
|
|
## Verfügbare Preset-Farben
|
|
- Light Gray (Standard): `#f9fafb`
|
|
- Light Blue: `#dbeafe`
|
|
- Light Green: `#dcfce7`
|
|
- Light Yellow: `#fef3c7`
|
|
- Light Pink: `#fce7f3`
|
|
- Light Purple: `#e9d5ff`
|
|
- Dark Gray: `#1f2937`
|
|
- Dark Blue: `#0f172a`
|
|
- Black: `#000000`
|
|
|
|
## Technische Details
|
|
|
|
### Datenbank
|
|
- Neues Feld: `profileBackground` (String) in der `users` Collection
|
|
- Standard: `#f9fafb` (Light Gray)
|
|
|
|
### Implementation
|
|
- Settings-Seite: Color Picker + Preset-Auswahl
|
|
- Profile-Seite: Dynamisches CSS mit inline `style` Attribut
|
|
- Für dunkle Farben wird ein leichter Gradient angewendet
|
|
|
|
### Dateien geändert
|
|
- `/src/routes/(app)/settings/+page.server.ts` - Server-Action für Speicherung
|
|
- `/src/routes/(app)/settings/+page.svelte` - UI für Farbauswahl
|
|
- `/src/routes/p/[username]/+page.server.ts` - Lade Hintergrundfarbe
|
|
- `/src/routes/p/[username]/+page.svelte` - Zeige Hintergrundfarbe
|
|
- `/src/lib/pocketbase.ts` - User Type aktualisiert
|
|
|
|
## Beispiel
|
|
```html
|
|
<div
|
|
class="min-h-screen transition-colors duration-300"
|
|
style="background: #dbeafe"
|
|
>
|
|
<!-- Profile content -->
|
|
</div>
|
|
``` |