Better global UI
This commit is contained in:
Djeex
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item appear2"><a href="#">Site info</a>
|
||||
<li class="nav-item appear2"><a href="/site-info">Site info</a>
|
||||
<li class="nav-item appear2"><a href="#">Theme info</a>
|
||||
<li class="nav-item appear2"><a href="#">Gallery</a>
|
||||
</ul>
|
||||
|
||||
@@ -13,12 +13,14 @@ function showToast(message, type = "success", duration = 3000) {
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Form and menu logic
|
||||
const form = document.getElementById("site-info-form");
|
||||
const menuList = document.getElementById("menu-items-list");
|
||||
const addMenuBtn = document.getElementById("add-menu-item");
|
||||
|
||||
let menuItems = [];
|
||||
|
||||
// Render menu items
|
||||
function renderMenuItems() {
|
||||
menuList.innerHTML = "";
|
||||
menuItems.forEach((item, idx) => {
|
||||
@@ -28,13 +30,14 @@ 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="?=tag1,tag2" value="${item.href || ""}" style="flex:2;" data-idx="${idx}" data-type="href">
|
||||
<input type="text" placeholder="?tag=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);
|
||||
});
|
||||
}
|
||||
|
||||
// Update menu items from inputs
|
||||
function updateMenuItemsFromInputs() {
|
||||
const inputs = menuList.querySelectorAll("input");
|
||||
const items = [];
|
||||
@@ -46,10 +49,12 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
menuItems = items;
|
||||
}
|
||||
|
||||
// Intellectual property paragraphs logic
|
||||
const ipList = document.getElementById("ip-list");
|
||||
const addIpBtn = document.getElementById("add-ip-paragraph");
|
||||
let ipParagraphs = [];
|
||||
|
||||
// Render IP paragraphs
|
||||
function renderIpParagraphs() {
|
||||
ipList.innerHTML = "";
|
||||
ipParagraphs.forEach((item, idx) => {
|
||||
@@ -65,6 +70,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
});
|
||||
}
|
||||
|
||||
// Update IP paragraphs from textareas
|
||||
function updateIpParagraphsFromInputs() {
|
||||
const textareas = ipList.querySelectorAll("textarea");
|
||||
ipParagraphs = Array.from(textareas).map(textarea => ({
|
||||
@@ -72,27 +78,27 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
})).filter(item => item.paragraph !== "");
|
||||
}
|
||||
|
||||
// --- Build checkboxes ---
|
||||
// Build options
|
||||
const convertImagesCheckbox = document.getElementById("convert-images-checkbox");
|
||||
const resizeImagesCheckbox = document.getElementById("resize-images-checkbox");
|
||||
|
||||
// --- Theme select ---
|
||||
// Theme select
|
||||
const themeSelect = document.getElementById("theme-select");
|
||||
|
||||
// --- Thumbnail upload & modal logic ---
|
||||
// Thumbnail upload and modal logic
|
||||
const thumbnailInput = form?.elements["social.thumbnail"];
|
||||
const thumbnailUpload = document.getElementById("thumbnail-upload");
|
||||
const chooseThumbnailBtn = document.getElementById("choose-thumbnail-btn");
|
||||
const thumbnailPreview = document.getElementById("thumbnail-preview");
|
||||
const removeThumbnailBtn = document.getElementById("remove-thumbnail-btn");
|
||||
|
||||
// Modal elements
|
||||
// Modal elements for delete confirmation
|
||||
const deleteModal = document.getElementById("delete-modal");
|
||||
const deleteModalClose = document.getElementById("delete-modal-close");
|
||||
const deleteModalConfirm = document.getElementById("delete-modal-confirm");
|
||||
const deleteModalCancel = document.getElementById("delete-modal-cancel");
|
||||
|
||||
// Show/hide remove button, preview, and choose button
|
||||
// Show/hide thumbnail preview, remove button, and choose button
|
||||
function updateThumbnailPreview(src) {
|
||||
if (thumbnailPreview) {
|
||||
thumbnailPreview.src = src || "";
|
||||
@@ -106,10 +112,12 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
}
|
||||
}
|
||||
|
||||
// Choose thumbnail button triggers file input
|
||||
if (chooseThumbnailBtn && thumbnailUpload) {
|
||||
chooseThumbnailBtn.addEventListener("click", () => thumbnailUpload.click());
|
||||
}
|
||||
|
||||
// Handle thumbnail upload and refresh preview (with cache busting)
|
||||
if (thumbnailUpload) {
|
||||
thumbnailUpload.addEventListener("change", async (e) => {
|
||||
const file = e.target.files[0];
|
||||
@@ -128,14 +136,14 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
});
|
||||
}
|
||||
|
||||
// Attach modal logic to remove button
|
||||
// Remove thumbnail button triggers modal
|
||||
if (removeThumbnailBtn) {
|
||||
removeThumbnailBtn.addEventListener("click", () => {
|
||||
deleteModal.style.display = "flex";
|
||||
});
|
||||
}
|
||||
|
||||
// Modal logic
|
||||
// Modal logic for thumbnail deletion
|
||||
if (deleteModal && deleteModalClose && deleteModalConfirm && deleteModalCancel) {
|
||||
deleteModalClose.onclick = deleteModalCancel.onclick = () => {
|
||||
deleteModal.style.display = "none";
|
||||
@@ -159,6 +167,40 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
};
|
||||
}
|
||||
|
||||
// Theme upload logic (custom theme folder)
|
||||
const themeUpload = document.getElementById("theme-upload");
|
||||
const chooseThemeBtn = document.getElementById("choose-theme-btn");
|
||||
if (chooseThemeBtn && themeUpload) {
|
||||
chooseThemeBtn.addEventListener("click", () => themeUpload.click());
|
||||
themeUpload.addEventListener("change", async (e) => {
|
||||
const files = Array.from(e.target.files);
|
||||
if (files.length === 0) return;
|
||||
const formData = new FormData();
|
||||
files.forEach(file => {
|
||||
formData.append("files", file, file.webkitRelativePath || file.name);
|
||||
});
|
||||
const res = await fetch("/api/theme/upload", { method: "POST", body: formData });
|
||||
const result = await res.json();
|
||||
if (result.status === "ok") {
|
||||
showToast("Theme uploaded!", "success");
|
||||
// Refresh theme select after upload
|
||||
fetch("/api/themes")
|
||||
.then(res => res.json())
|
||||
.then(themes => {
|
||||
themeSelect.innerHTML = "";
|
||||
themes.forEach(theme => {
|
||||
const option = document.createElement("option");
|
||||
option.value = theme;
|
||||
option.textContent = theme;
|
||||
themeSelect.appendChild(option);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
showToast("Error uploading theme", "error");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fetch theme list and populate select
|
||||
if (themeSelect) {
|
||||
fetch("/api/themes")
|
||||
@@ -180,7 +222,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
});
|
||||
}
|
||||
|
||||
// Load config
|
||||
// Load config from server and populate form
|
||||
if (form) {
|
||||
fetch("/api/site-info")
|
||||
.then(res => res.json())
|
||||
@@ -206,9 +248,9 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
themeSelect.value = data.build?.theme || "";
|
||||
}
|
||||
form.elements["legals.hoster_name"].value = data.legals?.hoster_name || "";
|
||||
form.elements["legals.hoster_adress"].value = data.legals?.hoster_adress || "";
|
||||
form.elements["legals.hoster_address"].value = data.legals?.hoster_address || "";
|
||||
form.elements["legals.hoster_contact"].value = data.legals?.hoster_contact || "";
|
||||
// --- Build checkboxes ---
|
||||
// Build checkboxes
|
||||
if (convertImagesCheckbox) {
|
||||
convertImagesCheckbox.checked = !!data.build?.convert_images;
|
||||
}
|
||||
@@ -262,7 +304,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
updateIpParagraphsFromInputs();
|
||||
});
|
||||
|
||||
// Save config
|
||||
// Save config to server
|
||||
if (form) {
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
@@ -298,7 +340,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
build,
|
||||
legals: {
|
||||
hoster_name: form.elements["legals.hoster_name"].value,
|
||||
hoster_adress: form.elements["legals.hoster_adress"].value,
|
||||
hoster_address: form.elements["legals.hoster_address"].value,
|
||||
hoster_contact: form.elements["legals.hoster_contact"].value,
|
||||
intellectual_property: ipParagraphs
|
||||
}
|
||||
@@ -310,9 +352,9 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
});
|
||||
const result = await res.json();
|
||||
if (result.status === "ok") {
|
||||
showToast("Site info saved!", "success");
|
||||
showToast("✅ Site info saved!", "success");
|
||||
} else {
|
||||
showToast("Error saving site info", "error");
|
||||
showToast("❌ Error saving site info", "error");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item appear2"><a href="#">Site info</a></li>
|
||||
<li class="nav-item appear2"><a href="/site-info">Site info</a></li>
|
||||
<li class="nav-item appear2"><a href="#">Theme info</a></li>
|
||||
<li class="nav-item appear2"><a href="#">Gallery</a></li>
|
||||
</ul>
|
||||
@@ -80,12 +80,12 @@
|
||||
<div class="input-field">
|
||||
<label>Instagram URL</label>
|
||||
<input type="text" name="social.instagram_url" placeholder="https://instagram.com/yourprofile">
|
||||
<label class="thumbnail-form-label">Upload Thumbnail</label>
|
||||
<label class="thumbnail-form-label">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>
|
||||
<button type="button" id="choose-thumbnail-btn" class="up-btn">📸 Upload 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>
|
||||
<button type="button" id="remove-thumbnail-btn" class="remove-btn up-btn danger" style="display:none;">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,15 +120,15 @@
|
||||
<div class="fields">
|
||||
<div class="input-field">
|
||||
<label>Hoster Name</label>
|
||||
<input type="text" name="legals.hoster_name">
|
||||
<input type="text" name="legals.hoster_name" placeholder="Name">
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<label>Hoster Address</label>
|
||||
<input type="text" name="legals.hoster_adress">
|
||||
<input type="text" name="legals.hoster_address" placeholder="Street, Postal Code, City, Country">
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<label>Hoster Contact</label>
|
||||
<input type="text" name="legals.hoster_contact">
|
||||
<input type="text" name="legals.hoster_contact" placeholder="Email or/and Phone">
|
||||
</div>
|
||||
<div class="input-field" style="flex: 1 1 100%;">
|
||||
<label>Intellectual Property</label>
|
||||
@@ -144,8 +144,11 @@
|
||||
<div class="input-field">
|
||||
<label>Theme</label>
|
||||
<select name="build.theme" id="theme-select"></select>
|
||||
<input type="file" id="theme-upload" webkitdirectory directory multiple style="display:none;">
|
||||
<button type="button" id="choose-theme-btn" class="up-btn">📂 Upload custom theme folder</button>
|
||||
<label class="thumbnail-form-label">Images processing</label>
|
||||
<label>
|
||||
<input type="checkbox" name="build.convert_images" id="convert-images-checkbox">
|
||||
<input class="thumbnail-form-label" type="checkbox" name="build.convert_images" id="convert-images-checkbox">
|
||||
Convert images
|
||||
</label>
|
||||
<label>
|
||||
@@ -163,9 +166,9 @@
|
||||
<div class="modal-content">
|
||||
<span id="delete-modal-close" class="modal-close">×</span>
|
||||
<h3>Confirm Deletion</h3>
|
||||
<p id="delete-modal-text">Are you sure you want to delete this image?</p>
|
||||
<p id="delete-modal-text">Are you sure you want to remove this thumbnail?</p>
|
||||
<div class="modal-actions">
|
||||
<button id="delete-modal-confirm" class="modal-btn danger">Delete</button>
|
||||
<button id="delete-modal-confirm" class="modal-btn danger">Remove</button>
|
||||
<button id="delete-modal-cancel" class="modal-btn">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
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;
|
||||
margin: 20px;
|
||||
background:radial-gradient(ellipse at bottom center, #002a30, #000000bd), radial-gradient(ellipse at top center, #0558a8, #000000fa);
|
||||
background: #111010;
|
||||
/* background:radial-gradient(ellipse at bottom center, #002a30, #000000bd), radial-gradient(ellipse at top center, #0558a8, #000000fa); */
|
||||
color: #FBFBFB;
|
||||
min-height: 100vh;
|
||||
margin:0px;
|
||||
@@ -40,6 +41,11 @@ h1, h2 {
|
||||
/* --- Upload Section --- */
|
||||
.upload-section {
|
||||
margin-bottom: 30px;
|
||||
background-color: rgb(67 67 67 / 26%);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #2f2e2e80;
|
||||
border-radius: 8px;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.upload-section label {
|
||||
@@ -242,6 +248,8 @@ h1, h2 {
|
||||
/* --- Top Bar & Navigation --- */
|
||||
.nav {
|
||||
height: 100%;
|
||||
max-width: 1140px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
@@ -307,6 +315,10 @@ h1, h2 {
|
||||
color: #00b0f0;
|
||||
}
|
||||
|
||||
.nav > .nav-links > .nav-list > .nav-item > a:active {
|
||||
color: #00b0f0;
|
||||
}
|
||||
|
||||
.nav > #nav-check {
|
||||
display: none;
|
||||
}
|
||||
@@ -355,7 +367,7 @@ h1, h2 {
|
||||
/* --- Custom Upload Buttons --- */
|
||||
.up-btn {
|
||||
display: inline-block;
|
||||
background: #09A0C1;
|
||||
background: #00000000;
|
||||
color: #fff;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 30px;
|
||||
@@ -366,11 +378,11 @@ h1, h2 {
|
||||
user-select: none;
|
||||
/* box-shadow: 0 4px 10px rgba(0,0,0,0.25);*/
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border: 1px solid #585858;
|
||||
}
|
||||
|
||||
.up-btn:hover {
|
||||
background: #55c3ec;
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
/* --- Modal Styles --- */
|
||||
@@ -384,7 +396,7 @@ h1, h2 {
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #ffffff29;
|
||||
background: #131313;
|
||||
color: #fff;
|
||||
padding: 2rem 2.5rem;
|
||||
border-radius: 10px;
|
||||
@@ -393,7 +405,6 @@ h1, h2 {
|
||||
max-width: 90vw;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
@@ -447,14 +458,14 @@ h1, h2 {
|
||||
|
||||
/* Remove All Buttons */
|
||||
#remove-all-hero, #remove-all-gallery {
|
||||
background: rgb(121, 26, 19);
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#remove-all-gallery:hover,
|
||||
#remove-all-hero:hover {
|
||||
background: #d32f2f;
|
||||
background: rgb(121, 26, 19);
|
||||
}
|
||||
|
||||
/* Responsive: stack buttons vertically on small screens */
|
||||
@@ -474,7 +485,7 @@ h1, h2 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 1140px;
|
||||
padding-bottom: 40px;
|
||||
padding: 0 40px 40px 40px;
|
||||
}
|
||||
|
||||
|
||||
@@ -490,6 +501,16 @@ h1, h2 {
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
#site-info-form fieldset {
|
||||
background-color: rgb(67 67 67 / 26%);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #2f2e2e80;
|
||||
margin-bottom: 28px;
|
||||
padding: 32px 28px;
|
||||
margin: 32px auto;
|
||||
}
|
||||
|
||||
#site-info-form legend {
|
||||
font-size: 1.2em;
|
||||
font-weight: 700;
|
||||
@@ -517,7 +538,7 @@ h1, h2 {
|
||||
#site-info-form label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #b8eaff;
|
||||
color: #e3e3e3;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@@ -525,9 +546,10 @@ h1, h2 {
|
||||
#site-info-form input,
|
||||
#site-info-form textarea,
|
||||
#site-info-form select {
|
||||
background: rgba(4, 44, 60, 0.55);
|
||||
/* background: rgba(4, 44, 60, 0.55);*/
|
||||
background: #1f2223;
|
||||
color: #fff;
|
||||
border: 1px solid #26c4ff33;
|
||||
border: 1px solid #585858;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
@@ -540,17 +562,16 @@ h1, h2 {
|
||||
|
||||
#site-info-form input::placeholder,
|
||||
#site-info-form textarea::placeholder {
|
||||
color: #83a8b7be;
|
||||
color: #585858;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#site-info-form input:focus,
|
||||
#site-info-form textarea:focus,
|
||||
#site-info-form select:focus {
|
||||
border-color: #26c4ff;
|
||||
background: rgba(38, 196, 255, 0.09);
|
||||
border-color: #585858;
|
||||
background: #161616;
|
||||
}
|
||||
|
||||
#site-info-form textarea {
|
||||
min-height: 60px;
|
||||
resize: vertical;
|
||||
@@ -567,8 +588,7 @@ h1, h2 {
|
||||
#site-info-form img#thumbnail-preview {
|
||||
margin-top: 8px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(38,196,255,0.12);
|
||||
border: 1px solid #26c4ff33;
|
||||
border: 1px solid #585858;
|
||||
}
|
||||
|
||||
#site-info-form button[type="submit"] {
|
||||
@@ -590,7 +610,7 @@ h1, h2 {
|
||||
}
|
||||
|
||||
#site-info-form button[type="button"] {
|
||||
background: #074053;
|
||||
background: #00000000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
@@ -599,11 +619,12 @@ h1, h2 {
|
||||
margin-top: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
border: 1px solid #585858;
|
||||
}
|
||||
|
||||
#site-info-form button[type="button"]:hover {
|
||||
background: #26c4ff;
|
||||
color: #002a30;
|
||||
background: #2d2d2d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -621,10 +642,25 @@ h1, h2 {
|
||||
}
|
||||
}
|
||||
|
||||
#site-info-form button.remove-menu-item{
|
||||
#site-info-form button.remove-menu-item, #site-info-form button.remove-ip-paragraph {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 30px;
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
#site-info-form button.remove-menu-item:hover, #site-info-form button.remove-ip-paragraph:hover {
|
||||
background: rgb(121, 26, 19);
|
||||
}
|
||||
|
||||
#site-info-form button.remove-btn {
|
||||
|
||||
border-radius: 30px;
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
#site-info-form button.remove-btn:hover{
|
||||
background: rgb(121, 26, 19);
|
||||
}
|
||||
|
||||
#site-info-form .thumbnail-form-label {
|
||||
|
||||
Reference in New Issue
Block a user