mirror of
https://github.com/wah-su/mstickers.git
synced 2025-04-04 23:34:35 +00:00
feat: add sticker pack stickers preview
This commit is contained in:
parent
acfae9f06f
commit
101036f9c7
GPG key ID:
858E8EE696525EED
4 changed files with 61 additions and 63 deletions
17
index.html
17
index.html
|
|
@ -9,11 +9,11 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="absolute inset-0 min-h-screen -z-10 tiledBackground"></div>
|
||||
<div class="absolute 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-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 px-4 max-w-[600px]" id="preview_sticker_pack">
|
||||
<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" />
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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,9 +629,8 @@ video {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
|
@ -634,18 +641,10 @@ video {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.aspect-video {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.h-16 {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
@ -654,6 +653,10 @@ video {
|
|||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-20 {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.w-64 {
|
||||
width: 16rem;
|
||||
}
|
||||
|
|
@ -662,34 +665,6 @@ video {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.min-w-full {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.max-w-\[768px\] {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.max-w-\[378px\] {
|
||||
max-width: 378px;
|
||||
}
|
||||
|
||||
.max-w-\[512px\] {
|
||||
max-width: 512px;
|
||||
}
|
||||
|
||||
.max-w-\[600px\] {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.max-w-\[256px\] {
|
||||
max-width: 256px;
|
||||
}
|
||||
|
||||
.max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.max-w-\[90\%\] {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
|
@ -698,6 +673,10 @@ video {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -714,10 +693,6 @@ video {
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
.whitespace-pre {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
|
@ -795,11 +770,6 @@ video {
|
|||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
|
|
@ -864,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;
|
||||
|
|
@ -880,6 +851,10 @@ video {
|
|||
top: 25%;
|
||||
}
|
||||
|
||||
.md\:w-\[600px\] {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.md\:max-w-\[768px\] {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue