refined Home layout with new NavLink elements for improved navigation, added animations (fadeIn, gradient-animation), updated SplashScreen background with dynamic gradient, and adjusted text.svg gradient colors for better contrast.
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
@@ -4,8 +4,8 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
|
||||
</style>
|
||||
<linearGradient id="textGradient" x1="25%" y1="0%" x2="75%" y2="100%">
|
||||
<stop offset="0%" stop-color="darkslateblue" />
|
||||
<stop offset="100%" stop-color="indigo" />
|
||||
<stop offset="0%" stop-color="white"/>
|
||||
<stop offset="100%" stop-color="grey"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 719 B After Width: | Height: | Size: 707 B |
@@ -18,7 +18,9 @@ export default function SplashScreen({ onFinished }: SplashScreenProps) {
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 flex flex-col items-center justify-center z-50" style={{
|
||||
background: 'var(--accent-gradient)'
|
||||
background: 'linear-gradient(135deg, #2e0854, #4a0e8f, #6a0dad, #8a2be2)',
|
||||
backgroundSize: '400% 400%',
|
||||
animation: 'gradient-animation 15s ease infinite'
|
||||
}}>
|
||||
<div className="animate-pulse flex flex-col items-center">
|
||||
<img src={logo} alt="REMind Logo" className="h-32 w-32 mb-4" />
|
||||
|
||||
@@ -311,10 +311,38 @@ button:focus-visible {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient-animation {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.floating {
|
||||
animation: dream-float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Custom animations */
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
|
||||
@@ -4,6 +4,7 @@ import {getSortedDreamsByDate} from '../utils/DreamUtils.ts';
|
||||
import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights';
|
||||
import {getBackgroundStyle, getCardStyle, getTextStyle} from '../styles/StyleUtils';
|
||||
import {formatDateFull, formatDateSimple} from '../utils/DateUtils';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
|
||||
export default function Home() {
|
||||
const currentUser = MockUserMap.get(4); // Neo Quantum
|
||||
@@ -35,7 +36,7 @@ export default function Home() {
|
||||
<div
|
||||
className={getCardStyle(true).className}
|
||||
style={getBackgroundStyle('accent-gradient')}>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="mr-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
@@ -43,7 +44,7 @@ export default function Home() {
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-center">
|
||||
<h3 className="font-bold">Traum-Streak: {currentUser?.streakDays} Tage</h3>
|
||||
<p className="text-sm">Beeindruckend! Du hältst deine Traum-Aufzeichnungen konstant bei.</p>
|
||||
</div>
|
||||
@@ -51,75 +52,76 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
{/* Personal Feed */}
|
||||
<div className={getCardStyle().className}
|
||||
style={getCardStyle()}>
|
||||
<h3 className="font-bold mb-3 dream-title">Deine letzten Träume</h3>
|
||||
{personalDreams.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{personalDreams.map((dream, index) => (
|
||||
<div key={dream.id}
|
||||
className="p-3 rounded-lg transition-all duration-300 hover:transform hover:scale-[1.02]"
|
||||
style={{
|
||||
...getBackgroundStyle('card'),
|
||||
animationDelay: `${index * 0.1}s`
|
||||
}}>
|
||||
<h4 className="font-medium" style={getTextStyle('accent')}>{dream.title}</h4>
|
||||
<p className="text-sm" style={getTextStyle('muted')}>
|
||||
{formatDateSimple(dream.date)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm" style={getTextStyle('muted')}>
|
||||
Du hast noch keine Träume aufgezeichnet. Starte jetzt!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<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">
|
||||
<div className="p-3">
|
||||
<h3 className="font-bold mb-2 dream-title text-base">Deine letzten Träume</h3>
|
||||
{personalDreams.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{personalDreams.map((dream, index) => (
|
||||
<NavLink key={dream.id} to={`/dream/${dream.id}`}
|
||||
className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] bg-[var(--bg)] shadow-md backdrop-blur-sm animate-fadeIn rounded-lg mb-2">
|
||||
<div
|
||||
className="p-2"
|
||||
style={{animationDelay: `${index * 0.1}s`}}>
|
||||
<h4 className="font-medium text-[var(--accent)] text-sm">{dream.title}</h4>
|
||||
<p className="text-xs text-[var(--text-muted)]">
|
||||
{formatDateSimple(dream.date)}
|
||||
</p>
|
||||
</div>
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-[var(--text-muted)]">
|
||||
Du hast noch keine Träume aufgezeichnet. Starte jetzt!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</NavLink>
|
||||
|
||||
{/* Friends Feed */}
|
||||
<div className={getCardStyle().className}
|
||||
style={getCardStyle()}>
|
||||
<h3 className="font-bold mb-3 dream-title">Träume von Freunden</h3>
|
||||
<div className="space-y-3">
|
||||
{friendsDreams.map((dream, index) => {
|
||||
const dreamUser = MockUserMap.get(dream.userId);
|
||||
return (
|
||||
<div key={dream.id}
|
||||
className="p-3 rounded-lg transition-all duration-300 hover:transform hover:scale-[1.02]"
|
||||
style={{
|
||||
...getBackgroundStyle('card'),
|
||||
animationDelay: `${index * 0.1}s`
|
||||
}}>
|
||||
<div className="flex items-center mb-1">
|
||||
<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">
|
||||
<div className="p-3">
|
||||
<h3 className="font-bold mb-2 dream-title text-base">Träume von Freunden</h3>
|
||||
<div className="space-y-2">
|
||||
{friendsDreams.map((dream, index) => {
|
||||
const dreamUser = MockUserMap.get(dream.userId);
|
||||
return (
|
||||
<NavLink key={dream.id} to={`/dream/${dream.id}`}
|
||||
className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] bg-[var(--bg)] shadow-md backdrop-blur-sm animate-fadeIn rounded-lg mb-2">
|
||||
<div
|
||||
className="w-6 h-6 rounded-full mr-2 flex items-center justify-center overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: 'var(--accent-soft)',
|
||||
border: '1px solid var(--accent)'
|
||||
}}>
|
||||
{dreamUser?.profilePicture ? (
|
||||
<img src={`/assets/profiles/${dreamUser.profilePicture}`}
|
||||
alt={dreamUser.name} className="w-full h-full object-cover"/>
|
||||
) : (
|
||||
<span className="text-xs"
|
||||
style={getTextStyle()}>{dreamUser?.name.charAt(0)}</span>
|
||||
)}
|
||||
className="p-2"
|
||||
style={{animationDelay: `${index * 0.1}s`}}>
|
||||
<div className="flex items-center mb-1">
|
||||
<div
|
||||
className="w-5 h-5 rounded-full mr-1 flex items-center justify-center overflow-hidden bg-[var(--accent-soft)] border border-[var(--accent)]">
|
||||
{dreamUser?.profilePicture ? (
|
||||
<img src={`/assets/profiles/${dreamUser.profilePicture}`}
|
||||
alt={dreamUser.name} className="w-full h-full object-cover"/>
|
||||
) : (
|
||||
<span
|
||||
className="text-xs text-[var(--text)]">{dreamUser?.name.charAt(0)}</span>
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className="font-medium text-xs text-[var(--text)]">{dreamUser?.name}</span>
|
||||
</div>
|
||||
<h4 className="font-medium text-[var(--accent)] text-sm">{dream.title}</h4>
|
||||
<p className="text-xs text-[var(--text-muted)]">
|
||||
{formatDateSimple(dream.date)}
|
||||
</p>
|
||||
</div>
|
||||
<span className="font-medium text-sm"
|
||||
style={getTextStyle()}>{dreamUser?.name}</span>
|
||||
</div>
|
||||
<h4 className="font-medium" style={getTextStyle('accent')}>{dream.title}</h4>
|
||||
<p className="text-sm" style={getTextStyle('muted')}>
|
||||
{formatDateSimple(dream.date)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</NavLink>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NavLink>
|
||||
|
||||
{/* Daily Highlights */}
|
||||
{/* Daily Highlights */
|
||||
}
|
||||
<div className={getCardStyle().className}
|
||||
style={getCardStyle()}>
|
||||
<h3 className="font-bold mb-3 dream-title">Tägliche Highlights</h3>
|
||||
@@ -127,13 +129,15 @@ export default function Home() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-3 rounded-lg"
|
||||
style={getBackgroundStyle('card')}>
|
||||
<h4 className="font-medium mb-2" style={getTextStyle('accent')}>Top Traumthemen</h4>
|
||||
<h4 className="font-medium mb-2" style={getTextStyle('accent')}>Top
|
||||
Traumthemen</h4>
|
||||
<ul className="list-disc pl-5 mb-4">
|
||||
{topDreamTopics.map((topic, index) => (
|
||||
<li key={index}
|
||||
className="text-sm mb-1 transition-all duration-300 hover:transform hover:translate-x-1"
|
||||
style={getTextStyle()}>
|
||||
<span style={{color: 'var(--accent-soft)'}}>{topic.label}:</span> {topic.percentage}%
|
||||
<span
|
||||
style={{color: 'var(--accent-soft)'}}>{topic.label}:</span> {topic.percentage}%
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -141,13 +145,15 @@ export default function Home() {
|
||||
|
||||
<div className="p-3 rounded-lg"
|
||||
style={getBackgroundStyle('card')}>
|
||||
<h4 className="font-medium mb-2" style={getTextStyle('accent')}>Stimmungskategorien</h4>
|
||||
<h4 className="font-medium mb-2"
|
||||
style={getTextStyle('accent')}>Stimmungskategorien</h4>
|
||||
<ul className="list-disc pl-5">
|
||||
{primaryMoodCategories.map((mood, index) => (
|
||||
<li key={index}
|
||||
className="text-sm mb-1 transition-all duration-300 hover:transform hover:translate-x-1"
|
||||
style={getTextStyle()}>
|
||||
<span style={{color: 'var(--accent-soft)'}}>{mood.label}:</span> {mood.percentage}%
|
||||
<span
|
||||
style={{color: 'var(--accent-soft)'}}>{mood.label}:</span> {mood.percentage}%
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -155,13 +161,16 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ad Banner */}
|
||||
{/* Ad Banner */
|
||||
}
|
||||
<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"
|
||||
<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"/>
|
||||
@@ -169,7 +178,8 @@ export default function Home() {
|
||||
</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,
|
||||
<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"
|
||||
@@ -180,5 +190,6 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user