Djeex/lumeex
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 8 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 +1400 -38
22 changed files with 1400 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 031ff62168 - Show all commits

9
src/webui/index.html
View File

@ -51,7 +51,7 @@
<label for="upload-hero" class="up-btn"> <label for="upload-hero" class="up-btn">
📸 Upload photos 📸 Upload photos
</label> </label>
<button id="remove-all-hero" class="up-btn">🗑 Remove All</button> <button id="remove-all-hero" class="up-btn">🗑 Delete all</button>
</div> </div>
<input type="file" id="upload-hero" accept=".png,.jpg,.jpeg,.webp" multiple hidden> <input type="file" id="upload-hero" accept=".png,.jpg,.jpeg,.webp" multiple hidden>
<div id="hero"></div> <div id="hero"></div>
@ -65,14 +65,13 @@
<label for="upload-gallery" class="up-btn"> <label for="upload-gallery" class="up-btn">
📸 Upload photos 📸 Upload photos
</label> </label>
<button id="remove-all-gallery" class="up-btn">🗑 Remove All</button> <button id="remove-all-gallery" class="up-btn">🗑 Delete all</button>
</div> </div>
<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/main.js') }}"></script> <script src="{{ url_for('static', filename='js/upload.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
</div> </div>
<!-- Delete confirmation modal --> <!-- Delete confirmation modal -->
<div id="delete-modal" class="modal" style="display:none;"> <div id="delete-modal" class="modal" style="display:none;">

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

