Erstelle eine moderne, intuitive und responsive App zum Thema persönlicher Duft, Parfüm und Körperpflege. Der Arbeitstitel der App lautet „ScentCheck“. Der Name soll später noch austauschbar sein. Die App soll Nutzer:innen dabei helfen, passende Düfte und Pflegeprodukte zu finden, vorhandene Produkte zu scannen, Duftnoten zu verstehen und mehrere Produkte zu einer harmonischen Duftkombination zusammenzustellen. Die App soll nicht nur eine Parfüm-Datenbank sein. Sie soll ein persönlicher Duftberater, Produkt-Scanner, Kombinations-Check und Einkaufsassistent werden. ZIELGRUPPE Die App richtet sich an Frauen und Männer verschiedener Altersgruppen. Die Empfehlungen sollen nicht stereotyp nach Geschlecht erfolgen, sondern nach persönlichen Vorlieben, Situation, Duftfamilie, Intensität, Budget und gewünschter Wirkung. Mögliche Zielgruppen: - Jugendliche, die ihren ersten Duft suchen - Berufstätige, die einen dezenten Büroduft möchten - Menschen, die einen Duft für ein Date oder einen Abend suchen - Sportler:innen, die frische und leichte Produkte bevorzugen - Personen, die ihre Pflegeprodukte besser kombinieren möchten - Duftliebhaber:innen, die Parfüms vergleichen und sammeln - Menschen, die nicht wissen, welche Duftnoten zu ihnen passen HAUPTZIELE DER APP Die App soll Nutzer:innen ermöglichen: 1. Einen passenden Duft zu finden. 2. Parfüms, Deos, Duschgels, Shampoos, Haarprodukte, Körpercremes und Waschmittel zu entdecken. 3. Produkte per Barcode zu scannen. 4. Produktinformationen und Duftnoten anzuzeigen. 5. Kopfnoten, Herznoten und Basisnoten zu verstehen. 6. Mehrere Produkte auf Duft-Harmonie zu prüfen. 7. Eine persönliche Duftsammlung aufzubauen. 8. Produkte nach Preis, Duftfamilie, Intensität und Anlass zu vergleichen. 9. Passende Kaufmöglichkeiten und ähnliche Produkte zu sehen. 10. Eine einfache, schnelle und verständliche Empfehlung zu erhalten. HAUPTNAVIGATION Erstelle eine übersichtliche Navigation mit fünf Hauptbereichen: 1. Entdecken 2. Scannen 3. Duftprofil 4. Meine Produkte 5. Kaufen Die Navigation soll auf Mobilgeräten als untere Tab-Navigation und auf Desktopgeräten als Seiten- oder obere Navigation dargestellt werden. STARTSEITE / ENTDECKEN Erstelle eine moderne Hero-Section mit folgendem Inhalt: Titel: „Finde den Duft, der zu dir passt.“ Untertitel: „Entdecke Duftnoten, scanne Produkte und kombiniere deine Pflege zu einer harmonischen Duft-Routine.“ Primäre Buttons: - „Duft finden“ - „Produkt scannen“ Sekundäre Inhalte: - „Was passt heute zu mir?“ - „Beliebte Duftnoten“ - „Neue Produkte entdecken“ - „Passend zu deinem Duftprofil“ - „Deine letzte Kombination“ Zeige auf der Startseite moderne Produktkarten mit Platzhalterdaten. Jede Karte soll enthalten: - Produktbild oder Platzhalter - Produktname - Marke - Produktkategorie - Duftfamilie - Intensität - Haltbarkeit als ungefähre Orientierung - Preis - Button „Details“ - Button „Speichern“ DUFT-FINDER Erstelle einen mehrstufigen Duft-Finder. Die Nutzer:innen sollen Schritt für Schritt antworten können. Frage 1: „Für welchen Anlass suchst du einen Duft?“ Antwortmöglichkeiten: - Alltag - Büro - Sport - Date - Abend - Hochzeit oder besonderer Anlass - Reise - Geschenk Frage 2: „Welche Duftarten gefallen dir?“ Antwortmöglichkeiten: - Frisch - Zitrisch - Sauber - Blumig - Fruchtig - Süß - Holzig - Würzig - Orientalisch - Pudrig - Grün - Aquatisch - Moschusartig Frage 3: „Wie intensiv soll der Duft sein?“ Antwortmöglichkeiten: - Sehr dezent - Leicht wahrnehmbar - Ausgewogen - Deutlich wahrnehmbar - Sehr intensiv Frage 4: „Wie viel möchtest du ungefähr ausgeben?“ Antwortmöglichkeiten: - Unter CHF 30 - CHF 30–70 - CHF 70–120 - CHF 120–200 - Über CHF 200 Frage 5: „Welche Wirkung soll der Duft haben?“ Antwortmöglichkeiten: - Frisch - Gepflegt - Elegant - Selbstbewusst - Warm - Verführerisch - Ruhig - Sportlich - Professionell - Außergewöhnlich Zeige anschließend drei bis sechs passende Produkte mit einer verständlichen Begründung. Beispiel: „Dieser Duft passt zu dir, weil du frische, holzige und professionelle Düfte für den Alltag suchst.“ PRODUKT-SCAN Erstelle einen zentralen Scan-Bereich mit drei Optionen: 1. Barcode scannen 2. Produktname suchen 3. Etikett fotografieren Nach dem Scannen soll die App, falls Daten vorhanden sind, folgende Informationen anzeigen: - Produktname - Marke - Kategorie - Produktbild - Duftfamilie - Duftintensität - ungefähre Haltbarkeit - geeignete Anlässe - Preisbereich - Herstellerangaben - Inhaltsstoffe beziehungsweise INCI-Liste - erkannte Duftnoten - ähnliche Produkte - passende Kombinationsprodukte - Händler oder Kaufoptionen Falls kein Produkt gefunden wird, soll eine freundliche Meldung erscheinen: „Dieses Produkt wurde noch nicht gefunden. Du kannst es manuell hinzufügen oder ein Foto der Produktinformationen hochladen.“ Baue für die Preview eine simulierte Scan-Funktion ein. Verwende zunächst Beispielprodukte und Platzhalterdaten. Die technische Barcode- und OCR-Schnittstelle soll später austauschbar sein. DUFT-PYRAMIDE Zeige bei jedem Parfüm und bei jedem Produkt mit verfügbaren Daten eine visuelle Duft-Pyramide. Die drei Ebenen sind: 1. Kopfnote 2. Herznote 3. Basisnote Erkläre die Ebenen verständlich: Kopfnote: Der erste Eindruck eines Duftes. Häufig zitrisch, frisch, grün oder leicht würzig. Herznote: Der eigentliche Charakter des Duftes. Häufig blumig, fruchtig, aromatisch oder würzig. Basisnote: Der langanhaltende Teil des Duftes. Häufig holzig, warm, vanillig, ambriert oder moschusartig. Zeige die Duft-Pyramide als modernes, animiertes Karten- oder Dreiecksdesign. Beim Anklicken jeder Ebene soll sich eine kurze Erklärung öffnen. Verwende beispielsweise folgende Demo-Daten: Kopfnote: - Bergamotte - Zitrone - grüner Apfel Herznote: - Lavendel - Jasmin - Kardamom Basisnote: - Zedernholz - Moschus - Vanille Füge einen Hinweis hinzu: „Duftnoten und Haltbarkeit sind je nach Herstellerangabe, Haut, Temperatur und Anwendung unterschiedlich. Nicht jeder Duft besitzt eine klar getrennte Duft-Pyramide.“ PRODUKTDETAILSEITE Erstelle eine Produktdetailseite mit folgenden Bereichen: - Produktbild - Produktname und Marke - Bewertung - Preis - Duftfamilie - Intensität - Haltbarkeit - Anlass - Duft-Pyramide - Kurzbeschreibung - Inhaltsstoffe - Ähnliche Produkte - Passende Produkte - Button „Zu meiner Sammlung hinzufügen“ - Button „Mit meinen Produkten vergleichen“ - Button „Kaufoptionen anzeigen“ KOMBINATIONSCHECK Erstelle eine Funktion, mit der Nutzer:innen mehrere Produkte auswählen können. Mögliche Kategorien: - Duschgel - Deo - Parfüm - Körpercreme - Shampoo - Haarwachs - Waschmittel - Weichspüler - Aftershave Die App soll danach einen einfachen Duft-Harmonie-Score anzeigen: - 0–30: sehr dezent - 31–60: ausgewogen - 61–80: deutlich wahrnehmbar - 81–100: sehr intensiv Zeige außerdem eine verständliche Empfehlung. Beispiel: „Deine Produkte passen grundsätzlich zusammen. Deo und Parfüm sind beide intensiv. Für das Büro empfehlen wir, eines der beiden Produkte sparsamer zu verwenden.“ Mögliche Ergebnisse: - Harmonische Kombination - Zu viele intensive Düfte - Duftfamilien passen teilweise zusammen - Ein neutrales Produkt würde die Kombination verbessern - Für den Anlass wahrscheinlich zu stark - Gute Kombination für Abend oder Date - Gute dezente Kombination für Büro oder Alltag DUFTPROFIL Erstelle ein persönliches Duftprofil mit: - Lieblingsduftfamilien - bevorzugten Duftnoten - unbeliebten Duftnoten - gewünschter Intensität - bevorzugten Anlässen - Budget - Haut- oder Produktpräferenzen - gespeicherten Produkten - bisherigen Bewertungen Das Profil soll nicht zwingend ein Geschlecht verlangen. Eine optionale Auswahl kann angeboten werden, aber die Empfehlungen müssen hauptsächlich anhand von Duftvorlieben und Situationen erfolgen. MEINE PRODUKTE Erstelle eine persönliche Sammlung mit: - gespeicherten Parfüms - Deos - Duschgels - Haarprodukten - Körperpflegeprodukten - Waschmitteln - Favoriten - zuletzt gescannten Produkten Füge Filter hinzu: - Produktkategorie - Duftfamilie - Intensität - Marke - Preis - Bewertung KAUF-FUNKTION Zeige auf Produktseiten mehrere mögliche Kaufoptionen: - Händlername - Preis - Produktgröße - Verfügbarkeit - Versandhinweis - Button „Zum Händler“ Verwende in der Preview nur Demo-Händler und Platzhalterlinks. Kennzeichne Kaufempfehlungen transparent als mögliche Partner- oder Affiliate-Links. DESIGN Verwende ein modernes, hochwertiges und ruhiges Design. Farbkonzept: Light Mode: - Hintergrund: #FFFFFF - Haupttext: #000000 - Sekundärtext: #666666 - Karten: #F5F5F5 - Linien: #E5E5E5 - Akzentfarbe: dezentes Sand, Beige oder warmes Gold Dark Mode: - Hintergrund: #000000 - Haupttext: #FFFFFF - Karten: #151515 - Sekundärtext: #A5A5A5 - Linien: #2A2A2A - Akzentfarbe: warmes Gold oder dezentes Violett Das Design soll luxuriös, sauber, minimalistisch und für alle Geschlechter geeignet sein. Verwende keine übermäßig stereotypen Farben. Die App soll hochwertig, aber nicht kompliziert wirken. TECHNISCHE ANFORDERUNGEN FÜR DIE PREVIEW Erstelle eine responsive HTML-, CSS- und JavaScript-Preview. Nutze: - semantisches HTML - moderne CSS-Variablen - responsive Karten - mobile-first Layout - Light- und Dark-Mode - funktionierende Filter - funktionierende Suche - funktionierende Favoriten - funktionierende Produktauswahl - simulierte Scan-Funktion - animierte Duft-Pyramide - Modal-Fenster für Produktdetails - lokale Speicherung mit localStorage - keine externen Backends in der ersten Preview Die App soll mit Demo-Daten funktionieren und später leicht an eine echte Datenbank, Barcode-API, OCR-Schnittstelle, Produktdatenbank und Händler-API angeschlossen werden können. INTERAKTIONEN Baue folgende Microinteractions ein: - sanfte Kartenanimation beim Anklicken - Favoriten-Herz mit Animation - Duft-Pyramide öffnet sich mit Übergang - Scan-Button mit Ladeanimation - Fortschrittsanzeige im Duft-Finder - Filterchips mit aktivem Zustand - Ergebnis-Score mit animiertem Fortschrittsbalken - Toast-Nachrichten beim Speichern - Modal-Fenster für Produktdetails - Dark-Mode-Umschalter DATENSCHUTZ UND VERTRAUEN Die App soll keine medizinischen Diagnosen stellen und nicht behaupten, den menschlichen Körpergeruch exakt messen zu können. Verwende Hinweise wie: - „Diese Empfehlung dient nur zur Orientierung.“ - „Die Duftwirkung kann von Person zu Person unterschiedlich sein.“ - „Inhaltsstoffinformationen sollten anhand der Originalverpackung geprüft werden.“ - „Duftnoten basieren auf Herstellerangaben oder kuratierten Produktdaten.“ Erstelle keine unbelegten Aussagen über Hautverträglichkeit, Allergien oder gesundheitliche Wirkungen. AUSGABE Liefere: 1. Eine vollständige responsive HTML-Datei. 2. Eine vollständige CSS-Datei oder integrierte CSS-Struktur. 3. Eine vollständige JavaScript-Datei oder integrierte JavaScript-Struktur. 4. Demo-Produktdaten für mindestens zehn Produkte. 5. Einen funktionierenden Duft-Finder. 6. Eine funktionierende simulierte Scan-Funktion. 7. Eine Duft-Pyramide mit Kopf-, Herz- und Basisnoten. 8. Einen funktionierenden Produktvergleich. 9. Einen funktionierenden Favoritenbereich. 10. Einen funktionierenden Light- und Dark-Mode. 11. Eine klare Erklärung, wo später Barcode-, OCR-, Datenbank- und Kauf-APIs angeschlossen werden. Der Code soll übersichtlich, kommentiert, modular und für eine spätere Weiterentwicklung geeignet sein. Verwende keine unnötigen Bibliotheken und keine komplizierte Architektur in der ersten Version.