From 8b50263bd847d2b5e200ed5f84c3dd87da6fc41d Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Thu, 3 Jul 2025 23:47:11 +0200
Subject: [PATCH] some responsiveness etc

---
 .gitignore                |  1 +
 src/App.tsx               |  2 +-
 src/components/Navbar.tsx |  5 ++--
 src/data/MockDreams.ts    | 22 +++++++++++----
 src/pages/DreamPage.tsx   | 59 ++++++++++++++++++++++++++++++++++-----
 5 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/.gitignore b/.gitignore
index d95a4c9..395037b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,4 @@ dist-ssr
 /public/assets/dreampics/03.png
 /public/assets/dreampics/04.png
 /public/assets/dreampics/05.png
+/public/assets/
diff --git a/src/App.tsx b/src/App.tsx
index 8e45fd5..8e5039d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,7 +24,7 @@ export default function App() {
     return (
         <BrowserRouter>
             <div className="pb-16 min-h-screen">
-                <div className="mx-auto w-full max-w-md">
+                <div className="mx-auto w-full max-w-lg">
                     <Navbar/>
                     <Routes>
                         <Route path="/" element={<Home/>}/>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index b5985c5..88468ad 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,8 +3,7 @@ import {FaArchive, FaHome, FaList, FaMicrophone, FaUser} from "react-icons/fa";
 
 export default function Navbar() {
 
-    return (
-        <div className="relative">
+    return (<>
             <nav
                 className="fixed bottom-0 left-0 right-0 flex justify-around bg-violet-900 py-2 z-10">
                 <NavLink to="/">
@@ -28,6 +27,6 @@ export default function Navbar() {
             >
                 <FaMicrophone className="w-8 h-8 text-white"/>
             </NavLink>
-        </div>
+        </>
     );
 }
diff --git a/src/data/MockDreams.ts b/src/data/MockDreams.ts
index 39bd7d4..14542ea 100644
--- a/src/data/MockDreams.ts
+++ b/src/data/MockDreams.ts
@@ -9,7 +9,10 @@ export const mockDreams: Dream[] = [
         inputType: 'text',
         input: 'Ich wanderte um Mitternacht in eine riesige Bibliothek, in der jedes Buch sanft leuchtete. Als ich eines aus dem Regal zog, flüsterten seine Seiten mir Geheimnisse zu.',
         ai: {
-            interpretation: 'Dieses Bild symbolisiert den Wunsch nach Wissen und die Faszination für ungelüftete Geheimnisse. Die leuchtenden Bücher stehen für Inspiration und Erkenntnis, während die nächtliche Atmosphäre auf Introspektion und das Unbewusste hinweist.'
+            interpretation: 'Dieses Bild symbolisiert den Wunsch nach Wissen und die Faszination für ungelüftete Geheimnisse. Die leuchtenden Bücher stehen für Inspiration und Erkenntnis, während die nächtliche Atmosphäre auf Introspektion und das Unbewusste hinweist.',
+            image: '01.png',
+            video: '01.mp4',
+            audio: '01.mp3',
         }
     }),
     new Dream({
@@ -20,7 +23,9 @@ export const mockDreams: Dream[] = [
         inputType: 'text',
         input: 'Ich besuchte ein Konzert unter dem Ozean. Die Musiker waren Delfine, die Melodien anklickten, während Korallenpolypen im Takt zum Rhythmus mit Licht pulsierten.',
         ai: {
-            interpretation: 'Das Unterwasserkonzert kann als Ausdruck von Kreativität und Harmonie gedeutet werden. Delfine symbolisieren Intelligenz und Spielfreude, Korallenlicht verweist auf emotionale Schwingungen und die Verbindung zum Inneren.'
+            interpretation: 'Das Unterwasserkonzert kann als Ausdruck von Kreativität und Harmonie gedeutet werden. Delfine symbolisieren Intelligenz und Spielfreude, Korallenlicht verweist auf emotionale Schwingungen und die Verbindung zum Inneren.',
+            image: '02.png',
+            video: '02.mp4',
         }
     }),
     new Dream({
@@ -31,7 +36,9 @@ export const mockDreams: Dream[] = [
         inputType: 'text',
         input: 'Ein Dampflok-Express tuckerte über goldene Dünen unter einem violetten Himmel. Passagiere winkten, während Kamele mit Laternen neben den Schienen herliefen.',
         ai: {
-            interpretation: 'Der Wüstenzug steht für eine Reise durch unbewusste Räume und persönliche Herausforderungen (Dünen). Der violette Himmel deutet auf Spiritualität hin, während die Laternen der Kamele Hoffnung und Wegweisung symbolisieren.'
+            interpretation: 'Der Wüstenzug steht für eine Reise durch unbewusste Räume und persönliche Herausforderungen (Dünen). Der violette Himmel deutet auf Spiritualität hin, während die Laternen der Kamele Hoffnung und Wegweisung symbolisieren.',
+            image: '03.png',
+            video: '03.mp4',
         }
     }),
     new Dream({
@@ -42,7 +49,8 @@ export const mockDreams: Dream[] = [
         inputType: 'text',
         input: 'Ich saß mit Freunden auf einer Wolke zu einer Teeparty. Jede Tasse war mit Sternenstaub gefüllt, und der Himmel um uns herum schimmerte in pastelligen Regenbogenfarben.',
         ai: {
-            interpretation: 'Diese Szene steht für Geborgenheit und Gemeinschaft auf einer höheren Ebene. Der Sternenstaub in den Tassen symbolisiert geteilte Träume, die pastelligen Regenbögen zeigen eine optimistische Grundstimmung und Leichtigkeit.'
+            interpretation: 'Diese Szene steht für Geborgenheit und Gemeinschaft auf einer höheren Ebene. Der Sternenstaub in den Tassen symbolisiert geteilte Träume, die pastelligen Regenbögen zeigen eine optimistische Grundstimmung und Leichtigkeit.',
+            image: '04.png'
         }
     }),
     new Dream({
@@ -53,9 +61,11 @@ export const mockDreams: Dream[] = [
         inputType: 'text',
         input: 'Ich erkundete einen Garten aus Spiegeln, in denen jeweils eine andere Kindheitserinnerung reflektiert wurde. Als ich einen berührte, hörte ich entferntes Lachen durch das Glas hallen.',
         ai: {
-            interpretation: 'Der Spiegelgarten repräsentiert Selbsterkenntnis und Rückblick auf die eigene Vergangenheit. Jeder Spiegel steht für ein Fragment der Erinnerung, das entfernte Lachen deutet auf positive Prägungen und emotionale Verankerung hin.'
+            interpretation: 'Der Spiegelgarten repräsentiert Selbsterkenntnis und Rückblick auf die eigene Vergangenheit. Jeder Spiegel steht für ein Fragment der Erinnerung, das entfernte Lachen deutet auf positive Prägungen und emotionale Verankerung hin.',
+            image: '05.png',
+            audio: '05_1.mp3'
         }
     }),
 ];
 
-export default mockDreams;
\ No newline at end of file
+export default mockDreams;
diff --git a/src/pages/DreamPage.tsx b/src/pages/DreamPage.tsx
index ae65c64..24e4798 100644
--- a/src/pages/DreamPage.tsx
+++ b/src/pages/DreamPage.tsx
@@ -29,7 +29,7 @@ export default function DreamPage() {
     return (<div className="page min-h-screen">
         {/* Header */}
         <div className="relative" style={{ background: 'var(--accent-gradient)' }}>
-            <div className="p-6 text-white">
+            <div className="p-4 sm:p-6 md:p-8 text-white">
                 <button
                     onClick={() => navigate(-1)}
                     className="absolute top-4 left-4 p-2 rounded-full bg-white/20 backdrop-blur-sm"
@@ -61,9 +61,8 @@ export default function DreamPage() {
             </div>
         </div>
 
-        {/* Inhalt */}
-        <div className="p-4 space-y-6">
-            <div className="dream-card rounded-2xl p-6">
+        <div className="p-4 sm:p-6 md:p-8 space-y-6 sm:space-y-8">
+            <div className="dream-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <div className="flex items-center mb-4">
                     <span className="font-medium" style={{ color: 'var(--accent)' }}>Traum-Beschreibung</span>
                 </div>
@@ -72,8 +71,8 @@ export default function DreamPage() {
                 </p>
             </div>
 
-            {dream.ai?.interpretation && (<div
-                className="dreamPanel rounded-2xl p-6">
+            {dream.ai?.interpretation && dream.ai.interpretation !== '' && (<div
+                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <div className="flex items-center mb-4">
                     <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Interpretation</span>
                 </div>
@@ -82,7 +81,53 @@ export default function DreamPage() {
                 </p>
             </div>)}
 
-            <div className="dream-card rounded-2xl p-6">
+            {dream.ai?.image && dream.ai.image !== '' && (<div
+                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                <div className="flex items-center mb-4">
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Bild</span>
+                </div>
+                <div className="flex justify-center">
+                    <img 
+                        src={`/assets/dreams/images/${dream.ai.image}`}
+                        alt="KI-generiertes Traumbild" 
+                        className="max-w-full w-full sm:w-auto rounded-lg shadow-lg object-contain mx-auto"
+                    />
+                </div>
+            </div>)}
+
+            {dream.ai?.audio && dream.ai.audio !== '' && (<div
+                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                <div className="flex items-center mb-4">
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Audio</span>
+                </div>
+                <div className="flex justify-center">
+                    <audio 
+                        controls 
+                        src={`/assets/dreams/audio/${dream.ai.audio}`}
+                        className="w-full max-w-md sm:max-w-lg mx-auto"
+                    >
+                        Ihr Browser unterstützt das Audio-Element nicht.
+                    </audio>
+                </div>
+            </div>)}
+
+            {dream.ai?.video && dream.ai.video !== '' && (<div
+                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                <div className="flex items-center mb-4">
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Video</span>
+                </div>
+                <div className="flex justify-center">
+                    <video 
+                        controls 
+                        src={`/assets/dreams/videos/${dream.ai.video}`}
+                        className="max-w-full w-full sm:w-auto rounded-lg shadow-lg object-contain mx-auto"
+                    >
+                        Ihr Browser unterstützt das Video-Element nicht.
+                    </video>
+                </div>
+            </div>)}
+
+            <div className="dream-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <h2 className="text-lg font-semibold mb-3">Details</h2>
                 <div className="space-y-2" style={{ color: 'var(--text-muted)' }}>
                     <div className="flex justify-between">