adding admin preview img

admin/panel/api.js

@@ -40,6 +40,19 @@ document.addEventListener("DOMContentLoaded", function () {
     let child = document.getElementById(`post-${id}`);
     verix_container.removeChild(child);
   };
+
+  let hv = document.getElementById("hv");
+  const disable_display = () => {
+    hv.classList.add("hidden");
+  };
+  hv.onclick = disable_display;
+
+  const hover_display_img = (src) => {
+    hv.classList.remove("hidden");
+    console.log(hv.children);
+    hv.children[0].src = src;
+  };
+
   Fetch()
     .then((e) => {
       if (e.length == 0) {
@@ -56,6 +69,23 @@ document.addEventListener("DOMContentLoaded", function () {
           post_content.className = "h-fit text-md min-h-20  mr-[30px]";
           post_content.appendChild(document.createTextNode(x.content));
           post.appendChild(post_content);
+
+          let media = document.createElement("div");
+          media.className = "w-full flex flex-row gap-2 h-fit overflow-x-auto";
+          post.appendChild(media);
+
+          if (x.media) {
+            x.media.forEach((src) => {
+              let media_cell = document.createElement("img");
+              media_cell.className = "h-30 w-auto my-auto";
+              media_cell.src = `/static/${src}`;
+              media_cell.onclick = () => {
+                hover_display_img(media_cell.src);
+              };
+              media.appendChild(media_cell);
+            });
+          }
+
           let btm_bar = document.createElement("div");
           let msg = document.createElement("p");
           msg.className = "text-sm border-t-3";

admin/panel/index.html

@@ -20,6 +20,10 @@
 			id="verix_container">
 		</div>
 	</div>
+	<div class="hidden fixed top-0 left-0 w-dvw h-dvh z-10 backdrop-brightness-30" id="hv">
+		<img src="" class="h-70dvh lg:w-[40dvw] fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20"
+			alt="img" />
+	</div>
 </body>
 
 </html>