mpuchstein/REMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some responsiveness etc

Browse Source
This commit is contained in:
Matthias Puchstein
2025-07-03 23:47:11 +02:00
parent 5a24298114
commit 8b50263bd8
5 changed files with 72 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/pages/DreamPage.tsx
View File

@@ -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">