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  
-- *(Optional)* Automatically update photo references via script
+ 
+<div align="center">
+  <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,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;
-  padding: 0 40px;
+  max-width: 1220px;
   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 {
-    padding: 70px 20px
+  .nav {
+    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,6 +5,7 @@
     <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 -->	
@@ -36,6 +37,7 @@
     </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 +53,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 +71,7 @@
                     </div>
                 </div>
             </div>
+        </div>
         <!-- Loader -->
         <div id="global-loader">
             <div class="loader-inner">