From a2a64f49bb075ed61a1bc3bfb4a7470e05287501 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 29 Dec 2024 13:51:47 +0500
Subject: [PATCH] add sticker count

---
 index.html             | 4 ++--
 static/pack_preview.js | 4 ++++
 static/tailwind.css    | 8 --------
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 03ed6ff..7e67b2c 100644
--- a/index.html
+++ b/index.html
@@ -83,9 +83,9 @@
             <button class="flex items-center justify-center w-full py-2 text-2xl bg-red-600 rounded-lg" onclick="toggleElementInstruction()">Close</button>
         </div>
 
-        <div class="w-full md:w-[600px]">
+        <div class="w-full md:w-[600px] hidden" id="preview_sticker_pack_stickers_container">
             <div class="p-4 rounded-lg shadow-lg bg-stone-800 text-slate-200 ">
-                <p class="text-2xl">Pack Preview</p>
+                <p class="text-2xl">Pack Preview <span id="preview_sticker_pack_stickers_count"></span></p>
                 <div class="flex flex-wrap gap-4 mt-4 " id="preview_sticker_pack_stickers">
                     <img src="static/images/cinny.png" alt="" class="hidden object-contain w-20" />
                 </div>
diff --git a/static/pack_preview.js b/static/pack_preview.js
index 4e8af01..3aa9fdd 100644
--- a/static/pack_preview.js
+++ b/static/pack_preview.js
@@ -3,6 +3,8 @@ const packName = document.getElementById("preview_sticker_pack_name");
 const packAuthor_by = document.getElementById("preview_sticker_pack_author_by");
 const packAuthor = document.getElementById("preview_sticker_pack_author");
 const packImage = document.getElementById("preview_sticker_pack_image");
+const packStickersC = document.getElementById("preview_sticker_pack_stickers_container");
+const packStickersCount = document.getElementById("preview_sticker_pack_stickers_count");
 const packStickers = document.getElementById("preview_sticker_pack_stickers");
 const packLinkTG = document.getElementById("preview_sticker_pack_add_tg");
 const packLinkFC = document.getElementById("preview_sticker_pack_add_fc");
@@ -124,6 +126,8 @@ function updatePackInfo(data) {
     packLinkCI.classList.add("flex");
   }
 
+  packStickersC.classList.remove('hidden')
+  packStickersCount.innerHTML = `(${data.stickers.length})`;
   for (let i = 0; i < data.stickers.length; i++) {
     const sticker = data.stickers[i];
     const stickerImage = document.createElement("img");
diff --git a/static/tailwind.css b/static/tailwind.css
index e24d958..129cb0f 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -588,10 +588,6 @@ video {
   }
 }
 
-.static {
-  position: static;
-}
-
 .fixed {
   position: fixed;
 }
@@ -600,10 +596,6 @@ video {
   position: absolute;
 }
 
-.sticky {
-  position: sticky;
-}
-
 .inset-0 {
   inset: 0px;
 }