From a916c80c2a9ec92e94217df85eff166de470e626 Mon Sep 17 00:00:00 2001
From: Djeex <djeex@djeex.fr>
Date: Thu, 21 Aug 2025 00:00:37 +0200
Subject: [PATCH] Stepper

---
 src/webui/gallery-editor/index.html |  30 +++++---
 src/webui/index.html                |  69 ++++++++++++++++++
 src/webui/js/build.js               |  30 +++++---
 src/webui/site-info/index.html      |  19 ++++-
 src/webui/style/style.css           | 104 +++++++++++++++++++++++++---
 src/webui/theme-editor/index.html   |  22 ++++--
 6 files changed, 240 insertions(+), 34 deletions(-)
 create mode 100644 src/webui/index.html
diff --git a/src/webui/gallery-editor/index.html b/src/webui/gallery-editor/index.html
index 29ef972..c9a944f 100644
--- a/src/webui/gallery-editor/index.html
+++ b/src/webui/gallery-editor/index.html
@@ -13,7 +13,7 @@
       <input type="checkbox" id="nav-check">
       <div class="nav-header">
         <div class="nav-title">
-          <img src="{{ url_for('static', filename='img/logo.svg') }}">
+          <a href="/"><img src="{{ url_for('static', filename='img/logo.svg') }}"></a>
         </div>
       </div>
       <div class="nav-btn">
@@ -25,11 +25,11 @@
       </div>
       <div class="nav-links">
         <ul class="nav-list">
-          <li class="nav-item"><a href="/gallery-editor">Gallery</a>
+          <li class="nav-item"><a href="/gallery-editor">Gallery</a></li>
           <li class="nav-item"><a href="/site-info">Site info</a></li>
           <li class="nav-item"><a href="/theme-editor">Theme info</a></li>
           <li class="nav-item">
-            <button id="build-btn" class="button">Build !</button>
+            <button id="build-btn" class="button">🚀 Build !</button>
           </li>
         </ul>
       </div>
@@ -42,7 +42,7 @@
     <h1>Gallery editor</h1>
 
     <!-- Hero Upload Section -->
-    <div class="upload-section">
+    <div class="section">
       <h2>Title Carrousel</h2>
       <p> Select photos to display in the Title Carrousel</p>
       <div class="upload-actions-row">
@@ -56,7 +56,7 @@
     </div>
 
     <!-- Gallery Upload Section -->
-    <div class="upload-section">
+    <div class="section">
       <h2>Gallery</h2>
       <p> Select and tags photos to display in the Gallery</p>
       <div class="upload-actions-row">
@@ -68,10 +68,24 @@
       <input type="file" id="upload-gallery" accept=".png,.jpg,.jpeg,.webp" multiple hidden>
       <div id="gallery"></div>
     </div>
-    <script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
-    <script src="{{ url_for('static', filename='js/upload.js') }}" defer></script>
-    <script src="{{ url_for('static', filename='js/build.js') }}" defer></script>
+
+  <div class="section">
+      <h2>Steps</h2>
+      <p> Follow the steps to generate your static gallery</p>
+      <ul id="stepper">
+        <li><a class="step-active" href="/gallery-editor">Upload your photos</a></li>
+        <div>→</div>
+        <li><a href="/site-info">Configure site info</a></li>
+        <div>→</div>
+        <li><a href="/theme-editor">Customize your theme</a></li>
+        <div>→</div>
+        <li><button id="stepper-build">Generate your static site!</button></li>
+      </ul>
+    </div>
   </div>
+  <script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
+  <script src="{{ url_for('static', filename='js/upload.js') }}" defer></script>
+  <script src="{{ url_for('static', filename='js/build.js') }}" defer></script>
   <!-- Delete confirmation modal -->
   <div id="delete-modal" class="modal" style="display:none;">
     <div class="modal-content">
