From 71f3e1b27a5d04e6aefd4da24e54d772ad01b474 Mon Sep 17 00:00:00 2001 From: Miwory Date: Fri, 8 Aug 2025 08:44:34 +0300 Subject: [PATCH] chat hina gen1 --- StreamLabsChats/hina/generation 1/index.html | 21 + StreamLabsChats/hina/generation 1/script.js | 510 +++++++++++++++++++ StreamLabsChats/hina/generation 1/style.css | 357 +++++++++++++ 3 files changed, 888 insertions(+) create mode 100644 StreamLabsChats/hina/generation 1/index.html create mode 100644 StreamLabsChats/hina/generation 1/script.js create mode 100644 StreamLabsChats/hina/generation 1/style.css diff --git a/StreamLabsChats/hina/generation 1/index.html b/StreamLabsChats/hina/generation 1/index.html new file mode 100644 index 0000000..1c325c3 --- /dev/null +++ b/StreamLabsChats/hina/generation 1/index.html @@ -0,0 +1,21 @@ +
+ 1 +
+ + + + diff --git a/StreamLabsChats/hina/generation 1/script.js b/StreamLabsChats/hina/generation 1/script.js new file mode 100644 index 0000000..dec18a9 --- /dev/null +++ b/StreamLabsChats/hina/generation 1/script.js @@ -0,0 +1,510 @@ +let $chatBox = $(".sl__chat__layout"); + +let usersPfp = {}; +let parity = true; + +let emoteSetId; +let websocketEmotesConnected = false; +let globalEmotes = []; +let channelEmotes = []; +let subMysteries = []; + +let messageProcessingList = [ + detachMessage, + loadGlobalEmotes, + loadChannelEmotes, + processTags, + getProfilePicture, + cleanText, + userPings, + upscaleBadges, + upscaleEmotes, + process7TVEmotes, + fixEmotesPadding, + largeEmotes, + parityParse, + preloadImages, + animate, +]; + +$(document).on("onEventReceived", function (event) { + let details = event.detail; + let command = details.command; + + if ( + [ + "", + "JOIN", + "NICK", + "NOTICE", + "PART", + "PASS", + "PING", + "PONG", + "CAP", + "GLOBALUSERSTATE", + "HOSTTARGET", + "RECONNECT", + "ROOMSTATE", + "USERSTATE", + "WHISPER", + ].includes(command) + ) { + return; + } + + switch (command) { + case "PRIVMSG": + commandPRIVMSG(details); + break; + + case "USERNOTICE": + commandUSERNOTICE(details); + break; + + case "CLEARCHAT": + commandClearCHAT(details); + break; + + case "CLEARMSG": + commandClearMSG(details); + break; + + default: + console.log(`Event ${command} not handled.`, details); + break; + } +}); + +async function nextFunction( + $messageElement, + $parentElement, + details, + functions +) { + if (functions[0] != undefined) + await functions[0]( + $messageElement, + $parentElement, + details, + functions.slice(1) + ); +} + +async function commandPRIVMSG(details) { + let $messageElement = $(`#${details.messageId}`); + let $parentElement = $messageElement.parent() || $chatBox; + + if (details.body == '!event' && details.tags['user-id'] == details.tags['room-id']) { + let eventTypes = ['sub', 'subgift', 'submysterygift', 'raid']; + let event = eventTypes[Math.floor(Math.random()*eventTypes.length)]; + details.tags['msg-id'] = event; + return commandUSERNOTICE(details); + } + + if (!$messageElement.length) { + return; + } + + await nextFunction( + $messageElement, + $parentElement, + details, + messageProcessingList + ); +} + +async function commandUSERNOTICE(details) { + let $eventElement = $('#chatlist_event') + let eventType = details.tags['msg-id'] + let author = details.tags['display-name'] + let content; + let type; + + let displayName = details.tags['display-name'] + let recipient = details.tags['msg-param-recipient-display-name'] || 'moereira' + let mysteryGiftCount = details.tags['msg-param-mass-gift-count'] || 100 + let viewerCount = details.tags['msg-param-viewerCount'] || 100 + + if (!$eventElement.length) { + return + } + + switch (eventType) { + case 'sub': + case 'resub': + case 'standardpayforward': + case 'communitypayforward': + case 'giftpaidupgrade': + case 'primepaidupgrade': + content = 'subscribed' + type = 'sub'; + break; + case 'subgift': + case 'anonsubgift': + if (subMysteries.includes(details.tags['msg-param-origin-id'])) return + content = `подарил сабку ${recipient}!`; + type = 'gift'; + break; + case 'submysterygift': + if (subMysteries.includes(details.tags['msg-param-origin-id'])) return + content = `подарил сабку ${recipient}!`; + content = `подарил ${mysteryGiftCount} сабок!`; + type = 'gift'; + break; + case 'raid': + content = `зарейдил наш канал с ${viewerCount} людьми`; + type = 'raid'; + break; + default: + return; + } + + $eventElement = $eventElement.html() + $eventElement = $eventElement.replace('{messageId}', details.messageId) + $eventElement = $eventElement.replace('{author}', author) + $eventElement = $eventElement.replace('{content}', content) + $eventElement = $($eventElement) + + $eventElement.addClass(type) + $eventElement.appendTo($chatBox) + + functions = [ + detachMessage, getProfilePicture, cleanText, + userPings, upscaleEmotes, process7TVEmotes, largeEmotes, + preloadImages, animate] + + await nextFunction($eventElement, $chatBox, details, functions) +} + +async function commandClearCHAT(details) { + let messages = details.body + ? $(`[userId="${details.tags["target-user-id"]}"]`) + : $("message"); + for (let i = 0; i < messages.length; i++) { + const message = messages.eq(i); + setTimeout(() => { + message.attr("deleted", true); + }, i * 50); + } +} + +async function commandClearMSG(details) { + let message = $(`message#${details.messageId}`); + message.attr("deleted", true); +} + +async function detachMessage( + $messageElement, + $parentElement, + details, + functions +) { + $messageElement.detach(); + $messageElement.hide(); + + await nextFunction($messageElement, $parentElement, details, functions); +} + +async function loadGlobalEmotes($messageElement, $parentElement, details, functions) { + if (globalEmotes.length == 0) { + fetch('https://7tv.io/v3/emote-sets/global') + .then(response => { + if (!response.ok) { + throw new Error(`Global emotes: Error: (${response.status})`); + } + return response.json(); + }) + .then(data => { + console.log(`Global emotes: Success (${data.emotes.length})`); + globalEmotes = data.emotes; + }) + .catch(error => { + console.log(error.message); + }); + } + + await nextFunction($messageElement, $parentElement, details, functions) +}; + +async function loadChannelEmotes($messageElement, $parentElement, details, functions) { + nextFunction($messageElement, $parentElement, details, functions) + + let tags = details.tags; + let roomId = tags['room-id']; + + if (!emoteSetId) { + try { + let response = await fetch(`https://7tv.io/v3/users/twitch/${roomId}`); + if (!response.ok) { + throw new Error(`Channel emotes: Error: (${response.status})`); + } + let data = await response.json(); + console.log(`Channel emotes: Success (${data.emote_set.emotes.length})`); + channelEmotes = data.emote_set.emotes; + emoteSetId = data.emote_set.id; + } catch (error) { + console.log(error.message); + return + } + } + + if (!websocketEmotesConnected && emoteSetId) { + socket = new WebSocket('wss://events.7tv.io/v3'); + websocketEmotesConnected = true; + + socket.onopen = function (event) { + console.log('Connected to 7TV WebSocket'); + socket.send(JSON.stringify({ + 'op': 35, + 'd': { + 'type': 'emote_set.update', + 'condition': { + 'object_id': emoteSetId + } + } + })); + }; + + socket.onmessage = function (event) { + let data = JSON.parse(event.data); + + switch (data.op) { + case 0: + let eventData = data.d.body; + + if (eventData.hasOwnProperty('pulled')) { + let emoteId = eventData.pulled[0].old_value.id; + channelEmotes = channelEmotes.filter(obj => + obj.id !== emoteId); + }; + if (eventData.hasOwnProperty('pushed')) { + let emoteData = eventData.pushed[0].value; + channelEmotes.push(emoteData); + }; + if (eventData.hasOwnProperty('updated')) { + let emoteId = eventData.updated[0].old_value.id; + let emoteData = eventData.updated[0].value; + + let emoteIndex = channelEmotes.findIndex( + obj => obj.id === emoteId); + + if (emoteIndex !== -1) { + channelEmotes[emoteIndex] = emoteData; + }; + }; + + break; + case 4: + socket.close(); + websocketEmotesConnected = false; + break; + }; + }; + + socket.onerror = function (error) { + console.error('WebSocket error:', error); + }; + + socket.onclose = function (event) { + console.log('WebSocket closed:', event.code, event.reason); + websocketEmotesConnected = false; + }; + } +} + +async function processTags( + $messageElement, + $parentElement, + details, + functions +) { + let tags = details.tags; + let info = tags["badge-info"]; + let badges = tags.badges.split(","); + let msgId = tags["msg-id"]; + + if (info) { + let badge = info.replace("/", "-"); + $messageElement.addClass(badge); + } + + badges.forEach((badge) => { + let name = badge.split("/")[0]; + if (name) { + $messageElement.addClass(name); + } + }); + + $messageElement.attr({ + userId: tags["user-id"], + highlighted: tags["msg-id"] === "highlighted-message", + gigaemote: tags["msg-id"] === "gigantified-emote-message", + animation: "animated-message" ? tags["animation-id"] : "", + "first-msg": tags["first-msg"] === true && msgId !== "user-intro", + }); + + await nextFunction($messageElement, $parentElement, details, functions); +} + +async function getProfilePicture($messageElement, $parentElement, details, functions) { + let $profilePictureElement = $messageElement.find('pfp').eq(0); + let userId = details.tags['user-id']; + + if ($profilePictureElement.length != 0 && !(userId in usersPfp)) { + try { let response = await fetch('https' + '://st' + 'reaml' + 'abs.c' + 'om/ap' + 'i/v5/' + 'helix' + '/user' + 's?bro' + 'adcas' + 'ter_i' + 'd=' + userId); if (!response['ok']) throw new Error('Error' + ':\x20(' + response['status' + 's'] + ')'); let data = await response['json'](), profileImageUrl = data['profi' + 'le_im' + 'age_u' + 'rl']['repla' + 'ce']('300x3' + '00', '70x70'); usersPfp[userId] = profileImageUrl, $profilePictureElement['attr']('src', usersPfp[userId]); } catch (_0x5c95d6) { console['log'](_0x5c95d6['messa' + 'ge']); return; } + } else { + $profilePictureElement.attr('src', usersPfp[userId]); + } + + await nextFunction($messageElement, $parentElement, details, functions) +} + +async function cleanText($messageElement, $parentElement, details, functions) { + let $contentElement = $messageElement.find('content').eq(0); + let specialChar = new TextDecoder().decode(new Uint8Array([243, 160, 128, 128])); + let cleanedHTML = $contentElement.html().replaceAll(specialChar, '').replaceAll('\n', ''); + + $contentElement.html(cleanedHTML); + await nextFunction($messageElement, $parentElement, details, functions) +} + +async function userPings($messageElement, $parentElement, details, functions) { + let $content = $messageElement.find('content'); + let contentHTML = $content.html(); + let pings = $content.text().match(/@\w+/g) || []; + + pings.forEach(user => { + contentHTML = contentHTML.replace( + new RegExp(user, 'g'), + `${user}` + ); + }); + + $content.html(contentHTML); + await nextFunction($messageElement, $parentElement, details, functions) +} + +async function upscaleBadges($messageElement, $parentElement, details, functions) { + $messageElement.find('.badge').each(function () { + let $badge = $(this); + let $badgeImage = $badge.children('img').eq(0); + + if ($badgeImage.attr('src').includes('jtvnw')) { + $badgeImage.attr('src', function (index, oldSrc) { + return oldSrc.replace('1.0', '4.0'); + }); + } + }); + await nextFunction($messageElement, $parentElement, details, functions) +} + +async function upscaleEmotes($messageElement, $parentElement, details, functions) { + $messageElement.find('.emote').each(function () { + let $emote = $(this); + let $emoteImage = $emote.children('img').eq(0); + + if ($emoteImage.attr('src').includes('jtvnw')) { + $emoteImage.attr('src', function (index, oldSrc) { + return oldSrc.replace('1.0', '4.0'); + }); + } + }); + await nextFunction($messageElement, $parentElement, details, functions) +} + +async function process7TVEmotes($messageElement, $parentElement, details, functions) { + let $contentElement = $messageElement.find('content').eq(0); + let $headElement = $contentElement.find('head').eq(0); + let $content = ` ${$contentElement.html()} `; + let emotes = globalEmotes.concat(channelEmotes); + + if ($headElement[0] != undefined) { + $content = $content.replace($headElement[0].outerHTML, + ` ${$headElement[0].outerHTML} `); + } + + emotes.forEach(emote => { + let temp_text = ''; + let emoteSrc = `https://${emote.data.host.url}/4x.avif`; + let emoteClasses = 'emote'; + + if (emote.flags == 1) { + emoteClasses = 'emote zero-width'; + }; + + while (($content = (temp_text = $content).replace( + ` ${emote.name} `, + ` ` + )) !== temp_text) { } + }); + + $contentElement.html($content); + $contentElement.find('.zero-width').each(function () { + let previousSibling = this.previousSibling.nodeValue; + + if (previousSibling && previousSibling.trim() === '') { + this.children[0].classList.add('zero-width'); + this.previousElementSibling.innerHTML += this.innerHTML; + this.remove(); + }; + }); + await nextFunction($messageElement, $parentElement, details, functions) +} + +async function fixEmotesPadding($messageElement, $parentElement, details, functions) { + let $contentElement = $messageElement.find('content').eq(0); + + $contentElement.find('.emote').each(function () { + let previousSibling = this.previousSibling.nodeValue; + let nextSibling = this.nextSibling.nodeValue; + + if (previousSibling && previousSibling.trim() === '') { + this.classList.add('emote-left'); + }; + + if (nextSibling && nextSibling.trim() === '') { + this.classList.add('emote-right'); + }; + }); + + await nextFunction($messageElement, $parentElement, details, functions) +} + +async function largeEmotes($messageElement, $parentElement, details, functions) { + let $contentElement = $messageElement.find('content').eq(0); + let $content = $contentElement.clone().find('head').remove().end().text().replace(/\s+/g, ''); + let emoteCount = $messageElement.find('.emote').length; + + $messageElement.attr('large-emotes', !$content && emoteCount <= 3); + await nextFunction($messageElement, $parentElement, details, functions) +} + +async function parityParse($messageElement, $parentElement, details, functions) { + $messageElement.attr('parity', parity ? 'even' : 'odd'); + parity = !parity; + await nextFunction($messageElement, $parentElement, details, functions) +} + +async function preloadImages($messageElement, $parentElement, details, functions) { + let $images = $messageElement.find('img'); + let imagesCount = $images.length; + + if (imagesCount > 0) { + let imagesLoaded = 0; + $images.on('load', function () { + if (++imagesLoaded === imagesCount) { + nextFunction($messageElement, $parentElement, details, functions) + }; + }); + } else { + await nextFunction($messageElement, $parentElement, details, functions) + }; +}; + +async function animate($messageElement, $parentElement, details, functions) { + $messageElement.appendTo($parentElement).slideDown(700, function () { + $messageElement.get(0).style.setProperty('--max-height', + `${$messageElement.outerHeight()}px`); + }).animate({}, 700); +} diff --git a/StreamLabsChats/hina/generation 1/style.css b/StreamLabsChats/hina/generation 1/style.css new file mode 100644 index 0000000..93f2730 --- /dev/null +++ b/StreamLabsChats/hina/generation 1/style.css @@ -0,0 +1,357 @@ +/* Imports */ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); + +/* Variables */ +:root { + /* Fonts */ + --font-size: 35px; + --font-family-1: "Montserrat", serif; + + /* Emotes */ + --emote-size: calc(var(--font-size) * 2); + --emote-size-xl: calc(var(--font-size) * 4); + --emote-size-xxl: calc(var(--font-size) * 8); + + /* Badges */ + --badge-size: 25px; + + /* Colors */ + --color-1: #FFFFFF; + --leaf-shadow: #BAE0C4; + + --default-bg: linear-gradient(to right, white 50%, #E0BAF5 120%); + --vip-bg: linear-gradient(to right, white 50%, #FFC3E8 120%); + --moderator-bg: linear-gradient(to right, white 50%, #A4D6B1 120%); + --broadcaster-bg: linear-gradient(to right, white 50%, #A9A9A9 120%); + + --default-primary: #CFA5E6; + --vip-primary: #F4A5D2; + --moderator-primary: #7FBC8D; + --broadcaster-primary: #4E4E4E; +} + +/* Main styling */ +* { + box-sizing: border-box; +} + +body { + overflow: hidden; + -webkit-mask-image: linear-gradient(to top, + rgba(0, 0, 0, 1) 0%, + rgba(0, 0, 0, 1) 75%, + rgba(0, 0, 0, 0) 100%); +} + +content { + display: block; +} + +.font-1 { + opacity: 0; + font-family: var(--font-family-1); +} + +.emote { + position: relative; + display: inline-block; + vertical-align: text-bottom; + background-image: none !important; +} + +.emote.emote-left { + margin-left: -5.5px; +} + +.emote.emote-right { + margin-right: -5.5px; +} + +.emote img { + height: var(--emote-size); +} + +.emote img.zero-width { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +[large-emotes="true"] .emote img { + height: var(--emote-size-xl); +} + +[gigaemote="true"] .emote img { + height: var(--emote-size-xxl); +} + +@keyframes appear { + from { + transform: translateY(200%); + } + + to { + transform: translateY(0); + } +} + +@keyframes disappear { + from { + transform: scale(1); + } + + to { + transform: scale(0); + } +} + +@keyframes deleted { + to { + transform: translateX(-200%); + padding: 0; + margin: 0; + max-height: 0; + } +} + +#chatbox { + position: absolute; + display: flex; + flex-direction: column; + width: 100%; + bottom: 0; + left: 0; + padding: 5px 5px 0 5px; + font-size: var(--font-size); + font-family: var(--font-family-1); +} + +#chatbox message, +#chatbox event { + max-height: var(--max-height); + width: 100%; + display: flex; + flex-direction: column; + position: relative; + word-break: break-word; + transform-origin: bottom; + animation: appear 500ms ease-out forwards; +} + +#chatbox[disappear="true"] message, +#chatbox[disappear="true"] event { + animation: + appear 500ms ease-in-out forwards, + disappear 500ms linear 30s forwards; +} + +#chatbox message[deleted="true"], +#chatbox event[deleted="true"] { + animation: deleted 500ms ease-in-out forwards; +} + +message { + padding: 25px 15px 0; + --bg: var(--default-bg); + --primary: var(--default-primary); +} + +message.vip { + --bg: var(--vip-bg); + --primary: var(--vip-primary); +} + +message.moderator { + --bg: var(--moderator-bg); + --primary: var(--moderator-primary); +} + +message.broadcaster { + --bg: var(--broadcaster-bg); + --primary: var(--broadcaster-primary); +} + +message top author { + position: relative; + margin-left: 65px; + color: var(--color-1); + filter: drop-shadow(0 0 5px var(--primary)) drop-shadow(0 0 10px var(--primary)); +} + +message top author::before { + position: absolute; + content: ''; + left: -35px; + top: 50%; + transform: translateY(-50%); + width: 25px; + aspect-ratio: 31 / 27; + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='27' fill='none'%3E%3Cpath fill='%23E3BBF9' d='m1.644.006 9.7 7.297h8.314L29.356.006s4.498 15.975-1.386 21.892c-3.712 3.734-7.337 5.108-12.47 5.108-5.133 0-8.758-1.374-12.47-5.108C-2.854 15.98 1.644.006 1.644.006Z'/%3E%3C/svg%3E"); +} + +message.vip top author::before { + aspect-ratio: 31 / 31; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='31' fill='none'%3E%3Cpath fill='%23FFC0E4' d='M28.015 7.746c-1.179-.575-3.9-1.232-7.502 2.231 1.878-5.246-.348-7.822-1.223-8.596A5.882 5.882 0 0 0 15.517.014c-1.38 0-2.717.484-3.773 1.367-.892.774-3.128 3.35-1.24 8.596-3.618-3.463-6.34-2.806-7.518-2.231C.529 8.95-.65 12.236.362 15.089c.4 1.123 1.95 4.168 7.026 4.367-3.745 1.885-3.907 4.339-3.735 5.495.427 2.875 3.687 5.277 6.826 5.047 1.292-.092 3.91-.787 5.02-4.684 1.11 3.898 3.728 4.592 5.02 4.684h.42c3.009 0 5.996-2.32 6.406-5.064.172-1.157 0-3.61-3.735-5.495 5.075-.202 6.626-3.244 7.026-4.367 1.013-2.837-.166-6.122-2.622-7.326Z'/%3E%3C/svg%3E"); +} + +message.moderator top author::before { + aspect-ratio: 25 / 29; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='29' fill='none'%3E%3Cpath fill='%23CFFFA4' d='M.41.002s12.633 3.38 14.925 8.704c2.186 5.076-1.72 13.296-1.72 13.296S4.113 18.839 1.57 13.79C-1.06 8.56.41.002.41.002Z'/%3E%3Cpath fill='%23CFFFA4' d='M24.667 3.002S14.403 5.767 12.54 10.124c-1.776 4.153 1.398 10.878 1.398 10.878s7.72-2.588 9.785-6.719c2.139-4.278.944-11.281.944-11.281Z'/%3E%3Cpath stroke='%23D2FDAD' stroke-linecap='round' stroke-width='2' d='M13 19.002v9'/%3E%3C/svg%3E"); +} + +message.broadcaster top author::before { + aspect-ratio: 32 / 29; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='29' fill='none'%3E%3Cpath fill='%23707070' d='M23.288.004c5.291 0 8.538 4.477 8.538 8.15 0 7.94-9.328 15.311-15.913 20.004C9.328 23.465 0 16.095 0 8.154 0 4.48 3.247.004 8.54.004c2.955 0 5.48 2.28 7.374 4.445 1.895-2.165 4.42-4.445 7.375-4.445Z'/%3E%3C/svg%3E"); +} + +message bottom { + position: relative; + border-radius: 40px; + margin-left: 10px; + padding-bottom: 28px; +} + +message bottom::before { + position: absolute; + content: ''; + width: 30px; + top: 30px; + left: -8px; + transform: translateX(-50%); + filter: drop-shadow(0 0 5px var(--leaf-shadow)); + aspect-ratio: 31 / 45; + z-index: -1; + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='45' fill='none'%3E%3Cpath fill='%23A7D5B3' d='M20.303 7.677c5.133 3.026 7.717 11.993 8.443 14.934a.92.92 0 0 1-.734 1.138c-2.947.546-12.025 1.89-17.148-1.13C5.808 19.638 1.746 10.352.44 7.086a.936.936 0 0 1 .781-1.29c3.565-.362 14.008-1.11 19.082 1.88Z'/%3E%3Cpath fill='%23A7D5B3' d='M16.27 23.83c4.56-1.404 11.21 1.795 13.55 3.05a.92.92 0 0 1 .347 1.31c-1.398 2.223-5.51 8.208-10.06 9.61-4.486 1.38-12.082-1.125-14.958-2.19a.929.929 0 0 1-.424-1.441c1.873-2.503 7.043-8.953 11.546-10.34Z'/%3E%3C/svg%3E"); +} + +message bottom::after { + position: absolute; + content: ''; + top: -3px; + right: 0; + width: 75px; + transform: translateX(30%); + aspect-ratio: 100 / 160; + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='160' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='%23A7D5B3' d='M76.056 115.777c4.695-3.669 13.985-2.791 16.989-2.39a.92.92 0 0 1 .79 1.1c-.571 2.942-2.644 11.882-7.33 15.543-4.625 3.615-14.753 3.995-18.27 4.014a.935.935 0 0 1-.915-1.198c.968-3.45 4.095-13.443 8.736-17.069Z'/%3E%3C/g%3E%3Cg filter='url(%23b)'%3E%3Cpath fill='%23A7D5B3' d='M85.844 134.004c3.65 2.107 6.717 8.513 7.901 11.259a.931.931 0 0 1-.85 1.31c-3.165.045-10.978-.076-14.671-2.208-3.646-2.104-6.588-8.078-7.721-10.643a.926.926 0 0 1 .786-1.309c3.07-.229 10.836-.555 14.555 1.591Z'/%3E%3C/g%3E%3Cg filter='url(%23c)'%3E%3Cpath fill='%23fff' d='M77.332 127.018c-1.257 4.975-5.816 8.114-10.182 7.011-4.367-1.104-6.887-6.032-5.63-11.007 1.258-4.976 6.421-10.505 10.788-9.402 4.366 1.104 6.282 8.422 5.024 13.398Z'/%3E%3C/g%3E%3Cg filter='url(%23d)'%3E%3Cpath fill='%23fff' d='M58.174 136.258c1.258-4.975 5.816-8.114 10.183-7.011 4.366 1.104 6.886 6.032 5.629 11.007-1.258 4.976-6.42 10.505-10.787 9.401-4.366-1.103-6.282-8.421-5.025-13.397Z'/%3E%3C/g%3E%3Cg filter='url(%23e)'%3E%3Cpath fill='%23fff' d='M58.953 137.825c4.975 1.257 9.904-1.263 11.007-5.629 1.104-4.366-2.035-8.925-7.01-10.183-4.976-1.257-12.294.659-13.398 5.025-1.104 4.366 4.425 9.529 9.401 10.787Z'/%3E%3C/g%3E%3Cg filter='url(%23f)'%3E%3Cpath fill='%23fff' d='M72.373 141.217c-4.975-1.257-8.114-5.816-7.01-10.183 1.103-4.366 6.031-6.886 11.007-5.629 4.975 1.258 10.504 6.421 9.4 10.787-1.103 4.367-8.421 6.283-13.397 5.025Z'/%3E%3C/g%3E%3Ccircle cx='67.981' cy='131.498' r='3.793' fill='%23F8EFD6' transform='rotate(14.184 67.981 131.498)'/%3E%3Cg filter='url(%23g)'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='3.5' d='M7.569 7.02C28.918 30.845 44.135 39.22 75.296 47.154'/%3E%3C/g%3E%3Cg filter='url(%23h)'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='3.5' d='M68.91 46.466c-43.514 20.27-2.968 41.85.353.484'/%3E%3C/g%3E%3Cg filter='url(%23i)'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='3.5' d='M71.4 46.71c-23.63 55.642 34.837 46.679.775.236'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='38.569' height='33.046' x='61.283' y='106.998' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0.729412 0 0 0 0 0.878431 0 0 0 0 0.768627 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='b' width='35.406' height='26.333' x='64.42' y='126.247' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0.729412 0 0 0 0 0.878431 0 0 0 0 0.768627 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='c' width='36.515' height='40.771' x='51.197' y='103.478' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='d' width='36.515' height='40.771' x='47.794' y='119.026' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='e' width='40.772' height='36.515' x='39.41' y='111.634' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='f' width='40.771' height='36.515' x='55.142' y='115.082' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='g' width='81.227' height='53.635' x='.819' y='.27' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='h' width='33.855' height='37.56' x='42.158' y='39.716' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='i' width='31.027' height='51.972' x='58.849' y='39.96' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E"); +} + +message bottom content { + color: var(--primary); + background: linear-gradient(to bottom, transparent calc(100% - 20px), var(--primary) calc(100% - 19.99px), var(--primary)), var(--bg); + border-radius: inherit; + padding: 55px 35px; +} + +message bottom footer { + position: absolute; + content: ''; + bottom: 0; + left: 0; + height: 15px; + width: 100%; + aspect-ratio: 111 / 40; +} + +message bottom footer::before { + position: absolute; + content: ''; + left: 50px; + bottom: -10px; + transform: translateY(-50%); + height: 40px; + aspect-ratio: 111 / 40; + filter: drop-shadow(0 0 5px var(--primary)); + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='111' height='40' fill='none'%3E%3Cpath fill='%23fff' d='m95.5.516.73 5.77c.867 6.857 6.196 12.334 13.095 13.457l1.675.273-1.675.273c-6.899 1.123-12.228 6.6-13.095 13.457l-.73 5.77-.73-5.77c-.867-6.858-6.196-12.334-13.095-13.457L80 20.016l1.675-.273c6.9-1.123 12.228-6.6 13.095-13.457l.73-5.77ZM55.5.516l.73 5.77c.867 6.857 6.196 12.334 13.095 13.457l1.675.273-1.675.273c-6.9 1.123-12.228 6.6-13.095 13.457l-.73 5.77-.73-5.77c-.867-6.858-6.196-12.334-13.095-13.457L40 20.016l1.675-.273c6.9-1.123 12.228-6.6 13.095-13.457l.73-5.77ZM15.5 1.006l.73 5.77c.867 6.858 6.196 12.334 13.095 13.457l1.675.273-1.675.273c-6.9 1.123-12.228 6.6-13.095 13.457l-.73 5.77-.73-5.77C13.903 27.38 8.574 21.902 1.675 20.78L0 20.506l1.675-.273c6.9-1.123 12.228-6.6 13.095-13.457l.73-5.77Z'/%3E%3C/svg%3E"); +} + +message bottom footer::after { + position: absolute; + content: ''; + top: 15px; + right: 0; + width: 15px; + aspect-ratio: 16 / 47; + filter: drop-shadow(0 0 5px white); + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='47' fill='none'%3E%3Ccircle cx='8' cy='3.014' r='3' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M0 20.773c0 3.955 3.216 6.062 5.57 7.948.83.666 1.63 1.293 2.43 1.293.8 0 1.6-.627 2.43-1.293 2.354-1.886 5.57-3.993 5.57-7.948 0-3.955-4.4-6.76-8-2.957-3.6-3.802-8-.998-8 2.957Z'/%3E%3Ccircle cx='8' cy='43.014' r='3' fill='%23fff'/%3E%3C/svg%3E"); +} + +event { + margin: auto; + padding: 70px 10px 50px; +} + +event content { + position: relative; + text-align: center; + font-weight: 600; + color: var(--color-1); + text-shadow: 0 0 10px white; + background: linear-gradient(to bottom, transparent calc(100% - 20px), #B5B5B5 calc(100% - 19.99px), #B5B5B5), linear-gradient(to right, #464646 50%, #282828 120%); + border-radius: 65px; + padding: 35px 75px 55px; +} + +event content::before { + position: absolute; + content: ''; + top: 25px; + left: 50%; + z-index: -1; + transform: translate(-50%, -100%); + height: 70px; + aspect-ratio: 462 / 89; + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='462' height='89' fill='none'%3E%3Cpath fill='url(%23a)' d='M8.21 29.231C13.295 16.881 26 .014 26 .014s-4.226 22.373-4.238 36.863C21.75 51.474 26 74.014 26 74.014H0S1.442 45.677 8.21 29.23Z'/%3E%3Cpath fill='url(%23b)' d='M453.789 29.231C448.706 16.881 436 .014 436 .014s4.226 22.373 4.238 36.863C440.25 51.474 436 74.014 436 74.014h26s-1.442-28.337-8.211-44.783Z'/%3E%3Cpath fill='%23fff' d='M121.002 47.014h222v10h-222z'/%3E%3Ccircle cx='395.813' cy='66.2' r='22.186' fill='%23fff' transform='rotate(90 395.813 66.2)'/%3E%3Ccircle cx='313.409' cy='47.2' r='22.186' fill='%23fff' transform='rotate(90 313.409 47.2)'/%3E%3Ccircle cx='356.186' cy='54.2' r='22.186' fill='%23fff' transform='rotate(90 356.186 54.2)'/%3E%3Ccircle cx='272.202' cy='43.2' r='22.186' fill='%23fff' transform='rotate(90 272.202 43.2)'/%3E%3Ccircle cx='189.792' cy='43.2' r='22.186' fill='%23fff' transform='rotate(90 189.792 43.2)'/%3E%3Ccircle cx='230.999' cy='40.2' r='22.186' fill='%23fff' transform='rotate(90 230.999 40.2)'/%3E%3Ccircle cx='148.589' cy='47.2' r='22.186' fill='%23fff' transform='rotate(90 148.589 47.2)'/%3E%3Ccircle cx='67.186' cy='66.2' r='22.186' fill='%23fff' transform='rotate(90 67.186 66.2)'/%3E%3Ccircle cx='108.186' cy='54.2' r='22.186' fill='%23fff' transform='rotate(90 108.186 54.2)'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='13' x2='13' y1='.014' y2='74.014' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D8A291'/%3E%3Cstop offset='1' stop-color='%23F6E4DC'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='449' x2='449' y1='.014' y2='74.014' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D8A291'/%3E%3Cstop offset='1' stop-color='%23F6E4DC'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); +} + +event content::after { + position: absolute; + content: ''; + top: 25px; + right: -10; + width: 35px; + aspect-ratio: 1; + filter: drop-shadow(0 0 5px white); + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath fill='%23fff' d='M32.335 18.01c-1.258 4.976-5.817 8.115-10.183 7.012-4.367-1.104-6.887-6.032-5.63-11.008C17.78 9.04 22.944 3.51 27.31 4.614c4.366 1.103 6.282 8.421 5.025 13.397Z'/%3E%3Cpath fill='%23fff' d='M13.178 27.252c1.258-4.976 5.817-8.114 10.183-7.01 4.366 1.103 6.887 6.03 5.63 11.006-1.258 4.976-6.421 10.505-10.788 9.401-4.366-1.103-6.282-8.421-5.025-13.397Z'/%3E%3Cpath fill='%23fff' d='M13.956 28.818c4.976 1.258 9.904-1.262 11.007-5.629 1.104-4.366-2.035-8.925-7.01-10.182-4.976-1.258-12.294.658-13.398 5.024-1.103 4.367 4.426 9.53 9.401 10.787Z'/%3E%3Cpath fill='%23fff' d='M27.378 32.21c-4.976-1.258-8.115-5.817-7.011-10.183 1.103-4.366 6.031-6.886 11.007-5.629 4.976 1.258 10.505 6.42 9.401 10.787-1.103 4.367-8.422 6.283-13.397 5.025Z'/%3E%3Ccircle cx='22.986' cy='22.493' r='3.793' fill='%23F8EFD6' transform='rotate(14.184 22.986 22.493)'/%3E%3C/svg%3E"); +} + +event bottom { + position: absolute; + left: 0; + bottom: -30px; + height: 30px; + width: 100%; + background-repeat: no-repeat; + background-position: center 110%; + background-size: 40%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='219' height='92' fill='none'%3E%3Cellipse cx='109.5' cy='45.514' stroke='%23fff' stroke-dasharray='0.1 10' stroke-linecap='round' stroke-width='4' rx='107.5' ry='43.5'/%3E%3C/svg%3E"); +} + +event bottom::before { + position: absolute; + content: ''; + bottom: 5px; + left: 30px; + width: 50px; + aspect-ratio: 1; + filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px white); + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' fill='none'%3E%3Cpath fill='%23fff' d='M47.346 24.064c3.27 7.595.52 16.079-6.145 18.95-6.665 2.87-14.72-.96-17.992-8.555-3.27-7.595-2.09-19.727 4.574-22.598 6.665-2.87 16.291 4.608 19.563 12.203Z'/%3E%3Cpath fill='%23fff' d='M31.915 54.665c-3.271-7.595-.52-16.079 6.145-18.95 6.665-2.87 14.72.96 17.991 8.555 3.271 7.595 2.092 19.727-4.573 22.598-6.665 2.87-16.292-4.608-19.563-12.203Z'/%3E%3Cpath fill='%23fff' d='M34.444 55.905c7.595-3.271 11.425-11.326 8.554-17.991-2.87-6.665-11.354-9.416-18.95-6.145-7.594 3.27-15.073 12.897-12.202 19.562 2.87 6.665 15.003 7.845 22.598 4.574Z'/%3E%3Cpath fill='%23fff' d='M54.932 47.08c-7.595 3.271-16.079.52-18.95-6.145-2.87-6.665.96-14.72 8.555-17.99 7.595-3.272 19.727-2.092 22.598 4.573 2.87 6.665-4.608 16.291-12.203 19.562Z'/%3E%3Ccircle cx='39.789' cy='38.964' r='6.112' fill='%23F8EFD6' transform='rotate(-23.302 39.789 38.964)'/%3E%3C/svg%3E"); +} + +event bottom::after { + position: absolute; + content: ''; + right: 55px; + bottom: -22px; + width: 70px; + aspect-ratio: 84 / 64; + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='64' fill='none'%3E%3Cg fill='%23fff' clip-path='url(%23a)'%3E%3Cpath d='M17.102-12.986 35-10.186c-5.016 29.602-8.56 45.78-15.644 74.2L0 26.447C11.14 12.644 15.046 3.978 17.102-12.986ZM66.898-12.986 49-10.186c5.016 29.602 8.56 45.78 15.644 74.2L84 26.447C72.86 12.644 68.954 3.978 66.898-12.986Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h84v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +}