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

reworked styles for a more cohesive and dynamic theme

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-09 22:17:03 +02:00
parent 5ad3894683
commit 97ebb62239
7 changed files with 283 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/App.css
View File

@@ -38,16 +38,18 @@
.card {
padding: 1.5em;
background-color: var(--card);
background: linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25));
border-radius: 12px;
box-shadow: 0 4px 12px var(--shadow);
box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2);
margin-bottom: 1rem;
transition: transform 0.2s, box-shadow 0.2s;
transition: transform 0.3s, box-shadow 0.3s;
backdrop-filter: blur(10px);
border: none;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px var(--shadow);
transform: translateY(-5px);
box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
}
/* Responsive adjustments */
@@ -67,10 +69,11 @@
.dreamy-border {
border: 2px solid transparent;
background:
linear-gradient(var(--bg), var(--bg)) padding-box,
background: linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25)) padding-box,
var(--accent-gradient) border-box;
border-radius: 12px;
box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2);
backdrop-filter: blur(10px);
}
.dreamy-button {
@@ -80,11 +83,14 @@
padding: 0.6em 1.2em;
border-radius: 8px;
font-weight: 500;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 12px var(--shadow);
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
opacity: 0.9;
}
.dreamy-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px var(--shadow);
transform: translateY(-5px);
box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(255, 255, 255, 0.3);
opacity: 1;
}

4
src/assets/logotext.svg
View File

@@ -6,13 +6,13 @@
</linearGradient>
<mask id="moonMask">
<circle cx="60" cy="60" r="50" fill="white" />
<circle cx="70" cy="50" r="45" fill="black"/>
<circle cx="75" cy="40" r="45" fill="black"/>
</mask>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&amp;display=swap');
</style>
</defs>
<circle cx="60" cy="50%" r="50" fill="url(#moonGradient)" mask="url(#moonMask)" />
<circle cx="60" cy="60" r="60" 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="white" letter-spacing="2"
style="text-shadow: 0 0 5px rgba(0,0,0,0.3);">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 988 B

After

Width:  |  Height:  |  Size: 986 B

62
src/components/DreamCard.tsx
View File

