-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathworkflow-git.html
More file actions
470 lines (418 loc) · 23 KB
/
workflow-git.html
File metadata and controls
470 lines (418 loc) · 23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explorateur Gitflow Interactif</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Phosphor Icons pour les icônes (comme le bouton Explorer) -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<style>
/* --- Styles Néon & Animations --- */
body { background-color: #0b0f19; font-family: 'Inter', sans-serif; }
.diagram-container {
background:
linear-gradient(rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.85)),
url('images/tech-background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
/* Lignes et Noeuds SVG */
.git-line {
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: all 0.4s ease;
opacity: 0.5;
}
.git-node {
stroke-width: 0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
/* Couleurs des branches */
:root {
--color-main: #3b82f6; /* Bleu */
--color-develop: #06b6d4; /* Cyan */
--color-feature: #8b5cf6; /* Violet */
--color-release: #22c55e; /* Vert */
--color-hotfix: #f43f5e; /* Rouge */
}
/* --- États Actifs (Hover/Click) --- */
/* Quand un groupe est actif */
.g-group.active .git-line {
opacity: 1;
stroke-width: 4;
filter: drop-shadow(0 0 8px currentColor);
}
.g-group.active .git-node {
transform: scale(1.3);
stroke: #fff;
stroke-width: 2px;
filter: drop-shadow(0 0 15px currentColor);
transform-box: fill-box;
transform-origin: center;
}
/* Accordéon */
.accordion-item {
border: 1px solid #1e293b;
background-color: #111827;
transition: all 0.3s ease;
}
.accordion-item.active {
background-color: #1e293b;
border-color: #3b82f6; /* Bordure bleue active */
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out, opacity 0.3s ease;
opacity: 0;
}
.accordion-item.active .accordion-content {
max-height: 320px; /* Assez grand pour le contenu détaillé */
opacity: 1;
}
.chevron {
transition: transform 0.3s ease;
}
.accordion-item.active .chevron {
transform: rotate(180deg);
}
/* Return Button Styles */
.return-button {
position: fixed;
top: 20px;
left: 20px;
background: rgba(52, 152, 219, 0.9);
color: white;
border: none;
border-radius: 50px;
padding: 12px 20px;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
z-index: 1000;
}
.return-button:hover {
background: rgba(41, 128, 185, 0.95);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}
.return-button svg {
width: 16px;
height: 16px;
}
</style>
</head>
<body class="text-slate-300 min-h-screen flex items-center justify-center p-4">
<!-- Return Button -->
<a href="index.html" class="return-button">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 12H5M12 5L5 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Retour à la documentation
</a>
<!-- Container Principal (Card) -->
<div class="max-w-6xl w-full bg-slate-950 rounded-2xl shadow-2xl border border-slate-800 flex flex-col lg:flex-row overflow-hidden" style="min-height: 600px;">
<!-- GAUCHE : VISUALISATION (L'Image Interactive) -->
<div class="lg:w-2/3 diagram-container relative flex items-center justify-center bg-slate-900">
<!-- Décoration de fond (Grille) -->
<div class="absolute inset-0 opacity-20"
style="background-image: radial-gradient(#64748b 1px, transparent 1px); background-size: 30px 30px;">
</div>
<!-- SVG Diagram -->
<svg viewBox="0 0 800 500" class="w-full h-full z-10 p-8">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- 1. MAIN BRANCH (Ligne du haut) -->
<g class="g-group" data-target="main" style="color: var(--color-main);">
<path d="M 50 100 L 750 100" class="git-line" stroke="currentColor" />
<text x="50" y="80" fill="currentColor" font-weight="bold" font-size="14">MAIN</text>
<!-- Nodes -->
<rect x="180" y="85" width="30" height="30" rx="4" transform="rotate(45 195 100)" class="git-node" fill="currentColor" />
<rect x="580" y="85" width="30" height="30" rx="4" transform="rotate(45 595 100)" class="git-node" fill="currentColor" />
<rect x="720" y="85" width="30" height="30" rx="4" transform="rotate(45 735 100)" class="git-node" fill="currentColor" />
</g>
<!-- 2. DEVELOP BRANCH (Ligne du milieu) -->
<g class="g-group" data-target="develop" style="color: var(--color-develop);">
<path d="M 50 250 L 750 250" class="git-line" stroke="currentColor" />
<!-- Lien depuis Main -->
<path d="M 195 100 L 195 250" class="git-line" stroke="currentColor" stroke-dasharray="6,4" />
<text x="50" y="230" fill="currentColor" font-weight="bold" font-size="14">DEVELOP</text>
<!-- Nodes -->
<rect x="180" y="235" width="30" height="30" rx="4" transform="rotate(45 195 250)" class="git-node" fill="currentColor" />
<rect x="300" y="235" width="30" height="30" rx="4" transform="rotate(45 315 250)" class="git-node" fill="currentColor" />
<rect x="450" y="235" width="30" height="30" rx="4" transform="rotate(45 465 250)" class="git-node" fill="currentColor" />
</g>
<!-- 3. FEATURE BRANCHES (Lignes du bas) -->
<g class="g-group" data-target="feature" style="color: var(--color-feature);">
<!-- Feature 1 -->
<path d="M 315 250 C 315 320, 330 380, 360 380 L 380 380 C 410 380, 435 320, 435 250"
class="git-line" stroke="currentColor" fill="none" />
<!-- Feature 2 -->
<path d="M 195 250 C 195 350, 220 420, 260 420 L 270 420 C 300 420, 315 300, 315 250"
class="git-line" stroke="currentColor" fill="none" opacity="0.3" />
<text x="340" y="410" fill="currentColor" font-size="12">Feature</text>
<!-- Nodes -->
<rect x="360" y="365" width="30" height="30" rx="4" transform="rotate(45 375 380)" class="git-node" fill="currentColor" />
<rect x="250" y="405" width="30" height="30" rx="4" transform="rotate(45 265 420)" class="git-node" fill="currentColor" />
</g>
<!-- 4. RELEASE BRANCH (Entre Main et Dev) -->
<g class="g-group" data-target="release" style="color: var(--color-release);">
<path d="M 465 250 C 480 170, 520 170, 550 170 L 560 170 C 580 170, 595 120, 595 100"
class="git-line" stroke="currentColor" fill="none" />
<text x="500" y="160" fill="currentColor" font-size="12">Release v1.0</text>
<!-- Node -->
<rect x="535" y="155" width="30" height="30" rx="4" transform="rotate(45 550 170)" class="git-node" fill="currentColor" />
</g>
<!-- 5. HOTFIX (Tout en haut) -->
<g class="g-group" data-target="hotfix" style="color: var(--color-hotfix);">
<path d="M 595 100 C 610 40, 660 40, 690 40 L 700 40 C 720 40, 735 80, 735 100"
class="git-line" stroke="currentColor" fill="none" />
<!-- Retour vers Develop -->
<path d="M 735 100 L 735 250" class="git-line" stroke="currentColor" stroke-dasharray="4,4" />
<text x="640" y="30" fill="currentColor" font-size="12">Hotfix</text>
<!-- Nodes -->
<rect x="675" y="25" width="30" height="30" rx="4" transform="rotate(45 690 40)" class="git-node" fill="currentColor" />
</g>
</svg>
</div>
<!-- DROITE : ACCORDÉON (Contenu) -->
<div class="lg:w-1/3 bg-slate-950 flex flex-col border-l border-slate-800">
<!-- Header -->
<div class="p-6 border-b border-slate-800">
<h2 class="text-xl font-bold text-white">Workflow Gitflow</h2>
</div>
<!-- Liste Accordéon -->
<div class="flex-1 overflow-y-auto" id="accordion-container">
<!-- 1. Vue d'ensemble -->
<div class="accordion-item border-b border-slate-800" data-target="overview">
<button class="w-full text-left p-4 flex items-center justify-between focus:outline-none group">
<span class="font-semibold text-slate-200 group-hover:text-white">Vue d'ensemble</span>
<i class="ph ph-caret-down text-slate-500 chevron"></i>
</button>
<div class="accordion-content px-4 pb-4">
<p class="text-sm text-slate-400 mb-3">
Le <strong>Gitflow Workflow</strong> est un modèle de branchement robuste pour Git, spécialement conçu pour gérer des projets avec des cycles de release structurés.
</p>
<p class="text-sm text-slate-400 mb-2">
<strong>Objectif :</strong> Fournir un framework strict qui sépare clairement le développement de nouvelles fonctionnalités, la préparation des releases, et les correctifs de production.
</p>
<p class="text-sm text-slate-400">
<strong>Idéal pour :</strong> Équipes travaillant sur des versions planifiées avec des déploiements réguliers en production.
</p>
</div>
</div>
<!-- 2. Main Branch -->
<div class="accordion-item border-b border-slate-800" data-target="main">
<button class="w-full text-left p-4 flex items-center justify-between focus:outline-none group">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-blue-500"></span>
<span class="font-semibold text-slate-200">Branche Principale (Main)</span>
</div>
<i class="ph ph-caret-down text-slate-500 chevron"></i>
</button>
<div class="accordion-content px-4 pb-4">
<p class="text-sm text-slate-400 mb-3">
La <strong>branche de production</strong> - elle doit toujours refléter un état prêt pour la production, contenant uniquement la version stable du code qui a été officiellement publiée.
</p>
<div class="text-xs text-slate-500 mb-2">
<strong>Règles strictes :</strong>
</div>
<ul class="text-xs text-slate-400 ml-4 space-y-1">
<li>• Aucun commit direct autorisé</li>
<li>• Seules les fusions depuis Release ou Hotfix</li>
<li>• Chaque commit est tagué avec un numéro de version</li>
<li>• Représente toujours le dernier état déployé</li>
</ul>
</div>
</div>
<!-- 3. Develop Branch -->
<div class="accordion-item border-b border-slate-800" data-target="develop">
<button class="w-full text-left p-4 flex items-center justify-between focus:outline-none group">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-cyan-500"></span>
<span class="font-semibold text-slate-200">Branche de Développement</span>
</div>
<i class="ph ph-caret-down text-slate-500 chevron"></i>
</button>
<div class="accordion-content px-4 pb-4">
<p class="text-sm text-slate-400 mb-3">
La <strong>branche d'intégration</strong> où convergent toutes les nouvelles fonctionnalités. Créée depuis Main au début du projet, elle sert de point central pour le développement.
</p>
<div class="text-xs text-slate-500 mb-2">
<strong>Cycle de vie :</strong>
</div>
<ul class="text-xs text-slate-400 ml-4 space-y-1">
<li>• Reçoit les fusions de toutes les branches Feature</li>
<li>• Permet la résolution des conflits entre fonctionnalités</li>
<li>• Base de création des branches Release</li>
<li>• Maintient l'historique complet du développement</li>
</ul>
</div>
</div>
<!-- 4. Feature Branches -->
<div class="accordion-item border-b border-slate-800" data-target="feature">
<button class="w-full text-left p-4 flex items-center justify-between focus:outline-none group">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-purple-500"></span>
<span class="font-semibold text-slate-200">Branches Fonctionnalités</span>
</div>
<i class="ph ph-caret-down text-slate-500 chevron"></i>
</button>
<div class="accordion-content px-4 pb-4">
<p class="text-sm text-slate-400 mb-3">
<strong>Branches dédiées</strong> créées pour chaque nouvelle fonctionnalité. Elles isolent le travail en cours du code principal, réduisant les risques de bugs dans Develop.
</p>
<div class="text-xs text-slate-500 mb-2">
<strong>Workflow typique :</strong>
</div>
<ul class="text-xs text-slate-400 ml-4 space-y-1">
<li>• Création depuis Develop (git checkout -b feature/nom)</li>
<li>• Développement isolé de la fonctionnalité</li>
<li>• Tests et validation en local</li>
<li>• Merge Request vers Develop</li>
<li>• Suppression après fusion réussie</li>
</ul>
</div>
</div>
<!-- 5. Release Branch -->
<div class="accordion-item border-b border-slate-800" data-target="release">
<button class="w-full text-left p-4 flex items-center justify-between focus:outline-none group">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-green-500"></span>
<span class="font-semibold text-slate-200">Branche de Release</span>
</div>
<i class="ph ph-caret-down text-slate-500 chevron"></i>
</button>
<div class="accordion-content px-4 pb-4">
<p class="text-sm text-slate-400 mb-3">
<strong>Branche de préparation</strong> créée quand Develop atteint un point stable et prêt pour une release. Elle permet la finalisation sans bloquer le développement futur.
</p>
<div class="text-xs text-slate-500 mb-2">
<strong>Processus de release :</strong>
</div>
<ul class="text-xs text-slate-400 ml-4 space-y-1">
<li>• Création d'un Release Candidate (RC1, RC2...)</li>
<li>• Déploiement en environnement de staging</li>
<li>• Tests finaux et corrections mineures uniquement</li>
<li>• Fusion simultanée vers Main ET Develop</li>
<li>• Tag de version sur Main (v1.0, v1.1...)</li>
</ul>
</div>
</div>
<!-- 6. Hotfix -->
<div class="accordion-item border-b border-slate-800" data-target="hotfix">
<button class="w-full text-left p-4 flex items-center justify-between focus:outline-none group">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-rose-500"></span>
<span class="font-semibold text-slate-200">Correctif (Hotfix)</span>
</div>
<i class="ph ph-caret-down text-slate-500 chevron"></i>
</button>
<div class="accordion-content px-4 pb-4">
<p class="text-sm text-slate-400 mb-3">
<strong>Branche d'urgence</strong> - la seule autorisée à partir directement de Main. Créée pour corriger rapidement un bug critique découvert en production.
</p>
<div class="text-xs text-slate-500 mb-2">
<strong>Processus d'urgence :</strong>
</div>
<ul class="text-xs text-slate-400 ml-4 space-y-1">
<li>• Création immédiate depuis Main</li>
<li>• Correction ciblée du bug critique</li>
<li>• Tests rapides mais rigoureux</li>
<li>• Fusion vers Main (nouveau tag v1.0.1)</li>
<li>• Fusion vers Develop (évite la régression)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Script de Logique (Interaction Bidirectionnelle) -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const svgGroups = document.querySelectorAll('.g-group');
const accordions = document.querySelectorAll('.accordion-item');
let clickedSection = null; // Track which section was clicked
// 1. Fonction pour activer une section
function activateSection(targetName) {
// Reset tout
svgGroups.forEach(g => g.classList.remove('active'));
accordions.forEach(acc => acc.classList.remove('active'));
// Si pas de cible, on arrête (ex: souris sort)
if(!targetName) return;
// Active le groupe SVG correspondant
const activeSvg = document.querySelector(`.g-group[data-target="${targetName}"]`);
if(activeSvg) activeSvg.classList.add('active');
// Active l'accordéon correspondant
const activeAcc = document.querySelector(`.accordion-item[data-target="${targetName}"]`);
if(activeAcc) {
activeAcc.classList.add('active');
// Scroll automatique doux vers l'item si nécessaire
activeAcc.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}
// 2. Events sur le SVG (Click only)
svgGroups.forEach(group => {
// Click to toggle selection
group.addEventListener('click', () => {
const target = group.getAttribute('data-target');
// Toggle behavior: if same section clicked, close it
if (clickedSection === target) {
clickedSection = null;
activateSection(null);
} else {
clickedSection = target;
activateSection(target);
}
});
});
// 3. Events sur l'Accordéon (Click only)
accordions.forEach(acc => {
// Click to toggle selection
acc.addEventListener('click', () => {
const target = acc.getAttribute('data-target');
// Toggle behavior: if same section clicked, close it
if (clickedSection === target) {
clickedSection = null;
activateSection(null);
} else {
clickedSection = target;
activateSection(target);
}
});
});
// Double-click anywhere to reset (unlock)
document.addEventListener('dblclick', () => {
clickedSection = null;
activateSection('overview');
});
// Active "Overview" par défaut au chargement
setTimeout(() => {
clickedSection = null;
activateSection('overview');
}, 500);
});
</script>
</body>
</html>