Merge pull request #1 from wah-su/main

update web
2025-04-05 07:44:35 +00:00 · 2024-12-29 03:20:02 +05:00 · 2024-12-29 03:20:02 +05:00 · a044e42e3c
commit a044e42e3c
parent 807403afc7 101036f9c7
4 changed files with 94 additions and 44 deletions
--- a/index.html
+++ b/index.html
@ -9,12 +9,12 @@
 </head>

 <body>
-    <div class="absolute inset-0 -z-10 tiledBackground"></div>
-    <div class="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900 to-black"></div>
-    <div class="container flex flex-col items-center justify-center min-w-full min-h-screen gap-4 mx-auto">
+    <div class="fixed inset-0 min-h-screen -z-10 tiledBackground"></div>
+    <div class="fixed inset-0 min-h-screen -z-20 bg-gradient-to-b from-gray-900 to-black"></div>
+    <div class="container flex flex-col items-center justify-center min-h-screen gap-4 p-4 mx-auto">

-        <div class="flex-col hidden gap-4" id="preview_sticker_pack">
-            <div class="flex gap-4 px-4 py-2 rounded-lg shadow-lg bg-stone-800 text-slate-200 aspect-video"
+        <div class="flex-col hidden gap-4 w-full md:w-[600px]" id="preview_sticker_pack">
+            <div class="flex flex-col items-center justify-center gap-4 p-4 rounded-lg shadow-lg md:flex-row bg-stone-800 text-slate-200"
                id="preview_sticker_pack">
                <img src="static/images/cinny.png" class="object-contain w-64" alt="" id="preview_sticker_pack_image" />
                <div class="flex flex-col justify-center gap-2">
@ -32,32 +32,32 @@
                </div>
            </div>
            <div class="flex flex-col gap-2">
-                <a class="bg-[#2f7ca3] h-16 gap-2 items-center px-4 block rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_tg">
+                <a class="bg-[#2f7ca3] h-16 gap-2 items-center px-4 rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_tg">
                    <img src="static/images/telegram.png" alt="" class="object-contain w-10" />
                    <p class="text-2xl text-slate-50">Telegram</p>
                </a>
-                <button onclick="toggleElementInstruction()" class="block bg-[#259d7b] h-16 gap-2 items-center px-4 rounded-lg flex hover:scale-110 transition-transform" id="preview_sticker_pack_add_el">
+                <button onclick="toggleElementInstruction()" class="bg-[#259d7b] h-16 gap-2 items-center px-4 rounded-lg flex hover:scale-110 transition-transform" id="preview_sticker_pack_add_el">
                    <img src="static/images/element.png" alt="" class="object-contain w-10" />
                    <p class="text-2xl text-slate-50">Element</p>
                </button>
-                <a class="bg-[#282443] h-16 gap-2 items-center px-4 block rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_fc">
+                <a class="bg-[#282443] h-16 gap-2 items-center px-4 rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_fc">
                    <img src="static/images/fluffychat.png" alt="" class="object-contain w-10" />
                    <p class="text-2xl text-slate-50">FluffyChat</p>
                </a>
-                <a class="bg-[#373737] h-16 gap-2 items-center px-4 block rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_ci">
+                <a class="bg-[#373737] h-16 gap-2 items-center px-4 rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_ci">
                    <img src="static/images/cinny.png" alt="" class="object-contain w-10" />
                    <p class="text-2xl text-slate-50">Cinny</p>
                </a>
            </div>
        </div>

-        <div class="absolute inset-0 z-10 hidden bg-black opacity-40" id="preview_sticker_pack_add_to_element_overlay"></div>
+        <div class="absolute inset-0 z-10 hidden min-h-screen bg-black opacity-40" id="preview_sticker_pack_add_to_element_overlay"></div>

-        <div class="absolute top-[25%] max-w-[768px] text-white z-20 hidden flex-col gap-4 p-4 rounded-lg shadow-lg bg-stone-900" id="preview_sticker_pack_add_to_element">
+        <div class="absolute md:top-[25%] max-w-[90%] md:max-w-[768px] text-white z-20 hidden flex-col gap-4 p-4 rounded-lg shadow-lg bg-stone-900" id="preview_sticker_pack_add_to_element">
            <p>
            Type /devtools in chat. Other -> Explore account data in Element Web (not "room account data", must be the global one), edit the m.widgets account data event to have the following content:
            </p>
