add img and reslyle page
This commit is contained in:
parent
1d7d611282
commit
1801fa0c48
360
css/styles.css
360
css/styles.css
@ -113,13 +113,14 @@ header::after {
|
|||||||
.header-content {
|
.header-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
max-width: 800px;
|
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
.header-content h1 {
|
.header-content h1 {
|
||||||
font-size: 2.8rem;
|
font-size: 1.8rem;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
margin-top: 40px;
|
||||||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||||
|
|
||||||
}
|
}
|
||||||
.header-content p {
|
.header-content p {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
@ -155,31 +156,27 @@ header::after {
|
|||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Video Background Section */
|
/* Video Section */
|
||||||
.video-section {
|
.video-section {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Video Block */
|
||||||
.video-container {
|
.video-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 56.25%; /* 16:9 aspect ratio */
|
||||||
|
margin: 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container iframe {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: -1;
|
border: none;
|
||||||
}
|
|
||||||
.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 {
|
.video-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -199,7 +196,24 @@ header::after {
|
|||||||
|
|
||||||
/* Section Styling */
|
/* Section Styling */
|
||||||
.section {
|
.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 {
|
.section-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -326,8 +340,8 @@ header::after {
|
|||||||
|
|
||||||
/* Testimonials - голубой градиент */
|
/* Testimonials - голубой градиент */
|
||||||
.reviews-section {
|
.reviews-section {
|
||||||
background: linear-gradient(135deg, var(--blue), #2980b9);
|
|
||||||
color: white;
|
background-image: url('../img/19007.jpg');
|
||||||
}
|
}
|
||||||
.reviews-container {
|
.reviews-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -374,7 +388,7 @@ header::after {
|
|||||||
.review-card {
|
.review-card {
|
||||||
flex: 0 0 calc(50% - 15px);
|
flex: 0 0 calc(50% - 15px);
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
background: rgba(255,255,255,0.15);
|
background: rgba(255,255,255,0.65);
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||||
@ -422,11 +436,149 @@ header::after {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
.cta-image img {
|
.cta-image .slider-container {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: 400px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-image .slide {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
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 {
|
.cta-text {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -468,9 +620,75 @@ header::after {
|
|||||||
height: 50px;
|
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 */
|
||||||
footer {
|
footer {
|
||||||
background-color: var(--dark);
|
background-color:#023d60;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 30px 0;
|
padding: 30px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -539,11 +757,17 @@ footer {
|
|||||||
header {
|
header {
|
||||||
height: calc(50vh - 70px);
|
height: calc(50vh - 70px);
|
||||||
}
|
}
|
||||||
|
.header-content {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
.header-content h1 {
|
.header-content h1 {
|
||||||
font-size: 2rem;
|
margin-top: 40px;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
.header-content p {
|
.header-content p {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
margin-bottom: 25px;
|
||||||
}
|
}
|
||||||
.cta-buttons {
|
.cta-buttons {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -554,9 +778,8 @@ footer {
|
|||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
.video-section {
|
.video-container {
|
||||||
height: auto;
|
margin: 20px 0;
|
||||||
min-height: 70vh;
|
|
||||||
}
|
}
|
||||||
.video-content .container {
|
.video-content .container {
|
||||||
padding: 60px 20px;
|
padding: 60px 20px;
|
||||||
@ -580,4 +803,83 @@ footer {
|
|||||||
.section {
|
.section {
|
||||||
padding: 60px 0;
|
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 |
199
index.html
199
index.html
@ -28,20 +28,26 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
<!-- Header with Background Image -->
|
<!-- Header with Background Image -->
|
||||||
<header>
|
<header>
|
||||||
<div class="header-content">
|
<div class="header-content">
|
||||||
<h1>Умные часы, которые говорят за вас!</h1>
|
|
||||||
<p>Telmi помогает людям с особенностями речи легко общаться с миром, выражать свои желания и получать поддержку.</p>
|
|
||||||
<div class="cta-buttons">
|
|
||||||
<a href="#order" class="btn btn-primary">Выбрать Telmi</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Who is it for -->
|
<!-- Who is it for -->
|
||||||
|
|
||||||
<section class="section who-section" id="who-is-it-for">
|
<section class="section who-section" id="who-is-it-for">
|
||||||
<div class="container">
|
<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>
|
<h2 class="section-title">Кому подойдет Telmi?</h2>
|
||||||
<div class="user-types">
|
<div class="user-types">
|
||||||
<div class="user-card">
|
<div class="user-card">
|
||||||
@ -63,35 +69,105 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</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">
|
<div class="video-container">
|
||||||
<iframe
|
<iframe
|
||||||
src="https://www.youtube.com/embed/7Ell_V8V6es?autoplay=1&mute=1&loop=1&playlist=7Ell_V8V6es&controls=0"
|
src="https://www.youtube.com/embed/7Ell_V8V6es?autoplay=1&mute=1&loop=1&playlist=7Ell_V8V6es&controls=0"
|
||||||
frameborder="0"
|
frameborder="0"
|
||||||
allow="accelerometer; autoplay; encrypted-media; gyroscope"
|
allow="accelerometer; autoplay; encrypted-media; gyroscope"
|
||||||
allowfullscreen>
|
allowfullscreen>
|
||||||
</iframe>
|
</iframe>
|
||||||
</div>
|
</div>
|
||||||
<div class="video-content">
|
</section>
|
||||||
<div class="container">
|
|
||||||
<h2 class="section-title" style="color: white;">Как работает Telmi?</h2>
|
<!-- Disease/Condition Help Table -->
|
||||||
<div class="features">
|
<section class="section">
|
||||||
<div class="feature-card">
|
<div class="container">
|
||||||
<div class="feature-icon">👆</div>
|
<h2 class="section-title">Польза Telmi при конкретных нарушениях</h2>
|
||||||
<h3>Выбираете иконку</h3>
|
<div class="disease-grid">
|
||||||
<p>Часы мгновенно озвучивают ваш запрос понятным голосом</p>
|
<div class="disease-card">
|
||||||
</div>
|
<span class="disease-icon">🧩</span>
|
||||||
<div class="feature-card">
|
<h3>Аутизм (РАС)</h3>
|
||||||
<div class="feature-icon">👂</div>
|
<p class="help-text">Помогает выражать потребности, эмоции, снижает уровень стресса</p>
|
||||||
<h3>Получаете ответ</h3>
|
<p class="features-text">Иконки с озвучкой, простые фразы, SOS-кнопка</p>
|
||||||
<p>Родители, учителя или близкие сразу понимают вашу потребность</p>
|
</div>
|
||||||
</div>
|
<div class="disease-card">
|
||||||
<div class="feature-card">
|
<span class="disease-icon">🗣️</span>
|
||||||
<div class="feature-icon">🎙️</div>
|
<h3>Алалия (моторная/сенсорная)</h3>
|
||||||
<h3>Используете ассистента</h3>
|
<p class="help-text">Заменяет или дополняет устную речь</p>
|
||||||
<p>Голосовой помощник выполняет команды и напоминает о важном</p>
|
<p class="features-text">Иконки с действиями и предметами</p>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -171,25 +247,66 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<!-- CTA Section -->
|
<!-- CTA Section -->
|
||||||
<section class="cta-section" id="order">
|
<section class="cta-section" id="order">
|
||||||
|
<h2>Где купить Telmi?</h2>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="cta-content">
|
<div class="cta-content">
|
||||||
|
|
||||||
<div class="cta-image">
|
<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>
|
||||||
<div class="cta-text">
|
<div class="cta-text">
|
||||||
<h2>Где купить Telmi?</h2>
|
|
||||||
<div class="discount-badge">Акция: скидка 10% сегодня!</div>
|
<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="price">14 990 ₽ <span style="text-decoration: line-through; opacity: 0.7; font-size: 1.5rem;">16 990 ₽</span></div>
|
||||||
<div class="payment-container">
|
<div class="payment-container">
|
||||||
<iframe
|
<iframe
|
||||||
src="https://yoomoney.ru/quickpay/fundraise/button?billNumber=19ACK72QFDN.250330&"
|
src="https://yoomoney.ru/quickpay/fundraise/button?billNumber=19ACK72QFDN.250330&"
|
||||||
frameborder="0"
|
frameborder="0"
|
||||||
scrolling="no">
|
scrolling="no">
|
||||||
</iframe>
|
</iframe>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -210,6 +327,18 @@
|
|||||||
<p>support@mytelmi.ru</p>
|
<p>support@mytelmi.ru</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||||
<script src="js/script.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
104
js/script.js
104
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
|
// Mobile menu toggle
|
||||||
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
|
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
|
||||||
const navLinks = document.querySelector('.nav-links');
|
const navLinks = document.querySelector('.nav-links');
|
||||||
@ -82,4 +104,84 @@ cardsWrapper.addEventListener('scroll', checkScrollPosition);
|
|||||||
reviewsWrapper.addEventListener('scroll', checkScrollPosition);
|
reviewsWrapper.addEventListener('scroll', checkScrollPosition);
|
||||||
window.addEventListener('resize', checkScrollPosition);
|
window.addEventListener('resize', checkScrollPosition);
|
||||||
// Initial check
|
// Initial check
|
||||||
checkScrollPosition();
|
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