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

let junie rework the theme one more time

Browse Source
This commit is contained in:
Matthias Puchstein
2025-07-09 21:11:36 +02:00
parent 62a2ff03dd
commit 5ad3894683
9 changed files with 196 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -124,6 +124,8 @@ export default function App() {
}
const handleSplashFinished = () => {
setIsLoading(false);
setIsLoggedIn(false);
localStorage.setItem('loggedIn', 'false');
};
if (isLoading) {

4
src/assets/logo.svg
View File

@@ -1,8 +1,8 @@
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="50%">
<stop offset="0%" stop-color="darkorchid" />
<stop offset="100%" stop-color="darkslateblue" />
<stop offset="0%" stop-color="#a64dff" />
<stop offset="100%" stop-color="#6a0dad" />
</linearGradient>
<mask id="moonMask">
<circle cx="60" cy="60" r="50" fill="white" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 589 B

After

Width:  |  Height:  |  Size: 580 B

7
src/assets/logotext.svg
View File

@@ -1,8 +1,8 @@
<svg width="400" height="120" viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="darkorchid" />
<stop offset="100" stop-color="darkslateblue" />
<stop offset="0" stop-color="#a64dff" />
<stop offset="100" stop-color="#6a0dad" />
</linearGradient>
<mask id="moonMask">
<circle cx="60" cy="60" r="50" fill="white" />
@@ -14,7 +14,8 @@
</defs>
<circle cx="60" cy="50%" r="50" fill="url(#moonGradient)" mask="url(#moonMask)" />
<text x="250" y="60%" dominant-baseline="middle" text-anchor="middle"
font-family="'Raleway', sans-serif" font-size="70" fill="url(#moonGradient)" letter-spacing="2">
font-family="'Raleway', sans-serif" font-size="70" fill="white" letter-spacing="2"
style="text-shadow: 0 0 5px rgba(0,0,0,0.3);">
REMind
</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 953 B

After

Width:  |  Height:  |  Size: 988 B

46
src/components/SplashScreen.tsx
View File

@@ -1,33 +1,31 @@
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();
localStorage.setItem('loggedIn', 'false');
}, 2000); // Show splash screen for 2 seconds
export default function SplashScreen({ onFinished }: SplashScreenProps) {
useEffect(() => {
// Simulate loading time with a timeout
const timer = setTimeout(() => {
onFinished();
}, 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-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>);
return (
<div className="fixed inset-0 flex flex-col items-center justify-center z-50 bg-gradient-to-br from-fuchsia-900 via-pink-700 to-purple-900">
<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>
);
}

6
src/components/TopBar.tsx
View File

@@ -8,7 +8,7 @@ export default function TopBar() {
// Function to update theme meta tag
const updateThemeColor = (isDark: boolean) => {
const themeColor = isDark ? '#bb86fc' : '#9d4eff';
const themeColor = isDark ? '#c490ff' : '#6a0dad';
const metaThemeColor = document.querySelector('meta[name="theme-color"]');
if (metaThemeColor) {
metaThemeColor.setAttribute('content', themeColor);
@@ -66,7 +66,9 @@ export default function TopBar() {
>
<div className="flex items-center justify-between w-full max-w-6xl mx-auto">
<div className="flex items-center">
<img src={logotext} alt="REMind Logo and Text" className="h-16"/>
<div className="p-1 rounded-lg" style={{ backgroundColor: 'rgba(255, 255, 255, 0.15)', backdropFilter: 'blur(4px)' }}>
<img src={logotext} alt="REMind Logo and Text" className="h-16"/>
</div>
</div>
<button

32
src/index.css
View File

@@ -1,16 +1,16 @@
@import "tailwindcss";
:root {
--bg: #f8f5ff;
--container: #ede6fa;
--card: #e0d4ff;
--text: #1e102e;
--text-muted: #4a375e;
--accent: #9d4eff;
--accent-gradient: linear-gradient(135deg, #9d4eff, #d500f9);
--bg: #f9f6ff;
--container: #eee8fc;
--card: #e5dcff;
--text: #1a0d29;
--text-muted: #3d2a5c;
--accent: #a64dff;
--accent-gradient: linear-gradient(135deg, #a64dff, #d500f9);
--accent-soft: #c9a4ff;
--accent-dark: #6a0dad;
--shadow: rgba(157, 78, 255, 0.2);
--shadow: rgba(166, 77, 255, 0.2);
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
@@ -27,16 +27,16 @@
}
[data-theme="dark"] {
--bg: #1a0933;
--container: #2d1155;
--bg: #150830;
--container: #2a1050;
--card: #3d1a6e;
--text: #f5e6ff;
--text-muted: #c9a4e3;
--accent: #bb86fc;
--accent-gradient: linear-gradient(135deg, #bb86fc, #d500f9);
--accent-soft: #9d4eff;
--text: #f8eeff;
--text-muted: #d4b8f0;
--accent: #c490ff;
--accent-gradient: linear-gradient(135deg, #c490ff, #d500f9);
--accent-soft: #a64dff;
--accent-dark: #6a0dad;
--shadow: rgba(187, 134, 252, 0.3);
--shadow: rgba(196, 144, 255, 0.3);
}
.border-background {

128
src/pages/DreamPage.tsx
View File

@@ -1,13 +1,10 @@
// 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 }>();
@@ -21,35 +18,35 @@ 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">
return (<div className="page min-h-screen pb-20">
{/* 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">
<div className="flex flex-col sm:flex-row sm:items-center sm:space-x-4 mt-8">
{user && (<img
src={`/assets/profiles/${user.profilePicture}`}
alt={user.name}
className="w-16 h-16 rounded-full border-4 border-white/30 object-cover"
className="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-4 border-white/30 object-cover mx-auto sm:mx-0 mb-3 sm:mb-0"
/>)}
<div>
<h1 className="font-bold !text-xl sm:!text-2xl md:!text-3xl lg:!text-4xl">
<div className="text-center sm:text-left">
<h1 className="font-bold text-xl sm:text-2xl md:text-3xl lg:text-4xl">
{dream.title}
</h1>
{user && (<p className="mt-1 text-white/80">
{user && (<p className="mt-1 text-white/80 text-sm sm:text-base">
{user.name} •{' '}
{dream.date.toLocaleDateString('de-DE', {
day: '2-digit',
@@ -64,92 +61,83 @@ export default function DreamPage() {
</div>
</div>
<div className="p-4 sm:p-6 md:p-8 space-y-6 sm:space-y-8">
<div className="p-4 sm:p-6 md:p-8 space-y-6 sm:space-y-8 max-w-4xl mx-auto">
<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>
{(dream.input.inputType === 'image' || dream.input.inputType === 'audio') && (
<div className="flex justify-center mb-1">
{dream.input.inputType === 'audio' && (
<audio></audio>
)}
{dream.input.inputType === 'image' && (
<img alt={dream.input.imgAlt}></img>
)}
</div>)}
<p className="leading-relaxed text-lg">
{(dream.input.inputType === 'text' && dream.input.input)
|| (dream.input.inputType === 'audio' && dream.input.transcript)
|| (dream.input.inputType === 'image' && dream.input.description)}
<p className="leading-relaxed text-base sm:text-lg">
{dream.input}
</p>
</div>
{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>)}
<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?.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 rounded-lg shadow-lg object-contain mx-auto"
style={{ maxHeight: '70vh' }}
/>
</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>
<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"
className="w-full max-w-xs sm:max-w-md md: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 rounded-lg shadow-lg object-contain mx-auto"
style={{ maxHeight: '70vh' }}
>
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">
<span>Eingabetyp</span>
<span className="capitalize">{dream.input.inputType}</span>
<div className="space-y-3" style={{ color: 'var(--text-muted)' }}>
<div className="flex flex-col sm:flex-row sm:justify-between">
<span className="font-medium mb-1 sm:mb-0">Eingabetyp</span>
<span className="capitalize">{dream.inputType}</span>
</div>
<div className="flex justify-between">
<span>Datum</span>
<div className="flex flex-col sm:flex-row sm:justify-between">
<span className="font-medium mb-1 sm:mb-0">Datum</span>
<span>
{dream.date.toLocaleDateString('de-DE', {
day: '2-digit', month: '2-digit', year: 'numeric',

144
src/pages/Home.tsx
View File

@@ -30,7 +30,7 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
</div>)
}
return (<div className="p-4 max-w-6xl mx-auto relative overflow-hidden">
return (<div className="p-4 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Floating Background Elements */}
<div className="absolute inset-0 pointer-events-none">
<div className="absolute top-10 left-10 text-purple-200 opacity-30">
@@ -45,20 +45,20 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
</div>
{/* Hero Section */}
<div className="text-center mb-16 relative z-10">
<div className="animate-pulse flex flex-col items-center mb-12">
<div className="text-center mb-12 sm:mb-16 relative z-10">
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
<div className="flex items-center justify-around">
<img src={logotext} alt="REMind Logo and Text" className="h-48 mb-4"/>
<img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
</div>
<p className="text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</p>
<p className="text-lg sm:text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</p>
</div>
<div className="dream-container max-w-3xl mx-auto backdrop-blur-sm bg-white/10 rounded-3xl p-8">
<div className="flex justify-center items-center mb-4">
<HiSparkles className="text-yellow-400 mr-2" size={24}/>
<h2 className="dream-title text-2xl">Träume sammeln • KI verstehen • VR erleben</h2>
<HiSparkles className="text-yellow-400 ml-2" size={24}/>
<div className="dream-container max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8">
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
<HiSparkles className="text-yellow-400 mb-2 sm:mb-0 sm:mr-2" size={20} />
<h2 className="dream-title text-xl sm:text-2xl">Träume sammeln • KI verstehen • VR erleben</h2>
<HiSparkles className="text-yellow-400 mt-2 sm:mt-0 sm:ml-2 hidden sm:block" size={20} />
</div>
<p className="mb-8 text-lg font-light">
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
Verwandle deine nächtlichen Reisen in interaktive Traumlandschaften
mit KI-gestützter Analyse und immersiven VR-Erlebnissen
</p>
@@ -68,17 +68,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
{/* KI-Traumdeutung */}
<div
className="card floating backdrop-blur-md bg-gradient-to-br from-purple-100/50 to-pink-100/50 border border-purple-200/30"
className="card floating backdrop-blur-md bg-gradient-to-br from-purple-100/50 to-pink-100/50 border border-purple-200/30 dark:bg-gradient-to-br dark:from-purple-900/30 dark:to-pink-900/30 dark:border-purple-700/30"
style={{animationDelay: '0.5s'}}>
<div className="flex justify-center mb-4">
<div className="p-4 bg-purple-500/20 rounded-full">
<FaBrain className="text-purple-600" size={32}/>
<div className="p-3 sm:p-4 bg-purple-500/20 rounded-full">
<FaBrain className="text-purple-600 dark:text-purple-400" size={28} />
</div>
</div>
<h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
KI-Traumdeutung
</h3>
<p className="text-center text-gray-700 font-light">
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
Deine Träume werden von KI entschlüsselt -
Symbole erkannt, Emotionen analysiert, Bedeutungen offenbart
</p>
@@ -86,17 +86,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
{/* Multimediale Traumerfassung */}
<div
className="card floating backdrop-blur-md bg-gradient-to-br from-blue-100/50 to-indigo-100/50 border border-blue-200/30"
className="card floating backdrop-blur-md bg-gradient-to-br from-blue-100/50 to-indigo-100/50 border border-blue-200/30 dark:bg-gradient-to-br dark:from-blue-900/30 dark:to-indigo-900/30 dark:border-blue-700/30"
style={{animationDelay: '1s'}}>
<div className="flex justify-center mb-4">
<div className="p-4 bg-blue-500/20 rounded-full">
<FaMicrophone className="text-blue-600" size={32}/>
<div className="p-3 sm:p-4 bg-blue-500/20 rounded-full">
<FaMicrophone className="text-blue-600 dark:text-blue-400" size={28} />
</div>
</div>
<h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
Träume einfangen
</h3>
<p className="text-center text-gray-700 font-light">
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
Sprich deine Träume in der Nacht, zeichne traumhafte Skizzen
oder schreibe poetische Beschreibungen
</p>
@@ -104,17 +104,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
{/* VR-Traumwelten */}
<div
className="card floating backdrop-blur-md bg-gradient-to-br from-violet-100/50 to-purple-100/50 border border-violet-200/30"
className="card floating backdrop-blur-md bg-gradient-to-br from-violet-100/50 to-purple-100/50 border border-violet-200/30 dark:bg-gradient-to-br dark:from-violet-900/30 dark:to-purple-900/30 dark:border-violet-700/30"
style={{animationDelay: '1.5s'}}>
<div className="flex justify-center mb-4">
<div className="p-4 bg-violet-500/20 rounded-full">
<FaVrCardboard className="text-violet-600" size={32}/>
<div className="p-3 sm:p-4 bg-violet-500/20 rounded-full">
<FaVrCardboard className="text-violet-600 dark:text-violet-400" size={28} />
</div>
</div>
<h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
VR-Traumreisen
</h3>
<p className="text-center text-gray-700 font-light">
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
Betritt deine Träume als begehbare Welten -
schwebe durch Erinnerungen, berühre Traumsymbole
</p>
@@ -122,17 +122,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
{/* Traumarchiv */}
<div
className="card backdrop-blur-md bg-gradient-to-br from-emerald-100/50 to-teal-100/50 border border-emerald-200/30"
className="card backdrop-blur-md bg-gradient-to-br from-emerald-100/50 to-teal-100/50 border border-emerald-200/30 dark:bg-gradient-to-br dark:from-emerald-900/30 dark:to-teal-900/30 dark:border-emerald-700/30"
style={{animationDelay: '2s'}}>
<div className="flex justify-center mb-4">
<div className="p-4 bg-emerald-500/20 rounded-full">
<FaBook className="text-emerald-600" size={32}/>
<div className="p-3 sm:p-4 bg-emerald-500/20 rounded-full">
<FaBook className="text-emerald-600 dark:text-emerald-400" size={28} />
</div>
</div>
<h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
Traumschatzkammer
</h3>
<p className="text-center text-gray-700 font-light">
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
Deine Traumsammlung wächst - durchsuchbar nach Gefühlen,
Symbolen und magischen Momenten
</p>
@@ -140,17 +140,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
{/* Traumstatistiken */}
<div
className="card backdrop-blur-md bg-gradient-to-br from-amber-100/50 to-orange-100/50 border border-amber-200/30"
className="card backdrop-blur-md bg-gradient-to-br from-amber-100/50 to-orange-100/50 border border-amber-200/30 dark:bg-gradient-to-br dark:from-amber-900/30 dark:to-orange-900/30 dark:border-amber-700/30"
style={{animationDelay: '2.5s'}}>
<div className="flex justify-center mb-4">
<div className="p-4 bg-amber-500/20 rounded-full">
<FaChartBar className="text-amber-600" size={32}/>
<div className="p-3 sm:p-4 bg-amber-500/20 rounded-full">
<FaChartBar className="text-amber-600 dark:text-amber-400" size={28} />
</div>
</div>
<h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
Traummuster
</h3>
<p className="text-center text-gray-700 font-light">
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
Entdecke die geheimen Muster deiner Nachtreisen -
welche Träume kehren zurück?
</p>
@@ -158,17 +158,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
{/* Schlafrhythmus */}
<div
className="card backdrop-blur-md bg-gradient-to-br from-rose-100/50 to-pink-100/50 border border-rose-200/30"
className="card backdrop-blur-md bg-gradient-to-br from-rose-100/50 to-pink-100/50 border border-rose-200/30 dark:bg-gradient-to-br dark:from-rose-900/30 dark:to-pink-900/30 dark:border-rose-700/30"
style={{animationDelay: '3s'}}>
<div className="flex justify-center mb-4">
<div className="p-4 bg-rose-500/20 rounded-full">
<FaMoon className="text-rose-600" size={32}/>
<div className="p-3 sm:p-4 bg-rose-500/20 rounded-full">
<FaMoon className="text-rose-600 dark:text-rose-400" size={28} />
</div>
</div>
<h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
Schlafzyklen
</h3>
<p className="text-center text-gray-700 font-light">
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
Verstehe deine Schlafrhythmen und wie sie deine
Traumlandschaften formen
</p>
@@ -177,49 +177,49 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
{/* Dreamy Workflow Section */}
<div
className="dream-container mb-16 backdrop-blur-lg bg-gradient-to-br from-pink-500/30 to-red-400/30 rounded-3xl p-12">
className="dream-container mb-16 backdrop-blur-lg bg-gradient-to-br from-pink-500/30 to-red-400/30 dark:from-pink-800/30 dark:to-red-900/30 rounded-3xl p-6 sm:p-8 md:p-12">
<div className="text-center">
<FaHeart className="text-pink-500 mx-auto mb-4" size={40}/>
<h2 className="dream-title text-3xl">Deine magische Traumreise</h2>
<FaHeart className="text-pink-500 dark:text-pink-400 mx-auto mb-4" size={32} />
<h2 className="dream-title text-2xl sm:text-3xl">Deine magische Traumreise</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mt-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mt-6 sm:mt-8">
<div className="text-center">
<div
className="bg-gradient-to-br from-purple-400 to-purple-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
<FaBed className="text-white" size={28}/>
className="bg-gradient-to-br from-purple-400 to-purple-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
<FaBed className="text-white" size={24} />
</div>
<h4 className="font-bold mb-3 dreamy-text">1. Träumen</h4>
<p className="text-sm font-light">
<h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">1. Träumen</h4>
<p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
In der Nacht zeichnen deine Sensoren sanft deine Traumreisen auf
</p>
</div>
<div className="text-center">
<div
className="bg-gradient-to-br from-blue-400 to-blue-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
<FaPen className="text-white" size={28}/>
className="bg-gradient-to-br from-blue-400 to-blue-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
<FaPen className="text-white" size={24} />
</div>
<h4 className="font-bold mb-3 dreamy-text">2. Einfangen</h4>
<p className="text-sm font-light">
<h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">2. Einfangen</h4>
<p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
Beim Erwachen flüsterst du deine Träume in die App
</p>
</div>
<div className="text-center">
<div
className="bg-gradient-to-br from-violet-400 to-violet-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
<FaRobot className="text-white" size={28}/>
className="bg-gradient-to-br from-violet-400 to-violet-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
<FaRobot className="text-white" size={24} />
</div>
<h4 className="font-bold mb-3 dreamy-text">3. Verzaubern</h4>
<p className="text-sm font-light">
<h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">3. Verzaubern</h4>
<p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
KI-Magie verwandelt deine Worte in Bilder, Klänge und Bedeutungen
</p>
</div>
<div className="text-center">
<div
className="bg-gradient-to-br from-pink-400 to-pink-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
<FaEye className="text-white" size={28}/>
className="bg-gradient-to-br from-pink-400 to-pink-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
<FaEye className="text-white" size={24} />
</div>
<h4 className="font-bold mb-3 dreamy-text">4. Erleben</h4>
<p className="text-sm font-light">
<h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">4. Erleben</h4>
<p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
Tauche ein in deine VR-Traumwelten und entdecke dich selbst
</p>
</div>
@@ -227,29 +227,29 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
</div>
{/* Dreamy CTA Section */}
<div className="relative mt-16">
<div className="relative mt-12 sm:mt-16">
<div
className="card p-12 text-center bg-gradient-to-br from-pink-600 via-violet-600 to-purple-600 border-none overflow-hidden">
className="card p-6 sm:p-8 md:p-12 text-center bg-gradient-to-br from-pink-600 via-violet-600 to-purple-600 border-none overflow-hidden">
<div className="relative z-10">
<div className="flex justify-center items-center mb-6">
<FaStar className="text-yellow-300 mr-3" size={32}/>
<h2 className="text-4xl font-bold text-white">Wo Träume Realität werden</h2>
<FaStar className="text-yellow-300 ml-3" size={32}/>
<div className="flex flex-col sm:flex-row justify-center items-center mb-4 sm:mb-6">
<FaStar className="text-yellow-300 mb-2 sm:mb-0 sm:mr-3" size={24} />
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white">Wo Träume Realität werden</h2>
<FaStar className="text-yellow-300 mt-2 sm:mt-0 sm:ml-3 hidden sm:block" size={24} />
</div>
<p className="text-xl text-purple-100 mb-10 font-light max-w-2xl mx-auto">
<p className="text-base sm:text-lg md:text-xl text-purple-100 mb-6 sm:mb-8 md:mb-10 max-w-2xl mx-auto">
Lass dich von KI-gestützter Traumdeutung, VR-Erlebnissen und personalisierten
Einsichten in eine tiefere Welt deines Unterbewusstseins führen
</p>
<button
className="dreamy-button flex items-center mx-auto"
className="dreamy-button flex items-center mx-auto text-sm sm:text-base"
onClick={handleLogin}
>
<FaMoon className="mr-3" size={24}/>
<FaMoon className="mr-2 sm:mr-3" size={18} />
Lass die Magie beginnen!
<HiSparkles className="ml-3" size={24}/>
<HiSparkles className="ml-2 sm:ml-3" size={18} />
</button>
</div>
</div>
</div>
</div>)
}
}

32
src/pages/ProfilePage.tsx
View File

@@ -12,10 +12,10 @@ const ProfilePage: React.FC = () => {
const defaultStreakDays = 0;
return (
<div className="page min-h-screen p-4">
<div className="dreamPanel flex flex-col items-center p-6">
<div className="page p-4 pb-20">
<div className="dreamPanel flex flex-col items-center p-4 sm:p-6 md:p-8 max-w-md mx-auto">
{/* Profile Picture */}
<div className="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-accent">
<div className="w-24 h-24 sm:w-32 sm:h-32 rounded-full overflow-hidden mb-4 border-4 border-accent">
<img
src={profileUser ? `/assets/profiles/${profileUser.profilePicture}` : `https://ui-avatars.com/api/?name=${defaultName}&background=random&color=fff&size=128`}
alt={profileUser ? profileUser.name : defaultName}
@@ -24,34 +24,34 @@ const ProfilePage: React.FC = () => {
</div>
{/* User Information */}
<div className="text-center">
<h2 className="text-xl font-bold mb-2">{profileUser ? profileUser.name : defaultName}</h2>
<div className="text-center w-full">
<h2 className="text-xl sm:text-2xl font-bold mb-2">{profileUser ? profileUser.name : defaultName}</h2>
<p className="text-text-muted mb-4">{profileUser ? profileUser.email : defaultEmail}</p>
<div className="grid grid-cols-2 gap-4 mt-6 text-center">
<div className="dreamPanel">
<p className="font-bold text-2xl">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
<p className="text-sm text-text-muted">Dreams</p>
<div className="grid grid-cols-2 gap-2 sm:gap-4 mt-6 text-center">
<div className="dreamPanel p-3 sm:p-4">
<p className="font-bold text-xl sm:text-2xl">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
<p className="text-xs sm:text-sm text-text-muted">Dreams</p>
</div>
<div className="dreamPanel">
<p className="font-bold text-2xl">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
<p className="text-sm text-text-muted">Days Streak</p>
<div className="dreamPanel p-3 sm:p-4">
<p className="font-bold text-xl sm:text-2xl">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
<p className="text-xs sm:text-sm text-text-muted">Days Streak</p>
</div>
</div>
<div className="mt-8">
<div className="mt-6 sm:mt-8">
<h3 className="text-lg font-semibold mb-2">Account Settings</h3>
<div className="dreamPanel text-left">
<div className="dreamPanel text-left p-3 sm:p-4">
<div className="flex justify-between items-center py-2">
<span>Notifications</span>
<label className="theme-toggle">
<label className="theme-toggle relative inline-block">
<input type="checkbox" defaultChecked />
<span className="slider"></span>
</label>
</div>
<div className="flex justify-between items-center py-2">
<span>Privacy</span>
<label className="theme-toggle">
<label className="theme-toggle relative inline-block">
<input type="checkbox" />
<span className="slider"></span>
</label>