From 969052da02e5d1a6becdded93ce75e430d392ea6 Mon Sep 17 00:00:00 2001
From: dan63047 <dan63047@gmail.com>
Date: Tue, 8 Nov 2022 23:25:04 +0300
Subject: [PATCH] New things + new event

---
 index.html |  56 +++++++++++++++++++----
 main.css   |  51 +++++++++++++++++----
 script.js  | 128 ++++++++++++++++++++++++++++++++++++++++++++++-------
 3 files changed, 202 insertions(+), 33 deletions(-)
diff --git a/index.html b/index.html
index b9fa430..4e88073 100644
--- a/index.html
+++ b/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>
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 = "д. &#8201&#8201";
-            dots1.style.fontSize = "3rem";
+            dots1.innerHTML = (language_site == "ru" ? "д. &#8201&#8201" : "d. &#8201&#8201");
+            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
