From 0e163cab8b5aea376d770106dab0a3fa7ece4b37 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sun, 7 Sep 2025 20:51:48 +0000
Subject: [PATCH] Update web/templates/settings/home.html

---
 web/templates/settings/home.html | 72 +++++++++++++++++++++++++++-----
 1 file changed, 62 insertions(+), 10 deletions(-)

diff --git a/web/templates/settings/home.html b/web/templates/settings/home.html
index 219ca1d..4e9c309 100644
--- a/web/templates/settings/home.html
+++ b/web/templates/settings/home.html
@@ -122,18 +122,16 @@
         <h2 class="cc-panel-title">Release Announcement</h2>
       </div>
       <div class="cc-panel-body">
-        <form method="post" action="{% url 'announcement_tools' %}" class="cc-form">
+        <form id="announcement-form" method="post" action="{% url 'announcement_tools' %}" class="cc-form">
           {% csrf_token %}
-          {% if announcement_form %}
-            {{ announcement_form.as_p }}
-          {% else %}
-            <label class="cc-label">Title</label>
-            <input type="text" name="title" class="tool-input">
-            <label class="cc-label">Message</label>
-            <textarea name="message" rows="5" class="tool-input" placeholder="What’s new…"></textarea>
-            <label class="cc-check"><input type="checkbox" name="is_active" checked> Active</label>
-          {% endif %}
+          <label class="cc-label">Title</label>
+          <input type="text" name="title" class="tool-input" id="annc-title" />
+          <label class="cc-label">Message</label>
+          <textarea name="message" rows="5" class="tool-input" id="annc-message" placeholder="What’s new…"></textarea>
+          <!-- Always active -->
+          <input type="hidden" name="is_active" value="on" />
           <div class="cc-actions">
+            <button type="button" id="annc-preview-btn" class="btn">Preview</button>
             <button class="btn btn-primary">Publish</button>
           </div>
         </form>
@@ -168,6 +166,20 @@
   </div>
 </div>
 
+<!-- Announcement Preview Modal -->
+<div id="annc-preview-modal" style="position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:10000;background:rgba(15,23,42,.35);backdrop-filter:blur(2px);">
+  <div role="dialog" aria-modal="true" aria-labelledby="annc-prev-title" class="card" style="max-width:680px;width:min(92vw,680px);padding:18px 18px 12px;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);background:#fff;position:relative;">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
+      <div style="font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#64748b;font-weight:700;">Announcement Preview</div>
+      <button type="button" id="annc-prev-close" class="btn btn-secondary">Close</button>
+    </div>
+    <div style="border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:linear-gradient(180deg,#ffffff, #fbfdff);">
+      <div id="annc-prev-title" style="font-weight:800;font-size:18px;color:#0f172a;margin-bottom:6px;"></div>
+      <div id="annc-prev-message" style="font-size:15px;line-height:1.45;color:#111827;white-space:pre-wrap;"></div>
+    </div>
+  </div>
+</div>
+
 <!-- Toast for Clear History -->
 <div id="toast-clear-history"
      style="position:fixed; right:16px; bottom:16px; padding:10px 14px; border-radius:10px;
@@ -193,6 +205,9 @@
 .cc-label{display:block;font-weight:600;margin:8px 0 6px;color:#0f172a}
 .cc-actions{display:flex;align-items:center;gap:10px;margin-top:10px}
 .cc-form .tool-input{border:1px solid var(--border,#d1d5db);border-radius:10px;padding:8px 10px;font-size:14px}
+/* make announcement inputs full-width */
+.cc-form .tool-input{width:100%;}
+textarea.tool-input{min-height:140px;resize:vertical;width:100%;}
 /* Switch */
 .switch{position:relative;display:inline-block;width:46px;height:26px}
 .switch input{display:none}
@@ -283,6 +298,43 @@
         .catch(()=>alert("Could not save the setting. Please try again."));
     });
   })();
+
+  // === Announcement Preview ===
+  (function(){
+    const form   = document.getElementById('announcement-form');
+    const btn    = document.getElementById('annc-preview-btn');
+    const modal  = document.getElementById('annc-preview-modal');
+    const close  = document.getElementById('annc-prev-close');
+    const titleI = document.getElementById('annc-title');
+    const msgI   = document.getElementById('annc-message');
+    const titleO = document.getElementById('annc-prev-title');
+    const msgO   = document.getElementById('annc-prev-message');
+    if (!form || !btn || !modal) return;
+
+    function openModal(){
+      modal.style.display = 'flex';
+      document.documentElement.style.overflow = 'hidden';
+    }
+    function closeModal(){
+      modal.style.display = 'none';
+      document.documentElement.style.overflow = '';
+    }
+    btn.addEventListener('click', function(){
+      const t = (titleI?.value || '').trim();
+      const m = (msgI?.value || '').trim();
+      if (!m){
+        alert('Please enter a Message to preview.');
+        return;
+      }
+      titleO.textContent = t || 'Release Notes';
+      msgO.textContent   = m;
+      openModal();
+    });
+    (close||modal).addEventListener('click', (ev)=>{
+      if (ev.target === modal || ev.target === close) closeModal();
+    });
+    window.addEventListener('keydown', (e)=>{ if (e.key === 'Escape' && modal.style.display === 'flex') closeModal(); });
+  })();
 })();
 </script>