210 lines
5.4 KiB
HTML
210 lines
5.4 KiB
HTML
{% if p.award_count("croag", v) %}
|
|
<style>
|
|
.croag {
|
|
position:fixed;
|
|
z-index:9999;
|
|
pointer-events: none;
|
|
}
|
|
.croag1 {
|
|
top: 15%
|
|
}
|
|
.croag2 {
|
|
top: 40%
|
|
}
|
|
.croag3 {
|
|
top: 65%
|
|
}
|
|
.croag4 {
|
|
top: 90%
|
|
}
|
|
.croagimg {
|
|
width: 169px !important;
|
|
height: 68px !important;
|
|
}
|
|
@media (max-width: 992px) {
|
|
.croagimg {
|
|
width: 100px !important;
|
|
height: 40px !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<marquee class="croag croag1" direction="left" scrollamount=10 width="100%">
|
|
<img alt="croag" class="croagimg mirrored" src="/i/PCM/croag.webp?v=2000">
|
|
</marquee>
|
|
|
|
{% if p.award_count("croag", v) > 1 %}
|
|
<marquee class="croag croag2" direction="right" scrollamount=10 width="100%">
|
|
<img alt="croag" class="croagimg" src="/i/PCM/croag.webp?v=2000">
|
|
</marquee>
|
|
{% endif %}
|
|
|
|
{% if p.award_count("croag", v) > 2 %}
|
|
<marquee class="croag croag3" direction="left" scrollamount=10 width="100%">
|
|
<img alt="croag" class="croagimg mirrored" src="/i/PCM/croag.webp?v=2000">
|
|
</marquee>
|
|
{% endif %}
|
|
|
|
{% if p.award_count("croag", v) > 3 %}
|
|
<marquee class="croag croag4" direction="right" scrollamount=10 width="100%">
|
|
<img alt="croag" class="croagimg" src="/i/PCM/croag.webp?v=2000">
|
|
</marquee>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if p.award_count("toe", v) %}
|
|
{% if g.inferior_browser %}
|
|
<style>
|
|
.toeimg {
|
|
width: 100px !important;
|
|
height: auto !important;
|
|
}
|
|
@media (max-width: 992px) {
|
|
.toeimg {
|
|
width: 30px !important;
|
|
height: auto !important;
|
|
}
|
|
}
|
|
|
|
.toe {
|
|
position:fixed;
|
|
z-index:9999;
|
|
pointer-events: none;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
@keyframes moveX {
|
|
from {} to {transform: translateX(98vw)}
|
|
}
|
|
|
|
@keyframes moveY {
|
|
from {} to {transform: translateY(90vh)}
|
|
}
|
|
|
|
.toe1 {
|
|
animation: moveX 4s linear 0s infinite alternate !important;
|
|
animation-delay:0s;
|
|
}
|
|
.toe1 > img {
|
|
animation: moveY 6.8s linear 0s infinite alternate !important;
|
|
}
|
|
</style>
|
|
<div class="toe toe1" height="100%" width="100%">
|
|
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
|
</div>
|
|
|
|
{% if p.award_count("toe", v) > 1 %}
|
|
<style>
|
|
.toe2 {
|
|
animation: moveX 5s linear 0s infinite alternate !important;
|
|
animation-delay:1s;
|
|
}
|
|
.toe2 > img {
|
|
animation: moveY 8s linear 0s infinite alternate !important;
|
|
animation-delay:1s;
|
|
}
|
|
</style>
|
|
<div class="toe toe2" height="100%" width="100%">
|
|
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if p.award_count("toe", v) > 2 %}
|
|
<style>
|
|
.toe3 {
|
|
animation: moveX 4s linear 0s infinite alternate !important;
|
|
animation-delay:2s;
|
|
}
|
|
.toe3 > img {
|
|
animation: moveY 5s linear 0s infinite alternate !important;
|
|
animation-delay:2s;
|
|
}
|
|
</style>
|
|
<div class="toe toe3" height="100%" width="100%">
|
|
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if p.award_count("toe", v) > 3 %}
|
|
<style>
|
|
.toe4 {
|
|
animation: moveX 5s linear 0s infinite alternate !important;
|
|
animation-delay:3s;
|
|
}
|
|
.toe4 > img {
|
|
animation: moveY 6.8s linear 0s infinite alternate !important;
|
|
animation-delay:3s;
|
|
}
|
|
</style>
|
|
<div class="toe toe4" height="100%" width="100%">
|
|
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<style>
|
|
.toe {
|
|
position:fixed;
|
|
z-index:9999;
|
|
pointer-events: none;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
.toeimg {
|
|
width: 100px !important;
|
|
height: auto !important;
|
|
}
|
|
@media (max-width: 992px) {
|
|
.toeimg {
|
|
width: 30px !important;
|
|
height: auto !important;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="toe" height="100%" width="100%">
|
|
<marquee class="toe" scrollamount=10 behavior="alternate" direction="up" height="100%" width="100%">
|
|
<marquee direction="right" scrollamount=10 behavior="alternate" height="100%" width="100%">
|
|
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
|
</marquee>
|
|
</marquee>
|
|
</div>
|
|
|
|
{% if p.award_count("toe", v) > 1 %}
|
|
<marquee class="toe" scrollamount=10 behavior="alternate" direction="down" height="100%">
|
|
<marquee direction="right" scrollamount=10 behavior="alternate" width="100%">
|
|
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
|
</marquee>
|
|
</marquee>
|
|
{% endif %}
|
|
|
|
{% if p.award_count("toe", v) > 2 %}
|
|
<marquee class="toe" scrollamount=10 behavior="alternate" direction="up" height="100%">
|
|
<marquee direction="left" scrollamount=10 behavior="alternate" width="100%">
|
|
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
|
</marquee>
|
|
</marquee>
|
|
{% endif %}
|
|
|
|
{% if p.award_count("toe", v) > 3 %}
|
|
<marquee class="toe" scrollamount=10 behavior="alternate" direction="down" height="100%">
|
|
<marquee direction="left" scrollamount=10 behavior="alternate" width="100%">
|
|
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
|
</marquee>
|
|
</marquee>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if p.award_count("crab", v) %}
|
|
<script>
|
|
let audio = new Audio('/assets/media/crab.mp3');
|
|
audio.loop=true;
|
|
|
|
audio.play();
|
|
window.addEventListener('click', () => {
|
|
if (audio.paused) audio.play();
|
|
}, {once : true});
|
|
|
|
prepare_to_pause(audio)
|
|
</script>
|
|
{% endif %}
|