added a fake login and some style changes
This commit is contained in:
Matthias Puchstein
@@ -1,10 +1,13 @@
|
||||
// src/pages/DreamPage.tsx
|
||||
|
||||
import {type NavigateFunction, useNavigate, useParams} from 'react-router-dom';
|
||||
import {mockDreams} from '../data/MockDreams';
|
||||
import MockUsers from '../data/MockUsers';
|
||||
import User from '../types/User';
|
||||
import type Dream from "../types/Dream.ts";
|
||||
import {FaArrowLeft} from "react-icons/fa";
|
||||
import Slider from "react-slick";
|
||||
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
export default function DreamPage() {
|
||||
const {id} = useParams<{ id: string }>();
|
||||
@@ -18,23 +21,23 @@ export default function DreamPage() {
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="mb-4 hover:underline"
|
||||
style={{ color: 'var(--accent)' }}
|
||||
style={{color: 'var(--accent)'}}
|
||||
>
|
||||
← Zurück
|
||||
</button>
|
||||
<p style={{ color: 'var(--text-muted)' }}>Traum nicht gefunden.</p>
|
||||
<p style={{color: 'var(--text-muted)'}}>Traum nicht gefunden.</p>
|
||||
</div>);
|
||||
}
|
||||
|
||||
return (<div className="page min-h-screen">
|
||||
{/* Header */}
|
||||
<div className="relative" style={{ background: 'var(--accent-gradient)' }}>
|
||||
<div className="relative" style={{background: 'var(--accent-gradient)'}}>
|
||||
<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"
|
||||
>
|
||||
←
|
||||
<FaArrowLeft/>
|
||||
</button>
|
||||
<div className="flex items-center space-x-4 mt-8">
|
||||
{user && (<img
|
||||
@@ -64,7 +67,7 @@ export default function DreamPage() {
|
||||
<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>
|
||||
<span className="font-medium" style={{color: 'var(--accent)'}}>Traum-Beschreibung</span>
|
||||
</div>
|
||||
<p className="leading-relaxed text-lg">
|
||||
{dream.input}
|
||||
@@ -74,35 +77,51 @@ export default function DreamPage() {
|
||||
{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>
|
||||
<span className="font-medium" style={{color: 'var(--accent)'}}>KI-Interpretation</span>
|
||||
</div>
|
||||
<p className="leading-relaxed">
|
||||
{dream.ai.interpretation}
|
||||
</p>
|
||||
</div>)}
|
||||
|
||||
{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>)}
|
||||
<Slider className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
|
||||
{dream.ai?.image && dream.ai.image !== '' && (<div>
|
||||
<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?.video && dream.ai.video !== '' && (<div>
|
||||
<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>)}
|
||||
</Slider>
|
||||
|
||||
{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>
|
||||
<span className="font-medium" style={{color: 'var(--accent)'}}>KI-Audio</span>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<audio
|
||||
controls
|
||||
<audio
|
||||
controls
|
||||
src={`/assets/dreams/audio/${dream.ai.audio}`}
|
||||
className="w-full max-w-md sm:max-w-lg mx-auto"
|
||||
>
|
||||
@@ -111,25 +130,9 @@ export default function DreamPage() {
|
||||
</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="space-y-2" style={{color: 'var(--text-muted)'}}>
|
||||
<div className="flex justify-between">
|
||||
<span>Eingabetyp</span>
|
||||
<span className="capitalize">{dream.inputType}</span>
|
||||
|
||||
37
src/pages/Home.tsx
Normal file
37
src/pages/Home.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
interface HomeProps {
|
||||
isLoggedIn: boolean;
|
||||
handleLogin: () => void;
|
||||
}
|
||||
|
||||
export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
||||
|
||||
if (isLoggedIn) {
|
||||
return (<div>
|
||||
<h1>Hallo Neo!</h1>
|
||||
</div>)
|
||||
}
|
||||
return (<div className="p-4">
|
||||
<h1 className="dreamy-text text-3xl md:text-4xl mb-6">Welcome to REMind</h1>
|
||||
<p className="mb-8 text-lg">Your dreamy journey to better sleep and dream tracking</p>
|
||||
|
||||
<div className="dream-container">
|
||||
<h2 className="dream-title">Track Your Dreams</h2>
|
||||
<p className="mb-4">Record and analyze your dreams with our intuitive interface</p>
|
||||
<button className="dreamy-button" onClick={handleLogin}>
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
|
||||
<div className="card floating">
|
||||
<h3 className="text-xl font-bold mb-2" style={{color: 'var(--accent)'}}>Dream Journal
|
||||
</h3>
|
||||
<p>Keep track of all your dreams in one place</p>
|
||||
</div>
|
||||
<div className="card" style={{animationDelay: '2s'}}>
|
||||
<h3 className="text-xl font-bold mb-2" style={{color: 'var(--accent)'}}>Sleep Analysis</h3>
|
||||
<p>Understand your sleep patterns better</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
@@ -12,7 +12,7 @@ const ProfilePage: React.FC = () => {
|
||||
const defaultStreakDays = 0;
|
||||
|
||||
return (
|
||||
<div className="page p-4">
|
||||
<div className="page min-h-screen p-4">
|
||||
<div className="dreamPanel flex flex-col items-center p-6">
|
||||
{/* Profile Picture */}
|
||||
<div className="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-accent">
|
||||
|
||||
Reference in New Issue
Block a user