some responsiveness etc

2025-07-03 23:47:11 +02:00
parent 5a24298114
commit 8b50263bd8
5 changed files with 72 additions and 17 deletions
--- 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/
--- 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/>}/>
--- 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>
+        </>
    );
 }
--- 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;
+export default mockDreams;
--- 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">