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

added a fake login and some style changes

Browse Source
This commit is contained in:
Matthias Puchstein
2025-07-04 23:03:20 +02:00
parent 50b1bec73c
commit 8a0afcbe6b
9 changed files with 217 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/App.tsx
View File

@@ -7,32 +7,7 @@ import {BrowserRouter, Route, Routes} from 'react-router-dom';
import Feed from "./pages/Feed.tsx";
import DreamPage from "./pages/DreamPage.tsx";
import ProfilePage from "./pages/ProfilePage.tsx";
function Home() {
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">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>
);
}
import Home from "./pages/Home.tsx";
function Record() {
return (
@@ -141,7 +116,12 @@ function Archive() {
export default function App() {
const [isLoading, setIsLoading] = useState(true);
const [isLoggedIn, setIsLoggedIn] = useState(localStorage.getItem('loggedIn') === 'true' || false);
const handleLogin = () => {
setIsLoggedIn(true);
localStorage.setItem('loggedIn', 'true');
}
const handleSplashFinished = () => {
setIsLoading(false);
};
@@ -156,10 +136,10 @@ export default function App() {
<div className="pb-16 pt-8 min-h-screen">
<TopBar/>
<div className="mx-auto w-full max-w-lg px-4 sm:px-6 md:max-w-2xl lg:max-w-4xl">
<Navbar/>
<Navbar isLoggedIn={isLoggedIn}/>
<div className="mt-16 mb-20">
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/" element={<Home isLoggedIn={isLoggedIn} handleLogin={handleLogin}/>}/>
<Route path="/feed" element={<Feed/>}/>
<Route path="/record" element={<Record/>}/>
<Route path="/archive" element={<Archive/>}/>

21
src/components/Navbar.tsx
View File

@@ -1,30 +1,37 @@
import {NavLink} from 'react-router-dom';
import {FaArchive, FaHome, FaList, FaMicrophone, FaUser} from "react-icons/fa";
export default function Navbar() {
interface NavbarProps {
isLoggedIn: boolean;
}
export default function Navbar({isLoggedIn}: NavbarProps) {
if (!isLoggedIn && localStorage.getItem('loggedIn') !== 'true') return (
<></>
)
return (<>
<nav
className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-10"
style={{ backgroundColor: 'var(--accent-dark)', boxShadow: '0 -2px 10px var(--shadow)' }}>
style={{backgroundColor: 'var(--accent-dark)', boxShadow: '0 -2px 10px var(--shadow)'}}>
<NavLink to="/" className="transition-transform hover:scale-110">
<FaHome className="w-6 h-6 md:w-8 md:h-8" style={{ color: 'var(--accent-soft)' }}/>
<FaHome className="w-6 h-6 md:w-8 md:h-8" style={{color: 'var(--accent-soft)'}}/>
</NavLink>
<NavLink to="/feed" className="transition-transform hover:scale-110">
<FaList className="w-6 h-6 md:w-8 md:h-8" style={{ color: 'var(--accent-soft)' }}/>
<FaList className="w-6 h-6 md:w-8 md:h-8" style={{color: 'var(--accent-soft)'}}/>
</NavLink>
<div className="w-16 md:w-20"></div>
<NavLink to="/archive" className="transition-transform hover:scale-110">
<FaArchive className="w-6 h-6 md:w-8 md:h-8" style={{ color: 'var(--accent-soft)' }}/>
<FaArchive className="w-6 h-6 md:w-8 md:h-8" style={{color: 'var(--accent-soft)'}}/>
</NavLink>
<NavLink to="/profile" className="transition-transform hover:scale-110">
<FaUser className="w-6 h-6 md:w-8 md:h-8" style={{ color: 'var(--accent-soft)' }}/>
<FaUser className="w-6 h-6 md:w-8 md:h-8" style={{color: 'var(--accent-soft)'}}/>
</NavLink>
</nav>
<NavLink
to="/record"
className="microphone-button fixed bottom-6 left-1/2 transform -translate-x-1/2 p-4 md:p-5 rounded-full z-20 transition-transform hover:scale-110"
style={{ boxShadow: '0 4px 15px var(--shadow)' }}
style={{boxShadow: '0 4px 15px var(--shadow)'}}
>
<FaMicrophone className="w-8 h-8 md:w-10 md:h-10 text-white"/>
</NavLink>

46
src/components/SplashScreen.tsx
View File

@@ -1,31 +1,33 @@
import { useEffect } from 'react';
import {useEffect} from 'react';
import logo from '../assets/logo.svg';
import text from '../assets/text.svg';
interface SplashScreenProps {
onFinished: () => void;
onFinished: () => void;
}
export default function SplashScreen({ onFinished }: SplashScreenProps) {
useEffect(() => {
// Simulate loading time with a timeout
const timer = setTimeout(() => {
onFinished();
}, 2000); // Show splash screen for 2 seconds
export default function SplashScreen({onFinished}: SplashScreenProps) {
useEffect(() => {
// Simulate loading time with a timeout
const timer = setTimeout(() => {
onFinished();
localStorage.setItem('loggedIn', 'false');
}, 2000); // Show splash screen for 2 seconds
return () => clearTimeout(timer);
}, [onFinished]);
return () => clearTimeout(timer);
}, [onFinished]);
return (
<div className="fixed inset-0 flex flex-col items-center justify-center bg-violet-900 z-50">
<div className="animate-pulse flex flex-col items-center">
<img src={logo} alt="REMind Logo" className="h-32 w-32 mb-4" />
<img src={text} alt="REMind Text" className="h-16" />
</div>
<div className="mt-8 text-fuchsia-400">
<div className="animate-spin h-8 w-8 border-4 border-current border-t-transparent rounded-full mx-auto"></div>
<p className="mt-4 text-center">Loading your dreams...</p>
</div>
</div>
);
return (<div
className="fixed inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-violet-900 via-rose-500 to-indigo-950 z-50">
<div className="animate-pulse flex flex-col items-center">
<img src={logo} alt="REMind Logo" className="h-64 w-64 mb-4"/>
<img src={text} alt="REMind Text" className="h-32"/>
<p className="h-16">Träume analysieren, Gesellschaft verstehen</p>
</div>
<div className="mt-8 text-fuchsia-400">
<div
className="animate-spin h-8 w-8 border-4 border-current border-t-transparent rounded-full mx-auto"></div>
<p className="mt-4 text-center">Loading your dreams...</p>
</div>
</div>);
}

2
src/data/MockDreams.ts
View File

@@ -63,7 +63,7 @@ export const mockDreams: Dream[] = [
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.',
image: '05.png',
audio: '05_1.mp3'
audio: '05.mp3'
}
}),
];

85
src/pages/DreamPage.tsx
View File

@@ -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
View 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>);
}

2
src/pages/ProfilePage.tsx
View File

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