README.MD

@@ -18,7 +18,7 @@ The project includes two thoughtfully designed themes—one modern, one minimali
 - **Typewriter** — [View Demo](https://typewriter.djeex.fr)
 
 > [!NOTE]  
-> This GitHub repository is a mirror of the primary source at [git.djeex.fr/Djeex/lumeex](https://git.djeex.fr/Djeex/lumeex). The main repository includes the full history, releases, and bug-checking assisted by an LLM.
+> _This GitHub repository is a mirror of the primary source at [git.djeex.fr/Djeex/lumeex](https://git.djeex.fr/Djeex/lumeex). The main repository includes the full history and releases_.
 
 
 ## 📌 Table of Contents
@@ -41,20 +41,23 @@ The project includes two thoughtfully designed themes—one modern, one minimali
   - Typewriter — [Demo](https://typewriter.djeex.fr)  
 - Supports Google Fonts and locally hosted fonts
 
-### No-Code Builder (YAML Based)
+### No-Code Builder (WebUI Manager)
 
-- Configure site info, SEO, colors, fonts, and more through simple YAML files  
+<div align="center">
-- Reference and tag photos without any coding required  
+  <img src="https://git.djeex.fr/Djeex/lumeex/raw/branch/main/illustration/lumeex-webui.png" alt="Lumeex Screenshot" />
-- *(Optional)* Automatically update photo references via script
+</div>
 
-### Simple Build Process
+- Configure site info, SEO, colors, fonts, and more through a simple convenient WebUI
-
+- Add and tag your photo photos without any coding required
-- Compiles static site from YAML configuration files (themes, templates, fonts, colors)  
 - Converts favicon automatically to all required formats  
 - Resizes social sharing thumbnails  
 - *(Optional)* Automatically resizes photos to a maximum width of 1140px  
 - *(Optional)* Converts images to WebP format for optimized performance
-- Outputs a complete static website ready to deploy on any web server
+- Compiles static site in one click and get a zip archive or an output folder, ready to deploy to your preferred webserver
+
+### Don't want a WebUI ?
+
+- CLI process is documented
 
 ## 🐳 Docker or 🐍 Python Installation
 For comprehensive documentation on installation, configuration options, customization, and demos, please visit:

src/webui/gallery-editor/index.html

@@ -60,7 +60,6 @@
         </div>
       </div>
     </div>
-  </div>
   
 
 {% endblock %}

src/webui/index.html

@@ -11,6 +11,7 @@
     <div class="section">
       <h2>Steps</h2>
       <p> Follow the steps to generate your static gallery</p>
+      <div class="stepper">
         <ul id="stepper">
           <li><a href="/gallery-editor">Upload your photos</a></li>
           <div></div>

src/webui/style/style.css

@@ -24,10 +24,17 @@ h2 {
 
 .content-inner {
   margin: 0 auto;
-  max-width: 1140px;
+  max-width: 1220px;
-  padding: 0 40px;
   padding-top: 70px;
+  width: 100%;
 }
+.inner {
+  padding: 0 40px;
+  margin: auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 
 /* --- Navbar & Burger Menu --- */
 
@@ -221,6 +228,8 @@ h2 {
   border: 1px solid #2f2e2e80;
   border-radius: 8px;
   padding: 0px 20px 20px 20px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .section label {
@@ -709,9 +718,10 @@ img#thumbnail-preview {
 }
 
 
-.color-fields {
+.fields.color-fields {
   gap: 8px;
   position: relative;
+  flex-wrap: nowrap;
 }
 
 
@@ -853,6 +863,10 @@ justify-content: center;
   width: auto;
 }
 
+.stepper {
+  width: 100%;
+}
+
 /* --- Footer --- */
 
 #footer {
@@ -965,8 +979,11 @@ justify-content: center;
 /* --- Responsive Adjustments --- */
 @media (max-width: 768px) {
 
-  .content-inner {
+  .nav {
-    padding: 70px 20px
+    padding: 0 20px;
+  }
+  .inner {
+    padding: 0 20px;
   }
   .section label {
     display: block;
@@ -1012,6 +1029,11 @@ justify-content: center;
   }
 
   #color-picker .input-field{
-    min-width: 140px;
+    min-width: 170px;
+  }
+  #theme-editor-form .fields.color-fields {
+    gap: 0 8px;
+    position: relative;
+    flex-wrap: nowrap;
   }
 }

src/webui/template/base.html

@@ -33,9 +33,10 @@
                 </ul>
             </div>
         </div>
-</div>
+    </div>
     <!-- Toast container for notifications -->
     <div class="content-inner first-content">
+        <div class="inner">
             <div id="toast-container"></div>
             <!-- Page content -->
             {% block content %}{% endblock %}
@@ -51,9 +52,12 @@
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
         <!-- Footer -->
         <div id="footer">
             <div class="content-inner">
+                <div class="inner">
                     <div class="footer-container">
                         <div class="footer-credit">
                             <p><a href="https//lumeex.djeex.fr"><span class="lum-first">Lum</span><span class="lum-second">eex</span> v{{ lumeex_version }}</a> — © 2025</p>
@@ -66,6 +70,7 @@
                     </div>
                 </div>
             </div>
+        </div>
         <!-- Loader -->
         <div id="global-loader">
             <div class="loader-inner">