Skip to content

Commit 2362161

Browse files
johnsamuelwritesjohnsamuelwrites
committed
Move hero section to the footer
1 parent 5174b99 commit 2362161

1 file changed

Lines changed: 139 additions & 131 deletions

File tree

‎public/index.html‎

Lines changed: 139 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,161 @@
11
<!DOCTYPE html>
22
<html lang="fr">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Cellcosmos</title>
7-
<link rel="preconnect" href="https://fonts.googleapis.com" />
8-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9-
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
10-
<link rel="stylesheet" href="style.css" />
11-
</head>
12-
<body>
13-
<header class="topbar">
14-
<div>
15-
<p class="eyebrow">multilingual -> wasm</p>
16-
<h1>Cellcosmos</h1>
17-
</div>
18-
<nav class="tab-nav">
19-
<button type="button" class="tab active" id="tab-explorer">Explorateur</button>
20-
<button type="button" class="tab" id="tab-gallery">Galerie</button>
21-
<button type="button" class="tab" id="tab-source">Sources</button>
22-
</nav>
23-
</header>
24-
25-
<main>
26-
<section class="hero">
27-
<p>Cellcosmos est un explorateur d'automates cellulaires elementaires compile en WASM depuis des sources multilingual francaises.</p>
28-
<p class="hero-note">Le navigateur essaie d'utiliser `cellcosmos.wasm` pour accelerer le calcul, avec repli automatique sur JavaScript si besoin.</p>
29-
<p id="wasm-status" class="hero-note">Verification du moteur WASM...</p>
30-
</section>
31-
32-
<section id="explorer-panel" class="panel-grid">
33-
<div class="viewer-shell">
34-
<div class="rule-bar">
35-
<span class="rule-label">Regle</span>
36-
<span id="rule-display" class="rule-number">90</span>
37-
<input type="range" id="rule-slider" min="0" max="255" value="90" aria-label="Regle" />
38-
<input type="number" id="rule-number" min="0" max="255" value="90" aria-label="Numero de regle" />
39-
<button type="button" class="ghost-btn" id="btn-prev">‹</button>
40-
<button type="button" class="ghost-btn" id="btn-next">›</button>
41-
<button type="button" class="ghost-btn" id="btn-random">Aleatoire</button>
42-
<select id="presets" aria-label="Presets">
43-
<option value="">Presets...</option>
44-
</select>
45-
<span id="rule-class" class="rule-class"></span>
46-
</div>
47-
48-
<div id="rule-diagram" class="rule-diagram"></div>
493

50-
<div class="canvas-card">
51-
<canvas id="main-canvas" width="1200" height="720" aria-label="Automate cellulaire"></canvas>
52-
</div>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Cellcosmos</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap"
12+
rel="stylesheet" />
13+
<link rel="stylesheet" href="style.css" />
14+
</head>
5315

54-
<div class="actions">
55-
<button type="button" id="btn-download">Telecharger PNG</button>
56-
<button type="button" id="btn-share" class="accent-btn">Copier le lien</button>
57-
<button type="button" id="btn-reset">Reinitialiser</button>
58-
</div>
16+
<body>
17+
<header class="topbar">
18+
<div>
19+
<p class="eyebrow">multilingual -> wasm</p>
20+
<h1>Cellcosmos</h1>
5921
</div>
22+
<nav class="tab-nav">
23+
<button type="button" class="tab active" id="tab-explorer">Explorateur</button>
24+
<button type="button" class="tab" id="tab-gallery">Galerie</button>
25+
<button type="button" class="tab" id="tab-source">Sources</button>
26+
</nav>
27+
</header>
6028

61-
<aside class="sidebar">
62-
<div class="ctrl-section">
63-
<p class="ctrl-title">Cellules</p>
64-
<div class="ctrl-row">
65-
<input type="range" id="cell-size" min="1" max="10" value="3" />
66-
<span id="cell-size-display" class="value-badge">3</span>
67-
<span class="muted">px</span>
68-
</div>
69-
</div>
29+
<main>
7030

