« Frise test » : différence entre les versions

De Wiki Game of Arkadia
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Balise : Révoqué
Aucun résumé des modifications
Ligne 1 : Ligne 1 :
Page servant de test pour les frises chronologiques, sera supprimé avant l'ouverture.
Page servant de test pour les frises chronologiques, sera supprimé avant l'ouverture.


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chronologie - Âge de la plénitude</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #FFFFFF;
      color: #111;
      padding: 40px 20px 300px;
      line-height: 1.45;
    }
    h1 {
      text-align: center;
      margin: 0 0 60px 0;
      font-size: 2.4rem;
    }
    .timeline-wrapper {
      position: relative;
      max-width: 1600px;
      margin: 0 auto;
    }
    .timeline {
      position: relative;
      height: 100px;
      background: #FFFFFF;
      border: 5px solid #000;
      border-radius: 0px;
      margin: 120px 0 220px 0;
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    }
    .segment {
      position: absolute;
      top: 0;
      height: 100%;
      cursor: pointer;
      transition: filter 0.2s ease;
    }
    .segment:hover {
      filter: brightness(1.38);
    }
    .tick {
      position: absolute;
      top: -50px;
      transform: translateX(-50%) rotate(-90deg);
      font-weight: bold;
      font-size: 1.18rem;
      color: #000;
      white-space: nowrap;
      text-align: right;
    }
    .tick-extreme {
      top: -120px;          /* -50px - 40px = décalage de 40px vers le haut */
    }
    .event-label {
      position: absolute;
      bottom: -250px;
      width: 450px;
      left: 50%;            /* centrage corrigé */
      transform: translateX(-50%) rotate(-90deg);
      font-size: 1.08rem;
      font-weight: 600;
      color: #222;
      line-height: 1.4;
      letter-spacing: 0.4px;
      white-space: nowrap;
      text-align: right;
    }
  </style>
</head>
<body>


