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

added dreamy gradient styles to index.css, expanded getBackgroundStyle for gradient types, introduced ChipCard component, updated Home with ChipCard, and refined layouts with consistent paddings and shadows

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-12 12:32:58 +02:00
parent 153f5fd146
commit ccca533db6
10 changed files with 190 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/ChipCard.tsx Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import {NavLink} from 'react-router-dom';
export const ChipCard: React.FC = () => {
return (
<NavLink to="/"
className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] animate-fadeIn rounded-lg mb-4 floating">
<div
className="p-4 backdrop-blur-sm rounded-lg"
style={{
background: 'var(--purple-gradient)',
boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.2)',
border: '1px solid rgba(166, 77, 255, 0.1)'
}}>
<div className="flex flex-col sm:flex-row items-center">
<div
className="mb-4 sm:mb-0 sm:mr-4 transition-all duration-300 hover:transform hover:rotate-12">
<svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16" fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1}
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</div>
<div>
<h3 className="font-bold text-lg mb-1 dream-title">ReMind Sensor-Gerät</h3>
<p className="text-sm mb-2">Verbessere deine Traumerfahrung mit unserem Sensor
mit EEG,
Bewegungserkennung und Vitalzeichen-Überwachung.</p>
<div
className="mb-3 inline-block px-2 py-1 text-xs font-bold rounded transition-all duration-300 hover:transform hover:scale-105"
style={{backgroundColor: 'var(--accent-soft)', color: 'var(--text)'}}>
Pro-Funktionen: VR-Räume, Automatische Traumerkennung und Aufzeichnung
</div>
</div>
</div>
</div>
</NavLink>
);
};

17
src/components/DailyHighlights.tsx
View File

@@ -1,5 +1,5 @@
import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights'; import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights';
import {getCardStyle, getTextStyle} from '../styles/StyleUtils'; import {getTextStyle} from '../styles/StyleUtils';
/** /**
* HighlightCard component displays a single highlight item with a colored progress bar * HighlightCard component displays a single highlight item with a colored progress bar
@@ -13,9 +13,9 @@ const HighlightCard = ({label, percentage}: HighlightItemProps) => {
return ( return (
<div <div
className="mb-3 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] animate-fadeIn floating"> className="mb-3 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] animate-fadeIn floating">
<div className="relative p-3 backdrop-blur-sm" <div className="relative p-4 backdrop-blur-sm"
style={{ style={{
background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25))', background: 'var(--purple-gradient)',
boxShadow: 'inset 0 0 15px rgba(166, 77, 255, 0.2)' boxShadow: 'inset 0 0 15px rgba(166, 77, 255, 0.2)'
}}> }}>
<div className="flex justify-between items-center mb-1"> <div className="flex justify-between items-center mb-1">
@@ -51,15 +51,18 @@ const HighlightCard = ({label, percentage}: HighlightItemProps) => {
*/ */
export const DailyHighlights = () => { export const DailyHighlights = () => {
return ( return (
<div className={getCardStyle().className} <div className="dreamy-card backdrop-blur-md mb-4"
style={getCardStyle()}> style={{
background: 'var(--pink-red-gradient)',
animationDelay: '0.3s'
}}>
<h3 className="font-bold mb-3 dream-title">Tägliche Highlights</h3> <h3 className="font-bold mb-3 dream-title">Tägliche Highlights</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div <div
className="p-4 rounded-lg backdrop-blur-sm transition-all duration-300 hover:transform hover:scale-[1.01]" className="p-4 rounded-lg backdrop-blur-sm transition-all duration-300 hover:transform hover:scale-[1.01]"
style={{ style={{
background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.15), rgba(213, 0, 249, 0.15))', background: 'var(--purple-gradient)',
boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.1)', boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.1)',
border: '1px solid rgba(166, 77, 255, 0.1)' border: '1px solid rgba(166, 77, 255, 0.1)'
}}> }}>
@@ -78,7 +81,7 @@ export const DailyHighlights = () => {
<div <div
className="p-4 rounded-lg backdrop-blur-sm transition-all duration-300 hover:transform hover:scale-[1.01]" className="p-4 rounded-lg backdrop-blur-sm transition-all duration-300 hover:transform hover:scale-[1.01]"
style={{ style={{
background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.15), rgba(213, 0, 249, 0.15))', background: 'var(--violet-gradient)',
boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.1)', boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.1)',
border: '1px solid rgba(166, 77, 255, 0.1)' border: '1px solid rgba(166, 77, 255, 0.1)'
}}> }}>

