add img and reslyle page
This commit is contained in:
199
index.html
199
index.html
@@ -28,20 +28,26 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Header with Background Image -->
|
||||
<header>
|
||||
<div class="header-content">
|
||||
<h1>Умные часы, которые говорят за вас!</h1>
|
||||
<p>Telmi помогает людям с особенностями речи легко общаться с миром, выражать свои желания и получать поддержку.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="#order" class="btn btn-primary">Выбрать Telmi</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Who is it for -->
|
||||
|
||||
<section class="section who-section" id="who-is-it-for">
|
||||
<div class="container">
|
||||
<div class="header-content">
|
||||
<h1>Умные часы, которые говорят за вас!</h1>
|
||||
<p>Telmi помогает людям с особенностями речи легко общаться с миром, выражать свои желания и получать поддержку.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="#order" class="btn btn-primary">Выбрать Telmi</a>
|
||||
</div></div><br><br>
|
||||
|
||||
<h2 class="section-title">Кому подойдет Telmi?</h2>
|
||||
<div class="user-types">
|
||||
<div class="user-card">
|
||||
@@ -63,35 +69,105 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Video Background Section -->
|
||||
<section class="video-section" id="how-it-works">
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- How It Works Section -->
|
||||
<section class="section" id="how-it-works">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Как работает Telmi?</h2>
|
||||
<div class="features">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">👆</div>
|
||||
<h3>Выбираете иконку</h3>
|
||||
<p>Часы мгновенно озвучивают ваш запрос понятным голосом</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">👂</div>
|
||||
<h3>Получаете ответ</h3>
|
||||
<p>Родители, учителя или близкие сразу понимают вашу потребность</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎙️</div>
|
||||
<h3>Используете ассистента</h3>
|
||||
<p>Голосовой помощник выполняет команды и напоминает о важном</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Video Block -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">Как использовать смарт-часы Telmi?</h2>
|
||||
<div class="video-container">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/7Ell_V8V6es?autoplay=1&mute=1&loop=1&playlist=7Ell_V8V6es&controls=0"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope"
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/7Ell_V8V6es?autoplay=1&mute=1&loop=1&playlist=7Ell_V8V6es&controls=0"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<div class="container">
|
||||
<h2 class="section-title" style="color: white;">Как работает Telmi?</h2>
|
||||
<div class="features">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">👆</div>
|
||||
<h3>Выбираете иконку</h3>
|
||||
<p>Часы мгновенно озвучивают ваш запрос понятным голосом</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">👂</div>
|
||||
<h3>Получаете ответ</h3>
|
||||
<p>Родители, учителя или близкие сразу понимают вашу потребность</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎙️</div>
|
||||
<h3>Используете ассистента</h3>
|
||||
<p>Голосовой помощник выполняет команды и напоминает о важном</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Disease/Condition Help Table -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Польза Telmi при конкретных нарушениях</h2>
|
||||
<div class="disease-grid">
|
||||
<div class="disease-card">
|
||||
<span class="disease-icon">🧩</span>
|
||||
<h3>Аутизм (РАС)</h3>
|
||||
<p class="help-text">Помогает выражать потребности, эмоции, снижает уровень стресса</p>
|
||||
<p class="features-text">Иконки с озвучкой, простые фразы, SOS-кнопка</p>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<span class="disease-icon">🗣️</span>
|
||||
<h3>Алалия (моторная/сенсорная)</h3>
|
||||
<p class="help-text">Заменяет или дополняет устную речь</p>
|
||||
<p class="features-text">Иконки с действиями и предметами</p>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<span class="disease-icon">🧠</span>
|
||||
<h3>Афазия (после инсульта/ЧМТ)</h3>
|
||||
<p class="help-text">Восстанавливает базовую коммуникацию</p>
|
||||
<p class="features-text">Предустановленные фразы, персонализированные кнопки</p>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<span class="disease-icon">♿</span>
|
||||
<h3>ДЦП (с нарушением речи)</h3>
|
||||
<p class="help-text">Обеспечивает способ общения при сохранённом интеллекте</p>
|
||||
<p class="features-text">Простое меню, голосовой выход, иконки</p>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<span class="disease-icon">🧠</span>
|
||||
<h3>Интеллектуальные нарушения</h3>
|
||||
<p class="help-text">Облегчает понимание и взаимодействие с окружающими</p>
|
||||
<p class="features-text">Минималистичный интерфейс, визуальная поддержка</p>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<span class="disease-icon">👶</span>
|
||||
<h3>Синдром Дауна</h3>
|
||||
<p class="help-text">Развивает коммуникационные навыки, помогает в социализации</p>
|
||||
<p class="features-text">Речевые шаблоны, обучение простым фразам</p>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<span class="disease-icon">🫁</span>
|
||||
<h3>БАС / болезнь Паркинсона</h3>
|
||||
<p class="help-text">Позволяет продолжать общение на поздних стадиях заболевания</p>
|
||||
<p class="features-text">Большие кнопки, быстрые фразы, SOS-сигнал</p>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<span class="disease-icon">👂</span>
|
||||
<h3>Глухонемота / тугоухость</h3>
|
||||
<p class="help-text">Служит универсальным способом общения без необходимости речи</p>
|
||||
<p class="features-text">Визуальные и текстовые элементы, виброотклик</p>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<span class="disease-icon">🏥</span>
|
||||
<h3>Послеоперационные состояния</h3>
|
||||
<p class="help-text">Временная замена речи (например, после операций на гортани)</p>
|
||||
<p class="features-text">Предустановленные фразы и простые команды</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,25 +247,66 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section" id="order">
|
||||
<h2>Где купить Telmi?</h2>
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
|
||||
<div class="cta-image">
|
||||
<img src="https://i0.wp.com/mytelmi.es/wp-content/uploads/2023/10/Telmi-Smart-Wach.png" alt="Telmi Smart Watch">
|
||||
|
||||
<div class="slider-container">
|
||||
<img src="img/watch_slide_6.png" class="slide active" alt="Telmi Watch Slide 1">
|
||||
<img src="img/watch_slide_7.png" class="slide" alt="Telmi Watch Slide 2">
|
||||
<img src="img/watch_slide_8.png" class="slide" alt="Telmi Watch Slide 3">
|
||||
<img src="img/watch_slide_9.png" class="slide" alt="Telmi Watch Slide 4">
|
||||
<img src="img/watch_slide_10.png" class="slide" alt="Telmi Watch Slide 5">
|
||||
<img src="img/watch_slide_11.png" class="slide" alt="Telmi Watch Slide 6">
|
||||
<img src="img/watch_slide_12.png" class="slide" alt="Telmi Watch Slide 7">
|
||||
<img src="img/watch_slide_13.png" class="slide" alt="Telmi Watch Slide 8">
|
||||
<img src="img/watch_slide_14.png" class="slide" alt="Telmi Watch Slide 9">
|
||||
<img src="img/watch_slide_15.png" class="slide" alt="Telmi Watch Slide 10">
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-text">
|
||||
<h2>Где купить Telmi?</h2>
|
||||
|
||||
<div class="discount-badge">Акция: скидка 10% сегодня!</div>
|
||||
<div class="price">14 990 ₽ <span style="text-decoration: line-through; opacity: 0.7; font-size: 1.5rem;">16 990 ₽</span></div>
|
||||
<div class="payment-container">
|
||||
<iframe
|
||||
src="https://yoomoney.ru/quickpay/fundraise/button?billNumber=19ACK72QFDN.250330&"
|
||||
<iframe
|
||||
src="https://yoomoney.ru/quickpay/fundraise/button?billNumber=19ACK72QFDN.250330&"
|
||||
frameborder="0"
|
||||
scrolling="no">
|
||||
</iframe>
|
||||
</div>
|
||||
<p class="urgency">Осталось 15 штук по акции</p>
|
||||
<p class="urgency">Осталось 15 штук по акции<br>
|
||||
Напишите нам для уточнения делатей заказа
|
||||
</p>
|
||||
</div>
|
||||
<div class="social-embeds">
|
||||
<h2 class="section-title">Мы в соцсетях</h2>
|
||||
<div class="embeds-container">
|
||||
<div class="embed-wrapper">
|
||||
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/reel/DIZEZjJANOO/?utm_source=ig_web_copy_link&igsh=ZDNlZDc0MzIxNw%3D%3D" data-instgrm-version="14">
|
||||
<div style="padding:16px;">
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<div style="background-color: #F4F4F4; border-radius: 50%; height: 40px; width: 40px;"></div>
|
||||
</div>
|
||||
<div style="padding: 19% 0;"></div>
|
||||
<div style="display:block; height:50px; margin:0 auto 12px; width:50px;"></div>
|
||||
<div style="padding-top: 8px;">
|
||||
<div style="color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;">View this post on Instagram</div>
|
||||
</div>
|
||||
<div style="padding: 12.5% 0;"></div>
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<div style="background-color: #F4F4F4; height: 12.5px; width: 12.5px; transform: rotate(45deg) translateX(3px) translateY(1px);"></div>
|
||||
<div style="background-color: #F4F4F4; height: 12.5px; width: 12.5px; transform: rotate(-45deg) translateX(-3px) translateY(1px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -210,6 +327,18 @@
|
||||
<p>support@mytelmi.ru</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
<script async src="//www.instagram.com/embed.js"></script>
|
||||
<div class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<span class="close-modal">×</span>
|
||||
<div class="modal-image-container">
|
||||
<img class="modal-image" src="" alt="Enlarged view">
|
||||
</div>
|
||||
<button class="modal-nav prev"><</button>
|
||||
<button class="modal-nav next">></button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user