<!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>