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

Compare commits

base: mpuchstein:8403a17636a9c189e886e13fdc98596c6bfc29e8
Branches Tags
mpuchstein:main
...
compare: mpuchstein:bb714e6fa240e9be18a5fe413df80ca5a2042e2a
Branches Tags
mpuchstein:main

2 Commits
8403a17636 ... bb714e6fa2

Author SHA1 Message Date
Matthias Puchstein
bb714e6fa2 refined ProfilePage UI by improving spacing, aligning component structure, and reintroducing project information card for enriched profile context and presentation 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
 2025-07-17 02:45:12 +02:00
Matthias Puchstein
75f516b408 enabled looping for dream videos on DreamPage for seamless playback experience 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
 2025-07-17 02:34:26 +02:00
2 changed files with 93 additions and 44 deletions
Expand all files Collapse all files

2
src/pages/DreamPage.tsx
View File

@@ -183,6 +183,7 @@ export default function DreamPage() {
<div className="flex justify-center px-2">
<video
controls
loop
src={`/assets/dreams/videos/${dream.ai.video}`}
className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
style={{maxHeight: '70vh'}}
@@ -219,6 +220,7 @@ export default function DreamPage() {
<div className="flex justify-center">
<video
controls
loop
src={`/assets/dreams/videos/${dream.ai.video}`}
className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
style={{maxHeight: '70vh'}}

135
src/pages/ProfilePage.tsx
View File

@@ -13,57 +13,60 @@ const ProfilePage: React.FC = () => {
return (
<div className="page p-4 pb-20">
{/* Profile Card */}
<div
className="dreamy-border rounded-xl p-6 max-w-md mx-auto overflow-hidden"
className="dreamy-border rounded-xl p-6 max-w-md mx-auto overflow-hidden mb-10"
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 */}
{/* Profile Picture */}
<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 rounded-full"
/>
</div>
{/* User Information */}
<div className="text-center w-full">
<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-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>
<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 rounded-full"
/>
</div>
<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>
{/* User Information */}
<div className="text-center w-full">
<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-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="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>
{/* Account Settings (moved back into profile card) */}
<div className="mt-10">
<h3 className="dreamy-text text-lg mb-4 font-bold">Account Settings</h3>
<div
@@ -84,8 +87,8 @@ const ProfilePage: React.FC = () => {
opacity: '0.9',
boxShadow: 'inset 0 0 5px rgba(166, 77, 255, 0.5)'
}}></span>
</label>
</div>
</label>
</div>
<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">
@@ -96,14 +99,58 @@ const ProfilePage: React.FC = () => {
opacity: '0.9',
boxShadow: 'inset 0 0 5px rgba(166, 77, 255, 0.5)'
}}></span>
</label>
</div>
</label>
</div>
</div>
</div>
</div>
{/* Project Information Card */}
<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)'
}}>
<h3 className="dreamy-text text-lg mb-4 font-bold text-center">Project Information</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="py-2 border-b border-purple-100/30">
<p className="font-medium mb-1" style={{color: 'var(--text)'}}>Gitea Link:</p>
<a
href="https://gitea.puchstein.bayern/mpuchstein/REMind"
target="_blank"
rel="noopener noreferrer"
className="text-sm break-words hover:underline"
style={{color: 'var(--accent)'}}
>
https://gitea.puchstein.bayern/mpuchstein/REMind
</a>
</div>
<div className="py-2 border-b border-purple-100/30">
<p className="font-medium mb-1" style={{color: 'var(--text)'}}>Gruppenmitglieder:</p>
<p className="text-sm">Kim Anhäuser, Matthias Puchstein, Anya Zell</p>
</div>
<div className="py-2 border-b border-purple-100/30">
<p className="font-medium mb-1" style={{color: 'var(--text)'}}>Modul:</p>
<p className="text-sm">Einführung in die Text und Medienanalyse bei Prof. Dr. Rettiner und Dr. phil.
Ripoll</p>
</div>
<div className="py-2">
<p className="font-medium mb-1" style={{color: 'var(--text)'}}>Genutzte AI:</p>
<p className="text-sm">Perplexity, Junie, Veo, Imgen, Suno</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ProfilePage;
export default ProfilePage;