@@ -2,38 +2,62 @@
import Dream from '../types/Dream';
import type User from "../types/User.ts";
import {NavLink} from "react-router-dom";
import {useEffect, useState} from "react";
interface DreamCardProps {
dream: Dream;
user: User | undefined;
animationDelay?: number;
}
export default function DreamCard({dream, user}: DreamCardProps) {
export default function DreamCard({dream, user, animationDelay = 0}: DreamCardProps) {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const timer = setTimeout(() => {
setIsVisible(true);
}, animationDelay * 100);
return () => clearTimeout(timer);
}, [animationDelay]);
return (<NavLink key={dream.id} to={`/dream/${dream.id}`}>
<li className="dream-card mb-4">
<div className="flex rounded items-center mb-2">
<img
src={`/assets/profiles/${user?.profilePicture}`}
alt={user?.name}
className="w-10 h-10 rounded-full"
/>
<span className="ml-4 font-semibold">{user?.name} hat geträumt:</span>
<li className={`dream-card card 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">
<div className="relative">
<img
src={`/assets/profiles/${user?.profilePicture}`}
alt={user?.name}
className="w-12 h-12 rounded-full border-2 border-accent-soft"
style={{borderColor: 'var(--accent-soft)'}}
/>
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-accent rounded-full"
style={{backgroundColor: 'var(--accent)'}}></div>
</div>
<span className="ml-4 font-semibold text-left">{user?.name} <span className="text-text-muted">hat geträumt:</span></span>
</div>
<h2 className="title">
<h2 className="title text-left dreamy-text text-lg">
{dream.title}
</h2>
<p className="mt-2 line-clamp-2">
<p className="mt-2 line-clamp-2 text-left">
{(dream.input.inputType === 'text' && dream.input.input)
|| (dream.input.inputType === 'audio' && dream.input.transcript)
|| (dream.input.inputType === 'image' && dream.input.description)}
</p>
<p
className="timestamp mt-2">
{dream.date.toLocaleDateString('de-DE', {
day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
})}
</p>
<div className="flex justify-between items-center mt-3">
<p className="timestamp text-left">
{dream.date.toLocaleDateString('de-DE', {
day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
})}
</p>
<div className="flex space-x-2">
{/* Display dream type as a tag */}
<span className="px-2 py-1 text-xs rounded-full bg-accent-soft text-text"
style={{backgroundColor: 'var(--accent-soft)', color: 'var(--text)'}}>
{dream.input.inputType}
</span>
</div>
</div>
</li>
</NavLink>)
}
}

129
src/index.css
View File

@@ -11,6 +11,7 @@
--accent-soft: #c9a4ff;
--accent-dark: #6a0dad;
--shadow: rgba(166, 77, 255, 0.2);
--text-shadow: rgba(0, 0, 0, 0.5);
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
@@ -37,6 +38,7 @@
--accent-soft: #a64dff;
--accent-dark: #6a0dad;
--shadow: rgba(196, 144, 255, 0.3);
--text-shadow: rgba(255, 255, 255, 0.5);
}
.border-background {
@@ -47,6 +49,21 @@
background-color: var(--bg);
color: var(--text);
transition: background-color 0.3s, color 0.3s;
position: relative;
}
.page::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(var(--accent-soft) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.05;
pointer-events: none;
z-index: 0;
}
.pageTitle {
@@ -56,11 +73,13 @@
}
.dreamPanel {
background-color: var(--card);
background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
border-radius: 10px;
padding: 1em;
color: var(--text);
border: 1px solid var(--accent);
backdrop-filter: blur(5px);
box-shadow: 0 0 15px var(--shadow);
border: none;
}
a {
@@ -110,27 +129,58 @@ button:focus-visible {
}
.feed-container {
background-color: var(--container);
padding: 1em;
padding: 1.5em;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: none;
border-radius: 16px;
}
.dream-card {
background-color: var(--card);
border-radius: 10px;
padding: 1em;
background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
border-radius: 12px;
padding: 1.25em;
color: var(--text);
border: 1px solid var(--accent);
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3);
position: relative;
transition: all 0.3s ease;
border: none;
}
.dream-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: -1px;
border-radius: inherit;
background: var(--accent-gradient);
opacity: 0.1;
}
.dream-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
}
.dream-card .title {
color: var(--accent);
font-weight: bold;
font-size: 1.25em;
margin-bottom: 0.5em;
line-height: 1.3;
}
.dream-card .timestamp {
color: var(--text-muted);
font-size: 0.85em;
font-weight: 500;
}
.microphone-button {
@@ -189,20 +239,23 @@ button:focus-visible {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.5rem;
text-shadow: 0 1px 2px var(--text-shadow);
}
.dream-container {
background-color: var(--container);
background: linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25));
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 15px var(--shadow);
box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2);
backdrop-filter: blur(10px);
transition: transform 0.3s, box-shadow 0.3s;
border: none;
}
.dream-container:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px var(--shadow);
box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
}
/* Scrollbar styling */
@@ -223,6 +276,23 @@ button:focus-visible {
background: var(--accent);
}
/* Dreamy Card Styling */
.dreamy-card {
background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
border-radius: 12px;
padding: 1.25em;
color: var(--text);
backdrop-filter: blur(5px);
box-shadow: 0 0 15px var(--shadow);
transition: all 0.3s ease;
border: none;
}
.dreamy-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3);
}
/* Animations */
@keyframes dream-float {
0% {
@@ -240,7 +310,7 @@ button:focus-visible {
animation: dream-float 6s ease-in-out infinite;
}
/* Responsive typography */
/* Responsive adjustments */
@media (max-width: 768px) {
h1 {
font-size: 2.5em;
@@ -251,4 +321,39 @@ button:focus-visible {
p {
font-size: 0.95em;
}
.feed-container {
padding: 1.2em;
}
.dream-card {
padding: 1em;
}
.dream-card .title {
font-size: 1.1em;
}
}
@media (max-width: 480px) {
.page {
padding: 0.75rem !important;
}
.feed-container {
padding: 1em 0.75em;
}
.dream-card {
padding: 0.9em;
}
.dream-card .title {
font-size: 1em;
}
.dream-card img {
width: 2.5rem !important;
height: 2.5rem !important;
}
}

39
src/pages/DreamPage.tsx
View File

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

15
src/pages/Feed.tsx
View File

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

96
src/pages/ProfilePage.tsx
View File

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