dan63
/
Counter-to-new-year
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New things + new event

This commit is contained in:
dan63047 2022-11-08 23:25:04 +03:00
parent c1a03dcc5b
commit 969052da02
3 changed files with 202 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
index.html
View File

@ -8,12 +8,11 @@
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<meta name="viewport" content="width=device-width"> <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"> <link rel="stylesheet" type="text/css" href="main.css">
</head> </head>
<body> <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" tabindex="-1" role="dialog" id="about">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
@ -24,23 +23,39 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div id="about-modal-ru">
<p>Данный сайт не сохраняет никакие cookie и использует только время вашего устройства.</p> <p>Данный сайт не сохраняет никакие cookie и использует только время вашего устройства.</p>
<p>Автор сайта: <a href="https://t.me/dan63047">dan63047</a></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" <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#debug"
aria-expanded="false" aria-controls="collapseExample"> aria-expanded="false" aria-controls="collapseExample">
Дебаг информация Debug
</button> </button>
</p> </p>
<div class="collapse" id="debug"> <div class="collapse" id="debug">
<div class="card card-body"> <div class="card card-body">
<div class="incard_l"> <div class="incard_l" id="incard-ru">
Текущее время:<br>
Отсчёт до:<br> Отсчёт до:<br>
Осталось миллисекунд:<br> Осталось миллисекунд:<br>
Полный таймер:<br> Полный таймер:<br>
Фон:<br> Фон:<br>
Фаза фона: Фаза фона:
</div> </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"> <div class="incard_r">
<a id="curtime"></a><br>
<a id="endtime"></a><br> <a id="endtime"></a><br>
<a id="left"></a><br> <a id="left"></a><br>
<a id="fulltimer"></a><br> <a id="fulltimer"></a><br>
@ -55,7 +70,7 @@
</div> </div>
<div id="countdown" class="countdown"> <div id="countdown" class="countdown">
<noscript>Ваш браузер запрещает исполнение скриптов. Включите Javascript, чтобы увидеть обратный отсчёт</noscript> <noscript>Turn on Javascript<br>Включите Javascript</noscript>
<div class="countdown-inner"> <div class="countdown-inner">
<span class="didts" id="num1"></span> <span class="didts" id="num1"></span>
</div> </div>
@ -68,7 +83,32 @@
<span class="didts" id="num3"></span> <span class="didts" id="num3"></span>
</div> </div>
</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" <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>

51
main.css
View File

@ -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 { body {
text-align: center; text-align: center;
font-family: "Open Sans"; font-family: "Eurostile Round";
font-weight: 100; font-weight: 500;
font-style: normal;
display: grid; display: grid;
height: 100vh; height: 100vh;
background: #000; background: #000;
align-content: center; 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; color: #fff;
font-weight: 100; font-family: 'Eurostile Round Extended';
font-weight: normal;
font-style: normal;
font-size: 40px; font-size: 40px;
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -18,11 +41,13 @@ body {
} }
.countdown { .countdown {
font-family: sans-serif monospace;
color: #fff; color: #fff;
display: flex; display: flex;
font-weight: 400; flex-wrap: wrap;
text-align: center; font-family: 'Eurostile Round Extended';
font-weight: 900;
font-style: normal;
align-items: baseline;
font-size: 30px; font-size: 30px;
width: max-content; width: max-content;
margin: auto; margin: auto;
@ -33,7 +58,7 @@ body {
color: #fff; color: #fff;
} }
.countdown-inner { .countdown-inner {
font-size: 20vw; font-size: 12vw;
} }
.captions{ .captions{
display: flex; display: flex;
@ -55,3 +80,13 @@ body {
#separator1, #separator2{ #separator1, #separator2{
transition: 250ms ease-in-out; 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
View File

@ -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) { function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.now(); var t = Date.parse(endtime) - Date.now();
var mseconds = t % 1000; var mseconds = t % 1000;
@ -17,7 +43,76 @@ function getTimeRemaining(endtime) {
'mseconds': mseconds '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() { function changeBackgroundColor() {
let t = new Date(); let t = new Date();
let local_t = t.getTime() - t.getTimezoneOffset()*60000 - 180*60000; 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); 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; 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("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) { function initializeClock(endtime) {
@ -50,59 +145,58 @@ function initializeClock(endtime) {
var debug1 = document.getElementById('endtime'); var debug1 = document.getElementById('endtime');
var debug2 = document.getElementById('left'); var debug2 = document.getElementById('left');
var debug3 = document.getElementById('fulltimer'); var debug3 = document.getElementById('fulltimer');
var debug4 =document.getElementById('curtime');
var time_to = new Date(endtime) var time_to = new Date(endtime)
var updateTime = 1000 / 60; var updateTime = 1000 / 60;
site_h1.innerHTML = titles[event_code+"-"+language_site]
function updateClock() { function updateClock() {
var t = getTimeRemaining(endtime); var t = getTimeRemaining(endtime);
if (t.days > 0) { if (t.days > 0) {
num1.innerHTML = t.days; num1.innerHTML = t.days;
dots1.innerHTML = "д. &#8201&#8201"; dots1.innerHTML = (language_site == "ru" ? "д. &#8201&#8201" : "d. &#8201&#8201");
dots1.style.fontSize = "3rem"; dots1.style.fontSize = "3vw";
dots1.style.width = dots2.style.width; dots1.style.width = dots2.style.width;
num2.innerHTML = ('0' + t.hours).slice(-2); num2.innerHTML = ('0' + t.hours).slice(-2);
num3.innerHTML = ('0' + t.minutes).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) { else if (t.hours > 0) {
num1.innerHTML = ('0' + t.hours).slice(-2); num1.innerHTML = ('0' + t.hours).slice(-2);
dots1.innerHTML = ":"; dots1.innerHTML = ":";
dots1.style.fontSize = "1em"; dots1.style.fontSize = "12vw";
num2.innerHTML = ('0' + t.minutes).slice(-2); num2.innerHTML = ('0' + t.minutes).slice(-2);
num3.innerHTML = ('0' + t.seconds).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) { else if (t.total > 0) {
num1.innerHTML = ('0' + t.minutes).slice(-2); num1.innerHTML = ('0' + t.minutes).slice(-2);
num2.innerHTML = ('0' + t.seconds).slice(-2); num2.innerHTML = ('0' + t.seconds).slice(-2);
num3.innerHTML = ('0' + t.seconds1_100).slice(-2); num3.innerHTML = ('0' + t.seconds1_100).slice(-2);
dots2.innerHTML = "."; 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 { else {
num1.innerHTML = "00"; num1.innerHTML = "00";
num2.innerHTML = "00"; num2.innerHTML = "00";
num3.innerHTML = "00"; num3.innerHTML = "00";
clearInterval(timeinterval); clearInterval(timeinterval);
document.title = "С новым годом!"; document.title = site_h1.innerHTML = titles_timer_gone[event_code+"-"+language_site]
document.getElementsByClassName("countdown-title")[0].innerHTML = "C новым годом!!!\nСчасливого " + future_year + " года!";
setTimeout(function() { setTimeout(function() {
$('body').fireworks(); $('body').fireworks();
}); });
}; };
dots1.style.color = ((t.seconds % 2) || (t.total <= 3600000) || (t.days > 0)) ? "#fff":"#fff0"; 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"; 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); 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(); debug1.innerHTML = time_to.toLocaleString();
updateClock(); 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("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); setInterval(changeBackgroundColor, 1000/60);