@ -1,3 +1,4 @@
/* --- Base Styles --- */
body { body {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
margin: 20px; margin: 20px;
@ -11,10 +12,12 @@ body {
max-width: 90%; max-width: 90%;
margin: 0 auto; margin: 0 auto;
} }
h1, h2 { h1, h2 {
color: #FBFBFB; color: #FBFBFB;
} }
/* --- Toolbar --- */
.toolbar { .toolbar {
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -34,6 +37,7 @@ h1, h2 {
background-color: #45a049; background-color: #45a049;
} }
/* --- Upload Section --- */
.upload-section { .upload-section {
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -42,6 +46,7 @@ h1, h2 {
cursor: pointer; cursor: pointer;
} }
/* --- Gallery & Hero Grid --- */
#gallery, #hero { #gallery, #hero {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
@ -49,6 +54,7 @@ h1, h2 {
margin-top: 30px; margin-top: 30px;
} }
/* --- Photo Card --- */
.photo { .photo {
background-color: rgb(67 67 67 / 26%); background-color: rgb(67 67 67 / 26%);
border-radius: 6px; border-radius: 6px;
@ -68,26 +74,25 @@ h1, h2 {
padding: 4px 6px; padding: 4px 6px;
border-radius: 30px; border-radius: 30px;
color: rgb(221, 221, 221); color: rgb(221, 221, 221);
} }
.photo button { .photo button {
padding: 4px; padding: 4px;
border: none; border: none;
background-color:rgb(121 26 19); background-color:rgb(121 26 19);
color: white; color: white;
border-radius: 30px; border-radius: 30px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
margin: 5px 4px 0 4px; margin: 5px 4px 0 4px;
width:100%; width:100%;
} }
.photo button:hover { .photo button:hover {
background-color: #d32f2f; background-color: #d32f2f;
} }
/* Responsive adjustments */ /* --- Responsive Adjustments --- */
@media (max-width: 500px) { @media (max-width: 500px) {
body { body {
margin: 10px; margin: 10px;
@ -104,7 +109,7 @@ h1, h2 {
} }
} }
/* Toast notifications */ /* --- Toast Notifications --- */
#toast-container { #toast-container {
position: fixed; position: fixed;
bottom: 1rem; bottom: 1rem;
@ -136,16 +141,16 @@ h1, h2 {
.toast.success { background-color: #28a7468c; } .toast.success { background-color: #28a7468c; }
.toast.error { background-color: #dc3545; } .toast.error { background-color: #dc3545; }
/* Tags */ /* --- Tags --- */
.tag-input { .tag-input {
display: flex; display: flex;
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
align-content: flex-start; align-content: flex-start;
gap: 4px; gap: 4px;
padding: 4px; padding: 4px;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 10px; margin-top: 10px;
} }
.tag-input input { .tag-input input {
@ -184,9 +189,9 @@ h1, h2 {
padding: 0; padding: 0;
max-height: 150px; max-height: 150px;
overflow-y: auto; overflow-y: auto;
z-index: 999; /* ensure it displays above other elements */ z-index: 999;
display: none; display: none;
box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* subtle shadow for visibility */ box-shadow: 0 4px 8px rgba(0,0,0,0.15);
} }
.tag-input ul.suggestions li { .tag-input ul.suggestions li {
@ -214,6 +219,7 @@ h1, h2 {
cursor: pointer; cursor: pointer;
} }
/* --- Flex Utilities --- */
.flex-item { .flex-item {
display: flex; display: flex;
} }
@ -232,8 +238,7 @@ h1, h2 {
width: 100% width: 100%
} }
/* Top bar */ /* --- Top Bar & Navigation --- */
.nav { .nav {
height: 100%; height: 100%;
} }
@ -246,11 +251,10 @@ h1, h2 {
z-index: 1; z-index: 1;
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border-bottom: 1px solid #21212157; border-bottom: 1px solid #21212157;
} }
.nav img { .nav img {
height: 30px; height: 30px;
padding: 0px; padding: 0px;
margin-top: 10px; margin-top: 10px;
} }
@ -280,14 +284,13 @@ h1, h2 {
} }
.nav-item { .nav-item {
display: inline; display: inline;
} }
.nav-list { .nav-list {
list-style-type: disc; list-style-type: disc;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
.nav > .nav-links > .nav-list > .nav-item > a { .nav > .nav-links > .nav-list > .nav-item > a {
@ -297,7 +300,6 @@ h1, h2 {
height: 100%; height: 100%;
font-weight: 700; font-weight: 700;
color:#fff color:#fff
} }
.nav > .nav-links > .nav-list > .nav-item > a:hover { .nav > .nav-links > .nav-list > .nav-item > a:hover {
@ -308,32 +310,31 @@ h1, h2 {
display: none; display: none;
} }
.nav-list > li + li::before{ .nav-list > li + li::before{
content: " → "; content: " → ";
color: #ffc700; color: #ffc700;
} }
.nav-cta { .nav-cta {
display: inline; display: inline;
float: right; float: right;
height: 70px; height: 70px;
line-height: 70px; line-height: 70px;
} }
.nav-cta > .arrow { .nav-cta > .arrow {
font-size: 12px; font-size: 12px;
display: inline; display: inline;
color: #ffc700; color: #ffc700;
font-weight: 700; font-weight: 700;
} }
.nav-cta > .button { .nav-cta > .button {
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: 12px;
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;
text-decoration: none; text-decoration: none;
@ -342,15 +343,15 @@ h1, h2 {
} }
.nav-cta > .button:hover { .nav-cta > .button:hover {
background: linear-gradient(135deg, #72d9ff, #26657e); background: linear-gradient(135deg, #72d9ff, #26657e);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.nav-links > ul { .nav-links > ul {
display: inline-block; display: inline-block;
} }
/* Custom upload buttons */ /* --- Custom Upload Buttons --- */
.up-btn { .up-btn {
display: inline-block; display: inline-block;
background: #09A0C1; background: #09A0C1;
@ -371,7 +372,7 @@ h1, h2 {
background: #55c3ec; background: #55c3ec;
} }
/* Modal styles */ /* --- Modal Styles --- */
.modal { .modal {
position: fixed; position: fixed;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
@ -379,8 +380,8 @@ h1, h2 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.modal-content { .modal-content {
background: #ffffff29; background: #ffffff29;
color: #fff; color: #fff;
@ -393,6 +394,7 @@ h1, h2 {
text-align: center; text-align: center;
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
} }
.modal-close { .modal-close {
position: absolute; position: absolute;
top: 12px; right: 18px; top: 12px; right: 18px;
@ -402,12 +404,14 @@ h1, h2 {
opacity: 0.7; opacity: 0.7;
} }
.modal-close:hover { opacity: 1; } .modal-close:hover { opacity: 1; }
.modal-actions { .modal-actions {
margin-top: 2rem; margin-top: 2rem;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
justify-content: center; justify-content: center;
} }
.modal-btn { .modal-btn {
padding: 0.5em 1.5em; padding: 0.5em 1.5em;
border-radius: 30px; border-radius: 30px;
@ -419,17 +423,20 @@ h1, h2 {
font-size: 1rem; font-size: 1rem;
transition: background 0.2s; transition: background 0.2s;
} }
.modal-btn.danger { .modal-btn.danger {
background: #c62828; background: #c62828;
} }
.modal-btn:hover { .modal-btn:hover {
background: #55c3ec; background: #55c3ec;
} }
.modal-btn.danger:hover { .modal-btn.danger:hover {
background: #d32f2f; background: #d32f2f;
} }
/* Add this for horizontal alignment of upload and remove-all buttons */ /* --- Upload Actions Row --- */
.upload-actions-row { .upload-actions-row {
display: flex; display: flex;
align-items: center; align-items: center;
@ -437,12 +444,13 @@ h1, h2 {
margin-bottom: 10px; margin-bottom: 10px;
} }
/* Style for Remove All buttons to match upload button look */ /* Remove All Buttons */
#remove-all-hero, #remove-all-gallery { #remove-all-hero, #remove-all-gallery {
background: rgb(121, 26, 19); background: rgb(121, 26, 19);
color: white;
display: none;
} }
#remove-all-gallery:hover, #remove-all-gallery:hover,
#remove-all-hero:hover { #remove-all-hero:hover {
background: #d32f2f; background: #d32f2f;