Move the countdown on the landing page. Flashii CD is still available on https://abyss.flash.moe/flashiicd.html with all the extra hash switches.
This commit is contained in:
parent
c8593b7414
commit
3b2552523a
2 changed files with 180 additions and 5 deletions
|
|
@ -1,5 +1,180 @@
|
|||
{% extends '@nova/home/master.twig' %}
|
||||
|
||||
{% block content %}
|
||||
test
|
||||
{% set banner_classes = 'banner--insane landing__banner' %}
|
||||
{% set banner = 'https://static.flash.moe/images/banner-clouds.png' %}
|
||||
|
||||
{% block banner_content %}
|
||||
<div id="countdown"></div>
|
||||
<style>
|
||||
#countdown {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.countdown-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform .5s;
|
||||
}
|
||||
|
||||
.countdown-digit {
|
||||
background: url('https://static.flash.moe/images/countdown-sprite.png');
|
||||
width: 68px;
|
||||
height: 80px;
|
||||
display: inline-block;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
transition: background-position-y .2s;
|
||||
}
|
||||
|
||||
.countdown-digit[data-digit="0"] { background-position: 0px 0px; }
|
||||
.countdown-digit[data-digit="1"] { background-position: 0px -86px; }
|
||||
.countdown-digit[data-digit="2"] { background-position: 0px -172px; }
|
||||
.countdown-digit[data-digit="3"] { background-position: 0px -259px; }
|
||||
.countdown-digit[data-digit="4"] { background-position: 0px -345px; }
|
||||
.countdown-digit[data-digit="5"] { background-position: 0px -432px; }
|
||||
.countdown-digit[data-digit="6"] { background-position: 0px -518px; }
|
||||
.countdown-digit[data-digit="7"] { background-position: 0px -604px; }
|
||||
.countdown-digit[data-digit="8"] { background-position: 0px -691px; }
|
||||
.countdown-digit[data-digit="9"] { background-position: 0px -777px; }
|
||||
|
||||
.countdown-digit[data-digit=";"] { transition: background-position-y 0s; background-position: -56px 0px; }
|
||||
.countdown-digit[data-digit=":"] { transition: background-position-y 0s; background-position: -56px -86px; }
|
||||
.countdown-digit[data-digit=","] { transition: background-position-y 0s; background-position: -56px -172px; }
|
||||
.countdown-digit[data-digit="."] { transition: background-position-y 0s; background-position: -56px -259px; }
|
||||
.countdown-digit[data-digit="+"] { transition: background-position-y 0s; background-position: -56px -345px; }
|
||||
.countdown-digit[data-digit="-"] { transition: background-position-y 0s; background-position: -56px -432px; }
|
||||
.countdown-digit[data-digit=" "] { transition: background-position-y 0s; background-position: -56px -518px; }
|
||||
</style>
|
||||
<script>
|
||||
var countdownTarget,
|
||||
countdownDigits = [],
|
||||
countdownContainer,
|
||||
countdownInterval,
|
||||
countdownFlashingTicks = 0,
|
||||
countdownLastString = '',
|
||||
countdownFinish,
|
||||
countdownIgnoreHidden = false;
|
||||
|
||||
function countdownSetup(container, target, finish) {
|
||||
countdownFinish = finish || null;
|
||||
countdownContainer = container;
|
||||
countdownTarget = target.getTime();
|
||||
countdownResize(10);
|
||||
countdownInterval = setInterval(function () { countdownUpdate(countdownIgnoreHidden); }, 100);
|
||||
countdownUpdate(countdownIgnoreHidden);
|
||||
}
|
||||
|
||||
function countdownStop() {
|
||||
clearInterval(countdownInterval);
|
||||
countdownResize(0);
|
||||
countdownTarget = 0;
|
||||
countdownContainer.parentNode.removeChild(countdownContainer);
|
||||
countdownFinish = null;
|
||||
}
|
||||
|
||||
function countdownResize(num) {
|
||||
if (num == countdownDigits.length)
|
||||
return;
|
||||
|
||||
if (num < countdownDigits.length) {
|
||||
num = countdownDigits.length - num;
|
||||
|
||||
for (var i = 0; i < num; i++)
|
||||
countdownContainer.removeChild(countdownDigits.pop());
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (num > countdownDigits.length) {
|
||||
num = num - countdownDigits.length;
|
||||
|
||||
for (var i = 0; i < num; i++) {
|
||||
var elem = document.createElement('div');
|
||||
elem.className = 'countdown-digit';
|
||||
elem.setAttribute('data-digit', i);
|
||||
countdownDigits.push(elem);
|
||||
countdownContainer.appendChild(elem);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function countdownUpdate(ignoreHidden) {
|
||||
if (!ignoreHidden && document.hidden)
|
||||
return;
|
||||
|
||||
var now = Date.now();
|
||||
|
||||
if (countdownTarget < now) {
|
||||
if ((typeof countdownFinish) === 'function') {
|
||||
countdownFinish.call();
|
||||
countdownFinish = null;
|
||||
}
|
||||
|
||||
countdownWrite(++countdownFlashingTicks % 10 < 5 ? '00:00:00' : '00 00 00');
|
||||
return;
|
||||
}
|
||||
|
||||
var milliseconds = now - countdownTarget;
|
||||
|
||||
var days = Math.ceil(milliseconds / 86400000);
|
||||
milliseconds -= days * 86400000;
|
||||
|
||||
var hours = Math.ceil(milliseconds / 3600000);
|
||||
milliseconds -= hours * 3600000;
|
||||
|
||||
var minutes = Math.ceil(milliseconds / 60000);
|
||||
milliseconds -= minutes * 60000;
|
||||
|
||||
var seconds = Math.ceil(milliseconds / 1000);
|
||||
milliseconds -= seconds * 1000;
|
||||
|
||||
var cdString = '';
|
||||
|
||||
if (days < 0)
|
||||
cdString += Math.abs(days) + ' ';
|
||||
|
||||
if (days < 0 || hours < 0)
|
||||
cdString += Math.abs(hours) + ':';
|
||||
|
||||
if (days < 0 || hours < 0 || minutes < 0)
|
||||
cdString += Math.abs(minutes).toString().padStart(2, '0') + ':';
|
||||
|
||||
cdString += Math.abs(seconds).toString().padStart(2, '0');
|
||||
|
||||
countdownWrite(cdString);
|
||||
|
||||
if (days >= 0 && hours >= 0 && minutes >= 0 && seconds <= 0) {
|
||||
var scale = 1;
|
||||
|
||||
if (seconds < 0)
|
||||
scale += 4 * Math.pow((60 + seconds) / 60, 2);
|
||||
|
||||
countdownContainer.style.transform = 'scale(' + scale + ')';
|
||||
}
|
||||
}
|
||||
|
||||
function countdownWrite(str) {
|
||||
if ((typeof str) !== 'string')
|
||||
str = str.toString();
|
||||
|
||||
countdownLastString = str;
|
||||
countdownResize(str.length);
|
||||
|
||||
for (var i = 0; i < str.length; i++)
|
||||
countdownDigits[i].setAttribute('data-digit', str[i]);
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
var container = document.createElement('div');
|
||||
container.className = 'countdown-container';
|
||||
document.getElementById('countdown').appendChild(container);
|
||||
countdownSetup(container, new Date("Mon, 1 27 2018 1:00:00 +0100"));
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -30,15 +30,15 @@
|
|||
|
||||
<div class="container__footer">
|
||||
<div class="container__footer-copyright">
|
||||
flash.moe 2013-{{ ''|date('Y') }} |
|
||||
<a href="https://flash.moe" class="container__footer-link">flash.moe 2013-{{ ''|date('Y') }}</a> |
|
||||
<a href="https://github.com/flashwave/misuzu/tree/{{ git_branch() }}" class="container__footer-link">{{ git_branch() }}</a>#<a href="https://github.com/flashwave/misuzu/commit/{{ git_hash(true) }}" class="container__footer-link">{{ git_hash() }}</a>
|
||||
</div>
|
||||
<div class="container__footer-links">
|
||||
{#<div class="container__footer-links">
|
||||
<a href="#" class="container__footer-link">Terms of Service</a>
|
||||
<a href="#" class="container__footer-link">Rules</a>
|
||||
<a href="#" class="container__footer-link">Contact</a>
|
||||
<a href="#" class="container__footer-link">Status</a>
|
||||
</div>
|
||||
</div>#}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue