Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Interactive Cognitive Timeline</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&family=Space+Mono&display=swap'); | |
| :root { | |
| --bg: #030303; | |
| --accent: #F25CD9; | |
| --accent-soft: rgba(242, 92, 217, 0.2); | |
| --card-bg: rgba(255, 255, 255, 0.03); | |
| --card-border: rgba(255, 255, 255, 0.08); | |
| } | |
| body { | |
| background-color: var(--bg); | |
| color: #fff; | |
| font-family: 'Plus Jakarta Sans', sans-serif; | |
| overflow-x: hidden; | |
| perspective: 1500px; | |
| } | |
| /* 3D Scene setup */ | |
| .scene { | |
| position: relative; | |
| width: 100%; | |
| min-height: 100vh; | |
| padding: 150px 0 80vh 0; | |
| transform-style: preserve-3d; | |
| } | |
| /* The central vertical line */ | |
| .rail { | |
| position: absolute; | |
| left: 50%; | |
| top: 0; | |
| bottom: 80vh; | |
| width: 2px; | |
| background: linear-gradient(to bottom, | |
| transparent, | |
| rgba(242, 92, 217, 0.5) 150px, | |
| rgba(242, 92, 217, 0.5) calc(100% - 150px), | |
| transparent); | |
| transform: translateX(-50%); | |
| z-index: 1; | |
| } | |
| .milestone { | |
| position: relative; | |
| width: 100%; | |
| margin-bottom: 150px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| transform-style: preserve-3d; | |
| transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease; | |
| cursor: pointer; | |
| opacity: 0.3; | |
| } | |
| .milestone.active { | |
| opacity: 1; | |
| } | |
| /* Floating Card Style */ | |
| .card { | |
| position: relative; | |
| width: 100%; | |
| max-width: 450px; | |
| background: var(--card-bg); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid var(--card-border); | |
| border-radius: 24px; | |
| padding: 32px; | |
| transform-style: preserve-3d; | |
| transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.4); | |
| } | |
| .milestone.active .card { | |
| border-color: rgba(242, 92, 217, 0.4); | |
| box-shadow: 0 0 50px rgba(242, 92, 217, 0.15); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| /* Connecting Node */ | |
| .node { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| width: 12px; | |
| height: 12px; | |
| background: #fff; | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| z-index: 2; | |
| transition: all 0.4s ease; | |
| box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px rgba(255,255,255,0.1); | |
| } | |
| .milestone.active .node { | |
| background: var(--accent); | |
| box-shadow: 0 0 0 4px var(--bg), 0 0 20px var(--accent); | |
| transform: translate(-50%, -50%) scale(1.5); | |
| } | |
| /* 3D Positioning: alternating sides */ | |
| .milestone:nth-child(even) .card { | |
| margin-left: 550px; | |
| transform: rotateY(-15deg) translateZ(0); | |
| } | |
| .milestone:nth-child(odd) .card { | |
| margin-right: 550px; | |
| transform: rotateY(15deg) translateZ(0); | |
| } | |
| .milestone.active:nth-child(even) .card { | |
| transform: rotateY(-5deg) translateZ(50px) translateX(-20px); | |
| } | |
| .milestone.active:nth-child(odd) .card { | |
| transform: rotateY(5deg) translateZ(50px) translateX(20px); | |
| } | |
| /* Typography */ | |
| .year-label { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 0.75rem; | |
| color: var(--accent); | |
| letter-spacing: 2px; | |
| margin-bottom: 12px; | |
| display: block; | |
| } | |
| .card h3 { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| line-height: 1.2; | |
| margin-bottom: 16px; | |
| background: linear-gradient(to right, #fff, #aaa); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .card p { | |
| font-size: 0.95rem; | |
| color: rgba(255,255,255,0.6); | |
| line-height: 1.6; | |
| } | |
| /* Header UI */ | |
| .header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| padding: 40px; | |
| z-index: 100; | |
| text-align: center; | |
| background: linear-gradient(to bottom, var(--bg) 20%, transparent); | |
| pointer-events: none; | |
| } | |
| .header h1 { | |
| font-size: 0.8rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5em; | |
| color: rgba(255,255,255,0.4); | |
| margin-bottom: 10px; | |
| } | |
| /* Mobile Adjustments */ | |
| @media (max-width: 1024px) { | |
| .milestone:nth-child(even) .card, | |
| .milestone:nth-child(odd) .card { | |
| margin: 0; | |
| width: 85%; | |
| transform: rotateY(0) ; | |
| } | |
| .rail { left: 5%; } | |
| .node { left: 5%; } | |
| .milestone { justify-content: flex-end; padding-right: 5%; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <h1>Cognitive Evolution Archive</h1> | |
| <div class="w-24 h-1 bg-pink-500 mx-auto mt-4 rounded-full opacity-50"></div> | |
| </header> | |
| <div class="scene" id="scene"> | |
| <div class="rail"></div> | |
| <!-- Milestones injected by JS --> | |
| </div> | |
| <script> | |
| const milestones = [ | |
| { | |
| year: "1930s", | |
| title: "Piaget’s Stage Theory", | |
| desc: "Jean Piaget’s stage theory of cognitive development framed thinking as a sequence of qualitatively different structures that emerge across childhood and adolescence, showing how reasoning capabilities evolve over time (1930s).[simplypsychology]" | |
| }, | |
| { | |
| year: "1940s–1950s", | |
| title: "General Systems Theory", | |
| desc: "Ludwig von Bertalanffy’s General Systems Theory reconceptualized organisms and organizations as open, dynamic systems governed by feedback and hierarchy, laying the groundwork for later systems thinking about complex behavior (1940s–1950s).[journals.sagepub]" | |
| }, | |
| { | |
| year: "1950s", | |
| title: "The Magical Number Seven", | |
| desc: "George Miller’s “Magical Number Seven, Plus or Minus Two” demonstrated hard limits on short-term memory capacity and introduced chunking, quantifying a core bottleneck in human information processing (1950s).[en.wikipedia]" | |
| }, | |
| { | |
| year: "1950s", | |
| title: "Bounded Rationality", | |
| desc: "Herbert Simon’s bounded rationality model argued that decision makers satisfice rather than optimize because their cognition, available information, and time are structurally constrained, redefining rationality in realistic terms (1950s).[edtechbooks]" | |
| }, | |
| { | |
| year: "1950s", | |
| title: "Generative Grammar", | |
| desc: "Noam Chomsky’s early work on generative grammar and his critique of behaviorism showed that language use depends on innate cognitive structures, helping trigger the cognitive revolution away from purely stimulus–response models (1950s).[britannica]" | |
| }, | |
| { | |
| year: "1950s", | |
| title: "Rational Emotive Therapy", | |
| desc: "Albert Ellis’s Rational Emotive Behavior Therapy positioned maladaptive beliefs as the driver of emotional disturbance, inaugurating a cognitive approach to psychotherapy that targets thinking patterns to change feelings and behavior (1950s).[en.wikipedia]" | |
| }, | |
| { | |
| year: "1960s", | |
| title: "Harvard Cognitive Studies", | |
| desc: "The founding of the Harvard Center for Cognitive Studies by Miller and Bruner institutionalized the cognitive revolution, making information-processing models and mental representation central to mainstream psychology (1960s).[news.harvard]" | |
| }, | |
| { | |
| year: "1960s", | |
| title: "Synthesizing Cognition", | |
| desc: "Ulric Neisser’s Cognitive Psychology synthesized emerging research on perception, memory, and thinking into a coherent information-processing framework, formally defining cognitive psychology as the study of internal mental processes (1960s).[taylorfrancis]" | |
| }, | |
| { | |
| year: "1960s", | |
| title: "Beck’s Cognitive Therapy", | |
| desc: "Aaron Beck’s cognitive therapy model identified systematic negative automatic thoughts and cognitive distortions as the mechanism of depression, providing a structured method to improve decisions and mood by restructuring appraisals (1960s).[ebsco]" | |
| }, | |
| { | |
| year: "1970s", | |
| title: "The Limits to Growth", | |
| desc: "Donella Meadows and colleagues’ The Limits to Growth applied system dynamics to global economic–ecological interactions, revealing how feedback loops and delays in complex systems can drive overshoot and collapse despite local rationality (1970s).[en.wikipedia]" | |
| }, | |
| { | |
| year: "1970s", | |
| title: "Heuristics and Biases", | |
| desc: "Amos Tversky and Daniel Kahneman’s heuristics-and-biases program showed that people rely on mental shortcuts like representativeness, availability, and anchoring, producing systematic and predictable deviations from normative probability and logic (1970s).[chenxing]" | |
| }, | |
| { | |
| year: "1970s", | |
| title: "Working-Memory Model", | |
| desc: "Alan Baddeley and Graham Hitch’s working-memory model decomposed short-term storage into a central executive and specialized slave systems, explaining how limited-capacity resources constrain reasoning, language, and multitasking (1970s).[en.wikipedia]" | |
| }, | |
| { | |
| year: "1970s", | |
| title: "Prospect Theory", | |
| desc: "Kahneman and Tversky’s prospect theory described how people evaluate gains and losses relative to reference points, exhibit loss aversion, and distort probabilities, providing a psychologically realistic account of risky choice (1970s).[en.wikipedia]" | |
| }, | |
| { | |
| year: "1990s", | |
| title: "The Fifth Discipline", | |
| desc: "Peter Senge’s The Fifth Discipline framed the learning organization as one that cultivates systems thinking, shared mental models, and team learning, connecting individual cognitive limits with organizational structures that enable better collective decisions (1990s).[meridianuniversity]" | |
| }, | |
| { | |
| year: "2000s", | |
| title: "Thinking in Systems", | |
| desc: "Donella Meadows’ Thinking in Systems articulated core systems concepts—stocks and flows, feedback loops, and leverage points—and argued that durable change comes from shifting system goals and paradigms rather than only adjusting surface variables (2000s).[organism]" | |
| }, | |
| { | |
| year: "2000s–2010s", | |
| title: "Thinking, Fast and Slow", | |
| desc: "Daniel Kahneman’s Nobel Prize and later Thinking, Fast and Slow integrated decades of work into the dual-process framework, distinguishing fast, intuitive System 1 from slow, deliberative System 2, and clarifying when and why human judgment systematically departs from rational-actor models (2000s–2010s).[nobelprize]" | |
| } | |
| ]; | |
| const scene = document.getElementById('scene'); | |
| milestones.forEach((m, i) => { | |
| const milestoneEl = document.createElement('div'); | |
| milestoneEl.className = 'milestone'; | |
| milestoneEl.innerHTML = ` | |
| <div class="node"></div> | |
| <div class="card"> | |
| <span class="year-label">${m.year}</span> | |
| <h3>${m.title}</h3> | |
| <p>${m.desc}</p> | |
| </div> | |
| `; | |
| milestoneEl.addEventListener('click', () => { | |
| milestoneEl.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'center' | |
| }); | |
| }); | |
| scene.appendChild(milestoneEl); | |
| }); | |
| const handleScroll = () => { | |
| const viewportCenter = window.innerHeight / 2; | |
| const elements = document.querySelectorAll('.milestone'); | |
| elements.forEach(el => { | |
| const rect = el.getBoundingClientRect(); | |
| const elementCenter = rect.top + rect.height / 2; | |
| const distance = elementCenter - viewportCenter; | |
| // Tilt logic based on distance from center | |
| const tilt = Math.max(-20, Math.min(20, distance / 20)); | |
| const z = Math.max(0, 1 - Math.abs(distance) / 500); | |
| if (Math.abs(distance) < 200) { | |
| el.classList.add('active'); | |
| } else { | |
| el.classList.remove('active'); | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', () => { | |
| window.requestAnimationFrame(handleScroll); | |
| }); | |
| handleScroll(); | |
| </script> | |
| </body> | |
| </html> |