Skip to content

Commit e1d3ee8

Browse files
johnsamuelwritesjohnsamuelwrites
committed
Update UI
1 parent 794edf7 commit e1d3ee8

3 files changed

Lines changed: 555 additions & 56 deletions

File tree

‎public/app.mjs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -539,5 +539,30 @@ document.querySelector("#export-png").addEventListener("click", () => {
539539
link.click();
540540
});
541541

542+
// CAROUSEL NAVIGATION
543+
const carouselGallery = document.querySelector("#preset-gallery");
544+
const carouselPrevBtn = document.querySelector("#carousel-prev");
545+
const carouselNextBtn = document.querySelector("#carousel-next");
546+
547+
if (carouselGallery && carouselPrevBtn && carouselNextBtn) {
548+
const scrollAmount = 260; // Card width + gap
549+
550+
carouselPrevBtn.addEventListener("click", () => {
551+
carouselGallery.scrollBy({ left: -scrollAmount, behavior: "smooth" });
552+
});
553+
554+
carouselNextBtn.addEventListener("click", () => {
555+
carouselGallery.scrollBy({ left: scrollAmount, behavior: "smooth" });
556+
});
557+
558+
// Update preset card active state when clicked
559+
carouselGallery.querySelectorAll(".preset-card").forEach((card) => {
560+
card.addEventListener("click", function() {
561+
carouselGallery.querySelectorAll(".preset-card").forEach(c => c.classList.remove("active"));
562+
this.classList.add("active");
563+
});
564+
});
565+
}
566+
542567
setSyncState("pending", "Initialisation du laboratoire...");
543568
await loadPreset("wolfram-90");

‎public/index.html‎

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -11,53 +11,55 @@
1111
<link rel="stylesheet" href="style.css" />
1212
</head>
1313
<body>
14-
<header class="topbar">
14+
<header class="topbar floating-header">
1515
<div class="brand-lockup">
1616
<p class="eyebrow">Multilingual fran&ccedil;ais &rarr; univers configurables</p>
1717
<h1 id="app-title">Automaginarium</h1>
1818
</div>
19+
<div class="sync-indicator">
20+
<span class="sync-indicator-dot" id="hero-sync-dot" data-state="ok"></span>
21+
<span id="hero-status-text">Synchronisation live</span>
22+
</div>
1923
</header>
2024

21-
<main class="app-shell">
22-
<section class="hero-band minimal" aria-labelledby="app-title">
23-
<div class="hero-indicator">
24-
<span class="sync-pulse" id="hero-sync-dot"></span>
25-
<span id="hero-status-text">Synchronisation live</span>
26-
</div>
27-
</section>
28-
25+
<main class="app-shell quantum-workspace">
2926
<section id="main-panel" class="workspace" aria-label="Univers g&eacute;n&eacute;r&eacute;">
30-
<div class="canvas-column">
31-
<div class="canvas-wrap">
32-
<div class="canvas-aura" aria-hidden="true"></div>
33-
<canvas id="universe" width="805" height="500"></canvas>
34-
<div class="canvas-hud">
35-
<div class="hud-metric">
36-
<strong id="hud-rule">90</strong>
37-
<span>r&egrave;gle</span>
38-
</div>
39-
<div class="hud-metric">
40-
<strong id="hud-gen">0</strong>
41-
<span>g&eacute;n&eacute;rations</span>
42-
</div>
43-
<div class="hud-metric">
44-
<strong id="hud-density">0%</strong>
45-
<span>densit&eacute;</span>
46-
</div>
47-
<div class="hud-metric">
48-
<strong id="hud-entropy">0.00</strong>
49-
<span>entropie</span>
27+
<!-- CANVAS-FIRST LAYOUT -->
28+
<div class="canvas-column canvas-dominant">
29+
<div class="neural-grid-container">
30+
<div class="canvas-wrap">
31+
<div class="canvas-aura" aria-hidden="true"></div>
32+
<div class="neural-grid" aria-hidden="true"></div>
33+
<canvas id="universe" width="805" height="500"></canvas>
34+
<div class="canvas-hud">
35+
<div class="hud-metric glowing">
36+
<strong id="hud-rule">90</strong>
37+
<span>r&egrave;gle</span>
38+
</div>
39+
<div class="hud-metric glowing">
40+
<strong id="hud-gen">0</strong>
41+
<span>g&eacute;n&eacute;rations</span>
42+
</div>
43+
<div class="hud-metric glowing">
44+
<strong id="hud-density">0%</strong>
45+
<span>densit&eacute;</span>
46+
</div>
47+
<div class="hud-metric glowing">
48+
<strong id="hud-entropy">0.00</strong>
49+
<span>entropie</span>
50+
</div>
5051
</div>
5152
</div>
52-
</div>
53-
<div class="canvas-actions-bar" aria-label="Actions du canevas">
54-
<button id="random-rule-canvas" type="button">R&egrave;gle al&eacute;atoire</button>
55-
<button id="export-png" type="button">PNG</button>
56-
<button id="export-json" type="button">JSON</button>
53+
<div class="canvas-actions-bar" aria-label="Actions du canevas">
54+
<button id="random-rule-canvas" type="button">R&egrave;gle al&eacute;atoire</button>
55+
<button id="export-png" type="button">PNG</button>
56+
<button id="export-json" type="button">JSON</button>
57+
</div>
5758
</div>
5859
</div>
5960

60-
<aside class="inspector workspace-settings" aria-label="Panneau de r&eacute;glages">
61+
<!-- FLOATING INSPECTOR PANELS -->
62+
<aside class="inspector workspace-settings floating-panels" aria-label="Panneau de r&eacute;glages">
6163
<div class="inspector-tabs" role="tablist" aria-label="Sections de r&eacute;glage">
6264
<button type="button" class="inspector-tab-btn" data-panel="info-panel" role="tab" aria-selected="false">Vue</button>
6365
<button type="button" class="inspector-tab-btn" data-panel="display-panel" role="tab" aria-selected="false">Affichage</button>
@@ -195,15 +197,18 @@ <h2>Configuration brute</h2>
195197
</aside>
196198
</section>
197199

198-
<section id="gallery-panel" class="gallery-panel" aria-labelledby="gallery-title">
199-
<div class="panel-heading inline-heading">
200+
<section id="gallery-panel" class="gallery-carousel-section" aria-labelledby="gallery-title">
201+
<div class="carousel-header">
200202
<div>
201203
<p class="eyebrow">Galerie</p>
202-
<h2 id="gallery-title">Configurations remarquables</h2>
203-
<p class="meta">Choisir un univers de d&eacute;part avant de l'ajuster dans le laboratoire.</p>
204+
<h2 id="gallery-title">Univers remarquables</h2>
205+
</div>
206+
<div class="carousel-controls">
207+
<button id="carousel-prev" type="button" class="carousel-btn" aria-label="Pr&eacute;c&eacute;dent">←</button>
208+
<button id="carousel-next" type="button" class="carousel-btn" aria-label="Suivant">→</button>
204209
</div>
205210
</div>
206-
<div id="preset-gallery" class="preset-gallery" aria-label="Galerie de pr&eacute;sets">
211+
<div id="preset-gallery" class="preset-carousel" aria-label="Galerie de pr&eacute;sets en carousel">
207212
<button type="button" class="preset-card" data-preset="wolfram-30">
208213
<strong>Wolfram 30</strong>
209214
<span>&eacute;l&eacute;mentaire</span>

0 commit comments

Comments
 (0)