From 69f67c75fa06ffbf8d286e27a4af3816da2f2b93 Mon Sep 17 00:00:00 2001 From: Noloquideus Date: Wed, 22 Apr 2026 20:43:16 +0300 Subject: [PATCH] feat: add start page --- css/styles.css | 625 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 142 +++++++++++ js/main.js | 75 ++++++ 3 files changed, 842 insertions(+) create mode 100644 css/styles.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..849037a --- /dev/null +++ b/css/styles.css @@ -0,0 +1,625 @@ +:root { + --hero-bg-1: #070b28; + --hero-bg-2: #120a32; + --hero-bg-3: #1e0f3d; + --hero-accent: #c9b8ff; + --hero-text: #f4f2ff; + --cream: #f4efe6; + --blue-deep: #0c1240; + --blue-panel: #101a5c; + --footer-bg: #05052d; + --footer-line: rgba(255, 255, 255, 0.18); +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: 'Manrope', system-ui, sans-serif; + color: #1a1a2e; + background: var(--cream); +} + +a { + color: inherit; + text-decoration: none; +} + +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 50; + padding: 1.25rem 4vw 0; + background: linear-gradient(180deg, rgba(7, 11, 40, 0.95) 0%, rgba(7, 11, 40, 0.65) 70%, transparent 100%); +} + +.header__inner { + max-width: 120rem; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + padding-bottom: 1rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.35); +} + +.logo { + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--hero-text); +} + +.logo--header { + font-size: clamp(1.1rem, 2vw, 1.35rem); +} + +.logo--hero { + font-size: clamp(3.5rem, 10vw, 7.5rem); + line-height: 0.95; + margin: 0 0 2rem; + background: linear-gradient(135deg, #fff 0%, #d4c8ff 55%, #9e8cff 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.nav { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: clamp(0.75rem, 2vw, 2.5rem); +} + +.nav__link { + font-size: clamp(0.7rem, 1.1vw, 0.85rem); + font-weight: 600; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.92); + transition: color 0.2s ease, opacity 0.2s ease; +} + +.nav__link:hover { + color: #fff; +} + +.btn--cabinet { + flex-shrink: 0; + padding: 0.65rem 1.35rem; + border-radius: 999px; + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.06em; + color: #0c0c24; + background: #fff; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.btn--cabinet:hover { + transform: translateY(-1px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); +} + +.burger { + display: none; + width: 2.5rem; + height: 2.5rem; + border: 1px solid rgba(255, 255, 255, 0.35); + border-radius: 0.5rem; + background: transparent; + position: relative; + cursor: pointer; +} + +.burger::before, +.burger::after { + content: ''; + position: absolute; + left: 0.55rem; + right: 0.55rem; + height: 2px; + background: #fff; + border-radius: 1px; +} + +.burger::before { + top: 0.85rem; +} + +.burger::after { + bottom: 0.85rem; +} + +.hero { + position: relative; + min-height: 100vh; + padding: 7.5rem 4vw 4rem; + overflow: hidden; + color: var(--hero-text); +} + +.hero__bg { + position: absolute; + inset: 0; + background: radial-gradient(ellipse 120% 80% at 20% 20%, #2a1b6e 0%, transparent 55%), + radial-gradient(ellipse 90% 70% at 85% 30%, #3d1f7a 0%, transparent 50%), + linear-gradient(165deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 42%, var(--hero-bg-3) 100%); + z-index: 0; +} + +.hero__glow { + position: absolute; + z-index: 1; + width: clamp(5rem, 14vw, 9rem); + height: clamp(5rem, 14vw, 9rem); + display: grid; + place-items: center; + font-size: clamp(2rem, 5vw, 3.2rem); + font-weight: 300; + color: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 1.1rem; + transform: rotate(-8deg); + box-shadow: 0 0 40px rgba(140, 120, 255, 0.15); +} + +.hero__glow--1 { + top: 22%; + left: 8%; +} + +.hero__glow--2 { + top: 38%; + left: 18%; + transform: rotate(6deg); +} + +.hero__glow--3 { + top: 18%; + left: 28%; + transform: rotate(12deg); +} + +.hero__grid { + position: relative; + z-index: 2; + max-width: 120rem; + margin: 0 auto; + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); + gap: clamp(2rem, 5vw, 5rem); + align-items: end; +} + +.hero__left { + align-self: center; + padding-top: 2rem; +} + +.hero__acronym { + margin: 0; + display: flex; + flex-direction: column; + gap: 0.35rem; + font-size: clamp(0.65rem, 1.1vw, 0.8rem); + font-weight: 600; + letter-spacing: 0.22em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.78); +} + +.hero__right { + display: flex; + flex-direction: column; + align-items: flex-end; + text-align: right; + gap: 1.5rem; +} + +.hero__bridge-wrap { + width: 100%; +} + +.hero__bridge { + margin: 0; + font-size: clamp(2rem, 5vw, 3.6rem); + font-weight: 700; + letter-spacing: 0.04em; + line-height: 1.05; +} + +.hero__bridge--reflect { + margin-top: -0.15em; + opacity: 0.22; + transform: scaleY(-1); + mask-image: linear-gradient(to bottom, transparent 0%, #000 55%); + -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%); + filter: blur(0.5px); +} + +.hero__taglines { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 0.1rem; +} + +.hero__tag { + margin: 0; + font-size: clamp(2.4rem, 7.5vw, 5.8rem); + font-weight: 800; + line-height: 0.95; + letter-spacing: -0.02em; + text-transform: lowercase; + color: rgba(180, 150, 255, 0.42); + text-shadow: 0 0 60px rgba(120, 90, 220, 0.35); +} + +.hero__tag--2 { + padding-right: clamp(0rem, 4vw, 3rem); +} + +.hero__tag--3 { + padding-right: clamp(0rem, 8vw, 6rem); +} + +.countdown { + width: 100%; + max-width: 38rem; + margin-top: 0.5rem; +} + +.countdown__title { + margin: 0 0 1rem; + font-size: clamp(0.85rem, 1.5vw, 1rem); + font-weight: 600; + letter-spacing: 0.28em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.72); +} + +.countdown__units { + display: flex; + align-items: stretch; + justify-content: flex-end; + flex-wrap: wrap; + gap: 0.35rem 0.5rem; +} + +.countdown__unit { + min-width: clamp(4.2rem, 12vw, 6.5rem); + text-align: center; +} + +.countdown__value { + display: block; + font-size: clamp(2.4rem, 6vw, 4.25rem); + font-weight: 800; + font-variant-numeric: tabular-nums; + line-height: 1; + letter-spacing: 0.02em; + color: #fff; + text-shadow: 0 0 40px rgba(180, 160, 255, 0.45); +} + +.countdown__label { + display: block; + margin-top: 0.45rem; + font-size: 0.68rem; + font-weight: 600; + letter-spacing: 0.18em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.45); +} + +.countdown__sep { + width: 1px; + align-self: stretch; + min-height: 2.5rem; + margin-top: 0.35rem; + background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35), transparent); +} + +.countdown__done { + margin: 0.5rem 0 0; + font-size: clamp(1.5rem, 4vw, 2.5rem); + font-weight: 800; + letter-spacing: 0.12em; + text-transform: uppercase; + color: #fff; +} + +.about { + position: relative; + padding: clamp(4rem, 10vw, 7rem) 4vw; + background: var(--cream); + overflow: hidden; +} + +.about__slant { + position: absolute; + left: -15%; + right: -5%; + top: 12%; + bottom: 8%; + background: linear-gradient(135deg, #0a1438 0%, #15206e 45%, #1c2a8a 100%); + transform: skewY(-6deg); + border-radius: 2rem; + box-shadow: 0 40px 100px rgba(12, 18, 64, 0.35); + opacity: 0.98; +} + +.about__slant::after { + content: ''; + position: absolute; + inset: 0; + border-radius: inherit; + background: radial-gradient(ellipse 50% 60% at 90% 100%, rgba(255, 255, 255, 0.06) 0%, transparent 55%); + pointer-events: none; +} + +.about__inner { + position: relative; + z-index: 2; + max-width: 72rem; + margin: 0 auto; + padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem); +} + +.about__panel { + max-width: 38rem; +} + +.about__title { + margin: 0 0 1.25rem; + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 800; + letter-spacing: 0.04em; + color: #ece8ff; +} + +.about__text { + margin: 0 0 1rem; + font-size: clamp(0.95rem, 1.4vw, 1.1rem); + font-weight: 300; + line-height: 1.65; + color: rgba(244, 242, 255, 0.88); +} + +.about__legal { + position: relative; + z-index: 3; + max-width: 52rem; + margin: clamp(2rem, 6vw, 4rem) auto 0; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.about__legal p { + margin: 0; + font-size: clamp(0.75rem, 1.1vw, 0.88rem); + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + line-height: 1.55; + color: var(--blue-deep); +} + +.footer { + padding: 3.5rem 4vw 2.5rem; + background: var(--footer-bg); + color: rgba(255, 255, 255, 0.9); + font-family: 'Nunito Sans', 'Manrope', system-ui, sans-serif; + font-size: 1rem; + -webkit-font-smoothing: antialiased; +} + +.footer__top { + max-width: 72rem; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 2rem 3rem; +} + +.footer__company { + margin: 0 0 0.75rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + font-size: 1.1rem; +} + +.footer__col p { + margin: 0.2rem 0; +} + +.footer__heading { + margin: 0 0 0.65rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + font-size: 0.82rem; +} + +.footer__links { + margin: 0; + padding: 0; + list-style: none; +} + +.footer__links a { + text-decoration: underline; + text-underline-offset: 3px; +} + +.footer__links li + li { + margin-top: 0.35rem; +} + +.footer__col--contact { + font-size: 1rem; +} + +.footer__phone { + font-size: 1.15rem; + font-weight: 600; +} + +.footer__rule { + border: none; + border-top: 1px solid var(--footer-line); + margin: 1rem 0; +} + +.footer__mail { + text-decoration: underline; + text-underline-offset: 3px; + font-weight: 600; +} + +.footer__wide { + border: none; + border-top: 1px solid var(--footer-line); + margin: 2.5rem auto 1.75rem; + max-width: 72rem; +} + +.footer__social { + max-width: 72rem; + margin: 0 auto 1.75rem; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.footer__icons { + display: flex; + gap: 0.75rem; +} + +.footer__icon { + width: 2.35rem; + height: 2.35rem; + border-radius: 50%; + background: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.footer__bottom { + max-width: 72rem; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 1rem; + font-size: 0.95rem; + opacity: 0.85; +} + +@media (max-width: 600px) { + .hero__glow { + display: none; + } +} + +@media (max-width: 960px) { + .hero__grid { + grid-template-columns: 1fr; + align-items: start; + } + + .hero__right { + align-items: flex-start; + text-align: left; + } + + .hero__taglines { + align-items: flex-start; + } + + .hero__tag { + align-self: flex-start; + } + + .hero__tag--2, + .hero__tag--3 { + padding-right: 0; + } + + .countdown__units { + justify-content: flex-start; + } + + .footer__top { + grid-template-columns: 1fr; + } +} + +@media (max-width: 820px) { + .nav { + position: fixed; + inset: 0 0 auto 0; + top: 4.5rem; + padding: 1rem 4vw 1.25rem; + flex-direction: column; + background: rgba(7, 11, 40, 0.97); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); + transform: translateY(-120%); + opacity: 0; + pointer-events: none; + transition: transform 0.25s ease, opacity 0.25s ease; + } + + body.nav-open .nav { + transform: translateY(0); + opacity: 1; + pointer-events: auto; + } + + .burger { + display: block; + } + + .btn--cabinet { + margin-left: auto; + } + + .header__inner { + flex-wrap: wrap; + } + + .logo--header { + order: 0; + } + + .burger { + order: 1; + } + + .btn--cabinet { + order: 2; + } + + .nav { + order: 3; + width: 100%; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..7b9ba66 --- /dev/null +++ b/index.html @@ -0,0 +1,142 @@ + + + + + +ЭКСА — ваш мост в мир цифровых активов + + + + + + +
+
+ + +Личный кабинет + +
+
+ +
+
+ + + + +
+
+ +

+Электронные +Криптовалютные +Системы +Активы +

+
+
+
+

Ваш мост

+ +
+
+

в мир

+

цифровых

+

активов

+
+
+

До запуска осталось

+
+
+00 +Дней +
+ +
+00 +Часов +
+ +
+00 +Минут +
+ +
+00 +Секунд +
+
+ +
+
+
+
+ +
+ +
+
+

О нас

+

ЭКСА — молодая финтех-компания в сфере цифровых активов. Наша миссия — сделать оборот цифровых активов простым, прозрачным и законным.

+

Мы создаём инфраструктуру для операций с криптовалютой и комплексные решения для физических и юридических лиц.

+
+
+
+

Вся деятельность компании соответствует законодательству Российской Федерации и требованиям регуляторов.

+

Вся документация компании открыта и доступна для ознакомления.

+
+
+ +
+ + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..6cfc07b --- /dev/null +++ b/js/main.js @@ -0,0 +1,75 @@ +const LAUNCH = new Date('2026-04-30T16:00:00+03:00'); + + +function pad2(n) { + return String(n).padStart(2, '0'); +} + + +function tickCountdown() { + const root = document.getElementById('countdown'); + if (!root) { + return false; + } + const doneEl = document.getElementById('countdown-done'); + const diff = LAUNCH.getTime() - Date.now(); + if (diff <= 0) { + root.querySelectorAll('.countdown__units, .countdown__title').forEach((el) => { + el.setAttribute('hidden', ''); + }); + if (doneEl) { + doneEl.removeAttribute('hidden'); + } + return false; + } + const totalSeconds = Math.floor(diff / 1000); + const days = Math.floor(totalSeconds / 86400); + const hours = Math.floor((totalSeconds % 86400) / 3600); + const minutes = Math.floor((totalSeconds % 3600) / 60); + const seconds = totalSeconds % 60; + const map = { + days: days < 100 ? pad2(days) : String(days), + hours: pad2(hours), + minutes: pad2(minutes), + seconds: pad2(seconds), + }; + Object.keys(map).forEach((key) => { + const el = root.querySelector(`[data-unit="${key}"]`); + if (el) { + el.textContent = map[key]; + } + }); + return true; +} + + +function initNav() { + const btn = document.querySelector('.burger'); + if (!btn) { + return; + } + btn.addEventListener('click', () => { + document.body.classList.toggle('nav-open'); + }); + document.querySelectorAll('.nav__link').forEach((link) => { + link.addEventListener('click', () => { + document.body.classList.remove('nav-open'); + }); + }); +} + + +function startCountdown() { + if (!tickCountdown()) { + return; + } + const countdownTimer = setInterval(() => { + if (!tickCountdown()) { + clearInterval(countdownTimer); + } + }, 1000); +} + + +startCountdown(); +initNav();