71-
<div class="ctrl-section">
72-
<p class="ctrl-title">Forme</p>
73-
<div class="pill-group">
74-
<label><input type="radio" name="shape" value="rect" checked /> Rectangle</label>
75-
<label><input type="radio" name="shape" value="circle" /> Cercle</label>
76-
<label><input type="radio" name="shape" value="ellipse" /> Ellipse</label>
77-
<label><input type="radio" name="shape" value="triangle" /> Triangle</label>
31+
<section id="explorer-panel" class="panel-grid">
32+
<div class="viewer-shell">
33+
<div class="rule-bar">
34+
<span class="rule-label">Regle</span>
35+
<span id="rule-display" class="rule-number">90</span>
36+
<input type="range" id="rule-slider" min="0" max="255" value="90" aria-label="Regle" />
37+
<input type="number" id="rule-number" min="0" max="255" value="90" aria-label="Numero de regle" />
38+
<button type="button" class="ghost-btn" id="btn-prev">‹</button>
39+
<button type="button" class="ghost-btn" id="btn-next">›</button>
40+
<button type="button" class="ghost-btn" id="btn-random">Aleatoire</button>
41+
<select id="presets" aria-label="Presets">
42+
<option value="">Presets...</option>
43+
</select>
44+
<span id="rule-class" class="rule-class"></span>
7845
</div>
79-
</div>
8046

81-
<div class="ctrl-section">
82-
<p class="ctrl-title">Etat initial</p>
83-
<div class="pill-group">
84-
<label><input type="radio" name="init-mode" value="center" checked /> Centre</label>
85-
<label><input type="radio" name="init-mode" value="random" /> Aleatoire</label>
47+
<div id="rule-diagram" class="rule-diagram"></div>
48+
49+
<div class="canvas-card">
50+
<canvas id="main-canvas" width="1200" height="720" aria-label="Automate cellulaire"></canvas>
8651
</div>
87-
<div id="random-opts" class="stack" hidden>
88-
<label>Nombre <input type="number" id="init-count" min="1" max="500" value="5" /></label>
89-
<label>Graine <input type="number" id="init-seed" value="42" /></label>
52+
53+
<div class="actions">
54+
<button type="button" id="btn-download">Telecharger PNG</button>
55+
<button type="button" id="btn-share" class="accent-btn">Copier le lien</button>
56+
<button type="button" id="btn-reset">Reinitialiser</button>
9057
</div>
9158
</div>
9259

93-
<div class="ctrl-section">
94-
<p class="ctrl-title">Couleurs</p>
95-
<div class="ctrl-row">
96-
<label for="bg-color" class="muted">Fond</label>
97-
<input type="color" id="bg-color" value="#08111f" />
60+
<aside class="sidebar">
61+
<div class="ctrl-section">
62+
<p class="ctrl-title">Cellules</p>
63+
<div class="ctrl-row">
64+
<input aria-label="range" id="cell-size" min="1" max="10" value="3" />
65+
<span id="cell-size-display" class="value-badge">3</span>
66+
<span class="muted">px</span>
67+
</div>
68+
</div>
69+
70+
<div class="ctrl-section">
71+
<p class="ctrl-title">Forme</p>
72+
<div class="pill-group">
73+
<label><input type="radio" name="shape" value="rect" checked /> Rectangle</label>
74+
<label><input type="radio" name="shape" value="circle" /> Cercle</label>
75+
<label><input type="radio" name="shape" value="ellipse" /> Ellipse</label>
76+
<label><input type="radio" name="shape" value="triangle" /> Triangle</label>
77+
</div>
9878
</div>
99-
<div class="stack">
100-
<span class="muted">Etapes du degrade</span>
101-
<div id="gradient-colors" class="stack compact"></div>
102-
<button type="button" id="btn-add-color" class="ghost-btn">+ Ajouter</button>
79+
80+
<div class="ctrl-section">
81+
<p class="ctrl-title">Etat initial</p>
82+
<div class="pill-group">
83+
<label><input type="radio" name="init-mode" value="center" checked /> Centre</label>
84+
<label><input type="radio" name="init-mode" value="random" /> Aleatoire</label>
85+
</div>
86+
<div id="random-opts" class="stack" hidden>
87+
<label>Nombre <input type="number" id="init-count" min="1" max="500" value="5" /></label>
88+
<label>Graine <input type="number" id="init-seed" value="42" /></label>
89+
</div>
10390
</div>
104-
</div>
10591

