etienne-delvarre/tdb-rdb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vision : remplacer contenu réel par placeholders inspirants

Browse Source 
Myriam doit découvrir la page et se sentir invitée à écrire
son propre contenu — pas lire un synopsis qu'elle n'a pas validé.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Etienne Delvarre
2026-05-28 19:46:03 +02:00
parent b308e1026c
commit 149ea95af2
1 changed files with 39 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+39 -92
View File
@@ -312,44 +312,43 @@
<div class="hero-banner">
<div class="hero-overlay">
<div class="three-words">Gracieux &middot; Ingénieux &middot; Chaleureux</div>
<div class="hero-sub">Fin XVIIIe / début XIXe &mdash; univers indéfini assumé</div>
<div class="three-words" style="color:rgba(255,255,255,0.5); font-style:italic;">Les trois mots qui définissent votre univers...</div>
<div class="hero-sub">Image d'ambiance &mdash; cliquer pour remplacer</div>
</div>
</div>
<div class="v-card full">
<h3>Ce que raconte vraiment ce livre</h3>
<div class="vision-phrase">L'histoire extérieure &mdash; empêcher l'opportuniste &mdash; est la tension narrative. Mais ce qui se passe vraiment, c'est Tristan qui découvre qui il est, Emeline qui choisit qui elle veut être, et Léopold qui apprend ce que son père n'a pas pu lui enseigner.</div>
<div class="vision-detail">Le lecteur suit l'opportuniste par tension. Il reste pour les personnages.</div>
<h3>L'histoire en une phrase</h3>
<div class="vision-phrase" style="color:var(--text-light); font-style:italic;">Cliquez pour écrire la phrase qui résume votre histoire...</div>
<div class="vision-detail" style="color:var(--text-light); font-style:italic;">Modifiable à tout moment par les deux auteurs</div>
</div>
<div class="v-card full">
<h3>Synopsis</h3>
<div class="vision-detail">
Après la faillite de sa startup, Tristan revient dans la ville où son père a travaillé toute sa vie &mdash; une cité autrefois prospère, désormais sous le joug de Darius, un opportuniste qui a saisi le chaos d'une catastrophe pour instaurer son régime. Tristan découvre un monde où les biens communs sont privatisés, les artistes bannis, et les habitants convaincus que toute action est vouée à l'échec.
<br><br>
Guidé par Gédéon, un vieil exilé portant ses propres fautes, Tristan apprend à vivre avec peu et à tirer des enseignements de la nature. Quand il frappe à la porte d'Emeline &mdash; une jeune femme au bord du désespoir &mdash; leur rencontre devient l'étincelle qui relance tout. Ensemble, avec un groupe grandissant d'exilés, ils construisent une société parallèle fondée sur la création de valeur, pas sur le vol.
<br><br>
Mais Tristan porte le poids d'un père calomnié, d'une identité à reconquérir et d'un choix impossible entre la mission collective et sa quête personnelle. Et dans l'ombre, Léopold &mdash; le fils de l'Empereur disparu &mdash; joue un double jeu dont personne ne soupçonnera l'issue.
<div class="vision-detail" style="color:var(--text-light); font-style:italic;">Développez ici le résumé de votre histoire en quelques paragraphes &mdash; les grandes lignes, les enjeux, l'arc principal...</div>
<div class="vision-detail" style="color:var(--text-light); font-style:italic; margin-top:8px;">Peut évoluer au fil de l'écriture</div>
</div>
<div class="v-card">
<h3>Ambiance, époque, rythme</h3>
<div class="tag-group">
<span class="tag ambiance">Ambiance sombre</span>
<span class="tag epoque">Époque fictive</span>
<span class="tag rythme">Rythme lent puis rapide</span>
<span class="tag genre">Aventure</span>
<span class="tag genre">Drame</span>
<span class="tag ambiance">Suspense</span>
</div>
</div>
<div class="v-card">
<h3>Ambiance et thèmes</h3>
<div class="tag-group">
<span class="tag ambiance">Conte / légende</span>
<span class="tag genre">Aventure</span>
<span class="tag genre">Drame</span>
<span class="tag rythme">Lent puis rapide</span>
<span class="tag epoque">Fin XVIIIe</span>
<span class="tag theme">Entrepreneuriat</span>
<span class="tag theme">Création de valeur</span>
<span class="tag theme">Résistance</span>
<span class="tag theme">Leadership</span>
<span class="tag theme">Magnanimité</span>
<span class="tag theme">Ingéniosité / low-tech</span>
<span class="tag theme">Transcendance</span>
<span class="tag ambiance">Non-violence</span>
<h3>Moodboard</h3>
<div style="display:grid; grid-template-columns:repeat(5,1fr); gap:10px;">
<div style="aspect-ratio:1; border-radius:10px; background:linear-gradient(135deg, var(--accent), var(--brown)); position:relative; overflow:hidden;"><span style="position:absolute;bottom:8px;left:8px;font-size:12px;color:#fff;background:rgba(44,24,16,0.5);padding:3px 8px;border-radius:4px;">Ambiance nuit</span></div>
<div style="aspect-ratio:1; border-radius:10px; background:linear-gradient(135deg, #a07850, #8a6840); position:relative; overflow:hidden;"><span style="position:absolute;bottom:8px;left:8px;font-size:12px;color:#fff;background:rgba(44,24,16,0.5);padding:3px 8px;border-radius:4px;">Architecture</span></div>
<div style="aspect-ratio:1; border-radius:10px; background:linear-gradient(135deg, #7a8a5a, #5a6a40); position:relative; overflow:hidden;"><span style="position:absolute;bottom:8px;left:8px;font-size:12px;color:#fff;background:rgba(44,24,16,0.5);padding:3px 8px;border-radius:4px;">Forêt</span></div>
<div style="aspect-ratio:1; border-radius:10px; background:linear-gradient(135deg, var(--terra), #a07050); position:relative; overflow:hidden;"><span style="position:absolute;bottom:8px;left:8px;font-size:12px;color:#fff;background:rgba(44,24,16,0.5);padding:3px 8px;border-radius:4px;">Costumes</span></div>
<div style="aspect-ratio:1; border-radius:10px; border:2px dashed var(--border); display:flex; align-items:center; justify-content:center;"><span style="color:var(--text-hint); font-size:24px;">+</span></div>
</div>
</div>
@@ -358,96 +357,44 @@
<div class="two-cols">
<div class="list-block">
<h4 class="yes">On veut</h4>
<div class="list-item yes"><span class="bullet"></span> Des personnages profonds avec des arcs complets</div>
<div class="list-item yes"><span class="bullet"></span> Des retournements crédibles et préparés</div>
<div class="list-item yes"><span class="bullet"></span> Un univers immersif, chaleureux et lumineux</div>
<div class="list-item yes"><span class="bullet"></span> La création de valeur, pas le vol</div>
<div class="list-item yes"><span class="bullet"></span> Un héros qui gagne par l'intelligence et la bonté</div>
<div class="list-item yes"><span class="bullet"></span> La complémentarité Tristan/Emeline comme moteur</div>
<div class="list-item yes"><span class="bullet"></span> Des personnages profonds</div>
<div class="list-item yes"><span class="bullet"></span> Des retournements crédibles</div>
<div class="list-item yes"><span class="bullet"></span> Un univers immersif</div>
</div>
<div class="list-block">
<h4 class="no">On ne veut pas</h4>
<div class="list-item no"><span class="bullet"></span> Un ton Young Adult</div>
<div class="list-item no"><span class="bullet"></span> Des coïncidences faciles</div>
<div class="list-item no"><span class="bullet"></span> De la violence gratuite</div>
<div class="list-item no"><span class="bullet"></span> Un antagoniste caricatural</div>
<div class="list-item no"><span class="bullet"></span> Un récit moralisateur</div>
</div>
</div>
</div>
<div class="v-card full">
<div class="v-card">
<h3>Inspirations et références</h3>
<div class="inspi-grid">
<div class="inspi-card">
<div class="inspi-icon">&#128214;</div>
<div class="inspi-title">Robin des Bois</div>
<div class="inspi-type">Structure de base</div>
<div class="inspi-title">Roman A</div>
<div class="inspi-type">Livre</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">Le Comte de Monte-Cristo</div>
<div class="inspi-type">Révélation / vengeance</div>
<div class="inspi-title">Film B</div>
<div class="inspi-type">Film</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">Les Évadés</div>
<div class="inspi-type">Espoir et liberté</div>
<div class="inspi-icon">&#127912;</div>
<div class="inspi-title">Tableau C</div>
<div class="inspi-type">Peinture</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#128214;</div>
<div class="inspi-title">L'Homme le plus riche de Babylone</div>
<div class="inspi-type">Économie vertueuse</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">Stardust</div>
<div class="inspi-type">Conte lumineux</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">Danse avec les Loups</div>
<div class="inspi-type">Romance asymétrique</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">L'Auberge du 6e Bonheur</div>
<div class="inspi-type">Résistance / foi</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127925;</div>
<div class="inspi-title">Tri Yann</div>
<div class="inspi-type">Mémoire d'une cité</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">Le Seigneur des Anneaux</div>
<div class="inspi-type">Univers visuel</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">Benjamin Gates</div>
<div class="inspi-type">Gala / fenêtre d'opportunité</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">À tout jamais</div>
<div class="inspi-type">Clémence du vainqueur</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">Nord et Sud</div>
<div class="inspi-type">Tension sociale / romance</div>
<div class="inspi-card" style="border:1px dashed var(--border); background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center;">
<div style="font-size:24px; color:var(--text-hint);">+</div>
<div class="inspi-type">Ajouter</div>
</div>
</div>
</div>
<div class="v-card full">
<h3>Citation en filigrane</h3>
<div class="vision-quote">&laquo; On t'appellera celui qui répare les brèches &raquo;</div>
<div class="vision-detail">Citation biblique en prologue d'un chapitre, quand Tristan initie son action vers la ville. Dimension prophétique sans alourdissement.</div>
</div>
</div>
</div>
</div>