From 7a7876e5ef9f597be6e484685124a936f44791fa Mon Sep 17 00:00:00 2001
From: Djeex <djeex@djeex.fr>
Date: Mon, 18 Aug 2025 12:29:45 +0200
Subject: [PATCH] Better form

---
 src/webui/js/site-info.js      |  6 ++---
 src/webui/site-info/index.html | 48 ++++++++++++++++++----------------
 src/webui/style/style.css      | 28 +++++++++++++++++---
 3 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/webui/js/site-info.js b/src/webui/js/site-info.js
index 733871f..01b93bf 100644
--- a/src/webui/js/site-info.js
+++ b/src/webui/js/site-info.js
@@ -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) {
diff --git a/src/webui/site-info/index.html b/src/webui/site-info/index.html
index 5fbd7a1..73fa682 100644
--- a/src/webui/site-info/index.html
+++ b/src/webui/site-info/index.html
@@ -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">
diff --git a/src/webui/style/style.css b/src/webui/style/style.css
index aafe85b..e45e6d9 100644
--- a/src/webui/style/style.css
+++ b/src/webui/style/style.css
@@ -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;
 }
\ No newline at end of file