106-
<div class="ctrl-section">
107-
<p class="ctrl-title">Avance</p>
108-
<label class="checkbox-row"><input type="checkbox" id="circular" /> Frontiere circulaire</label>
109-
<div class="ctrl-row">
110-
<label for="probability" class="muted">Probabilite</label>
111-
<input type="range" id="probability" min="0" max="1" step="0.01" value="1" />
112-
<span id="prob-display" class="value-badge">1.00</span>
92+
<div class="ctrl-section">
93+
<p class="ctrl-title">Couleurs</p>
94+
<div class="ctrl-row">
95+
<label for="bg-color" class="muted">Fond</label>
96+
<input type="color" id="bg-color" value="#08111f" />
97+
</div>
98+
<div class="stack">
99+
<span class="muted">Etapes du degrade</span>
100+
<div id="gradient-colors" class="stack compact"></div>
101+
<button type="button" id="btn-add-color" class="ghost-btn">+ Ajouter</button>
102+
</div>
113103
</div>
114-
<div class="pill-group">
115-
<label><input type="radio" name="direction" value="ltr" checked /> LTR</label>
116-
<label><input type="radio" name="direction" value="rtl" /> RTL</label>
104+
105+
<div class="ctrl-section">
106+
<p class="ctrl-title">Avance</p>
107+
<label class="checkbox-row"><input type="checkbox" id="circular" /> Frontiere circulaire</label>
108+
<div class="ctrl-row">
109+
<label for="probability" class="muted">Probabilite</label>
110+
<input type="range" id="probability" min="0" max="1" step="0.01" value="1" />
111+
<span id="prob-display" class="value-badge">1.00</span>
112+
</div>
113+
<div class="pill-group">
114+
<label><input type="radio" name="direction" value="ltr" checked /> LTR</label>
115+
<label><input type="radio" name="direction" value="rtl" /> RTL</label>
116+
</div>
117117
</div>
118+
</aside>
119+
</section>
120+
121+
<section id="gallery-panel" class="gallery-panel" hidden>
122+
<div class="gallery-header">
123+
<p>Les 256 regles sont rendues cote navigateur avec acceleration WASM quand elle est valide, sinon via le
124+
moteur JavaScript integre.</p>
118125
</div>
119-
</aside>
120-
</section>
126+
<div id="gallery-grid" class="gallery-grid"></div>
127+
</section>
121128

122-
<section id="gallery-panel" class="gallery-panel" hidden>
123-
<div class="gallery-header">
124-
<p>Les 256 regles sont rendues cote navigateur avec acceleration WASM quand elle est valide, sinon via le moteur JavaScript integre.</p>
125-
</div>
126-
<div id="gallery-grid" class="gallery-grid"></div>
127-
</section>
129+
<section id="source-panel" class="source-panel" hidden>
130+
<div class="source-header">
131+
<h2>Sources canoniques</h2>
132+
<p>Ces fichiers sont copies dans `public/` lors de la compilation WASM.</p>
133+
</div>
134+
<div class="source-grid">
135+
<article class="source-card">
136+
<h3><a href="main.ml">main.ml</a></h3>
137+
<p>Point d'entree bundle.</p>
138+
</article>
139+
<article class="source-card">
140+
<h3><a href="automate_elementaire_canonique.ml">automate_elementaire_canonique.ml</a></h3>
141+
<p>Source canonique complete: config, couches, semis, probabilite et evolution.</p>
142+
</article>
143+
<article class="source-card">
144+
<h3><a href="automate_elementaire_wasm.ml">automate_elementaire_wasm.ml</a></h3>
145+
<p>Module WASM-compatible minimal utilise par l'interface statique.</p>
146+
</article>
147+
</div>
148+
</section>
149+
<section class="hero">
150+
<p>Cellcosmos est un explorateur d'automates cellulaires elementaires compile en WASM depuis des sources
151+
multilingual francaises.</p>
152+
<p class="hero-note">Le navigateur essaie d'utiliser `cellcosmos.wasm` pour accelerer le calcul, avec repli
153+
automatique sur JavaScript si besoin.</p>
154+
<p id="wasm-status" class="hero-note">Verification du moteur WASM...</p>
155+
</section>
156+
</main>
128157

129-
<section id="source-panel" class="source-panel" hidden>
130-
<div class="source-header">
131-
<h2>Sources canoniques</h2>
132-
<p>Ces fichiers sont copies dans `public/` lors de la compilation WASM.</p>
133-
</div>
134-
<div class="source-grid">
135-
<article class="source-card">
136-
<h3><a href="main.ml">main.ml</a></h3>
137-
<p>Point d'entree bundle.</p>
138-
</article>
139-
<article class="source-card">
140-
<h3><a href="automate_elementaire_canonique.ml">automate_elementaire_canonique.ml</a></h3>
141-
<p>Source canonique complete: config, couches, semis, probabilite et evolution.</p>
142-
</article>
143-
<article class="source-card">
144-
<h3><a href="automate_elementaire_wasm.ml">automate_elementaire_wasm.ml</a></h3>
145-
<p>Module WASM-compatible minimal utilise par l'interface statique.</p>
146-
</article>
147-
</div>
148-
</section>
149-
</main>
158+
<script type="module" src="ui.js"></script>
159+
</body>
150160

151-
<script type="module" src="ui.js"></script>
152-
</body>
153-
</html>
161+
</html>

0 commit comments

Comments
 (0)