New things + new event
This commit is contained in:
parent
c1a03dcc5b
commit
969052da02
56
index.html
56
index.html
|
|
@ -8,12 +8,11 @@
|
|||
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="countdown-title">До нового <span id="future_year"></span> года осталось:</h1>
|
||||
<h1 id="countdown-title"></h1>
|
||||
<div class="modal" tabindex="-1" role="dialog" id="about">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
|
|
@ -24,23 +23,39 @@
|
|||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Данный сайт не сохраняет никакие cookie и использует только время вашего устройства.</p>
|
||||
<p>Автор сайта: <a href="https://t.me/dan63047">dan63047</a></p>
|
||||
<div id="about-modal-ru">
|
||||
<p>Данный сайт не сохраняет никакие cookie и использует только время вашего устройства.</p>
|
||||
<p>Автор сайта: <a href="https://t.me/dan63047">dan63047</a></p>
|
||||
</div>
|
||||
<div id="about-modal-en" style="display: none;">
|
||||
<p>This site does not store any cookies and only uses your device's time.</p>
|
||||
<p>Author: <a href="https://t.me/dan63047">dan63047</a></p>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#debug"
|
||||
aria-expanded="false" aria-controls="collapseExample">
|
||||
Дебаг информация
|
||||
Debug
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="debug">
|
||||
<div class="card card-body">
|
||||
<div class="incard_l">
|
||||
<div class="incard_l" id="incard-ru">
|
||||
Текущее время:<br>
|
||||
Отсчёт до:<br>
|
||||
Осталось миллисекунд:<br>
|
||||
Полный таймер:<br>
|
||||
Фон:<br>
|
||||
Фаза фона:
|
||||
</div>
|
||||
<div class="incard_l" id="incard-en" style="display: none;">
|
||||
Current time:<br>
|
||||
Counting to:<br>
|
||||
Milliseconds left:<br>
|
||||
Full timer:<br>
|
||||
Background:<br>
|
||||
Bg phase:
|
||||
</div>
|
||||
<div class="incard_r">
|
||||
<a id="curtime"></a><br>
|
||||
<a id="endtime"></a><br>
|
||||
<a id="left"></a><br>
|
||||
<a id="fulltimer"></a><br>
|
||||
|
|
@ -55,7 +70,7 @@
|
|||
</div>
|
||||
|
||||
<div id="countdown" class="countdown">
|
||||
<noscript>Ваш браузер запрещает исполнение скриптов. Включите Javascript, чтобы увидеть обратный отсчёт</noscript>
|
||||
<noscript>Turn on Javascript<br>Включите Javascript</noscript>
|
||||
<div class="countdown-inner">
|
||||
<span class="didts" id="num1"></span>
|
||||
</div>
|
||||
|
|
@ -68,7 +83,32 @@
|
|||
<span class="didts" id="num3"></span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="nav-link" data-toggle="modal" href='#about' style="color: #ffffff; text-decoration: underline; width: 100%; position: absolute; bottom: 0;">О странице</a>
|
||||
<footer>
|
||||
<a class="nav-link" id="about-ru" data-toggle="modal" href='#about' style="color: inherit;">О странице</a>
|
||||
<a class="nav-link" id="about-en" data-toggle="modal" href='#about' style="color: inherit; display: none;">About site</a>
|
||||
<div class="dropdown mr-3">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="langDropdownMenu" data-toggle="dropdown" aria-expanded="false" style="background: transparent;">
|
||||
Language
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="langDropdownMenu">
|
||||
<a class="dropdown-item" href="#" onclick="languageSwitcher('ru')">Русский</a>
|
||||
<a class="dropdown-item" href="#" onclick="languageSwitcher('en')">English</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="eventDropdownMenu" data-toggle="dropdown" aria-expanded="false" style="background: transparent;">
|
||||
<span id="event-title-en" style="color: inherit; display: none;">Event</span><span id="event-title-ru" style="color: inherit;">Событие</span>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="eventDropdownMenu">
|
||||
<a class="dropdown-item event-names-ru" href="#" onclick="eventSwitcher('ny')">Новый год</a>
|
||||
<a class="dropdown-item event-names-ru" href="#" onclick="eventSwitcher('ch')">Рождество христово</a>
|
||||
<a class="dropdown-item event-names-en" href="#" style="display: none;" onclick="eventSwitcher('ny')">New Year</a>
|
||||
<a class="dropdown-item event-names-en" href="#" style="display: none;" onclick="eventSwitcher('ch')">Christmas</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="nav-link" id="footer-ru" onclick="hide_footer()">Спрятать футер</a>
|
||||
<a class="nav-link" id="footer-en" onclick="hide_footer()" style="display: none;">Hide footer</a>
|
||||
</footer>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
||||
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
||||
crossorigin="anonymous"></script>
|
||||
|
|
|
|||
51
main.css
51
main.css
|
|
@ -1,16 +1,39 @@
|
|||
@font-face {
|
||||
font-family: 'Eurostile Round';
|
||||
src: local('Eurostile Round Medium'), local('EurostileRound-Medium'), url('https://dan63.by/static/EurostileRound-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Eurostile Round Extended';
|
||||
src: local('Eurostile Round Extended Regular'), local('EurostileRoundExtended-Regular'), url('https://dan63.by/static/EurostileRoundExtended-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Eurostile Round Extended';
|
||||
src: local('Eurostile Round Extended Black'), local('EurostileRoundExtended-Black'), url('https://dan63.by/static/EurostileRoundExtended-Black.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Open Sans";
|
||||
font-weight: 100;
|
||||
font-family: "Eurostile Round";
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
align-content: center;
|
||||
text-shadow: 0px 0px 4px #fff9, 0px 0px 10px #0004, 0px 0px 20px #aaa4, 0px 0px 100px #fff4;
|
||||
}
|
||||
|
||||
.countdown-title {
|
||||
#countdown-title{
|
||||
color: #fff;
|
||||
font-weight: 100;
|
||||
font-family: 'Eurostile Round Extended';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 40px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -18,11 +41,13 @@ body {
|
|||
}
|
||||
|
||||
.countdown {
|
||||
font-family: sans-serif monospace;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
font-family: 'Eurostile Round Extended';
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
align-items: baseline;
|
||||
font-size: 30px;
|
||||
width: max-content;
|
||||
margin: auto;
|
||||
|
|
@ -33,7 +58,7 @@ body {
|
|||
color: #fff;
|
||||
}
|
||||
.countdown-inner {
|
||||
font-size: 20vw;
|
||||
font-size: 12vw;
|
||||
}
|
||||
.captions{
|
||||
display: flex;
|
||||
|
|
@ -55,3 +80,13 @@ body {
|
|||
#separator1, #separator2{
|
||||
transition: 250ms ease-in-out;
|
||||
}
|
||||
footer{
|
||||
color: #ffffff;
|
||||
text-decoration: underline;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
128
script.js
128
script.js
|
|
@ -1,4 +1,30 @@
|
|||
const relative_to_local = new Intl.RelativeTimeFormat("ru", {numeric: 'auto', style: 'long'});
|
||||
let relative_to_local = new Intl.RelativeTimeFormat("ru", {numeric: 'auto', style: 'long'});
|
||||
let language_user = window.navigator ? (window.navigator.language ||window.navigator.systemLanguage || window.navigator.userLanguage) : "ru";
|
||||
language_user = language_user.substr(0, 2).toLowerCase();
|
||||
let language_site = (language_user == "ru" || language_user == "by" || language_user == "ua") ? "ru" : "en";
|
||||
let timeinterval;
|
||||
let d_for_setting = new Date();
|
||||
let future_year = (d_for_setting.getMonth() == 0 && d_for_setting.getDate() < 7) ? d_for_setting.getFullYear() : d_for_setting.getFullYear() + 1
|
||||
let event_code = "ny"
|
||||
let site_h1 = document.getElementById("countdown-title")
|
||||
let titles = {
|
||||
"ny-ru": "До нового " + future_year + " осталось:",
|
||||
"ny-en": "Until New Year " + future_year + " left:",
|
||||
"ch-ru": "До рождества " + (future_year-1) + " осталось:",
|
||||
"ch-en": "Until Christmas " + (future_year-1) + " left:"
|
||||
};
|
||||
let titles_timer_gone = {
|
||||
"ny-ru": "C новым годом!!!\nСчасливого " + future_year + " года!",
|
||||
"ny-en": "Happy New Year!\nHave a great year " + future_year + "!",
|
||||
"ch-ru": "C рождеством!!!",
|
||||
"ch-en": "Merry Christmas!!!"
|
||||
};
|
||||
let short_titles = {
|
||||
"ny-ru": "НГ ",
|
||||
"ny-en": "NY ",
|
||||
"ch-ru": "Рождество ",
|
||||
"ch-en": "Christmas "
|
||||
}
|
||||
function getTimeRemaining(endtime) {
|
||||
var t = Date.parse(endtime) - Date.now();
|
||||
var mseconds = t % 1000;
|
||||
|
|
@ -17,7 +43,76 @@ function getTimeRemaining(endtime) {
|
|||
'mseconds': mseconds
|
||||
};
|
||||
}
|
||||
let phases = ["Переходная (с ночи на день)", "Дневная", "Переходная (со дня на ночь)", "Ночная"]
|
||||
|
||||
function eventSwitcher(event_c){
|
||||
event_code = event_c;
|
||||
switch(event_c){
|
||||
case "ny":
|
||||
clearInterval(timeinterval);
|
||||
interval = initializeClock("Jan 01 " + future_year + " 00:00:00");
|
||||
break;
|
||||
case "ch":
|
||||
clearInterval(timeinterval);
|
||||
interval = initializeClock('Dec 25 ' + new Date().getFullYear() + ' 00:00:00');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function languageSwitcher(lang_code){
|
||||
switch (lang_code) {
|
||||
case "ru":
|
||||
$("#countdown-title-en").css("display", "none");
|
||||
$("#countdown-title-ru").css("display", "block");
|
||||
$("#about-modal-en").css("display", "none");
|
||||
$("#about-modal-ru").css("display", "block");
|
||||
$("#incard-en").css("display", "none");
|
||||
$("#incard-ru").css("display", "block");
|
||||
$("#about-en").css("display", "none");
|
||||
$("#about-ru").css("display", "block");
|
||||
$("#timer-mode-text-en").css("display", "none");
|
||||
$("#timer-mode-text-ru").css("display", "initial");
|
||||
$("#footer-en").css("display", "none");
|
||||
$("#footer-ru").css("display", "block");
|
||||
$(".event-names-ru").css("display", "block");
|
||||
$(".event-names-en").css("display", "none");
|
||||
$("#event-title-ru").css("display", "unset");
|
||||
$("#event-title-en").css("display", "none");
|
||||
language_site = "ru";
|
||||
break;
|
||||
case "en":
|
||||
$("#countdown-title-ru").css("display", "none");
|
||||
$("#countdown-title-en").css("display", "block");
|
||||
$("#about-modal-ru").css("display", "none");
|
||||
$("#about-modal-en").css("display", "block");
|
||||
$("#incard-ru").css("display", "none");
|
||||
$("#incard-en").css("display", "block");
|
||||
$("#about-ru").css("display", "none");
|
||||
$("#about-en").css("display", "block");
|
||||
$("#timer-mode-text-ru").css("display", "none");
|
||||
$("#timer-mode-text-en").css("display", "initial");
|
||||
$("#footer-ru").css("display", "none");
|
||||
$("#footer-en").css("display", "block");
|
||||
$(".event-names-ru").css("display", "none");
|
||||
$(".event-names-en").css("display", "block");
|
||||
$("#event-title-ru").css("display", "none");
|
||||
$("#event-title-en").css("display", "unset");
|
||||
language_site = "en";
|
||||
break;
|
||||
}
|
||||
relative_to_local = new Intl.RelativeTimeFormat(lang_code, {numeric: 'auto', style: 'long'});
|
||||
site_h1.innerHTML = titles[event_code+"-"+language_site]
|
||||
}
|
||||
languageSwitcher(language_site);
|
||||
|
||||
function hide_footer(){
|
||||
if ($("footer").css("display") == "none"){
|
||||
$("footer").css("display", "block")
|
||||
}else{
|
||||
$("footer").css("display", "none")
|
||||
}
|
||||
}
|
||||
|
||||
let phases = {ru: ["Переходная (с ночи на день)", "Дневная", "Переходная (со дня на ночь)", "Ночная"], en: ["Transitional (from night to day)", "Day", "Transitional (from day to night)", "Night"]}
|
||||
function changeBackgroundColor() {
|
||||
let t = new Date();
|
||||
let local_t = t.getTime() - t.getTimezoneOffset()*60000 - 180*60000;
|
||||
|
|
@ -38,7 +133,7 @@ function changeBackgroundColor() {
|
|||
document.getElementsByTagName("body")[0].style.backgroundColor = "#"+("0"+Math.round(currect[0]).toString(16)).slice(-2)+("0"+Math.round(currect[1]).toString(16)).slice(-2)+("0"+Math.round(currect[2]).toString(16)).slice(-2);
|
||||
var num_f = 2;
|
||||
document.getElementById("color").innerHTML = "R:" + currect[0].toFixed(num_f) + "; G:" + currect[1].toFixed(num_f) + "; B:" + currect[2].toFixed(num_f);
|
||||
document.getElementById("phase").innerHTML = phases[Math.trunc(color_phase)] + ", " + ((color_phase % 1)*100).toFixed(num_f)+"%"
|
||||
document.getElementById("phase").innerHTML = phases[language_site][Math.trunc(color_phase)] + ", " + ((color_phase % 1)*100).toFixed(num_f)+"%"
|
||||
}
|
||||
|
||||
function initializeClock(endtime) {
|
||||
|
|
@ -50,59 +145,58 @@ function initializeClock(endtime) {
|
|||
var debug1 = document.getElementById('endtime');
|
||||
var debug2 = document.getElementById('left');
|
||||
var debug3 = document.getElementById('fulltimer');
|
||||
var debug4 =document.getElementById('curtime');
|
||||
var time_to = new Date(endtime)
|
||||
var updateTime = 1000 / 60;
|
||||
|
||||
site_h1.innerHTML = titles[event_code+"-"+language_site]
|
||||
function updateClock() {
|
||||
var t = getTimeRemaining(endtime);
|
||||
if (t.days > 0) {
|
||||
num1.innerHTML = t.days;
|
||||
dots1.innerHTML = "д.   ";
|
||||
dots1.style.fontSize = "3rem";
|
||||
dots1.innerHTML = (language_site == "ru" ? "д.   " : "d.   ");
|
||||
dots1.style.fontSize = "3vw";
|
||||
dots1.style.width = dots2.style.width;
|
||||
num2.innerHTML = ('0' + t.hours).slice(-2);
|
||||
num3.innerHTML = ('0' + t.minutes).slice(-2);
|
||||
document.title = "НГ " + relative_to_local.format(t.days, "day");
|
||||
document.title = short_titles[event_code+"-"+language_site] + relative_to_local.format(t.days, "day");
|
||||
}
|
||||
else if (t.hours > 0) {
|
||||
num1.innerHTML = ('0' + t.hours).slice(-2);
|
||||
dots1.innerHTML = ":";
|
||||
dots1.style.fontSize = "1em";
|
||||
dots1.style.fontSize = "12vw";
|
||||
num2.innerHTML = ('0' + t.minutes).slice(-2);
|
||||
num3.innerHTML = ('0' + t.seconds).slice(-2);
|
||||
document.title = "НГ " + relative_to_local.format(t.hours, "hour");
|
||||
document.title = short_titles[event_code+"-"+language_site] + relative_to_local.format(t.hours, "hour");
|
||||
}
|
||||
else if (t.total > 0) {
|
||||
num1.innerHTML = ('0' + t.minutes).slice(-2);
|
||||
num2.innerHTML = ('0' + t.seconds).slice(-2);
|
||||
num3.innerHTML = ('0' + t.seconds1_100).slice(-2);
|
||||
dots2.innerHTML = ".";
|
||||
document.title = "НГ " + ((t.total <= 60000) ? relative_to_local.format(t.seconds, "second") : relative_to_local.format(t.minutes, "minute"));
|
||||
document.title = short_titles[event_code+"-"+language_site] + ((t.total <= 60000) ? relative_to_local.format(t.seconds, "second") : relative_to_local.format(t.minutes, "minute"));
|
||||
}
|
||||
else {
|
||||
num1.innerHTML = "00";
|
||||
num2.innerHTML = "00";
|
||||
num3.innerHTML = "00";
|
||||
clearInterval(timeinterval);
|
||||
document.title = "С новым годом!";
|
||||
document.getElementsByClassName("countdown-title")[0].innerHTML = "C новым годом!!!\nСчасливого " + future_year + " года!";
|
||||
document.title = site_h1.innerHTML = titles_timer_gone[event_code+"-"+language_site]
|
||||
setTimeout(function() {
|
||||
$('body').fireworks();
|
||||
});
|
||||
};
|
||||
dots1.style.color = ((t.seconds % 2) || (t.total <= 3600000) || (t.days > 0)) ? "#fff":"#fff0";
|
||||
dots2.style.color = ((t.seconds % 2) || (t.total <= 3600000)) ? "#fff":"#fff0";
|
||||
debug2.innerHTML = t.total.toLocaleString('ru');
|
||||
debug2.innerHTML = t.total.toLocaleString(language_site);
|
||||
debug3.innerHTML = t.days + ':' + ('0' + t.hours).slice(-2) + ':' + ('0' + t.minutes).slice(-2) + ':' + ('0' + t.seconds).slice(-2) + '.' + ('00' + t.mseconds).slice(-3);
|
||||
debug4.innerHTML = new Date().toLocaleString(language_site);
|
||||
}
|
||||
debug1.innerHTML = time_to.toLocaleString();
|
||||
updateClock();
|
||||
var timeinterval = setInterval(updateClock, updateTime);
|
||||
timeinterval = setInterval(updateClock, updateTime);
|
||||
}
|
||||
|
||||
let d_for_setting = new Date();
|
||||
let future_year = (d_for_setting.getMonth() == 0 && d_for_setting.getDate() < 7) ? d_for_setting.getFullYear() : d_for_setting.getFullYear() + 1
|
||||
document.getElementById("future_year").innerHTML = future_year;
|
||||
initializeClock("Jan 01 " + future_year + " 00:00:00");
|
||||
//initializeClock("Apr 27 2022 23:24:00");
|
||||
//initializeClock("Nov 08 2022 23:20:00");
|
||||
setInterval(changeBackgroundColor, 1000/60);
|
||||
Loading…
Reference in New Issue