« Frise test » : différence entre les versions

De Wiki Game of Arkadia
Aller à la navigation Aller à la recherche
← Modification précédenteModification suivante →
VisuelWikicode
Aucun résumé des modifications
Balise : Révoqué
Aucun résumé des modifications
Balise : Révoqué
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>


<timeline>
<h1>Chronologie - Âge de la plénitude</h1>
# All measures are in pixels


ImageSize  = width:160 height:550
<div class="timeline-wrapper">
PlotArea   = left:50 right:0 bottom:10 top:10
   <div class="timeline">
AlignBars  = justify


DateFormat = yyyy
    <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
Period    = from:1917 till:1991
      style="left: 0.0000%; width: 2.0000%; background: #83e7be;"
TimeAxis  = orientation:vertical
      title="Signature du Traité d’El Dorado — Wikipédia">
ScaleMajor = unit:year increment:5 start:1920
    </a>
    <div class="event-label" style="left: 1.0000%;">
      Signature du Traité d’El Dorado
    </div>


# there is no automatic collision detection,
    <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
# so shift texts up or down manually to avoid overlap
      style="left: 16.0000%; width: 2.0000%; background: #white;"
      title="-49 à -35 — Wikipédia">
    </a>
    <div class="event-label" style="left: 17.0000%;">
      -49 à -35
    </div>


Define $dx = 25 # shift text to right side of bar
    <a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment"
      style="left: 2.0000%; width: 28.0000%; background: #F59787;"
      title="Bataille du Royaume Céleste — Wikipédia">
    </a>
    <div class="event-label" style="left: 16.0000%;">
      Bataille du Royaume Céleste
    </div>


PlotData=
    <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
  bar:Leaders color:red width:25 mark:(line,white) align:left fontsize:S
      style="left: 4.0000%; width: 2.0000%; background: #FA5050;"
      title="Massacre de la forge — Wikipédia">
    </a>
    <div class="event-label" style="left: 5.0000%;">
      Massacre de la forge
    </div>


  from:start till:1924 shift:($dx,15)  text:Vladimir~Ilyich~[[Special:MyLanguage/Lenin|Lenin]]
    <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
  from:1924  till:1953 shift:($dx,5)    text:[[Special:MyLanguage/Stalin|Josef~Stalin]]
      style="left: 6.0000%; width: 2.0000%; background: #F57C64;"
  from:1953  till:1964 shift:($dx,5)    text:Nikita~[[Special:MyLanguage/Khrushchev|Khrushchev]]
      title="Invasion de Nocturna — Wikipédia">
  from:1964  till:1982 shift:($dx,5)    text:Leonid~[[Special:MyLanguage/Brezhnev|Brezhnev]]
    </a>
  from:1982  till:1984 shift:($dx,-12)  text:Yuri~[[Special:MyLanguage/Andropov|Andropov]]
    <div class="event-label" style="left: 7.0000%;">
  from:1984  till:1985 shift:($dx,4)    text:Konstantin~[[Special:MyLanguage/Chernenko|Chernenko]] fontsize:XS
      Invasion de Nocturna
  from:1985  till:end  shift:($dx,10)   text:Mikhail~[[Special:MyLanguage/Gorbachev|Gorbachev]]
    </div>
</timeline>
 
    <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>

Version du 24 mars 2026 à 19:36

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>

Chronologie - Âge de la plénitude

   <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
      style="left: 0.0000%; width: 2.0000%; background: #83e7be;"
      title="Signature du Traité d’El Dorado — Wikipédia">
   </a>

     Signature du Traité d’El Dorado

   <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
      style="left: 16.0000%; width: 2.0000%; background: #white;"
      title="-49 à -35 — Wikipédia">
   </a>

     -49 à -35

   <a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment"
      style="left: 2.0000%; width: 28.0000%; background: #F59787;"
      title="Bataille du Royaume Céleste — Wikipédia">
   </a>

     Bataille du Royaume Céleste

   <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
      style="left: 4.0000%; width: 2.0000%; background: #FA5050;"
      title="Massacre de la forge — Wikipédia">
   </a>

     Massacre de la forge

   <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
      style="left: 6.0000%; width: 2.0000%; background: #F57C64;"
      title="Invasion de Nocturna — Wikipédia">
   </a>

     Invasion de Nocturna

   <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>

     Deuxième guerre de l'Abîme

   <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>

     Bataille de Riddermark

   <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>

     Dernier carrée de Primordia

   <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>

     -4 à 0

     An -50

     -48

     -47

     -49

     -35

     -15

     An 0

     -15

     -4

     An 0

</body>

Récupérée de "https://wiki.gameofarkadia.net/index.php?title=Frise_test&oldid=422"