classe et espece

This commit is contained in:
2026-02-17 19:44:29 +04:00
parent b0c2c7c240
commit 7a05310f0b
4 changed files with 469 additions and 13 deletions

View File

@@ -78,12 +78,87 @@ const especeData = personnages.reduce((acc, p) => {
<div class="dnd-bar"></div>
<p class="dnd-intro">
La classe définit vos compétences et votre rôle.
<br />
<span style="color:rgba(147, 72, 255, 1)">Arcane</span>,
<span style="color:rgba(230, 57, 70, 1)">Martial</span>,
<span style="color:rgba(100, 100, 100, 1)">Neutre</span>
<span style="color:rgba(200, 155, 60, 1)">Sacré</span>,
<span style="color:rgba(42, 157, 143, 1)">Primal</span>
<br /><br />
<span
style="
color: rgba(147, 72, 255, 1);
background-color: white;
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
box-shadow:
0 10px 25px -5px
color-mix(in srgb, rgba(147, 72, 255, 1), transparent 80%),
0 8px 10px -6px
color-mix(in srgb, rgba(147, 72, 255, 1), transparent 85%);
}
"
>Arcane</span
>
<span
style="
color: rgba(230, 57, 70, 1);
background-color: white;
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
box-shadow:
0 10px 25px -5px
color-mix(in srgb, rgba(230, 57, 70, 1), transparent 80%),
0 8px 10px -6px
color-mix(in srgb, rgba(230, 57, 70, 1), transparent 85%);
}
"
>Martial</span
>
<span
style="
color: rgba(100, 100, 100, 1);
background-color: white;
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
box-shadow:
0 10px 25px -5px
color-mix(in srgb, rgba(100, 100, 100, 1), transparent 80%),
0 8px 10px -6px
color-mix(in srgb, rgba(100, 100, 100, 1), transparent 85%);
}
"
>Neutre</span
>
<span
style="
color: rgba(200, 155, 60, 1);
background-color: white;
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
box-shadow:
0 10px 25px -5px
color-mix(in srgb, rgba(200, 155, 60, 1), transparent 80%),
0 8px 10px -6px
color-mix(in srgb, rgba(200, 155, 60, 1), transparent 85%);
}
"
>Sacré</span
>
<span
style="
color: rgba(42, 157, 143, 1);
background-color: white;
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
box-shadow:
0 10px 25px -5px
color-mix(in srgb, rgba(42, 157, 143, 1), transparent 80%),
0 8px 10px -6px
color-mix(in srgb, rgba(42, 157, 143, 1), transparent 85%);
}
"
>Primal</span
>
</p>
<div class="class-grid">
@@ -135,12 +210,52 @@ const especeData = personnages.reduce((acc, p) => {
<div class="dnd-bar"></div>
<p class="dnd-intro">
L'espèce influence votre apparence et votre histoire
<br />
<span style="color: rgba(200, 155, 60, 1)">solaire</span>,
<span style="color: rgba(0, 171, 255, 1)">elementaire</span>,
<span style="color: rgba(139, 69, 19, 1)">terrestre</span>,
<span style="color: rgba(0, 128, 0, 1)">sylvestre</span>,
<span style="color:rgba(75, 0, 130, 1)">ombre</span>
<br /><br />
<span
style="
background-color: rgba(200, 155, 60, 0.4);
margin: 5px;
padding: 5px;
border-radius: 5px;
"
>Solaire</span
>
<span
style="
background-color: rgba(0, 171, 255, 0.4);
margin: 5px;
padding: 5px;
border-radius: 5px;
"
>Elementaire</span
>
<span
style="
background-color: rgba(139, 69, 19, 0.4);
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
"
>Terrestre</span
>
<span
style="
background-color: rgba(0, 128, 0, 0.4);
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
"
>Sylvestre</span
>
<span
style="
background-color: rgba(75, 0, 130, 0.4);
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
"
>Ombre</span
>
</p>
<div class="class-grid">