Better form
This commit is contained in:
		@@ -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) {
 | 
			
		||||
 
 | 
			
		||||
@@ -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">
 | 
			
		||||
 
 | 
			
		||||
@@ -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;
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user