-
+
+ Текущее время:
Отсчёт до:
Осталось миллисекунд:
Полный таймер:
Фон:
Фаза фона:
+
+ Current time:
+ Counting to:
+ Milliseconds left:
+ Full timer:
+ Background:
+ Bg phase:
+
-
+
@@ -68,7 +83,32 @@
-
О странице
+
diff --git a/main.css b/main.css
index 6c33302..e14b190 100644
--- a/main.css
+++ b/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;
@@ -54,4 +79,14 @@ 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;
}
\ No newline at end of file
diff --git a/script.js b/script.js
index e9173fe..cb02492 100644
--- a/script.js
+++ b/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);
\ No newline at end of file