reworked styles for a more cohesive and dynamic theme
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
@@ -62,19 +62,30 @@ export default function DreamPage() {
|
||||
</div>
|
||||
|
||||
<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="dreamy-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 dreamy-text">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-base sm:text-lg">
|
||||
{dream.input}
|
||||
{(dream.input.inputType === 'text' && dream.input.input)
|
||||
|| (dream.input.inputType === 'audio' && dream.input.transcript)
|
||||
|| (dream.input.inputType === 'image' && dream.input.description)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{dream.ai?.interpretation && dream.ai.interpretation !== '' && (<div
|
||||
className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
|
||||
className="dreamy-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)' }}>KI-Interpretation</span>
|
||||
<span className="font-medium dreamy-text">KI-Interpretation</span>
|
||||
</div>
|
||||
<p className="leading-relaxed">
|
||||
{dream.ai.interpretation}
|
||||
@@ -82,9 +93,9 @@ export default function DreamPage() {
|
||||
</div>)}
|
||||
|
||||
{dream.ai?.image && dream.ai.image !== '' && (<div
|
||||
className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
|
||||
className="dreamy-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)' }}>KI-Bild</span>
|
||||
<span className="font-medium dreamy-text">KI-Bild</span>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<img
|
||||
@@ -97,9 +108,9 @@ export default function DreamPage() {
|
||||
</div>)}
|
||||
|
||||
{dream.ai?.audio && dream.ai.audio !== '' && (<div
|
||||
className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
|
||||
className="dreamy-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)' }}>KI-Audio</span>
|
||||
<span className="font-medium dreamy-text">KI-Audio</span>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<audio
|
||||
@@ -113,9 +124,9 @@ export default function DreamPage() {
|
||||
</div>)}
|
||||
|
||||
{dream.ai?.video && dream.ai.video !== '' && (<div
|
||||
className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
|
||||
className="dreamy-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)' }}>KI-Video</span>
|
||||
<span className="font-medium dreamy-text">KI-Video</span>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<video
|
||||
@@ -129,12 +140,12 @@ export default function DreamPage() {
|
||||
</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="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
|
||||
<h2 className="text-lg font-semibold mb-3 dreamy-text">Details</h2>
|
||||
<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>
|
||||
<span className="capitalize">{dream.input.inputType}</span>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row sm:justify-between">
|
||||
<span className="font-medium mb-1 sm:mb-0">Datum</span>
|
||||
|
||||
@@ -8,13 +8,18 @@ import DreamCard from "../components/DreamCard";
|
||||
export default function Feed() {
|
||||
const sortedDreams = [...mockDreams].sort((a, b) => b.date.getTime() - a.date.getTime());
|
||||
return (
|
||||
<div className="page p-4 space-y-4">
|
||||
<div className="feed-container rounded-lg">
|
||||
<ul className="space-y-6">
|
||||
{sortedDreams.map((dream: Dream) => {
|
||||
<div className="page p-4 space-y-6">
|
||||
<div className="feed-container">
|
||||
<ul className="space-y-6 md:space-y-8">
|
||||
{sortedDreams.map((dream: Dream, index) => {
|
||||
const user: User | undefined = MockUserMap.get(dream.userId);
|
||||
return (
|
||||
<DreamCard key={dream.id} dream={dream} user={user} />
|
||||
<DreamCard
|
||||
key={dream.id}
|
||||
dream={dream}
|
||||
user={user}
|
||||
animationDelay={index}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { MockUsers } from '../data/MockUsers';
|
||||
import {MockUsers} from '../data/MockUsers';
|
||||
|
||||
const ProfilePage: React.FC = () => {
|
||||
// Find Neo Quantum in MockUsers
|
||||
@@ -13,47 +13,89 @@ const ProfilePage: React.FC = () => {
|
||||
|
||||
return (
|
||||
<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">
|
||||
<div
|
||||
className="dreamy-border rounded-xl p-6 max-w-md mx-auto overflow-hidden"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25))',
|
||||
backdropFilter: 'blur(10px)',
|
||||
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2)'
|
||||
}}>
|
||||
{/* Profile Picture */}
|
||||
<div className="w-24 h-24 sm:w-32 sm:h-32 rounded-full overflow-hidden mb-4 border-4 border-accent">
|
||||
<div className="w-28 h-28 sm:w-36 sm:h-36 rounded-full overflow-hidden mb-6 mx-auto relative"
|
||||
style={{
|
||||
background: 'var(--accent-gradient)',
|
||||
padding: '4px',
|
||||
boxShadow: '0 0 15px var(--shadow)'
|
||||
}}>
|
||||
<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}
|
||||
className="w-full h-full object-cover"
|
||||
alt={profileUser ? profileUser.name : defaultName}
|
||||
className="w-full h-full object-cover rounded-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* User Information */}
|
||||
<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>
|
||||
<h2 className="text-xl sm:text-2xl mb-2 break-words dreamy-text font-bold">{profileUser ? profileUser.name : defaultName}</h2>
|
||||
<p className="text-text-muted mb-8 break-words">{profileUser ? profileUser.email : defaultEmail}</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 className="grid grid-cols-2 gap-6 mt-6 text-center">
|
||||
<div
|
||||
className="dreamy-border rounded-lg p-4"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
|
||||
boxShadow: '0 0 15px var(--shadow)',
|
||||
backdropFilter: 'blur(5px)'
|
||||
}}
|
||||
>
|
||||
<p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
|
||||
<p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Dreams</p>
|
||||
</div>
|
||||
<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
|
||||
className="dreamy-border rounded-lg p-4"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
|
||||
boxShadow: '0 0 15px var(--shadow)',
|
||||
backdropFilter: 'blur(5px)'
|
||||
}}
|
||||
>
|
||||
<p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
|
||||
<p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Days Streak</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 sm:mt-8">
|
||||
<h3 className="text-lg font-semibold mb-2">Account Settings</h3>
|
||||
<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 relative inline-block">
|
||||
<input type="checkbox" defaultChecked />
|
||||
<span className="slider"></span>
|
||||
<div className="mt-10">
|
||||
<h3 className="dreamy-text text-lg mb-4 font-bold">Account Settings</h3>
|
||||
<div
|
||||
className="dreamy-border rounded-lg p-5 text-left"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
|
||||
boxShadow: '0 0 15px var(--shadow)',
|
||||
backdropFilter: 'blur(5px)'
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-between items-center py-3 flex-wrap border-b border-purple-100/30">
|
||||
<span className="mr-2 font-medium" style={{color: 'var(--text)'}}>Notifications</span>
|
||||
<label className="relative inline-block w-12 h-6">
|
||||
<input type="checkbox" className="opacity-0 w-0 h-0" defaultChecked/>
|
||||
<span className="absolute cursor-pointer inset-0 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
background: 'var(--accent-gradient)',
|
||||
opacity: '0.9',
|
||||
boxShadow: 'inset 0 0 5px rgba(166, 77, 255, 0.5)'
|
||||
}}></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span>Privacy</span>
|
||||
<label className="theme-toggle relative inline-block">
|
||||
<input type="checkbox" />
|
||||
<span className="slider"></span>
|
||||
<div className="flex justify-between items-center py-3 flex-wrap">
|
||||
<span className="mr-2 font-medium" style={{color: 'var(--text)'}}>Privacy</span>
|
||||
<label className="relative inline-block w-12 h-6">
|
||||
<input type="checkbox" className="opacity-0 w-0 h-0"/>
|
||||
<span className="absolute cursor-pointer inset-0 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
background: 'var(--accent-gradient)',
|
||||
opacity: '0.9',
|
||||
boxShadow: 'inset 0 0 5px rgba(166, 77, 255, 0.5)'
|
||||
}}></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user