diff --git a/src/js/app.js b/src/js/app.js
index 0de219b..e7a07ec 100644
--- 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
index 895b12b..6aebc68 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -101,17 +101,17 @@ export default async ({ data }) => {
-
02
+
--
-
36
+
--
-
58
+
--
diff --git a/src/styles/blocks/countdown.scss b/src/styles/blocks/countdown.scss
index eaa3dc8..177a560 100644
--- 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;
+ }
}
}
}
\ No newline at end of file
diff --git a/src/styles/blocks/intro.scss b/src/styles/blocks/intro.scss
index 738e4fb..86126a9 100644
--- 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;
}