mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-25 17:34:38 +02:00
💄 style(onboarding): convert fullscreen to compact modal
This commit is contained in:
Till-JS
parent
2e37925cb0
commit
d7ce61565f
2 changed files with 72 additions and 68 deletions
|
|
@ -53,50 +53,54 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="fixed inset-0 z-50 bg-background flex flex-col">
|
<!-- Backdrop -->
|
||||||
<!-- Header with progress -->
|
<div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
|
||||||
<header class="border-b px-6 py-4">
|
<!-- Modal Container -->
|
||||||
<div class="max-w-3xl mx-auto">
|
<div
|
||||||
<div class="flex items-center justify-between mb-4">
|
class="bg-background rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200"
|
||||||
|
>
|
||||||
|
<!-- Header with progress -->
|
||||||
|
<header class="border-b px-5 py-4 flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<div
|
<div
|
||||||
class="h-10 w-10 rounded-xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center"
|
class="h-9 w-9 rounded-lg bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center"
|
||||||
>
|
>
|
||||||
<span class="text-xl">M</span>
|
<span class="text-lg font-semibold text-primary-foreground">M</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1 class="font-semibold text-lg">Willkommen bei ManaCore</h1>
|
<h1 class="font-semibold">Willkommen bei ManaCore</h1>
|
||||||
<p class="text-sm text-muted-foreground">
|
<p class="text-xs text-muted-foreground">
|
||||||
Schritt {currentStep + 1} von {STEPS.length}
|
Schritt {currentStep + 1} von {STEPS.length}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onclick={handleSkip}
|
onclick={handleSkip}
|
||||||
class="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
class="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||||
>
|
>
|
||||||
Überspringen
|
Überspringen
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Progress bar -->
|
<!-- Progress bar -->
|
||||||
<div class="h-1.5 bg-muted rounded-full overflow-hidden">
|
<div class="h-1 bg-muted rounded-full overflow-hidden">
|
||||||
<div
|
<div
|
||||||
class="h-full bg-primary transition-all duration-300 ease-out rounded-full"
|
class="h-full bg-primary transition-all duration-300 ease-out rounded-full"
|
||||||
style="width: {progress}%"
|
style="width: {progress}%"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Step indicators -->
|
<!-- Step indicators (compact) -->
|
||||||
<div class="flex justify-between mt-3">
|
<div class="flex justify-between mt-2">
|
||||||
{#each STEPS as step, index}
|
{#each STEPS as step, index}
|
||||||
<button
|
<button
|
||||||
onclick={() => handleStepClick(index)}
|
onclick={() => handleStepClick(index)}
|
||||||
disabled={index > currentStep}
|
disabled={index > currentStep}
|
||||||
class="flex flex-col items-center gap-1 group"
|
class="flex flex-col items-center gap-0.5 group"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="h-8 w-8 rounded-full flex items-center justify-center text-sm font-medium transition-all
|
class="h-6 w-6 rounded-full flex items-center justify-center text-xs font-medium transition-all
|
||||||
{index < currentStep
|
{index < currentStep
|
||||||
? 'bg-primary text-primary-foreground'
|
? 'bg-primary text-primary-foreground'
|
||||||
: index === currentStep
|
: index === currentStep
|
||||||
|
|
@ -104,7 +108,7 @@
|
||||||
: 'bg-muted text-muted-foreground'}"
|
: 'bg-muted text-muted-foreground'}"
|
||||||
>
|
>
|
||||||
{#if index < currentStep}
|
{#if index < currentStep}
|
||||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
<path
|
<path
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
|
|
@ -117,7 +121,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="text-xs {index === currentStep
|
class="text-[10px] {index === currentStep
|
||||||
? 'text-foreground font-medium'
|
? 'text-foreground font-medium'
|
||||||
: 'text-muted-foreground'} hidden sm:block"
|
: 'text-muted-foreground'} hidden sm:block"
|
||||||
>
|
>
|
||||||
|
|
@ -126,12 +130,10 @@
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Step content -->
|
<!-- Step content -->
|
||||||
<main class="flex-1 overflow-y-auto">
|
<main class="flex-1 overflow-y-auto px-5 py-4">
|
||||||
<div class="max-w-3xl mx-auto px-6 py-8">
|
|
||||||
{#if currentStepData.id === 'welcome'}
|
{#if currentStepData.id === 'welcome'}
|
||||||
<WelcomeStep />
|
<WelcomeStep />
|
||||||
{:else if currentStepData.id === 'profile'}
|
{:else if currentStepData.id === 'profile'}
|
||||||
|
|
@ -143,25 +145,25 @@
|
||||||
{:else if currentStepData.id === 'complete'}
|
{:else if currentStepData.id === 'complete'}
|
||||||
<CompleteStep />
|
<CompleteStep />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</main>
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- Footer with navigation -->
|
<!-- Footer with navigation -->
|
||||||
<footer class="border-t px-6 py-4">
|
<footer class="border-t px-5 py-3 flex-shrink-0">
|
||||||
<div class="max-w-3xl mx-auto flex justify-between">
|
<div class="flex justify-between">
|
||||||
<button
|
<button
|
||||||
onclick={handlePrev}
|
onclick={handlePrev}
|
||||||
disabled={isFirstStep}
|
disabled={isFirstStep}
|
||||||
class="px-6 py-2.5 border rounded-lg hover:bg-muted transition-colors disabled:opacity-0 disabled:pointer-events-none"
|
class="px-4 py-2 text-sm border rounded-lg hover:bg-muted transition-colors disabled:opacity-0 disabled:pointer-events-none"
|
||||||
>
|
>
|
||||||
Zurück
|
Zurück
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onclick={handleNext}
|
onclick={handleNext}
|
||||||
class="px-6 py-2.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium"
|
class="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium"
|
||||||
>
|
>
|
||||||
{isLastStep ? "Los geht's!" : 'Weiter'}
|
{isLastStep ? "Los geht's!" : 'Weiter'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,30 +2,30 @@
|
||||||
// Welcome step - introduces ManaCore
|
// Welcome step - introduces ManaCore
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="text-center max-w-xl mx-auto">
|
<div class="text-center">
|
||||||
<!-- Hero Icon -->
|
<!-- Hero Icon -->
|
||||||
<div class="mb-8">
|
<div class="mb-4">
|
||||||
<div
|
<div
|
||||||
class="inline-flex h-24 w-24 rounded-2xl bg-gradient-to-br from-primary via-primary/80 to-primary/60 items-center justify-center shadow-lg shadow-primary/25"
|
class="inline-flex h-16 w-16 rounded-xl bg-gradient-to-br from-primary via-primary/80 to-primary/60 items-center justify-center shadow-lg shadow-primary/25"
|
||||||
>
|
>
|
||||||
<span class="text-5xl text-primary-foreground font-bold">M</span>
|
<span class="text-3xl text-primary-foreground font-bold">M</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 class="text-3xl font-bold mb-4">Willkommen bei ManaCore!</h2>
|
<h2 class="text-xl font-bold mb-2">Willkommen bei ManaCore!</h2>
|
||||||
<p class="text-lg text-muted-foreground mb-8">
|
<p class="text-sm text-muted-foreground mb-4">
|
||||||
Dein zentrales Dashboard für alle Mana-Apps. Verwalte deine Aufgaben, Termine, Kontakte und mehr
|
Dein zentrales Dashboard für alle Mana-Apps. Verwalte deine Aufgaben, Termine, Kontakte und mehr
|
||||||
- alles an einem Ort.
|
- alles an einem Ort.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Feature highlights -->
|
<!-- Feature highlights -->
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-left">
|
<div class="space-y-2 text-left">
|
||||||
<div class="p-4 rounded-xl bg-card border">
|
<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
|
||||||
<div
|
<div
|
||||||
class="h-10 w-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-3"
|
class="h-8 w-8 rounded-md bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="h-5 w-5 text-blue-600 dark:text-blue-400"
|
class="h-4 w-4 text-blue-600 dark:text-blue-400"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
|
|
@ -38,18 +38,18 @@
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="font-semibold mb-1">Alle Apps</h3>
|
<div>
|
||||||
<p class="text-sm text-muted-foreground">
|
<h3 class="font-medium text-sm">Alle Apps</h3>
|
||||||
Zugriff auf Todo, Kalender, Chat, Picture und mehr.
|
<p class="text-xs text-muted-foreground">Todo, Kalender, Chat, Picture und mehr.</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-4 rounded-xl bg-card border">
|
<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
|
||||||
<div
|
<div
|
||||||
class="h-10 w-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-3"
|
class="h-8 w-8 rounded-md bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="h-5 w-5 text-green-600 dark:text-green-400"
|
class="h-4 w-4 text-green-600 dark:text-green-400"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
|
|
@ -62,16 +62,18 @@
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="font-semibold mb-1">Credits-System</h3>
|
<div>
|
||||||
<p class="text-sm text-muted-foreground">Ein Guthaben für alle AI-Features in allen Apps.</p>
|
<h3 class="font-medium text-sm">Credits-System</h3>
|
||||||
|
<p class="text-xs text-muted-foreground">Ein Guthaben für alle AI-Features.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-4 rounded-xl bg-card border">
|
<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
|
||||||
<div
|
<div
|
||||||
class="h-10 w-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center mb-3"
|
class="h-8 w-8 rounded-md bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="h-5 w-5 text-purple-600 dark:text-purple-400"
|
class="h-4 w-4 text-purple-600 dark:text-purple-400"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
|
|
@ -84,10 +86,10 @@
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="font-semibold mb-1">Personalisierung</h3>
|
<div>
|
||||||
<p class="text-sm text-muted-foreground">
|
<h3 class="font-medium text-sm">Personalisierung</h3>
|
||||||
Themes, Widgets und Einstellungen nach deinem Geschmack.
|
<p class="text-xs text-muted-foreground">Themes und Einstellungen nach deinem Geschmack.</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue