MarseyWorld/files/templates/awards.html

97 lines
3.3 KiB
HTML

{% if SITE_NAME == 'PCM' %}
{% set wholesome = '/i/wholesome.webp' %}
{% else %}
{% set wholesome = '/e/marseywholesome.webp' %}
{% endif %}
{% for i in range(min(p.award_count("wholesome", v), 4)) %}
{% if g.inferior_browser %}
<div class="seal seal{{i+1}}" height="100%" width="100%">
<img alt=":#marseywholesome:" class="sealimg" src="{{wholesome}}">
</div>
{% else %}
{% set seal_vertical = 'up' if (i % 2) == 0 else 'down' %}
{% set seal_horizontal = 'right' if i < 2 else 'left' %}
<marquee class="seal" scrollamount=10 behavior="alternate" direction="{{seal_vertical}}" height="100%">
<marquee direction="{{seal_horizontal}}" scrollamount=10 behavior="alternate" width="100%">
<img alt=":#marseywholesome:" class="sealimg" src="{{wholesome}}">
</marquee>
</marquee>
{% endif %}
{% endfor %}
{% for i in range(min(p.award_count("train", v), 4)) %}
{% set train_dir = 'left' if (i % 2) == 0 else 'right' %}
{% set train_mirror = ' mirrored' if (i % 2) == 0 else '' %}
<marquee class="train train{{i+1}}" direction="{{train_dir}}" scrollamount=10 width="100%">
<img alt=":#marseytrain:" class="trainimg{{train_mirror}}" src="/e/marseytrain.webp">
</marquee>
{% endfor %}
{% for i in range(min(p.award_count("scooter", v), 4)) %}
{% set scooter_dir = 'right' if (i % 2) == 0 else 'left' %}
{% set scooter_mirror = '' if (i % 2) == 0 else ' mirrored' %}
<marquee class="train train{{(i + 2) % 4 + 1}}" direction="{{scooter_dir}}" scrollamount=10 width="100%">
<img alt=":#marseyscooter:" class="scooterimg{{scooter_mirror}}" src="/e/marseyscooter.webp">
</marquee>
{% endfor %}
{% if p.award_count("tilt", v) %}
<style>
@keyframes post-tilt {
0% {transform: rotate(0deg);}
25% {transform: rotate({{p.award_count("tilt", v)}}deg);}
75% {transform: rotate(-{{p.award_count("tilt", v)}}deg);}
100% {transform: rotate(0deg);}
}
@media (max-width: 720px) {
@keyframes post-tilt {
0% {transform: rotate(0deg);}
25% {transform: rotate({{p.award_count("tilt", v)/4}}deg);}
75% {transform: rotate(-{{p.award_count("tilt", v)/4}}deg);}
100% {transform: rotate(0deg);}
}
}
#post-root {
animation-name: post-tilt;
animation-duration: 60s !important;
animation-iteration-count: infinite !important;
animation-direction: alternate !important;
animation-timing-function: linear !important;
}
</style>
{% endif %}
{% if p.award_count("confetti", v) %}
<div id="post-award-confetti"></div>
{% endif %}
{% if p.award_count("firework", v) %}
<script defer src="{{'js/fireworks.js' | asset}}"></script>
{% for i in range(min(p.award_count("firework", v), 4)) %}
<div class="firework">
<img src="">
</div>
{% endfor %}
{% endif %}
{% if p.award_count("ricardo", v) %}
<script defer src="{{'js/ricardo.js' | asset}}"></script>
{% for i in range(min(p.award_count("ricardo", v), 3)) %}
<div id="ricardo{{i+1}}" class="ricardo">
<img src="/i/ricardo{{i+1}}.webp">
</div>
{% endfor %}
{% endif %}
{% if p.award_count("shit", v) %}
<script defer src="{{'js/vendor/critters.js' | asset}}"></script>
<script defer src="{{'js/bugs.js' | asset}}"></script>
{% endif %}
{% if p.award_count("fireflies", v) %}
<script defer src="{{'js/vendor/critters.js' | asset}}"></script>
<script defer src="{{'js/fireflies.js' | asset}}"></script>
{% endif %}