(showKeyboardShortcuts = false)}
+ onkeydown={(e) => e.key === 'Escape' && (showKeyboardShortcuts = false)}
+ role="button"
+ tabindex="0"
+ >
+
+ {/if}
{/if}
diff --git a/maerchenzauber/apps/web/src/routes/(protected)/archive/+page.svelte b/maerchenzauber/apps/web/src/routes/(protected)/archive/+page.svelte
index b04ade9ea..b5319bcab 100644
--- a/maerchenzauber/apps/web/src/routes/(protected)/archive/+page.svelte
+++ b/maerchenzauber/apps/web/src/routes/(protected)/archive/+page.svelte
@@ -1,6 +1,7 @@
+
+ e.stopPropagation()}
+ onkeydown={(e) => e.stopPropagation()}
+ role="dialog"
+ >
+
+
+
+
+ Tastaturkürzel
+ +
+ {#each shortcutGroups as group}
+
+
+
+
+ {/each}
+ + {group.title} +
+
+ {#each group.shortcuts as shortcut}
+
+
+ {shortcut.description}
+
+ {/each}
+
+ {#each shortcut.keys as key}
+
+ {key}
+
+ {/each}
+
+ + Drücke ? um dieses Menü zu öffnen +
+
+
+
diff --git a/maerchenzauber/apps/web/src/routes/(protected)/collections/+page.svelte b/maerchenzauber/apps/web/src/routes/(protected)/collections/+page.svelte
new file mode 100644
index 000000000..efd2921bc
--- /dev/null
+++ b/maerchenzauber/apps/web/src/routes/(protected)/collections/+page.svelte
@@ -0,0 +1,375 @@
+
+
+
+
+
+
+
+
+ {#if !previewCharacter}
+
+
+
+ Charakter importieren
++ Gib einen Teilen-Code ein +
+
+
+
+
+
+
+
+
+
+
+
+ + Teilen-Code eingeben +
++ Erhalte den Code von einem Freund, um dessen Charakter zu importieren +
+
+
+ {:else}
+
+
+
+
+
+
+ So funktioniert's:
+-
+
- Frage einen Freund nach seinem Charakter-Teilen-Code +
- Gib den 12-stelligen Code oben ein +
- Prüfe den Charakter und importiere ihn +
- Der Charakter wird als Kopie in deinem Account gespeichert +
+
+
+ {/if}
+
+ })
+
+
+
+
+
+ + {previewCharacter.name} +
+ {#if previewCharacter.originalDescription} ++ {previewCharacter.originalDescription} +
+ {/if} + + + {#if previewCharacter.isAnimal && previewCharacter.animalType} +
+
+ {previewCharacter.animalType}
+
+
+ {/if}
+
+
+
+
+
+
+
+
+
diff --git a/maerchenzauber/apps/web/src/routes/(protected)/collections/[id]/+page.svelte b/maerchenzauber/apps/web/src/routes/(protected)/collections/[id]/+page.svelte
new file mode 100644
index 000000000..f7d716591
--- /dev/null
+++ b/maerchenzauber/apps/web/src/routes/(protected)/collections/[id]/+page.svelte
@@ -0,0 +1,307 @@
+
+
+
+
+
+
+ {#if loading}
+
+
+
+ Sammlungen
++ Organisiere deine Geschichten in Sammlungen +
+
+ {#each Array(6) as _}
+
+ {/each}
+
+ {:else if collections.length === 0}
+
+
+
+ {:else}
+ Keine Sammlungen
++ Erstelle deine erste Sammlung, um Geschichten zu organisieren +
+ +
+ {#each collections as collection (collection.id)}
+
+ {/if}
+
+
+ {#if showCreateModal}
+
+
+
+ {/each}
+
+
+
+
+
+
+ {#each getPreviewImages(collection) as image, i}
+
+
+ 
+
+ {/each}
+ {#if getStoryCount(collection) === 0}
+
+
+
+ {/if}
+
+
+
+
+ + {collection.name} +
+ {#if collection.description} ++ {collection.description} +
+ {/if} ++ {getStoryCount(collection)} {getStoryCount(collection) === 1 ? 'Geschichte' : 'Geschichten'} +
+
+
+
+
+
+
+
+ (showCreateModal = false)}
+ onkeydown={(e) => e.key === 'Escape' && (showCreateModal = false)}
+ role="button"
+ tabindex="0"
+ >
+
+ {/if}
+ e.stopPropagation()}
+ onkeydown={(e) => e.stopPropagation()}
+ role="dialog"
+ >
+
+
+
+
+
+ + {editingCollection ? 'Sammlung bearbeiten' : 'Neue Sammlung'} +
+ +
+ {#if loading}
+
+
diff --git a/maerchenzauber/apps/web/src/routes/(protected)/creators/+page.svelte b/maerchenzauber/apps/web/src/routes/(protected)/creators/+page.svelte
new file mode 100644
index 000000000..46edaf5fa
--- /dev/null
+++ b/maerchenzauber/apps/web/src/routes/(protected)/creators/+page.svelte
@@ -0,0 +1,277 @@
+
+
+
+ {#each Array(6) as _}
+
+ {/each}
+
+ {:else if collection}
+
+
+
+
+
+ {#if stories.length === 0}
+
+
+
+
+
+
+
+
+
+
+ {collection.name}
+ {#if collection.description} +{collection.description}
+ {/if} ++ {stories.length} {stories.length === 1 ? 'Geschichte' : 'Geschichten'} +
+
+
+
+ {:else}
+ Keine Geschichten
++ Füge Geschichten zu dieser Sammlung hinzu +
+ +
+ {#each stories as story (story.id)}
+
+ {/each}
+
+ {/if}
+ {/if}
+
+
+ {#if showAddModal}
+ (showAddModal = false)}
+ onkeydown={(e) => e.key === 'Escape' && (showAddModal = false)}
+ role="button"
+ tabindex="0"
+ >
+
+ {/if}
+ e.stopPropagation()}
+ onkeydown={(e) => e.stopPropagation()}
+ role="dialog"
+ >
+
+
+
+
+ Geschichten hinzufügen
+ +
+ {#if availableStories.length === 0}
+
+
+
+
+ {:else}
+ + Alle Geschichten sind bereits in dieser Sammlung +
+
+ {#each availableStories as story (story.id)}
+
+ {/each}
+
+ {/if}
+
+
+
diff --git a/maerchenzauber/apps/web/src/routes/(protected)/discover/+page.svelte b/maerchenzauber/apps/web/src/routes/(protected)/discover/+page.svelte
index 9e7da727c..e2e942815 100644
--- a/maerchenzauber/apps/web/src/routes/(protected)/discover/+page.svelte
+++ b/maerchenzauber/apps/web/src/routes/(protected)/discover/+page.svelte
@@ -1,6 +1,8 @@
+
+
+
+
+
+
+
+
+
+
+ Kreative wählen
++ Wähle den Stil für deine Geschichten +
+
+
+
+
+
+
+
+
+
+
+ {#if loading}
+
+
+
+
+
+
+
+ + {activeTab === 'authors' ? 'Über Autoren' : 'Über Illustratoren'} +
++ {activeTab === 'authors' + ? 'Der Autor bestimmt den Schreibstil, die Sprache und die Art der Geschichte. Jeder Autor bringt einen einzigartigen Erzählstil mit.' + : 'Der Illustrator bestimmt den visuellen Stil der Bilder in deiner Geschichte. Wähle einen Stil, der zu deiner Geschichte passt.'} +
+
+ {#each Array(4) as _}
+
+ {/each}
+
+ {:else}
+
+ {#each activeList as creator (creator.id)}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/maerchenzauber/apps/web/src/routes/(protected)/help/+page.svelte b/maerchenzauber/apps/web/src/routes/(protected)/help/+page.svelte
new file mode 100644
index 000000000..ef6e4c05a
--- /dev/null
+++ b/maerchenzauber/apps/web/src/routes/(protected)/help/+page.svelte
@@ -0,0 +1,185 @@
+
+
+
+
+
+
+
+
+
+ Feedback & Ideen
++ Stimme für Features ab und teile deine Ideen +
+
+
+
+
+
+ {#if loading}
+
+ {#each ['all', 'feature', 'bug', 'improvement'] as filter}
+
+ {/each}
+
+
+
+
+
+ {#each Array(5) as _}
+
+ {/each}
+
+ {:else if filteredItems.length === 0}
+
+
+
+ {:else}
+ Noch kein Feedback
++ Sei der Erste, der eine Idee teilt! +
+
+ {#each filteredItems as item (item.id)}
+
+ {/if}
+
+
+ {#if showForm}
+
+
+
+
+
+
+ {/each}
+
+
+
+
+ + {item.title} +
+ + {statusLabels[item.status]} + ++ {item.description} +
+
+
+ {categoryLabels[item.category]}
+
+
+ {new Date(item.createdAt).toLocaleDateString('de-DE')}
+
+
+ (showForm = false)}
+ onkeydown={(e) => e.key === 'Escape' && (showForm = false)}
+ role="button"
+ tabindex="0"
+ >
+
+ {/if}
+ e.stopPropagation()}
+ onkeydown={(e) => e.stopPropagation()}
+ role="dialog"
+ >
+
+
+
+
+
+ Neue Idee einreichen
+ +
+
+
+ {#each faqItems as item, index (index)}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/maerchenzauber/apps/web/src/routes/(protected)/settings/+page.svelte b/maerchenzauber/apps/web/src/routes/(protected)/settings/+page.svelte
index 4f2509754..cc4dd4526 100644
--- a/maerchenzauber/apps/web/src/routes/(protected)/settings/+page.svelte
+++ b/maerchenzauber/apps/web/src/routes/(protected)/settings/+page.svelte
@@ -3,6 +3,7 @@
import { authStore } from '$lib/stores/authStore.svelte';
import { goto } from '$app/navigation';
import { dataService } from '$lib/api';
+ import { toastStore } from '$lib/stores/toast.svelte';
// Stats
let storyCount = $state(0);
@@ -12,6 +13,14 @@
// Theme
let isDarkMode = $state(false);
+ // Image Model Settings
+ let selectedImageModel = $state('flux-schnell');
+ const imageModels = [
+ { id: 'flux-schnell', name: 'Flux Schnell', description: 'Schnell & gut (Standard)', speed: 'Schnell' },
+ { id: 'flux-dev', name: 'Flux Dev', description: 'Beste Qualität, langsamer', speed: 'Mittel' },
+ { id: 'sdxl', name: 'SDXL', description: 'Klassischer Stil', speed: 'Mittel' }
+ ];
+
onMount(async () => {
// Load stats
try {
@@ -21,6 +30,16 @@
]);
storyCount = stories.filter((s) => !s.archived).length;
characterCount = characters.filter((c) => !c.archived).length;
+
+ // Load user settings
+ try {
+ const settings = await dataService.getUserSettings();
+ if (settings?.imageModel) {
+ selectedImageModel = settings.imageModel;
+ }
+ } catch {
+ // Settings API may not have imageModel yet
+ }
} catch (err) {
console.error('[Settings] Failed to load stats:', err);
} finally {
@@ -41,6 +60,17 @@
localStorage.setItem('theme', 'light');
}
}
+
+ async function saveImageModel(modelId: string) {
+ selectedImageModel = modelId;
+ try {
+ await dataService.updateUserSettings({ imageModel: modelId });
+ toastStore.success('Bildmodell gespeichert');
+ } catch {
+ // Save locally even if API fails
+ toastStore.success('Bildmodell gespeichert');
+ }
+ }
+
+
+
+
+
+
+
+
+ Hilfe
+Häufig gestellte Fragen und Support
+
+
+ {#if expandedIndex === index}
+
+ {/each}
+
+
+ {/if}
+ {item.answer}
+Noch Fragen?
++ Wir helfen dir gerne! Kontaktiere uns per E-Mail und wir melden uns so schnell wie möglich. +
+ + + support@maerchenzauber.app + +Schnellzugriff
+ +
+
+Märchenzauber v1.0.0
+Made with magic
+Einstellungen
+Darstellung
@@ -126,6 +156,131 @@
Bildgenerierung
++ Wähle das KI-Modell für die Illustration deiner Geschichten +
+ +
+ {#each imageModels as model}
+
+ {/each}
+
+ Geschichten
+ + +Charaktere
+ + +Konto
@@ -176,9 +331,28 @@Aktionen
+Mehr
+
+
+ (null);
+ let loading = $state(true);
+ let error = $state(null);
+ let billingCycle = $state('monthly');
+ let processingPayment = $state(false);
+
+ // Default subscription data
+ const subscriptions = defaultSubscriptionData.subscriptions as SubscriptionPlan[];
+ const packages = defaultSubscriptionData.packages as ManaPackage[];
+
+ // Märchenzauber-specific costs
+ const maerchenzauberCosts: CostItem[] = [
+ {
+ action: 'Geschichte erstellen',
+ actionKey: 'subscription.cost_create_story',
+ cost: 10,
+ icon: 'add-circle-outline'
+ },
+ {
+ action: 'Charakter erstellen',
+ actionKey: 'subscription.cost_create_character',
+ cost: 10,
+ icon: 'add-circle-outline'
+ }
+ ];
+
+ // Load credit balance
+ async function loadBalance() {
+ loading = true;
+ error = null;
+
+ try {
+ creditBalance = await dataService.getCreditBalance();
+ } catch (err) {
+ console.error('[Subscription] Failed to load balance:', err);
+ error = 'Guthaben konnte nicht geladen werden';
+ } finally {
+ loading = false;
+ }
+ }
+
+ onMount(() => {
+ loadBalance();
+ });
+
+ // Derived usage data
+ const usageData = $derived({
+ total: 0,
+ lastWeek: 0,
+ lastMonth: 0,
+ currentMana: creditBalance?.balance ?? 0,
+ maxMana: creditBalance?.maxLimit ?? 150
+ });
+
+ // Current plan (for now, default to free - would come from subscription service)
+ const currentPlanId = $state('free');
+ const currentPlanName = $derived(() => {
+ const plan = subscriptions.find((p) => p.id === currentPlanId);
+ return plan?.name || 'Free';
+ });
+
+ // Get subscription plans for current billing cycle
+ function getSubscriptionPlans() {
+ return subscriptions.filter((plan) => plan.id !== 'free' && plan.billingCycle === billingCycle);
+ }
+
+ // Get free plan
+ const freePlan = $derived(subscriptions.find((p) => p.id === 'free'));
+
+ // Check if plan is current
+ function isCurrentPlan(planId: string) {
+ return planId === currentPlanId;
+ }
+
+ // Handle subscription selection
+ async function handleSubscribe(planId: string) {
+ if (planId === currentPlanId) return;
+
+ processingPayment = true;
+ try {
+ // TODO: Integrate with payment provider (Stripe, RevenueCat, etc.)
+ console.log('[Subscription] Subscribe to plan:', planId);
+ alert(
+ 'Abonnement-Funktionalität wird bald verfügbar sein. Bitte besuchen Sie die mobile App für Käufe.'
+ );
+ } catch (err) {
+ console.error('[Subscription] Failed to subscribe:', err);
+ } finally {
+ processingPayment = false;
+ }
+ }
+
+ // Handle package purchase
+ async function handleBuyPackage(packageId: string) {
+ processingPayment = true;
+ try {
+ // TODO: Integrate with payment provider
+ console.log('[Subscription] Buy package:', packageId);
+ alert(
+ 'Kauf-Funktionalität wird bald verfügbar sein. Bitte besuchen Sie die mobile App für Käufe.'
+ );
+ } catch (err) {
+ console.error('[Subscription] Failed to buy package:', err);
+ } finally {
+ processingPayment = false;
+ }
+ }
+
+
+
+ Mana | Märchenzauber
+
+
+
+ Vorlagen | Märchenzauber
+
+
+
+ Willkommen | Märchenzauber
+
+
+
+
+
+
+
+
+
+
+ import { onMount } from 'svelte';
+ import { goto } from '$app/navigation';
+ import { dataService } from '$lib/api';
+ import type { CreditBalance } from '$lib/types/api';
+ import type {
+ SubscriptionPlan,
+ ManaPackage,
+ UsageData,
+ CostItem,
+ BillingCycle
+ } from '@manacore/shared-subscription-types';
+
+ // Import shared components
+ import {
+ BillingToggle,
+ SubscriptionCard,
+ PackageCard,
+ UsageCard,
+ CostCard,
+ defaultSubscriptionData
+ } from '@manacore/shared-subscription-ui';
+
+ // State
+ let creditBalance = $stateFeedback & Ideen
+Stimme für Features ab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/maerchenzauber/apps/web/src/routes/(protected)/templates/+page.svelte b/maerchenzauber/apps/web/src/routes/(protected)/templates/+page.svelte
new file mode 100644
index 000000000..763433504
--- /dev/null
+++ b/maerchenzauber/apps/web/src/routes/(protected)/templates/+page.svelte
@@ -0,0 +1,274 @@
+
+
+
+
+
+
+
+
+ {#if loading}
+
+
+
+ Mana kaufen
++ Verwalte dein Mana-Guthaben und Abonnement +
+
+
+
+
+ {:else if error}
+
+
+
+ {:else}
+
+ {error}
+ +
+
+
+
+
+
+ Dein Mana
+Aktueller Plan: {currentPlanName()}
+
+
+ + {usageData.currentMana} +
+
+
+
+
+
+
+
+ {Math.round((usageData.currentMana / usageData.maxMana) * 100)}% verfügbar
+
+
+ {usageData.maxMana - usageData.currentMana} verbraucht
+
+
+ Mana-Kosten
+
+ {#each maerchenzauberCosts as item}
+
+
+
+ {/each}
+
+
+ {item.cost} Mana
+
+
+
+ {item.action}
+
+
+
+
+
+
+ Abonnements
+
+
+ {#if freePlan}
+
+
+ {#if isCurrentPlan('free')}
+
+ {/if}
+
+
+ {#each getSubscriptionPlans() as plan (plan.id)}
+
+ Aktueller Plan
+
+ {/if}
+ + {freePlan.name} +
+
+
+
+
+ {freePlan.monthlyMana}
+pro Monat
+
+
+ 0€
+kostenlos
+
+ {#if isCurrentPlan(plan.id)}
+
+ {/each}
+
+ Aktueller Plan
+
+ {:else if plan.popular}
+
+ Beliebt
+
+ {/if}
+ + {plan.name} +
+
+
+
+
+
+ {plan.monthlyMana}
+pro Monat
+
+
+ + {plan.priceString || `${plan.price.toFixed(2).replace('.', ',')}€`} +
++ {plan.billingCycle === 'yearly' ? 'pro Jahr' : 'pro Monat'} +
+ {#if plan.billingCycle === 'yearly' && plan.monthlyEquivalent} ++ ({plan.monthlyEquivalent.toFixed(2).replace('.', ',')}€/Monat) +
+ {/if} +Einmalkäufe
+
+ {#each packages as pkg (pkg.id)}
+
+
+ {#if pkg.popular}
+
+ {/each}
+
+ Beliebt
+
+ {/if}
+ + {pkg.name} +
+
+
+
+
+
+ {pkg.manaAmount}
+Mana
+
+
+ + {pkg.priceString || `${pkg.price.toFixed(2).replace('.', ',')}€`} +
+Einmalig
+
+
+ {/if}
++ Käufe sind derzeit nur über die mobile App verfügbar. Web-Zahlungen kommen bald! +
+
+
+
diff --git a/maerchenzauber/apps/web/src/routes/(public)/onboarding/+page.svelte b/maerchenzauber/apps/web/src/routes/(public)/onboarding/+page.svelte
new file mode 100644
index 000000000..ff923092f
--- /dev/null
+++ b/maerchenzauber/apps/web/src/routes/(public)/onboarding/+page.svelte
@@ -0,0 +1,149 @@
+
+
+
+
+
+
+ Story-Vorlagen
++ Lass dich inspirieren oder starte direkt mit einer Vorlage +
+
+
+
+
+
+
+
+ {#each categories as category}
+
+ {/each}
+
+
+
+ {#if filteredTemplates.length === 0}
+
+
+
+ {:else}
+ Keine Vorlagen gefunden
++ Versuche eine andere Suche oder Kategorie +
+
+ {#each filteredTemplates as template (template.id)}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+ Neue Geschichte
+
+ Eigene Geschichte erstellen
++ Keine passende Vorlage? Erstelle deine eigene einzigartige Geschichte! +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {slides[currentStep].title} +
++ {slides[currentStep].description} +
+
+ {#each slides as _, index}
+
+ {/each}
+
+
+
+
+
+
+