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; }