chim1chim2/sweet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

classe et espece

Browse Source
This commit is contained in:
LATCHIMY Nicolas
2026-02-15 22:58:55 +04:00
parent 2e3b1d7199
commit b173f63088
28 changed files with 487 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/pages/creation.astro Normal file
View File

@@ -0,0 +1,167 @@
---
import { getCollection } from "astro:content";
import GameLayout from "../layouts/GameLayout.astro";
const classes = await getCollection("classes");
const especes = await getCollection("especes");
---
<GameLayout title="Création de Personnage">
<div class="creation-container">
<!-- Section for Classes -->
<section class="character-select">
<h2 class="dnd-title">Choisissez votre Classe</h2>
<div class="dnd-bar"></div>
<p class="dnd-intro">
La classe définit vos compétences et votre rôle dans l'aventure.
</p>
<div class="class-grid">
{
classes.map((charClass) => (
<div class="class-card">
<h3>{charClass.data.title}</h3>
<p>{charClass.data.description}</p>
<a
href={`/classes/${charClass.id}`}
class="select-button"
>
Détails
</a>
</div>
))
}
</div>
</section>
<!-- Section for Species -->
<section class="character-select">
<h2 class="dnd-title">Choisissez votre Espèce</h2>
<div class="dnd-bar"></div>
<p class="dnd-intro">
L'espèce influence votre apparence, votre histoire et certaines
de vos aptitudes.
</p>
<div class="class-grid">
{
especes.map((espece) => (
<div class="class-card">
<h3>{espece.data.title}</h3>
<p>{espece.data.description}</p>
<a
href={`/especes/${espece.id}`}
class="select-button"
>
Détails
</a>
</div>
))
}
</div>
</section>
</div>
</GameLayout>
<style>
.creation-container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem 1rem;
}
.character-select {
margin: 4rem 0;
}
.dnd-title {
font-family: "Playfair Display", serif;
font-size: 2.5rem;
color: #c89b3c;
margin: 0;
text-align: center;
}
.dnd-bar {
height: 3px;
background: linear-gradient(
to right,
transparent 0%,
#c89b3c 50%,
transparent 100%
);
margin: 4px auto 1rem auto;
width: 50%;
}
.dnd-intro {
font-family: "Cinzel", serif;
font-size: 0.9rem;
margin-top: 1rem;
opacity: 0.8;
text-align: center;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.class-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.class-card {
background: white;
border: 1px solid #c89b3c;
padding: 2rem 1.5rem;
border-radius: 5px;
text-align: center;
transition:
transform 0.3s,
box-shadow 0.3s;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.class-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(200, 155, 60, 0.2);
}
.class-card h3 {
font-family: "Playfair Display", serif;
font-size: 1.8rem;
color: #c89b3c;
margin: 0 0 1rem 0;
}
.class-card p {
font-family: "Cinzel", serif;
font-size: 0.85rem;
opacity: 0.9;
flex-grow: 1;
margin-bottom: 1.5rem;
}
.select-button {
font-family: "Cinzel", serif;
font-size: 0.9rem;
background: transparent;
color: #c89b3c;
border: 1px solid #c89b3c;
padding: 0.5rem 1rem;
border-radius: 3px;
cursor: pointer;
transition:
background-color 0.3s,
color 0.3s;
text-decoration: none;
display: inline-block;
}
.select-button:hover {
background: #c89b3c;
color: white;
}
</style>