tknuth/Greenlens
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Onboarding flow

Browse Source
This commit is contained in:
knuthtimo-lab
2026-07-06 22:25:52 +02:00
parent 99cd885833
commit 6b57a2acfc
37 changed files with 1503 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
design/stitch-onboarding/welcome_to_greenlens/code.html
View File

@@ -117,16 +117,16 @@
</head>
<body class="bg-background text-on-surface h-screen w-full overflow-hidden flex flex-col font-body-md select-none">
<!-- Top 55%: Hero Image Area -->
<div class="h-[486px] w-full relative shrink-0">
<div class="h-[440px] md:h-[480px] w-full relative shrink-0">
<!-- Hero Background Image -->
<div class="absolute inset-0 bg-cover bg-center" data-alt="A stunning, high-resolution botanical photograph of a lush indoor jungle featuring large Monstera deliciosa and Calathea plants. The composition is shot from a slightly elevated angle, capturing the vibrant green, textured leaves bathed in soft, natural morning light pouring through a nearby window. The background features a subtle, warm cream-colored wall that perfectly aligns with a premium minimalist light-mode app aesthetic. The depth of field is shallow, keeping the foreground leaves razor-sharp while gently blurring the background, creating a calm, focused, and high-end lifestyle magazine mood." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBx6w-Q0WxDraDoAiIgMxWkqZHEYA2QyGU65IPOu1fB8mwd5-O08Z4VcoQ4LdjcnCsU2ybQtlguuy_01cHv1sVfj5RSFen2jMoqF5NAZe_Xg0NqFQXwLIioixIHU-D9ryaPU-Pe3Qgezzgdcr2DXHxTkITv_zzpjcgW4eHm-I5ms5386DGlPXluAxgD-Iy4bQES2VAU1KXak7ZJuqn74-Ue9xRIP85gxxYoST-BemjrzJCEc9jn_h4Fk7HesA75uZGOyzYuEY2lyNA')"></div>
<div class="absolute inset-0 bg-cover bg-center" data-alt="A stunning, high-resolution botanical photograph of a lush indoor jungle featuring large Monstera deliciosa and Calathea plants. The composition is shot from a slightly elevated angle, capturing the vibrant green, textured leaves bathed in soft, natural morning light pouring through a nearby window. The background features a subtle, warm cream-colored wall that perfectly aligns with a premium minimalist light-mode app aesthetic. The depth of field is shallow, keeping the foreground leaves razor-sharp while gently blurring the background, creating a calm, focused, and high-end lifestyle magazine mood." style="background-image: url('../../../assets/welcome_hero_vertical.png')"></div>
<!-- Subtle Top Gradient for Text Legibility -->
<div class="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-on-surface/50 to-transparent"></div>
<!-- Header: Logo & App Store Badge -->
<div class="absolute top-12 left-0 w-full px-container-margin flex items-center justify-between">
<div class="flex items-center gap-2 text-surface-container-lowest">
<span class="material-symbols-outlined text-[28px]" style="font-variation-settings: 'FILL' 1;">spa</span>
<span class="font-display text-display tracking-tight leading-none text-surface-container-lowest pt-1">GreenLens</span>
<span class="font-display text-display tracking-tight leading-none text-surface-container-lowest pt-1">Green<span class="text-[#8ba885]">Lens</span></span>
</div>
<div class="flex items-center gap-1 bg-surface-container-lowest/20 backdrop-blur-md border border-surface-container-lowest/10 rounded-full px-3 py-1.5 shadow-sm">
<span class="material-symbols-outlined text-[14px] text-surface-container-lowest" style="font-variation-settings: 'FILL' 1;">star</span>
@@ -134,7 +134,7 @@
</div>
</div>
<!-- Floating Testimonial Card -->
<div class="absolute bottom-12 left-container-margin right-container-margin bg-surface-container-lowest/95 backdrop-blur-md rounded-[16px] p-4 shadow-[0px_4px_20px_rgba(16,28,18,0.12)] border border-surface-variant/50">
<div class="absolute bottom-12 left-container-margin right-container-margin bg-surface-container-lowest/75 backdrop-blur-md rounded-[16px] p-4 shadow-[0px_4px_20px_rgba(16,28,18,0.12)] border border-surface-variant/50">
<p class="font-body-md text-body-md text-on-surface mb-3 italic leading-relaxed">"Finally my plants stay alive! Highly recommend."</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">

