Abekta

The Encyclopédie of CASSA

User Tools

Site Tools


courses:ast100:0

This is an old revision of the document!


Seven Ages of the Universe

Slides: https://drive.google.com/file/d/1DBFDq3OmjU5NfHvFGyoQhV7ZI_SJ2e-j/view

The history of the universe is divided into seven distinct ages based on the increasing complexity of matter and life. It begins with the Particle age, spanning the first 300,000 years, where fundamental particles and the first atoms formed. This was followed by the Galactic age, lasting from 300,000 years to 4 billion years, during which the first large-scale structures and galaxies assembled. The Stellar age ensued from 4 billion to 9 billion years, marked by the peak of star formation and the creation of heavier elements. Following this, the Planetary age occurred between 9 billion and 11 billion years, seeing the birth of solar systems and solid worlds. The timeline then transitions into the Chemical age (11 to 13 billion years), where complex organic molecules began to synthesize, paving the way for the Biological age (13 to 14 billion years), representing the rise of complex life on water and land. Finally, the Cultural age occupies the most recent 300,000 years, defined by the emergence of humanity, technology, and complex culture.

This figure creates a symbolic geography by linking these cosmic milestones to specific segments of the international Brahmaputra river’s flow through China, India, and Bangladesh. The Angsi river at the source represents the primordial Particle age, which transitions into the Tsangpo river across the Tibetan plateau, mirroring the expansive Galactic age. As the river carves through the Himalayas as the Siang river, it corresponds to the high-energy Stellar age. Upon entering the plains of India, it becomes the Brahmaputra river, symbolizing the formation of stable ground in the Planetary age. As it moves toward the Bengal delta, the Jamuna river section represents the Chemical age, while its transformation into the Padma river aligns with the Biological age of life’s complexity. The journey concludes with the Meghna river meeting the Bay of Bengal, representing the Cultural age—the most recent and complex stage of development near the river’s end and the modern human era.

The analogy between time and a river suggests that history is a directional flow that gains complexity and volume as it moves toward its destination. Just as a river begins at a narrow, high-energy mountain source and carves a single path through the landscape, the past is a defined sequence of events that becomes more “solid” as we move away from the origin. However, as the river reaches the delta and meets the Bay of Bengal, it dissolves into a vast, boundless horizon. In this metaphor, the ocean represents the many possibilities of the future; while the past is a singular track we can look back upon, the future is an expansive, unwritten space where all paths merge.

1. Timelines

