jmartin/petitspas
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ajout du parcours complet d’inscription parent avec UI harmonisée et gestion centralisée des données

Browse Source
This commit is contained in:
Julien Martin
2025-05-12 16:42:24 +02:00
parent d3663a28ad
commit 5156f4fefb
61 changed files with 2807 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ressources/wizard_styles.html
+63
View File
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>P’titsPas – Propositions UI Wizard</title>
<link href="https://fonts.googleapis.com/css2?family=Merienda:wght@600&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>
body{background:#fffef9;font-family:Inter,sans-serif;color:#2f2f2f;line-height:1.6;padding:2rem;}
h1,h2{font-family:Merienda,cursive;margin:.5rem 0;}
.grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{background:#fff;border-radius:18px;box-shadow:0 4px 12px rgba(0,0,0,.05);padding:1.5rem;text-align:center;}
img{max-width:100%;height:auto;border-radius:12px;}
.palette{display:flex;justify-content:center;gap:.5rem;margin-top:.75rem;}
.swatch{width:28px;height:28px;border-radius:50%;}
.code{font-size:.75rem;margin-top:.25rem;}
</style>
</head>
<body>
<h1>Création de compte : idées d’enchaînement de cartes</h1>
<p>Chaque étape s’affiche dans une « carte » pastel. En validant, la carte suivante glisse vers l’avant (animation CSS : <code>transform: translateX(-100%)</code> + <code>opacity</code>). Trois styles proposés :</p>
<div class="grid">
<div class="card">
<h2>Style 1 : Watercolor</h2>
<img src="A_digital_graphic_design_image_displays_style_opti.png" alt="watercolor stack"/>
<div class="palette">
<div class="swatch" style="background:#FBC9C4"></div>
<div class="swatch" style="background:#FBD38B"></div>
<div class="swatch" style="background:#A9D8C6"></div>
</div>
<div class="code">#FBC9C4 · #FBD38B · #A9D8C6</div>
<p>Bords arrondis 22 px, texture papier sur chaque carte.<br><b>Animation</b> : légère rotation (<em>tilt</em>) pour rappeler un paquet de cartes réaliste.</p>
</div>
<div class="card">
<h2>Style 2 : Minimal pastel</h2>
<img src="A_digital_graphic_design_image_displays_style_opti.png" alt="minimal stack"/>
<div class="palette">
<div class="swatch" style="background:#E3DFFD"></div>
<div class="swatch" style="background:#CFEAE3"></div>
<div class="swatch" style="background:#FFE88A"></div>
</div>
<div class="code">#E3DFFD · #CFEAE3 · #FFE88A</div>
<p>Cartes plates, ombre portée subtile (0 2 8 rgba0,05).<br><b>Animation</b> : slide horizontal + fondu rapide.</p>
</div>
<div class="card">
<h2>Style 3 : Modern vibrant</h2>
<img src="A_digital_graphic_design_image_displays_style_opti.png" alt="modern stack"/>
<div class="palette">
<div class="swatch" style="background:#FB86A2"></div>
<div class="swatch" style="background:#F3D468"></div>
<div class="swatch" style="background:#8AC1E3"></div>
</div>
<div class="code">#FB86A2 · #F3D468 · #8AC1E3</div>
<p>Coins arrondis 12 px pour une touche « app mobile ».<br><b>Animation</b> : carte sort par la gauche, nouvelle carte zoome légèrement.</p>
</div>
</div>
<footer style="font-size:.8rem;margin-top:2rem">© 2025 P’titsPas – maquettes UI</footer>
</body>
</html>