BioScope
BioScope ist eine interaktive Web-App, die für ein Schulprojekt entwickelt wurde. Sie bietet eine moderne Benutzeroberfläche mit Darkmode-Unterstützung und animierten Buttons. Die Webseite soll Schüler:innen einen spielerischen Einstieg ins Mikroskopieren geben.
📌 Projektübersicht
- Titel: BioScope
- Entwickelt von: David Hamdan Ahmad (8.2) & Peter Fuller (8.1) & Jakob Woldt (8.1)
- Ziel: Schulprojekt-Webseite für den Biologieunterricht
-
Technologien:
HTML
CSS
JavaScript
-
Features:
- Darkmode umschaltbar
- Animierte Buttons mit Tilt-Effekt (Maus & Touch)
- Responsive Design (mobil, Tablet, Desktop)
- Einstellungs-Overlay für zukünftige Erweiterungen
🖥️ Nutzung
Besuche einfach die Live-Webseite unter: https://bioscope.pages.dev
- Klicke auf das Zahnrad-Icon oben rechts, um die Einstellungen zu öffnen.
- Aktiviere oder deaktiviere den Darkmode nach Wunsch.
- Gucke dir in den Einstellungen auch die AGBs und das Impressum an.
- Benutze den zentralen Button zum „Mikroskopieren“.
🎨 Design & UI
- Farbschema: Helles & dunkles Theme (Darkmode)
- Fonts: Inter (Google Fonts)
-
Buttons:
- Große, auffällige Buttons für einfache Bedienung
- Farbverlauf: Primär- und Danger-Varianten
- Tilt-Effekt bei Mausbewegung & Touch-Gesten
🛠️ Features im Detail
Darkmode
- Speichert die Einstellung im
localStorage, sodass der Darkmode auch beim nächsten Besuch aktiv bleibt.
Buttons
- Interaktive Animation beim Hover (Maus) und bei Touch
- Perspektivische Kipp-Effekte für 3D-Look
Overlay & Einstellungen
- Einstellungsfenster erscheint als Overlay
- Momentan nur Darkmode, weitere Optionen folgen
📱 Responsives Design
- Optimiert für Smartphones, Tablets und Desktops
- Skalierbare Buttons und flexible Layouts
⚙️ Zukünftige Erweiterungen
- Mehr Einstellungsoptionen im Overlay
- Interaktive Mikroskop-Funktionalitäten
- Erweiterte Animationen & Soundeffekte
📄 Lizenz
Dieses Projekt wurde für ein Schulprojekt entwickelt.
Nicht kommerziell verwenden.
Alle Icons & Emojis stammen von
Twemoji.
🔗 Live-Demo
https://bioscope.pages.dev
Viel Spaß beim Mikroskopieren! 🧫🔬
📢 Updates
🚀
Update Feed kommt bald!