Djeex/lumeex
1
1
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases 9 Wiki Activity

2.0 - WebUI builder ("Cielight" merge) #9

Merged
Djeex merged 43 commits from beta into main 2025-08-26 10:52:13 +02:00
Conversation 0 Commits 43 Files Changed 38 +100 -70
6 changed files with 100 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ee6d4a1fa2 - Show all commits

21
README.MD
View File

@@ -18,7 +18,7 @@ The project includes two thoughtfully designed themes—one modern, one minimali
- **Typewriter** — [View Demo](https://typewriter.djeex.fr) - **Typewriter** — [View Demo](https://typewriter.djeex.fr)
> [!NOTE] > [!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 ## 📌 Table of Contents
@@ -41,20 +41,23 @@ The project includes two thoughtfully designed themes—one modern, one minimali
- Typewriter — [Demo](https://typewriter.djeex.fr) - Typewriter — [Demo](https://typewriter.djeex.fr)
- Supports Google Fonts and locally hosted fonts - 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 - Converts favicon automatically to all required formats
- Resizes social sharing thumbnails - Resizes social sharing thumbnails
- *(Optional)* Automatically resizes photos to a maximum width of 1140px - *(Optional)* Automatically resizes photos to a maximum width of 1140px
- *(Optional)* Converts images to WebP format for optimized performance - *(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 ## 🐳 Docker or 🐍 Python Installation
For comprehensive documentation on installation, configuration options, customization, and demos, please visit: For comprehensive documentation on installation, configuration options, customization, and demos, please visit:

BIN
illustration/lumeex-webui.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 620 KiB

1
src/webui/gallery-editor/index.html
View File

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

21
src/webui/index.html
View File

@@ -11,17 +11,18 @@
<div class="section"> <div class="section">
<h2>Steps</h2> <h2>Steps</h2>
<p> Follow the steps to generate your static gallery</p> <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>
</div>
{% endblock %} {% endblock %}

34
src/webui/style/style.css
View File

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

91
src/webui/template/base.html
View File

@@ -9,59 +9,64 @@
<body> <body>
<!-- Top bar --> <!-- Top bar -->
<div class="nav-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> </div>
</div>
<!-- Toast container for notifications --> <!-- Toast container for notifications -->
<div class="content-inner first-content"> <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>
</div> </div>
</div>
<!-- Footer --> <!-- Footer -->
<div id="footer"> <div id="footer">
<div class="content-inner"> <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> </div>
</div> </div>