add img and reslyle page
This commit is contained in:
parent
1d7d611282
commit
1801fa0c48
358
css/styles.css
358
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
BIN
img/1338.jpg
Normal file
BIN
img/1338.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1009 KiB |
BIN
img/19007.jpg
Normal file
BIN
img/19007.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
BIN
img/5594016.jpg
Normal file
BIN
img/5594016.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
BIN
img/watch_slide_10.png
Normal file
BIN
img/watch_slide_10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
BIN
img/watch_slide_11.png
Normal file
BIN
img/watch_slide_11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
BIN
img/watch_slide_12.png
Normal file
BIN
img/watch_slide_12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
BIN
img/watch_slide_13.png
Normal file
BIN
img/watch_slide_13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 327 KiB |
BIN
img/watch_slide_14.png
Normal file
BIN
img/watch_slide_14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
img/watch_slide_15.png
Normal file
BIN
img/watch_slide_15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
BIN
img/watch_slide_6.png
Normal file
BIN
img/watch_slide_6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 311 KiB |
BIN
img/watch_slide_7.png
Normal file
BIN
img/watch_slide_7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
BIN
img/watch_slide_8.png
Normal file
BIN
img/watch_slide_8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
BIN
img/watch_slide_9.png
Normal file
BIN
img/watch_slide_9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
187
index.html
187
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,8 +69,37 @@
|
||||
</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"
|
||||
@ -73,25 +108,66 @@
|
||||
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,15 +247,30 @@
|
||||
</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">
|
||||
@ -189,7 +280,33 @@
|
||||
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>
|
||||
102
js/script.js
102
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');
|
||||
@ -83,3 +105,83 @@ reviewsWrapper.addEventListener('scroll', checkScrollPosition);
|
||||
window.addEventListener('resize', checkScrollPosition);
|
||||
// Initial check
|
||||
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('<div class="slider-container"></div>');
|
||||
const container = $('.slider-container');
|
||||
|
||||
// Add all images to slider (hidden except first)
|
||||
images.forEach((img, index) => {
|
||||
container.append(`<img src="${img}" class="slide ${index === 0 ? 'active' : ''}" alt="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');
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user