Merge pull request 'Fixing footer link and menu appear' (#17) from fixing into main

Reviewed-on: #17

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,26 @@ 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  
+ 
-- Reference and tag photos without any coding required  
+<div align="center">
-- *(Optional)* Automatically update photo references via script
+  <img src="https://git.djeex.fr/Djeex/lumeex/raw/branch/main/illustration/lumeex-webui.png" alt="Lumeex Screenshot" />
+</div>
+&nbsp;
 
-### Simple Build Process
 
-- Compiles static site from YAML configuration files (themes, templates, fonts, colors)  
+- Configure site info, SEO, colors, fonts, and more through a simple convenient WebUI
+- Add and tag your photo photos without any coding required
 - 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
+- Build your 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:

VERSION

@@ -1 +1 @@
-2.0.0
+2.0.1

src/public/js/lumeex.js

@@ -3,6 +3,13 @@
 
 // Fade in effect for elements with class 'appear'
 const setupIntersectionObserver = () => {
+  document.querySelectorAll('.appear').forEach(parent => {
+    const children = parent.querySelectorAll('.appear');
+    children.forEach((child, i) => {
+      child.style.transitionDelay = `${i * 0.2}s`;
+    });
+  });
+
   const items = document.querySelectorAll('.appear');
   const io = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
@@ -32,6 +39,7 @@ const randomizeHeroBackground = () => {
       if (images.length === 0) return;
       let currentIndex = Math.floor(Math.random() * images.length);
       heroBg.style.backgroundImage = `url(/img/${images[currentIndex]})`;
+      if (images.length < 2) return; // <-- Prevent interval if only one image
       setInterval(() => {
         let nextIndex;
         do {

src/public/style/style.css

@@ -192,36 +192,6 @@ h2 {
           transform: none;
 }
 
-.appear.inview:nth-child(1) {
-  -webkit-transition-delay: 0s;
-          transition-delay: 0s;
-}
-
-.appear.inview:nth-child(2) {
-  -webkit-transition-delay: 0.2s;
-          transition-delay: 0.2s;
-}
-
-.appear.inview:nth-child(3) {
-  -webkit-transition-delay: 0.4s;
-          transition-delay: 0.4s;
-}
-
-.appear.inview:nth-child(4) {
-  -webkit-transition-delay: 0.6s;
-          transition-delay: 0.6s;
-}
-
-.appear.inview:nth-child(5) {
-  -webkit-transition-delay: 0.8s;
-          transition-delay: 0.8s;
-}
-
-.appear.inview:nth-child(6) {
-  -webkit-transition-delay: 1s;
-          transition-delay: 1s;
-}
-
 /* img fade in */
 
 .fade-in-img {
@@ -491,7 +461,7 @@ h2 {
 	}
 
 	.section img {
-		margin: 0px 0 60px 0;
+		margin: 0px 0 40px 0;
 	}
 
 	.tag {

src/templates/footer.html

@@ -12,7 +12,7 @@
         </div>
         <div class="inner bottom-link appear">
           <p><span class="navigation-subtitle appear">{{ copyright }}</span><span class="nav-separator"> • </span><span class="navigation-bottom-link appear"><a href="{{ legal_link }}">{{ legal_label }}</a></span></p>
-          <p class="navigation-subtitle appear"> Built with <a href="https://git.djeex.fr/Djeex/lumeex">Lumeex</a></p>
+          <p class="navigation-subtitle appear"> Built with <a href="https://lumeex.djeex.fr">Lumeex</a></p>
         </div>
       </div>
     </div>

src/webui/gallery-editor/index.html

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

src/webui/index.html

@@ -11,17 +11,18 @@
     <div class="section">
       <h2>Steps</h2>
       <p> Follow the steps to generate your static gallery</p>
-      <ul id="stepper">
+      <div class="stepper">
-        <li><a href="/gallery-editor">Upload your photos</a></li>
+        <ul id="stepper">
-        <div></div>
+          <li><a href="/gallery-editor">Upload your photos</a></li>
-        <li><a href="/site-info">Configure site info</a></li>
+          <div></div>
-        <div></div>
+          <li><a href="/site-info">Configure site info</a></li>
-        <li><a href="/theme-editor">Customize your theme</a></li>
+          <div></div>
-        <div></div>
+          <li><a href="/theme-editor">Customize your theme</a></li>
-        <li><button id="stepper-build">Generate your static site!</button></li>
+          <div></div>
-      </ul>
+          <li><button id="stepper-build">Generate your static site!</button></li>
+        </ul>
+      </div>
     </div>
-  </div>
 
 {% endblock %}
 

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

@@ -5,63 +5,69 @@
     <meta charset="UTF-8">
     <title>{% block title %}Lumeex{% endblock %}</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style/style.css') }}">
+    <meta name="darkreader-lock">
     </head>
     <body>
     <!-- Top bar -->	
     <div class="nav-bar">
-    <div class="content-inner nav">
+        <div class="content-inner nav">
-        <div class="nav-header">
+            <div class="nav-header">
-            <a href="/" class="nav-title">
+                <a href="/" class="nav-title">
-                <img src="{{ url_for('static', filename='img/logo.svg') }}">
+                    <img src="{{ url_for('static', filename='img/logo.svg') }}">
-            </a>
+                </a>
-        </div>
+            </div>
-        <!-- Burger toggle input and label -->
+            <!-- Burger toggle input and label -->
-        <input type="checkbox" id="nav-toggle" class="nav-toggle" hidden>
+            <input type="checkbox" id="nav-toggle" class="nav-toggle" hidden>
-        <label for="nav-toggle" class="nav-burger">
+            <label for="nav-toggle" class="nav-burger">
-            <span></span>
+                <span></span>
-            <span></span>
+                <span></span>
-            <span></span>
+                <span></span>
-        </label>
+            </label>
-        <div class="nav-links">
+            <div class="nav-links">
-            <ul class="nav-list">
+                <ul class="nav-list">
-                <li class="nav-item"><a href="/gallery-editor">Gallery</a></li>
+                    <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="/site-info">Site info</a></li>
-                <li class="nav-item"><a href="/theme-editor">Theme info</a></li>
+                    <li class="nav-item"><a href="/theme-editor">Theme info</a></li>
-                <li class="nav-item">
+                    <li class="nav-item">
-                    <button id="build-btn" class="button">🚀 Build!</button>
+                        <button id="build-btn" class="button">🚀 Build!</button>
-                </li>
+                    </li>
-            </ul>
+                </ul>
+            </div>
         </div>
     </div>
-</div>
     <!-- Toast container for notifications -->
     <div class="content-inner first-content">
-        <div id="toast-container"></div>
+        <div class="inner">
-        <!-- Page content -->
+            <div id="toast-container"></div>
-        {% block content %}{% endblock %}
+            <!-- Page content -->
-        <!-- Build success modal -->
+            {% block content %}{% endblock %}
-        <div class="content-inner">
+            <!-- Build success modal -->
-            <div id="build-success-modal" class="modal" style="display:none;">
+            <div class="content-inner">
-                <div class="modal-content">
+                <div id="build-success-modal" class="modal" style="display:none;">
-                    <span id="build-success-modal-close" class="modal-close">&times;</span>
+                    <div class="modal-content">
-                    <h3>✅ Build completed!</h3>
+                        <span id="build-success-modal-close" class="modal-close">&times;</span>
-                    <p>Your files are available in the output folder.</p>
+                        <h3>✅ Build completed!</h3>
-                    <button id="download-zip-btn" class="modal-btn">Download ZIP</button>
+                        <p>Your files are available in the output folder.</p>
-                    <div id="zip-loader" style="display:none;">Creating ZIP...</div>
+                        <button id="download-zip-btn" class="modal-btn">Download ZIP</button>
+                        <div id="zip-loader" style="display:none;">Creating ZIP...</div>
+                    </div>
                 </div>
             </div>
         </div>
+    </div>
         <!-- Footer -->
         <div id="footer">
             <div class="content-inner">
-                <div class="footer-container">
+                <div class="inner">
-                    <div class="footer-credit">
+                    <div class="footer-container">
-                        <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>
+                        <div class="footer-credit">
-                    </div>
+                            <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>
-                    <div class="footer-links">
+                        </div>
-                        <a class="footer-link documentation" href="https://lumeex.djeex.fr"><span class="icon"><img src="/img/favicon.svg"></span><span class="icon-text">Documentation</span></a>
+                        <div class="footer-links">
-                        <a class="footer-link gitea" href="https://gitea.com/Djeex/lumeex"><span class="icon"><img src="/img/gitea.svg"></span><span class="icon-text">Giteex</span></a>
+                            <a class="footer-link documentation" href="https://lumeex.djeex.fr"><span class="icon"><img src="/img/favicon.svg"></span><span class="icon-text">Documentation</span></a>
-                        <a class="footer-link github" href="https://github.com/Djeex/lumeex"><span class="icon"><img src="/img/github.svg"></span><span class="icon-text">Github</span></a>
+                            <a class="footer-link gitea" href="https://gitea.com/Djeex/lumeex"><span class="icon"><img src="/img/gitea.svg"></span><span class="icon-text">Giteex</span></a>
+                            <a class="footer-link github" href="https://github.com/Djeex/lumeex"><span class="icon"><img src="/img/github.svg"></span><span class="icon-text">Github</span></a>
+                        </div>
                     </div>
                 </div>
             </div>