Stillmotion

Tes carrousels

Préparer un HTML pour l'import — brief à copier

Colle ce brief à Claude-design (ou l'IA qui fabrique ton HTML) pour que « Convertir un HTML » le réimporte fidèlement — fond, onglets et encadrés compris.

Tu as déjà mon carrousel. Je vais l'importer dans mon app "Stillmotion".
Réexporte son HTML à l'identique visuellement, en respectant STRICTEMENT ces règles (sinon l'import casse) :

STRUCTURE
- 1 slide = 1 <div data-screen-label="Nom" style="position:relative; flex:none; width:1080px; height:1350px; overflow:hidden; background:#XXXXXX;">
- Tout est en position absolue à l'intérieur.

FOND (couleur unie obligatoire)
- Uniquement background:#XXXXXX; sur le <div> de slide.
- INTERDIT sur la slide : background-image, linear-gradient, quadrillage, texture, dégradé.
- Pas de grille décorative en fond : elle se transforme en dizaines de traits parasites. Laisse le fond nu.

APLATS DE COULEUR (onglets, encadrés, panneaux)
- N'utilise JAMAIS un <div> coloré (background:#XXX) comme bloc/onglet/encadré : ils ne sont PAS importés.
- À la place : SVG inline avec <rect> (rectangle/encadré) ou <polygon> (forme d'onglet de classeur). Exemple :
  <svg style="position:absolute; left:80px; top:1030px; width:928px; height:96px;" viewBox="0 0 928 96"><rect width="928" height="96" fill="#A93A75"/></svg>
  Place le SVG AVANT le texte qui va dessus.

TEXTES
- Balises <h1>..<h4>, <p>, <span> avec styles inline : color, font-size, font-weight, letter-spacing, line-height, text-transform, text-align.
- Accent manuscrit sur un BLOC entier : <span style="font-family:'Playfair Display'; font-style:italic">…</span>.

ACCENTS AU FIL DE LA PHRASE (ticket 107) — écris le MARQUEUR en clair dans le texte
- L'app les reconnaît à l'import et les rend comme de vrais accents, dosables et recolorables ensuite.
- N'ajoute AUCUN style inline sur un mot marqué : le marqueur suffit, et il l'emporte sur le style.
- *mot* manuscrit (Playfair italique) · %%mot%% surligné plein · ==mot== fluo · __mot__ feutre
- ::mot:: petites capitales espacées · ((mot)) cadre · ,,mot,, vague · //mot// barré · ++mot++ crochets
- ^^mot^^ mono · !!mot!! néon · <<mot>> dégradé · @@mot@@ cercle · ##mot## coins · ''mot'' curseur
- Exemple : <h1 style="…">4 outils qui m'ont fait *gagner* des heures</h1>
- Les guillemets ne sont PAS un marqueur à l'import : ils restent de la ponctuation.

IMAGES
- <img src="…"> avec src en data: (base64) UNIQUEMENT (ou https://).
- Embarque TOUTES les photos en data: — un chemin relatif (adobe/photo.png) devient un emplacement vide.

FRISE / TRAITS / RONDS déco
- En SVG simple : <line>, <polyline>, <circle>, <ellipse> (restent éditables dans l'app).

Rends-moi le HTML complet, toutes les slides.

Chargement…