restructured DreamArchive by introducing detailed subroutes and dedicated pages (WorldwideEvents, CulturalLandscapes, etc.), added ScrollToTop for improved UX, and removed deprecated Archive component.
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
89
src/App.tsx
89
src/App.tsx
@@ -4,84 +4,20 @@ import Navbar from './components/Navbar';
|
||||
import TopBar from './components/TopBar';
|
||||
import SplashScreen from './components/SplashScreen';
|
||||
import {BrowserRouter, Route, Routes, useLocation} from 'react-router-dom';
|
||||
import {formatDateSimple} from './utils/DateUtils';
|
||||
import Feed from "./pages/Feed.tsx";
|
||||
import DreamPage from "./pages/DreamPage.tsx";
|
||||
import ProfilePage from "./pages/ProfilePage.tsx";
|
||||
import Home from "./pages/Home.tsx";
|
||||
import Overview from "./pages/Overview.tsx";
|
||||
import ChipOverview from "./pages/ChipOverview.tsx";
|
||||
|
||||
function Archive() {
|
||||
return (
|
||||
<div className="p-4">
|
||||
<h1 className="dreamy-text text-3xl md:text-4xl mb-6">Dream Archive</h1>
|
||||
|
||||
<div className="mb-6 flex flex-col sm:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search dreams..."
|
||||
className="w-full p-3 rounded-lg focus:outline-none"
|
||||
style={{
|
||||
backgroundColor: 'var(--container)',
|
||||
color: 'var(--text)',
|
||||
borderColor: 'var(--accent-soft)',
|
||||
boxShadow: '0 2px 8px var(--shadow)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
className="w-full p-3 rounded-lg focus:outline-none"
|
||||
style={{
|
||||
backgroundColor: 'var(--container)',
|
||||
color: 'var(--text)',
|
||||
borderColor: 'var(--accent-soft)',
|
||||
boxShadow: '0 2px 8px var(--shadow)'
|
||||
}}
|
||||
>
|
||||
<option>All Dreams</option>
|
||||
<option>Last Week</option>
|
||||
<option>Last Month</option>
|
||||
<option>Last Year</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((item) => (
|
||||
<div key={item} className="card">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className="text-xl font-bold" style={{ color: 'var(--accent)' }}>
|
||||
Dream #{item}
|
||||
</h3>
|
||||
<span style={{ color: 'var(--text-muted)' }}>
|
||||
{formatDateSimple(new Date())}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mb-4">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Vivamus lacinia, nunc eu tincidunt faucibus...
|
||||
</p>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
className="px-4 py-2 rounded-lg transition-transform hover:scale-105"
|
||||
style={{
|
||||
background: 'var(--accent-gradient)',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
import DreamArchiveIndex from "./pages/dreamarchive/DreamArchiveIndex.tsx";
|
||||
import WorldwideEvents from "./pages/dreamarchive/WorldwideEvents.tsx";
|
||||
import CulturalLandscapes from "./pages/dreamarchive/CulturalLandscapes.tsx";
|
||||
import LivingConditions from "./pages/dreamarchive/LivingConditions.tsx";
|
||||
import Technology from "./pages/dreamarchive/Technology.tsx";
|
||||
import UserDreams from "./pages/dreamarchive/UserDreams.tsx";
|
||||
import ResearchLive from "./pages/dreamarchive/ResearchLive.tsx";
|
||||
import ScrollToTop from "./components/ScrollToTop.tsx";
|
||||
|
||||
export default function App() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
@@ -97,6 +33,7 @@ export default function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<BrowserRouter>
|
||||
<ScrollToTop/>
|
||||
<AppContent/>
|
||||
</BrowserRouter>
|
||||
</div>
|
||||
@@ -119,7 +56,13 @@ function AppContent() {
|
||||
<Route path="/home" element={<Home/>}/>
|
||||
<Route path="/feed" element={<Feed/>}/>
|
||||
<Route path="/chip" element={<ChipOverview/>}/>
|
||||
<Route path="/archive" element={<Archive/>}/>
|
||||
<Route path="/dreamarchive" element={<DreamArchiveIndex/>}/>
|
||||
<Route path="/dreamarchive/worldwide-events" element={<WorldwideEvents/>}/>
|
||||
<Route path="/dreamarchive/cultural-landscapes" element={<CulturalLandscapes/>}/>
|
||||
<Route path="/dreamarchive/living-conditions" element={<LivingConditions/>}/>
|
||||
<Route path="/dreamarchive/technology" element={<Technology/>}/>
|
||||
<Route path="/dreamarchive/user-dreams" element={<UserDreams/>}/>
|
||||
<Route path="/dreamarchive/research-live" element={<ResearchLive/>}/>
|
||||
<Route path="/profile" element={<ProfilePage/>}/>
|
||||
<Route path="/dream/:id" element={<DreamPage/>}/>
|
||||
</Routes>
|
||||
|
||||
@@ -6,7 +6,7 @@ import {getBackgroundStyle} from '../styles/StyleUtils';
|
||||
export default function Navbar() {
|
||||
return (<>
|
||||
<nav
|
||||
className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-10 backdrop-blur-md"
|
||||
className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-50 backdrop-blur-md"
|
||||
style={{
|
||||
background: 'var(--accent-gradient)',
|
||||
boxShadow: '0 -2px 10px var(--shadow)'
|
||||
@@ -18,7 +18,7 @@ export default function Navbar() {
|
||||
<FaMicrochip className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
|
||||
</NavLink>
|
||||
<div className="w-16 md:w-20"></div>
|
||||
<NavLink to="/archive" className="transition-transform hover:scale-110">
|
||||
<NavLink to="/dreamarchive" className="transition-transform hover:scale-110">
|
||||
<FaGlobeEurope className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
|
||||
</NavLink>
|
||||
<NavLink to="/profile" className="transition-transform hover:scale-110">
|
||||
@@ -28,7 +28,7 @@ export default function Navbar() {
|
||||
|
||||
<NavLink
|
||||
to="/feed"
|
||||
className="microphone-button fixed bottom-6 left-1/2 transform -translate-x-1/2 p-4 md:p-5 rounded-full z-20 transition-transform hover:scale-110 floating"
|
||||
className="microphone-button fixed bottom-6 left-1/2 transform -translate-x-1/2 p-4 md:p-5 rounded-full z-60 transition-transform hover:scale-110 floating"
|
||||
style={getBackgroundStyle('cta')}
|
||||
>
|
||||
<FaList className="w-8 h-8 md:w-10 md:h-10 text-white"/>
|
||||
|
||||
15
src/components/ScrollToTop.tsx
Normal file
15
src/components/ScrollToTop.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
// src/components/ScrollToTop.tsx
|
||||
import {useEffect} from 'react';
|
||||
import {useLocation} from 'react-router-dom';
|
||||
|
||||
const ScrollToTop: React.FC = () => {
|
||||
const {pathname} = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [pathname]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default ScrollToTop;
|
||||
306
src/pages/dreamarchive/CulturalLandscapes.tsx
Normal file
306
src/pages/dreamarchive/CulturalLandscapes.tsx
Normal file
@@ -0,0 +1,306 @@
|
||||
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||
import {FaGlobeAfrica, FaGlobeAsia, FaGlobeEurope, FaHandshake} from 'react-icons/fa';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
|
||||
export default function CulturalLandscapes() {
|
||||
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<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">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Kulturelle
|
||||
Traumlandschaften</h1>
|
||||
<p className="text-lg sm:text-xl dreamy-text">Traumcharakteristika verschiedener Kulturen und
|
||||
Gesellschaften</p>
|
||||
</div>
|
||||
<div
|
||||
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||
style={{animationDelay: '0.2s'}}>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||
<h2 className="dream-title text-xl sm:text-2xl">Kulturelle Unterschiede im Traumerleben</h2>
|
||||
</div>
|
||||
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||
Entdecke, wie kulturelle Hintergründe und gesellschaftliche Strukturen die Traumthemen,
|
||||
-emotionen und -narrative beeinflussen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Research Highlight */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Forschung von David Samson (University of
|
||||
Toronto)</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* BaYaka */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('violet')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-violet-500/20 rounded-full">
|
||||
<FaGlobeAfrica className="text-violet-600 dark:text-violet-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">BaYaka</h3>
|
||||
<p className="text-sm mb-2 text-center">(Demokratische Republik Kongo)</p>
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2">Traumstruktur</h4>
|
||||
<p className="text-sm">Träume beginnen mit Bedrohungen, enden mit Gemeinschaftsrettung</p>
|
||||
</div>
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Die BaYaka-Gemeinschaft zeigt ein einzigartiges Muster: Ihre Träume beginnen oft mit
|
||||
persönlichen Bedrohungen, entwickeln sich aber zu Szenarien, in denen die Gemeinschaft
|
||||
zusammenkommt, um das Problem zu lösen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Hadza */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('amber')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-amber-500/20 rounded-full">
|
||||
<FaHandshake className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">Hadza</h3>
|
||||
<p className="text-sm mb-2 text-center">(Tansania)</p>
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2">Traumstruktur</h4>
|
||||
<p className="text-sm">Starke soziale Bindungen reflektieren sich in kooperativen
|
||||
Traumlösungen</p>
|
||||
</div>
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Die Hadza-Gemeinschaft, bekannt für ihre egalitäre Sozialstruktur, zeigt in ihren Träumen
|
||||
häufig Szenarien, in denen Probleme durch Zusammenarbeit und gegenseitige Unterstützung
|
||||
gelöst werden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Western Societies */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('blue')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-blue-500/20 rounded-full">
|
||||
<FaGlobeEurope className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">Westliche Gesellschaften</h3>
|
||||
<p className="text-sm mb-2 text-center">(Europa & Nordamerika)</p>
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2">Traumstruktur</h4>
|
||||
<p className="text-sm">Fokus auf individuellen Stress, weniger soziale Unterstützung</p>
|
||||
</div>
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Im Gegensatz zu indigenen Gemeinschaften zeigen Träume in westlichen Gesellschaften oft
|
||||
einen Fokus auf individuelle Probleme und Lösungen, mit weniger Betonung auf
|
||||
gemeinschaftlicher Unterstützung.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Regional Dream Characteristics */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Regionale Traumcharakteristika</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
{/* Northern Europe */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('blue')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-4 bg-blue-500/20 rounded-full mr-4">
|
||||
<FaGlobeEurope className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold dreamy-text">Nordeuropa</h3>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
|
||||
style={{width: '67%'}}></div>
|
||||
<div
|
||||
className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
|
||||
67% Träume über Isolation und Dunkelheit
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs mt-1 text-right" style={getTextStyle('muted')}>Saisonale Effekte
|
||||
deutlich erkennbar</p>
|
||||
</div>
|
||||
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
In nordeuropäischen Ländern zeigt sich ein deutlicher Einfluss der langen, dunklen Winter
|
||||
auf die Traumthemen. Isolation und Dunkelheit dominieren, besonders während der
|
||||
Wintermonate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Mediterranean */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('amber')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-4 bg-amber-500/20 rounded-full mr-4">
|
||||
<FaGlobeEurope className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold dreamy-text">Mittelmeerraum</h3>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<div
|
||||
className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-amber-500 dark:bg-amber-600 rounded-full"
|
||||
style={{width: '58%'}}></div>
|
||||
<div
|
||||
className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
|
||||
58% Soziale Träume
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-amber-500 dark:bg-amber-600 rounded-full"
|
||||
style={{width: '42%'}}></div>
|
||||
<div
|
||||
className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
|
||||
42% Familienthemen
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Im Mittelmeerraum spiegeln Träume die starke soziale und familiäre Orientierung der Kultur
|
||||
wider. Gemeinschaftliche Aktivitäten und Familientreffen sind häufige Traumthemen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* East Asia */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('emerald')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-4 bg-emerald-500/20 rounded-full mr-4">
|
||||
<FaGlobeAsia className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold dreamy-text">Ostasien</h3>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-emerald-500 dark:bg-emerald-600 rounded-full"
|
||||
style={{width: '71%'}}></div>
|
||||
<div
|
||||
className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
|
||||
71% Träume über Leistung und gesellschaftliche Erwartungen
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
In ostasiatischen Kulturen reflektieren Träume häufig den gesellschaftlichen Druck und
|
||||
Leistungserwartungen. Prüfungssituationen, beruflicher Erfolg und soziale Anerkennung sind
|
||||
wiederkehrende Themen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Sub-Saharan Africa */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('purple')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-4 bg-purple-500/20 rounded-full mr-4">
|
||||
<FaGlobeAfrica className="text-purple-600 dark:text-purple-400" size={28}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold dreamy-text">Afrika (Subsahara)</h3>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||
style={{width: '84%'}}></div>
|
||||
<div
|
||||
className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
|
||||
84% Träume mit Gemeinschaftsunterstützung
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
In vielen subsaharischen Kulturen zeigen Träume eine starke Betonung von Gemeinschaft und
|
||||
gegenseitiger Unterstützung. Traumlösungen beinhalten fast immer die Hilfe von
|
||||
Familienmitgliedern oder der Gemeinschaft.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cultural Comparison */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Kultureller Vergleich: Traumthemen</h2>
|
||||
|
||||
<div className="dreamy-card rounded-xl p-6" style={getBackgroundStyle('rose')}>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-left p-2">Traumthema</th>
|
||||
<th className="text-center p-2">Westliche Gesellschaften</th>
|
||||
<th className="text-center p-2">Ostasien</th>
|
||||
<th className="text-center p-2">Indigene Gemeinschaften</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="bg-white/10 dark:bg-black/10">
|
||||
<td className="p-2 font-bold">Angstträume</td>
|
||||
<td className="text-center p-2">Persönliches Versagen, Verlust</td>
|
||||
<td className="text-center p-2">Soziale Ablehnung, Scham</td>
|
||||
<td className="text-center p-2">Naturgefahren, Ressourcenmangel</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="p-2 font-bold">Soziale Träume</td>
|
||||
<td className="text-center p-2">Fokus auf enge Freunde, Partner</td>
|
||||
<td className="text-center p-2">Familiäre Hierarchie, Respekt</td>
|
||||
<td className="text-center p-2">Gesamte Gemeinschaft, Ahnen</td>
|
||||
</tr>
|
||||
<tr className="bg-white/10 dark:bg-black/10">
|
||||
<td className="p-2 font-bold">Erfolgsträume</td>
|
||||
<td className="text-center p-2">Individuelle Leistung, Anerkennung</td>
|
||||
<td className="text-center p-2">Familienstolz, Gruppenleistung</td>
|
||||
<td className="text-center p-2">Gemeinschaftlicher Erfolg, Teilen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="p-2 font-bold">Spirituelle Träume</td>
|
||||
<td className="text-center p-2">Selten, abstrakt</td>
|
||||
<td className="text-center p-2">Ahnenverehrung, Harmonie</td>
|
||||
<td className="text-center p-2">Häufig, konkrete Führung</td>
|
||||
</tr>
|
||||
<tr className="bg-white/10 dark:bg-black/10">
|
||||
<td className="p-2 font-bold">Problemlösung</td>
|
||||
<td className="text-center p-2">Individuell, technologisch</td>
|
||||
<td className="text-center p-2">Hierarchisch, kollektiv</td>
|
||||
<td className="text-center p-2">Gemeinschaftlich, naturbezogen</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p className="text-sm mt-4" style={getTextStyle('normal')}>
|
||||
Diese Tabelle zeigt die kulturellen Unterschiede in der Ausprägung verschiedener Traumthemen.
|
||||
Während westliche Gesellschaften einen stärkeren Fokus auf individuelle Aspekte legen, betonen
|
||||
ostasiatische und indigene Kulturen stärker gemeinschaftliche und kollektive Elemente.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="flex flex-wrap justify-between items-center">
|
||||
<NavLink to="/dreamarchive/worldwide-events"
|
||||
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
|
||||
style={getBackgroundStyle('blue')}>
|
||||
<span className="mr-2">←</span> Zurück zu Weltweiten Ereignissen
|
||||
</NavLink>
|
||||
<NavLink to="/dreamarchive/living-conditions"
|
||||
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
|
||||
style={getBackgroundStyle('emerald')}>
|
||||
Weiter zu Lebensbedingungen & Traumqualität <span className="ml-2">→</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
145
src/pages/dreamarchive/DreamArchiveIndex.tsx
Normal file
145
src/pages/dreamarchive/DreamArchiveIndex.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import {NavLink} from 'react-router-dom';
|
||||
import {FaFlask, FaGlobeEurope, FaHome, FaMicrochip, FaUser, FaUsers} from 'react-icons/fa';
|
||||
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||
|
||||
export default function DreamArchiveIndex() {
|
||||
return (
|
||||
<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<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">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Dream Archive</h1>
|
||||
<p className="text-lg sm:text-xl dreamy-text">Globale Traumforschung und Datenvisualisierung</p>
|
||||
</div>
|
||||
<div
|
||||
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||
style={{animationDelay: '0.2s'}}>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||
<h2 className="dream-title text-xl sm:text-2xl">Entdecke die Welt der Träume</h2>
|
||||
</div>
|
||||
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||
Erkunde die Zusammenhänge zwischen weltweiten Ereignissen und Traummustern, kulturelle
|
||||
Unterschiede und technologische Fortschritte in der Traumforschung.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Archive Pages Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||||
{/* Worldwide Events */}
|
||||
<NavLink to="/dreamarchive/worldwide-events" className="no-underline h-full">
|
||||
<div
|
||||
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||
style={{...getBackgroundStyle('purple'), animationDelay: '0.5s'}}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-purple-500/20 rounded-full">
|
||||
<FaGlobeEurope className="text-purple-600 dark:text-purple-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||
Weltweite Ereignisse
|
||||
</h3>
|
||||
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Erforsche die Korrelation zwischen globalen Ereignissen und Traumreaktionen
|
||||
</p>
|
||||
</div>
|
||||
</NavLink>
|
||||
|
||||
{/* Cultural Landscapes */}
|
||||
<NavLink to="/dreamarchive/cultural-landscapes" className="no-underline h-full">
|
||||
<div
|
||||
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||
style={{...getBackgroundStyle('blue'), animationDelay: '0.6s'}}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-blue-500/20 rounded-full">
|
||||
<FaUsers className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||
Kulturelle Traumlandschaften
|
||||
</h3>
|
||||
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Vergleiche Traumcharakteristika verschiedener Kulturen und Regionen
|
||||
</p>
|
||||
</div>
|
||||
</NavLink>
|
||||
|
||||
{/* Living Conditions */}
|
||||
<NavLink to="/dreamarchive/living-conditions" className="no-underline h-full">
|
||||
<div
|
||||
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||
style={{...getBackgroundStyle('emerald'), animationDelay: '0.7s'}}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-emerald-500/20 rounded-full">
|
||||
<FaHome className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||
Lebensbedingungen & Traumqualität
|
||||
</h3>
|
||||
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Entdecke wie sozioökonomische und Umweltfaktoren Träume beeinflussen
|
||||
</p>
|
||||
</div>
|
||||
</NavLink>
|
||||
|
||||
{/* Technology */}
|
||||
<NavLink to="/dreamarchive/technology" className="no-underline h-full">
|
||||
<div
|
||||
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||
style={{...getBackgroundStyle('amber'), animationDelay: '0.8s'}}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-amber-500/20 rounded-full">
|
||||
<FaMicrochip className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||
Technologie & Traumforschung
|
||||
</h3>
|
||||
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Erfahre mehr über neueste Entwicklungen in der Traumforschungstechnologie
|
||||
</p>
|
||||
</div>
|
||||
</NavLink>
|
||||
|
||||
{/* User Dreams */}
|
||||
<NavLink to="/dreamarchive/user-dreams" className="no-underline h-full">
|
||||
<div
|
||||
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||
style={{...getBackgroundStyle('rose'), animationDelay: '0.9s'}}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-rose-500/20 rounded-full">
|
||||
<FaUser className="text-rose-600 dark:text-rose-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||
Deine Träume im Kontext
|
||||
</h3>
|
||||
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Sieh wie deine Träume im Vergleich zur globalen Traumdatenbank stehen
|
||||
</p>
|
||||
</div>
|
||||
</NavLink>
|
||||
|
||||
{/* Research Live */}
|
||||
<NavLink to="/dreamarchive/research-live" className="no-underline h-full">
|
||||
<div
|
||||
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||
style={{...getBackgroundStyle('violet'), animationDelay: '1.0s'}}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-violet-500/20 rounded-full">
|
||||
<FaFlask className="text-violet-600 dark:text-violet-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||
Traumforschung Live
|
||||
</h3>
|
||||
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Aktuelle Studien, Citizen Science und Interviews mit Forschern
|
||||
</p>
|
||||
</div>
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
366
src/pages/dreamarchive/LivingConditions.tsx
Normal file
366
src/pages/dreamarchive/LivingConditions.tsx
Normal file
@@ -0,0 +1,366 @@
|
||||
import {getBackgroundStyle} from '../../styles/StyleUtils';
|
||||
import {FaCity, FaGraduationCap, FaLightbulb, FaMoneyBillWave, FaSmog, FaVolumeUp} from 'react-icons/fa';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
|
||||
export default function LivingConditions() {
|
||||
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<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">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Lebensbedingungen &
|
||||
Traumqualität</h1>
|
||||
<p className="text-lg sm:text-xl dreamy-text">Der Einfluss von Umgebung und Lebensumständen auf
|
||||
unsere Träume</p>
|
||||
</div>
|
||||
<div
|
||||
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||
style={{animationDelay: '0.2s'}}>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||
<h2 className="dream-title text-xl sm:text-2xl">Wie unsere Umgebung unsere Träume formt</h2>
|
||||
</div>
|
||||
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||
Entdecke, wie sozioökonomische Faktoren und Umweltbedingungen die Qualität, Intensität und
|
||||
Inhalte unserer Träume beeinflussen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Socioeconomic Factors */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Sozioökonomische Faktoren</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Urban vs Rural */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-3 bg-blue-500/20 rounded-full">
|
||||
<FaCity className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Urbane vs. Rurale Träume</h3>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-sm font-bold">Stadtbewohner:</span>
|
||||
<span className="text-sm">+43%</span>
|
||||
</div>
|
||||
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
|
||||
style={{width: '43%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-2">Träume von Verkehr und Menschenmengen</p>
|
||||
</div>
|
||||
|
||||
<p className="text-sm">
|
||||
Stadtbewohner träumen 43% häufiger von Verkehr, Menschenmengen und urbanen Umgebungen als
|
||||
Menschen in ländlichen Gebieten. Ihre Träume enthalten auch mehr technologische Elemente und
|
||||
soziale Interaktionen mit Fremden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Income Level */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-3 bg-emerald-500/20 rounded-full">
|
||||
<FaMoneyBillWave className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Einkommensniveau</h3>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-sm font-bold">Höhere Einkommen:</span>
|
||||
<span className="text-sm">-31%</span>
|
||||
</div>
|
||||
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-emerald-500 dark:bg-emerald-600 rounded-full"
|
||||
style={{width: '31%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-2">Weniger Angstträume</p>
|
||||
</div>
|
||||
|
||||
<p className="text-sm">
|
||||
Menschen mit höherem Einkommen berichten von 31% weniger Angstträumen im Vergleich zu
|
||||
Personen mit niedrigerem Einkommen. Finanzielle Sicherheit korreliert mit positiveren
|
||||
Traumthemen und besserer Schlafqualität.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Education Level */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-3 bg-amber-500/20 rounded-full">
|
||||
<FaGraduationCap className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Bildungsgrad</h3>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2 text-center">Komplexität der Traumnarration</h4>
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<div className="text-center">
|
||||
<div className="h-16 w-4 bg-gray-200 dark:bg-gray-700 rounded-t-full relative">
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 bg-amber-500 dark:bg-amber-600 rounded-t-full"
|
||||
style={{height: '40%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-1">Grundschule</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="h-16 w-4 bg-gray-200 dark:bg-gray-700 rounded-t-full relative">
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 bg-amber-500 dark:bg-amber-600 rounded-t-full"
|
||||
style={{height: '60%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-1">Sekundar</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="h-16 w-4 bg-gray-200 dark:bg-gray-700 rounded-t-full relative">
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 bg-amber-500 dark:bg-amber-600 rounded-t-full"
|
||||
style={{height: '85%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-1">Universität</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm">
|
||||
Universitätsabsolventen zeigen komplexere Traumnarrationen mit mehr Details, Charakteren und
|
||||
Handlungssträngen. Bildung korreliert mit der Fähigkeit, Träume detaillierter zu erinnern
|
||||
und zu beschreiben.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Environmental Factors */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Umweltfaktoren</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Air Quality */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('rose')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-3 bg-rose-500/20 rounded-full">
|
||||
<FaSmog className="text-rose-600 dark:text-rose-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Luftqualität</h3>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-sm font-bold">Schlechte Luftqualität:</span>
|
||||
<span className="text-sm">+28%</span>
|
||||
</div>
|
||||
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div className="absolute top-0 left-0 h-full bg-rose-500 dark:bg-rose-600 rounded-full"
|
||||
style={{width: '28%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-2">Mehr Albträume</p>
|
||||
</div>
|
||||
|
||||
<p className="text-sm">
|
||||
Schlechte Luftqualität führt zu 28% mehr Albträumen und beeinträchtigt die Schlafqualität.
|
||||
Studien zeigen, dass Luftverschmutzung die REM-Schlafphasen verkürzt und zu fragmentierteren
|
||||
Träumen führt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Noise Level */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-3 bg-purple-500/20 rounded-full">
|
||||
<FaVolumeUp className="text-purple-600 dark:text-purple-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Lärmpegel</h3>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2 text-center">REM-Phasen Dauer</h4>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="text-right w-1/2">
|
||||
<p className="text-xs mb-1">Ruhige Umgebung</p>
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded-full relative">
|
||||
<div
|
||||
className="absolute top-0 right-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||
style={{width: '90%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<p className="text-xs mb-1">Laute Umgebung</p>
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded-full relative">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||
style={{width: '60%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm">
|
||||
Städtische Lärmbelastung fragmentiert Träume durch kürzere REM-Phasen. Selbst wenn der Lärm
|
||||
nicht zum Aufwachen führt, beeinflusst er die Traumkontinuität und -qualität negativ.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Light Pollution */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-3 bg-violet-500/20 rounded-full">
|
||||
<FaLightbulb className="text-violet-600 dark:text-violet-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Lichtverschmutzung</h3>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2 text-center">Melatonin-Produktion</h4>
|
||||
<div className="relative pt-1">
|
||||
<div className="flex mb-2 items-center justify-between">
|
||||
<div>
|
||||
<span
|
||||
className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full bg-violet-200 text-violet-800">
|
||||
Niedrig
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span
|
||||
className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full bg-violet-200 text-violet-800">
|
||||
Hoch
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200 dark:bg-gray-700">
|
||||
<div style={{width: "30%"}}
|
||||
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-violet-500 dark:bg-violet-600">
|
||||
<span className="text-[0.5rem] text-white">Hohe Lichtverschmutzung</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200 dark:bg-gray-700">
|
||||
<div style={{width: "75%"}}
|
||||
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-violet-500 dark:bg-violet-600">
|
||||
<span className="text-[0.5rem] text-white">Geringe Lichtverschmutzung</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm">
|
||||
Reduzierte Melatonin-Produktion durch Lichtverschmutzung beeinflusst die Traumintensität.
|
||||
Menschen in Gebieten mit geringer Lichtverschmutzung berichten von lebhafteren und
|
||||
intensiveren Träumen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Combined Impact */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Kombinierte Auswirkungen</h2>
|
||||
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('pink-red')}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold mb-4 dreamy-text">Optimale vs. Suboptimale Bedingungen</h3>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2">Optimale Bedingungen</h4>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Ruhige, natürliche Umgebung</li>
|
||||
<li>Gute Luftqualität</li>
|
||||
<li>Minimale Lichtverschmutzung</li>
|
||||
<li>Finanzielle Sicherheit</li>
|
||||
<li>Ausgewogene Work-Life-Balance</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Suboptimale Bedingungen</h4>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Laute, urbane Umgebung</li>
|
||||
<li>Schlechte Luftqualität</li>
|
||||
<li>Hohe Lichtverschmutzung</li>
|
||||
<li>Finanzielle Unsicherheit</li>
|
||||
<li>Chronischer Stress</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-bold mb-4 dreamy-text">Auswirkungen auf Traumqualität</h3>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2">Optimale Bedingungen führen zu:</h4>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Längeren REM-Phasen</li>
|
||||
<li>Lebhafteren Träumen</li>
|
||||
<li>Besserer Traumerinnerung</li>
|
||||
<li>Positiveren Traumthemen</li>
|
||||
<li>Höherer Wahrscheinlichkeit für luzide Träume</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Suboptimale Bedingungen führen zu:</h4>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Fragmentierten REM-Phasen</li>
|
||||
<li>Häufigeren Albträumen</li>
|
||||
<li>Schlechterer Traumerinnerung</li>
|
||||
<li>Stressbeladenen Traumthemen</li>
|
||||
<li>Unterbrochenem Schlaf</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm mt-6">
|
||||
Die Kombination verschiedener Umwelt- und sozioökonomischer Faktoren hat einen kumulativen
|
||||
Effekt auf die Traumqualität. Die Verbesserung einzelner Faktoren kann bereits zu einer
|
||||
signifikanten Verbesserung der Traumqualität führen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Practical Tips */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Praktische Tipps für bessere Träume</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||
<h3 className="text-lg font-bold mb-3 dreamy-text">Umweltfaktoren optimieren</h3>
|
||||
<ul className="list-disc list-inside text-sm space-y-2">
|
||||
<li>Verwende Verdunkelungsvorhänge, um Lichtverschmutzung zu reduzieren</li>
|
||||
<li>Nutze Luftreiniger für bessere Luftqualität im Schlafzimmer</li>
|
||||
<li>Setze Ohrstöpsel oder weißes Rauschen gegen Lärmbelästigung ein</li>
|
||||
<li>Halte die Schlafzimmertemperatur zwischen 16-18°C</li>
|
||||
<li>Vermeide blaues Licht von Bildschirmen mindestens eine Stunde vor dem Schlafengehen</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
|
||||
<h3 className="text-lg font-bold mb-3 dreamy-text">Lebensstil-Anpassungen</h3>
|
||||
<ul className="list-disc list-inside text-sm space-y-2">
|
||||
<li>Etabliere eine regelmäßige Schlafenszeit und Aufwachzeit</li>
|
||||
<li>Praktiziere Entspannungstechniken vor dem Schlafengehen</li>
|
||||
<li>Führe ein Traumtagebuch, um die Traumerinnerung zu verbessern</li>
|
||||
<li>Reduziere Stress durch regelmäßige Bewegung und Meditation</li>
|
||||
<li>Vermeide schwere Mahlzeiten, Alkohol und Koffein vor dem Schlafengehen</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="flex flex-wrap justify-between items-center">
|
||||
<NavLink to="/dreamarchive/cultural-landscapes" className="dreamy-card p-3 inline-flex items-center">
|
||||
<span className="mr-2">←</span> Zurück zu Kulturellen Traumlandschaften
|
||||
</NavLink>
|
||||
<NavLink to="/dreamarchive/technology" className="dreamy-card p-3 inline-flex items-center">
|
||||
Weiter zu Technologie & Traumforschung <span className="ml-2">→</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
565
src/pages/dreamarchive/ResearchLive.tsx
Normal file
565
src/pages/dreamarchive/ResearchLive.tsx
Normal file
@@ -0,0 +1,565 @@
|
||||
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||
import {
|
||||
FaCalendarAlt,
|
||||
FaClipboardCheck,
|
||||
FaFlask,
|
||||
FaGlobeAmericas,
|
||||
FaUniversity,
|
||||
FaUserMd,
|
||||
FaUsers,
|
||||
FaVideo
|
||||
} from 'react-icons/fa';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
|
||||
export default function ResearchLive() {
|
||||
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<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">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Traumforschung Live</h1>
|
||||
<p className="text-lg sm:text-xl dreamy-text">Aktuelle Studien, Citizen Science und
|
||||
Forscher-Interviews</p>
|
||||
</div>
|
||||
<div
|
||||
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||
style={{animationDelay: '0.2s'}}>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||
<h2 className="dream-title text-xl sm:text-2xl">Sei Teil der Traumforschung</h2>
|
||||
</div>
|
||||
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||
Entdecke laufende Forschungsprojekte, nimm an Studien teil und lerne von führenden
|
||||
Traumforschern aus der ganzen Welt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current Studies */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Aktuelle Studien</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Study 1 */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-3 bg-purple-500/20 rounded-full mr-4">
|
||||
<FaFlask className="text-purple-600 dark:text-purple-400" size={28}/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold dreamy-text">Traumkontinuität während der Pandemie</h3>
|
||||
<p className="text-xs" style={getTextStyle('muted')}>Universität Zürich, Schweiz</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm font-bold">Status:</span>
|
||||
<span
|
||||
className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
|
||||
</div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm font-bold">Teilnehmer:</span>
|
||||
<span className="text-sm">1,245 / 2,000</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm font-bold">Enddatum:</span>
|
||||
<span className="text-sm">31. Dezember 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm mb-4">
|
||||
Diese Langzeitstudie untersucht, wie sich Träume während und nach der COVID-19-Pandemie
|
||||
verändert haben und ob Traumthemen mit realen Ereignissen korrelieren.
|
||||
</p>
|
||||
|
||||
<button
|
||||
className="w-full py-2 px-4 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors">
|
||||
Teilnehmen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Study 2 */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-3 bg-blue-500/20 rounded-full mr-4">
|
||||
<FaFlask className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold dreamy-text">Luzide Träume und Kreativität</h3>
|
||||
<p className="text-xs" style={getTextStyle('muted')}>Stanford University, USA</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm font-bold">Status:</span>
|
||||
<span
|
||||
className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
|
||||
</div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm font-bold">Teilnehmer:</span>
|
||||
<span className="text-sm">876 / 1,000</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm font-bold">Enddatum:</span>
|
||||
<span className="text-sm">15. März 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm mb-4">
|
||||
Diese Studie untersucht den Zusammenhang zwischen der Fähigkeit, luzide Träume zu erleben,
|
||||
und kreativen Problemlösungsfähigkeiten im Wachzustand.
|
||||
</p>
|
||||
|
||||
<button
|
||||
className="w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
|
||||
Teilnehmen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
|
||||
{/* Study 3 */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-3 bg-emerald-500/20 rounded-full mr-4">
|
||||
<FaFlask className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold dreamy-text">Traumemotionen und mentale Gesundheit</h3>
|
||||
<p className="text-xs" style={getTextStyle('muted')}>Universität Wien, Österreich</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm font-bold">Status:</span>
|
||||
<span
|
||||
className="text-sm bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 px-2 py-0.5 rounded-full">Fast voll</span>
|
||||
</div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm font-bold">Teilnehmer:</span>
|
||||
<span className="text-sm">1,890 / 2,000</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm font-bold">Enddatum:</span>
|
||||
<span className="text-sm">30. September 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm mb-4">
|
||||
Diese Studie erforscht die Beziehung zwischen emotionalen Mustern in Träumen und
|
||||
verschiedenen Aspekten der psychischen Gesundheit im Wachzustand.
|
||||
</p>
|
||||
|
||||
<button
|
||||
className="w-full py-2 px-4 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg transition-colors">
|
||||
Teilnehmen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Study 4 */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-3 bg-amber-500/20 rounded-full mr-4">
|
||||
<FaFlask className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold dreamy-text">Kulturübergreifende Traumsymbole</h3>
|
||||
<p className="text-xs" style={getTextStyle('muted')}>University of Tokyo, Japan</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm font-bold">Status:</span>
|
||||
<span
|
||||
className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
|
||||
</div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm font-bold">Teilnehmer:</span>
|
||||
<span className="text-sm">3,456 / 10,000</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm font-bold">Enddatum:</span>
|
||||
<span className="text-sm">31. Dezember 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm mb-4">
|
||||
Diese globale Studie sammelt Traumsymbole aus verschiedenen Kulturen, um universelle und
|
||||
kulturspezifische Traumelemente zu identifizieren.
|
||||
</p>
|
||||
|
||||
<button
|
||||
className="w-full py-2 px-4 bg-amber-500 hover:bg-amber-600 text-white rounded-lg transition-colors">
|
||||
Teilnehmen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Citizen Science */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Citizen Science: Mitmachen bei der
|
||||
Traumforschung</h2>
|
||||
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="p-3 bg-violet-500/20 rounded-full mr-4">
|
||||
<FaUsers className="text-violet-600 dark:text-violet-400" size={28}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold dreamy-text">Wie du zur Wissenschaft beitragen kannst</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||
{/* Project 1 */}
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<div className="flex justify-center mb-3">
|
||||
<div className="p-2 bg-violet-500/20 rounded-full">
|
||||
<FaClipboardCheck className="text-violet-600 dark:text-violet-400" size={20}/>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="font-bold mb-2 text-center">Globales Traumtagebuch</h4>
|
||||
<p className="text-sm">
|
||||
Teile deine Träume in der weltweit größten Traumdatenbank und hilf Forschern, Muster zu
|
||||
erkennen.
|
||||
</p>
|
||||
<div className="mt-3 text-center">
|
||||
<button
|
||||
className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
|
||||
Beitragen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project 2 */}
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<div className="flex justify-center mb-3">
|
||||
<div className="p-2 bg-violet-500/20 rounded-full">
|
||||
<FaGlobeAmericas className="text-violet-600 dark:text-violet-400" size={20}/>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="font-bold mb-2 text-center">Traumkarte</h4>
|
||||
<p className="text-sm">
|
||||
Hilf bei der Erstellung einer interaktiven Weltkarte, die zeigt, wie Träume je nach
|
||||
Region variieren.
|
||||
</p>
|
||||
<div className="mt-3 text-center">
|
||||
<button
|
||||
className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
|
||||
Beitragen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project 3 */}
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<div className="flex justify-center mb-3">
|
||||
<div className="p-2 bg-violet-500/20 rounded-full">
|
||||
<FaCalendarAlt className="text-violet-600 dark:text-violet-400" size={20}/>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="font-bold mb-2 text-center">30-Tage-Challenge</h4>
|
||||
<p className="text-sm">
|
||||
Nimm an der 30-Tage-Traumaufzeichnungs-Challenge teil und erhalte personalisierte
|
||||
Analysen.
|
||||
</p>
|
||||
<div className="mt-3 text-center">
|
||||
<button
|
||||
className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
|
||||
Beitragen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm">
|
||||
Citizen Science-Projekte ermöglichen es jedem, zur Traumforschung beizutragen. Deine Teilnahme
|
||||
hilft Wissenschaftlern, größere und vielfältigere Datensätze zu sammeln, was zu robusteren
|
||||
Forschungsergebnissen führt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Researcher Interviews */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Forscher-Interviews</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Interview 1 */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||
<div className="flex items-start mb-4">
|
||||
<div className="p-3 bg-blue-500/20 rounded-full mr-4 mt-1">
|
||||
<FaUserMd className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold dreamy-text">Dr. Sarah Merton</h3>
|
||||
<p className="text-xs mb-1" style={getTextStyle('muted')}>Harvard University, USA</p>
|
||||
<p className="text-sm mb-3">Expertin für Traumkognition und neuronale Korrelate des
|
||||
Träumens</p>
|
||||
|
||||
<div className="relative">
|
||||
<div
|
||||
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div
|
||||
className="w-12 h-12 rounded-full bg-blue-500/80 flex items-center justify-center cursor-pointer">
|
||||
<div
|
||||
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Neueste Erkenntnisse zur Traumkognition</li>
|
||||
<li>Wie das Gehirn Traumnarrative konstruiert</li>
|
||||
<li>Die Rolle von REM-Schlaf bei der Gedächtniskonsolidierung</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interview 2 */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
|
||||
<div className="flex items-start mb-4">
|
||||
<div className="p-3 bg-emerald-500/20 rounded-full mr-4 mt-1">
|
||||
<FaUserMd className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold dreamy-text">Prof. Dr. Markus Weber</h3>
|
||||
<p className="text-xs mb-1" style={getTextStyle('muted')}>Max-Planck-Institut,
|
||||
Deutschland</p>
|
||||
<p className="text-sm mb-3">Pionier in der Erforschung luzider Träume und
|
||||
Traumkontrolle</p>
|
||||
|
||||
<div className="relative">
|
||||
<div
|
||||
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div
|
||||
className="w-12 h-12 rounded-full bg-emerald-500/80 flex items-center justify-center cursor-pointer">
|
||||
<div
|
||||
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Techniken zur Induktion luzider Träume</li>
|
||||
<li>Therapeutische Anwendungen von Traumkontrolle</li>
|
||||
<li>Ethische Fragen in der Traummanipulation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
|
||||
{/* Interview 3 */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
|
||||
<div className="flex items-start mb-4">
|
||||
<div className="p-3 bg-amber-500/20 rounded-full mr-4 mt-1">
|
||||
<FaUserMd className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold dreamy-text">Dr. Yuki Tanaka</h3>
|
||||
<p className="text-xs mb-1" style={getTextStyle('muted')}>Kyoto University, Japan</p>
|
||||
<p className="text-sm mb-3">Spezialistin für kulturelle Traumforschung und vergleichende
|
||||
Traumanalyse</p>
|
||||
|
||||
<div className="relative">
|
||||
<div
|
||||
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div
|
||||
className="w-12 h-12 rounded-full bg-amber-500/80 flex items-center justify-center cursor-pointer">
|
||||
<div
|
||||
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Kulturelle Unterschiede in Traumsymbolen</li>
|
||||
<li>Einfluss von Mythen und Folklore auf Träume</li>
|
||||
<li>Universelle vs. kulturspezifische Traumelemente</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interview 4 */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('rose')}>
|
||||
<div className="flex items-start mb-4">
|
||||
<div className="p-3 bg-rose-500/20 rounded-full mr-4 mt-1">
|
||||
<FaUserMd className="text-rose-600 dark:text-rose-400" size={28}/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold dreamy-text">Dr. Elena Rodriguez</h3>
|
||||
<p className="text-xs mb-1" style={getTextStyle('muted')}>Universidad de Barcelona,
|
||||
Spanien</p>
|
||||
<p className="text-sm mb-3">Forscherin im Bereich Traumtherapie und emotionale
|
||||
Verarbeitung</p>
|
||||
|
||||
<div className="relative">
|
||||
<div
|
||||
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div
|
||||
className="w-12 h-12 rounded-full bg-rose-500/80 flex items-center justify-center cursor-pointer">
|
||||
<div
|
||||
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Traumbasierte Therapieansätze</li>
|
||||
<li>Verarbeitung traumatischer Erlebnisse im Traum</li>
|
||||
<li>Emotionale Regulation durch gezielte Traumarbeit</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upcoming Events */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Kommende Veranstaltungen</h2>
|
||||
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-left p-2">Datum</th>
|
||||
<th className="text-left p-2">Veranstaltung</th>
|
||||
<th className="text-left p-2">Ort</th>
|
||||
<th className="text-left p-2">Typ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="bg-white/10 dark:bg-black/10">
|
||||
<td className="p-2">15. Juli 2024</td>
|
||||
<td className="p-2">Internationale Konferenz für Traumforschung</td>
|
||||
<td className="p-2">Berlin, Deutschland</td>
|
||||
<td className="p-2">
|
||||
<span
|
||||
className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs px-2 py-0.5 rounded-full">
|
||||
Konferenz
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="p-2">3. August 2024</td>
|
||||
<td className="p-2">Workshop: Luzide Träume für Anfänger</td>
|
||||
<td className="p-2">Online</td>
|
||||
<td className="p-2">
|
||||
<span
|
||||
className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs px-2 py-0.5 rounded-full">
|
||||
Workshop
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-white/10 dark:bg-black/10">
|
||||
<td className="p-2">22. September 2024</td>
|
||||
<td className="p-2">Symposium: Träume und psychische Gesundheit</td>
|
||||
<td className="p-2">Wien, Österreich</td>
|
||||
<td className="p-2">
|
||||
<span
|
||||
className="bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-200 text-xs px-2 py-0.5 rounded-full">
|
||||
Symposium
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="p-2">10. Oktober 2024</td>
|
||||
<td className="p-2">Webinar: Neueste Technologien in der Traumforschung</td>
|
||||
<td className="p-2">Online</td>
|
||||
<td className="p-2">
|
||||
<span
|
||||
className="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-xs px-2 py-0.5 rounded-full">
|
||||
Webinar
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-white/10 dark:bg-black/10">
|
||||
<td className="p-2">5. November 2024</td>
|
||||
<td className="p-2">Traumforschung 2025: Ausblick und Trends</td>
|
||||
<td className="p-2">Paris, Frankreich</td>
|
||||
<td className="p-2">
|
||||
<span
|
||||
className="bg-rose-100 dark:bg-rose-900 text-rose-800 dark:text-rose-200 text-xs px-2 py-0.5 rounded-full">
|
||||
Konferenz
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-center">
|
||||
<button
|
||||
className="py-2 px-4 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors">
|
||||
Alle Veranstaltungen anzeigen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Newsletter Signup */}
|
||||
<div className="mb-12">
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||
<div className="flex flex-col md:flex-row items-center">
|
||||
<div className="mb-4 md:mb-0 md:mr-6 md:w-2/3">
|
||||
<h3 className="text-xl font-bold mb-2 dreamy-text">Bleib auf dem Laufenden</h3>
|
||||
<p className="text-sm mb-4">
|
||||
Abonniere unseren Newsletter, um über neue Studien, Veranstaltungen und Durchbrüche in
|
||||
der Traumforschung informiert zu bleiben.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Deine E-Mail-Adresse"
|
||||
className="flex-1 p-2 rounded-lg mb-2 sm:mb-0 sm:mr-2 focus:outline-none"
|
||||
style={{backgroundColor: 'var(--container)', color: 'var(--text)'}}
|
||||
/>
|
||||
<button
|
||||
className="py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
|
||||
Abonnieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:w-1/3 flex justify-center">
|
||||
<div className="p-4 bg-blue-500/20 rounded-full">
|
||||
<FaUniversity className="text-blue-600 dark:text-blue-400" size={48}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="flex flex-wrap justify-between items-center">
|
||||
<NavLink to="/dreamarchive/user-dreams" className="dreamy-card p-3 inline-flex items-center">
|
||||
<span className="mr-2">←</span> Zurück zu Deinen Träumen im Kontext
|
||||
</NavLink>
|
||||
<NavLink to="/dreamarchive" className="dreamy-card p-3 inline-flex items-center">
|
||||
Zurück zur Übersicht <span className="ml-2">→</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
396
src/pages/dreamarchive/Technology.tsx
Normal file
396
src/pages/dreamarchive/Technology.tsx
Normal file
@@ -0,0 +1,396 @@
|
||||
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||
import {FaBrain, FaChartBar, FaChartPie, FaLaptopCode, FaMicrochip, FaRobot, FaVrCardboard} from 'react-icons/fa';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
|
||||
export default function Technology() {
|
||||
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<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">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Technologie &
|
||||
Traumforschung</h1>
|
||||
<p className="text-lg sm:text-xl dreamy-text">Neueste Entwicklungen in der
|
||||
Traumforschungstechnologie</p>
|
||||
</div>
|
||||
<div
|
||||
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||
style={{animationDelay: '0.2s'}}>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||
<h2 className="dream-title text-xl sm:text-2xl">Die Zukunft der Traumforschung</h2>
|
||||
</div>
|
||||
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||
Entdecke bahnbrechende Technologien, die uns helfen, Träume besser zu verstehen, zu analysieren
|
||||
und sogar zu steuern.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Latest Developments */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Neueste Entwicklungen</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* EEG-based Dream Detection */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('blue')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-blue-500/20 rounded-full">
|
||||
<FaBrain className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">EEG-basierte Traumdetektion</h3>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-sm font-bold">Genauigkeit:</span>
|
||||
<span className="text-sm">85%</span>
|
||||
</div>
|
||||
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
|
||||
style={{width: '85%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-2 text-center">Automatische Traumerkennung</p>
|
||||
</div>
|
||||
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Moderne EEG-Technologie kann mit 85% Genauigkeit erkennen, wann eine Person träumt und in
|
||||
welcher Traumphase sie sich befindet. Dies ermöglicht gezielte Traumforschung und
|
||||
-intervention.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* DreamNet Framework */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('purple')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-purple-500/20 rounded-full">
|
||||
<FaLaptopCode className="text-purple-600 dark:text-purple-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">DreamNet-Framework</h3>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-sm font-bold">Genauigkeit:</span>
|
||||
<span className="text-sm">99%</span>
|
||||
</div>
|
||||
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||
style={{width: '99%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-2 text-center">Multimodale Traumanalyse</p>
|
||||
</div>
|
||||
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Das DreamNet-Framework kombiniert EEG-Daten, Augenbewegungen, Herzfrequenz und
|
||||
Körpertemperatur für eine präzise Traumanalyse. KI-Algorithmen interpretieren diese Daten
|
||||
und erstellen detaillierte Traumprofile.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Lucid Dreaming Control */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('emerald')}>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-emerald-500/20 rounded-full">
|
||||
<FaVrCardboard className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">Lucid Dreaming Control</h3>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2 text-center">Virtuelle Autosteuerung</h4>
|
||||
<p className="text-xs text-center mb-2">durch Traum-Muskelbewegungen</p>
|
||||
<div className="flex justify-center">
|
||||
<div
|
||||
className="relative w-24 h-24 rounded-full bg-emerald-100 dark:bg-emerald-900 flex items-center justify-center">
|
||||
<div
|
||||
className="absolute w-16 h-16 rounded-full bg-emerald-200 dark:bg-emerald-800 flex items-center justify-center">
|
||||
<div
|
||||
className="absolute w-8 h-8 rounded-full bg-emerald-500 dark:bg-emerald-600 flex items-center justify-center text-white">
|
||||
<FaRobot size={16}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Bahnbrechende Forschung ermöglicht es Personen in luziden Träumen, durch subtile
|
||||
Augenbewegungen und Muskelsignale mit der Außenwelt zu kommunizieren und sogar virtuelle
|
||||
Objekte zu steuern.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dream Type Classification */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Traumtypen-Klassifikation</h2>
|
||||
|
||||
<div className="dreamy-card rounded-xl p-6" style={getBackgroundStyle('rose')}>
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<div className="p-4 bg-rose-500/20 rounded-full mr-3">
|
||||
<FaChartPie className="text-rose-600 dark:text-rose-400" size={28}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold dreamy-text">Globale Verteilung der Traumtypen</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
{/* Pie Chart Visualization (Mock) */}
|
||||
<div className="relative w-full aspect-square max-w-xs mx-auto">
|
||||
<div className="absolute inset-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
|
||||
|
||||
{/* Angstträume: 34% */}
|
||||
<div className="absolute inset-0 rounded-full bg-red-500 dark:bg-red-600" style={{
|
||||
clipPath: 'polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 75% 75%)'
|
||||
}}></div>
|
||||
|
||||
{/* Soziale Träume: 28% */}
|
||||
<div className="absolute inset-0 rounded-full bg-blue-500 dark:bg-blue-600" style={{
|
||||
clipPath: 'polygon(50% 50%, 75% 75%, 50% 100%, 0% 100%, 0% 50%)'
|
||||
}}></div>
|
||||
|
||||
{/* Sexuelle Träume: 12% */}
|
||||
<div className="absolute inset-0 rounded-full bg-pink-500 dark:bg-pink-600" style={{
|
||||
clipPath: 'polygon(50% 50%, 0% 50%, 0% 0%, 25% 0%)'
|
||||
}}></div>
|
||||
|
||||
{/* Flugträume: 18% */}
|
||||
<div className="absolute inset-0 rounded-full bg-purple-500 dark:bg-purple-600" style={{
|
||||
clipPath: 'polygon(50% 50%, 25% 0%, 50% 0%)'
|
||||
}}></div>
|
||||
|
||||
{/* Verfolgungsträume: 8% */}
|
||||
<div className="absolute inset-0 rounded-full bg-orange-500 dark:bg-orange-600" style={{
|
||||
clipPath: 'polygon(50% 50%, 50% 100%, 25% 100%)'
|
||||
}}></div>
|
||||
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div
|
||||
className="w-16 h-16 rounded-full bg-white dark:bg-gray-900 flex items-center justify-center text-sm font-bold">
|
||||
100%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center">
|
||||
<div className="w-4 h-4 bg-red-500 dark:bg-red-600 mr-2"></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm font-bold">Angstträume</span>
|
||||
<span className="text-sm">34%</span>
|
||||
</div>
|
||||
<div
|
||||
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-red-500 dark:bg-red-600 rounded-full"
|
||||
style={{width: '34%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-1" style={getTextStyle('muted')}>Global
|
||||
durchschnittlich</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2"></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm font-bold">Soziale Träume</span>
|
||||
<span className="text-sm">28%</span>
|
||||
</div>
|
||||
<div
|
||||
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
|
||||
style={{width: '28%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-1" style={getTextStyle('muted')}>Kulturelle
|
||||
Variationen</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="w-4 h-4 bg-pink-500 dark:bg-pink-600 mr-2"></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm font-bold">Sexuelle Träume</span>
|
||||
<span className="text-sm">12%</span>
|
||||
</div>
|
||||
<div
|
||||
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-pink-500 dark:bg-pink-600 rounded-full"
|
||||
style={{width: '12%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-1" style={getTextStyle('muted')}>Altersabhängig</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="w-4 h-4 bg-purple-500 dark:bg-purple-600 mr-2"></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm font-bold">Flugträume</span>
|
||||
<span className="text-sm">18%</span>
|
||||
</div>
|
||||
<div
|
||||
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||
style={{width: '18%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-1"
|
||||
style={getTextStyle('muted')}>Persönlichkeitsabhängig</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="w-4 h-4 bg-orange-500 dark:bg-orange-600 mr-2"></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm font-bold">Verfolgungsträume</span>
|
||||
<span className="text-sm">8%</span>
|
||||
</div>
|
||||
<div
|
||||
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-orange-500 dark:bg-orange-600 rounded-full"
|
||||
style={{width: '8%'}}></div>
|
||||
</div>
|
||||
<p className="text-xs mt-1" style={getTextStyle('muted')}>Stresskorreliert</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm" style={getTextStyle('normal')}>
|
||||
Moderne KI-Algorithmen können Träume basierend auf ihrem Inhalt, emotionalen Ton und narrativen
|
||||
Strukturen klassifizieren. Diese Klassifikation hilft Forschern, Muster in großen
|
||||
Traumdatensätzen zu erkennen und kulturübergreifende Vergleiche anzustellen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Future Technologies */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Zukunftstechnologien</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Dream Recording */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('violet')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-4 bg-violet-500/20 rounded-full mr-4">
|
||||
<FaMicrochip className="text-violet-600 dark:text-violet-400" size={28}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold dreamy-text">Traumaufzeichnung</h3>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2">Visuelle Rekonstruktion von Träumen</h4>
|
||||
<p className="text-sm">
|
||||
Forscher arbeiten an Technologien, die visuelle Inhalte aus Träumen rekonstruieren
|
||||
können, indem sie Hirnaktivitätsmuster in visuelle Darstellungen umwandeln.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Die nächste Generation von Traumtechnologie zielt darauf ab, Träume als Video aufzuzeichnen
|
||||
und abzuspielen. Erste Prototypen können bereits einfache visuelle Elemente aus der
|
||||
Hirnaktivität während des Träumens rekonstruieren.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Dream Sharing */}
|
||||
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('amber')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-4 bg-amber-500/20 rounded-full mr-4">
|
||||
<FaChartBar className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold dreamy-text">Traumaustausch</h3>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2">Gemeinsame Traumwelten</h4>
|
||||
<p className="text-sm">
|
||||
Experimentelle Technologien ermöglichen es zwei oder mehr Personen, ähnliche
|
||||
Traumszenarien zu erleben und in begrenztem Umfang miteinander zu interagieren.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||
Forscher entwickeln Methoden, um Träume zwischen Individuen zu teilen oder sogar gemeinsame
|
||||
Traumwelten zu schaffen. Diese Technologie könnte revolutionäre Anwendungen in Therapie,
|
||||
Kreativität und zwischenmenschlicher Kommunikation haben.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ethical Considerations */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Ethische Überlegungen</h2>
|
||||
|
||||
<div className="dreamy-card rounded-xl p-6" style={getBackgroundStyle('blue')}>
|
||||
<h3 className="text-xl font-bold mb-4 dreamy-text">Wichtige ethische Fragen</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Privatsphäre</h4>
|
||||
<p className="text-sm">
|
||||
Wem gehören Traumdaten? Wie können wir sicherstellen, dass die intimsten Gedanken einer
|
||||
Person geschützt bleiben?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Manipulation</h4>
|
||||
<p className="text-sm">
|
||||
Könnte Traumtechnologie für Werbung, Propaganda oder andere Formen der Beeinflussung
|
||||
missbraucht werden?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Identität</h4>
|
||||
<p className="text-sm">
|
||||
Wie beeinflussen Traummanipulationen unser Selbstverständnis und unsere persönliche
|
||||
Entwicklung?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Zugang</h4>
|
||||
<p className="text-sm">
|
||||
Wer hat Zugang zu fortschrittlicher Traumtechnologie? Könnte dies zu neuen sozialen
|
||||
Ungleichheiten führen?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm" style={getTextStyle('normal')}>
|
||||
Mit der rasanten Entwicklung der Traumtechnologie müssen wir auch die ethischen Implikationen
|
||||
sorgfältig betrachten. Forscher und Ethiker arbeiten gemeinsam an Richtlinien für
|
||||
verantwortungsvolle Traumforschung und -technologie.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="flex flex-wrap justify-between items-center">
|
||||
<NavLink to="/dreamarchive/living-conditions"
|
||||
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
|
||||
style={getBackgroundStyle('emerald')}>
|
||||
<span className="mr-2">←</span> Zurück zu Lebensbedingungen & Traumqualität
|
||||
</NavLink>
|
||||
<NavLink to="/dreamarchive/user-dreams"
|
||||
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
|
||||
style={getBackgroundStyle('rose')}>
|
||||
Weiter zu Deinen Träumen im Kontext <span className="ml-2">→</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
427
src/pages/dreamarchive/UserDreams.tsx
Normal file
427
src/pages/dreamarchive/UserDreams.tsx
Normal file
@@ -0,0 +1,427 @@
|
||||
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||
import {FaChartLine, FaRegCommentDots, FaRegLightbulb, FaUser} from 'react-icons/fa';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
import {MockUserMap} from '../../data/MockUsers';
|
||||
|
||||
export default function UserDreams() {
|
||||
const currentUser = MockUserMap.get(4); // Neo Quantum
|
||||
|
||||
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<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">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Deine Träume im
|
||||
Kontext</h1>
|
||||
<p className="text-lg sm:text-xl dreamy-text">Einordnung deiner Träume in die globale
|
||||
Traumdatenbank</p>
|
||||
</div>
|
||||
<div
|
||||
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||
style={{animationDelay: '0.2s'}}>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||
<h2 className="dream-title text-xl sm:text-2xl">Hallo, {currentUser?.name || 'Neo'}</h2>
|
||||
</div>
|
||||
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||
Entdecke, wie sich deine Träume im Vergleich zur globalen Traumdatenbank verhalten und wie sie
|
||||
sich im Laufe der Zeit verändert haben.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Profile Overview */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Dein Traumprofil</h2>
|
||||
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
|
||||
<div className="flex flex-col md:flex-row items-center mb-6">
|
||||
<div className="mb-4 md:mb-0 md:mr-6">
|
||||
{currentUser?.profilePicture ? (<img
|
||||
src={`/assets/profiles/${currentUser.profilePicture}`}
|
||||
alt={currentUser.name}
|
||||
className="w-24 h-24 rounded-full object-cover border-4 border-purple-300 dark:border-purple-700"
|
||||
/>) : (<div
|
||||
className="w-24 h-24 rounded-full bg-purple-200 dark:bg-purple-800 flex items-center justify-center">
|
||||
<FaUser className="text-purple-600 dark:text-purple-400" size={32}/>
|
||||
</div>)}
|
||||
</div>
|
||||
|
||||
<div className="text-center md:text-left">
|
||||
<h3 className="text-xl font-bold mb-2 dreamy-text">{currentUser?.name || 'Neo Quantum'}</h3>
|
||||
<p className="text-sm mb-1" style={getTextStyle()}>Traumaufzeichnungen: <span
|
||||
className="font-bold">42</span></p>
|
||||
<p className="text-sm mb-1" style={getTextStyle()}>Aktive Tage: <span
|
||||
className="font-bold">{currentUser?.streakDays || 14}</span></p>
|
||||
<p className="text-sm" style={getTextStyle()}>Mitglied seit: <span
|
||||
className="font-bold">März 2023</span></p>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 mt-4 md:mt-0 md:ml-6">
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2 text-center">Deine häufigsten Traumthemen</h4>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span>Fliegen</span>
|
||||
<span>32%</span>
|
||||
</div>
|
||||
<div
|
||||
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||
style={{width: '32%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span>Technologie</span>
|
||||
<span>28%</span>
|
||||
</div>
|
||||
<div
|
||||
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
|
||||
style={{width: '28%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span>Kreativität</span>
|
||||
<span>24%</span>
|
||||
</div>
|
||||
<div
|
||||
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-emerald-500 dark:bg-emerald-600 rounded-full"
|
||||
style={{width: '24%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Global Comparison */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Vergleich mit globaler Traumdatenbank</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Dream Emotions */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-3 bg-blue-500/20 rounded-full mr-4">
|
||||
<FaRegCommentDots className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold dreamy-text">Traumemotionen</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-sm font-bold">Positive Emotionen</span>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs mr-2">Global: 42%</span>
|
||||
<span className="text-xs font-bold">Du: 58%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
|
||||
style={{width: '42%'}}></div>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full border-r-2 border-white dark:border-gray-900"
|
||||
style={{width: '58%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-sm font-bold">Negative Emotionen</span>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs mr-2">Global: 38%</span>
|
||||
<span className="text-xs font-bold">Du: 22%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
|
||||
style={{width: '38%'}}></div>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-red-500 dark:bg-red-600 rounded-full border-r-2 border-white dark:border-gray-900"
|
||||
style={{width: '22%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-sm font-bold">Neutrale Emotionen</span>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs mr-2">Global: 20%</span>
|
||||
<span className="text-xs font-bold">Du: 20%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
|
||||
style={{width: '20%'}}></div>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-yellow-500 dark:bg-yellow-600 rounded-full border-r-2 border-white dark:border-gray-900"
|
||||
style={{width: '20%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm mt-4">
|
||||
Im Vergleich zum globalen Durchschnitt hast du deutlich mehr positive und weniger negative
|
||||
Emotionen in deinen Träumen. Dies könnte auf ein höheres Wohlbefinden oder eine
|
||||
optimistischere Grundeinstellung hindeuten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Dream Themes */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-3 bg-emerald-500/20 rounded-full mr-4">
|
||||
<FaRegLightbulb className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold dreamy-text">Traumthemen</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-white/20 dark:bg-black/20 p-3 rounded-lg text-center">
|
||||
<h4 className="font-bold mb-1 text-sm">Deine Top-Themen</h4>
|
||||
<ol className="text-xs text-left list-decimal list-inside">
|
||||
<li>Fliegen (32%)</li>
|
||||
<li>Technologie (28%)</li>
|
||||
<li>Kreativität (24%)</li>
|
||||
<li>Reisen (10%)</li>
|
||||
<li>Musik (6%)</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-3 rounded-lg text-center">
|
||||
<h4 className="font-bold mb-1 text-sm">Globale Top-Themen</h4>
|
||||
<ol className="text-xs text-left list-decimal list-inside">
|
||||
<li>Fallen (28%)</li>
|
||||
<li>Verfolgung (22%)</li>
|
||||
<li>Fliegen (18%)</li>
|
||||
<li>Prüfungen (16%)</li>
|
||||
<li>Verlust (14%)</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-3 rounded-lg">
|
||||
<h4 className="font-bold mb-2 text-sm text-center">Einzigartige Aspekte deiner
|
||||
Träume</h4>
|
||||
<ul className="text-xs list-disc list-inside space-y-1">
|
||||
<li>Deine Träume enthalten 55% mehr technologische Elemente als der Durchschnitt
|
||||
</li>
|
||||
<li>Du träumst 78% häufiger vom Fliegen als die meisten Menschen</li>
|
||||
<li>Kreative Problemlösung tritt in deinen Träumen 3x häufiger auf</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm mt-4">
|
||||
Deine Traumthemen unterscheiden sich deutlich vom globalen Durchschnitt. Während viele
|
||||
Menschen von Ängsten und Sorgen träumen, fokussieren sich deine Träume mehr auf positive
|
||||
Erfahrungen und kreative Exploration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dream Changes Over Time */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Persönliche Traumveränderung über Zeit</h2>
|
||||
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('rose')}>
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="p-3 bg-rose-500/20 rounded-full mr-4">
|
||||
<FaChartLine className="text-rose-600 dark:text-rose-400" size={28}/>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold dreamy-text">Entwicklung deiner Traumthemen</h3>
|
||||
</div>
|
||||
|
||||
{/* Timeline Chart (Mock) */}
|
||||
<div className="mb-6 overflow-x-auto">
|
||||
<div className="min-w-[600px]">
|
||||
<div className="relative h-60">
|
||||
{/* X-Axis (Time) */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="absolute bottom-0 left-0 right-0 flex justify-between text-xs"
|
||||
style={getTextStyle('muted')}>
|
||||
<div className="text-center">
|
||||
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="mt-2">März 2023</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="mt-2">Juni 2023</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="mt-2">Sept 2023</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="mt-2">Dez 2023</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="mt-2">März 2024</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="mt-2">Heute</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Y-Axis (Percentage) */}
|
||||
<div className="absolute top-0 bottom-0 left-0 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="absolute top-0 bottom-0 left-0 flex flex-col justify-between text-xs"
|
||||
style={getTextStyle('muted')}>
|
||||
<div>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="transform -translate-y-1/2 -translate-x-full mr-1">100%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="absolute left-0 top-1/4 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="transform -translate-y-1/2 -translate-x-full mr-1">75%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="absolute left-0 top-2/4 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="transform -translate-y-1/2 -translate-x-full mr-1">50%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="absolute left-0 top-3/4 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="transform -translate-y-1/2 -translate-x-full mr-1">25%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="absolute left-0 bottom-0 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="transform -translate-y-1/2 -translate-x-full mr-1">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data Lines */}
|
||||
{/* Fliegen (purple) */}
|
||||
<svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<polyline
|
||||
points="0,70 20,65 40,50 60,40 80,30 100,20"
|
||||
fill="none"
|
||||
stroke="#8b5cf6"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Technologie (blue) */}
|
||||
<svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<polyline
|
||||
points="0,80 20,75 40,70 60,60 80,50 100,30"
|
||||
fill="none"
|
||||
stroke="#3b82f6"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Kreativität (green) */}
|
||||
<svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<polyline
|
||||
points="0,85 20,80 40,75 60,65 80,55 100,35"
|
||||
fill="none"
|
||||
stroke="#10b981"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="absolute top-0 right-0 bg-white/50 dark:bg-black/50 p-2 rounded-lg">
|
||||
<div className="flex items-center mb-1">
|
||||
<div className="w-3 h-3 bg-purple-500 mr-2"></div>
|
||||
<span className="text-xs">Fliegen</span>
|
||||
</div>
|
||||
<div className="flex items-center mb-1">
|
||||
<div className="w-3 h-3 bg-blue-500 mr-2"></div>
|
||||
<span className="text-xs">Technologie</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="w-3 h-3 bg-emerald-500 mr-2"></div>
|
||||
<span className="text-xs">Kreativität</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||
<h4 className="font-bold mb-2">Schlüsselerkenntnisse</h4>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Deine Träume vom Fliegen haben im letzten Jahr um 60% zugenommen</li>
|
||||
<li>Technologiebezogene Träume sind seit Dezember 2023 um 40% gestiegen</li>
|
||||
<li>Kreative Elemente in deinen Träumen haben sich verdoppelt</li>
|
||||
<li>Angstträume haben um 45% abgenommen</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p className="text-sm">
|
||||
Die Analyse deiner Traumdaten über Zeit zeigt eine deutliche Entwicklung hin zu positiveren und
|
||||
kreativeren Traumthemen. Diese Veränderung könnte mit persönlichem Wachstum, veränderten
|
||||
Lebensumständen oder bewusster Traumarbeit zusammenhängen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Personalized Recommendations */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Personalisierte Empfehlungen</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
|
||||
<h3 className="text-lg font-bold mb-3 dreamy-text">Für deine Traumarbeit</h3>
|
||||
<ul className="list-disc list-inside text-sm space-y-2">
|
||||
<li>Experimentiere mit luziden Träumen, da deine Flugträume ein guter Ausgangspunkt sind
|
||||
</li>
|
||||
<li>Führe ein detaillierteres Traumtagebuch, um Muster in deinen technologiebezogenen
|
||||
Träumen zu erkennen
|
||||
</li>
|
||||
<li>Probiere geführte Meditationen vor dem Schlafengehen, um deine kreativen Träume zu
|
||||
verstärken
|
||||
</li>
|
||||
<li>Teile deine Traumgeschichten in der Community, um neue Perspektiven zu gewinnen</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
|
||||
<h3 className="text-lg font-bold mb-3 dreamy-text">Basierend auf deinem Profil</h3>
|
||||
<ul className="list-disc list-inside text-sm space-y-2">
|
||||
<li>Entdecke unsere Sammlung von Flugträumen aus verschiedenen Kulturen</li>
|
||||
<li>Nimm an unserem Workshop "Kreativität im Traum" teil</li>
|
||||
<li>Teste unsere neue Funktion zur Traumvisualisierung</li>
|
||||
<li>Verbinde dich mit anderen Träumern, die ähnliche Interessen an Technologie und
|
||||
Innovation haben
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="flex flex-wrap justify-between items-center">
|
||||
<NavLink to="/dreamarchive/technology" className="dreamy-card p-3 inline-flex items-center">
|
||||
<span className="mr-2">←</span> Zurück zu Technologie & Traumforschung
|
||||
</NavLink>
|
||||
<NavLink to="/dreamarchive/research-live" className="dreamy-card p-3 inline-flex items-center">
|
||||
Weiter zu Traumforschung Live <span className="ml-2">→</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
242
src/pages/dreamarchive/WorldwideEvents.tsx
Normal file
242
src/pages/dreamarchive/WorldwideEvents.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||
import {FaFire, FaFlag, FaVirus} from 'react-icons/fa';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
|
||||
export default function WorldwideEvents() {
|
||||
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<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">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Weltweite Ereignisse &
|
||||
Traumreaktionen</h1>
|
||||
<p className="text-lg sm:text-xl dreamy-text">Korrelation zwischen globalen Ereignissen und
|
||||
Traummustern</p>
|
||||
</div>
|
||||
<div
|
||||
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||
style={{animationDelay: '0.2s'}}>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||
<h2 className="dream-title text-xl sm:text-2xl">Signifikante Ereignisse 2020-2025</h2>
|
||||
</div>
|
||||
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||
Entdecke, wie weltweite Ereignisse wie die COVID-19 Pandemie, Klimawandel-Ereignisse und
|
||||
geopolitische Spannungen die Traumlandschaft beeinflusst haben.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interactive Timeline (Mock) */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Zeitlinie der Ereignisse</h2>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-purple-300 dark:bg-purple-700 opacity-50"></div>
|
||||
|
||||
{/* Timeline Items */}
|
||||
<div className="relative z-10">
|
||||
{/* 2020 */}
|
||||
<div className="mb-12 flex items-center">
|
||||
<div className="w-1/2 pr-8 text-right">
|
||||
<h3 className="text-xl font-bold mb-2 dreamy-text">2020</h3>
|
||||
<p className="text-sm" style={getTextStyle()}>Beginn der COVID-19 Pandemie</p>
|
||||
</div>
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
|
||||
style={{background: 'var(--accent-gradient)'}}></div>
|
||||
<div className="w-1/2 pl-8">
|
||||
<div className="dreamy-card p-4">
|
||||
<p className="text-sm mb-2" style={getTextStyle()}>40% Anstieg der Traumhäufigkeit
|
||||
während Lockdown</p>
|
||||
<p className="text-xs" style={getTextStyle('muted')}>Basierend auf 1.622 Teilnehmern
|
||||
in Italien</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2021 */}
|
||||
<div className="mb-12 flex items-center">
|
||||
<div className="w-1/2 pr-8 text-right">
|
||||
<div className="dreamy-card p-4">
|
||||
<p className="text-sm mb-2" style={getTextStyle()}>23% mehr Träume über Feuer und
|
||||
Flucht</p>
|
||||
<p className="text-xs" style={getTextStyle('muted')}>Korreliert mit Waldbränden in
|
||||
Australien und Kalifornien</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
|
||||
style={{background: 'var(--accent-gradient)'}}></div>
|
||||
<div className="w-1/2 pl-8">
|
||||
<h3 className="text-xl font-bold mb-2 dreamy-text">2021</h3>
|
||||
<p className="text-sm" style={getTextStyle()}>Klimawandel-Ereignisse intensivieren
|
||||
sich</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2022 */}
|
||||
<div className="mb-12 flex items-center">
|
||||
<div className="w-1/2 pr-8 text-right">
|
||||
<h3 className="text-xl font-bold mb-2 dreamy-text">2022</h3>
|
||||
<p className="text-sm" style={getTextStyle()}>Beginn des Konflikts in der Ukraine</p>
|
||||
</div>
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
|
||||
style={{background: 'var(--accent-gradient)'}}></div>
|
||||
<div className="w-1/2 pl-8">
|
||||
<div className="dreamy-card p-4">
|
||||
<p className="text-sm mb-2" style={getTextStyle()}>Erhöhte Angstträume in
|
||||
europäischen Nachbarländern</p>
|
||||
<p className="text-xs" style={getTextStyle('muted')}>Besonders in Polen, Rumänien
|
||||
und den baltischen Staaten</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2023 */}
|
||||
<div className="mb-12 flex items-center">
|
||||
<div className="w-1/2 pr-8 text-right">
|
||||
<div className="dreamy-card p-4">
|
||||
<p className="text-sm mb-2" style={getTextStyle()}>Verstärkte Träume über Jobverlust
|
||||
und finanzielle Sorgen</p>
|
||||
<p className="text-xs" style={getTextStyle('muted')}>Korreliert mit globaler
|
||||
Wirtschaftskrise</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
|
||||
style={{background: 'var(--accent-gradient)'}}></div>
|
||||
<div className="w-1/2 pl-8">
|
||||
<h3 className="text-xl font-bold mb-2 dreamy-text">2023</h3>
|
||||
<p className="text-sm" style={getTextStyle()}>Wirtschaftliche Instabilität</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2024-2025 */}
|
||||
<div className="flex items-center">
|
||||
<div className="w-1/2 pr-8 text-right">
|
||||
<h3 className="text-xl font-bold mb-2 dreamy-text">2024-2025</h3>
|
||||
<p className="text-sm" style={getTextStyle()}>Extreme Wetterereignisse nehmen zu</p>
|
||||
</div>
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
|
||||
style={{background: 'var(--accent-gradient)'}}></div>
|
||||
<div className="w-1/2 pl-8">
|
||||
<div className="dreamy-card p-4">
|
||||
<p className="text-sm mb-2" style={getTextStyle()}>Verstärkte Wasserträume in von
|
||||
Überschwemmungen betroffenen Regionen</p>
|
||||
<p className="text-xs" style={getTextStyle('muted')}>Hitzewellen führten zu
|
||||
fragmentierten Träumen durch veränderte Schlafmuster</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Detailed Event Sections */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 dream-title">Detaillierte Ereignisanalyse</h2>
|
||||
|
||||
{/* COVID-19 Section */}
|
||||
<div className="dreamy-card mb-8 p-6" style={getBackgroundStyle('purple')}>
|
||||
<div className="flex flex-col md:flex-row items-center mb-4">
|
||||
<div className="p-3 bg-purple-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
|
||||
<FaVirus className="text-purple-600 dark:text-purple-400" size={32}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold dreamy-text">COVID-19 Pandemie (2020-2022)</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Traumhäufigkeit</h4>
|
||||
<p className="text-sm">1.622 Teilnehmer in Italien berichteten einen 40% Anstieg der
|
||||
Traumhäufigkeit während des Lockdowns</p>
|
||||
</div>
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Emotionale Auswirkungen</h4>
|
||||
<p className="text-sm">Negative Traumemotionen korrelierten direkt mit
|
||||
Schlafqualitätsverschlechterung</p>
|
||||
</div>
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Häufige Themen</h4>
|
||||
<p className="text-sm">Isolation, Krankheit, Verlust von Kontrolle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm">
|
||||
Die COVID-19 Pandemie hatte einen signifikanten Einfluss auf die Traumlandschaft weltweit.
|
||||
Studien zeigen, dass Menschen während der Lockdown-Phasen häufiger und intensiver träumten,
|
||||
wobei negative Emotionen und Ängste dominierten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Climate Change Section */}
|
||||
<div className="dreamy-card mb-8 p-6" style={getBackgroundStyle('emerald')}>
|
||||
<div className="flex flex-col md:flex-row items-center mb-4">
|
||||
<div className="p-3 bg-emerald-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
|
||||
<FaFire className="text-emerald-600 dark:text-emerald-400" size={32}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold dreamy-text">Klimawandel-Ereignisse (2021-2025)</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Waldbrände</h4>
|
||||
<p className="text-sm">Waldbrände in Australien/Kalifornien führten zu 23% mehr Träumen über
|
||||
Feuer und Flucht</p>
|
||||
</div>
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Überschwemmungen</h4>
|
||||
<p className="text-sm">Überschwemmungen in Europa führten zu verstärkten Wasserträumen in
|
||||
betroffenen Regionen</p>
|
||||
</div>
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Hitzewellen</h4>
|
||||
<p className="text-sm">Veränderte Schlafmuster durch Hitzewellen führten zu fragmentierten
|
||||
Träumen</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm">
|
||||
Klimawandel-Ereignisse spiegeln sich deutlich in den Traummustern wider. Besonders bemerkenswert
|
||||
ist, dass Menschen in direkt betroffenen Regionen häufiger von den spezifischen
|
||||
Naturkatastrophen träumen, die sie erlebt haben.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Geopolitical Tensions Section */}
|
||||
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||
<div className="flex flex-col md:flex-row items-center mb-4">
|
||||
<div className="p-3 bg-blue-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
|
||||
<FaFlag className="text-blue-600 dark:text-blue-400" size={32}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold dreamy-text">Geopolitische Spannungen (2022-2025)</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Konflikt in der Ukraine</h4>
|
||||
<p className="text-sm">Erhöhte Angstträume in europäischen Nachbarländern, besonders in
|
||||
Polen, Rumänien und den baltischen Staaten</p>
|
||||
</div>
|
||||
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||
<h4 className="font-bold mb-2">Wirtschaftskrise</h4>
|
||||
<p className="text-sm">Verstärkte Träume über Jobverlust und finanzielle Sorgen,
|
||||
korrelierend mit globaler wirtschaftlicher Instabilität</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm">
|
||||
Geopolitische Spannungen und Konflikte haben einen messbaren Einfluss auf die Traumlandschaft,
|
||||
wobei die Nähe zum Konfliktgebiet die Intensität der Traumreaktionen beeinflusst.
|
||||
Wirtschaftliche Unsicherheit spiegelt sich in Träumen über finanzielle Sorgen wider.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="flex flex-wrap justify-between items-center">
|
||||
<NavLink to="/dreamarchive" className="dreamy-card p-3 inline-flex items-center">
|
||||
<span className="mr-2">←</span> Zurück zur Übersicht
|
||||
</NavLink>
|
||||
<NavLink to="/dreamarchive/cultural-landscapes" className="dreamy-card p-3 inline-flex items-center">
|
||||
Weiter zu Kulturellen Traumlandschaften <span className="ml-2">→</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
Reference in New Issue
Block a user