fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add interactive Plantlix scanner and visual flowchart to Biodiversity section

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 03:30:20 +02:00
parent 48b37ba77e
commit 03249f1b2c
1 changed files with 54 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Biodiversity.astro
+54
View File
@@ -42,5 +42,59 @@
<div class="text-xs font-semibold text-amber-500 uppercase tracking-wider">Fokus: Datengestützte Pflanzensoziologie</div>
</div>
</div>
<!-- Interactive Scanner -->
<div class="mt-20 glass p-8 rounded-2xl border border-stone-800/50" x-data="{ scanning: false, scanned: false, progress: 0, startScan() { this.scanning = true; let timer = setInterval(() => { this.progress += 5; if (this.progress >= 100) { clearInterval(timer); this.scanning = false; this.scanned = true; } }, 50); } }">
<div class="flex flex-col md:flex-row items-center justify-between gap-8">
<div>
<h3 class="text-xl font-luxury font-bold text-white mb-2">Plantlix Standort-Scanner</h3>
<p class="text-stone-400 text-sm font-light">Simuliere eine Standort-Analyse für dein Projekt.</p>
</div>
<button @click="startScan()" :disabled="scanning || scanned" class="px-6 py-3 bg-emerald-600 hover:bg-emerald-700 disabled:bg-stone-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
<span x-show="!scanning && !scanned">Scan starten</span>
<span x-show="scanning">Scanne...</span>
<span x-show="scanned">Scan abgeschlossen</span>
</button>
</div>
<!-- Progress Bar -->
<div x-show="scanning" class="mt-6 w-full bg-stone-800 rounded-full h-2">
<div class="bg-emerald-500 h-2 rounded-full" :style="`width: ${progress}%`"></div>
</div>
<!-- Results -->
<div x-show="scanned" class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
<div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
<span class="text-xs text-stone-500 uppercase">Boden-pH</span>
<p class="text-xl font-bold text-white">6.8 (Neutral)</p>
</div>
<div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
<span class="text-xs text-stone-500 uppercase">Feuchtigkeit</span>
<p class="text-xl font-bold text-white">42% (Mäßig)</p>
</div>
<div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
<span class="text-xs text-stone-500 uppercase">Empfehlung</span>
<p class="text-sm font-bold text-emerald-400">Artenreiche Magerwiese</p>
</div>
</div>
</div>
<!-- Flowchart -->
<div class="mt-12 grid grid-cols-1 md:grid-cols-5 gap-4 items-center text-center">
<div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
<span class="text-xs text-stone-500 uppercase block mb-1">Schritt 1</span>
<p class="text-sm font-bold text-white">Standort & Probe</p>
</div>
<div class="text-stone-700 hidden md:block"><i class="fa-solid fa-arrow-right text-xl"></i></div>
<div class="bg-stone-900/50 p-4 rounded-lg border border-emerald-500/30">
<span class="text-xs text-stone-500 uppercase block mb-1">Schritt 2</span>
<p class="text-sm font-bold text-emerald-400">Plantlix API</p>
</div>
<div class="text-stone-700 hidden md:block"><i class="fa-solid fa-arrow-right text-xl"></i></div>
<div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
<span class="text-xs text-stone-500 uppercase block mb-1">Schritt 3</span>
<p class="text-sm font-bold text-white">Perfekter Pflanzplan</p>
</div>
</div>
</div>
</section>