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

Stepper

Browse Source
This commit is contained in:
Djeex
2025-08-21 00:00:37 +02:00
parent cb91b92555
commit a916c80c2a
6 changed files with 240 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
<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>
</div>
<!-- Delete confirmation modal -->
<div id="delete-modal" class="modal" style="display:none;">
<div class="modal-content">

69
src/webui/index.html Normal file
View File

@ -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>

16
src/webui/js/build.js
View File

@ -21,14 +21,14 @@ 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");
// Handle build button click
if (buildBtn) {
buildBtn.addEventListener("click", async () => {
// Build action handler
async function handleBuildClick() {
// Trigger build on backend
const res = await fetch("/api/build", { method: "POST" });
const result = await res.json();
@ -38,7 +38,15 @@ document.addEventListener("DOMContentLoaded", () => {
} else {
showToast(result.message || "❌ Build failed!", "error");
}
});
}
// Handle build button click
if (buildBtn) {
buildBtn.addEventListener("click", handleBuildClick);
}
// Handle stepper-build button click
if (stepperBuildBtn) {
stepperBuildBtn.addEventListener("click", handleBuildClick);
}
// Handle download zip button click

19
src/webui/site-info/index.html
View File

@ -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;">

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

@ -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 */
}

22
src/webui/theme-editor/index.html
View File

@ -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>