-            <p class="whitespace-pre">
+            <p class="md:whitespace-pre">
 {
    "stickerpicker": {
        "content": {
@ -83,6 +83,15 @@
            <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="p-4 rounded-lg shadow-lg bg-stone-800 text-slate-200 ">
+                <p class="text-2xl">Pack Preview</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>
+            </div>
+        </div>
+
    </div>
    <script src="static/pack_preview.js"></script>
 </body>
--- a/static/pack_preview.js
+++ b/static/pack_preview.js
@ -3,6 +3,7 @@ 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 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");
 const packLinkCI = document.getElementById("preview_sticker_pack_add_ci");
@ -64,6 +65,15 @@ async function loadPack(pack) {
  updatePackInfo(data);
 }

+function getStickerImage(stickerID) {
+  const _image_path = `${stickerID.slice(0, 2)}/${stickerID.slice(
+    2,
+    4
+  )}/${stickerID.slice(4)}`;
+
+  return `${index.homeserver_url}/__thumbnail/${_image_path}`;
+}
+
 function updatePackInfo(data) {
  packName.innerHTML = data.title;

@ -77,13 +87,7 @@ function updatePackInfo(data) {
    }
  }

-  const _image_id = data.stickers[0].id;
-  const _image_path = `${_image_id.slice(0, 2)}/${_image_id.slice(
-    2,
-    4
-  )}/${_image_id.slice(4)}`;
-
-  packImage.src = `${index.homeserver_url}/__thumbnail/${_image_path}`;
+  packImage.src = getStickerImage(data.stickers[0].id);

  if (data.hasOwnProperty("rating") && data.rating) {
    switch (data.rating.toLowerCase()) {
@ -119,6 +123,15 @@ function updatePackInfo(data) {
    packLinkCI.classList.remove("hidden");
    packLinkCI.classList.add("flex");
  }
+
+  for (let i = 0; i < data.stickers.length; i++) {
+    const sticker = data.stickers[i];
+    const stickerImage = document.createElement("img");
+    stickerImage.src = getStickerImage(sticker.id);
+    stickerImage.alt = sticker.body;
+    stickerImage.classList.add('object-contain', 'w-20')
+    packStickers.appendChild(stickerImage);
+  }
 }

 function toggleElementInstruction() {
--- a/static/tailwind.css
+++ b/static/tailwind.css
@ -588,16 +588,24 @@ video {
  }
 }

+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
 .absolute {
  position: absolute;
 }

-.inset-0 {
-  inset: 0px;
+.sticky {
+  position: sticky;
 }

-.top-\[25\%\] {
-  top: 25%;
+.inset-0 {
+  inset: 0px;
 }

 .-z-10 {
@ -621,8 +629,8 @@ video {
  margin-right: auto;
 }

-.block {
-  display: block;
+.mt-4 {
+  margin-top: 1rem;
 }

 .flex {
@ -633,10 +641,6 @@ video {
  display: none;
 }

-.aspect-video {
-  aspect-ratio: 16 / 9;
-}
-
 .h-16 {
  height: 4rem;
 }
@ -649,6 +653,10 @@ video {
  width: 2.5rem;
 }

+.w-20 {
+  width: 5rem;
+}
+
 .w-64 {
  width: 16rem;
 }
@ -657,18 +665,18 @@ video {
  width: 100%;
 }

-.min-w-full {
-  min-width: 100%;
-}
-
-.max-w-\[768px\] {
-  max-width: 768px;
+.max-w-\[90\%\] {
+  max-width: 90%;
 }

 .flex-col {
  flex-direction: column;
 }

+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-center {
  align-items: center;
 }
@ -685,10 +693,6 @@ video {
  gap: 1rem;
 }

-.whitespace-pre {
-  white-space: pre;
-}
-
 .rounded-lg {
  border-radius: 0.5rem;
 }
@ -718,6 +722,11 @@ video {
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }

+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
+}
+
 .bg-stone-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
@ -728,11 +737,6 @@ video {
  background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
 }

-.bg-red-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
-}
-
 .bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
@ -830,6 +834,7 @@ video {
  background-image: url('images/background-white.png');
  background-repeat: repeat;
  background-size: contain;
+  background-attachment: fixed;
  background-size: 256px;
  opacity: .25;
  margin-top: -16px;
@ -839,4 +844,26 @@ video {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@media (min-width: 768px) {
+  .md\:top-\[25\%\] {
+    top: 25%;
+  }
+
+  .md\:w-\[600px\] {
+    width: 600px;
+  }
+
+  .md\:max-w-\[768px\] {
+    max-width: 768px;
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:whitespace-pre {
+    white-space: pre;
+  }
 }
--- a/tailwind.css
+++ b/tailwind.css
@ -6,6 +6,7 @@
    background-image: url('images/background-white.png');
    background-repeat: repeat;
    background-size: contain;
+    background-attachment: fixed;
    background-size: 256px;
    opacity: .25;
    margin-top: -16px;