30
src/components/DreamCard.tsx
View File

@@ -3,7 +3,7 @@ import Dream from '../types/Dream';
import type User from "../types/User.ts"; import type User from "../types/User.ts";
import {NavLink} from "react-router-dom"; import {NavLink} from "react-router-dom";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import {getAccentStyle, getTextStyle} from '../styles/StyleUtils'; import {getTextStyle} from '../styles/StyleUtils';
import {formatDateWithTime} from '../utils/DateUtils'; import {formatDateWithTime} from '../utils/DateUtils';
interface DreamCardProps { interface DreamCardProps {
@@ -24,19 +24,23 @@ export default function DreamCard({dream, user, animationDelay = 0}: DreamCardPr
}, [animationDelay]); }, [animationDelay]);
return (<NavLink key={dream.id} to={`/dream/${dream.id}`}> return (<NavLink key={dream.id} to={`/dream/${dream.id}`}>
<li className={`dream-card card mb-4 transition-all duration-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}> <li className={`dreamy-card backdrop-blur-md mb-4 transition-all duration-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}
<div className="flex rounded items-center mb-3"> style={{
background: 'var(--purple-gradient)',
animationDelay: `${animationDelay * 0.2}s`
}}>
<div className="flex rounded items-center mb-4">
<div className="relative"> <div className="relative">
<img <img
src={`/assets/profiles/${user?.profilePicture}`} src={`/assets/profiles/${user?.profilePicture}`}
alt={user?.name} alt={user?.name}
className="w-12 h-12 rounded-full border-2 border-accent-soft" className="w-12 h-12 rounded-full border-2"
style={{borderColor: 'var(--accent-soft)'}} style={{borderColor: 'var(--accent-soft)', boxShadow: '0 0 10px var(--shadow)'}}
/> />
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-accent rounded-full" <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full"
style={getAccentStyle()}></div> style={{background: 'var(--accent-gradient)'}}></div>
</div> </div>
<span className="ml-4 font-semibold text-left">{user?.name} <span className="text-text-muted">hat geträumt:</span></span> <span className="ml-4 font-semibold text-left">{user?.name} <span style={getTextStyle('muted')}>hat geträumt:</span></span>
</div> </div>
<h2 className="title text-left dreamy-text text-lg"> <h2 className="title text-left dreamy-text text-lg">
{dream.title} {dream.title}
@@ -46,14 +50,18 @@ export default function DreamCard({dream, user, animationDelay = 0}: DreamCardPr
|| (dream.input.inputType === 'audio' && dream.input.transcript) || (dream.input.inputType === 'audio' && dream.input.transcript)
|| (dream.input.inputType === 'image' && dream.input.description)} || (dream.input.inputType === 'image' && dream.input.description)}
</p> </p>
<div className="flex justify-between items-center mt-3"> <div className="flex justify-between items-center mt-4">
<p className="timestamp text-left" style={getTextStyle('muted')}> <p className="timestamp text-left" style={getTextStyle('muted')}>
{formatDateWithTime(dream.date)} {formatDateWithTime(dream.date)}
</p> </p>
<div className="flex space-x-2"> <div className="flex space-x-2">
{/* Display dream type as a tag */} {/* Display dream type as a tag */}
<span className="px-2 py-1 text-xs rounded-full bg-accent-soft text-text" <span className="px-2 py-1 text-xs rounded-full"
style={getAccentStyle(true)}> style={{
background: 'var(--accent-gradient)',
color: 'white',
boxShadow: '0 2px 5px var(--shadow)'
}}>
{dream.input.inputType} {dream.input.inputType}
</span> </span>
</div> </div>

24
src/components/DreamCardCompact.tsx
View File

@@ -15,36 +15,40 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
<NavLink to={`/dream/${dream.id}`} <NavLink to={`/dream/${dream.id}`}
className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] animate-fadeIn rounded-lg mb-4 floating"> className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] animate-fadeIn rounded-lg mb-4 floating">
<div <div
className="py-1.5 px-2 backdrop-blur-sm" className="p-4 backdrop-blur-sm rounded-lg"
style={{ style={{
animationDelay: `${index * 0.1}s`, animationDelay: `${index * 0.1}s`,
background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.15), rgba(213, 0, 249, 0.15))', background: 'var(--purple-gradient)',
boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.1)', boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.2)',
border: '1px solid rgba(166, 77, 255, 0.1)', border: '1px solid rgba(166, 77, 255, 0.1)'
borderRadius: '0.5rem'
}}> }}>
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
{showUser && user && ( {showUser && user && (
<div className="pl-2" style={{width: '90px', minWidth: '90px'}}> <div className="pl-2" style={{width: '90px', minWidth: '90px'}}>
<div className="flex items-center"> <div className="flex items-center">
<div <div
className="w-6 h-6 rounded-full mr-1.5 flex items-center justify-center overflow-hidden bg-[var(--accent-soft)] border border-[var(--accent)]"> className="w-6 h-6 rounded-full mr-1.5 flex items-center justify-center overflow-hidden border-2"
style={{
background: 'var(--accent-gradient)',
borderColor: 'var(--accent-soft)',
boxShadow: '0 2px 5px var(--shadow)'
}}>
{user.profilePicture ? ( {user.profilePicture ? (
<img src={`/assets/profiles/${user.profilePicture}`} <img src={`/assets/profiles/${user.profilePicture}`}
alt={user.name} className="w-full h-full object-cover"/> alt={user.name} className="w-full h-full object-cover"/>
) : ( ) : (
<span <span
className="text-xs text-[var(--text)]">{user.name.charAt(0)}</span> className="text-xs text-white">{user.name.charAt(0)}</span>
)} )}
</div> </div>
<span <span
className="font-medium text-xs text-[var(--text)]">{user.name}</span> className="font-medium text-xs dreamy-text">{user.name}</span>
</div> </div>
</div> </div>
)} )}
<div className="flex-1 text-center"> <div className="flex-1 text-center">
<h4 className="font-medium text-[var(--accent)] text-xs leading-tight">{dream.title}</h4> <h4 className="font-medium dream-title text-xs leading-tight">{dream.title}</h4>
<p className="text-xs text-[var(--text-muted)] mt-0.5"> <p className="text-xs text-[var(--text-muted)] mt-0.5 opacity-80">
{formatDateSimple(dream.date)} {formatDateSimple(dream.date)}
</p> </p>
</div> </div>

