2 Commits

Author SHA1 Message Date
7675b90909 Footer 2025-08-21 18:07:15 +02:00
a916c80c2a Stepper 2025-08-21 00:00:37 +02:00
9 changed files with 544 additions and 45 deletions

View File

@ -13,7 +13,7 @@
<input type="checkbox" id="nav-check"> <input type="checkbox" id="nav-check">
<div class="nav-header"> <div class="nav-header">
<div class="nav-title"> <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> </div>
<div class="nav-btn"> <div class="nav-btn">
@ -25,11 +25,11 @@
</div> </div>
<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 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>
@ -42,7 +42,7 @@
<h1>Gallery editor</h1> <h1>Gallery editor</h1>
<!-- Hero Upload Section --> <!-- Hero Upload Section -->
<div class="upload-section"> <div class="section">
<h2>Title Carrousel</h2> <h2>Title Carrousel</h2>
<p> Select photos to display in the Title Carrousel</p> <p> Select photos to display in the Title Carrousel</p>
<div class="upload-actions-row"> <div class="upload-actions-row">
@ -56,7 +56,7 @@
</div> </div>
<!-- Gallery Upload Section --> <!-- Gallery Upload Section -->
<div class="upload-section"> <div class="section">
<h2>Gallery</h2> <h2>Gallery</h2>
<p> Select and tags photos to display in the Gallery</p> <p> Select and tags photos to display in the Gallery</p>
<div class="upload-actions-row"> <div class="upload-actions-row">
@ -68,10 +68,24 @@
<input type="file" id="upload-gallery" accept=".png,.jpg,.jpeg,.webp" multiple hidden> <input type="file" id="upload-gallery" accept=".png,.jpg,.jpeg,.webp" multiple hidden>
<div id="gallery"></div> <div id="gallery"></div>
</div> </div>
<script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/upload.js') }}" defer></script> <div class="section">
<script src="{{ url_for('static', filename='js/build.js') }}" defer></script> <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> </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>
<!-- Delete confirmation modal --> <!-- Delete confirmation modal -->
<div id="delete-modal" class="modal" style="display:none;"> <div id="delete-modal" class="modal" style="display:none;">
<div class="modal-content"> <div class="modal-content">
@ -94,5 +108,19 @@
<div id="zip-loader" style="display:none;">Creating ZIP...</div> <div id="zip-loader" style="display:none;">Creating ZIP...</div>
</div> </div>
</div> </div>
<div id="footer">
<div class="content-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> v1.3</a> — © 2025</p>
</div>
<div class="footer-links">
<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 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>
</body> </body>
</html> </html>

154
src/webui/img/favicon.svg Normal file
View File

