diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..c660cf3 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,570 @@ +:root { + --primary: #4CAF50; + --secondary: #2196F3; + --dark: #333; + --light: #f9f9f9; + --accent: #FF5722; + --emerald: #1abc9c; + --orange: #f39c12; + --blue: #3498db; +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} +body { + color: var(--dark); + line-height: 1.6; + padding-top: 90px; +} +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Navigation Menu */ +.nav-menu { + position: fixed; + top: 0; + left: 0; + width: 100%; + background: rgba(255,255,255,0.95); + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + z-index: 1000; + padding: 10px 0; + transition: all 0.3s ease; +} +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + display: flex; + justify-content: space-between; + align-items: center; +} +.nav-logo { + height: 70px; + width: auto; + transition: all 0.3s ease; +} +.nav-logo:hover { + opacity: 0.8; +} +.nav-links { + display: flex; + gap: 25px; +} +.nav-link { + color: var(--dark); + text-decoration: none; + font-weight: 500; + transition: color 0.3s ease; + position: relative; +} +.nav-link:hover { + color: var(--primary); +} +.nav-link::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: var(--primary); + transition: width 0.3s ease; +} +.nav-link:hover::after { + width: 100%; +} +.mobile-menu-btn { + display: none; + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; +} + +/* Header with Background Image */ +header { + background-image: url('https://i0.wp.com/mytelmi.es/wp-content/uploads/2023/09/banner-telmi-smart-wach.png'); + background-size: cover; + background-position: center; + height: calc(65vh - 90px); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: white; + position: relative; +} +header::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.3); +} +.header-content { + position: relative; + z-index: 1; + max-width: 800px; + padding: 0 20px; +} +.header-content h1 { + font-size: 2.8rem; + margin-bottom: 20px; + text-shadow: 0 2px 4px rgba(0,0,0,0.3); +} +.header-content p { + font-size: 1.2rem; + margin-bottom: 40px; + text-shadow: 0 1px 3px rgba(0,0,0,0.2); +} + +/* CTA Buttons */ +.cta-buttons { + display: flex; + justify-content: center; + gap: 20px; + margin-top: 30px; +} +.btn { + display: inline-block; + padding: 12px 30px; + border-radius: 50px; + font-weight: 600; + text-decoration: none; + transition: all 0.3s ease; +} +.btn-primary { + background-color: var(--primary); + color: white; +} +.btn-secondary { + background-color: var(--secondary); + color: white; +} +.btn:hover { + transform: translateY(-3px); + box-shadow: 0 10px 20px rgba(0,0,0,0.2); +} + +/* Video Background Section */ +.video-section { + position: relative; + width: 100%; + height: 100vh; + overflow: hidden; +} +.video-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} +.video-container iframe { + width: 100vw; + height: 56.25vw; + min-height: 100%; + min-width: 100%; + object-fit: cover; + transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; +} +.video-content { + position: relative; + z-index: 1; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: white; + background: rgba(0,0,0,0.4); + padding: 40px 0; +} +.video-content .container { + max-width: 1000px; +} + +/* Section Styling */ +.section { + padding: 80px 0; +} +.section-title { + text-align: center; + margin-bottom: 60px; + font-size: 2rem; +} + +/* Features Cards */ +.features { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 30px; +} +.feature-card { + flex: 1; + min-width: 250px; + background: rgba(255,255,255,0.15); + padding: 30px; + border-radius: 25px; + box-shadow: 0 5px 15px rgba(0,0,0,0.05); + text-align: center; + transition: transform 0.3s ease; + backdrop-filter: blur(5px); + border: 1px solid rgba(255,255,255,0.2); +} +.feature-card:hover { + transform: translateY(-10px); +} +.feature-icon { + font-size: 3rem; + margin-bottom: 20px; + color: var(--primary); +} + +/* Who is it for - изумрудный градиент */ +.who-section { + background: white; +} +.user-types { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; +} +.user-card { + flex: 1; + min-width: 200px; + background: rgba(255,255,255,0.15); + padding: 25px; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0,0,0,0.1); + text-align: center; + backdrop-filter: blur(5px); + border: 1px solid rgba(255,255,255,0.2); + transition: transform 0.3s ease; +} +.user-card:hover { + transform: translateY(-5px); +} +.user-emoji { + font-size: 2.5rem; + margin-bottom: 15px; +} + +/* Why Section - оранжево-желтый градиент */ +.why-section { + background: #fff; +} +.why-container { + position: relative; + max-width: 1200px; + margin: 0 auto; + padding: 0 60px; +} +.scroll-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 50px; + height: 50px; + background: white; + border-radius: 50%; + border: none; + box-shadow: 0 4px 15px rgba(0,0,0,0.1); + cursor: pointer; + font-size: 1.2rem; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; + transition: all 0.3s ease; +} +.scroll-btn:hover { + background: var(--primary); + color: white; + transform: translateY(-50%) scale(1.1); +} +.scroll-btn.left { left: 0; } +.scroll-btn.right { right: 0; } +.cards-wrapper { + display: flex; + overflow-x: auto; + scroll-behavior: smooth; + gap: 20px; + padding: 20px 0; + scroll-snap-type: x mandatory; +} +.cards-wrapper::-webkit-scrollbar { + display: none; +} +.benefit-card { + flex: 0 0 calc(33.333% - 20px); + scroll-snap-align: start; + background: white; + padding: 25px; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0,0,0,0.1); + transition: transform 0.3s ease; +} +.benefit-card:hover { + transform: translateY(-5px); +} + +/* Testimonials - голубой градиент */ +.reviews-section { + background: linear-gradient(135deg, var(--blue), #2980b9); + color: white; +} +.reviews-container { + position: relative; + max-width: 1200px; + margin: 0 auto; + padding: 0 60px; +} +.review-scroll-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 50px; + height: 50px; + background: white; + border-radius: 50%; + border: none; + box-shadow: 0 4px 15px rgba(0,0,0,0.1); + cursor: pointer; + font-size: 1.2rem; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; + transition: all 0.3s ease; +} +.review-scroll-btn:hover { + background: var(--primary); + color: white; + transform: translateY(-50%) scale(1.1); +} +.review-scroll-btn.left { left: 0; } +.review-scroll-btn.right { right: 0; } +.reviews-wrapper { + display: flex; + overflow-x: auto; + scroll-behavior: smooth; + gap: 30px; + padding: 20px 0; + scroll-snap-type: x mandatory; +} +.reviews-wrapper::-webkit-scrollbar { + display: none; +} +.review-card { + flex: 0 0 calc(50% - 15px); + scroll-snap-align: start; + background: rgba(255,255,255,0.15); + padding: 30px; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0,0,0,0.1); + transition: transform 0.3s ease; + backdrop-filter: blur(5px); + border: 1px solid rgba(255,255,255,0.2); +} +.review-card:hover { + transform: translateY(-5px); +} +.user-avatar-container { + width: 80px; + height: 80px; + border-radius: 50%; + overflow: hidden; + margin: 0 auto 15px; + border: 3px solid white; + box-shadow: 0 4px 10px rgba(0,0,0,0.1); +} +.user-avatar { + width: 100%; + height: 100%; + object-fit: cover; +} +.testimonial-author { + margin-top: 15px; + font-weight: bold; +} + +/* CTA Section */ +.cta-section { + background-color: white; + text-align: center; + padding: 60px 0; +} +.cta-content { + display: flex; + align-items: center; + justify-content: center; + gap: 50px; + max-width: 1200px; + margin: 0 auto; +} +.cta-image { + flex: 1; + max-width: 400px; +} +.cta-image img { + width: 100%; + height: auto; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); +} +.cta-text { + flex: 1; + text-align: left; +} +.cta-section h2 { + margin-bottom: 20px; + font-size: 2rem; +} +.price { + font-size: 2.5rem; + font-weight: bold; + margin: 20px 0; +} +.discount-badge { + background-color: var(--accent); + color: white; + padding: 5px 15px; + border-radius: 20px; + display: inline-block; + margin-bottom: 20px; + font-weight: bold; +} +.urgency { + margin-top: 20px; + font-style: italic; +} +.payment-container { + background: white; + border-radius: 10px; + padding: 30px; + max-width: 400px; + margin: 20px 0; + box-shadow: 0 5px 15px rgba(0,0,0,0.1); +} +.payment-container iframe { + border: none; + width: 100%; + height: 50px; +} + +/* Footer */ +footer { + background-color: var(--dark); + color: white; + padding: 30px 0; + text-align: center; +} + +/* Responsive */ +@media (max-width: 1024px) { + .benefit-card { + flex: 0 0 calc(50% - 15px); + } + .review-card { + flex: 0 0 calc(100% - 15px); + } + .cta-content { + flex-direction: column; + gap: 30px; + } + .cta-text { + text-align: center; + } +} + +@media (max-width: 768px) { + body { + padding-top: 70px; + } + .nav-menu { + padding: 5px 0; + } + .nav-logo { + height: 70px; + } + .nav-links { + position: fixed; + top: 70px; + left: 0; + width: 100%; + background: white; + flex-direction: column; + align-items: center; + padding: 20px 0; + gap: 15px; + box-shadow: 0 5px 10px rgba(0,0,0,0.1); + transform: translateY(-150%); + transition: transform 0.3s ease; + } + .nav-links.active { + transform: translateY(0); + } + .mobile-menu-btn { + display: block; + } + header { + height: calc(50vh - 70px); + } + .header-content h1 { + font-size: 2rem; + } + .header-content p { + font-size: 1rem; + } + .cta-buttons { + flex-direction: column; + align-items: center; + } + .btn { + width: 100%; + max-width: 300px; + margin-bottom: 15px; + } + .video-section { + height: auto; + min-height: 70vh; + } + .video-content .container { + padding: 60px 20px; + } + .features { + flex-direction: column; + } + .why-container, .reviews-container { + padding: 0 20px; + } + .scroll-btn, .review-scroll-btn { + display: none; + } + .benefit-card { + flex: 0 0 calc(100% - 15px); + } + .section-title { + font-size: 1.8rem; + margin-bottom: 40px; + } + .section { + padding: 60px 0; + } +} \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..d973aae --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,8 @@ +version: '3' +services: + web: + image: nginx:alpine + volumes: + - ./:/usr/share/nginx/html + ports: + - "8080:80" \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..34a3149 --- /dev/null +++ b/index.html @@ -0,0 +1,206 @@ + + + + + + Telmi - умные часы, которые говорят за вас! + + + + + + + + +
+
+

Умные часы, которые говорят за вас!

+

Telmi помогает людям с особенностями речи легко общаться с миром, выражать свои желания и получать поддержку.

+
+ Выбрать Telmi +
+
+
+ + +
+
+

Кому подойдет Telmi?

+
+
+
👶
+

Детям с нарушениями речи

+

Помогает выражать основные потребности и эмоции

+
+
+
🧩
+

Людям с аутизмом

+

Упрощает коммуникацию и снижает тревожность

+
+
+
👵
+

Взрослым с ограниченными возможностями

+

Дает возможность быть услышанным в любых ситуациях

+
+
+
+
+ + +
+
+ +
+
+
+

Как работает Telmi?

+
+
+
👆
+

Выбираете иконку

+

Часы мгновенно озвучивают ваш запрос понятным голосом

+
+
+
👂
+

Получаете ответ

+

Родители, учителя или близкие сразу понимают вашу потребность

+
+
+
🎙️
+

Используете ассистента

+

Голосовой помощник выполняет команды и напоминает о важном

+
+
+
+
+
+ + +
+
+

Почему Telmi?

+
+
+ +
+
+

📢 Голосовое оповещение

+

Часы говорят за вас четким и понятным голосом в любой ситуации

+
+
+

🎨 Интуитивные иконки

+

Простой интерфейс с понятными изображениями для мгновенного выбора

+
+
+

🔔 Напоминания

+

Важные события и расписание всегда под контролем

+
+
+

❤️ Мониторинг здоровья

+

Отслеживание пульса, температуры и активности

+
+
+

📞 Служба поддержки

+

Помощь и консультации 24/7 по любым вопросам

+
+
+ +
+
+ + +
+
+

Отзывы пользователей

+
+
+ +
+
+
+ Марина +
+

"Благодаря Telmi, мой ребенок теперь может сам выражать свои желания. Это изменило нашу жизнь!"

+
- Марина, мама 8-летнего Артема
+
+
+
+ Ольга +
+

"Как педагог, я вижу огромный прогресс у детей с аутизмом, использующих Telmi. Они стали более открытыми и спокойными."

+
- Ольга Сергеевна, логопед
+
+
+
+ Дмитрий +
+

"Моя бабушка после инсульта снова может общаться с нами. Telmi стал для нас настоящим спасением."

+
- Дмитрий, внук
+
+
+
+ Анна +
+

"Простое и эффективное решение для невербальных детей. Рекомендую всем родителям!"

+
- Анна, мама 6-летней Софии
+
+
+ +
+
+ + +
+
+
+
+ Telmi Smart Watch +
+
+

Где купить Telmi?

+
Акция: скидка 10% сегодня!
+
14 990 ₽ 16 990 ₽
+
+ +
+

Осталось 15 штук по акции

+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..87164eb --- /dev/null +++ b/js/script.js @@ -0,0 +1,85 @@ +// Mobile menu toggle +const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); +const navLinks = document.querySelector('.nav-links'); +mobileMenuBtn.addEventListener('click', () => { + navLinks.classList.toggle('active'); +}); +// Close mobile menu when clicking on a link +document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', () => { + navLinks.classList.remove('active'); + }); +}); +// Smooth scrolling for anchor links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + const targetElement = document.querySelector(targetId); + if (targetElement) { + window.scrollTo({ + top: targetElement.offsetTop - 90, + behavior: 'smooth' + }); + } + }); +}); +// Scroll functionality for benefits cards +const scrollLeftBtn = document.querySelector('.scroll-btn.left'); +const scrollRightBtn = document.querySelector('.scroll-btn.right'); +const cardsWrapper = document.querySelector('.cards-wrapper'); +scrollLeftBtn.addEventListener('click', () => { + cardsWrapper.scrollBy({ left: -300, behavior: 'smooth' }); +}); +scrollRightBtn.addEventListener('click', () => { + cardsWrapper.scrollBy({ left: 300, behavior: 'smooth' }); +}); +// Scroll functionality for reviews +const reviewLeftBtn = document.querySelector('.review-scroll-btn.left'); +const reviewRightBtn = document.querySelector('.review-scroll-btn.right'); +const reviewsWrapper = document.querySelector('.reviews-wrapper'); +reviewLeftBtn.addEventListener('click', () => { + reviewsWrapper.scrollBy({ left: -350, behavior: 'smooth' }); +}); +reviewRightBtn.addEventListener('click', () => { + reviewsWrapper.scrollBy({ left: 350, behavior: 'smooth' }); +}); +// Auto-hide scroll buttons when at edge +function checkScrollPosition() { + // For benefits cards + if (cardsWrapper.scrollLeft <= 10) { + scrollLeftBtn.style.opacity = '0.5'; + scrollLeftBtn.style.cursor = 'default'; + } else { + scrollLeftBtn.style.opacity = '1'; + scrollLeftBtn.style.cursor = 'pointer'; + } + if (cardsWrapper.scrollLeft >= cardsWrapper.scrollWidth - cardsWrapper.clientWidth - 10) { + scrollRightBtn.style.opacity = '0.5'; + scrollRightBtn.style.cursor = 'default'; + } else { + scrollRightBtn.style.opacity = '1'; + scrollRightBtn.style.cursor = 'pointer'; + } + // For reviews + if (reviewsWrapper.scrollLeft <= 10) { + reviewLeftBtn.style.opacity = '0.5'; + reviewLeftBtn.style.cursor = 'default'; + } else { + reviewLeftBtn.style.opacity = '1'; + reviewLeftBtn.style.cursor = 'pointer'; + } + if (reviewsWrapper.scrollLeft >= reviewsWrapper.scrollWidth - reviewsWrapper.clientWidth - 10) { + reviewRightBtn.style.opacity = '0.5'; + reviewRightBtn.style.cursor = 'default'; + } else { + reviewRightBtn.style.opacity = '1'; + reviewRightBtn.style.cursor = 'pointer'; + } +} +cardsWrapper.addEventListener('scroll', checkScrollPosition); +reviewsWrapper.addEventListener('scroll', checkScrollPosition); +window.addEventListener('resize', checkScrollPosition); +// Initial check +checkScrollPosition(); \ No newline at end of file