wah.su/mstickers
1
0
Fork 0
mirror of https://github.com/wah-su/mstickers.git synced 2025-04-06 00:04:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1 from wah-su/main

Browse source 
update web
This commit is contained in:
Kentai Radiquum 2024-12-29 03:20:02 +05:00 • committed by GitHub
commit a044e42e3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 94 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
index.html
View file

@ -9,12 +9,12 @@
</head> </head>
<body> <body>
<div class="absolute inset-0 -z-10 tiledBackground"></div> <div class="fixed inset-0 min-h-screen -z-10 tiledBackground"></div>
<div class="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900 to-black"></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-w-full min-h-screen gap-4 mx-auto"> <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-col hidden gap-4 w-full md:w-[600px]" 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 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"> id="preview_sticker_pack">
<img src="static/images/cinny.png" class="object-contain w-64" alt="" id="preview_sticker_pack_image" /> <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"> <div class="flex flex-col justify-center gap-2">
@ -32,32 +32,32 @@
</div> </div>
</div> </div>
<div class="flex flex-col gap-2"> <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" /> <img src="static/images/telegram.png" alt="" class="object-contain w-10" />
<p class="text-2xl text-slate-50">Telegram</p> <p class="text-2xl text-slate-50">Telegram</p>
</a> </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" /> <img src="static/images/element.png" alt="" class="object-contain w-10" />
<p class="text-2xl text-slate-50">Element</p> <p class="text-2xl text-slate-50">Element</p>
</button> </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" /> <img src="static/images/fluffychat.png" alt="" class="object-contain w-10" />
<p class="text-2xl text-slate-50">FluffyChat</p> <p class="text-2xl text-slate-50">FluffyChat</p>
</a> </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" /> <img src="static/images/cinny.png" alt="" class="object-contain w-10" />
<p class="text-2xl text-slate-50">Cinny</p> <p class="text-2xl text-slate-50">Cinny</p>
</a> </a>
</div> </div>
</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> <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: 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>
<p class="whitespace-pre"> <p class="md:whitespace-pre">
{ {
"stickerpicker": { "stickerpicker": {
"content": { "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> <button class="flex items-center justify-center w-full py-2 text-2xl bg-red-600 rounded-lg" onclick="toggleElementInstruction()">Close</button>
</div> </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> </div>
<script src="static/pack_preview.js"></script> <script src="static/pack_preview.js"></script>
</body> </body>

27
static/pack_preview.js
View file

@ -3,6 +3,7 @@ const packName = document.getElementById("preview_sticker_pack_name");
const packAuthor_by = document.getElementById("preview_sticker_pack_author_by"); const packAuthor_by = document.getElementById("preview_sticker_pack_author_by");
const packAuthor = document.getElementById("preview_sticker_pack_author"); const packAuthor = document.getElementById("preview_sticker_pack_author");
const packImage = document.getElementById("preview_sticker_pack_image"); 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 packLinkTG = document.getElementById("preview_sticker_pack_add_tg");
const packLinkFC = document.getElementById("preview_sticker_pack_add_fc"); const packLinkFC = document.getElementById("preview_sticker_pack_add_fc");
const packLinkCI = document.getElementById("preview_sticker_pack_add_ci"); const packLinkCI = document.getElementById("preview_sticker_pack_add_ci");
@ -64,6 +65,15 @@ async function loadPack(pack) {
updatePackInfo(data); 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) { function updatePackInfo(data) {
packName.innerHTML = data.title; packName.innerHTML = data.title;
@ -77,13 +87,7 @@ function updatePackInfo(data) {
} }
} }
const _image_id = data.stickers[0].id; packImage.src = getStickerImage(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}`;
if (data.hasOwnProperty("rating") && data.rating) { if (data.hasOwnProperty("rating") && data.rating) {
switch (data.rating.toLowerCase()) { switch (data.rating.toLowerCase()) {
@ -119,6 +123,15 @@ function updatePackInfo(data) {
packLinkCI.classList.remove("hidden"); packLinkCI.classList.remove("hidden");
packLinkCI.classList.add("flex"); 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() { function toggleElementInstruction() {

77
static/tailwind.css
View file

@ -588,16 +588,24 @@ video {
} }
} }
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute { .absolute {
position: absolute; position: absolute;
} }
.inset-0 { .sticky {
inset: 0px; position: sticky;
} }
.top-\[25\%\] { .inset-0 {
top: 25%; inset: 0px;
} }
.-z-10 { .-z-10 {
@ -621,8 +629,8 @@ video {
margin-right: auto; margin-right: auto;
} }
.block { .mt-4 {
display: block; margin-top: 1rem;
} }
.flex { .flex {
@ -633,10 +641,6 @@ video {
display: none; display: none;
} }
.aspect-video {
aspect-ratio: 16 / 9;
}
.h-16 { .h-16 {
height: 4rem; height: 4rem;
} }
@ -649,6 +653,10 @@ video {
width: 2.5rem; width: 2.5rem;
} }
.w-20 {
width: 5rem;
}
.w-64 { .w-64 {
width: 16rem; width: 16rem;
} }
@ -657,18 +665,18 @@ video {
width: 100%; width: 100%;
} }
.min-w-full { .max-w-\[90\%\] {
min-width: 100%; max-width: 90%;
}
.max-w-\[768px\] {
max-width: 768px;
} }
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
.flex-wrap {
flex-wrap: wrap;
}
.items-center { .items-center {
align-items: center; align-items: center;
} }
@ -685,10 +693,6 @@ video {
gap: 1rem; gap: 1rem;
} }
.whitespace-pre {
white-space: pre;
}
.rounded-lg { .rounded-lg {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
@ -718,6 +722,11 @@ video {
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); 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 { .bg-stone-800 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(41 37 36 / var(--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)); 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 { .bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
} }
@ -830,6 +834,7 @@ video {
background-image: url('images/background-white.png'); background-image: url('images/background-white.png');
background-repeat: repeat; background-repeat: repeat;
background-size: contain; background-size: contain;
background-attachment: fixed;
background-size: 256px; background-size: 256px;
opacity: .25; opacity: .25;
margin-top: -16px; margin-top: -16px;
@ -839,4 +844,26 @@ video {
--tw-scale-x: 1.1; --tw-scale-x: 1.1;
--tw-scale-y: 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)); 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;
}
} }

1
tailwind.css
View file

@ -6,6 +6,7 @@
background-image: url('images/background-white.png'); background-image: url('images/background-white.png');
background-repeat: repeat; background-repeat: repeat;
background-size: contain; background-size: contain;
background-attachment: fixed;
background-size: 256px; background-size: 256px;
opacity: .25; opacity: .25;
margin-top: -16px; margin-top: -16px;