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

added dark theme support for logo text in Overview and ChipOverview, included new logotext_dark.svg, and implemented a theme observer; updated ChipCard navigation logic for correct routing

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-13 02:41:21 +02:00
parent 36bb04cfa9
commit 95bc368ebb
4 changed files with 97 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/assets/logotext_dark.svg Normal file
View File

@@ -0,0 +1,21 @@
<svg width="400" height="120" viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="#a64dff"/>
<stop offset="100" stop-color="#6a0dad"/>
</linearGradient>
<mask id="moonMask">
<circle cx="60" cy="60" r="50" fill="white"/>
<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="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="black" letter-spacing="2"
style="text-shadow: 0 0 5px rgba(0,0,0,0.3);">
REMind
</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 982 B

2
src/components/ChipCard.tsx
View File

@@ -3,7 +3,7 @@ import {NavLink} from 'react-router-dom';
export const ChipCard: React.FC = () => {
return (
<NavLink to="/"
<NavLink to="/chip"
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"

35
src/pages/ChipOverview.tsx
View File

@@ -15,9 +15,38 @@ import {
FaUsers,
} from 'react-icons/fa';
import {HiSparkles} from 'react-icons/hi';
import {useEffect, useState} from 'react';
import logotext from "../assets/logotext.svg";
import logotext_dark from "../assets/logotext_dark.svg";
export default function ChipOverview() {
const [isDarkTheme, setIsDarkTheme] = useState(false);
useEffect(() => {
// Initialize theme state
const updateThemeState = () => {
const theme = document.documentElement.getAttribute('data-theme');
setIsDarkTheme(theme === 'dark');
};
// Set initial state
updateThemeState();
// Create observer to watch for theme changes
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.attributeName === 'data-theme') {
updateThemeState();
}
});
});
// Start observing
observer.observe(document.documentElement, {attributes: true});
// Cleanup
return () => observer.disconnect();
}, []);
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Floating Background Elements */}
<div className="absolute inset-0 pointer-events-none">
@@ -36,7 +65,11 @@ export default function ChipOverview() {
<div className="text-center mb-12 sm:mb-16 relative z-10">
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
<div className="flex items-center justify-around">
<img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
{isDarkTheme ? (
<img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
) : (
<img src={logotext_dark} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
)}
</div>
<p className="text-lg sm:text-xl dreamy-text">Bahnbrechende Traumtechnologie</p>
</div>

46
src/pages/Overview.tsx
View File

@@ -15,10 +15,39 @@ import {
FaVrCardboard,
} from 'react-icons/fa';
import {HiSparkles} from 'react-icons/hi';
import logotext from "../assets/logotext.svg";
import {NavLink} from 'react-router-dom';
import {useEffect, useState} from 'react';
import logotext from '../assets/logotext.svg'
import logotext_dark from '../assets/logotext_dark.svg'
export default function Overview() {
const [isDarkTheme, setIsDarkTheme] = useState(false);
useEffect(() => {
// Initialize theme state
const updateThemeState = () => {
const theme = document.documentElement.getAttribute('data-theme');
setIsDarkTheme(theme === 'dark');
};
// Set initial state
updateThemeState();
// Create observer to watch for theme changes
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.attributeName === 'data-theme') {
updateThemeState();
}
});
});
// Start observing
observer.observe(document.documentElement, {attributes: true});
// Cleanup
return () => observer.disconnect();
}, []);
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Floating Background Elements */}
<div className="absolute inset-0 pointer-events-none">
@@ -37,7 +66,11 @@ export default function Overview() {
<div className="text-center mb-12 sm:mb-16 relative z-10">
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
<div className="flex items-center justify-around">
<img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
{isDarkTheme ? (
<img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
) : (
<img src={logotext_dark} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
)}
</div>
<p className="text-lg sm:text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</p>
</div>
@@ -55,7 +88,8 @@ export default function Overview() {
</p>
</div>
</div>
{/* Main Features Grid - Dreamy Cards */}
{/* Main Features Grid - Dreamy Cards */
}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
{/* KI-Traumdeutung */}
<div
@@ -166,7 +200,8 @@ export default function Overview() {
</div>
</div>
{/* Dreamy Workflow Section */}
{/* Dreamy Workflow Section */
}
<div
className="dream-container floating mb-16 backdrop-blur-lg bg-gradient-to-br from-pink-500/30 to-red-400/30 dark:from-pink-800/30 dark:to-red-900/30 rounded-xl sm:rounded-2xl md:rounded-3xl p-6 sm:p-8 md:p-12"
style={{animationDelay: '3.2s'}}>
@@ -218,7 +253,8 @@ export default function Overview() {
</div>
</div>
{/* Dreamy CTA Section */}
{/* Dreamy CTA Section */
}
<div className="relative mt-12 sm:mt-16">
<div
className="dreamy-card rounded-xl sm:rounded-2xl p-6 sm:p-8 md:p-12 text-center floating bg-gradient-to-br from-pink-600 via-violet-600 to-purple-600 border-none overflow-hidden"