add timer

readyplayerme · Oct 3, 2024 · ff4ebec · ff4ebec
1 parent 199f024
commit ff4ebec
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 8 deletions.
diff --git a/src/js/app.js b/src/js/app.js
@@ -6,6 +6,8 @@ import HeaderToggle from './app/HeaderToggle';
 import Cookies from 'js-cookie';
 import Accordion from './app/Accordion';
 
+
+
 class App {
     constructor() {
         this.DOM = createDOM();
@@ -74,8 +76,29 @@ class App {
 	}
 
     init = () => {
-        /* this.setVh();
-		this.setBaseFontSize(); */
+		const countdownDate = new Date("October 8, 2024 17:00:00").getTime();
+		const leadingZero = (v) => v < 10 ? '0' + v.toString() : v;
+		const count = () => {
+			const now = new Date().getTime(); // Текущее время
+			const timeRemaining = countdownDate - now; // Оставшееся время
+
+			const totalHours = Math.floor(timeRemaining / (1000 * 60 * 60)); // Общее количество часов
+			const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
+			const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
+
+			this.DOM.hours.innerText = leadingZero(totalHours);
+			this.DOM.mins.innerText = leadingZero(minutes);
+			this.DOM.secs.innerText = leadingZero(seconds);
+
+			// Если время истекло
+			if (timeRemaining < 0) {
+				clearInterval(updateTimer);
+				console.log("Время вышло!");
+			}
+		}
+		const updateTimer = setInterval(count, 1000);
+
+		count();
 
 		setTimeout(() => {
             this.setHeaderScrollClass(this.scroll);

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -101,17 +101,17 @@ export default async ({ data }) => {
 
                                 <div class="intro__countdown">
                                     <div class="countdown">
-                                        <div class="countdown__value">02</div>
+                                        <div class="countdown__value" data-elt="hours">--</div>
                                         <div class="countdown__divider">
                                             <svg class="svg-icon" viewBox="0 0 24 24" width="24" height="24"><use xlink:href="#svg-union"></use></svg>
                                         </div>
 
-                                        <div class="countdown__value">36</div>
+                                        <div class="countdown__value" data-elt="mins">--</div>
                                         <div class="countdown__divider">
                                             <svg class="svg-icon" viewBox="0 0 24 24" width="24" height="24"><use xlink:href="#svg-union"></use></svg>
                                         </div>
 
-                                        <div class="countdown__value">58</div>
+                                        <div class="countdown__value" data-elt="secs">--</div>
                                     </div>
                                 </div>
 

diff --git a/src/styles/blocks/countdown.scss b/src/styles/blocks/countdown.scss
@@ -13,8 +13,13 @@
 		-webkit-text-stroke: 1rem $violet;
 		background-clip: text;
 		-webkit-background-clip: text;
-	}
+		text-align: center;
 
+		&:not(:first-child) {
+			width: 90rem;
+		}
+	}
+
 	&__divider {
 		line-height: 0;
 		color: #2C2C30;
@@ -25,6 +30,24 @@
 	.countdown {
 		&__value {
 			font-size: 30rem;
+
+			&:not(:first-child) {
+				width: 65rem;
+			}
+		}
+	}
+}
+
+@media only screen and (max-width: $xxsmall) {
+	.countdown {
+		gap: 10rem;
+
+		&__value {
+			// font-size: 20rem;
+
+			&:not(:first-child) {
+				// width: 40rem;
+			}
 		}
 	}
 }
diff --git a/src/styles/blocks/intro.scss b/src/styles/blocks/intro.scss
@@ -12,12 +12,15 @@
 
 .intro {
 	// background: $black url(../images/intro-bg.png) 50% 0 no-repeat;
-	background-size: cover;
-	background-blend-mode: lighten;
+	background-color: $black;
+	// background-size: cover;
+	// background-blend-mode: lighten;
 	position: relative;
 	min-height: calc(var(--vh, 1vh)* 100);
 
 	video {
+		position: relative;
+		right: -30vw;
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
@@ -29,6 +32,8 @@
 		right: 0;
 		bottom: 0;
 		left: 0;
+		overflow: hidden;
+		background-color: #000;
 
 		&::before {
 			content: '';
@@ -140,6 +145,10 @@
 
 @media only screen and (max-width: $small) {
 	.intro {
+		video {
+			height: 60%;
+		}
+
 		&__wrap {
 			padding: 100rem 0 32rem;
 		}