Add newsletter preview

zitianqin · zitianqin · commit 19d0d5152f1b · 2025-03-02T21:19:34.000+11:00
diff --git a/frontend/index.html b/frontend/index.html
@@ -147,21 +147,6 @@
         max-height: 400px;
         overflow: auto;
       }
-
-      #preview-container {
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px;
-        margin-bottom: 20px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-        display: none;
-      }
-
-      .iframe-container {
-        position: relative;
-        overflow: hidden;
-        padding-top: 5px;
-      }
     </style>
   </head>
   <body>
@@ -195,7 +180,20 @@ <h2>Opportunities</h2>
 
         <button id="generate-btn">Generate Newsletter</button>
         <div id="download-link"></div>
-        <pre id="html-preview"></pre>
+        <div id="preview-container" style="display: none">
+          <h2 style="margin-top: 20px; text-align: center">
+            Newsletter Preview
+          </h2>
+          <div
+            id="newsletter-preview"
+            style="
+              border: 1px solid #ddd;
+              border-radius: 5px;
+              margin-top: 15px;
+              overflow: auto;
+            "
+          ></div>
+        </div>
       </div>
     </div>
 
@@ -208,7 +206,6 @@ <h2>Opportunities</h2>
           "opportunities-container"
         );
         const downloadLink = document.getElementById("download-link");
-        const htmlPreview = document.getElementById("html-preview");
 
         // Add button event listeners
         document
@@ -753,6 +750,19 @@ <h3 style="color: #1051ea; font-weight: bold; font-size: 18px; font-family: Helv
               };
             });
 
+            // Generate preview with local data
+            const previewContainer =
+              document.getElementById("preview-container");
+            const previewElement =
+              document.getElementById("newsletter-preview");
+            const localHtml = generateNewsletterHTML(
+              events,
+              articles,
+              opportunities
+            );
+            previewElement.innerHTML = localHtml;
+            previewContainer.style.display = "block";
+
             // Send the data to backend
             fetch("http://localhost:5000/generate", {
               method: "POST",
@@ -774,10 +784,12 @@ <h3 style="color: #1051ea; font-weight: bold; font-size: 18px; font-family: Helv
                   const url = URL.createObjectURL(blob);
 
                   downloadLink.innerHTML = `
-                    <a href="${url}" download="newsletter.html">Download Newsletter HTML</a>
-                    <p>Right-click and select "Save as" to download the newsletter</p>
+                    <a href="${url}" download="newsletter.html">Click Here to Download Newsletter HTML</a>
                   `;
                   downloadLink.style.display = "block";
+
+                  // Update preview with server-generated HTML if it differs
+                  previewElement.innerHTML = htmlContent;
                 } else {
                   alert("Error: " + data.error);
                 }
