Skip to content

Commit f6340c2

Browse files
johnsamuelwritesjohnsamuelwrites
committed
Add about page
1 parent b7f710c commit f6340c2

3 files changed

Lines changed: 340 additions & 0 deletions

File tree

‎public/apropos.html‎

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,301 @@
1+
<!doctype html>
2+
<html lang="fr">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>À propos — Automaginarium</title>
8+
<meta name="description"
9+
content="Découvrez Automaginarium, un laboratoire configurable d'automates cellulaires en Multilingual français." />
10+
<link rel="stylesheet" href="style.css" />
11+
<style>
12+
body {
13+
background: linear-gradient(135deg, rgba(83, 176, 255, 0.05), rgba(255, 157, 77, 0.05));
14+
}
15+
16+
.about-container {
17+
max-width: 900px;
18+
margin: 0 auto;
19+
padding: 40px 24px;
20+
color: var(--text);
21+
line-height: 1.7;
22+
}
23+
24+
.about-header {
25+
margin-bottom: 48px;
26+
text-align: center;
27+
padding-bottom: 32px;
28+
border-bottom: 1px solid var(--line-strong);
29+
}
30+
31+
.about-header h1 {
32+
font-size: 2.5rem;
33+
margin: 0 0 12px 0;
34+
background: linear-gradient(90deg, #53b0ff, #7dd3ff);
35+
-webkit-background-clip: text;
36+
-webkit-text-fill-color: transparent;
37+
background-clip: text;
38+
}
39+
40+
.about-header p {
41+
font-size: 1.1rem;
42+
color: var(--text-secondary);
43+
margin: 0;
44+
}
45+
46+
.about-section {
47+
margin-bottom: 48px;
48+
}
49+
50+
.about-section h2 {
51+
font-size: 1.5rem;
52+
margin: 0 0 16px 0;
53+
color: var(--accent);
54+
}
55+
56+
.about-section p {
57+
margin: 12px 0;
58+
color: var(--text-secondary);
59+
}
60+
61+
.about-section ul {
62+
list-style: none;
63+
padding-left: 0;
64+
margin: 16px 0;
65+
}
66+
67+
.about-section li {
68+
padding: 8px 0 8px 24px;
69+
position: relative;
70+
color: var(--text-secondary);
71+
}
72+
73+
.about-section li:before {
74+
content: "▸";
75+
position: absolute;
76+
left: 0;
77+
color: var(--accent);
78+
}
79+
80+
.tech-stack {
81+
display: grid;
82+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
83+
gap: 20px;
84+
margin: 24px 0;
85+
}
86+
87+
.tech-card {
88+
padding: 20px;
89+
background: rgba(var(--panel), 0.5);
90+
border: 1px solid var(--line);
91+
border-radius: 8px;
92+
-webkit-backdrop-filter: blur(10px);
93+
backdrop-filter: blur(10px);
94+
}
95+
96+
.tech-card h3 {
97+
margin: 0 0 12px 0;
98+
font-size: 1rem;
99+
color: var(--accent);
100+
}
101+
102+
.tech-card p {
103+
margin: 0;
104+
font-size: 0.9rem;
105+
color: var(--text-secondary);
106+
}
107+
108+
.links-section {
109+
margin-top: 48px;
110+
padding-top: 32px;
111+
border-top: 1px solid var(--line-strong);
112+
text-align: center;
113+
}
114+
115+
.links-section a {
116+
display: inline-block;
117+
margin: 0 16px;
118+
padding: 10px 16px;
119+
color: var(--accent);
120+
text-decoration: none;
121+
border: 1px solid var(--accent);
122+
border-radius: 6px;
123+
transition: all 200ms ease;
124+
}
125+
126+
.links-section a:hover {
127+
background: rgba(83, 176, 255, 0.1);
128+
}
129+
130+
.back-link {
131+
display: inline-flex;
132+
align-items: center;
133+
gap: 8px;
134+
margin-bottom: 24px;
135+
color: var(--accent);
136+
text-decoration: none;
137+
font-size: 0.9rem;
138+
transition: all 200ms ease;
139+
}
140+
141+
.back-link:hover {
142+
gap: 12px;
143+
}
144+
145+
.attribution {
146+
margin-top: 48px;
147+
padding: 24px;
148+
background: rgba(var(--panel), 0.3);
149+
border-left: 3px solid var(--accent);
150+
border-radius: 4px;
151+
font-size: 0.9rem;
152+
color: var(--text-secondary);
153+
}
154+
</style>
155+
</head>
156+
157+
<body>
158+
<header class="topbar floating-header">
159+
<div class="brand-lockup">
160+
<p class="eyebrow">Multilingual français → univers configurables</p>
161+
<h1 id="app-title">Automaginarium</h1>
162+
</div>
163+
<nav class="header-links">
164+
<a href="index.html" title="Retour à l'application">Application</a>
165+
<a href="https://github.com/multilingualprogramming/Automaginarium" title="GitHub" target="_blank"
166+
rel="noopener noreferrer">GitHub</a>
167+
</nav>
168+
</header>
169+
170+
<main class="about-container">
171+
<a href="index.html" class="back-link">← Retour à Automaginarium</a>
172+
173+
<div class="about-header">
174+
<h1>À propos d'Automaginarium</h1>
175+
<p>Un laboratoire configurable d'automates cellulaires</p>
176+
</div>
177+
178+
<div class="about-section">
179+
<h2>Vision</h2>
180+
<p>
181+
Automaginarium est une extension de <a href="https://github.com/multilingualprogramming/cellcosmos"
182+
style="color: var(--accent);">Cellcosmos</a>,
183+
un explorateur d'automates cellulaires élémentaires de Wolfram. Alors que Cellcosmos se concentre sur les 256
184+
règles
185+
binaires classiques, Automaginarium ouvre l'espace entier des possibilités :
186+
</p>
187+
<ul>
188+
<li>Alphabets configurables : binaire, ternaire, quaternaire, ou valeurs personnalisées</li>
189+
<li>Tailles de voisinage variables : 3, 5, 7, et au-delà</li>
190+
<li>Sorties multi-canaux pour une richesse expressive accrue</li>
191+
<li>Modes de transition déclaratifs : tables, totalistiques, aléatoires, ou numériques</li>
192+
<li>Exploration génétique avec fitness pondérée et évolution interactive</li>
193+
<li>Perturbation interactive du canevas avec effets visuels</li>
194+
</ul>
195+
</div>
196+
197+
<div class="about-section">
198+
<h2>Architecture</h2>
199+
<p>
200+
Automaginarium démontre la puissance du langage Multilingual français en tant que couche
201+
canonique pour la logique de domaine :
202+
</p>
203+
<ul>
204+
<li><strong>src/</strong> — Logique française multilinguiste : automates, règles, métriques</li>
205+
<li><strong>public/</strong> — Couche JavaScript minimale : canvas, événements DOM, interface</li>
206+
<li><strong>examples/</strong> — Présets et configurations déclaratives en JSON</li>
207+
<li><strong>docs/</strong> — Guides, tutoriels, et notes d'architecture</li>
208+
</ul>
209+
<p>
210+
Le français Multilingual s'exporte vers WebAssembly (WASM) et JavaScript généré.
211+
L'interface de navigateur reste une glace mince, appelant le noyau canonique.
212+
</p>
213+
</div>
214+
215+
<div class="about-section">
216+
<h2>Technologies</h2>
217+
<div class="tech-stack">
218+
<div class="tech-card">
219+
<h3>Multilingual</h3>
220+
<p>Langage de programmation polyglotte, avec French comme dialecte principal pour Automaginarium.</p>
221+
</div>
222+
<div class="tech-card">
223+
<h3>WebAssembly</h3>
224+
<p>Compilation du français Multilingual vers WASM pour des performances de calcul élevées.</p>
225+
</div>
226+
<div class="tech-card">
227+
<h3>Canvas & DOM</h3>
228+
<p>Rendu 2D natif en HTML5, interface événementielle pour la manipulation interactive.</p>
229+
</div>
230+
<div class="tech-card">
231+
<h3>Automates Cellulaires</h3>
232+
<p>Systèmes dynamiques déterministes configurables, inspirés par Wolfram et la théorie.</p>
233+
</div>
234+
</div>
235+
</div>
236+
237+
<div class="about-section">
238+
<h2>Fonctionnalités Principales</h2>
239+
<ul>
240+
<li><strong>Atelier Génétique</strong> — Évolution interactive de configurations avec fitness pondérée,
241+
leaderboard par canal, et graphique d'évolution</li>
242+
<li><strong>Boîte à Outils Perturbation</strong> — Outils interactifs (Inspecter, Perturber, Attirer, Geler,
243+
Muter) avec effets visuels (anneaux lumineux, traces de fumée, carte thermique)</li>
244+
<li><strong>Galerie de Présets</strong> — Configurations prédéfinies explorant des espaces de règles
245+
imaginatifs</li>
246+
<li><strong>Éditeur Visuel</strong> — Ajustement en direct des paramètres avec rendu canvas immédiat</li>
247+
<li><strong>Import/Export</strong> — Configurations en JSON, export PNG des univers générés</li>
248+
</ul>
249+
</div>
250+
251+
<div class="about-section">
252+
<h2>Pour Commencer</h2>
253+
<ol style="padding-left: 24px;">
254+
<li>Ouvrez l'<a href="index.html" style="color: var(--accent);">application</a></li>
255+
<li>Sélectionnez un préset dans la galerie (onglet Vue)</li>
256+
<li>Ajustez les paramètres dans l'onglet Univers</li>
257+
<li>Explorez les modes de règles (Règles, JSON)</li>
258+
<li>Essayez l'Atelier Génétique pour évoluer de nouvelles règles</li>
259+
<li>Utilisez la Perturbation pour interagir avec le canevas en temps réel</li>
260+
</ol>
261+
</div>
262+
<div class="about-section">
263+
<h3>Architecture et Cr&eacute;ation</h3>
264+
<ul>
265+
<li><a href="https://johnsamuel.info/">John Samuel</a></li>
266+
</ul>
267+
</div>
268+
269+
<div class="about-section">
270+
<h2>Documentation</h2>
271+
<p>Consultez le dépôt pour une documentation complète :</p>
272+
<ul>
273+
<li><a href="https://github.com/multilingualprogramming/Automaginarium/blob/main/docs/quickstart.md"
274+
style="color: var(--accent);">Démarrage rapide</a></li>
275+
<li><a href="https://github.com/multilingualprogramming/Automaginarium/blob/main/docs/create-universe.md"
276+
style="color: var(--accent);">Guide de création d'univers</a></li>
277+
<li><a href="https://github.com/multilingualprogramming/Automaginarium/blob/main/docs/gallery.md"
278+
style="color: var(--accent);">Galerie et présets</a></li>
279+
<li><a href="https://github.com/multilingualprogramming/Automaginarium/blob/main/README.md"
280+
style="color: var(--accent);">README du projet</a></li>
281+
</ul>
282+
</div>
283+
284+
<div class="attribution">
285+
<strong>Attribution</strong><br />
286+
Automaginarium est un successeur de <a href="https://github.com/multilingualprogramming/cellcosmos"
287+
style="color: var(--accent);">Cellcosmos</a>
288+
et réutilise intentionnellement ses idées de projet et sa direction visuelle. La métrique du navigateur initial
289+
et l'approche de rendu
290+
sont dérivées des concepts de Cellcosmos. Où le code source est directement adapté, les commentaires identifient
291+
Cellcosmos comme l'origine.
292+
</div>
293+
294+
<div class="links-section">
295+
<a href="https://github.com/multilingualprogramming/Automaginarium">Voir sur GitHub</a>
296+
<a href="index.html">Retour à l'Application</a>
297+
</div>
298+
</main>
299+
</body>
300+
301+
</html>

‎public/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ <h1 id="app-title">Automaginarium</h1>
2020
<span class="sync-indicator-dot" id="hero-sync-dot" data-state="ok"></span>
2121
<span id="hero-status-text">Synchronisation live</span>
2222
</div>
23+
<nav class="header-links">
24+
<a href="apropos.html" title="À propos">À propos</a>
25+
<a href="https://github.com/multilingualprogramming/Automaginarium" title="GitHub" target="_blank" rel="noopener noreferrer">GitHub</a>
26+
</nav>
2327
</header>
2428

2529
<main class="app-shell quantum-workspace">

‎public/style.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2742,6 +2742,29 @@ canvas {
27422742
}
27432743
}
27442744

