mirror of
https://github.com/wah-su/mstickers.git
synced 2025-04-05 07:44:35 +00:00
99 lines
No EOL
5.5 KiB
HTML
99 lines
No EOL
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Matrix Sticker pack</title>
|
|
<link href="static/tailwind.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<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 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">
|
|
<p class="text-4xl text-bold" id="preview_sticker_pack_name">
|
|
{sticker_pack_name}
|
|
</p>
|
|
<p id="preview_sticker_pack_author_by" class="hidden text-2xl">by <a
|
|
id="preview_sticker_pack_author" class="hidden text-2xl underline">{sticker_pack_author}</a>
|
|
</p>
|
|
<div>
|
|
<p class="hidden text-4xl text-green-400 text-bold" id="preview_sticker_pack_rating_safe">S</p>
|
|
<p class="hidden text-4xl text-yellow-500 text-bold" id="preview_sticker_pack_rating_ques">Q</p>
|
|
<p class="hidden text-4xl text-red-500 text-bold" id="preview_sticker_pack_rating_expl">E</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<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="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 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 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 min-h-screen bg-black opacity-40" id="preview_sticker_pack_add_to_element_overlay"></div>
|
|
|
|
<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="md:whitespace-pre">
|
|
{
|
|
"stickerpicker": {
|
|
"content": {
|
|
"type": "m.stickerpicker",
|
|
"url": "https://matrix.wah.su/stickerpicker/?theme=$theme",
|
|
"name": "Stickerpicker",
|
|
"creatorUserId": "@you:matrix.server.name",
|
|
"data": {}
|
|
},
|
|
"sender": "@you:matrix.server.name",
|
|
"state_key": "stickerpicker",
|
|
"type": "m.widget",
|
|
"id": "stickerpicker"
|
|
}
|
|
}
|
|
</p>
|
|
<p>
|
|
If you do not yet have a m.widgets event, simply create it with that content. You can also use the client-server API directly instead of using Element Web.
|
|
<br />
|
|
<br />
|
|
The theme=$theme query parameter will make the widget conform to Element's theme automatically. You can also use light, dark or black instead of $theme to always use a specific theme.
|
|
</p>
|
|
<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] 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 <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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="static/pack_preview.js"></script>
|
|
</body>
|
|
|
|
</html> |