diff --git a/css/styles.css b/css/styles.css index 3b9c3db..255c44e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -113,13 +113,14 @@ header::after { .header-content { position: relative; z-index: 1; - max-width: 800px; padding: 0 20px; } .header-content h1 { - font-size: 2.8rem; + font-size: 1.8rem; margin-bottom: 20px; + margin-top: 40px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); + } .header-content p { font-size: 1.2rem; @@ -155,31 +156,27 @@ header::after { box-shadow: 0 10px 20px rgba(0,0,0,0.2); } -/* Video Background Section */ +/* Video Section */ .video-section { position: relative; width: 100%; - height: 100vh; - overflow: hidden; } + +/* Video Block */ .video-container { + position: relative; + width: 100%; + padding-top: 56.25%; /* 16:9 aspect ratio */ + margin: 40px 0; +} + +.video-container iframe { 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%; + border: none; } .video-content { position: relative; @@ -199,7 +196,24 @@ header::after { /* Section Styling */ .section { - padding: 80px 0; + padding: 20px 0; + position: relative; + background-size: cover; + background-position: center; + +} +.section::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; +} +.section > * { + position: relative; + z-index: 1; } .section-title { text-align: center; @@ -326,8 +340,8 @@ header::after { /* Testimonials - голубой градиент */ .reviews-section { - background: linear-gradient(135deg, var(--blue), #2980b9); - color: white; + + background-image: url('../img/19007.jpg'); } .reviews-container { position: relative; @@ -374,7 +388,7 @@ header::after { .review-card { flex: 0 0 calc(50% - 15px); scroll-snap-align: start; - background: rgba(255,255,255,0.15); + background: rgba(255,255,255,0.65); padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); @@ -422,11 +436,149 @@ header::after { flex: 1; max-width: 400px; } -.cta-image img { +.cta-image .slider-container { + position: relative; width: 100%; - height: auto; + height: 400px; + overflow: hidden; +} + +.cta-image .slide { + width: 100%; + height: 100%; + object-fit: contain; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); + position: absolute; + top: 0; + left: 0; + opacity: 0; + transition: opacity 0.5s ease-in-out; +} + +.cta-image .slide.active { + opacity: 1; +} + +/* Social media in CTA section */ +.cta-content .social-embeds { + flex: 1; + max-width: 300px; + padding: 20px; +} + +.cta-content .embeds-container { + margin-top: 20px; +} + +.cta-content .section-title { + text-align: left; + font-size: 1.5rem; + margin-bottom: 15px; +} + +/* Modal styles */ +.modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + z-index: 2000; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s ease; +} + +.modal-overlay.active { + display: flex; + opacity: 1; +} + +.modal-content { + position: relative; + max-width: 90%; + max-height: 90%; + background: rgba(255, 255, 255, 0.9); + padding: 20px; + border-radius: 10px; + backdrop-filter: blur(5px); +} + +.modal-image-container { + position: relative; + max-width: 100%; + max-height: 80vh; +} + +.modal-image { + max-width: 100%; + max-height: 80vh; + display: block; + margin: 0 auto; + border-radius: 5px; +} + +.modal-nav { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 50px; + height: 50px; + background: rgba(255,255,255,0.7); + border: none; + border-radius: 50%; + font-size: 24px; + cursor: pointer; + transition: all 0.3s ease; +} + +.modal-nav:hover { + background: rgba(0,0,0,0.1); +} + +.modal-nav.prev { + left: 10px; +} + +.modal-nav.next { + right: 10px; +} + +.instagram-embed { + padding: 40px 0; + background: #f8f8f8; + text-align: center; +} + +.instagram-embed .container { + max-width: 600px; + margin: 0 auto; +} + +.instagram-media { + margin: 0 auto !important; +} + +.close-modal { + position: absolute; + top: 15px; + right: 15px; + color: black; + font-size: 30px; + font-weight: bold; + cursor: pointer; + transition: transform 0.2s ease; + background: none; + border: none; + padding: 5px; +} + +.close-modal:hover { + transform: scale(1.2); } .cta-text { flex: 1; @@ -468,9 +620,75 @@ header::after { height: 50px; } +/* Disease/Condition Grid - Telmi Help Cards */ +.disease-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + margin-bottom: 40px; +} + +.disease-card { + background: rgba(255, 255, 255, 0.8); + border-radius: 15px; + padding: 20px; + 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); +} + +.disease-card:hover { + transform: translateY(-5px); +} + +.disease-icon { + display: flex; + align-items: center; + justify-content: center; + width: 60px; + height: 60px; + margin-bottom: 15px; + border-radius: 50%; + background: rgba(76, 175, 80, 0.1); + font-size: 30px; + line-height: 1; + padding: 10px; +} + +.disease-card h3 { + font-size: 1.2rem; + margin-bottom: 10px; + color: var(--dark); +} + +.help-text { + font-size: 0.9rem; + margin-bottom: 10px; + color: #555; +} + +.features-text { + font-size: 0.85rem; + color: var(--primary); + font-weight: 500; +} + +@media (max-width: 1024px) { + .disease-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .disease-grid { + grid-template-columns: 1fr; + } +} + /* Footer */ footer { - background-color: var(--dark); + background-color:#023d60; color: white; padding: 30px 0; text-align: center; @@ -539,11 +757,17 @@ footer { header { height: calc(50vh - 70px); } + .header-content { + padding: 0 15px; + } .header-content h1 { - font-size: 2rem; + margin-top: 40px; + line-height: 1.3; + margin-bottom: 5px; } .header-content p { font-size: 1rem; + margin-bottom: 25px; } .cta-buttons { flex-direction: column; @@ -554,9 +778,8 @@ footer { max-width: 300px; margin-bottom: 15px; } - .video-section { - height: auto; - min-height: 70vh; + .video-container { + margin: 20px 0; } .video-content .container { padding: 60px 20px; @@ -580,4 +803,83 @@ footer { .section { padding: 60px 0; } -} \ No newline at end of file + .disease-table, .table { + display: block; + overflow-x: auto; + white-space: nowrap; + width: 100%; + } + .disease-table th, + .disease-table td, + .table th, + .table td { + min-width: 150px; + } + .cta-image { + width: 100%; + max-width: none; + } + .cta-image .slider-container { + height: 300px; + } + .cta-image .slide { + object-fit: cover; + } +} + +.table { + width: 100%; + border: none; + margin-bottom: 20px; + border-collapse: separate; +} +.table thead th { + font-weight: bold; + text-align: left; + border: none; + padding: 10px 15px; + background: #EDEDED; + font-size: 14px; + border-top: 1px solid #ddd; +} +.table tr th:first-child, .table tr td:first-child { + border-left: 1px solid #ddd; +} +.table tr th:last-child, .table tr td:last-child { + border-right: 1px solid #ddd; +} +.table thead tr th:first-child { + border-radius: 20px 0 0 0; +} +.table thead tr th:last-child { + border-radius: 0 20px 0 0; +} +.table tbody td { + text-align: left; + border: none; + padding: 10px 15px; + font-size: 14px; + vertical-align: top; +} +.table tbody tr:nth-child(even) { + background: #F8F8F8; +} +.table tbody tr:last-child td{ + border-bottom: 1px solid #ddd; +} + +@media (max-width: 768px) { + .table { + font-size: 1rem; + } + .table th, + .table td { + padding: 8px 10px; + } +} +.table tbody tr:last-child td:first-child { + border-radius: 0 0 0 20px; +} +.table tbody tr:last-child td:last-child { + border-radius: 0 0 20px 0; +} diff --git a/img/1338.jpg b/img/1338.jpg new file mode 100644 index 0000000..0c0b9aa Binary files /dev/null and b/img/1338.jpg differ diff --git a/img/19007.jpg b/img/19007.jpg new file mode 100644 index 0000000..9e08d1f Binary files /dev/null and b/img/19007.jpg differ diff --git a/img/5594016.jpg b/img/5594016.jpg new file mode 100644 index 0000000..3d0665d Binary files /dev/null and b/img/5594016.jpg differ diff --git a/img/watch_slide_10.png b/img/watch_slide_10.png new file mode 100644 index 0000000..30ee1ed Binary files /dev/null and b/img/watch_slide_10.png differ diff --git a/img/watch_slide_11.png b/img/watch_slide_11.png new file mode 100644 index 0000000..2ebbfbc Binary files /dev/null and b/img/watch_slide_11.png differ diff --git a/img/watch_slide_12.png b/img/watch_slide_12.png new file mode 100644 index 0000000..2de4e93 Binary files /dev/null and b/img/watch_slide_12.png differ diff --git a/img/watch_slide_13.png b/img/watch_slide_13.png new file mode 100644 index 0000000..4f15b57 Binary files /dev/null and b/img/watch_slide_13.png differ diff --git a/img/watch_slide_14.png b/img/watch_slide_14.png new file mode 100644 index 0000000..c80d526 Binary files /dev/null and b/img/watch_slide_14.png differ diff --git a/img/watch_slide_15.png b/img/watch_slide_15.png new file mode 100644 index 0000000..facee37 Binary files /dev/null and b/img/watch_slide_15.png differ diff --git a/img/watch_slide_6.png b/img/watch_slide_6.png new file mode 100644 index 0000000..c7df9f2 Binary files /dev/null and b/img/watch_slide_6.png differ diff --git a/img/watch_slide_7.png b/img/watch_slide_7.png new file mode 100644 index 0000000..44d7285 Binary files /dev/null and b/img/watch_slide_7.png differ diff --git a/img/watch_slide_8.png b/img/watch_slide_8.png new file mode 100644 index 0000000..92cb228 Binary files /dev/null and b/img/watch_slide_8.png differ diff --git a/img/watch_slide_9.png b/img/watch_slide_9.png new file mode 100644 index 0000000..8386135 Binary files /dev/null and b/img/watch_slide_9.png differ diff --git a/index.html b/index.html index 447dbff..2cc5b16 100644 --- a/index.html +++ b/index.html @@ -28,20 +28,26 @@ +
-

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

-

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

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

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

+

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

+
+ Выбрать Telmi +


+

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

@@ -63,35 +69,105 @@
- -
+ + + + + +
+
+

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

+
+
+
👆
+

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

+

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

+
+
+
👂
+

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

+

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

+
+
+
🎙️
+

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

+

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

+
+
+
+
+ + +
+

Как использовать смарт-часы Telmi?

-
-
-
-

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

-
-
-
👆
-

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

-

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

-
-
-
👂
-

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

-

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

-
-
-
🎙️
-

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

-

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

-
+
+ + +
+
+

Польза Telmi при конкретных нарушениях

+
+
+ 🧩 +

Аутизм (РАС)

+

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

+

Иконки с озвучкой, простые фразы, SOS-кнопка

+
+
+ 🗣️ +

Алалия (моторная/сенсорная)

+

Заменяет или дополняет устную речь

+

Иконки с действиями и предметами

+
+
+ 🧠 +

Афазия (после инсульта/ЧМТ)

+

Восстанавливает базовую коммуникацию

+

Предустановленные фразы, персонализированные кнопки

+
+
+ ♿ +

ДЦП (с нарушением речи)

+

Обеспечивает способ общения при сохранённом интеллекте

+

Простое меню, голосовой выход, иконки

+
+
+ 🧠 +

Интеллектуальные нарушения

+

Облегчает понимание и взаимодействие с окружающими

+

Минималистичный интерфейс, визуальная поддержка

+
+
+ 👶 +

Синдром Дауна

+

Развивает коммуникационные навыки, помогает в социализации

+

Речевые шаблоны, обучение простым фразам

+
+
+ 🫁 +

БАС / болезнь Паркинсона

+

Позволяет продолжать общение на поздних стадиях заболевания

+

Большие кнопки, быстрые фразы, SOS-сигнал

+
+
+ 👂 +

Глухонемота / тугоухость

+

Служит универсальным способом общения без необходимости речи

+

Визуальные и текстовые элементы, виброотклик

+
+
+ 🏥 +

Послеоперационные состояния

+

Временная замена речи (например, после операций на гортани)

+

Предустановленные фразы и простые команды

@@ -171,25 +247,66 @@
+
+

Где купить Telmi?

+
- Telmi Smart Watch + +
+ Telmi Watch Slide 1 + Telmi Watch Slide 2 + Telmi Watch Slide 3 + Telmi Watch Slide 4 + Telmi Watch Slide 5 + Telmi Watch Slide 6 + Telmi Watch Slide 7 + Telmi Watch Slide 8 + Telmi Watch Slide 9 + Telmi Watch Slide 10 +
-

Где купить Telmi?

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

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

+

Осталось 15 штук по акции
+Напишите нам для уточнения делатей заказа +

+
+
@@ -210,6 +327,18 @@

support@mytelmi.ru

+ + +
+
+ × +
+ Enlarged view +
+ + +
+
\ No newline at end of file diff --git a/js/script.js b/js/script.js index 87164eb..022d7ba 100644 --- a/js/script.js +++ b/js/script.js @@ -1,3 +1,25 @@ +$(document).ready(function() { + // Watch slider animation + let currentSlide = 0; + const slides = $('.slide'); + const totalSlides = slides.length; + + function showSlide(n) { + slides.removeClass('active'); + slides.eq(n).addClass('active'); + } + + function nextSlide() { + currentSlide = (currentSlide + 1) % totalSlides; + showSlide(currentSlide); + } + + // Start auto-rotation every 3 seconds + setInterval(nextSlide, 3000); + + // Initialize first slide + showSlide(0); +}); // Mobile menu toggle const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navLinks = document.querySelector('.nav-links'); @@ -82,4 +104,84 @@ cardsWrapper.addEventListener('scroll', checkScrollPosition); reviewsWrapper.addEventListener('scroll', checkScrollPosition); window.addEventListener('resize', checkScrollPosition); // Initial check -checkScrollPosition(); \ No newline at end of file +checkScrollPosition(); + +// Watch slider functionality +$(document).ready(function() { + const slider = $('.cta-image'); + const images = [ + 'img/watch_slide_6.png', + 'img/watch_slide_7.png', + 'img/watch_slide_8.png', + 'img/watch_slide_9.png', + 'img/watch_slide_10.png', + 'img/watch_slide_11.png', + 'img/watch_slide_12.png', + 'img/watch_slide_13.png', + 'img/watch_slide_14.png', + 'img/watch_slide_15.png' + ]; + + // Replace img with slider container + slider.html('
'); + const container = $('.slider-container'); + + // Add all images to slider (hidden except first) + images.forEach((img, index) => { + container.append(`Telmi Watch`); + }); + + // Auto-rotate slides + let currentIndex = 0; + setInterval(() => { + currentIndex = (currentIndex + 1) % images.length; + $('.slide.active').fadeOut(500, function() { + $(this).removeClass('active'); + $(`.slide:eq(${currentIndex})`).fadeIn(500).addClass('active'); + }); + }, 3000); + + // Modal functionality + let currentModalIndex = 0; + + $('.slide').click(function() { + currentModalIndex = $(this).index('.slide'); + updateModalImage(); + $('.modal-overlay').addClass('active'); + }); + + function updateModalImage() { + const imgSrc = images[currentModalIndex]; + $('.modal-image').attr('src', imgSrc); + } + + $('.modal-nav.prev').click(function(e) { + e.stopPropagation(); + currentModalIndex = (currentModalIndex - 1 + images.length) % images.length; + updateModalImage(); + }); + + $('.modal-nav.next').click(function(e) { + e.stopPropagation(); + currentModalIndex = (currentModalIndex + 1) % images.length; + updateModalImage(); + }); + + $('.close-modal').click(function() { + $('.modal-overlay').removeClass('active'); + }); + + // Close modal when clicking outside image + $(document).click(function(e) { + if ($(e.target).hasClass('modal-overlay')) { + $('.modal-overlay').removeClass('active'); + } + }); + + // Close modal with ESC key + $(document).keyup(function(e) { + if (e.key === "Escape") { + $('.modal-overlay').removeClass('active'); + } + }); +}); \ No newline at end of file