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

Ajouter page Vision avec contenu reel RdB

Browse Source 
Navigation sidebar Frise/Vision. Page Vision statique avec :
- Banniere trois mots fondateurs (gracieux/ingenieux/chaleureux)
- Synopsis complet
- Tags ambiance/themes
- Ce qu'on veut / ne veut pas
- 12 references d'inspiration
- Citation en filigrane

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Etienne Delvarre
2026-05-28 18:27:44 +02:00
parent 8471e477db
commit 9529565c1c
1 changed files with 250 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+250 -26
View File
@@ -190,11 +190,67 @@
.loading { text-align: center; padding: 60px; color: var(--text-hint); font-style: italic; }
/* ── Vision page ── */
.view { display: none; }
.view.active { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.vision-content { flex: 1; overflow-y: auto; padding: 28px 36px; }
.vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 960px; }
.v-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; box-shadow: 0 1px 4px var(--shadow); }
.v-card.full { grid-column: 1 / -1; }
.v-card h3 { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 600; color: var(--text-hint); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.hero-banner { grid-column: 1 / -1; border-radius: 12px; height: 180px; background: linear-gradient(135deg, #d4a574 0%, #c4956a 30%, #a07850 60%, #7a5c40 100%); position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.dark .hero-banner { background: linear-gradient(135deg, #5a4030 0%, #4a3528 30%, #3a2a20 60%, #2a1e18 100%); }
.hero-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(44,24,16,0.4)); }
.hero-overlay { position: relative; z-index: 1; padding: 20px 28px; width: 100%; }
.hero-overlay .three-words { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; color: #fff; letter-spacing: 2px; }
.hero-overlay .hero-sub { font-size: 14px; color: rgba(255,255,255,0.75); margin-top: 6px; font-style: italic; }
.vision-phrase { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 400; font-style: italic; line-height: 1.7; color: var(--text); }
.vision-detail { font-size: 15px; color: var(--text-muted); line-height: 1.8; margin-top: 12px; }
.tag-group { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500; }
.tag.ambiance { background: #f5ede4; color: #8b5e3c; border: 1px solid #ddc9b4; }
.tag.epoque { background: #eef3e8; color: #5a7a3a; border: 1px solid #c8d8b4; }
.tag.rythme { background: #f5e8e4; color: #a0523d; border: 1px solid #ddc0b4; }
.tag.genre { background: #e8ecf3; color: #4a5a7a; border: 1px solid #b4c0d8; }
.tag.theme { background: #f0eaf5; color: #6a4a7a; border: 1px solid #d0c0e0; }
.dark .tag.ambiance { background: #3a2e20; color: #c49060; border-color: #5a4530; }
.dark .tag.epoque { background: #2a3520; color: #8aaa6a; border-color: #3a4a30; }
.dark .tag.rythme { background: #3a2520; color: #c07050; border-color: #5a3530; }
.dark .tag.genre { background: #20283a; color: #7a8aaa; border-color: #303a50; }
.dark .tag.theme { background: #2a2035; color: #a080b0; border-color: #403050; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.list-block h4 { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.list-block h4.yes { color: #5a7a3a; }
.list-block h4.no { color: #a0523d; }
.dark .list-block h4.yes { color: #8aaa6a; }
.dark .list-block h4.no { color: #c07050; }
.list-item { padding: 8px 0; font-size: 15px; color: var(--text); display: flex; align-items: flex-start; gap: 8px; }
.list-item .bullet { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 8px; }
.list-item.yes .bullet { background: #5a7a3a; }
.list-item.no .bullet { background: #a0523d; }
.dark .list-item.yes .bullet { background: #8aaa6a; }
.dark .list-item.no .bullet { background: #c07050; }
.inspi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.inspi-card { background: var(--bg); border-radius: 10px; padding: 16px; text-align: center; border: 1px solid var(--border); }
.inspi-icon { font-size: 28px; margin-bottom: 8px; }
.inspi-title { font-size: 14px; font-weight: 500; color: var(--brown); }
.inspi-type { font-size: 13px; color: var(--text-hint); margin-top: 4px; }
.vision-quote { font-family: 'Playfair Display', serif; font-size: 17px; font-style: italic; color: var(--text-muted); line-height: 1.7; border-left: 3px solid var(--accent); padding-left: 16px; margin: 12px 0; }
/* Responsive */
@media (max-width: 768px) {
.sidebar { display: none; }
.modal { width: 100%; max-width: 100%; border-radius: 12px 12px 0 0; }
.card { width: 150px; min-width: 150px; }
.vision-grid { grid-template-columns: 1fr; }
.two-cols { grid-template-columns: 1fr; }
}
</style>
</head>
@@ -203,7 +259,8 @@
<div class="sidebar">
<div class="sidebar-logo">Tableau de bord</div>
<div class="sidebar-project">Projet RdB</div>
<div class="nav-item active"><span class="nav-icon">&#9203;</span> Frise</div>
<div class="nav-item active" data-view="frise" onclick="switchView('frise')"><span class="nav-icon">&#9203;</span> Frise</div>
<div class="nav-item" data-view="vision" onclick="switchView('vision')"><span class="nav-icon">&#9733;</span> Vision</div>
<div class="sidebar-footer">Etienne & Myriam</div>
</div>
<div class="main">
@@ -216,34 +273,185 @@
<div class="avatar m">M</div>
</div>
</div>
<div class="filter-bar" id="filter-bar">
<div class="filter-group">
<label>Personnage</label>
<select id="filter-perso" onchange="applyFilters()"><option value="">Tous</option></select>
<!-- ══ VUE FRISE ══ -->
<div class="view active" id="view-frise">
<div class="filter-bar" id="filter-bar">
<div class="filter-group">
<label>Personnage</label>
<select id="filter-perso" onchange="applyFilters()"><option value="">Tous</option></select>
</div>
<div class="filter-group">
<label>Statut</label>
<select id="filter-statut" onchange="applyFilters()"><option value="">Tous</option></select>
</div>
<div class="filter-group">
<label>Type</label>
<select id="filter-type" onchange="applyFilters()"><option value="">Tous</option></select>
</div>
<div class="filter-group">
<label>Recherche</label>
<input type="text" id="filter-search" placeholder="Mot-cle..." oninput="applyFilters()">
</div>
<button class="btn-clear-filters" onclick="clearFilters()">Effacer</button>
</div>
<div class="filter-group">
<label>Statut</label>
<select id="filter-statut" onchange="applyFilters()"><option value="">Tous</option></select>
</div>
<div class="filter-group">
<label>Type</label>
<select id="filter-type" onchange="applyFilters()"><option value="">Tous</option></select>
</div>
<div class="filter-group">
<label>Recherche</label>
<input type="text" id="filter-search" placeholder="Mot-cle..." oninput="applyFilters()">
</div>
<button class="btn-clear-filters" onclick="clearFilters()">Effacer</button>
</div>
<div class="frise-wrapper">
<div class="timeline-area" id="timeline-area">
<div class="loading" id="loading">Chargement...</div>
</div>
<div class="waiting-zone">
<div class="waiting-header">En attente — glisser sur la frise</div>
<div class="waiting-cards" id="waiting-cards"></div>
<div class="frise-wrapper">
<div class="timeline-area" id="timeline-area">
<div class="loading" id="loading">Chargement...</div>
</div>
<div class="waiting-zone">
<div class="waiting-header">En attente — glisser sur la frise</div>
<div class="waiting-cards" id="waiting-cards"></div>
</div>
</div>
</div>
<!-- ══ VUE VISION ══ -->
<div class="view" id="view-vision">
<div class="vision-content">
<div class="vision-grid">
<div class="hero-banner">
<div class="hero-overlay">
<div class="three-words">Gracieux &middot; Ingenieux &middot; Chaleureux</div>
<div class="hero-sub">Fin XVIIIe / debut XIXe &mdash; univers indefini assume</div>
</div>
</div>
<div class="v-card full">
<h3>Ce que raconte vraiment ce livre</h3>
<div class="vision-phrase">L'histoire exterieure &mdash; empecher l'opportuniste &mdash; est la tension narrative. Mais ce qui se passe vraiment, c'est Tristan qui decouvre qui il est, Emeline qui choisit qui elle veut etre, et Leopold qui apprend ce que son pere n'a pas pu lui enseigner.</div>
<div class="vision-detail">Le lecteur suit l'opportuniste par tension. Il reste pour les personnages.</div>
</div>
<div class="v-card full">
<h3>Synopsis</h3>
<div class="vision-detail">
Apres la faillite de sa startup, Tristan revient dans la ville ou son pere a travaille toute sa vie &mdash; une cite autrefois prospere, desormais sous le joug de Darius, un opportuniste qui a saisi le chaos d'une catastrophe pour instaurer son regime. Tristan decouvre un monde ou les biens communs sont privatises, les artistes bannis, et les habitants convaincus que toute action est vouee a l'echec.
<br><br>
Guide par Gedeon, un vieil exile portant ses propres fautes, Tristan apprend a vivre avec peu et a tirer des enseignements de la nature. Quand il frappe a la porte d'Emeline &mdash; une jeune femme au bord du desespoir &mdash; leur rencontre devient l'etincelle qui relance tout. Ensemble, avec un groupe grandissant d'exiles, ils construisent une societe parallele fondee sur la creation de valeur, pas sur le vol.
<br><br>
Mais Tristan porte le poids d'un pere calomnie, d'une identite a reconquerir et d'un choix impossible entre la mission collective et sa quete personnelle. Et dans l'ombre, Leopold &mdash; le fils de l'Empereur disparu &mdash; joue un double jeu dont personne ne soupconnera l'issue.
</div>
</div>
<div class="v-card">
<h3>Ambiance et themes</h3>
<div class="tag-group">
<span class="tag ambiance">Conte / legende</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">Creation de valeur</span>
<span class="tag theme">Resistance</span>
<span class="tag theme">Leadership</span>
<span class="tag theme">Magnanimite</span>
<span class="tag theme">Ingeniosity / low-tech</span>
<span class="tag theme">Transcendance</span>
<span class="tag ambiance">Non-violence</span>
</div>
</div>
<div class="v-card">
<h3>Ce qu'on veut / ne veut pas</h3>
<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 credibles et prepares</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 creation de valeur, pas le vol</div>
<div class="list-item yes"><span class="bullet"></span> Un heros qui gagne par l'intelligence et la bonte</div>
<div class="list-item yes"><span class="bullet"></span> La complementarite Tristan/Emeline comme moteur</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 coincidences 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 recit moralisateur</div>
</div>
</div>
</div>
<div class="v-card full">
<h3>Inspirations et references</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>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">Le Comte de Monte-Cristo</div>
<div class="inspi-type">Revelation / vengeance</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">Les Evades</div>
<div class="inspi-type">Espoir et liberte</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">Economie 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 asymetrique</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">Resistance / foi</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127925;</div>
<div class="inspi-title">Tri Yann</div>
<div class="inspi-type">Memoire d'une cite</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 / fenetre d'opportunite</div>
</div>
<div class="inspi-card">
<div class="inspi-icon">&#127916;</div>
<div class="inspi-title">A tout jamais</div>
<div class="inspi-type">Clemence 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>
</div>
</div>
<div class="v-card full">
<h3>Citation en filigrane</h3>
<div class="vision-quote">&laquo; On t'appellera celui qui repare les breches &raquo;</div>
<div class="vision-detail">Citation biblique en prologue d'un chapitre, quand Tristan initie son action vers la ville. Dimension prophetique sans alourdissement.</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -312,6 +520,22 @@ let records = [];
let columns = {};
let editingId = null;
// ── View switching ──
function switchView(name) {
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
document.getElementById('view-' + name).classList.add('active');
document.querySelectorAll('.nav-item[data-view]').forEach(n => n.classList.toggle('active', n.dataset.view === name));
const topTitle = document.querySelector('.topbar-title');
const btnNew = document.querySelector('.btn-new');
if (name === 'vision') {
topTitle.textContent = 'Vision';
if (btnNew) btnNew.style.display = 'none';
} else {
topTitle.textContent = 'Frise';
if (btnNew) btnNew.style.display = '';
}
}
// ── Dark mode ──
function toggleDark() {
document.body.classList.toggle('dark');