diff --git a/src/App.css b/src/App.css index cb0bc4a..ca31d17 100644 --- a/src/App.css +++ b/src/App.css @@ -97,3 +97,37 @@ box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(255, 255, 255, 0.3); opacity: 1; } + +/* Carousel controls styling */ +.carousel-container .slick-prev, +.carousel-container .slick-next { + z-index: 10; + width: 40px; + height: 40px; + background: rgba(166, 77, 255, 0.7); + border-radius: 50%; + display: flex !important; + align-items: center; + justify-content: center; + padding: 10px; + transition: all 0.3s ease; +} + +.carousel-container .slick-prev { + left: 20px; +} + +.carousel-container .slick-next { + right: 20px; +} + +.carousel-container .slick-prev:hover, +.carousel-container .slick-next:hover { + background: rgba(166, 77, 255, 0.9); +} + +.carousel-container .slick-prev:before, +.carousel-container .slick-next:before { + font-size: 20px; + opacity: 1; +} diff --git a/src/data/MockDreams.ts b/src/data/MockDreams.ts index 0fe3cbd..5fc6f31 100644 --- a/src/data/MockDreams.ts +++ b/src/data/MockDreams.ts @@ -61,8 +61,6 @@ export const mockDreams: Dream[] = [new Dream({ description: 'I wandered through a glowing forest where every tree was made of shimmering crystal, reflecting thousands of stars above.', } as ImageInput, ai: { interpretation: 'The crystal forest represents clarity and the search for inner truth. The reflections of stars symbolize inspiration and the connection between your dreams and aspirations.', - audio: 'crystal_forest.mp3', - image: 'crystal_forest_ai.png', }, }), new Dream({ id: 7, userId: 2, title: 'Mirror Lake', date: getRandomDateInRange(), input: { @@ -72,8 +70,6 @@ export const mockDreams: Dream[] = [new Dream({ description: 'I stood at the edge of a silent lake, its surface so calm it looked like a perfect mirror, reflecting the moon and drifting clouds.', } as ImageInput, ai: { interpretation: 'The mirror lake suggests self-reflection and emotional calm. The moon and clouds indicate subconscious thoughts and the ever-changing nature of your feelings.', - video: 'mirror_lake_ai.mp4', - image: 'mirror_lake_ai.png', }, }), new Dream({ id: 8, userId: 3, title: 'Floating City', date: getRandomDateInRange(), input: { @@ -91,8 +87,6 @@ export const mockDreams: Dream[] = [new Dream({ input: 'Ich reiste durch einen Tunnel aus pulsierenden Datenströmen. Jede Berührung löste neue Realitäten aus, die sich wie Fraktale vor mir entfalteten.', } as TextInput, ai: { interpretation: 'Die Quantenreise symbolisiert deine Faszination für Möglichkeiten und Parallelwelten. Die Datenströme repräsentieren Informationsverarbeitung und Entscheidungsfindung in deinem Unterbewusstsein.', - image: 'quantum_journey.png', - video: 'quantum_journey.mp4', } }), new Dream({ id: 10, userId: 4, title: 'Neuronales Netzwerk', date: getRandomDateInRange(), input: { @@ -100,8 +94,6 @@ export const mockDreams: Dream[] = [new Dream({ input: 'Ich befand mich in einem riesigen neuronalen Netzwerk, wo Gedanken als leuchtende Impulse zwischen synaptischen Verbindungen tanzten. Ich konnte sie mit meinen Händen formen und lenken.', } as TextInput, ai: { interpretation: 'Das neuronale Netzwerk spiegelt dein Interesse an künstlicher Intelligenz und dem menschlichen Bewusstsein wider. Die Fähigkeit, Gedanken zu formen, deutet auf deinen Wunsch nach Kontrolle über deine mentalen Prozesse hin.', - image: 'neural_network.png', - audio: 'neural_network.mp3', } }), new Dream({ id: 11, userId: 4, title: 'Digitaler Garten', date: getRandomDateInRange(), input: { @@ -111,7 +103,6 @@ export const mockDreams: Dream[] = [new Dream({ description: 'Ich pflegte einen Garten, in dem Pflanzen aus Codezeilen und Algorithmen wuchsen. Jede Blüte entfaltete sich zu einer neuen Technologie.', } as ImageInput, ai: { interpretation: 'Der digitale Garten verkörpert deine kreative Verbindung von Natur und Technologie. Er zeigt, wie du Innovation als organischen, wachsenden Prozess betrachtest.', - image: 'digital_garden_ai.png', } }), new Dream({ id: 12, userId: 4, title: 'Zeitschleife', date: getRandomDateInRange(), input: { @@ -119,8 +110,6 @@ export const mockDreams: Dream[] = [new Dream({ input: 'Ich erlebte denselben Tag immer wieder, konnte aber jedes Mal kleine Änderungen vornehmen. Mit jeder Iteration wurde die Realität komplexer und unvorhersehbarer.', } as TextInput, ai: { interpretation: 'Die Zeitschleife reflektiert deine Gedanken über Kausalität und die Auswirkungen kleiner Entscheidungen. Sie symbolisiert auch den Wunsch, Fehler zu korrigieren und verschiedene Möglichkeiten zu erkunden.', - image: 'time_loop.png', - audio: 'time_loop.mp3', } }), diff --git a/src/pages/DreamPage.tsx b/src/pages/DreamPage.tsx index 9612c10..fd5931d 100644 --- a/src/pages/DreamPage.tsx +++ b/src/pages/DreamPage.tsx @@ -97,7 +97,7 @@ export default function DreamPage() { speed={500} slidesToShow={1} slidesToScroll={1} - className="max-w-full mx-auto" + className="max-w-full mx-auto carousel-container" >