Compare commits
11 Commits
bc790b6d10
...
latest
| Author | SHA1 | Date | |
|---|---|---|---|
| 55c88302e0 | |||
| 0b7c8df659 | |||
| 7e7c9644c4 | |||
| ecf9933a15 | |||
| 4f332b2e86 | |||
| b8df9275db | |||
| 7eda03db58 | |||
| 5c7bb458f3 | |||
| 2de130e9ff | |||
| 17ac4e94d7 | |||
| 18cbf4ea07 |
@ -32,7 +32,7 @@
|
|||||||
color: white;
|
color: white;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
font-size: 24px;
|
font-size: 36px;
|
||||||
filter: drop-shadow(0 0 7.5px #FFC3E8) drop-shadow(0 0 10px #FFC3E8);
|
filter: drop-shadow(0 0 7.5px #FFC3E8) drop-shadow(0 0 10px #FFC3E8);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -95,11 +95,12 @@
|
|||||||
content: '';
|
content: '';
|
||||||
width: 65px;
|
width: 65px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 0;
|
left: min(var(--progress), 96.5%);
|
||||||
transform: translate(-20px, -50%);
|
transform: translate(-20px, -50%);
|
||||||
transition: left 1.2s ease-in-out;
|
transition: left 1.2s ease-in-out;
|
||||||
aspect-ratio: 46 / 50;
|
aspect-ratio: 46 / 50;
|
||||||
filter: drop-shadow(0 0 7.5px white);
|
filter: drop-shadow(0 0 7.5px white);
|
||||||
|
z-index: 10;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='50' fill='none'%3E%3Cpath fill='%23A7D5B3' d='M39.243 31.057c3.668 4.695 2.79 13.985 2.39 16.989a.92.92 0 0 1-1.1.79c-2.942-.571-11.883-2.644-15.544-7.33-3.614-4.625-3.995-14.753-4.014-18.27a.936.936 0 0 1 1.199-.915c3.45.968 13.442 4.095 17.069 8.736Z'/%3E%3Cpath fill='%23A7D5B3' d='M21.015 40.845c-2.107 3.65-8.512 6.717-11.259 7.901a.93.93 0 0 1-1.31-.85c-.045-3.166.077-10.978 2.209-14.671 2.104-3.646 8.077-6.588 10.643-7.721a.926.926 0 0 1 1.309.786c.228 3.07.555 10.836-1.592 14.555Z'/%3E%3Cpath fill='%23fff' d='M28.001 32.332c-4.976-1.257-8.114-5.816-7.01-10.183 1.103-4.366 6.03-6.886 11.006-5.629 4.976 1.258 10.505 6.421 9.401 10.787-1.103 4.367-8.421 6.283-13.397 5.025Z'/%3E%3Cpath fill='%23fff' d='M18.76 13.174c4.976 1.257 8.115 5.816 7.012 10.183-1.104 4.366-6.032 6.886-11.008 5.628-4.975-1.257-10.504-6.42-9.4-10.786 1.103-4.367 8.421-6.283 13.397-5.025Z'/%3E%3Cpath fill='%23fff' d='M17.194 13.953c-1.258 4.975 1.263 9.903 5.629 11.007 4.366 1.103 8.925-2.035 10.183-7.011 1.257-4.976-.659-12.294-5.025-13.397-4.367-1.104-9.53 4.425-10.787 9.4Z'/%3E%3Cpath fill='%23fff' d='M13.802 27.373c1.257-4.976 5.816-8.114 10.183-7.01 4.366 1.103 6.886 6.03 5.628 11.006-1.257 4.976-6.42 10.505-10.787 9.401-4.366-1.103-6.282-8.421-5.024-13.397Z'/%3E%3Ccircle cx='23.52' cy='22.981' r='3.793' fill='%23F8EFD6' transform='rotate(104.184 23.52 22.981)'/%3E%3C/svg%3E");
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='50' fill='none'%3E%3Cpath fill='%23A7D5B3' d='M39.243 31.057c3.668 4.695 2.79 13.985 2.39 16.989a.92.92 0 0 1-1.1.79c-2.942-.571-11.883-2.644-15.544-7.33-3.614-4.625-3.995-14.753-4.014-18.27a.936.936 0 0 1 1.199-.915c3.45.968 13.442 4.095 17.069 8.736Z'/%3E%3Cpath fill='%23A7D5B3' d='M21.015 40.845c-2.107 3.65-8.512 6.717-11.259 7.901a.93.93 0 0 1-1.31-.85c-.045-3.166.077-10.978 2.209-14.671 2.104-3.646 8.077-6.588 10.643-7.721a.926.926 0 0 1 1.309.786c.228 3.07.555 10.836-1.592 14.555Z'/%3E%3Cpath fill='%23fff' d='M28.001 32.332c-4.976-1.257-8.114-5.816-7.01-10.183 1.103-4.366 6.03-6.886 11.006-5.629 4.976 1.258 10.505 6.421 9.401 10.787-1.103 4.367-8.421 6.283-13.397 5.025Z'/%3E%3Cpath fill='%23fff' d='M18.76 13.174c4.976 1.257 8.115 5.816 7.012 10.183-1.104 4.366-6.032 6.886-11.008 5.628-4.975-1.257-10.504-6.42-9.4-10.786 1.103-4.367 8.421-6.283 13.397-5.025Z'/%3E%3Cpath fill='%23fff' d='M17.194 13.953c-1.258 4.975 1.263 9.903 5.629 11.007 4.366 1.103 8.925-2.035 10.183-7.011 1.257-4.976-.659-12.294-5.025-13.397-4.367-1.104-9.53 4.425-10.787 9.4Z'/%3E%3Cpath fill='%23fff' d='M13.802 27.373c1.257-4.976 5.816-8.114 10.183-7.01 4.366 1.103 6.886 6.03 5.628 11.006-1.257 4.976-6.42 10.505-10.787 9.401-4.366-1.103-6.282-8.421-5.024-13.397Z'/%3E%3Ccircle cx='23.52' cy='22.981' r='3.793' fill='%23F8EFD6' transform='rotate(104.184 23.52 22.981)'/%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|||||||
10
DonationGoals/k1r4ka/generation 2/index.html
Normal file
10
DonationGoals/k1r4ka/generation 2/index.html
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<div id="donationgoal">
|
||||||
|
<div class="bar">
|
||||||
|
<a id="name">donate goal</a>
|
||||||
|
<div class="progress"></div>
|
||||||
|
<div class="info">
|
||||||
|
<a id="from">0</a>
|
||||||
|
<a id="to">100</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
18
DonationGoals/k1r4ka/generation 2/script.js
Normal file
18
DonationGoals/k1r4ka/generation 2/script.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
let goalNode = document.getElementById('donationgoal');
|
||||||
|
let nameText = document.getElementById('name');
|
||||||
|
let rangeText = document.getElementById('range');
|
||||||
|
let progressFrom = document.getElementById('from');
|
||||||
|
let progressTo = document.getElementById('to');
|
||||||
|
|
||||||
|
window.addEventListener('message', function (event) {
|
||||||
|
let message = event.detail;
|
||||||
|
let data = message.data;
|
||||||
|
|
||||||
|
let percent = ((data.value / data.goal) * 100);
|
||||||
|
if (percent > 100) {percent = 100;}
|
||||||
|
|
||||||
|
nameText.textContent = data.title;
|
||||||
|
progressFrom.textContent = data.value;
|
||||||
|
progressTo.textContent = data.goal;
|
||||||
|
goalNode.style.setProperty('--progress', `${percent}%`);
|
||||||
|
});
|
||||||
114
DonationGoals/k1r4ka/generation 2/style.css
Normal file
114
DonationGoals/k1r4ka/generation 2/style.css
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');
|
||||||
|
|
||||||
|
#widget {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#donationgoal {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 40px;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: 'Montserrat';
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 75px;
|
||||||
|
background-position: bottom 0% right 5%;
|
||||||
|
background-size: 20%, 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='171' height='80' fill='none'%3E%3Cpath fill='url(%23a)' d='M131.467 24.596C154.218 33.954 171 87.506 171 88.971L1.72 91c-6.645-8.794 8.109-30.102 8.109-33.71 0-3.608 1.239-34.95 6.87-38.782 5.632-3.834 25.004 7.44 28.608 6.087 17.795-13.19 49.782-7.779 52.597-10.372 2.816-2.593 19.147-15.67 24.778-14.092 4.506 1.263 7.734 16.836 8.785 24.464Z' opacity='.46'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='85.5' x2='85.5' y1='0' y2='107.372' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23FFDFD7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"), linear-gradient(45deg, #EF9543 -100%, #F2E4D9 100%);
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 25px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
top: 0;
|
||||||
|
left: 25px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 150px;
|
||||||
|
aspect-ratio: 74 / 92;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='92' fill='none'%3E%3Cpath stroke='%236C840A' stroke-width='4' d='M50.25 87.923c-9.147-10.149-27.82-38.02-29.34-68.32'/%3E%3Cpath fill='url(%23a)' d='M30.386 16.854c-4.786 3.099-8.509 3.13-9.772 2.758.994-2.186 3.693-6.904 6.543-8.292 2.85-1.387 8.734.907 11.32 2.228-.703-.189-3.305.208-8.091 3.306Z'/%3E%3Cpath fill='url(%23b)' d='M11.938 22.177c5.691.172 8.889-1.705 9.776-2.665-1.978-1.339-6.722-3.946-9.875-3.661-3.153.284-6.996 5.231-8.523 7.669.502-.52 2.931-1.514 8.622-1.343Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='26.642' x2='30.494' y1='11.604' y2='18.206' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='12.425' x2='12.544' y1='15.827' y2='23.375' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
top: 0;
|
||||||
|
right: 35px;
|
||||||
|
height: 50px;
|
||||||
|
aspect-ratio: 178 / 25;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='178' height='25' fill='none'%3E%3Cpath stroke='%23B84939' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M148.497.01c.888 4.204 3.931 11.819 9 8.643 5.069-3.175-3.888-7.085-9-8.643Zm0 0c-.979 4.145-4.15 11.678-8.999 8.643-6.061-3.792 8.173-8.905 8.999-8.643Zm0 0L144.64 24M148.497.01 152.446 24'/%3E%3Cpath stroke='%23F09C50' stroke-linecap='round' stroke-linejoin='round' d='M170.998.006c.508 2.452 2.246 6.894 5.143 5.042 2.896-1.852-2.222-4.133-5.143-5.042Zm0 0c-.559 2.418-2.371 6.812-5.142 5.042-3.463-2.212 4.67-5.195 5.142-5.042Zm0 0L168.795 14M170.998.006 173.255 14'/%3E%3Cpath fill='url(%23a)' d='M10.664-4.569s-3.8.796-5.488 2.11C3.17-.896 0 4.449 0 4.449s3.29.66 6.117-.755c2.826-1.414 4.547-8.262 4.547-8.262Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='.83' x2='9.833' y1='-.775' y2='.656' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
#name {
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#name::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: 20px;
|
||||||
|
aspect-ratio: 9 / 11;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='11' fill='none'%3E%3Cpath fill='%23302321' d='M5.843 7.388c.46.21.343.768.48 1.255.137.487.514.825.223 1.24-.375.534-1.025-.092-1.62-.354-.624-.274-1.62-.299-1.448-.96.13-.5.624-.449 1.086-.68.462-.23.81-.715 1.28-.501ZM7.566 8.493c-.167.257-.435.38-.6.273-.164-.107-.162-.402.005-.66.166-.257.435-.379.599-.272.164.107.163.402-.004.66ZM3.833 6.894c-.071.298.026.577.216.622.19.045.403-.16.474-.458.072-.298-.025-.576-.216-.621-.19-.046-.403.159-.474.457ZM7.013 7.197c-.167.257-.435.38-.6.272-.164-.106-.162-.401.004-.659.167-.257.435-.379.6-.272.164.106.162.401-.004.659ZM5.153 6.4c-.071.298.026.577.216.622.191.046.403-.16.475-.457.071-.298-.026-.577-.216-.622-.191-.046-.403.16-.475.457ZM2.843 2.388c.46.21.343.768.48 1.255.137.487.514.825.223 1.24-.375.534-1.025-.092-1.62-.354-.624-.274-1.62-.299-1.448-.96.13-.5.624-.449 1.086-.68.462-.23.81-.715 1.28-.501ZM4.566 3.493c-.167.257-.435.38-.6.273-.164-.107-.162-.402.005-.66.166-.257.435-.379.599-.272.164.107.163.402-.004.66ZM.833 1.894c-.071.298.026.577.216.622.19.045.403-.16.474-.458.072-.298-.025-.576-.216-.621-.19-.046-.403.159-.474.457ZM4.013 2.197c-.167.257-.435.38-.6.272-.164-.106-.162-.401.004-.659.167-.257.435-.379.6-.272.164.106.162.401-.004.659ZM2.153 1.4c-.071.298.026.577.216.622.191.046.403-.16.475-.457.071-.298-.026-.577-.216-.622-.191-.046-.403.16-.475.457Z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 20px;
|
||||||
|
background-image: linear-gradient(to right, #FFE3C9, #FFD6B1);
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
background-image: linear-gradient(to right, #B84939, #F09C50);
|
||||||
|
max-width: var(--progress);
|
||||||
|
transition: max-width 1.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#to {
|
||||||
|
color: #B84939;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
left: 250px;
|
||||||
|
bottom: 0;
|
||||||
|
width: 35px;
|
||||||
|
aspect-ratio: 14 / 7;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' fill='none'%3E%3Cpath fill='url(%23a)' d='M13.632 10.897S11.632 6.63 9.608 5C7.204 3.065.003.808.003.808S.14 4.88 2.6 7.827c2.46 2.946 11.032 3.07 11.032 3.07Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='6.407' x2='7.225' y1='.333' y2='11.372' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
6
DonationGoals/miyuchiq/generation 1/index.html
Normal file
6
DonationGoals/miyuchiq/generation 1/index.html
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<div id="donationgoal">
|
||||||
|
<a id="name">donate goal</a>
|
||||||
|
<div class="bar">
|
||||||
|
<div class="progress"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
14
DonationGoals/miyuchiq/generation 1/script.js
Normal file
14
DonationGoals/miyuchiq/generation 1/script.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
let goalNode = document.getElementById('donationgoal');
|
||||||
|
let nameText = document.getElementById('name');
|
||||||
|
let rangeText = document.getElementById('range');
|
||||||
|
|
||||||
|
window.addEventListener('message', function (event) {
|
||||||
|
let message = event.detail;
|
||||||
|
let data = message.data;
|
||||||
|
|
||||||
|
let percent = ((data.value / data.goal) * 100);
|
||||||
|
if (percent > 100) {percent = 100;}
|
||||||
|
|
||||||
|
nameText.textContent = data.title;
|
||||||
|
goalNode.style.setProperty('--progress', `${percent}%`);
|
||||||
|
});
|
||||||
68
DonationGoals/miyuchiq/generation 1/style.css
Normal file
68
DonationGoals/miyuchiq/generation 1/style.css
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');
|
||||||
|
|
||||||
|
#widget {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#donationgoal {
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 40px;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: 'Montserrat';
|
||||||
|
font-weight: 800;
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
position: relative;
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 45px;
|
||||||
|
outline: 4px solid black;
|
||||||
|
background-image: linear-gradient(to right, #fcf3f6, #ffd0e0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
left: -50px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 40px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='800' height='800' viewBox='0 0 475.528 475.528'%3E%3Cpath d='m237.376 436.245.774.976c210.94-85.154 292.221-282.553 199.331-367.706-92.899-85.154-199.331 30.953-199.331 30.953h-.774S130.936-15.639 38.045 69.515c-92.889 85.143-11.608 281.577 199.331 366.73z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
#name {
|
||||||
|
color: black;
|
||||||
|
width: fit-content;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-left: 50px;
|
||||||
|
font-size: 42px;
|
||||||
|
border-bottom: 2px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 50px;
|
||||||
|
background-color: #fdf4f7;
|
||||||
|
outline: 4px solid black;
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
background-color: #fe9dbe;
|
||||||
|
max-width: var(--progress);
|
||||||
|
transition: max-width 1.2s ease-in-out;
|
||||||
|
}
|
||||||
24
MusicPlayer/Miwory/generation 1/index.html
Normal file
24
MusicPlayer/Miwory/generation 1/index.html
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<div id="widget">
|
||||||
|
<div id="player">
|
||||||
|
<div class="player_background">
|
||||||
|
<img id="background_img">
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<div class="source">
|
||||||
|
<svg id="logo" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
|
||||||
|
<path fill="#fff"d="M15 0a15 15 0 1 0 0 30 15 15 0 0 0 0-30ZM7.4 20.5A18.2 18.2 0 0 1 21.3 22c.2.1.3.4.4.7l-.1 1a.8.8 0 0 1-1 .2 16.4 16.4 0 0 0-13-1.2.8.8 0 0 1-.7-.6c-.2-.4.1-1.4.5-1.5ZM6.7 15a22.7 22.7 0 0 1 16.4 1.7c.2.1.4.3.4.6v.7c-.3.5-.6 1-.9 1a1 1 0 0 1-.4-.2A20.4 20.4 0 0 0 7 17.2a1 1 0 0 1-1-.6c0-.6.3-1.5.7-1.6Zm-.1-3.6h-.3c-.5 0-1-.3-1-.8-.2-.7.2-1.4.7-1.5a28 28 0 0 1 19 2l.5.7c.1.3.1.6 0 .8-.2.4-.6.8-1 .8l-.5-.1a25 25 0 0 0-17.4-2Z" />
|
||||||
|
</svg>
|
||||||
|
<a id="source"></a>
|
||||||
|
</div>
|
||||||
|
<div class="meta">
|
||||||
|
<a id="title"></a>
|
||||||
|
<a id="artist"></a>
|
||||||
|
</div>
|
||||||
|
<div id="progressbar">
|
||||||
|
<div class="background"></div>
|
||||||
|
<div class="progress"></div>
|
||||||
|
<div class="pointer"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
72
MusicPlayer/Miwory/generation 1/script.js
Normal file
72
MusicPlayer/Miwory/generation 1/script.js
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
let widgetNode = document.getElementById('widget');
|
||||||
|
let musicPlayerNode = document.getElementById('player');
|
||||||
|
let musicPlayerTitleNode = document.getElementById('title');
|
||||||
|
let musicPlayerArtistNode = document.getElementById('artist');
|
||||||
|
let musicPlayerBackgroundNode = document.getElementById('background_img');
|
||||||
|
let musicPlayerProgress = document.getElementById('progressbar');
|
||||||
|
let pausedAt = null;
|
||||||
|
let trackDuration = 0;
|
||||||
|
let trackProgress = 0;
|
||||||
|
let trackEnd = new Date();
|
||||||
|
|
||||||
|
window.addEventListener('message', function (event) {
|
||||||
|
let message = event.detail;
|
||||||
|
let data = message.data;
|
||||||
|
widgetNode.classList.add('active');
|
||||||
|
|
||||||
|
if (data == null) {
|
||||||
|
musicPlayerNode.classList.remove('active');
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!data.is_playing && !pausedAt) {
|
||||||
|
pausedAt = new Date();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (data.is_playing) {
|
||||||
|
musicPlayerNode.classList.add('active');
|
||||||
|
pausedAt = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
trackDuration = data.track.duration;
|
||||||
|
trackProgress = data.progress;
|
||||||
|
trackEnd = new Date().getTime() + data.track.duration - data.progress;
|
||||||
|
|
||||||
|
musicPlayerTitleNode.innerText = data.track.name;
|
||||||
|
musicPlayerArtistNode.innerText = data.track.artists.join(', ');
|
||||||
|
|
||||||
|
if (musicPlayerBackgroundNode.src != data.track.cover) {
|
||||||
|
musicPlayerBackgroundNode.src = data.track.cover;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
function delay(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
};
|
||||||
|
|
||||||
|
async function update() {
|
||||||
|
if (pausedAt && pausedAt.getTime() + 10000 < new Date().getTime()) {
|
||||||
|
player.classList.remove('active');
|
||||||
|
|
||||||
|
await delay(100);
|
||||||
|
return update();
|
||||||
|
};
|
||||||
|
|
||||||
|
var progress;
|
||||||
|
if (pausedAt) {
|
||||||
|
progress = trackProgress / trackDuration * 100;
|
||||||
|
} else {
|
||||||
|
progress = (trackDuration - (trackEnd - new Date().getTime())) / trackDuration * 100;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
progress = 100;
|
||||||
|
};
|
||||||
|
|
||||||
|
musicPlayerProgress.style.setProperty('--progress', `${progress}%`);
|
||||||
|
|
||||||
|
await delay(100);
|
||||||
|
update();
|
||||||
|
};
|
||||||
|
|
||||||
|
update();
|
||||||
139
MusicPlayer/Miwory/generation 1/style.css
Normal file
139
MusicPlayer/Miwory/generation 1/style.css
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
@import url(https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,900;1,900&display=swap);
|
||||||
|
|
||||||
|
#widget {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
visibility: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
#widget.active {
|
||||||
|
visibility: visible
|
||||||
|
}
|
||||||
|
|
||||||
|
#player {
|
||||||
|
position: relative;
|
||||||
|
width: 800px;
|
||||||
|
height: 320px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 30px;
|
||||||
|
margin-inline: 30px;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "Nunito", sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
opacity: 0;
|
||||||
|
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .5);
|
||||||
|
transition: opacity 350ms ease-in-out
|
||||||
|
}
|
||||||
|
|
||||||
|
#player.active {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .player_background {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #background_img {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
opacity: .35
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .player_background::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
inset: 0;
|
||||||
|
background-color: #1e1e1e
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .data {
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% - 150px);
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
padding: 30px 75px;
|
||||||
|
z-index: 99
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .source {
|
||||||
|
display: flex;
|
||||||
|
opacity: .6;
|
||||||
|
gap: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .source #logo {
|
||||||
|
width: 30px
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .data .meta {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .data .meta #artist,
|
||||||
|
#player .data .meta #title {
|
||||||
|
word-break: keep-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .data #source {
|
||||||
|
font-size: 28px
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .data #title {
|
||||||
|
font-size: 42px
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .data #artist {
|
||||||
|
font-size: 32px;
|
||||||
|
opacity: .6
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #progressbar {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 25px;
|
||||||
|
margin-top: 20px;
|
||||||
|
--progress: 0%
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #progressbar .background {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
opacity: .25
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #progressbar .progress {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
background-color: #c6d3e6;
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--progress);
|
||||||
|
transition: max-width 200ms ease-in-out
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #progressbar .pointer {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 50px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
background-color: #dceaff;
|
||||||
|
border: 1px solid #737373;
|
||||||
|
border-radius: 100%;
|
||||||
|
margin-left: var(--progress);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: margin-left 200ms ease-in-out;
|
||||||
|
z-index: 99
|
||||||
|
}
|
||||||
44
MusicPlayer/Miwory/generation 2/index.html
Normal file
44
MusicPlayer/Miwory/generation 2/index.html
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<div id="widget">
|
||||||
|
<div id="player">
|
||||||
|
<div class="main">
|
||||||
|
<div class="player_background">
|
||||||
|
<img id="background_img">
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<div class="info">
|
||||||
|
<a id="title"></a>
|
||||||
|
<a id="artist"></a>
|
||||||
|
</div>
|
||||||
|
<div class="time">
|
||||||
|
<div id="now"></div>
|
||||||
|
<div class="bars">
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
</div>
|
||||||
|
<div id="duration"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="progressbar">
|
||||||
|
<div class="background"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
83
MusicPlayer/Miwory/generation 2/script.js
Normal file
83
MusicPlayer/Miwory/generation 2/script.js
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
let widgetNode = document.getElementById('widget');
|
||||||
|
let musicPlayerNode = document.getElementById('player');
|
||||||
|
let musicPlayerTitleNode = document.getElementById('title');
|
||||||
|
let musicPlayerArtistNode = document.getElementById('artist');
|
||||||
|
let musicPlayerNowNode = document.getElementById('now');
|
||||||
|
let musicPlayerDurationNode = document.getElementById('duration');
|
||||||
|
let musicPlayerBackgroundNode = document.getElementById('background_img');
|
||||||
|
let musicPlayerProgress = document.getElementById('progressbar');
|
||||||
|
let pausedAt = null;
|
||||||
|
let trackDuration = 0;
|
||||||
|
let trackProgress = 0;
|
||||||
|
let trackEnd = new Date();
|
||||||
|
|
||||||
|
window.addEventListener('message', function (event) {
|
||||||
|
let message = event.detail;
|
||||||
|
let data = message.data;
|
||||||
|
widgetNode.classList.add('active');
|
||||||
|
|
||||||
|
if (data == null) {
|
||||||
|
musicPlayerNode.classList.remove('active');
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!data.is_playing && !pausedAt) {
|
||||||
|
pausedAt = new Date();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (data.is_playing) {
|
||||||
|
musicPlayerNode.classList.add('active');
|
||||||
|
pausedAt = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
trackDuration = data.track.duration;
|
||||||
|
trackProgress = data.progress;
|
||||||
|
trackEnd = new Date().getTime() + data.track.duration - data.progress;
|
||||||
|
|
||||||
|
musicPlayerTitleNode.innerText = data.track.name;
|
||||||
|
musicPlayerArtistNode.innerText = data.track.artists.join(', ');
|
||||||
|
musicPlayerDurationNode.innerText = formatTime(trackDuration);
|
||||||
|
|
||||||
|
if (musicPlayerBackgroundNode.src != data.track.cover) {
|
||||||
|
musicPlayerBackgroundNode.src = data.track.cover;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
function formatTime(milliseconds) {
|
||||||
|
let seconds = milliseconds / 1000;
|
||||||
|
let minutes = Math.floor(seconds / 60);
|
||||||
|
let secondsFormatted = (seconds % 60).toFixed(0).padStart(2, '0');
|
||||||
|
return `${minutes}:${secondsFormatted}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
function delay(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
};
|
||||||
|
|
||||||
|
async function update() {
|
||||||
|
if (pausedAt && pausedAt.getTime() + 10000 < new Date().getTime()) {
|
||||||
|
player.classList.remove('active');
|
||||||
|
|
||||||
|
await delay(100);
|
||||||
|
return update();
|
||||||
|
};
|
||||||
|
|
||||||
|
var progress;
|
||||||
|
if (pausedAt) {
|
||||||
|
progress = trackProgress / trackDuration * 100;
|
||||||
|
} else {
|
||||||
|
progress = (trackDuration - (trackEnd - new Date().getTime())) / trackDuration * 100;
|
||||||
|
musicPlayerNowNode.innerText = formatTime((trackDuration - (trackEnd - new Date().getTime())));
|
||||||
|
};
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
progress = 100;
|
||||||
|
};
|
||||||
|
|
||||||
|
musicPlayerProgress.style.setProperty('--progress', `${progress}%`);
|
||||||
|
|
||||||
|
await delay(100);
|
||||||
|
update();
|
||||||
|
};
|
||||||
|
|
||||||
|
update();
|
||||||
177
MusicPlayer/Miwory/generation 2/style.css
Normal file
177
MusicPlayer/Miwory/generation 2/style.css
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||||||
|
|
||||||
|
#widget {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#widget.active {
|
||||||
|
visibility: visible
|
||||||
|
}
|
||||||
|
|
||||||
|
#player {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
font-family: "Nunito", sans-serif;
|
||||||
|
opacity: 0;
|
||||||
|
margin: 5px 30px;
|
||||||
|
transition: opacity 350ms ease-in-out;
|
||||||
|
|
||||||
|
--text-color: white;
|
||||||
|
--background-color: #52363A;
|
||||||
|
--second-color: #5475af;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player.active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player_background {
|
||||||
|
position: relative;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player_background::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
left: -15px;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#background_img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 0 15px 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
border-radius: 10px;
|
||||||
|
flex: 1 1 0;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info a {
|
||||||
|
word-break: keep-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#artist {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
padding-inline: 15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bars {
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
padding-block: 12px;
|
||||||
|
gap: 7.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
width: 7px;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: var(--second-color);
|
||||||
|
animation: bounce 1s ease-in-out infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar:nth-child(1) { animation-duration: 1.6s; animation-delay: 0s; }
|
||||||
|
.bar:nth-child(2) { animation-duration: 1.8s; animation-delay: 0.1s; }
|
||||||
|
.bar:nth-child(3) { animation-duration: 2.2s; animation-delay: 0.2s; }
|
||||||
|
.bar:nth-child(4) { animation-duration: 1.4s; animation-delay: 0.3s; }
|
||||||
|
.bar:nth-child(5) { animation-duration: 2.4s; animation-delay: 0.4s; }
|
||||||
|
.bar:nth-child(6) { animation-duration: 1.7s; animation-delay: 0.5s; }
|
||||||
|
.bar:nth-child(7) { animation-duration: 1.9s; animation-delay: 0.6s; }
|
||||||
|
.bar:nth-child(8) { animation-duration: 2.3s; animation-delay: 0.7s; }
|
||||||
|
.bar:nth-child(9) { animation-duration: 1.5s; animation-delay: 0.8s; }
|
||||||
|
.bar:nth-child(10) { animation-duration: 2.1s; animation-delay: 0.9s; }
|
||||||
|
.bar:nth-child(11) { animation-duration: 1.8s; animation-delay: 1s; }
|
||||||
|
.bar:nth-child(12) { animation-duration: 2.0s; animation-delay: 1.1s; }
|
||||||
|
.bar:nth-child(13) { animation-duration: 1.6s; animation-delay: 1.2s; }
|
||||||
|
.bar:nth-child(14) { animation-duration: 2.2s; animation-delay: 1.3s; }
|
||||||
|
.bar:nth-child(15) { animation-duration: 1.9s; animation-delay: 1.4s; }
|
||||||
|
.bar:nth-child(16) { animation-duration: 1.7s; animation-delay: 1.5s; }
|
||||||
|
.bar:nth-child(17) { animation-duration: 2.4s; animation-delay: 1.6s; }
|
||||||
|
.bar:nth-child(18) { animation-duration: 1.4s; animation-delay: 1.7s; }
|
||||||
|
.bar:nth-child(19) { animation-duration: 2.0s; animation-delay: 1.8s; }
|
||||||
|
.bar:nth-child(20) { animation-duration: 1.8s; animation-delay: 1.9s; }
|
||||||
|
|
||||||
|
#progressbar {
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% + 15px);
|
||||||
|
height: 20px;
|
||||||
|
margin-left: -15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progressbar::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--progress);
|
||||||
|
background-color: var(--second-color);
|
||||||
|
transition: max-width 350ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scaleY(0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scaleY(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
10
MusicPlayer/Miwory/generation 3/index.html
Normal file
10
MusicPlayer/Miwory/generation 3/index.html
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<div id="widget">
|
||||||
|
<div id="player">
|
||||||
|
<img id="background_img">
|
||||||
|
<div class="meta">
|
||||||
|
<a id="album"></a>
|
||||||
|
<a id="title"></a>
|
||||||
|
<a id="artist"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
74
MusicPlayer/Miwory/generation 3/script.js
Normal file
74
MusicPlayer/Miwory/generation 3/script.js
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
let widgetNode = document.getElementById('widget');
|
||||||
|
let musicPlayerNode = document.getElementById('player');
|
||||||
|
let musicPlayerTitleNode = document.getElementById('title');
|
||||||
|
let musicPlayerArtistNode = document.getElementById('artist');
|
||||||
|
let musicPlayerAlbumNode = document.getElementById('album');
|
||||||
|
let musicPlayerBackgroundNode = document.getElementById('background_img');
|
||||||
|
let musicPlayerProgress = document.getElementById('progressbar');
|
||||||
|
let pausedAt = null;
|
||||||
|
let trackDuration = 0;
|
||||||
|
let trackProgress = 0;
|
||||||
|
let trackEnd = new Date();
|
||||||
|
|
||||||
|
window.addEventListener('message', function (event) {
|
||||||
|
let message = event.detail;
|
||||||
|
let data = message.data;
|
||||||
|
widgetNode.classList.add('active');
|
||||||
|
|
||||||
|
if (data == null) {
|
||||||
|
musicPlayerNode.classList.remove('active');
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!data.is_playing && !pausedAt) {
|
||||||
|
pausedAt = new Date();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (data.is_playing) {
|
||||||
|
musicPlayerNode.classList.add('active');
|
||||||
|
pausedAt = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
trackDuration = data.track.duration;
|
||||||
|
trackProgress = data.progress;
|
||||||
|
trackEnd = new Date().getTime() + data.track.duration - data.progress;
|
||||||
|
|
||||||
|
musicPlayerTitleNode.innerText = data.track.name;
|
||||||
|
musicPlayerArtistNode.innerText = data.track.artists.join(', ');
|
||||||
|
musicPlayerAlbumNode.innerText = `album: ${data.track.album}`;
|
||||||
|
|
||||||
|
if (musicPlayerBackgroundNode.src != data.track.cover) {
|
||||||
|
musicPlayerBackgroundNode.src = data.track.cover;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
function delay(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
};
|
||||||
|
|
||||||
|
async function update() {
|
||||||
|
if (pausedAt && pausedAt.getTime() + 10000 < new Date().getTime()) {
|
||||||
|
player.classList.remove('active');
|
||||||
|
|
||||||
|
await delay(100);
|
||||||
|
return update();
|
||||||
|
};
|
||||||
|
|
||||||
|
var progress;
|
||||||
|
if (pausedAt) {
|
||||||
|
progress = trackProgress / trackDuration * 100;
|
||||||
|
} else {
|
||||||
|
progress = (trackDuration - (trackEnd - new Date().getTime())) / trackDuration * 100;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
progress = 100;
|
||||||
|
};
|
||||||
|
|
||||||
|
musicPlayerProgress.style.setProperty('--progress', `${progress}%`);
|
||||||
|
|
||||||
|
await delay(100);
|
||||||
|
update();
|
||||||
|
};
|
||||||
|
|
||||||
|
update();
|
||||||
66
MusicPlayer/Miwory/generation 3/style.css
Normal file
66
MusicPlayer/Miwory/generation 3/style.css
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||||||
|
|
||||||
|
#widget {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
visibility: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
#widget.active {
|
||||||
|
visibility: visible
|
||||||
|
}
|
||||||
|
|
||||||
|
#player {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
width: 800px;
|
||||||
|
height: 320px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 30px;
|
||||||
|
margin-inline: 30px;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "Nunito", sans-serif;
|
||||||
|
opacity: 0;
|
||||||
|
background-color: #242424;
|
||||||
|
transition: opacity 350ms ease-in-out
|
||||||
|
}
|
||||||
|
|
||||||
|
#player.active {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #background_img {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .meta {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 450px;
|
||||||
|
margin: auto;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .meta a {
|
||||||
|
word-break: keep-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #album {
|
||||||
|
font-size: 32px;
|
||||||
|
color: #E47D7D;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #title {
|
||||||
|
font-size: 42px;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #artist {
|
||||||
|
font-size: 40px;
|
||||||
|
opacity: .6;
|
||||||
|
}
|
||||||
10
MusicPlayer/miyuchiq/generation 1/index.html
Normal file
10
MusicPlayer/miyuchiq/generation 1/index.html
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<div id="widget">
|
||||||
|
<div id="player">
|
||||||
|
<img id="background_img">
|
||||||
|
<div class="meta">
|
||||||
|
<a id="album"></a>
|
||||||
|
<a id="title"></a>
|
||||||
|
<a id="artist"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
74
MusicPlayer/miyuchiq/generation 1/script.js
Normal file
74
MusicPlayer/miyuchiq/generation 1/script.js
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
let widgetNode = document.getElementById('widget');
|
||||||
|
let musicPlayerNode = document.getElementById('player');
|
||||||
|
let musicPlayerTitleNode = document.getElementById('title');
|
||||||
|
let musicPlayerArtistNode = document.getElementById('artist');
|
||||||
|
let musicPlayerAlbumNode = document.getElementById('album');
|
||||||
|
let musicPlayerBackgroundNode = document.getElementById('background_img');
|
||||||
|
let musicPlayerProgress = document.getElementById('progressbar');
|
||||||
|
let pausedAt = null;
|
||||||
|
let trackDuration = 0;
|
||||||
|
let trackProgress = 0;
|
||||||
|
let trackEnd = new Date();
|
||||||
|
|
||||||
|
window.addEventListener('message', function (event) {
|
||||||
|
let message = event.detail;
|
||||||
|
let data = message.data;
|
||||||
|
widgetNode.classList.add('active');
|
||||||
|
|
||||||
|
if (data == null) {
|
||||||
|
musicPlayerNode.classList.remove('active');
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!data.is_playing && !pausedAt) {
|
||||||
|
pausedAt = new Date();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (data.is_playing) {
|
||||||
|
musicPlayerNode.classList.add('active');
|
||||||
|
pausedAt = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
trackDuration = data.track.duration;
|
||||||
|
trackProgress = data.progress;
|
||||||
|
trackEnd = new Date().getTime() + data.track.duration - data.progress;
|
||||||
|
|
||||||
|
musicPlayerTitleNode.innerText = data.track.name;
|
||||||
|
musicPlayerArtistNode.innerText = data.track.artists.join(', ');
|
||||||
|
musicPlayerAlbumNode.innerText = `album: ${data.track.album}`;
|
||||||
|
|
||||||
|
if (musicPlayerBackgroundNode.src != data.track.cover) {
|
||||||
|
musicPlayerBackgroundNode.src = data.track.cover;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
function delay(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
};
|
||||||
|
|
||||||
|
async function update() {
|
||||||
|
if (pausedAt && pausedAt.getTime() + 10000 < new Date().getTime()) {
|
||||||
|
player.classList.remove('active');
|
||||||
|
|
||||||
|
await delay(100);
|
||||||
|
return update();
|
||||||
|
};
|
||||||
|
|
||||||
|
var progress;
|
||||||
|
if (pausedAt) {
|
||||||
|
progress = trackProgress / trackDuration * 100;
|
||||||
|
} else {
|
||||||
|
progress = (trackDuration - (trackEnd - new Date().getTime())) / trackDuration * 100;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
progress = 100;
|
||||||
|
};
|
||||||
|
|
||||||
|
musicPlayerProgress.style.setProperty('--progress', `${progress}%`);
|
||||||
|
|
||||||
|
await delay(100);
|
||||||
|
update();
|
||||||
|
};
|
||||||
|
|
||||||
|
update();
|
||||||
66
MusicPlayer/miyuchiq/generation 1/style.css
Normal file
66
MusicPlayer/miyuchiq/generation 1/style.css
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||||||
|
|
||||||
|
#widget {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
visibility: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
#widget.active {
|
||||||
|
visibility: visible
|
||||||
|
}
|
||||||
|
|
||||||
|
#player {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
width: 800px;
|
||||||
|
height: 230px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 30px;
|
||||||
|
margin-inline: 30px;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "Nunito", sans-serif;
|
||||||
|
opacity: 0;
|
||||||
|
background-color: #242424;
|
||||||
|
transition: opacity 350ms ease-in-out
|
||||||
|
}
|
||||||
|
|
||||||
|
#player.active {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #background_img {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .meta {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 520px;
|
||||||
|
margin: auto;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player .meta a {
|
||||||
|
word-break: keep-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #album {
|
||||||
|
font-size: 32px;
|
||||||
|
color: #E47D7D;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #title {
|
||||||
|
font-size: 42px;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player #artist {
|
||||||
|
font-size: 40px;
|
||||||
|
opacity: .6;
|
||||||
|
}
|
||||||
@ -456,14 +456,15 @@ async function fixEmotesPadding($messageElement, $parentElement, details, functi
|
|||||||
let $contentElement = $messageElement.find('content').eq(0);
|
let $contentElement = $messageElement.find('content').eq(0);
|
||||||
|
|
||||||
$contentElement.find('.emote').each(function () {
|
$contentElement.find('.emote').each(function () {
|
||||||
let previousSibling = this.previousSibling.nodeValue;
|
let $emote = $(this).eq(0);
|
||||||
let nextSibling = this.nextSibling.nodeValue;
|
let $previousEmote = $emote.prev('span.emote').eq(0);
|
||||||
|
let $nextEmote = $emote.next('span.emote').eq(0);
|
||||||
|
|
||||||
if (previousSibling && previousSibling.trim() === '') {
|
if ($previousEmote.length) {
|
||||||
this.classList.add('emote-left');
|
this.classList.add('emote-left');
|
||||||
};
|
};
|
||||||
|
|
||||||
if (nextSibling && nextSibling.trim() === '') {
|
if ($nextEmote.length) {
|
||||||
this.classList.add('emote-right');
|
this.classList.add('emote-right');
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|||||||
@ -8,9 +8,9 @@
|
|||||||
--font-family-1: "Montserrat", serif;
|
--font-family-1: "Montserrat", serif;
|
||||||
|
|
||||||
/* Emotes */
|
/* Emotes */
|
||||||
--emote-size: calc(var(--font-size) * 2);
|
--emote-size: 100px;
|
||||||
--emote-size-xl: calc(var(--font-size) * 4);
|
--emote-size-xl: calc(var(--emote-size) * 2);
|
||||||
--emote-size-xxl: calc(var(--font-size) * 8);
|
--emote-size-xxl: calc(var(--emote-size-xl) * 2);
|
||||||
|
|
||||||
/* Badges */
|
/* Badges */
|
||||||
--badge-size: 25px;
|
--badge-size: 25px;
|
||||||
@ -60,11 +60,11 @@ content {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.emote.emote-left {
|
.emote.emote-left {
|
||||||
margin-left: -5.5px;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emote.emote-right {
|
.emote.emote-right {
|
||||||
margin-right: -5.5px;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emote img {
|
.emote img {
|
||||||
@ -262,7 +262,7 @@ message bottom content {
|
|||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
background: linear-gradient(to bottom, transparent calc(100% - 20px), var(--primary) calc(100% - 19.99px), var(--primary)), var(--bg);
|
background: linear-gradient(to bottom, transparent calc(100% - 20px), var(--primary) calc(100% - 19.99px), var(--primary)), var(--bg);
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
padding: 55px 35px;
|
padding: 45px 35px 55px;
|
||||||
}
|
}
|
||||||
|
|
||||||
message bottom footer {
|
message bottom footer {
|
||||||
|
|||||||
25
StreamLabsChats/k1r4ka/generation 2/index.html
Normal file
25
StreamLabsChats/k1r4ka/generation 2/index.html
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<div id="chatbox" class="sl__chat__layout">
|
||||||
|
<a class="font-1">1</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/template" id="chatlist_item">
|
||||||
|
<message id="{messageId}">
|
||||||
|
<top>
|
||||||
|
<author>{from}</author>
|
||||||
|
</top>
|
||||||
|
<bottom>
|
||||||
|
<content>{message}</content>
|
||||||
|
</bottom>
|
||||||
|
</message>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/template" id="chatlist_event">
|
||||||
|
<event id="{messageId}">
|
||||||
|
<content>
|
||||||
|
<author>{author}</author>
|
||||||
|
{content}
|
||||||
|
<desc>{desc}</desc>
|
||||||
|
<meow>MEOW!</meow>
|
||||||
|
</content>
|
||||||
|
</event>
|
||||||
|
</script>
|
||||||
535
StreamLabsChats/k1r4ka/generation 2/script.js
Normal file
535
StreamLabsChats/k1r4ka/generation 2/script.js
Normal file
@ -0,0 +1,535 @@
|
|||||||
|
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 tier;
|
||||||
|
let content;
|
||||||
|
let desc;
|
||||||
|
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
|
||||||
|
let subPlan = details.tags['msg-param-sub-plan'] || 1000
|
||||||
|
|
||||||
|
switch (subPlan) {
|
||||||
|
case 1000:
|
||||||
|
tier = '1';
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 2000:
|
||||||
|
tier = '2';
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 3000:
|
||||||
|
tier = '3';
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!$eventElement.length) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (eventType) {
|
||||||
|
case 'sub':
|
||||||
|
case 'resub':
|
||||||
|
case 'standardpayforward':
|
||||||
|
case 'communitypayforward':
|
||||||
|
case 'giftpaidupgrade':
|
||||||
|
case 'primepaidupgrade':
|
||||||
|
content = 'subscribed'
|
||||||
|
type = 'sub';
|
||||||
|
desc = `with tier ${tier}`
|
||||||
|
break;
|
||||||
|
case 'subgift':
|
||||||
|
case 'anonsubgift':
|
||||||
|
if (subMysteries.includes(details.tags['msg-param-origin-id'])) return
|
||||||
|
content = `Has gifted a sub to`;
|
||||||
|
desc = recipient;
|
||||||
|
type = 'gift';
|
||||||
|
break;
|
||||||
|
case 'submysterygift':
|
||||||
|
if (subMysteries.includes(details.tags['msg-param-origin-id'])) return
|
||||||
|
content = `Has gifted`;
|
||||||
|
desc = `${mysteryGiftCount} subs`;
|
||||||
|
type = 'gift';
|
||||||
|
break;
|
||||||
|
case 'raid':
|
||||||
|
content = `Has raided`;
|
||||||
|
desc = `with ${viewerCount} viewers`;
|
||||||
|
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.replace('{desc}', desc)
|
||||||
|
$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-ping>${user}</user-ping>`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
$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} `,
|
||||||
|
` <span class="${emoteClasses}"><img src="${emoteSrc}"></span> `
|
||||||
|
)) !== 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 $emote = $(this).eq(0);
|
||||||
|
let $previousEmote = $emote.prev('span.emote').eq(0);
|
||||||
|
let $nextEmote = $emote.next('span.emote').eq(0);
|
||||||
|
|
||||||
|
if ($previousEmote.length) {
|
||||||
|
this.classList.add('emote-left');
|
||||||
|
};
|
||||||
|
|
||||||
|
if ($nextEmote.length) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
326
StreamLabsChats/k1r4ka/generation 2/style.css
Normal file
326
StreamLabsChats/k1r4ka/generation 2/style.css
Normal file
@ -0,0 +1,326 @@
|
|||||||
|
/* Imports */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
|
||||||
|
|
||||||
|
/* Variables */
|
||||||
|
:root {
|
||||||
|
/* Fonts */
|
||||||
|
--font-size: 35px;
|
||||||
|
--font-family-1: "Comfortaa", serif;
|
||||||
|
|
||||||
|
/* Emotes */
|
||||||
|
--emote-size: calc(var(--font-size) * 2);
|
||||||
|
--emote-size-xl: calc(var(--font-size) * 3);
|
||||||
|
--emote-size-xxl: calc(var(--font-size) * 8);
|
||||||
|
|
||||||
|
/* Badges */
|
||||||
|
--badge-size: 25px;
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
--text-color: #FFFFFF;
|
||||||
|
--event-color: #302321;
|
||||||
|
--message-background: linear-gradient(to right, #F09C50, #B84939);
|
||||||
|
--event-background: linear-gradient(to right, #FFE3C9, #FFC794);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emote.emote-right {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
color: var(--text-color);
|
||||||
|
max-width: fit-content;
|
||||||
|
padding: 45px 30px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
message top {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: -87px;
|
||||||
|
font-size: calc(var(--font-size) * 2 / 3);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
message top::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
top: -10px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -100%);
|
||||||
|
height: 30px;
|
||||||
|
z-index: -1;
|
||||||
|
aspect-ratio: 307 / 67;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='307' height='67' fill='none'%3E%3Cpath fill='%23CD6841' d='M261.395 1.593C249.563 10.972 216.202 49.105 201 67h106c-1.233-20.98-30.814-77.131-45.605-65.407Z'/%3E%3Cpath fill='%23DA7B47' d='M45.605 1.593C57.437 10.972 90.799 49.105 106 67H0C1.233 46.02 30.814-10.131 45.605 1.593Z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
message top author {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding-inline: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
message top author::before {
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
top: 0;
|
||||||
|
width: 30px;
|
||||||
|
content: '';
|
||||||
|
aspect-ratio: 45 / 56;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='56' fill='none'%3E%3Cpath fill='%23FFD6B1' d='M10.874 43.119c2.017.592 1.866 2.963 2.72 4.889.854 1.926 2.61 3.094 1.655 4.975-1.229 2.423-4.277.229-6.885-.497-2.732-.761-6.85-.27-6.536-3.099.238-2.138 2.306-2.217 4.072-3.44 1.767-1.225 2.916-3.433 4.974-2.828ZM18.627 46.652c-.534 1.159-1.567 1.82-2.307 1.479-.74-.342-.908-1.56-.375-2.718.534-1.159 1.567-1.82 2.308-1.479.74.342.908 1.56.374 2.718ZM2.298 42.277c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.166.118-1.27-.446-2.36-1.259-2.435-.812-.074-1.566.896-1.683 2.167ZM15.579 41.639c-.534 1.158-1.567 1.82-2.308 1.478-.74-.342-.908-1.559-.374-2.717.534-1.16 1.567-1.821 2.307-1.48.74.343.908 1.56.375 2.719ZM7.445 39.46c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.167.117-1.27-.446-2.36-1.259-2.434-.812-.074-1.566.896-1.683 2.166ZM34.874 26.119c2.017.592 1.866 2.963 2.72 4.889.855 1.926 2.61 3.094 1.655 4.975-1.229 2.423-4.277.229-6.885-.497-2.732-.761-6.85-.27-6.536-3.099.238-2.138 2.306-2.217 4.072-3.44 1.767-1.225 2.916-3.432 4.974-2.828ZM42.627 29.652c-.534 1.159-1.567 1.82-2.307 1.479-.74-.342-.908-1.56-.374-2.718.533-1.159 1.566-1.82 2.307-1.479.74.342.908 1.56.374 2.718ZM26.298 25.277c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.166.118-1.27-.446-2.36-1.259-2.435-.812-.074-1.566.896-1.683 2.167ZM39.579 24.639c-.534 1.159-1.567 1.82-2.308 1.478-.74-.342-.908-1.559-.374-2.717.534-1.16 1.567-1.821 2.307-1.48.74.343.908 1.56.375 2.719ZM31.445 22.46c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.167.117-1.27-.446-2.36-1.259-2.434-.812-.074-1.566.896-1.683 2.166ZM16.874 9.119c2.017.592 1.866 2.963 2.72 4.889.854 1.926 2.61 3.094 1.655 4.975-1.229 2.423-4.277.229-6.885-.497-2.732-.761-6.85-.27-6.536-3.099.238-2.138 2.306-2.217 4.072-3.44 1.767-1.225 2.916-3.433 4.974-2.828ZM24.627 12.652c-.534 1.159-1.567 1.82-2.307 1.479-.74-.342-.908-1.56-.375-2.718.534-1.159 1.567-1.82 2.308-1.479.74.342.908 1.56.374 2.718ZM8.298 8.277c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.166.117-1.27-.446-2.36-1.259-2.435-.812-.074-1.566.896-1.683 2.167ZM21.579 7.639c-.534 1.159-1.567 1.82-2.308 1.478-.74-.342-.908-1.559-.374-2.717.534-1.16 1.567-1.821 2.307-1.48.74.343.908 1.56.375 2.719ZM13.445 5.46c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.167.117-1.27-.446-2.36-1.259-2.434-.812-.074-1.566.896-1.683 2.166Z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
message top author::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
top: -10px;
|
||||||
|
right: 12px;
|
||||||
|
width: 30px;
|
||||||
|
aspect-ratio: 32 / 37;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='37' fill='none'%3E%3Cpath stroke='%23EF9543' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.996 1.014c1.268 6.131 5.615 17.236 12.856 12.605C36.094 8.99 23.3 3.286 15.996 1.014Zm0 0c-1.4 6.045-5.93 17.03-12.856 12.605C-5.518 8.09 14.815.632 15.996 1.014Zm0 0L10.486 36m5.51-34.986L21.637 36'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
message bottom {
|
||||||
|
position: relative;
|
||||||
|
background-image: var(--message-background);
|
||||||
|
padding: 50px 70px 20px;
|
||||||
|
margin-block: 50px 40px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
message bottom::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
left: 5px;
|
||||||
|
bottom: -40px;
|
||||||
|
width: 35px;
|
||||||
|
aspect-ratio: 46 / 54;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='54' fill='none'%3E%3Cpath stroke='%23B84939' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M22.994 2.02c1.776 8.759 7.861 24.623 18 18.008 10.137-6.615-7.776-14.762-18-18.008Zm0 0c-1.959 8.636-8.3 24.329-17.998 18.008C-7.126 12.126 21.342 1.475 22.994 2.02Zm0 0L15.281 52m7.713-49.98L30.892 52'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
message bottom::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
right: 20px;
|
||||||
|
bottom: -5px;
|
||||||
|
width: 60px;
|
||||||
|
aspect-ratio: 81 / 33;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82' height='38' fill='none'%3E%3Cpath fill='url(%23a)' d='M81.263 9.055s-18.81 2.2-26.616 5.818c-9.268 4.296-22.273 18.99-22.273 18.99s17.068 1.8 30.587-2.096C76.481 27.87 81.263 9.055 81.263 9.055Z'/%3E%3Cpath fill='url(%23b)' d='M3.764 0s17.764 6 24.579 11.11c8.092 6.067 17.663 22.973 17.663 22.973s-21.33 2.18-31.979-6.823C3.378 18.255 3.764 0 3.764 0Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='58.023' x2='55.614' y1='7.106' y2='35.818' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='26.672' x2='23.097' y1='2.894' y2='31.195' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
message.subscriber bottom::after {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 81 44'%3E%3Crect width='81' height='33' y='11' fill='%23FFD6B1' rx='10'/%3E%3Cpath fill='url(%23a)' d='M59 4.2346s-8.7958 1.02867-12.4458 2.72044c-4.3343 2.00892-10.4154 8.87986-10.4154 8.87986s7.9812.8416 14.3031-.9801C56.7638 13.0331 59 4.2346 59 4.2346Z'/%3E%3Cpath fill='url(%23b)' d='M22.7603.00012207S31.0668 2.80596 34.2535 5.19528c3.7842 2.83723 8.2596 10.74232 8.2596 10.74232s-9.974 1.0199-14.9537-3.1906C22.5797 8.53655 22.7603.00012207 22.7603.00012207Z'/%3E%3Cpath fill='%23AE3B37' d='M27.0027 35.08c-.9334 0-1.8-.14-2.6-.42-.7867-.2933-1.4-.66-1.84-1.1-.2-.2133-.2867-.4533-.26-.72.04-.28.1733-.5067.4-.68.2666-.2133.5266-.3.78-.26.2666.0267.4933.14.68.34.2266.2533.5866.4933 1.08.72.5066.2133 1.0666.32 1.68.32.7733 0 1.36-.1267 1.76-.38.4133-.2533.6266-.58.64-.98.0133-.4-.18-.7467-.58-1.04-.3867-.2933-1.1-.5333-2.14-.72-1.3467-.2667-2.3267-.6667-2.94-1.2-.6-.5333-.9-1.1867-.9-1.96 0-.68.2-1.24.6-1.68.4-.4533.9133-.7867 1.54-1 .6266-.2267 1.28-.34 1.96-.34.88 0 1.66.14 2.34.42.68.28 1.22.6667 1.62 1.16.1866.2133.2733.44.26.68-.0134.2267-.1267.42-.34.58-.2134.1467-.4667.1933-.76.14-.2934-.0533-.54-.1733-.74-.36-.3334-.32-.6934-.54-1.08-.66-.3867-.12-.8334-.18-1.34-.18-.5867 0-1.0867.1-1.5.3-.4.2-.6.4933-.6.88 0 .24.06.46.18.66.1333.1867.3866.36.76.52.3733.1467.92.2933 1.64.44 1 .2 1.7866.4533 2.36.76.5866.3067 1.0066.6667 1.26 1.08.2533.4.38.8667.38 1.4 0 .6133-.1667 1.1667-.5 1.66-.32.4933-.8.8867-1.44 1.18-.6267.2933-1.4134.44-2.36.44Zm11.4793.02c-.92 0-1.7466-.1933-2.48-.58-.72-.4-1.2933-.98-1.72-1.74-.4133-.76-.62-1.6933-.62-2.8v-4.92c0-.2933.0934-.5333.28-.72.2-.2.4467-.3.74-.3.2934 0 .5334.1.72.3.2.1867.3.4267.3.72v4.92c0 .7467.14 1.3667.42 1.86.28.48.66.84 1.14 1.08.48.2267 1.02.34 1.62.34.5734 0 1.08-.1133 1.52-.34.4534-.2267.8134-.5333 1.08-.92.2667-.3867.4-.82.4-1.3h1.26c0 .8267-.2066 1.5733-.62 2.24-.4.6667-.9533 1.1933-1.66 1.58-.6933.3867-1.4866.58-2.38.58Zm4.42-.1c-.2933 0-.54-.0933-.74-.28-.1866-.2-.28-.4467-.28-.74v-8.92c0-.3067.0934-.5533.28-.74.2-.1867.4467-.28.74-.28.3067 0 .5534.0933.74.28.1867.1867.28.4333.28.74v8.92c0 .2933-.0933.54-.28.74-.1866.1867-.4333.28-.74.28Zm10.1128.08c-1.04 0-1.9733-.24-2.8-.72-.8266-.4933-1.48-1.16-1.96-2-.48-.84-.7266-1.7867-.74-2.84V20.4c0-.3067.0934-.5533.28-.74.2-.1867.4467-.28.74-.28.3067 0 .5534.0933.74.28.1867.1867.28.4333.28.74v5.4c.4667-.56 1.0267-1 1.68-1.32.6667-.3333 1.3934-.5 2.18-.5.9734 0 1.8467.2467 2.62.74.7734.48 1.38 1.14 1.82 1.98.4534.8267.68 1.7667.68 2.82s-.2466 2-.74 2.84c-.48.84-1.1333 1.5067-1.96 2-.8266.48-1.7666.72-2.82.72Zm0-1.8c.68 0 1.2867-.16 1.82-.48.5334-.3333.9534-.7867 1.26-1.36.32-.5733.48-1.2133.48-1.92 0-.72-.16-1.36-.48-1.92-.3066-.56-.7266-1-1.26-1.32-.5333-.3333-1.14-.5-1.82-.5-.6666 0-1.2733.1667-1.82.5-.5333.32-.9533.76-1.26 1.32-.3066.56-.46 1.2-.46 1.92 0 .7067.1534 1.3467.46 1.92.3067.5733.7267 1.0267 1.26 1.36.5467.32 1.1534.48 1.82.48Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='48.1324' x2='47.0062' y1='3.32306' y2='16.7492' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='33.4724' x2='31.8007' y1='1.35325' y2='14.5873' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
message.vip bottom::after {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 81 44'%3E%3Crect width='81' height='33' y='11' fill='%23FFD6B1' rx='10'/%3E%3Cpath fill='url(%23a)' d='M59 4.2346s-8.7958 1.02867-12.4458 2.72044c-4.3343 2.00892-10.4154 8.87986-10.4154 8.87986s7.9812.8416 14.3031-.9801C56.7638 13.0331 59 4.2346 59 4.2346Z'/%3E%3Cpath fill='url(%23b)' d='M22.7603.00012207S31.0668 2.80596 34.2535 5.19528c3.7842 2.83723 8.2596 10.74232 8.2596 10.74232s-9.974 1.0199-14.9537-3.1906C22.5797 8.53655 22.7603.00012207 22.7603.00012207Z'/%3E%3Cpath fill='%23AE3B37' d='M41.1174 25.8546c2.2815 1.0422 1.6998 3.8149 2.3813 6.2341.6814 2.4191 2.555 4.0961 1.1086 6.1551-1.8624 2.6513-5.0878-.4566-8.044-1.7571-3.0963-1.362-8.0417-1.483-7.1898-4.7681.6443-2.4843 3.099-2.2256 5.3921-3.3706 2.2932-1.145 4.025-3.5564 6.3518-2.4934Zm8.5537 5.4884c-.8271 1.2774-2.1592 1.8835-2.9754 1.3538-.8162-.5298-.8074-1.9948.0197-3.2722.8271-1.2774 2.1592-1.8836 2.9754-1.3538.8162.5297.8074 1.9947-.0197 3.2722Zm-18.5347-7.9391c-.354 1.48.1263 2.8625 1.0729 3.0878.9466.2253 2.001-.7918 2.355-2.2719.3541-1.48-.1263-2.8625-1.0728-3.0878-.9466-.2253-2.001.7918-2.3551 2.2719Zm15.787 1.5025c-.8271 1.2774-2.1592 1.8835-2.9754 1.3538-.8162-.5298-.8074-1.9948.0197-3.2722.8271-1.2774 2.1592-1.8836 2.9754-1.3538.8162.5297.8074 1.9947-.0197 3.2722Zm-9.232-3.9544c-.354 1.48.1263 2.8625 1.0729 3.0878.9466.2253 2.001-.7918 2.355-2.2719.3541-1.48-.1263-2.8625-1.0729-3.0878-.9465-.2253-2.0009.7918-2.355 2.2719Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='48.1324' x2='47.0062' y1='3.32306' y2='16.7492' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='33.4724' x2='31.8007' y1='1.35325' y2='14.5873' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
message.moderator bottom::after {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 81 44'%3E%3Crect width='81' height='33' y='11' fill='%23FFD6B1' rx='10'/%3E%3Cpath fill='url(%23a)' d='M59 4.2346s-8.7958 1.02867-12.4458 2.72044c-4.3343 2.00892-10.4154 8.87986-10.4154 8.87986s7.9812.8416 14.3031-.9801C56.7638 13.0331 59 4.2346 59 4.2346Z'/%3E%3Cpath fill='url(%23b)' d='M22.7603.00012207S31.0668 2.80596 34.2535 5.19528c3.7842 2.83723 8.2596 10.74232 8.2596 10.74232s-9.974 1.0199-14.9537-3.1906C22.5797 8.53655 22.7603.00012207 22.7603.00012207Z'/%3E%3Cpath fill='%23AE3B37' d='M34.12 35 33 33.9286l1.96-3.0613L33 29.1071l1.04-1.2627 2.16 1.8367L41.64 20H47v4.6301l-8.32 7.1556 2.28 1.9515L39.6 35l-2.28-2.0663L34.12 35Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='48.1324' x2='47.0062' y1='3.32306' y2='16.7492' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='33.4724' x2='31.8007' y1='1.35325' y2='14.5873' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
message.broadcaster bottom::after {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 81 44'%3E%3Crect width='81' height='33' y='11' fill='%23FFD6B1' rx='10'/%3E%3Cpath fill='url(%23a)' d='M59 4.23459s-8.7958 1.02867-12.4458 2.72045c-4.3343 2.00892-10.4154 8.87986-10.4154 8.87986s7.9812.8415 14.3031-.9801C56.7638 13.0331 59 4.23459 59 4.23459Z'/%3E%3Cpath fill='url(%23b)' d='M22.7603.00012207S31.0668 2.80596 34.2535 5.19528c3.7842 2.83723 8.2596 10.74232 8.2596 10.74232s-9.974 1.0199-14.9537-3.1906C22.5797 8.53655 22.7603.00012207 22.7603.00012207Z'/%3E%3Crect width='81' height='33' y='11' fill='%23FFD6B1' rx='10'/%3E%3Cpath fill='url(%23c)' d='M59 4.23459s-8.7958 1.02867-12.4458 2.72045c-4.3343 2.00892-10.4154 8.87986-10.4154 8.87986s7.9812.8415 14.3031-.9801C56.7638 13.0331 59 4.23459 59 4.23459Z'/%3E%3Cpath fill='url(%23d)' d='M22.7603.00012207S31.0668 2.80596 34.2535 5.19528c3.7842 2.83723 8.2596 10.74232 8.2596 10.74232s-9.974 1.0199-14.9537-3.1906C22.5797 8.53655 22.7603.00012207 22.7603.00012207Z'/%3E%3Cpath fill='%23AE3B37' d='M39.5611 29.8546h-1.4675v-4.3687h1.4675v4.3687Zm4.1581 0h-1.4675v-4.3687h1.4675v4.3687Z'/%3E%3Cpath fill='%23AE3B37' fill-rule='evenodd' d='m48 31.389-4.6473 4.368h-3.4246L37.6045 38H35.403v-2.243H31V24.0694L32.2232 21H48v10.389Zm-14.1872 1.7708h3.4246v2.243l2.3237-2.243h4.2808l2.5679-2.4794v-8.2639h-12.597v10.7433Z' clip-rule='evenodd'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='48.1324' x2='47.0062' y1='3.32305' y2='16.7492' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='33.4724' x2='31.8007' y1='1.35325' y2='14.5873' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='48.1324' x2='47.0062' y1='3.32305' y2='16.7492' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='33.4724' x2='31.8007' y1='1.35325' y2='14.5873' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
event {
|
||||||
|
padding: 50px 15px 45px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
event content {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--event-color);
|
||||||
|
background-image: var(--event-background);
|
||||||
|
width: fit-content;
|
||||||
|
padding: 25px 75px 35px;
|
||||||
|
border-radius: 25px;
|
||||||
|
gap: 7.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
event content::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
top: 4px;
|
||||||
|
left: 50%;
|
||||||
|
height: 50px;
|
||||||
|
transform: translate(-50%, -100%);
|
||||||
|
aspect-ratio: 307 / 72;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='307' height='72' fill='none'%3E%3Cpath fill='%23FECDA0' d='M261.395 1.593C249.563 10.972 216.202 49.105 201 67h106c-1.233-20.98-30.814-77.131-45.605-65.407Z'/%3E%3Cpath fill='%23FFDCBC' d='M45.605 1.593C57.437 10.972 90.799 49.105 106 67H0C1.233 46.02 30.814-10.131 45.605 1.593Z'/%3E%3Cpath fill='url(%23a)' d='M184 49.02s-14.582 1.706-20.634 4.51c-7.186 3.331-17.267 14.723-17.267 14.723s13.232 1.395 23.713-1.625C180.293 63.608 184 49.02 184 49.02Z'/%3E%3Cpath fill='url(%23b)' d='M123.918 42s13.772 4.652 19.055 8.613c6.274 4.704 13.694 17.81 13.694 17.81s-16.536 1.69-24.792-5.29S123.918 42 123.918 42Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='165.983' x2='164.116' y1='47.51' y2='69.769' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='141.678' x2='138.906' y1='44.243' y2='66.184' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
event content::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
right: -50px;
|
||||||
|
bottom: -40px;
|
||||||
|
width: 115px;
|
||||||
|
aspect-ratio: 151 / 137;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='151' height='137' fill='none'%3E%3Cpath stroke='%23FEC794' stroke-linecap='round' stroke-width='16' d='M80.5 8c27 2.833 76.4 21.5 58 73.5-23 65-106.5 11-130 47'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
event content author,
|
||||||
|
event content desc
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
font-size: calc(var(--font-size) * 2 / 3);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
event content author::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
left: -90px;
|
||||||
|
top: 0;
|
||||||
|
width: 35px;
|
||||||
|
aspect-ratio: 51 / 50;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='50' fill='none'%3E%3Cpath fill='%23302321' d='M23.908 17.25c5.801-1.771 9.195 4.18 14.308 7.467 5.113 3.286 11.194 3.318 11.877 9.364.88 7.786-9.942 7.333-17.379 9.72-7.789 2.499-16.935 10.21-20.661 2.898-2.818-5.53 2.04-8.999 4.356-14.749 2.315-5.75 1.583-12.892 7.5-14.7ZM48.194 13.469c.551 3.639-.889 6.872-3.216 7.222-2.327.35-4.66-2.316-5.211-5.955-.552-3.639.888-6.872 3.215-7.222 2.327-.35 4.66 2.316 5.212 5.955ZM1.91 28.82c1.733 3.247 4.82 4.98 6.894 3.87 2.075-1.11 2.353-4.643.62-7.89-1.732-3.247-4.819-4.98-6.894-3.87-2.075 1.111-2.352 4.643-.62 7.89ZM32.898 6.224c.551 3.638-.888 6.872-3.215 7.222-2.327.35-4.66-2.316-5.212-5.955-.551-3.64.888-6.873 3.215-7.222 2.327-.35 4.66 2.316 5.212 5.955ZM9.845 13.87c1.732 3.247 4.819 4.98 6.893 3.87 2.075-1.111 2.353-4.643.62-7.89-1.732-3.247-4.819-4.98-6.894-3.87-2.075 1.11-2.352 4.643-.62 7.89Z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
event content meow {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translate(-50%, 50%);
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: calc(var(--font-size) / 2);
|
||||||
|
color: var(--text-color);
|
||||||
|
background-image: var(--message-background);
|
||||||
|
}
|
||||||
14
StreamLabsChats/miyuchiq/generation 1/index.html
Normal file
14
StreamLabsChats/miyuchiq/generation 1/index.html
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<div id="chatbox" class="sl__chat__layout">
|
||||||
|
<a class="font-1">1</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/template" id="chatlist_item">
|
||||||
|
<message id="{messageId}">
|
||||||
|
<top>
|
||||||
|
<author>{from}</author>
|
||||||
|
</top>
|
||||||
|
<bottom>
|
||||||
|
<content>{message}</content>
|
||||||
|
</bottom>
|
||||||
|
</message>
|
||||||
|
</script>
|
||||||
535
StreamLabsChats/miyuchiq/generation 1/script.js
Normal file
535
StreamLabsChats/miyuchiq/generation 1/script.js
Normal file
@ -0,0 +1,535 @@
|
|||||||
|
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 tier;
|
||||||
|
let content;
|
||||||
|
let desc;
|
||||||
|
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
|
||||||
|
let subPlan = details.tags['msg-param-sub-plan'] || 1000
|
||||||
|
|
||||||
|
switch (subPlan) {
|
||||||
|
case 1000:
|
||||||
|
tier = '1';
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 2000:
|
||||||
|
tier = '2';
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 3000:
|
||||||
|
tier = '3';
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!$eventElement.length) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (eventType) {
|
||||||
|
case 'sub':
|
||||||
|
case 'resub':
|
||||||
|
case 'standardpayforward':
|
||||||
|
case 'communitypayforward':
|
||||||
|
case 'giftpaidupgrade':
|
||||||
|
case 'primepaidupgrade':
|
||||||
|
content = 'subscribed'
|
||||||
|
type = 'sub';
|
||||||
|
desc = `with tier ${tier}`
|
||||||
|
break;
|
||||||
|
case 'subgift':
|
||||||
|
case 'anonsubgift':
|
||||||
|
if (subMysteries.includes(details.tags['msg-param-origin-id'])) return
|
||||||
|
content = `Has gifted a sub to`;
|
||||||
|
desc = recipient;
|
||||||
|
type = 'gift';
|
||||||
|
break;
|
||||||
|
case 'submysterygift':
|
||||||
|
if (subMysteries.includes(details.tags['msg-param-origin-id'])) return
|
||||||
|
content = `Has gifted`;
|
||||||
|
desc = `${mysteryGiftCount} subs`;
|
||||||
|
type = 'gift';
|
||||||
|
break;
|
||||||
|
case 'raid':
|
||||||
|
content = `Has raided`;
|
||||||
|
desc = `with ${viewerCount} viewers`;
|
||||||
|
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.replace('{desc}', desc)
|
||||||
|
$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-ping>${user}</user-ping>`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
$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} `,
|
||||||
|
` <span class="${emoteClasses}"><img src="${emoteSrc}"></span> `
|
||||||
|
)) !== 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 $emote = $(this).eq(0);
|
||||||
|
let $previousEmote = $emote.prev('span.emote').eq(0);
|
||||||
|
let $nextEmote = $emote.next('span.emote').eq(0);
|
||||||
|
|
||||||
|
if ($previousEmote.length) {
|
||||||
|
this.classList.add('emote-left');
|
||||||
|
};
|
||||||
|
|
||||||
|
if ($nextEmote.length) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
192
StreamLabsChats/miyuchiq/generation 1/style.css
Normal file
192
StreamLabsChats/miyuchiq/generation 1/style.css
Normal file
@ -0,0 +1,192 @@
|
|||||||
|
/* Imports */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
|
||||||
|
|
||||||
|
/* Variables */
|
||||||
|
:root {
|
||||||
|
/* Fonts */
|
||||||
|
--font-size: 35px;
|
||||||
|
--font-family-1: "Comfortaa", serif;
|
||||||
|
|
||||||
|
/* Emotes */
|
||||||
|
--emote-size: calc(var(--font-size) * 2);
|
||||||
|
--emote-size-xl: calc(var(--font-size) * 3);
|
||||||
|
--emote-size-xxl: calc(var(--font-size) * 8);
|
||||||
|
|
||||||
|
/* Badges */
|
||||||
|
--badge-size: 25px;
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
--author-background: #fe9dbe;
|
||||||
|
--author-text: #fddfee;
|
||||||
|
--message-background: #fdf4f7;
|
||||||
|
--message-text: #272123;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emote.emote-right {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 40px 15px 15px 30px;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
message top {
|
||||||
|
background-color: var(--author-background);
|
||||||
|
color: var(--author-text);
|
||||||
|
width: fit-content;
|
||||||
|
margin-left: 50px;
|
||||||
|
padding: 5px 50px;
|
||||||
|
border-radius: 15px 15px 0 0;
|
||||||
|
border: 3px solid black;
|
||||||
|
border-bottom: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
message bottom {
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--message-background);
|
||||||
|
color: var(--message-text);
|
||||||
|
padding: 20px 30px;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: 3px solid black;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
message bottom::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
background-color: black;
|
||||||
|
width: 17px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
bottom: -3px;
|
||||||
|
left: -19px;
|
||||||
|
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
message bottom::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
background-color: var(--message-background);
|
||||||
|
width: 20px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
bottom: -0.5px;
|
||||||
|
left: -12px;
|
||||||
|
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user