8
design/stitch-onboarding/welcome_to_greenlens_dark_mode/code.html
View File

@@ -187,16 +187,16 @@
</head>
<body class="bg-background text-on-surface h-screen w-full overflow-hidden flex flex-col font-body-md select-none">
<!-- Top 55%: Hero Image Area -->
<div class="h-[486px] w-full relative shrink-0">
<div class="h-[440px] md:h-[480px] w-full relative shrink-0">
<!-- Hero Background Image -->
<div class="absolute inset-0 bg-cover bg-center" data-alt="A stunning, high-resolution botanical photograph of a lush indoor jungle featuring large Monstera deliciosa and Calathea plants. The composition is shot from a slightly elevated angle, capturing the vibrant green, textured leaves bathed in soft, natural morning light pouring through a nearby window. The background features a subtle, warm cream-colored wall that perfectly aligns with a premium minimalist light-mode app aesthetic. The depth of field is shallow, keeping the foreground leaves razor-sharp while gently blurring the background, creating a calm, focused, and high-end lifestyle magazine mood." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBx6w-Q0WxDraDoAiIgMxWkqZHEYA2QyGU65IPOu1fB8mwd5-O08Z4VcoQ4LdjcnCsU2ybQtlguuy_01cHv1sVfj5RSFen2jMoqF5NAZe_Xg0NqFQXwLIioixIHU-D9ryaPU-Pe3Qgezzgdcr2DXHxTkITv_zzpjcgW4eHm-I5ms5386DGlPXluAxgD-Iy4bQES2VAU1KXak7ZJuqn74-Ue9xRIP85gxxYoST-BemjrzJCEc9jn_h4Fk7HesA75uZGOyzYuEY2lyNA')"></div>
<div class="absolute inset-0 bg-cover bg-center" data-alt="A stunning, high-resolution botanical photograph of a lush indoor jungle featuring large Monstera deliciosa and Calathea plants. The composition is shot from a slightly elevated angle, capturing the vibrant green, textured leaves bathed in soft, natural morning light pouring through a nearby window. The background features a subtle, warm cream-colored wall that perfectly aligns with a premium minimalist light-mode app aesthetic. The depth of field is shallow, keeping the foreground leaves razor-sharp while gently blurring the background, creating a calm, focused, and high-end lifestyle magazine mood." style="background-image: url('../../../assets/welcome_hero_vertical.png')"></div>
<!-- Subtle Top Gradient for Text Legibility -->
<div class="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-surface/80 to-transparent"></div>
<!-- Header: Logo & App Store Badge -->
<div class="absolute top-12 left-0 w-full px-container-margin flex items-center justify-between">
<div class="flex items-center gap-2 text-white">
<span class="material-symbols-outlined text-[28px]" style="font-variation-settings: 'FILL' 1;">spa</span>
<span class="font-display text-display tracking-tight leading-none text-white pt-1">GreenLens</span>
<span class="font-display text-display tracking-tight leading-none text-white pt-1">Green<span class="text-[#8ba885]">Lens</span></span>
</div>
<div class="flex items-center gap-1 bg-surface-container-lowest/40 backdrop-blur-md border border-white/20 rounded-full px-3 py-1.5 shadow-sm text-white">
<span class="material-symbols-outlined text-[14px] text-white" style="font-variation-settings: 'FILL' 1;">star</span>
@@ -204,7 +204,7 @@
</div>
</div>
<!-- Floating Testimonial Card -->
<div class="absolute bottom-12 left-container-margin right-container-margin bg-surface-container-lowest/95 backdrop-blur-md rounded-[16px] p-4 shadow-[0px_4px_20px_rgba(0,0,0,0.5)] border border-surface-variant/50">
<div class="absolute bottom-12 left-container-margin right-container-margin bg-surface-container-lowest/75 backdrop-blur-md rounded-[16px] p-4 shadow-[0px_4px_20px_rgba(0,0,0,0.5)] border border-surface-variant/50">
<p class="font-body-md text-body-md text-on-surface mb-3 italic leading-relaxed">"Finally my plants stay alive! Highly recommend."</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">