2745+
.header-links {
2746+
display: flex;
2747+
align-items: center;
2748+
gap: 16px;
2749+
margin-left: auto;
2750+
}
2751+
2752+
.header-links a {
2753+
color: var(--text-secondary);
2754+
text-decoration: none;
2755+
font-size: 0.9rem;
2756+
padding: 6px 12px;
2757+
border-radius: 6px;
2758+
transition: all 200ms ease;
2759+
border: 1px solid transparent;
2760+
}
2761+
2762+
.header-links a:hover {
2763+
color: var(--accent);
2764+
border-color: var(--accent);
2765+
background: rgba(83, 176, 255, 0.08);
2766+
}
2767+
27452768
/* Responsive Canvas-First */
27462769
@media (max-width: 1300px) {
27472770
.quantum-workspace .workspace {
@@ -2805,6 +2828,18 @@ canvas {
28052828
margin-top: 8px;
28062829
}
28072830

2831+
.header-links {
2832+
width: 100%;
2833+
justify-content: center;
2834+
margin-left: 0;
2835+
margin-top: 8px;
2836+
}
2837+
2838+
.header-links a {
2839+
font-size: 0.8rem;
2840+
padding: 6px 10px;
2841+
}
2842+
28082843
.quantum-workspace .workspace {
28092844
gap: 12px;
28102845
}

0 commit comments

Comments
 (0)