|
|
| (138 versions intermédiaires par le même utilisateur non affichées) |
| Ligne 1 : |
Ligne 1 : |
| Page servant de test pour les frises chronologiques, sera supprimé avant l'ouverture.
| | <timeline> |
| | DateFormat = yyyy |
| | ImageSize = width:1600 height:auto barincrement:25 |
| | PlotArea = left:20 right:40 bottom:30 top:25 |
|
| |
|
| <head>
| | Colors = |
| <meta charset="UTF-8">
| | id:AgeDeLaPlenitude value:magenta |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | | id:LaNouvelleArkadia value:powderblue |
| <title>Chronologie - Âge de la plénitude</title>
| | id:AgeDesHeros value:brightgreen |
| <style>
| | id:AgeDeLaRuine value:red |
| * {
| | id:lightgrey value:gray(0.9) |
| margin: 0;
| | id:darkgrey value:gray(0.1) |
| padding: 0;
| | id:canvas value:rgb(0.97,0.97,0.97) |
| box-sizing: border-box;
| | id:grid1 value:rgb(0.80,0.80,0.80) |
| }
| | id:grid2 value:rgb(0.90,0.90,0.90) |
| 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>
| | Period = from:-2840 till:150 |
| | TimeAxis = orientation:horizontal format:yyyy |
| | ScaleMinor = unit:year increment:50 start:-2840 gridcolor:grid2 |
| | ScaleMajor = unit:year increment:100 start:-2840 gridcolor:grid1 |
| | AlignBars = justify |
|
| |
|
| <div class="timeline-wrapper">
| | BackgroundColors = canvas:white bars:white |
| <div class="timeline">
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | BarData= |
| style="left: 0.0000%; width: 2.0000%; background: #83e7be;"
| | bar:Titlebar |
| title="Signature du Traité d’El Dorado — Wikipédia">
| | bar:Ere |
| </a>
| | bar:Separator |
| <div class="event-label" style="left: 1.0000%;">
| | barset:Ev1 |
| Signature du Traité d’El Dorado
| |
| </div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | PlotData= |
| style="left: 16.0000%; width: 2.0000%; background: #white;"
| | width:25 fontsize:S textcolor:black align:center |
| title="-49 à -35 — Wikipédia">
| |
| </a>
| |
| <div class="event-label" style="left: 17.0000%;">
| |
| -49 à -35
| |
| </div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment"
| | bar:Titlebar color:lightgrey shift:(0,-3) |
| style="left: 2.0000%; width: 28.0000%; background: #F59787;"
| | from:start till:end text:"[[Frise des ères]]" |
| title="Bataille du Royaume Céleste — Wikipédia">
| | width:30 fontsize:S textcolor:black anchor:from align:left |
| </a>
| |
| <div class="event-label" style="left: 16.0000%;">
| |
| Bataille du Royaume Céleste
| |
| </div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | bar:Ere |
| style="left: 4.0000%; width: 2.0000%; background: #FA5050;"
| | from:-2840 till:-2700 color:AgeDesHeros |
| title="Massacre de la forge — Wikipédia">
| | from:-2700 till:-50 color:AgeDeLaRuine |
| </a>
| | from:-50 till:0 color:AgeDeLaPlenitude |
| <div class="event-label" style="left: 5.0000%;">
| | from:0 till:150 color:LaNouvelleArkadia |
| Massacre de la forge
| |
| </div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | barset:Ev1 |
| style="left: 6.0000%; width: 2.0000%; background: #F57C64;"
| | at:-2840 text:"[https://wiki.gameofarkadia.net/index.php/L%27%C3%A2ge_des_H%C3%A9ros|-2840 à -2700, l'Âge des Héros] |
| title="Invasion de Nocturna — Wikipédia">
| | at:-2700 text:"[https://wiki.gameofarkadia.net/index.php/Age_de_la_ruine|-2700 à -50 - L'Âge de la Ruine]" |
| </a>
| | at:-50 text:"[https://wiki.gameofarkadia.net/index.php/L%27%C3%A2ge_de_La_Pl%C3%A9nitude|-50 à 0 - l'Âge de la Plénitude]" |
| <div class="event-label" style="left: 7.0000%;">
| | at:0 text:"[https://wiki.gameofarkadia.net/index.php/Nouvelle_Arkadia|0 à 150 - La Nouvelle Arkadia]" |
| Invasion de Nocturna
| | </timeline> |
| </div>
| |
| | |
| <a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment"
| |
| style="left: 70.0000%; width: 30.0000%; background: #FA5050;"
| |
| title="Deuxième guerre de l'Abîme — Wikipédia">
| |
| </a>
| |
| <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"
| |
| style="left: 70.0000%; width: 2.0000%; background: #F59787;"
| |
| title="Bataille de Riddermark — Wikipédia">
| |
| </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"
| |
| style="left: 92.0000%; width: 2.0000%; background: #F59787;"
| |
| title="Dernier carrée de Primordia — Wikipédia">
| |
| </a>
| |
| <div class="event-label" style="left: 93.0000%;">
| |
| Dernier carrée de Primordia
| |
| </div>
| |
| | |
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| |
| style="left: 94.0000%; width: 2.0000%; background: #white;"
| |
| 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%;">
| |
| An -50
| |
| </div>
| |
| | |
| <div class="tick" style="left: 4.0000%;">
| |
| -48
| |
| </div>
| |
| | |
| <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> | |
