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! 🧫🔬