Penpot MCP: gotchas, template script, workflow documenté

2026-02-28 14:13:10 +00:00
parent e4128f9788
commit e38b484496
14 changed files with 1974 additions and 0 deletions
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { width: 600px; height: 900px; overflow: hidden; }
+
+  .affiche {
+    width: 600px; height: 900px;
+    background: linear-gradient(160deg, #c0392b 0%, #96281b 100%);
+    display: flex; flex-direction: column;
+    align-items: center;
+    font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* Bandes déco */
+  .bande { width: 100%; height: 12px; background: #f1c40f; flex-shrink: 0; }
+
+  /* Cercles déco fond */
+  .cercle {
+    position: absolute; border-radius: 50%;
+    background: rgba(255,255,255,0.04);
+    pointer-events: none;
+  }
+
+  /* Header */
+  .header {
+    width: 100%; background: #7b241c;
+    padding: 14px 0;
+    text-align: center; flex-shrink: 0;
+  }
+  .header span {
+    font-size: 15px; letter-spacing: 8px; font-weight: 900;
+    color: #f1c40f; text-transform: uppercase;
+  }
+
+  /* Corps central */
+  .body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 30px; }
+
+  /* -50% */
+  .pct {
+    font-size: 195px; font-weight: 900; color: #fff;
+    line-height: 0.9; letter-spacing: -6px;
+    text-shadow: 0 6px 30px rgba(0,0,0,0.35), 0 2px 0 rgba(0,0,0,0.3);
+    margin-bottom: 10px;
+  }
+
+  .soldes-label {
+    font-size: 46px; font-weight: 900; color: #f1c40f;
+    letter-spacing: 12px; text-transform: uppercase;
+    text-shadow: 0 3px 10px rgba(0,0,0,0.3);
+    margin-bottom: 6px;
+  }
+
+  .sep { width: 420px; height: 3px; background: linear-gradient(90deg, transparent, #f1c40f, transparent); margin: 18px 0; }
+
+  .subtitle {
+    font-size: 17px; letter-spacing: 3px; font-weight: 700;
+    color: rgba(255,255,255,0.85); text-transform: uppercase;
+    margin-bottom: 28px;
+  }
+
+  /* Badge */
+  .badge {
+    background: #f1c40f;
+    border-radius: 50px;
+    padding: 14px 40px;
+    margin-bottom: 28px;
+  }
+  .badge span {
+    font-size: 20px; font-weight: 900; color: #7b241c;
+    letter-spacing: 2px; text-transform: uppercase;
+  }
+
+  /* Dates */
+  .dates {
+    font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.6);
+    letter-spacing: 2px; margin-bottom: 28px;
+  }
+
+  /* Emojis */
+  .shoes { font-size: 64px; line-height: 1; margin-bottom: 24px; }
+
+  /* Footer */
+  .footer {
+    width: 100%; background: rgba(0,0,0,0.2);
+    padding: 14px;
+    text-align: center; flex-shrink: 0;
+  }
+  .footer span {
+    font-size: 13px; letter-spacing: 4px; color: #f8c471;
+    font-weight: 400; text-transform: uppercase;
+  }
+</style>
+</head>
+<body>
+<div class="affiche">
+
+  <!-- Cercles décoratifs fond -->
+  <div class="cercle" style="width:350px;height:350px;bottom:-60px;right:-80px;"></div>
+  <div class="cercle" style="width:200px;height:200px;top:80px;left:-60px;"></div>
+  <div class="cercle" style="width:120px;height:120px;top:200px;right:30px;"></div>
+
+  <div class="bande"></div>
+
+  <div class="header">
+    <span>✦ Collection Printemps 2026 ✦</span>
+  </div>
+
+  <div class="body">
+    <div class="soldes-label">Soldes</div>
+    <div class="pct">-50%</div>
+    <div class="sep"></div>
+    <div class="subtitle">Sur toutes nos chaussures</div>
+    <div class="badge"><span>⚡ Offre limitée ⚡</span></div>
+    <div class="dates">Du 1er au 31 mars 2026</div>
+    <div class="shoes">👟 &nbsp; 👠 &nbsp; 👞</div>
+  </div>
+
+  <div class="footer">
+    <span>www.votre-boutique.fr</span>
+  </div>
+
+  <div class="bande"></div>
+</div>
+</body>
+</html>