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

Merged
Djeex merged 43 commits from beta into main 2025-08-26 10:52:13 +02:00
25 changed files with 2128 additions and 38 deletions
Showing only changes of commit 7a7876e5ef - Show all commits

View File

@ -28,7 +28,7 @@ document.addEventListener("DOMContentLoaded", () => {
div.style.marginBottom = "6px";
div.innerHTML = `
<input type="text" placeholder="Label" value="${item.label || ""}" style="flex:1;" data-idx="${idx}" data-type="label">
<input type="text" placeholder="URL" value="${item.href || ""}" style="flex:2;" data-idx="${idx}" data-type="href">
<input type="text" placeholder="?=tag1,tag2" value="${item.href || ""}" style="flex:2;" data-idx="${idx}" data-type="href">
<button type="button" class="remove-menu-item" data-idx="${idx}">🗑</button>
`;
menuList.appendChild(div);
@ -120,7 +120,7 @@ document.addEventListener("DOMContentLoaded", () => {
const result = await res.json();
if (result.status === "ok") {
if (thumbnailInput) thumbnailInput.value = result.filename;
updateThumbnailPreview(`/photos/${result.filename}`);
updateThumbnailPreview(`/photos/${result.filename}?t=${Date.now()}`);
showToast("Thumbnail uploaded!", "success");
} else {
showToast("Error uploading thumbnail", "error");
@ -199,7 +199,7 @@ document.addEventListener("DOMContentLoaded", () => {
form.elements["info.author"].value = data.info?.author || "";
form.elements["social.instagram_url"].value = data.social?.instagram_url || "";
if (thumbnailInput) thumbnailInput.value = data.social?.thumbnail || "";
updateThumbnailPreview(data.social?.thumbnail ? `/photos/${data.social.thumbnail}` : "");
updateThumbnailPreview(data.social?.thumbnail ? `/photos/${data.social.thumbnail}?t=${Date.now()}` : "");
form.elements["footer.copyright"].value = data.footer?.copyright || "";
form.elements["footer.legal_label"].value = data.footer?.legal_label || "";
if (themeSelect) {

View File

@ -39,7 +39,7 @@
</div>
</div>
<!-- Toast container for notifications -->
<div class="content-inner">
<div id="site-info" class="content-inner">
<div id="toast-container"></div>
<h1>Edit Site Info</h1>
<form id="site-info-form">
@ -48,28 +48,28 @@
<legend>Info</legend>
<div class="fields">
<div class="input-field">
<label>Title:</label>
<input type="text" name="info.title">
<label>Title</label>
<input type="text" name="info.title" placeholder="Your site title">
</div>
<div class="input-field">
<label>Subtitle:</label>
<input type="text" name="info.subtitle">
<label>Subtitle</label>
<input type="text" name="info.subtitle" placeholder="Your site subtitle">
</div>
<div class="input-field">
<label>Description:</label>
<input type="text" name="info.description"></input>
<label>Description</label>
<input type="text" name="info.description" placeholder="Your site description">
</div>
<div class="input-field">
<label>Canonical URL:</label>
<input type="text" name="info.canonical">
<label>Canonical URL</label>
<input type="text" name="info.canonical" placeholder="https://yoursite.com">
</div>
<div class="input-field">
<label>Keywords (comma separated):</label>
<input type="text" name="info.keywords">
<label>Keywords (comma separated)</label>
<input type="text" name="info.keywords" placeholder="photo, gallery, photography">
</div>
<div class="input-field">
<label>Author:</label>
<input type="text" name="info.author">
<label>Author</label>
<input type="text" name="info.author" placeholder="Your Name">
</div>
</div>
</fieldset>
@ -78,13 +78,15 @@
<legend>Social</legend>
<div class="fields">
<div class="input-field">
<label>Instagram URL:</label>
<input type="text" name="social.instagram_url">
<label>Upload Thumbnail:</label>
<label>Instagram URL</label>
<input type="text" name="social.instagram_url" placeholder="https://instagram.com/yourprofile">
<label class="thumbnail-form-label">Upload Thumbnail</label>
<input type="file" id="thumbnail-upload" accept="image/png,image/jpeg,image/webp" style="display:none;">
<button type="button" id="choose-thumbnail-btn" class="up-btn">Choose a photo</button>
<div class="thumbnail-form">
<img id="thumbnail-preview" src="" alt="Thumbnail preview" style="max-width:100px;display:none;">
<button type="button" id="remove-thumbnail-btn" class="up-btn danger" style="display:none;">Remove</button>
</div>
</div>
</div>
</fieldset>
@ -103,11 +105,11 @@
<legend>Footer</legend>
<div class="fields">
<div class="input-field">
<label>Copyright:</label>
<label>Copyright</label>
<input type="text" name="footer.copyright">
</div>
<div class="input-field">
<label>Legal Label:</label>
<label>Legal Label</label>
<input type="text" name="footer.legal_label">
</div>
</div>
@ -117,19 +119,19 @@
<legend>Legals</legend>
<div class="fields">
<div class="input-field">
<label>Hoster Name:</label>
<label>Hoster Name</label>
<input type="text" name="legals.hoster_name">
</div>
<div class="input-field">
<label>Hoster Address:</label>
<label>Hoster Address</label>
<input type="text" name="legals.hoster_adress">
</div>
<div class="input-field">
<label>Hoster Contact:</label>
<label>Hoster Contact</label>
<input type="text" name="legals.hoster_contact">
</div>
<div class="input-field" style="flex: 1 1 100%;">
<label>Intellectual Property:</label>
<label>Intellectual Property</label>
<div id="ip-list"></div>
<button type="button" id="add-ip-paragraph">+ Add paragraph</button>
</div>
@ -140,7 +142,7 @@
<legend>Build</legend>
<div class="fields">
<div class="input-field">
<label>Theme:</label>
<label>Theme</label>
<select name="build.theme" id="theme-select"></select>
<label>
<input type="checkbox" name="build.convert_images" id="convert-images-checkbox">

View File

@ -364,7 +364,7 @@ h1, h2 {
text-align: center;
transition: all 0.1s ease;
user-select: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
/* box-shadow: 0 4px 10px rgba(0,0,0,0.25);*/
font-size: 14px;
border: none;
}
@ -469,10 +469,15 @@ h1, h2 {
/* --- Site Info --- */
/* --- Site Info Form --- */
#site-info-form {
max-width: 950px;
#site-info.content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1140px;
padding-bottom: 40px;
}
#site-info-form fieldset {
border: none;
margin-bottom: 28px;
@ -533,6 +538,12 @@ h1, h2 {
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
#site-info-form input::placeholder,
#site-info-form textarea::placeholder {
color: #83a8b7be;
font-style: italic;
}
#site-info-form input:focus,
#site-info-form textarea:focus,
#site-info-form select:focus {
@ -587,7 +598,6 @@ h1, h2 {
font-size: 0.98em;
margin-top: 8px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(38,196,255,0.09);
transition: background 0.2s;
}
@ -609,4 +619,14 @@ h1, h2 {
min-width: 100%;
margin-bottom: 12px;
}
}
#site-info-form button.remove-menu-item{
margin-top: 0px;
margin-bottom: 4px;
border-radius: 30px;
}
#site-info-form .thumbnail-form-label {
margin-top: 10px;
}