6
src/components/DreamRecord.tsx
View File

@@ -7,7 +7,7 @@ export function DreamRecord() {
return ( return (
<div className={getCardStyle().className} <div className={getCardStyle().className}
style={getCardStyle()}> style={getCardStyle()}>
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-center mb-4">
<h3 className="font-bold dream-title">Neuer Traum</h3> <h3 className="font-bold dream-title">Neuer Traum</h3>
<div className="flex rounded-lg overflow-hidden" style={{border: '1px solid var(--accent-soft)'}}> <div className="flex rounded-lg overflow-hidden" style={{border: '1px solid var(--accent-soft)'}}>
<button <button
@@ -29,7 +29,7 @@ export function DreamRecord() {
{inputMode === 'text' ? ( {inputMode === 'text' ? (
<textarea <textarea
className="w-full p-3 rounded-lg mb-3 transition-all duration-200" className="w-full p-4 rounded-lg mb-4 transition-all duration-200"
rows={4} rows={4}
placeholder="Beschreibe deinen Traum..." placeholder="Beschreibe deinen Traum..."
style={{ style={{
@@ -40,7 +40,7 @@ export function DreamRecord() {
></textarea> ></textarea>
) : ( ) : (
<div <div
className="w-full h-40 rounded-lg mb-3 flex items-center justify-center border-2 border-dashed transition-all duration-200" className="w-full h-40 rounded-lg mb-4 flex items-center justify-center border-2 border-dashed transition-all duration-200"
style={{ style={{
...getBackgroundStyle('normal'), ...getBackgroundStyle('normal'),
borderColor: 'var(--accent-soft)' borderColor: 'var(--accent-soft)'

22
src/components/Navbar.tsx
View File

@@ -1,31 +1,35 @@
import {NavLink} from 'react-router-dom'; import {NavLink} from 'react-router-dom';
import {FaList, FaMicrochip, FaUser} from "react-icons/fa6"; import {FaList, FaMicrochip, FaUser} from "react-icons/fa6";
import {FaArchive, FaHome} from "react-icons/fa"; import {FaGlobeEurope, FaHome} from "react-icons/fa";
import {getBackgroundStyle} from '../styles/StyleUtils';
export default function Navbar() { export default function Navbar() {
return (<> return (<>
<nav <nav
className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-10" className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-10 backdrop-blur-md"
style={{backgroundColor: 'var(--accent-dark)', boxShadow: '0 -2px 10px var(--shadow)'}}> style={{
background: 'var(--accent-gradient)',
boxShadow: '0 -2px 10px var(--shadow)'
}}>
<NavLink to="/home" className="transition-transform hover:scale-110"> <NavLink to="/home" 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 text-white opacity-90 hover:opacity-100"/>
</NavLink> </NavLink>
<NavLink to="/" className="transition-transform hover:scale-110"> <NavLink to="/" className="transition-transform hover:scale-110">
<FaMicrochip className="w-6 h-6 md:w-8 md:h-8" style={{color: 'var(--accent-soft)'}}/> <FaMicrochip className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
</NavLink> </NavLink>
<div className="w-16 md:w-20"></div> <div className="w-16 md:w-20"></div>
<NavLink to="/archive" className="transition-transform hover:scale-110"> <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)'}}/> <FaGlobeEurope className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
</NavLink> </NavLink>
<NavLink to="/profile" className="transition-transform hover:scale-110"> <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 text-white opacity-90 hover:opacity-100"/>
</NavLink> </NavLink>
</nav> </nav>
<NavLink <NavLink
to="/feed" to="/feed"
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" 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 floating"
style={{boxShadow: '0 4px 15px var(--shadow)'}} style={getBackgroundStyle('cta')}
> >
<FaList className="w-8 h-8 md:w-10 md:h-10 text-white"/> <FaList className="w-8 h-8 md:w-10 md:h-10 text-white"/>
</NavLink> </NavLink>

15
src/components/TopBar.tsx
View File

@@ -1,7 +1,7 @@
import {useEffect, useState} from 'react'; import {useEffect, useState} from 'react';
import logotext from "../assets/logotext.svg"; import logotext from "../assets/logotext.svg";
import {NavLink} from "react-router-dom"; import {NavLink} from "react-router-dom";
import {getBackgroundStyle, getTextStyle} from '../styles/StyleUtils'; import {getBackgroundStyle} from '../styles/StyleUtils';
export default function TopBar() { export default function TopBar() {
const [visible, setVisible] = useState(true); const [visible, setVisible] = useState(true);
@@ -71,16 +71,21 @@ export default function TopBar() {
<button <button
onClick={toggleTheme} onClick={toggleTheme}
className="p-2 rounded-full focus:outline-none transition-transform hover:scale-110" className="p-2 rounded-full focus:outline-none transition-transform hover:scale-110 floating"
aria-label="Toggle theme" aria-label="Toggle theme"
style={getBackgroundStyle('card')} style={{
background: 'rgba(255, 255, 255, 0.2)',
backdropFilter: 'blur(10px)',
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.2)',
animationDelay: '0.5s'
}}
> >
{darkMode ? (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 md:h-6 md:w-6" fill="none" {darkMode ? (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 md:h-6 md:w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor" style={getTextStyle('accent')}> viewBox="0 0 24 24" stroke="white">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/> d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>) : (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 md:h-6 md:w-6" fill="none" </svg>) : (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 md:h-6 md:w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor" style={getTextStyle('accent')}> viewBox="0 0 24 24" stroke="white">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/> d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
</svg>)} </svg>)}

20
src/index.css
View File

@@ -13,6 +13,16 @@
--shadow: rgba(166, 77, 255, 0.2); --shadow: rgba(166, 77, 255, 0.2);
--text-shadow: rgba(0, 0, 0, 0.5); --text-shadow: rgba(0, 0, 0, 0.5);
/* Additional dreamy gradients from Overview page */
--purple-gradient: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
--blue-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(79, 70, 229, 0.35));
--violet-gradient: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(124, 58, 237, 0.35));
--emerald-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(20, 184, 166, 0.35));
--amber-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(249, 115, 22, 0.35));
--rose-gradient: linear-gradient(135deg, rgba(244, 63, 94, 0.35), rgba(236, 72, 153, 0.35));
--pink-red-gradient: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(239, 68, 68, 0.3));
--cta-gradient: linear-gradient(135deg, #ec4899, #8b5cf6, #a855f7);
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;
@@ -39,6 +49,16 @@
--accent-dark: #6a0dad; --accent-dark: #6a0dad;
--shadow: rgba(196, 144, 255, 0.3); --shadow: rgba(196, 144, 255, 0.3);
--text-shadow: rgba(255, 255, 255, 0.5); --text-shadow: rgba(255, 255, 255, 0.5);
/* Dark theme dreamy gradients */
--purple-gradient: linear-gradient(135deg, rgba(166, 77, 255, 0.3), rgba(213, 0, 249, 0.3));
--blue-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(79, 70, 229, 0.3));
--violet-gradient: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(124, 58, 237, 0.3));
--emerald-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(20, 184, 166, 0.3));
--amber-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(249, 115, 22, 0.3));
--rose-gradient: linear-gradient(135deg, rgba(244, 63, 94, 0.3), rgba(236, 72, 153, 0.3));
--pink-red-gradient: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(239, 68, 68, 0.25));
--cta-gradient: linear-gradient(135deg, #ec4899, #8b5cf6, #a855f7);
} }
.border-background { .border-background {

39
src/pages/Home.tsx
View File

@@ -7,6 +7,7 @@ import {NavLink} from 'react-router-dom';
import {DreamRecord} from "../components/DreamRecord.tsx"; import {DreamRecord} from "../components/DreamRecord.tsx";
import {DreamCardCompact} from "../components/DreamCardCompact.tsx"; import {DreamCardCompact} from "../components/DreamCardCompact.tsx";
import {DailyHighlights} from "../components/DailyHighlights.tsx"; import {DailyHighlights} from "../components/DailyHighlights.tsx";
import {ChipCard} from "../components/ChipCard.tsx";
export default function Home() { export default function Home() {
const currentUser = MockUserMap.get(4); // Neo Quantum const currentUser = MockUserMap.get(4); // Neo Quantum
@@ -57,8 +58,8 @@ export default function Home() {
{/* Personal Feed */} {/* Personal Feed */}
<NavLink to='/feed' <NavLink to='/feed'
className="block mb-3 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card"> className="block mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card">
<div className="p-3"> <div className="p-4">
<h3 className="font-bold mb-2 dream-title text-base">Deine letzten Träume</h3> <h3 className="font-bold mb-2 dream-title text-base">Deine letzten Träume</h3>
{personalDreams.length > 0 ? ( {personalDreams.length > 0 ? (
<div className="space-y-2"> <div className="space-y-2">
@@ -80,8 +81,8 @@ export default function Home() {
{/* Friends Feed */} {/* Friends Feed */}
<NavLink to='/feed' <NavLink to='/feed'
className="block mb-3 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card"> className="block mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card">
<div className="p-3"> <div className="p-4">
<h3 className="font-bold mb-2 dream-title text-base">Träume von Freunden</h3> <h3 className="font-bold mb-2 dream-title text-base">Träume von Freunden</h3>
<div className="space-y-2"> <div className="space-y-2">
{friendsDreams.map((dream, index) => { {friendsDreams.map((dream, index) => {
@@ -105,34 +106,8 @@ export default function Home() {
<DailyHighlights/> <DailyHighlights/>
</NavLink> </NavLink>
{/* Ad Banner */ {/* Ad Banner */}
} <ChipCard/>
<div
className={getCardStyle(true).className}
style={getBackgroundStyle('gradient')}>
<div className="flex flex-col sm:flex-row items-center">
<div
className="mb-4 sm:mb-0 sm:mr-4 transition-all duration-300 hover:transform hover:rotate-12">
<svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16" fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1}
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</div>
<div>
<h3 className="font-bold text-lg mb-1">ReMind Sensor-Gerät</h3>
<p className="text-sm mb-2">Verbessere deine Traumerfahrung mit unserem Sensor
mit EEG,
Bewegungserkennung und Vitalzeichen-Überwachung.</p>
<div
className="mb-3 inline-block px-2 py-1 text-xs font-bold rounded transition-all duration-300 hover:transform hover:scale-105"
style={{backgroundColor: 'var(--accent-soft)', color: 'var(--text)'}}>
Pro-Funktionen: VR-Räume, Automatische Traumerkennung und Aufzeichnung
</div>
</div>
</div>
</div>
</div> </div>
) )
; ;

56
src/styles/StyleUtils.ts
View File

@@ -56,7 +56,10 @@ export const getTextStyle = (type: 'normal' | 'muted' | 'accent' = 'normal') =>
* @param type - The type of background (normal, card, gradient) * @param type - The type of background (normal, card, gradient)
* @returns Object with style properties * @returns Object with style properties
*/ */
export const getBackgroundStyle = (type: 'normal' | 'card' | 'gradient' | 'accent-gradient' | 'topbar' = 'normal') => { export const getBackgroundStyle = (
type: 'normal' | 'card' | 'gradient' | 'accent-gradient' | 'topbar' |
'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta' = 'normal'
) => {
switch (type) { switch (type) {
case 'card': case 'card':
return {backgroundColor: 'var(--bg)', boxShadow: '0 4px 15px var(--shadow)'}; return {backgroundColor: 'var(--bg)', boxShadow: '0 4px 15px var(--shadow)'};
@@ -75,7 +78,56 @@ export const getBackgroundStyle = (type: 'normal' | 'card' | 'gradient' | 'accen
case 'topbar': case 'topbar':
return { return {
background: 'var(--accent-gradient)', background: 'var(--accent-gradient)',
boxShadow: '0 2px 10px var(--shadow)' boxShadow: '0 2px 10px var(--shadow)',
backdropFilter: 'blur(10px)'
};
case 'purple':
return {
background: 'var(--purple-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2)'
};
case 'blue':
return {
background: 'var(--blue-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(59, 130, 246, 0.2)'
};
case 'violet':
return {
background: 'var(--violet-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(139, 92, 246, 0.2)'
};
case 'emerald':
return {
background: 'var(--emerald-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(16, 185, 129, 0.2)'
};
case 'amber':
return {
background: 'var(--amber-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(245, 158, 11, 0.2)'
};
case 'rose':
return {
background: 'var(--rose-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(244, 63, 94, 0.2)'
};
case 'pink-red':
return {
background: 'var(--pink-red-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(236, 72, 153, 0.2)'
};
case 'cta':
return {
background: 'var(--cta-gradient)',
color: 'white',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(236, 72, 153, 0.3)'
}; };
default: default:
return {backgroundColor: 'var(--bg)'}; return {backgroundColor: 'var(--bg)'};