@ -0,0 +1,154 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 1000">
<!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8) -->
<defs>
<style>
.st0 {
fill: url(#Dégradé_sans_nom_265);
stroke: url(#Dégradé_sans_nom_33);
}
.st0, .st1, .st2, .st3, .st4, .st5, .st6, .st7, .st8, .st9, .st10, .st11 {
stroke-miterlimit: 10;
}
.st1 {
fill: url(#Dégradé_sans_nom_269);
stroke: url(#Dégradé_sans_nom_334);
}
.st2 {
fill: url(#Dégradé_sans_nom_268);
stroke: url(#Dégradé_sans_nom_333);
}
.st3 {
fill: url(#Dégradé_sans_nom_266);
stroke: url(#Dégradé_sans_nom_331);
}
.st4 {
fill: url(#Dégradé_sans_nom_267);
stroke: url(#Dégradé_sans_nom_332);
}
.st12 {
fill: url(#Dégradé_sans_nom_261);
}
.st13 {
fill: url(#Dégradé_sans_nom_262);
}
.st14 {
fill: url(#Dégradé_sans_nom_264);
}
.st15 {
fill: url(#Dégradé_sans_nom_263);
}
.st5 {
fill: url(#Dégradé_sans_nom_2616);
stroke: url(#Dégradé_sans_nom_3311);
}
.st6 {
fill: url(#Dégradé_sans_nom_2615);
stroke: url(#Dégradé_sans_nom_3310);
}
.st16 {
fill: #fff;
}
.st17 {
fill: url(#Dégradé_sans_nom_26);
}
.st7 {
fill: url(#Dégradé_sans_nom_2610);
stroke: url(#Dégradé_sans_nom_335);
}
.st8 {
fill: url(#Dégradé_sans_nom_2613);
stroke: url(#Dégradé_sans_nom_338);
}
.st9 {
fill: url(#Dégradé_sans_nom_2614);
stroke: url(#Dégradé_sans_nom_339);
}
.st10 {
fill: url(#Dégradé_sans_nom_2611);
stroke: url(#Dégradé_sans_nom_336);
}
.st11 {
fill: url(#Dégradé_sans_nom_2612);
stroke: url(#Dégradé_sans_nom_337);
}
</style>
<linearGradient id="Dégradé_sans_nom_26" data-name="Dégradé sans nom 26" x1="373.2" y1="159.5" x2="625.1" y2="411.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#55c3ec"/>
<stop offset="1" stop-color="#1d71b8" stop-opacity=".8"/>
</linearGradient>
<linearGradient id="Dégradé_sans_nom_261" data-name="Dégradé sans nom 26" x1="143.1" y1="200.5" x2="395" y2="452.4" gradientTransform="translate(30.8 109.3)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_262" data-name="Dégradé sans nom 26" x1="81.3" y1="60.6" x2="333.2" y2="312.5" gradientTransform="translate(187.1 873.6) rotate(-90)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_263" data-name="Dégradé sans nom 26" x1="-44.4" y1="16.5" x2="207.5" y2="268.4" gradientTransform="translate(705.4 808.2) rotate(-180)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_264" data-name="Dégradé sans nom 26" x1="-67.9" y1="-58.9" x2="184" y2="193" gradientTransform="translate(770.9 385.1) rotate(90)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_265" data-name="Dégradé sans nom 26" x1="74.5" y1="560.2" x2="106.2" y2="591.8" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_33" data-name="Dégradé sans nom 33" x1="74.2" y1="559.9" x2="106.5" y2="592.2" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#55c3ec"/>
<stop offset="1" stop-color="#1d71b8" stop-opacity=".5"/>
</linearGradient>
<linearGradient id="Dégradé_sans_nom_266" data-name="Dégradé sans nom 26" x1="158.2" y1="648.8" x2="176.7" y2="667.3" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_331" data-name="Dégradé sans nom 33" x1="157.8" y1="648.4" x2="177.1" y2="667.7" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_33"/>
<linearGradient id="Dégradé_sans_nom_267" data-name="Dégradé sans nom 26" x1="210.2" y1="714.7" x2="249.8" y2="754.3" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_332" data-name="Dégradé sans nom 33" x1="209.9" y1="714.3" x2="250.2" y2="754.6" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_33"/>
<linearGradient id="Dégradé_sans_nom_268" data-name="Dégradé sans nom 26" x1="-54" y1="72.2" x2="-14.4" y2="111.8" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_333" data-name="Dégradé sans nom 33" x1="-54.4" y1="71.9" x2="-14.1" y2="112.2" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_33"/>
<linearGradient id="Dégradé_sans_nom_269" data-name="Dégradé sans nom 26" x1="485.1" y1="-9.2" x2="503.7" y2="9.4" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_334" data-name="Dégradé sans nom 33" x1="484.8" y1="-9.6" x2="504" y2="9.7" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_33"/>
<linearGradient id="Dégradé_sans_nom_2610" data-name="Dégradé sans nom 26" x1="825.1" y1="682.3" x2="856.8" y2="713.9" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_335" data-name="Dégradé sans nom 33" x1="824.8" y1="681.9" x2="857.1" y2="714.3" xlink:href="#Dégradé_sans_nom_33"/>
<linearGradient id="Dégradé_sans_nom_2611" data-name="Dégradé sans nom 26" x1="308.5" y1="356.5" x2="340.3" y2="388.3" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_336" data-name="Dégradé sans nom 33" x1="308.1" y1="356.2" x2="340.7" y2="388.7" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_33"/>
<linearGradient id="Dégradé_sans_nom_2612" data-name="Dégradé sans nom 26" x1="540.4" y1="450.4" x2="559" y2="469" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_337" data-name="Dégradé sans nom 33" x1="540.1" y1="450" x2="559.4" y2="469.3" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_33"/>
<linearGradient id="Dégradé_sans_nom_2613" data-name="Dégradé sans nom 26" x1="-336.4" y1="326.9" x2="-296.8" y2="366.5" gradientTransform="translate(342.9 490.5) rotate(-175.4)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_338" data-name="Dégradé sans nom 33" x1="-336.7" y1="326.5" x2="-296.4" y2="366.8" gradientTransform="translate(342.9 490.5) rotate(-175.4)" xlink:href="#Dégradé_sans_nom_33"/>
<linearGradient id="Dégradé_sans_nom_2614" data-name="Dégradé sans nom 26" x1="115" y1="-29.9" x2="133.6" y2="-11.3" gradientTransform="translate(814.9 151.4) rotate(139.6)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_339" data-name="Dégradé sans nom 33" x1="114.7" y1="-30.2" x2="134" y2="-11" gradientTransform="translate(814.9 151.4) rotate(139.6)" xlink:href="#Dégradé_sans_nom_33"/>
<linearGradient id="Dégradé_sans_nom_2615" data-name="Dégradé sans nom 26" x1="94.5" y1="304.2" x2="124.4" y2="334" gradientTransform="translate(568 142) rotate(97.9)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_3310" data-name="Dégradé sans nom 33" x1="94.2" y1="303.8" x2="124.7" y2="334.4" gradientTransform="translate(568 142) rotate(97.9)" xlink:href="#Dégradé_sans_nom_33"/>
<linearGradient id="Dégradé_sans_nom_2616" data-name="Dégradé sans nom 26" x1="435.8" y1="254.1" x2="454.4" y2="272.7" gradientTransform="translate(257.1 -349) rotate(52.9)" xlink:href="#Dégradé_sans_nom_26"/>
<linearGradient id="Dégradé_sans_nom_3311" data-name="Dégradé sans nom 33" x1="435.5" y1="253.8" x2="454.8" y2="273.1" gradientTransform="translate(257.1 -349) rotate(52.9)" xlink:href="#Dégradé_sans_nom_33"/>
</defs>
<g id="Calque_1">
<circle class="st16" cx="499.5" cy="499.5" r="499.5"/>
</g>
<g id="Calque_2">
<g id="Calque_3">
<ellipse class="st17" cx="499.2" cy="285.5" rx="139.8" ry="209.5"/>
<ellipse class="st12" cx="299.9" cy="435.8" rx="139.8" ry="209.5" transform="translate(-207.3 586.3) rotate(-72)"/>
<ellipse class="st13" cx="373.6" cy="666.3" rx="209.5" ry="139.8" transform="translate(-385.1 576.9) rotate(-54)"/>
<ellipse class="st15" cx="623.9" cy="665.8" rx="139.8" ry="209.5" transform="translate(-272.2 493.9) rotate(-36)"/>
<ellipse class="st14" cx="703.9" cy="443.1" rx="209.5" ry="139.8" transform="translate(-94.9 211.2) rotate(-16)"/>
<circle class="st0" cx="90.4" cy="576" r="22.4"/>
<circle class="st3" cx="175.6" cy="607.9" r="13.1"/>
<circle class="st4" cx="140.8" cy="691.6" r="28"/>
<circle class="st2" cx="829.7" cy="602.6" r="28"/>
<circle class="st1" cx="908.9" cy="562.1" r="13.1"/>
<circle class="st7" cx="840.9" cy="698.1" r="22.4"/>
<circle class="st10" cx="466.1" cy="876.5" r="22.5"/>
<circle class="st11" cx="538.6" cy="839.8" r="13.1"/>
<circle class="st8" cx="686.1" cy="170.1" r="28"/>
<circle class="st9" cx="733.7" cy="247.7" r="13.1"/>
<circle class="st6" cx="236.9" cy="206.5" r="21.1"/>
<circle class="st5" cx="315.4" cy="164.9" r="13.1"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.6 KiB

2
src/webui/img/gitea.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#48cf51ff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gitea icon</title><path d="M4.186 5.421C2.341 5.417-.13 6.59.006 9.531c.213 4.594 4.92 5.02 6.801 5.057.206.862 2.42 3.834 4.059 3.99h7.18c4.306-.286 7.53-13.022 5.14-13.07-3.953.186-6.296.28-8.305.296v3.975l-.626-.277-.004-3.696c-2.306-.001-4.336-.108-8.189-.298-.482-.003-1.154-.085-1.876-.087zm.261 1.625h.22c.262 2.355.688 3.732 1.55 5.836-2.2-.26-4.072-.899-4.416-3.285-.178-1.235.422-2.524 2.646-2.552zm8.557 2.315c.15.002.303.03.447.096l.749.323-.537.979a.672.597 0 0 0-.241.038.672.597 0 0 0-.405.764.672.597 0 0 0 .112.174l-.926 1.686a.672.597 0 0 0-.222.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.765.672.597 0 0 0-.158-.22l.902-1.642a.672.597 0 0 0 .293-.03.672.597 0 0 0 .213-.112c.348.146.633.265.838.366.308.152.417.253.45.365.033.11-.003.322-.177.694-.13.277-.345.67-.599 1.133a.672.597 0 0 0-.251.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.764.672.597 0 0 0-.137-.202c.251-.458.467-.852.606-1.148.188-.402.286-.701.2-.99-.086-.289-.35-.477-.7-.65-.23-.113-.517-.233-.86-.377a.672.597 0 0 0-.038-.239.672.597 0 0 0-.145-.209l.528-.963 2.924 1.263c.528.229.746.79.49 1.26l-2.01 3.68c-.257.469-.888.663-1.416.435l-4.137-1.788c-.528-.228-.747-.79-.49-1.26l2.01-3.679c.176-.323.53-.515.905-.53h.064z"/></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

19
src/webui/img/github.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>github [#142]</title>
<desc>Created with Sketch.</desc>
<defs>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#ffffffff">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]">
</path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

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

@ -0,0 +1,85 @@
<!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 first-content">
<div id="toast-container"></div>
<h1>Static Gallery Generator</h1>
<p>Use this generator to create a static gallery from your photos. Then, upload the static files to your preferred web server.</p>
<!-- 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>
</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>
<div id="footer">
<div class="content-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> v1.3</a> — © 2025</p>
</div>
<div class="footer-links">
<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 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>
</body>
</html>

View File

@ -21,24 +21,32 @@ function showToast(message, type = "success", duration = 3000) {
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
// Get build button and modal elements // Get build button and modal elements
const buildBtn = document.getElementById("build-btn"); 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 buildModal = document.getElementById("build-success-modal");
const buildModalClose = document.getElementById("build-success-modal-close"); const buildModalClose = document.getElementById("build-success-modal-close");
const downloadZipBtn = document.getElementById("download-zip-btn"); const downloadZipBtn = document.getElementById("download-zip-btn");
const zipLoader = document.getElementById("zip-loader"); const zipLoader = document.getElementById("zip-loader");
// Build action handler
async function handleBuildClick() {
// Trigger build on backend
const res = await fetch("/api/build", { method: "POST" });
const result = await res.json();
if (result.status === "ok") {
// Show build success modal
if (buildModal) buildModal.style.display = "flex";
} else {
showToast(result.message || "❌ Build failed!", "error");
}
}
// Handle build button click // Handle build button click
if (buildBtn) { if (buildBtn) {
buildBtn.addEventListener("click", async () => { buildBtn.addEventListener("click", handleBuildClick);
// Trigger build on backend }
const res = await fetch("/api/build", { method: "POST" }); // Handle stepper-build button click
const result = await res.json(); if (stepperBuildBtn) {
if (result.status === "ok") { stepperBuildBtn.addEventListener("click", handleBuildClick);
// Show build success modal
if (buildModal) buildModal.style.display = "flex";
} else {
showToast(result.message || "❌ Build failed!", "error");
}
});
} }
// Handle download zip button click // Handle download zip button click

View File

@ -13,7 +13,7 @@
<input type="checkbox" id="nav-check"> <input type="checkbox" id="nav-check">
<div class="nav-header"> <div class="nav-header">
<div class="nav-title"> <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> </div>
<div class="nav-btn"> <div class="nav-btn">
@ -25,11 +25,11 @@
</div> </div>
<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 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>
@ -166,6 +166,19 @@
</fieldset> </fieldset>
<button type="submit">Save</button> <button type="submit">Save</button>
</form> </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> </div>
<!-- Delete confirmation modal (now outside .content-inner) --> <!-- Delete confirmation modal (now outside .content-inner) -->
<div id="delete-modal" class="modal" style="display:none;"> <div id="delete-modal" class="modal" style="display:none;">
@ -201,6 +214,20 @@
<div id="zip-loader" style="display:none;">Creating ZIP...</div> <div id="zip-loader" style="display:none;">Creating ZIP...</div>
</div> </div>
</div> </div>
<div id="footer">
<div class="content-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> v1.3</a> — © 2025</p>
</div>
<div class="footer-links">
<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 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>
<script src="{{ url_for('static', filename='js/site-info.js')}}"></script> <script src="{{ url_for('static', filename='js/site-info.js')}}"></script>
<script src="{{ url_for('static', filename='js/build.js') }}"></script> <script src="{{ url_for('static', filename='js/build.js') }}"></script>
</body> </body>

View File

@ -5,16 +5,26 @@ body {
background: #111010; background: #111010;
/* background:radial-gradient(ellipse at bottom center, #002a30, #000000bd), radial-gradient(ellipse at top center, #0558a8, #000000fa); */ /* background:radial-gradient(ellipse at bottom center, #002a30, #000000bd), radial-gradient(ellipse at top center, #0558a8, #000000fa); */
color: #FBFBFB; color: #FBFBFB;
display: flex;
flex-direction: column;
min-height: 100vh; min-height: 100vh;
margin:0px; margin:0px;
padding-top: 70px; }
a {
text-decoration: none;
color: #d3d3d3;
} }
.content-inner { .content-inner {
max-width: 90%; width: 100%;
margin: 0 auto; margin: 0 auto;
max-width: 1140px;
padding: 0 40px;
padding-top: 70px;
} }
h1, h2 { h1, h2 {
color: #FBFBFB; color: #FBFBFB;
} }
@ -43,7 +53,7 @@ h2 {
} }
/* --- Upload Section --- */ /* --- Upload Section --- */
.upload-section { .section {
margin-bottom: 30px; margin-bottom: 30px;
background-color: rgb(67 67 67 / 26%); background-color: rgb(67 67 67 / 26%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@ -52,7 +62,7 @@ h2 {
padding: 0px 20px 20px 20px; padding: 0px 20px 20px 20px;
} }
.upload-section label { .section label {
cursor: pointer; cursor: pointer;
} }
@ -114,7 +124,7 @@ h2 {
width: 100%; width: 100%;
} }
.upload-section label { .section label {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -327,11 +337,11 @@ h2 {
} }
.nav > .nav-links > .nav-list > .nav-item > a:hover { .nav > .nav-links > .nav-list > .nav-item > a:hover {
color: #00b0f0; color: #55c3ec;
} }
.nav > .nav-links > .nav-list > .nav-item > a:active { .nav > .nav-links > .nav-list > .nav-item > a:active {
color: #00b0f0; color: #55c3ec;
} }
.nav > #nav-check { .nav > #nav-check {
@ -361,7 +371,7 @@ h2 {
padding: 10px 25px; padding: 10px 25px;
border-radius: 40px; border-radius: 40px;
margin: 15px 20px 15px 10px; margin: 15px 20px 15px 10px;
font-size: 12px; font-size: 14px;
display: inline; display: inline;
background: linear-gradient(135deg, #26c4ff, #016074); background: linear-gradient(135deg, #26c4ff, #016074);
transition: all 0.2s ease; transition: all 0.2s ease;
@ -392,7 +402,7 @@ h2 {
transition: all 0.3s; transition: all 0.3s;
} }
/* --- Custom Upload Buttons --- */ /* --- Custom Upload Buttons --- */
.up-btn { .up-btn, .footer-links a{
display: inline-block; display: inline-block;
background: #00000000; background: #00000000;
color: #fff; color: #fff;
@ -408,7 +418,7 @@ h2 {
border: 1px solid #585858; border: 1px solid #585858;
} }
.up-btn:hover { .up-btn:hover, .footer-links a:hover {
background: #2d2d2d; background: #2d2d2d;
} }
@ -506,14 +516,6 @@ h2 {
/* --- Site Info --- */ /* --- Site Info --- */
/* --- Site Info Form --- */
#site-info.content-inner, #theme-editor.content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1140px;
padding: 0 40px 40px 40px;
}
fieldset { fieldset {
background-color: rgb(67 67 67 / 26%); background-color: rgb(67 67 67 / 26%);
@ -618,7 +620,7 @@ img#thumbnail-preview {
border-radius: 30px; border-radius: 30px;
padding: 12px 32px; padding: 12px 32px;
font-size: 1.1em; font-size: 1.1em;
margin-top: 18px; margin: 0 0 45px 0;
cursor: pointer; cursor: pointer;
box-shadow: 0 4px 16px rgba(38,196,255,0.15); box-shadow: 0 4px 16px rgba(38,196,255,0.15);
transition: background 0.2s; transition: background 0.2s;
@ -717,7 +719,7 @@ input[type="color"].color-input {
opacity:0; opacity:0;
} }
fieldset p { fieldset p, .section p {
font-size: 14px; font-size: 14px;
font-style: italic; font-style: italic;
color: #b3b3b3; color: #b3b3b3;
@ -741,3 +743,148 @@ fieldset p {
#theme-editor-form button[type="button"]#choose-font-btn { #theme-editor-form button[type="button"]#choose-font-btn {
margin-top: 16px; 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 */
}
#footer {
background-color: #0c0d0c29;
z-index: 1000;
backdrop-filter: blur(20px);
border-top: 1px solid #21212157;
width: 100%;
margin-top: auto;
}
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
}
.footer-links, .footer-links a {
display: flex;
gap: 12px;
}
.footer-links a {
gap: 8px;
}
.lum-first {
font-weight: bold;
}
.lum-second {
color: #55c3ec;
font-weight: bold;
}
#footer a {
color: #fff;
}
.footer-credit .lum-first::before {
content: url(/img/favicon.svg);
display: inline-block;
}
#footer .content-inner {
padding-top: 0px;
}
.icon {
width: 16px;
height: 16px;
display: flex;
}
.icon-text {
display: flex;
}

View File

@ -13,7 +13,7 @@
<input type="checkbox" id="nav-check"> <input type="checkbox" id="nav-check">
<div class="nav-header"> <div class="nav-header">
<div class="nav-title"> <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> </div>
<div class="nav-btn"> <div class="nav-btn">
@ -25,16 +25,17 @@
</div> </div>
<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 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 id="theme-editor" class="content-inner"> <div id="theme-editor" class="content-inner">
<div id="toast-container"></div> <div id="toast-container"></div>
@ -169,6 +170,20 @@
</fieldset> </fieldset>
<button type="submit">Save Theme</button> <button type="submit">Save Theme</button>
</form> </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> </div>
<!-- Delete confirmation modal for favicon --> <!-- Delete confirmation modal for favicon -->
<div id="delete-favicon-modal" class="modal" style="display:none;"> <div id="delete-favicon-modal" class="modal" style="display:none;">
@ -204,6 +219,20 @@
<div id="zip-loader" style="display:none;">Creating ZIP...</div> <div id="zip-loader" style="display:none;">Creating ZIP...</div>
</div> </div>
</div> </div>
<div id="footer">
<div class="content-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> v1.3</a> — © 2025</p>
</div>
<div class="footer-links">
<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 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>
<script src="{{ url_for('static', filename='js/theme-editor.js') }}"></script> <script src="{{ url_for('static', filename='js/theme-editor.js') }}"></script>
<script src="{{ url_for('static', filename='js/build.js') }}"></script> <script src="{{ url_for('static', filename='js/build.js') }}"></script>
</body> </body>