<h1>Chronologie - Âge de la plénitude</h1>
{{#if: {{{noframe|}}} | | {{navbox top
| name = Extinction events graphical timeline
| title = [[Extinction event]]s
| titlestyle = background-color: #77BB77;
| liststyle = background-color: white; font-size:112%;
| innerstyle = table-layout:fixed;
}}}}<div style="overflow:auto">
{{Simple Horizontal timeline
|width=auto;min-width:80em
|border=none


<div class="timeline-wrapper">
|link-to=Extinction events graphical timeline
  <div class="timeline">
|title=[[Extinction event]]s
|collapsible=yes
|row2=note
|row2-1-text='''Minor events'''
|row2-1-arrow=&nbsp;
|row2-1-at=-590
|row2-2-at=-540
|row2-2-lift=-1em
|row2-2-shift=-4.8em
|row2-2-text=[[End-Ediacaran extinction|End-Ediacaran?]]


    <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
|row2-25-at=-488
      style="left: 0.0000%; width: 2.0000%; background: #83e7be;"
|row2-25-text=[[Cambrian–Ordovician extinction event|Cambrian-Ordovician]]
      title="Signature du Traité d’El Dorado — Wikipédia">
|row2-25-lift=-1em
    </a>
|row2-25-shift=-4.8em
    <div class="event-label" style="left: 1.0000%;">
      Signature du Traité d’El Dorado
    </div>


    <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
|row2-3-at=-420
      style="left: 16.0000%; width: 2.0000%; background: #white;"
|row2-3-text=[[Lau event]]
      title="-49 à -35 — Wikipédia">
|row2-3-lift=-1em
    </a>
|row2-3-shift=-2.5em
    <div class="event-label" style="left: 17.0000%;">
      -49 à -35
    </div>


    <a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment"
|row2-4-at=-183
      style="left: 2.0000%; width: 28.0000%; background: #F59787;"
|row2-4-text=[[Jurassic#Toarcian Oceanic Anoxic Event|Toarcian turnover]]
      title="Bataille du Royaume Céleste — Wikipédia">
|row2-4-lift=-1em
    </a>
|row2-4-shift=-4.3em
    <div class="event-label" style="left: 16.0000%;">
|row2-5-at=-116.5
      Bataille du Royaume Céleste
|row2-5-text=[[Aptian extinction|Aptian]]
    </div>
|row2-5-shift=-3.4em
|row2-6-at=-91.5
|row2-6-text=[[Cenomanian-Turonian boundary event|Cenomanian-Turonian]]
|row2-6-lift=-1.3em
|row2-6-shift=-5.1em


    <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
|row2-7-at=-13.5
      style="left: 4.0000%; width: 2.0000%; background: #FA5050;"
|row2-7-text=[[Middle Miocene disruption|Middle Miocene]]
      title="Massacre de la forge — Wikipédia">
|row2-7-shift=-4.4em
    </a>
|row2-7-lift=-1.3em
    <div class="event-label" style="left: 5.0000%;">
      Massacre de la forge
    </div>


    <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
|row2-75-at=-270
      style="left: 6.0000%; width: 2.0000%; background: #F57C64;"
|row2-75-text=[[Olson's Extinction|Olson's]]
      title="Invasion de Nocturna — Wikipédia">
|row2-75-shift=-3.8em
    </a>
|row2-8-at=-305
    <div class="event-label" style="left: 7.0000%;">
|row2-8-text=[[Carboniferous rainforest collapse|Rainforest collapse]]
      Invasion de Nocturna
|row2-8-shift=-9.0em
    </div>


    <a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment"
|row2-9-at=-260
      style="left: 70.0000%; width: 30.0000%; background: #FA5050;"
|row2-9-text=[[Capitanian mass extinction event|Capitanian]]
      title="Deuxième guerre de l'Abîme — Wikipédia">
|row2-9-lift=-1em
    </a>
|row2-9-shift=-2.8em
    <div class="event-label" style="left: 85.0000%;">
      Deuxième guerre de l'Abîme
    </div>


    <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
|row2-10-at=-250
      style="left: 70.0000%; width: 2.0000%; background: #F59787;"
|row2-10-text=[[Smithian-Spathian boundary event|Smithian-Spathian]]
      title="Bataille de Riddermark — Wikipédia">
|row2-10-shift=-0.3em
    </a>
    <div class="event-label" style="left: 71.0000%;">
      Bataille de Riddermark
    </div>


    <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
|row3=note
      style="left: 92.0000%; width: 2.0000%; background: #F59787;"
|row3-2-at=-444
      title="Dernier carrée de Primordia — Wikipédia">
|row3-2-text=[[Late Ordovician mass extinction|Ordovician-Silurian]]
    </a>
|row3-2-shift=-0.2em
    <div class="event-label" style="left: 93.0000%;">
|row3-3-at=-364
      Dernier carrée de Primordia
|row3-3-text=[[Late Devonian extinction|Late Devonian]]
    </div>
|row3-3-lift=-1em
|row3-3-shift=-3.7em
|row3-4-at=-251.4
|row3-4-text=[[Permian–Triassic extinction event|Permo-Triassic]]
|row3-4-shift=-7.4em
|row3-5-at=-200
|row3-5-text=[[Triassic–Jurassic extinction event|Triassic–Jurassic]]
|row3-5-lift=-0.8em
|row3-5-shift=-4.4em
|row3-6-at=-{{Period start|Danian}}
|row3-6-text=[[Cretaceous–Paleogene extinction event|Cretaceous–Paleogene]]
|row3-6-lift=-0.8em
|row3-6-shift=-3.4em
|row3-7-at=-0
|row3-7-text=[[Holocene extinction event|Holocene]]
|row3-7-lift=-0.8em
|row3-7-shift=-2em
|row3-8-text='''Major events'''
|row3-8-at=-590
|row3-8-arrow=&nbsp;


    <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
|row4={{Geological periods|-600|height=2.5em}}
      style="left: 94.0000%; width: 2.0000%; background: #white;"
|row5={{Geological eras|-600|height=2em|bordertop=none|borderbottom=none}}
      title="-4 à 0 — Wikipédia">
    </a>
    <div class="event-label" style="left: 95.0000%;">
      -4 à 0
    </div>


    <div class="tick tick-extreme" style="left: 0.0000%;">
|row6=scale
      An -50
|from=-600
    </div>
|inc=50
|to=0
|axis-nudge=-1em


    <div class="tick" style="left: 4.0000%;">
|caption=Millions of years before present
      -48
}}</div>
    </div>
{{#if: {{{noframe|}}} | |{{navbox bottom}} }}<noinclude>
 
[[Category:Geological period templates]]</noinclude>
    <div class="tick" style="left: 6.0000%;">
      -47
    </div>
 
    <div class="tick" style="left: 2.0000%;">
      -49
    </div>
 
    <div class="tick" style="left: 30.0000%;">
      -35
    </div>
 
    <div class="tick" style="left: 70.0000%;">
      -15
    </div>
 
    <div class="tick tick-extreme" style="left: 100.0000%;">
      An 0
    </div>
 
    <div class="tick" style="left: 70.0000%;">
      -15
    </div>
 
    <div class="tick" style="left: 92.0000%;">
      -4
    </div>
 
    <div class="tick tick-extreme" style="left: 100.0000%;">
      An 0
    </div>
 
  </div>
</div>
 
<p style="text-align: left; margin-top: 80px; color: #555; font-size: 2.05rem;">
</p>
 
</body>

Version du 25 mars 2026 à 17:02

Page servant de test pour les frises chronologiques, sera supprimé avant l'ouverture.


Modèle:Navbox top

Modèle:Simple Horizontal timeline

Modèle:Navbox bottom