<!DOCTYPE html> <html lang=“en”> <head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cosmic Evolution Timeline</title>
  <style>
      :root {
          --bg-color: #0b0d17;
          --card-bg: #15192b;
          --text-primary: #e0e6ed;
          --text-secondary: #94a3b8;
          --accent-particle: #f72585; /* Pink */
          --accent-galactic: #7209b7; /* Purple */
          --accent-stellar: #4361ee; /* Blue */
          --accent-planetary: #4cc9f0; /* Light Blue */
          --accent-chemical: #06d6a0; /* Teal */
          --accent-biological: #ffd166; /* Yellow */
          --accent-cultural: #ef476f; /* Red */
      }
  • {

box-sizing: border-box;

          margin: 0;
          padding: 0;
      }
      body {
          font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
          background-color: var(--bg-color);
          color: var(--text-primary);
          line-height: 1.6;
          padding-bottom: 50px;
      }
      header {
          text-align: center;
          padding: 60px 20px;
          background: radial-gradient(circle at center, #1b2735 0%, #090a0f 100%);
          margin-bottom: 40px;
      }
      h1 {
          font-size: 2.5rem;
          margin-bottom: 10px;
          letter-spacing: 2px;
          text-transform: uppercase;
      }
      p.subtitle {
          color: var(--text-secondary);
          font-size: 1.1rem;
      }
      .container {
          max-width: 900px;
          margin: 0 auto;
          padding: 0 20px;
      }
      /* Age Section Styling */
      .age-section {
          margin-bottom: 20px;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 4px 6px rgba(0,0,0,0.3);
          background-color: var(--card-bg);
          transition: transform 0.2s ease;
      }
      .age-header {
          padding: 20px 30px;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: rgba(255,255,255,0.05);
          border-left: 6px solid transparent;
          user-select: none;
      }
      .age-header:hover {
          background-color: rgba(255,255,255,0.1);
      }
      .age-title {
          font-size: 1.4rem;
          font-weight: 700;
      }
      .age-meta {
          font-size: 0.9rem;
          color: var(--text-secondary);
          margin-left: 15px;
      }
      .toggle-icon {
          font-size: 1.5rem;
          transition: transform 0.3s ease;
      }
      .age-content {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.5s ease-out;
          background-color: #10121b;
      }
      /* Timeline Items */
      .timeline {
          position: relative;
          padding: 30px 30px 30px 50px;
      }
      .timeline::before {
          content: '';
          position: absolute;
          left: 24px;
          top: 0;
          bottom: 0;
          width: 2px;
          background: rgba(255,255,255,0.1);
      }
      .event-item {
          position: relative;
          margin-bottom: 40px;
      }
      .event-item:last-child {
          margin-bottom: 0;
      }
      .event-dot {
          position: absolute;
          left: -33px;
          top: 5px;
          width: 14px;
          height: 14px;
          border-radius: 50%;
          background-color: var(--bg-color);
          border: 2px solid #fff;
          z-index: 1;
      }
      .time-badge {
          display: inline-block;
          font-size: 0.85rem;
          font-weight: bold;
          color: var(--text-secondary);
          margin-bottom: 5px;
          font-family: monospace;
          background: rgba(255,255,255,0.05);
          padding: 2px 8px;
          border-radius: 4px;
      }
      .event-title {
          font-size: 1.2rem;
          margin-bottom: 8px;
          color: #fff;
      }
      .event-desc {
          color: var(--text-secondary);
          font-size: 0.95rem;
      }
      /* Specific Age Colors */
      .age-particle { border-color: var(--accent-particle); }
      .age-particle .age-title { color: var(--accent-particle); }
      .age-particle .event-dot { border-color: var(--accent-particle); }
      .age-galactic { border-color: var(--accent-galactic); }
      .age-galactic .age-title { color: var(--accent-galactic); }
      .age-galactic .event-dot { border-color: var(--accent-galactic); }
      .age-stellar { border-color: var(--accent-stellar); }
      .age-stellar .age-title { color: var(--accent-stellar); }
      .age-stellar .event-dot { border-color: var(--accent-stellar); }
      .age-planetary { border-color: var(--accent-planetary); }
      .age-planetary .age-title { color: var(--accent-planetary); }
      .age-planetary .event-dot { border-color: var(--accent-planetary); }
      .age-chemical { border-color: var(--accent-chemical); }
      .age-chemical .age-title { color: var(--accent-chemical); }
      .age-chemical .event-dot { border-color: var(--accent-chemical); }
      .age-biological { border-color: var(--accent-biological); }
      .age-biological .age-title { color: var(--accent-biological); }
      .age-biological .event-dot { border-color: var(--accent-biological); }
      .age-cultural { border-color: var(--accent-cultural); }
      .age-cultural .age-title { color: var(--accent-cultural); }
      .age-cultural .event-dot { border-color: var(--accent-cultural); }
      /* Utility for math superscripts */
      sup {
          font-size: 0.7em;
          vertical-align: super;
      }
      /* Responsive */
      @media (max-width: 600px) {
          .age-header { padding: 15px; }
          .timeline { padding: 20px 15px 20px 30px; }
          .timeline::before { left: 14px; }
          .event-dot { left: -22px; width: 12px; height: 12px; }
          .age-meta { display: block; margin-left: 0; margin-top: 5px; font-size: 0.8rem; }
          .age-header { flex-wrap: wrap; }
          .toggle-icon { margin-left: auto; }
      }
      .rotate {
          transform: rotate(180deg);
      }
      
      .open {
          max-height: 2000px; /* Arbitrary large number for transition */
      }
  </style>

</head> <body>

<header>

  <h1>Cosmic History</h1>
  <p class="subtitle">From the Big Bang to the Life Era</p>

</header>

<div class=“container”>

  <div class="age-section age-particle">
      <div class="age-header">
          <div>
              <span class="age-title">1. Particle Age</span>
              <span class="age-meta">Time after Big Bang</span>
          </div>
          <span class="toggle-icon">▼</span>
      </div>
      <div class="age-content">
          <div class="timeline">
              <div class="event-item">
                  <span class="time-badge">0</span>
                  <h3 class="event-title">The Big Bang</h3>
                  <p class="event-desc">The singularity event marking the origin of space, time, energy and matter (STEM). The universe emerges as an unimaginably hot and dense "primeval fireball".</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">10<sup>-35</sup> to 10<sup>-32</sup> s</span>
                  <h3 class="event-title">Cosmic Inflation</h3>
                  <p class="event-desc">A brief, exponential expansion where the universe swells in size by a factor of roughly 10<sup>50</sup>. This process smoothed out initial irregularities.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">10<sup>-43</sup> to 10<sup>-10</sup> s</span>
                  <h3 class="event-title">Separation of Forces</h3>
                  <p class="event-desc">As the universe cooled, the single unified "superforce" separated into the four fundamental forces: gravity, strong nuclear, weak nuclear, and electromagnetism.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">10<sup>-35</sup> to 1 s</span>
                  <h3 class="event-title">Particle Creation & Annihilation</h3>
                  <p class="event-desc">Energy converted into matter via "pair production". Quarks and leptons emerged. Matter and antimatter collided and annihilated, leaving a slight excess of ordinary matter.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">3 to 15 mins</span>
                  <h3 class="event-title">Primordial Nucleosynthesis</h3>
                  <p class="event-desc">The universe cooled sufficiently (below 10<sup>9</sup> K) for protons and neutrons to fuse, producing the first atomic nuclei: deuterium, helium, and trace lithium.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">50,000 years</span>
                  <h3 class="event-title">Matter Domination</h3>
                  <p class="event-desc">The "crossover point" where the energy density of matter exceeded that of radiation. This marked the end of the "Radiation Era" and the beginning of the "Matter Era".</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">300,000 to 380,000 years</span>
                  <h3 class="event-title">Recombination & Decoupling</h3>
                  <p class="event-desc">Electrons combined with nuclei to form neutral atoms. This neutralized the charged fog, allowing photons to travel freely (observable today as the CMB).</p>
                  <div class="event-dot"></div>
              </div>
          </div>
      </div>
  </div>
  <div class="age-section age-galactic">
      <div class="age-header">
          <div>
              <span class="age-title">2. Galactic Age</span>
              <span class="age-meta">Years after Big Bang</span>
          </div>
          <span class="toggle-icon">▼</span>
      </div>
      <div class="age-content">
          <div class="timeline">
              <div class="event-item">
                  <span class="time-badge">300 ky – 200 My</span>
                  <h3 class="event-title">The Cosmic Dark Ages</h3>
                  <p class="event-desc">The universe was filled with neutral hydrogen and helium but lacked luminous objects. Gravity slowly pulled matter into denser clumps.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">200 My</span>
                  <h3 class="event-title">Cosmic Dawn (Reionization)</h3>
                  <p class="event-desc">The first massive stars and protogalaxies ignited. Their UV radiation re-ionized the surrounding hydrogen, ending the Dark Ages.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">500 My – 1 Gy</span>
                  <h3 class="event-title">Hierarchical Merging</h3>
                  <p class="event-desc">Small "pregalactic blobs" collided and merged to build up larger galactic structures in a "bottom-up" process.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">1 – 2 Gy</span>
                  <h3 class="event-title">Rise of Supermassive Black Holes</h3>
                  <p class="event-desc">Matter collapsed in galaxy centers to form black holes, powering the first quasars which shone with the brightness of a trillion suns.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">2 – 3 Gy</span>
                  <h3 class="event-title">Peak Quasar Epoch</h3>
                  <p class="event-desc">The era of maximum activity for Active Galactic Nuclei. As fuel supplies were consumed, activity subsided, leaving dormant supermassive black holes.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">3 Gy</span>
                  <h3 class="event-title">Large-Scale Structure Formation</h3>
                  <p class="event-desc">Galaxies organized into sheets, filaments, and clusters separated by voids, creating the "cosmic web".</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">4 Gy</span>
                  <h3 class="event-title">Birth of Population I Stars</h3>
                  <p class="event-desc">Enrichment by earlier supernovae allowed the formation of metal-rich stars, setting conditions for future planetary systems.</p>
                  <div class="event-dot"></div>
              </div>
          </div>
      </div>
  </div>
  <div class="age-section age-stellar">
      <div class="age-header">
          <div>
              <span class="age-title">3. Stellar Age</span>
              <span class="age-meta">Years after Big Bang</span>
          </div>
          <span class="toggle-icon">▼</span>
      </div>
      <div class="age-content">
          <div class="timeline">
              <div class="event-item">
                  <span class="time-badge">4 Gy</span>
                  <h3 class="event-title">Formation of Milky Way's Thin Disk</h3>
                  <p class="event-desc">The Milky Way flattened into a thin disk, coinciding with the birth of metal-rich Population I stars.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">4 – 5 Gy</span>
                  <h3 class="event-title">Peak Star Formation Rate</h3>
                  <p class="event-desc">Massive stars acted as "nuclear forges," fusing hydrogen and helium into carbon, oxygen, and iron.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">6 Gy</span>
                  <h3 class="event-title">Emergence of Galactic Habitable Zone</h3>
                  <p class="event-desc">A region emerged where metallicity was sufficient for planets and supernovae frequency was low enough to allow safe orbits.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">Ongoing (4 – 9 Gy)</span>
                  <h3 class="event-title">Stellar Nucleosynthesis & Supernovae</h3>
                  <p class="event-desc">Stars fused elements up to iron. Core-collapse explosions enriched the interstellar medium and synthesized heavy elements (gold, uranium).</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">7 Gy</span>
                  <h3 class="event-title">Acceleration of Cosmic Expansion</h3>
                  <p class="event-desc">Expansion began to accelerate due to "dark energy," transitioning the universe to a dark-energy-dominated era.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">9 Gy</span>
                  <h3 class="event-title">Solar Nebula Collapse</h3>
                  <p class="event-desc">Collapse of an interstellar cloud initiated the formation of the Sun and Solar System approx. 4.6 billion years ago.</p>
                  <div class="event-dot"></div>
              </div>
          </div>
      </div>
  </div>
  <div class="age-section age-planetary">
      <div class="age-header">
          <div>
              <span class="age-title">4. Planetary Age</span>
              <span class="age-meta">Years after Big Bang</span>
          </div>
          <span class="toggle-icon">▼</span>
      </div>
      <div class="age-content">
          <div class="timeline">
              <div class="event-item">
                  <span class="time-badge">9.1 Gy</span>
                  <h3 class="event-title">Accretion of Planetesimals</h3>
                  <p class="event-desc">Dust grains collided to form planetesimals, which coalesced into the protoplanets of the Solar System.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">9.1 Gy</span>
                  <h3 class="event-title">The T-Tauri Solar Wind</h3>
                  <p class="event-desc">The young Sun's intense winds swept away remaining nebular gas, halting Jovian planet growth and stripping early atmospheres.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">9.2 Gy</span>
                  <h3 class="event-title">Planetary Differentiation & Moon Formation</h3>
                  <p class="event-desc">Earth melted; heavy metals sank to form the core. A massive collision created the debris ring that formed the Moon.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">9.4 Gy</span>
                  <h3 class="event-title">Formation of Atmosphere and Oceans</h3>
                  <p class="event-desc">Volcanic outgassing and comets created a secondary atmosphere and the first oceans as Earth cooled.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">9.6 Gy – 10 Gy</span>
                  <h3 class="event-title">Late Heavy Bombardment</h3>
                  <p class="event-desc">Intense asteroid/comet impacts pulverized the early crust, keeping the surface hostile.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">10 Gy – 11 Gy</span>
                  <h3 class="event-title">Stabilization of the Lithosphere</h3>
                  <p class="event-desc">Earth's crust stabilized, and the first continents formed, creating a stable environment for chemical evolution.</p>
                  <div class="event-dot"></div>
              </div>
          </div>
      </div>
  </div>
  <div class="age-section age-chemical">
      <div class="age-header">
          <div>
              <span class="age-title">5. Chemical Age</span>
              <span class="age-meta">Years after Big Bang</span>
          </div>
          <span class="toggle-icon">▼</span>
      </div>
      <div class="age-content">
          <div class="timeline">
              <div class="event-item">
                  <span class="time-badge">10.5 – 11 Gy</span>
                  <h3 class="event-title">Synthesis of Prebiotic Molecules</h3>
                  <p class="event-desc">Gases, lightning, and UV radiation synthesized amino acids and nucleotide bases.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">11 Gy</span>
                  <h3 class="event-title">Protocells & The "RNA World"</h3>
                  <p class="event-desc">Formation of proteinoid microspheres. RNA likely served as both genetic carrier and catalyst.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">11.5 Gy</span>
                  <h3 class="event-title">Emergence of Prokaryotes</h3>
                  <p class="event-desc">First true living cells (heterotrophic bacteria) appeared, likely in hydrothermal vents.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">12 Gy</span>
                  <h3 class="event-title">Invention of Photosynthesis</h3>
                  <p class="event-desc">Bacteria (e.g., cyanobacteria) converted sunlight into food, allowing life to spread globally.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">12.2 Gy</span>
                  <h3 class="event-title">The Oxygen Crisis</h3>
                  <p class="event-desc">Accumulation of free oxygen was toxic to anaerobic organisms but enabled efficient respiration.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">12.5 Gy</span>
                  <h3 class="event-title">Eukaryotic Symbiosis</h3>
                  <p class="event-desc">Symbiosis between large cells and bacteria (mitochondria/chloroplasts) created complex eukaryotes.</p>
                  <div class="event-dot"></div>
              </div>
          </div>
      </div>
  </div>
  <div class="age-section age-biological">
      <div class="age-header">
          <div>
              <span class="age-title">6. Biological Age</span>
              <span class="age-meta">Years Ago (from present)</span>
          </div>
          <span class="toggle-icon">▼</span>
      </div>
      <div class="age-content">
          <div class="timeline">
              <div class="event-item">
                  <span class="time-badge">1 Gy</span>
                  <h3 class="event-title">Rise of Multicellularity</h3>
                  <p class="event-desc">Single-celled eukaryotes cooperated, leading to cell specialization and complexity.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">540 – 600 My</span>
                  <h3 class="event-title">The Cambrian Explosion</h3>
                  <p class="event-desc">"Biology's big bang": rapid burst of diversification, hard shells, and predator-prey dynamics.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">400 – 475 My</span>
                  <h3 class="event-title">Colonization of Land</h3>
                  <p class="event-desc">Life migrated to continents. Plants, arthropods, and early amphibians adapted to gravity and desiccation.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">300 My</span>
                  <h3 class="event-title">Dominance of Reptiles</h3>
                  <p class="event-desc">Watertight skin and amniotic eggs allowed reptiles to dominate Pangea.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">200 My</span>
                  <h3 class="event-title">Emergence of Mammals</h3>
                  <p class="event-desc">Small, warm-blooded mammals appeared, developing fur, milk production, and larger brains.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">65 My</span>
                  <h3 class="event-title">K-T Mass Extinction</h3>
                  <p class="event-desc">Asteroid impact wiped out dinosaurs, allowing mammals to dominate the Cenozoic era.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">5 – 7 My</span>
                  <h3 class="event-title">Divergence of Hominids</h3>
                  <p class="event-desc">Human ancestors separated from great apes. Bipedalism began, setting the stage for the Cultural Age.</p>
                  <div class="event-dot"></div>
              </div>
          </div>
      </div>
  </div>
  <div class="age-section age-cultural">
      <div class="age-header">
          <div>
              <span class="age-title">7. Cultural Age</span>
              <span class="age-meta">Years Ago (from present)</span>
          </div>
          <span class="toggle-icon">▼</span>
      </div>
      <div class="age-content">
          <div class="timeline">
              <div class="event-item">
                  <span class="time-badge">1 My – 500 ky</span>
                  <h3 class="event-title">Control of Fire</h3>
                  <p class="event-desc">Use of fire allowed for higher energy intake and brain growth.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">200 – 300 ky</span>
                  <h3 class="event-title">Emergence of Humans</h3>
                  <p class="event-desc">Modern humans appeared in Africa with superior potential for communication and adaptation.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">50 ky</span>
                  <h3 class="event-title">The "Cultural Explosion"</h3>
                  <p class="event-desc">"Culture's big bang": tool kits, cave art, and symbolic language.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">10 ky</span>
                  <h3 class="event-title">The Agricultural Revolution</h3>
                  <p class="event-desc">Shift to farming and animal domestication led to population surges and settled life.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">5 ky</span>
                  <h3 class="event-title">Rise of Civilization and State</h3>
                  <p class="event-desc">Complex hierarchies, city-states, and the invention of writing (recorded history).</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">250 years ago</span>
                  <h3 class="event-title">The Industrial Revolution</h3>
                  <p class="event-desc">Exploitation of fossil fuels mechanized production and globalized society.</p>
                  <div class="event-dot"></div>
              </div>
              <div class="event-item">
                  <span class="time-badge">Present / Future</span>
                  <h3 class="event-title">The "Life Era"</h3>
                  <p class="event-desc">Technological life manipulates matter and genetic evolution. Humans potentially leave Earth to dominate cosmic matter.</p>
                  <div class="event-dot"></div>
              </div>
          </div>
      </div>
  </div>

</div>

<script>

  document.addEventListener('DOMContentLoaded', () => {
      const headers = document.querySelectorAll('.age-header');
      headers.forEach(header => {
          header.addEventListener('click', () => {
              const content = header.nextElementSibling;
              const icon = header.querySelector('.toggle-icon');
              // Toggle class for animation
              content.classList.toggle('open');
              icon.classList.toggle('rotate');
              // Optional: Close others (Accordion style) - currently disabled to allow multiple open
              // headers.forEach(otherHeader => {
              //     if (otherHeader !== header) {
              //         otherHeader.nextElementSibling.classList.remove('open');
              //         otherHeader.querySelector('.toggle-icon').classList.remove('rotate');
              //     }
              // });
          });
      });
  });

</script>

</body> </html>

courses/ast100/0.1769412313.txt.gz · Last modified: by asad

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki