@atlashub/smartstack-cli 1.3.0 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,530 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ralph Loop - SmartStack CLI</title>
7
+ <link rel="stylesheet" href="css/styles.css">
8
+ </head>
9
+ <body>
10
+ <div class="app-container">
11
+ <!-- Global Header -->
12
+ <header class="global-header">
13
+ <div class="logo">SS</div>
14
+ <span class="site-title">SmartStack CLI</span>
15
+ <span class="version-badge">v1.4.0</span>
16
+ <div class="header-divider"></div>
17
+ <span class="page-title">Ralph Loop</span>
18
+ <nav class="breadcrumb">
19
+ <a href="index.html">
20
+ <span data-lang="fr">Accueil</span>
21
+ <span data-lang="en">Home</span>
22
+ </a>
23
+ <span class="breadcrumb-separator">&#8250;</span>
24
+ <span data-lang="fr">Workflows</span>
25
+ <span data-lang="en">Workflows</span>
26
+ <span class="breadcrumb-separator">&#8250;</span>
27
+ <span class="breadcrumb-current">Ralph Loop</span>
28
+ </nav>
29
+ <!-- Language Select -->
30
+ <select class="lang-select" id="lang-select" onchange="setLanguage(this.value); localStorage.setItem('doc-language', this.value);">
31
+ <option value="fr">FR</option>
32
+ <option value="en">EN</option>
33
+ </select>
34
+ <!-- Search -->
35
+ <div class="header-search">
36
+ <div class="search-input-wrapper">
37
+ <span class="search-icon">&#128269;</span>
38
+ <input type="text" id="search-input" class="search-input" placeholder="Rechercher..." data-placeholder-fr="Rechercher..." data-placeholder-en="Search..." autocomplete="off">
39
+ <span class="search-shortcut">Ctrl+K</span>
40
+ </div>
41
+ <div id="search-results" class="search-results"></div>
42
+ </div>
43
+ </header>
44
+
45
+ <!-- App Body -->
46
+ <div class="app-body">
47
+ <!-- Sidebar -->
48
+ <aside class="sidebar">
49
+ <button class="sidebar-toggle" title="Toggle sidebar">
50
+ <span class="toggle-icon-collapse">&#171;</span>
51
+ <span class="toggle-icon-expand">&#187;</span>
52
+ </button>
53
+
54
+ <nav class="sidebar-nav">
55
+ <div class="nav-section">
56
+ <div class="nav-section-title">
57
+ <span data-lang="fr">Demarrage</span>
58
+ <span data-lang="en">Getting Started</span>
59
+ </div>
60
+ <a href="index.html" class="nav-item">
61
+ <span class="icon">&#127968;</span>
62
+ <span class="nav-text" data-lang="fr">Accueil</span>
63
+ <span class="nav-text" data-lang="en">Home</span>
64
+ </a>
65
+ <a href="installation.html" class="nav-item">
66
+ <span class="icon">&#128230;</span>
67
+ <span class="nav-text">Installation</span>
68
+ </a>
69
+ </div>
70
+
71
+ <div class="nav-section">
72
+ <div class="nav-section-title">Workflows</div>
73
+ <a href="gitflow.html" class="nav-item">
74
+ <span class="icon">&#128256;</span>
75
+ <span class="nav-text">GitFlow</span>
76
+ </a>
77
+ <a href="efcore.html" class="nav-item">
78
+ <span class="icon">&#128452;</span>
79
+ <span class="nav-text">EF Core</span>
80
+ </a>
81
+ <a href="apex.html" class="nav-item">
82
+ <span class="icon">&#127919;</span>
83
+ <span class="nav-text">APEX</span>
84
+ </a>
85
+ <a href="business-analyse.html" class="nav-item">
86
+ <span class="icon">&#128202;</span>
87
+ <span class="nav-text">Business Analyse</span>
88
+ </a>
89
+ <div class="nav-item-with-toc">
90
+ <a href="ralph-loop.html" class="active">
91
+ <span class="icon">&#128260;</span>
92
+ <span class="nav-text">Ralph Loop</span>
93
+ <button class="toc-toggle">&#9654;</button>
94
+ </a>
95
+ <nav class="sidebar-toc">
96
+ <a href="#introduction" class="sidebar-toc-link">Introduction</a>
97
+ <a href="#concept" class="sidebar-toc-link">
98
+ <span data-lang="fr">Concept</span>
99
+ <span data-lang="en">Concept</span>
100
+ </a>
101
+ <a href="#commands" class="sidebar-toc-link">
102
+ <span data-lang="fr">Commandes</span>
103
+ <span data-lang="en">Commands</span>
104
+ </a>
105
+ <a href="#completion-promise" class="sidebar-toc-link">Completion Promise</a>
106
+ <a href="#examples" class="sidebar-toc-link">
107
+ <span data-lang="fr">Exemples</span>
108
+ <span data-lang="en">Examples</span>
109
+ </a>
110
+ <a href="#when-to-use" class="sidebar-toc-link">
111
+ <span data-lang="fr">Quand utiliser</span>
112
+ <span data-lang="en">When to use</span>
113
+ </a>
114
+ </nav>
115
+ </div>
116
+ </div>
117
+
118
+ <div class="nav-section">
119
+ <div class="nav-section-title">
120
+ <span data-lang="fr">Outils</span>
121
+ <span data-lang="en">Tools</span>
122
+ </div>
123
+ <a href="agents.html" class="nav-item">
124
+ <span class="icon">&#129302;</span>
125
+ <span class="nav-text">Agents</span>
126
+ </a>
127
+ <a href="commands.html" class="nav-item">
128
+ <span class="icon">&#9889;</span>
129
+ <span class="nav-text" data-lang="fr">Commandes</span>
130
+ <span class="nav-text" data-lang="en">Commands</span>
131
+ </a>
132
+ <a href="hooks.html" class="nav-item">
133
+ <span class="icon">&#128279;</span>
134
+ <span class="nav-text">Hooks</span>
135
+ </a>
136
+ <a href="test-web.html" class="nav-item">
137
+ <span class="icon">&#127760;</span>
138
+ <span class="nav-text">Test Web</span>
139
+ </a>
140
+ </div>
141
+ </nav>
142
+
143
+ </aside>
144
+
145
+ <!-- Main Content -->
146
+ <main class="main-content">
147
+ <div class="content-full">
148
+ <!-- Introduction -->
149
+ <section id="introduction">
150
+ <h2>Introduction</h2>
151
+ <p data-lang="fr">
152
+ <strong>Ralph Loop</strong> implemente la technique Ralph Wiggum - une methodologie de developpement iteratif basee sur des boucles IA continues, inventee par Geoffrey Huntley.
153
+ </p>
154
+ <p data-lang="en">
155
+ <strong>Ralph Loop</strong> implements the Ralph Wiggum technique - an iterative development methodology based on continuous AI loops, pioneered by Geoffrey Huntley.
156
+ </p>
157
+
158
+ <div class="alert alert-info">
159
+ <span class="alert-icon">&#128260;</span>
160
+ <div class="alert-content">
161
+ <h5 data-lang="fr">Principe fondamental</h5>
162
+ <h5 data-lang="en">Core Principle</h5>
163
+ <p data-lang="fr">
164
+ Le meme prompt est envoye a Claude de maniere repetee. L'aspect "auto-referentiel" vient du fait que Claude voit son propre travail precedent dans les fichiers et l'historique git.
165
+ </p>
166
+ <p data-lang="en">
167
+ The same prompt is fed to Claude repeatedly. The "self-referential" aspect comes from Claude seeing its own previous work in the files and git history.
168
+ </p>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="alert alert-warning">
173
+ <span class="alert-icon">&#9888;</span>
174
+ <div class="alert-content">
175
+ <h5 data-lang="fr">Determinisme</h5>
176
+ <h5 data-lang="en">Determinism</h5>
177
+ <p data-lang="fr">
178
+ La technique est decrite comme "deterministically bad in an undeterministic world" - les echecs sont previsibles, permettant une amelioration systematique par ajustement des prompts.
179
+ </p>
180
+ <p data-lang="en">
181
+ The technique is described as "deterministically bad in an undeterministic world" - failures are predictable, enabling systematic improvement through prompt tuning.
182
+ </p>
183
+ </div>
184
+ </div>
185
+ </section>
186
+
187
+ <!-- Concept -->
188
+ <section id="concept">
189
+ <h2>
190
+ <span data-lang="fr">Concept</span>
191
+ <span data-lang="en">Concept</span>
192
+ </h2>
193
+
194
+ <div class="code-block">
195
+ <button class="copy-btn">Copy</button>
196
+ <pre><code># Core concept
197
+ while :; do
198
+ cat PROMPT.md | claude-code --continue
199
+ done</code></pre>
200
+ </div>
201
+
202
+ <h4 data-lang="fr">Chaque iteration</h4>
203
+ <h4 data-lang="en">Each iteration</h4>
204
+
205
+ <ol>
206
+ <li data-lang="fr">Claude recoit le MEME prompt</li>
207
+ <li data-lang="en">Claude receives the SAME prompt</li>
208
+ <li data-lang="fr">Travaille sur la tache, modifie les fichiers</li>
209
+ <li data-lang="en">Works on the task, modifying files</li>
210
+ <li data-lang="fr">Essaie de quitter</li>
211
+ <li data-lang="en">Tries to exit</li>
212
+ <li data-lang="fr">Le Stop hook intercepte et renvoie le meme prompt</li>
213
+ <li data-lang="en">Stop hook intercepts and feeds the same prompt again</li>
214
+ <li data-lang="fr">Claude voit son travail precedent dans les fichiers</li>
215
+ <li data-lang="en">Claude sees its previous work in the files</li>
216
+ <li data-lang="fr">Ameliore iterativement jusqu'a completion</li>
217
+ <li data-lang="en">Iteratively improves until completion</li>
218
+ </ol>
219
+
220
+ <div class="svg-diagram">
221
+ <svg viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif;">
222
+ <defs>
223
+ <marker id="arrowRalph" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
224
+ <polygon points="0 0, 10 3.5, 0 7" fill="#0d9488"/>
225
+ </marker>
226
+ </defs>
227
+
228
+ <!-- Loop circle -->
229
+ <circle cx="300" cy="150" r="100" fill="none" stroke="#0d9488" stroke-width="3" stroke-dasharray="10,5"/>
230
+
231
+ <!-- Boxes -->
232
+ <rect x="240" y="30" width="120" height="40" rx="6" fill="#134e4a" stroke="#0d9488" stroke-width="2"/>
233
+ <text x="300" y="55" text-anchor="middle" fill="#f1f5f9" font-size="12" font-weight="600">PROMPT</text>
234
+
235
+ <rect x="380" y="130" width="120" height="40" rx="6" fill="#1e3a5f" stroke="#3b82f6" stroke-width="2"/>
236
+ <text x="440" y="155" text-anchor="middle" fill="#f1f5f9" font-size="12" font-weight="600">CLAUDE</text>
237
+
238
+ <rect x="240" y="230" width="120" height="40" rx="6" fill="#1e293b" stroke="#94a3b8" stroke-width="2"/>
239
+ <text x="300" y="255" text-anchor="middle" fill="#f1f5f9" font-size="12" font-weight="600">STOP HOOK</text>
240
+
241
+ <rect x="100" y="130" width="120" height="40" rx="6" fill="#134e4a" stroke="#0d9488" stroke-width="2"/>
242
+ <text x="160" y="155" text-anchor="middle" fill="#f1f5f9" font-size="12" font-weight="600">FILES</text>
243
+
244
+ <!-- Arrows -->
245
+ <path d="M360,50 Q420,50 420,130" fill="none" stroke="#0d9488" stroke-width="2" marker-end="url(#arrowRalph)"/>
246
+ <path d="M440,170 Q440,230 360,250" fill="none" stroke="#0d9488" stroke-width="2" marker-end="url(#arrowRalph)"/>
247
+ <path d="M240,250 Q180,250 180,170" fill="none" stroke="#0d9488" stroke-width="2" marker-end="url(#arrowRalph)"/>
248
+ <path d="M160,130 Q160,50 240,50" fill="none" stroke="#0d9488" stroke-width="2" marker-end="url(#arrowRalph)"/>
249
+
250
+ <!-- Labels -->
251
+ <text x="430" y="90" fill="#94a3b8" font-size="10">1. Execute</text>
252
+ <text x="400" y="210" fill="#94a3b8" font-size="10">2. Exit</text>
253
+ <text x="150" y="210" fill="#94a3b8" font-size="10">3. Intercept</text>
254
+ <text x="130" y="90" fill="#94a3b8" font-size="10">4. Repeat</text>
255
+
256
+ <!-- Center label -->
257
+ <text x="300" y="145" text-anchor="middle" fill="#0d9488" font-size="14" font-weight="700" data-lang="fr">BOUCLE</text>
258
+ <text x="300" y="145" text-anchor="middle" fill="#0d9488" font-size="14" font-weight="700" data-lang="en">LOOP</text>
259
+ <text x="300" y="165" text-anchor="middle" fill="#5eead4" font-size="10">until complete</text>
260
+ </svg>
261
+ </div>
262
+ </section>
263
+
264
+ <!-- Commands -->
265
+ <section id="commands">
266
+ <h2>
267
+ <span data-lang="fr">Commandes</span>
268
+ <span data-lang="en">Commands</span>
269
+ </h2>
270
+
271
+ <div class="command-card">
272
+ <div class="command-header">
273
+ <code class="command-name">/ralph-loop</code>
274
+ <span class="badge badge-green" data-lang="fr">Principal</span>
275
+ <span class="badge badge-green" data-lang="en">Main</span>
276
+ </div>
277
+ <div class="command-body">
278
+ <p data-lang="fr">
279
+ Demarre une boucle Ralph dans votre session actuelle.
280
+ </p>
281
+ <p data-lang="en">
282
+ Start a Ralph loop in your current session.
283
+ </p>
284
+
285
+ <div class="code-block">
286
+ <button class="copy-btn">Copy</button>
287
+ <pre><code>/ralph-loop "Refactor the cache layer" --max-iterations 20
288
+ /ralph-loop "Add tests" --completion-promise "TESTS COMPLETE"</code></pre>
289
+ </div>
290
+
291
+ <h4>Options</h4>
292
+ <table class="reference-table">
293
+ <thead>
294
+ <tr>
295
+ <th>Option</th>
296
+ <th data-lang="fr">Description</th>
297
+ <th data-lang="en">Description</th>
298
+ </tr>
299
+ </thead>
300
+ <tbody>
301
+ <tr>
302
+ <td><code>--max-iterations &lt;n&gt;</code></td>
303
+ <td data-lang="fr">Nombre max d'iterations avant arret auto</td>
304
+ <td data-lang="en">Max iterations before auto-stop</td>
305
+ </tr>
306
+ <tr>
307
+ <td><code>--completion-promise &lt;text&gt;</code></td>
308
+ <td data-lang="fr">Phrase promise pour signaler la completion</td>
309
+ <td data-lang="en">Promise phrase to signal completion</td>
310
+ </tr>
311
+ </tbody>
312
+ </table>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="command-card">
317
+ <div class="command-header">
318
+ <code class="command-name">/cancel-ralph</code>
319
+ <span class="badge badge-orange" data-lang="fr">Annulation</span>
320
+ <span class="badge badge-orange" data-lang="en">Cancel</span>
321
+ </div>
322
+ <div class="command-body">
323
+ <p data-lang="fr">
324
+ Annule une boucle Ralph active (supprime le fichier d'etat).
325
+ </p>
326
+ <p data-lang="en">
327
+ Cancel an active Ralph loop (removes the loop state file).
328
+ </p>
329
+
330
+ <div class="code-block">
331
+ <button class="copy-btn">Copy</button>
332
+ <pre><code>/cancel-ralph</code></pre>
333
+ </div>
334
+
335
+ <p data-lang="fr">
336
+ <strong>Fonctionnement:</strong> Verifie le fichier d'etat actif et supprime <code>.claude/ralph-loop.local.md</code>.
337
+ </p>
338
+ <p data-lang="en">
339
+ <strong>How it works:</strong> Checks for active loop state file and removes <code>.claude/ralph-loop.local.md</code>.
340
+ </p>
341
+ </div>
342
+ </div>
343
+
344
+ <div class="command-card">
345
+ <div class="command-header">
346
+ <code class="command-name">/ralph-loop:help</code>
347
+ <span class="badge badge-blue">Help</span>
348
+ </div>
349
+ <div class="command-body">
350
+ <p data-lang="fr">
351
+ Affiche l'aide complete du plugin Ralph Loop.
352
+ </p>
353
+ <p data-lang="en">
354
+ Display complete help for the Ralph Loop plugin.
355
+ </p>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- Completion Promise -->
361
+ <section id="completion-promise">
362
+ <h2>Completion Promise</h2>
363
+
364
+ <p data-lang="fr">
365
+ Pour signaler la completion, Claude doit outputter un tag <code>&lt;promise&gt;</code>:
366
+ </p>
367
+ <p data-lang="en">
368
+ To signal completion, Claude must output a <code>&lt;promise&gt;</code> tag:
369
+ </p>
370
+
371
+ <div class="code-block">
372
+ <button class="copy-btn">Copy</button>
373
+ <pre><code>&lt;promise&gt;TASK COMPLETE&lt;/promise&gt;</code></pre>
374
+ </div>
375
+
376
+ <div class="alert alert-warning">
377
+ <span class="alert-icon">&#9888;</span>
378
+ <div class="alert-content">
379
+ <h5 data-lang="fr">Important</h5>
380
+ <h5 data-lang="en">Important</h5>
381
+ <p data-lang="fr">
382
+ Le stop hook recherche ce tag specifique. Sans lui (ou sans <code>--max-iterations</code>), Ralph tourne indefiniment.
383
+ </p>
384
+ <p data-lang="en">
385
+ The stop hook looks for this specific tag. Without it (or <code>--max-iterations</code>), Ralph runs infinitely.
386
+ </p>
387
+ </div>
388
+ </div>
389
+
390
+ <h4 data-lang="fr">Mecanisme d'auto-reference</h4>
391
+ <h4 data-lang="en">Self-reference mechanism</h4>
392
+
393
+ <p data-lang="fr">
394
+ La "boucle" ne signifie pas que Claude se parle a lui-meme. Cela signifie:
395
+ </p>
396
+ <p data-lang="en">
397
+ The "loop" doesn't mean Claude talks to itself. It means:
398
+ </p>
399
+
400
+ <ul>
401
+ <li data-lang="fr">Meme prompt repete</li>
402
+ <li data-lang="en">Same prompt repeated</li>
403
+ <li data-lang="fr">Le travail de Claude persiste dans les fichiers</li>
404
+ <li data-lang="en">Claude's work persists in files</li>
405
+ <li data-lang="fr">Chaque iteration voit les tentatives precedentes</li>
406
+ <li data-lang="en">Each iteration sees previous attempts</li>
407
+ <li data-lang="fr">Construit incrementalement vers l'objectif</li>
408
+ <li data-lang="en">Builds incrementally toward goal</li>
409
+ </ul>
410
+ </section>
411
+
412
+ <!-- Examples -->
413
+ <section id="examples">
414
+ <h2>
415
+ <span data-lang="fr">Exemples</span>
416
+ <span data-lang="en">Examples</span>
417
+ </h2>
418
+
419
+ <h4 data-lang="fr">Correction de bug iterative</h4>
420
+ <h4 data-lang="en">Iterative bug fix</h4>
421
+
422
+ <div class="code-block">
423
+ <button class="copy-btn">Copy</button>
424
+ <pre><code>/ralph-loop "Fix the token refresh logic in auth.ts. Output &lt;promise&gt;FIXED&lt;/promise&gt; when all tests pass." --completion-promise "FIXED" --max-iterations 10</code></pre>
425
+ </div>
426
+
427
+ <p data-lang="fr">Ralph va:</p>
428
+ <p data-lang="en">Ralph will:</p>
429
+ <ul>
430
+ <li data-lang="fr">Tenter des corrections</li>
431
+ <li data-lang="en">Attempt fixes</li>
432
+ <li data-lang="fr">Executer les tests</li>
433
+ <li data-lang="en">Run tests</li>
434
+ <li data-lang="fr">Voir les echecs</li>
435
+ <li data-lang="en">See failures</li>
436
+ <li data-lang="fr">Iterer sur la solution</li>
437
+ <li data-lang="en">Iterate on solution</li>
438
+ <li data-lang="fr">Dans votre session actuelle</li>
439
+ <li data-lang="en">In your current session</li>
440
+ </ul>
441
+
442
+ <h4 data-lang="fr">Refactoring avec limite</h4>
443
+ <h4 data-lang="en">Refactoring with limit</h4>
444
+
445
+ <div class="code-block">
446
+ <button class="copy-btn">Copy</button>
447
+ <pre><code>/ralph-loop "Refactor all database queries to use the new repository pattern. Output &lt;promise&gt;REFACTORING COMPLETE&lt;/promise&gt; when done." --completion-promise "REFACTORING COMPLETE" --max-iterations 20</code></pre>
448
+ </div>
449
+
450
+ <h4 data-lang="fr">Integration avec Business Analyse</h4>
451
+ <h4 data-lang="en">Integration with Business Analyse</h4>
452
+
453
+ <div class="code-block">
454
+ <button class="copy-btn">Copy</button>
455
+ <pre><code># Le mode automatique de Business Analyse genere automatiquement
456
+ # des prompts Ralph Loop optimises apres le handoff
457
+ /business-analyse "Ajouter une fonctionnalite d'export PDF"
458
+
459
+ # Le prompt genere ressemble a:
460
+ /ralph-loop "Implement PDF export feature according to .claude/ba/pdf-export/06-implementation-brief.md. Output &lt;promise&gt;IMPLEMENTATION COMPLETE&lt;/promise&gt; when all acceptance criteria pass." --completion-promise "IMPLEMENTATION COMPLETE" --max-iterations 15</code></pre>
461
+ </div>
462
+ </section>
463
+
464
+ <!-- When to Use -->
465
+ <section id="when-to-use">
466
+ <h2>
467
+ <span data-lang="fr">Quand utiliser</span>
468
+ <span data-lang="en">When to use</span>
469
+ </h2>
470
+
471
+ <div class="table-container">
472
+ <table>
473
+ <thead>
474
+ <tr>
475
+ <th data-lang="fr">Bon pour</th>
476
+ <th data-lang="en">Good for</th>
477
+ <th data-lang="fr">Pas recommande pour</th>
478
+ <th data-lang="en">Not recommended for</th>
479
+ </tr>
480
+ </thead>
481
+ <tbody>
482
+ <tr>
483
+ <td data-lang="fr">Taches bien definies avec criteres de succes clairs</td>
484
+ <td data-lang="en">Well-defined tasks with clear success criteria</td>
485
+ <td data-lang="fr">Taches necessitant jugement humain ou decisions de design</td>
486
+ <td data-lang="en">Tasks requiring human judgment or design decisions</td>
487
+ </tr>
488
+ <tr>
489
+ <td data-lang="fr">Taches necessitant iteration et raffinement</td>
490
+ <td data-lang="en">Tasks requiring iteration and refinement</td>
491
+ <td data-lang="fr">Operations one-shot</td>
492
+ <td data-lang="en">One-shot operations</td>
493
+ </tr>
494
+ <tr>
495
+ <td data-lang="fr">Developpement iteratif avec auto-correction</td>
496
+ <td data-lang="en">Iterative development with self-correction</td>
497
+ <td data-lang="fr">Taches sans criteres de succes clairs</td>
498
+ <td data-lang="en">Tasks with unclear success criteria</td>
499
+ </tr>
500
+ <tr>
501
+ <td data-lang="fr">Projets greenfield</td>
502
+ <td data-lang="en">Greenfield projects</td>
503
+ <td data-lang="fr">Debugging de problemes production (utiliser debugging cible)</td>
504
+ <td data-lang="en">Debugging production issues (use targeted debugging)</td>
505
+ </tr>
506
+ </tbody>
507
+ </table>
508
+ </div>
509
+
510
+ <div class="alert alert-success">
511
+ <span class="alert-icon">&#128161;</span>
512
+ <div class="alert-content">
513
+ <h5 data-lang="fr">En savoir plus</h5>
514
+ <h5 data-lang="en">Learn more</h5>
515
+ <p>
516
+ <a href="https://ghuntley.com/ralph/" target="_blank">Technique originale par Geoffrey Huntley</a><br>
517
+ <a href="https://github.com/mikeyobrien/ralph-orchestrator" target="_blank">Ralph Orchestrator sur GitHub</a>
518
+ </p>
519
+ </div>
520
+ </div>
521
+ </section>
522
+
523
+ </div>
524
+ </main>
525
+ </div>
526
+ </div>
527
+
528
+ <script src="js/app.js"></script>
529
+ </body>
530
+ </html>