diff --git a/src/webui/index.html b/src/webui/index.html
new file mode 100644
index 0000000..93d2b39
--- /dev/null
+++ b/src/webui/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="UTF-8">
+  <title>Lumeex</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style/style.css') }}">
+</head>
+<body>
+  <!-- Top bar -->	
+  <div class="nav-bar">
+    <div class="content-inner nav">
+      <input type="checkbox" id="nav-check">
+      <div class="nav-header">
+        <div class="nav-title">
+          <a href="/"><img src="{{ url_for('static', filename='img/logo.svg') }}"></a>
+        </div>
+      </div>
+      <div class="nav-btn">
+        <label for="nav-check">
+          <span></span>
+          <span></span>
+          <span></span>
+        </label>
+      </div>
+      <div class="nav-links">
+        <ul class="nav-list">
+          <li class="nav-item"><a href="/gallery-editor">Gallery</a></li>
+          <li class="nav-item"><a href="/site-info">Site info</a></li>
+          <li class="nav-item"><a href="/theme-editor">Theme info</a></li>
+          <li class="nav-item">
+            <button id="build-btn" class="button">🚀 Build !</button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!-- Toast container for notifications -->
+  <div class="content-inner">
+    <div id="toast-container"></div>
+
+    <h1>Static Gallery Generator</h1>
+
+    <!-- Hero Upload Section -->
+    <div class="section">
+      <h2>Steps</h2>
+      <p> Follow the steps to generate your static gallery</p>
+      <ul id="stepper">
+        <li><a href="/gallery-editor">Upload your photos</a></li>
+        <div>→</div>
+        <li><a href="/site-info">Configure site info</a></li>
+        <div>→</div>
+        <li><a href="/theme-editor">Customize your theme</a></li>
+        <div>→</div>
+        <li><button id="stepper-build">Generate your static site!</button></li>
+      </ul>
+    </div>
+  <!-- Build success modal -->
+  <div id="build-success-modal" class="modal" style="display:none;">
+    <div class="modal-content">
+      <span id="build-success-modal-close" class="modal-close">&times;</span>
+      <h3>✅ Build completed!</h3>
+      <p>Your files are available in the output folder.</p>
+      <button id="download-zip-btn" class="modal-btn">Download ZIP</button>
+      <div id="zip-loader" style="display:none;">Creating ZIP...</div>
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/webui/js/build.js b/src/webui/js/build.js
index b0510ab..587bcfa 100644
--- a/src/webui/js/build.js
+++ b/src/webui/js/build.js
@@ -21,24 +21,32 @@ function showToast(message, type = "success", duration = 3000) {
 document.addEventListener("DOMContentLoaded", () => {
   // Get build button and modal elements
   const buildBtn = document.getElementById("build-btn");
+  const stepperBuildBtn = document.getElementById("stepper-build"); // Added for stepper build button
   const buildModal = document.getElementById("build-success-modal");
   const buildModalClose = document.getElementById("build-success-modal-close");
   const downloadZipBtn = document.getElementById("download-zip-btn");
   const zipLoader = document.getElementById("zip-loader");
 
+  // Build action handler
+  async function handleBuildClick() {
+    // Trigger build on backend
+    const res = await fetch("/api/build", { method: "POST" });
+    const result = await res.json();
+    if (result.status === "ok") {
+      // Show build success modal
+      if (buildModal) buildModal.style.display = "flex";
+    } else {
+      showToast(result.message || "❌ Build failed!", "error");
+    }
+  }
+
   // Handle build button click
   if (buildBtn) {
-    buildBtn.addEventListener("click", async () => {
-      // Trigger build on backend
-      const res = await fetch("/api/build", { method: "POST" });
-      const result = await res.json();
-      if (result.status === "ok") {
-        // Show build success modal
-        if (buildModal) buildModal.style.display = "flex";
-      } else {
-        showToast(result.message || "❌ Build failed!", "error");
-      }
-    });
+    buildBtn.addEventListener("click", handleBuildClick);
+  }
+  // Handle stepper-build button click
+  if (stepperBuildBtn) {
+    stepperBuildBtn.addEventListener("click", handleBuildClick);
   }
 
   // Handle download zip button click
diff --git a/src/webui/site-info/index.html b/src/webui/site-info/index.html
index 36870f8..9a68cac 100644
--- a/src/webui/site-info/index.html
+++ b/src/webui/site-info/index.html
@@ -13,7 +13,7 @@
       <input type="checkbox" id="nav-check">
       <div class="nav-header">
         <div class="nav-title">
-          <img src="{{ url_for('static', filename='img/logo.svg') }}">
+          <a href="/"><img src="{{ url_for('static', filename='img/logo.svg') }}"></a>
         </div>
       </div>
       <div class="nav-btn">
@@ -25,11 +25,11 @@
       </div>
       <div class="nav-links">
         <ul class="nav-list">
-          <li class="nav-item"><a href="/gallery-editor">Gallery</a>
+          <li class="nav-item"><a href="/gallery-editor">Gallery</a></li>
           <li class="nav-item"><a href="/site-info">Site info</a></li>
           <li class="nav-item"><a href="/theme-editor">Theme info</a></li>
           <li class="nav-item">
-            <button id="build-btn" class="button">Build !</button>
+            <button id="build-btn" class="button">🚀 Build !</button>
           </li>
         </ul>
       </div>
@@ -166,6 +166,19 @@
       </fieldset>
       <button type="submit">Save</button>
     </form>
+    <div class="section">
+        <h2>Steps</h2>
+        <p> Follow the steps to generate your static gallery</p>
+        <ul id="stepper">
+          <li><a href="/gallery-editor">Upload your photos</a></li>
+          <div>→</div>
+          <li><a class="step-active" href="/site-info">Configure site info</a></li>
+          <div>→</div>
+          <li><a href="/theme-editor">Customize your theme</a></li>
+          <div>→</div>
+          <li><button id="stepper-build">Generate your static site!</button></li>
+        </ul>
+      </div>
   </div>
 <!-- Delete confirmation modal (now outside .content-inner) -->
   <div id="delete-modal" class="modal" style="display:none;">
diff --git a/src/webui/style/style.css b/src/webui/style/style.css
index e1b6c36..b89cc9f 100644
--- a/src/webui/style/style.css
+++ b/src/webui/style/style.css
@@ -13,6 +13,7 @@ body {
 .content-inner {
   max-width: 90%;
   margin: 0 auto;
+  max-width: 1140px;
 }
 
 h1, h2 {
@@ -43,7 +44,7 @@ h2 {
 }
 
 /* --- Upload Section --- */
-.upload-section {
+.section {
   margin-bottom: 30px;
   background-color: rgb(67 67 67 / 26%);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -52,7 +53,7 @@ h2 {
   padding: 0px 20px 20px 20px;
 }
 
-.upload-section label {
+.section label {
   cursor: pointer;
 }
 
@@ -114,7 +115,7 @@ h2 {
     width: 100%;
   }
 
-  .upload-section label {
+  .section label {
     display: block;
     margin-bottom: 10px;
   }
@@ -327,11 +328,11 @@ h2 {
 }
 
 .nav > .nav-links > .nav-list > .nav-item > a:hover {
-  color: #00b0f0;
+  color: #55c3ec;
 }
 
 .nav > .nav-links > .nav-list > .nav-item > a:active {
-  color: #00b0f0;
+  color: #55c3ec;
 }
 
 .nav > #nav-check {
@@ -361,7 +362,7 @@ h2 {
   padding: 10px 25px;
   border-radius: 40px;
   margin: 15px 20px 15px 10px;
-  font-size: 12px;
+  font-size: 14px;
   display: inline;
   background: linear-gradient(135deg, #26c4ff, #016074);
   transition: all 0.2s ease;
@@ -618,7 +619,7 @@ img#thumbnail-preview {
   border-radius: 30px;
   padding: 12px 32px;
   font-size: 1.1em;
-  margin-top: 18px;
+  margin: 0 0 45px 0;
   cursor: pointer;
   box-shadow: 0 4px 16px rgba(38,196,255,0.15);
   transition: background 0.2s;
@@ -717,7 +718,7 @@ input[type="color"].color-input {
   opacity:0;
 }
 
-fieldset p {
+fieldset p, .section p {
     font-size: 14px;
     font-style: italic;
     color: #b3b3b3;
@@ -741,3 +742,90 @@ fieldset p {
 #theme-editor-form button[type="button"]#choose-font-btn {
   margin-top: 16px;
 }
+
+/* --- Home --- */
+
+#stepper {
+  display: flex;
+  gap: 18px;
+  flex-wrap: nowrap;
+  align-items: stretch; /* Ensures all children match tallest height */
+  padding: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#stepper li,
+#stepper > div {
+  display: flex;
+  align-items: center;
+  
+}
+
+#stepper li a, #stepper li button, #stepper > div  {
+justify-content: center;
+  min-width: 100px;
+  border: 1px solid #585858;
+  padding: 16px;
+  border-radius: 8px;
+  background: #111010;
+  text-align: center;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+#stepper li a, #stepper li button {
+  height: 100%;
+  align-items: center;
+  display: flex;
+  font-weight: bold;
+}
+
+#stepper li button#stepper-build {
+  background: linear-gradient(135deg, #26c4ff, #016074);
+  transition: all 0.2s ease;
+  font-weight: bold;
+  color:#fff;
+  font-size: 16px;
+}
+
+#stepper li button#stepper-build:hover {
+  background: linear-gradient(135deg, #72d9ff, #26657e);
+  transition: all 0.2s ease;
+  color:#fff;
+  cursor: pointer;
+}
+
+#stepper li a:hover, #stepper li a.step-active {
+  color: #fff;
+  transition: all 0.2s ease;
+  background: #277fa0;
+  font-weight: bold;
+}
+
+#stepper li button#stepper-build::before {
+  content: "🚀 ";
+  margin-right: 8px;
+}
+
+#stepper li a {
+  text-decoration: none;
+  color:#d3d3d3
+}
+
+#stepper li {
+  flex: 1 1 auto; /* li can grow/shrink, width is flexible */
+}
+
+#stepper > div {
+  flex: 0 0 auto; /* Do not grow or shrink, width is auto */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffc700;
+  border: none;
+  background: none;
+  padding: 0;
+  min-width: 0; /* Prevent unwanted minimum width */
+  width: auto;   /* Let width fit content */
+}
\ No newline at end of file
diff --git a/src/webui/theme-editor/index.html b/src/webui/theme-editor/index.html
index c7c687c..d597883 100644
--- a/src/webui/theme-editor/index.html
+++ b/src/webui/theme-editor/index.html
@@ -13,7 +13,7 @@
       <input type="checkbox" id="nav-check">
       <div class="nav-header">
         <div class="nav-title">
-          <img src="{{ url_for('static', filename='img/logo.svg') }}">
+          <a href="/"><img src="{{ url_for('static', filename='img/logo.svg') }}"></a>
         </div>
       </div>
       <div class="nav-btn">
@@ -25,16 +25,17 @@
       </div>
       <div class="nav-links">
         <ul class="nav-list">
-          <li class="nav-item"><a href="/gallery-editor">Gallery</a>
+          <li class="nav-item"><a href="/gallery-editor">Gallery</a></li>
           <li class="nav-item"><a href="/site-info">Site info</a></li>
           <li class="nav-item"><a href="/theme-editor">Theme info</a></li>
           <li class="nav-item">
-            <button id="build-btn" class="button">Build !</button>
+            <button id="build-btn" class="button">🚀 Build !</button>
           </li>
         </ul>
       </div>
     </div>
   </div>
+  
   <!-- Toast container for notifications -->
   <div id="theme-editor" class="content-inner">
     <div id="toast-container"></div>
@@ -169,6 +170,20 @@
       </fieldset>
       <button type="submit">Save Theme</button>
     </form>
+    <div class="section">
+      <h2>Steps</h2>
+      <p> Follow the steps to generate your static gallery</p>
+      <ul id="stepper">
+        <li><a href="/gallery-editor">Upload your photos</a></li>
+        <div>→</div>
+        <li><a href="/site-info">Configure site info</a></li>
+        <div>→</div>
+        <li><a class="step-active" href="/theme-editor">Customize your theme</a></li>
+        <div>→</div>
+        <li><button id="stepper-build">Generate your static site!</button></li>
+      </ul>
+    </div>
+  </div>
   </div>
   <!-- Delete confirmation modal for favicon -->
   <div id="delete-favicon-modal" class="modal" style="display:none;">
@@ -203,7 +218,6 @@
       <button id="download-zip-btn" class="modal-btn">Download ZIP</button>
       <div id="zip-loader" style="display:none;">Creating ZIP...</div>
     </div>
-  </div>
   <script src="{{ url_for('static', filename='js/theme-editor.js') }}"></script>
   <script src="{{ url_for('static', filename='js/build.js') }}"></script>
 </body>
