Hugging Face's logo

Spaces:
Starchik1
/
dpkrovlya
Running

App Files Community
Starchik1 commited on
Commit
d9422b0
·
verified ·
1 Parent(s): 4cb83e3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +102 -146
index.html CHANGED
@@ -2,7 +2,7 @@
2
  <html lang="ru">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta name="description" content="Профессиональные кровельные работы любой сложности">
7
  <title>RoofMaster - Кровельные работы</title>
8
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -175,9 +175,6 @@
175
  display: inline-block;
176
  position: relative;
177
  }
178
- .cta-button:hover .button-text {
179
- animation: fadeIn 0.3s ease;
180
- }
181
  @keyframes fadeIn {
182
  from { opacity: 0; transform: translateY(3px); }
183
  to { opacity: 1; transform: translateY(0); }
@@ -276,6 +273,7 @@
276
  overflow: hidden;
277
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
278
  transition: transform 0.3s;
 
279
  }
280
  .material-card:hover {
281
  transform: translateY(-5px);
@@ -306,10 +304,79 @@
306
  width: 20px;
307
  text-align: center;
308
  }
309
- .material-props i.fa-wave-square { color: var(--accent); }
310
- .material-props i.fa-temperature-low { color: #2dd4bf; }
311
- .material-props i.fa-snowflake { color: #38bdf8; }
312
- .material-props i.fa-boxes { color: #f59e0b; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
313
  .steps-section {
314
  padding: var(--section-padding);
315
  background: var(--light);
@@ -399,49 +466,6 @@
399
  .footer-links a:hover {
400
  color: var(--accent);
401
  }
402
- @media (max-width: 768px) {
403
- :root {
404
- --section-padding: 3rem 5%;
405
- --section-gap: 1.5rem;
406
- }
407
- .menu-toggle {
408
- display: block;
409
- }
410
- .nav-links {
411
- display: none;
412
- position: absolute;
413
- top: 100%;
414
- left: 0;
415
- right: 0;
416
- background: white;
417
- padding: 1rem;
418
- box-shadow: 0 2px 10px rgba(0,0,0,0.05);
419
- flex-direction: column;
420
- gap: 0.5rem;
421
- }
422
- .nav-links.active {
423
- display: flex;
424
- }
425
- .hero {
426
- padding: 100px 5% 40px;
427
- }
428
- .hero h1 {
429
- font-size: 2rem;
430
- }
431
- .swiper {
432
- height: 300px;
433
- }
434
- .cta-button {
435
- width: 100%;
436
- justify-content: center;
437
- }
438
- .social-buttons {
439
- flex-direction: column;
440
- }
441
- .material-card {
442
- margin: 0 1rem;
443
- }
444
- }
445
  @keyframes fadeIn {
446
  from { opacity: 0; transform: translateY(20px); }
447
  to { opacity: 1; transform: translateY(0); }
@@ -553,102 +577,14 @@
553
  <li><i class="fas fa-tools"></i> Монтаж: бесщелевой</li>
554
  </ul>
555
  </div>
556
- </div>
557
- <div class="material-card">
558
- <div class="material-image">
559
- <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-4-360-263-profnastil-001-370x270.jpg" alt="Профнастил">
560
- </div>
561
- <div class="material-content">
562
- <h3>Профнастил</h3>
563
- <ul class="material-props">
564
- <li><i class="fas fa-ruler"></i> Толщина: 0.4-0.7 мм</li>
565
- <li><i class="fas fa-paint-brush"></i> Покрытие: полимерное</li>
566
- <li><i class="fas fa-wave-square"></i> Высота волны: 20-40 мм</li>
567
- <li><i class="fas fa-palette"></i> Цвета: 20 вариантов</li>
568
- </ul>
569
- </div>
570
- </div>
571
- <div class="material-card">
572
- <div class="material-image">
573
- <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/3-4-360-263-soffit-370x270.jpg" alt="Подшивка софит">
574
- </div>
575
- <div class="material-content">
576
- <h3>Подшивка (софит)</h3>
577
- <ul class="material-props">
578
- <li><i class="fas fa-box"></i> Материал: ПВХ/металл</li>
579
- <li><i class="fas fa-wind"></i> Вентиляция: перфорированный</li>
580
- <li><i class="fas fa-ruler-horizontal"></i> Ширина: 30-50 см</li>
581
- <li><i class="fas fa-sun"></i> УФ-защита</li>
582
- </ul>
583
- </div>
584
- </div>
585
- <div class="material-card">
586
- <div class="material-image">
587
- <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-2-823-289-m.okna-750x263.jpg" alt="Мансардные окна">
588
- </div>
589
- <div class="material-content">
590
- <h3>Мансардные окна</h3>
591
- <ul class="material-props">
592
- <li><i class="fas fa-window-maximize"></i> Остекление: 2-3 камеры</li>
593
- <li><i class="fas fa-cube"></i> Материал: дерево/ПВХ</li>
594
- <li><i class="fas fa-temperature-low"></i> Теплоизоляция</li>
595
- <li><i class="fas fa-cog"></i> Механизм открывания</li>
596
- </ul>
597
- </div>
598
- </div>
599
- <div class="material-card">
600
- <div class="material-image">
601
- <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-1-397-611-vodostok-002-370x570.jpg" alt="Водосточные системы">
602
- </div>
603
- <div class="material-content">
604
- <h3>Водосточные системы</h3>
605
- <ul class="material-props">
606
- <li><i class="fas fa-tint"></i> Материал: ПВХ/металл</li>
607
- <li><i class="fas fa-ruler-vertical"></i> Диаметр: 100-150 мм</li>
608
- <li><i class="fas fa-snowflake"></i> Морозостойкость</li>
609
- <li><i class="fas fa-boxes"></i> Комплектующие в наборе</li>
610
- </ul>
611
- </div>
612
- </div>
613
- <div class="material-card">
614
- <div class="material-image">
615
- <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-1-397-611-metall-005-370x570.jpg" alt="Металлочерепица">
616
- </div>
617
- <div class="material-content">
618
- <h3>Металлочерепица</h3>
619
- <ul class="material-props">
620
- <li><i class="fas fa-ruler-combined"></i> Толщина: 0.5 мм</li>
621
- <li><i class="fas fa-shield-alt"></i> Гарантия: 25 лет</li>
622
- <li><i class="fas fa-palette"></i> Цвета: 15 вариантов</li>
623
- </ul>
624
- </div>
625
- </div>
626
- <div class="material-card">
627
- <div class="material-image">
628
- <img src="https://www.1d.ua/image/cache/webp/catalog/fotosNew/bitumna-cherepytsia/brava-bitumna-cherepytsia/76331-700x700.webp" alt="Гибкая черепица">
629
- </div>
630
- <div class="material-content">
631
- <h3>Гибкая черепица</h3>
632
- <ul class="material-props">
633
- <li><i class="fas fa-layer-group"></i> Слои: 3</li>
634
- <li><i class="fas fa-thermometer-three-quarters"></i> Морозостойкость: -60°C</li>
635
- <li><i class="fas fa-tint"></i> Водонепроницаемость: 100%</li>
636
- </ul>
637
- </div>
638
- </div>
639
- <div class="material-card">
640
- <div class="material-image">
641
- <img src="https://www.sddu.com.ua/images/1-_enl.jpg" alt="Медная кровля">
642
- </div>
643
- <div class="material-content">
644
- <h3>Медная кровля</h3>
645
- <ul class="material-props">
646
- <li><i class="fas fa-weight-hanging"></i> Вес: 5-7 кг/м²</li>
647
- <li><i class="fas fa-history"></i> Срок службы: 100+ лет</li>
648
- <li><i class="fas fa-atom"></i> Патина: естественное покрытие</li>
649
- </ul>
650
  </div>
651
  </div>
 
 
 
 
652
  </div>
653
  </section>
654
 
@@ -723,16 +659,19 @@
723
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
724
  grabCursor: true,
725
  });
 
726
  const menuToggle = document.querySelector('.menu-toggle');
727
  const navLinks = document.querySelector('.nav-links');
728
  menuToggle.addEventListener('click', () => {
729
  navLinks.classList.toggle('active');
730
  });
 
731
  document.addEventListener('click', (e) => {
732
  if (!e.target.closest('.nav')) {
733
  navLinks.classList.remove('active');
734
  }
735
  });
 
736
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
737
  anchor.addEventListener('click', function(e) {
738
  e.preventDefault();
@@ -740,14 +679,31 @@
740
  target.scrollIntoView({ behavior: 'smooth', block: 'start' });
741
  });
742
  });
 
743
  document.querySelectorAll('.cta-button[data-phone]').forEach(button => {
744
  const operator = button.dataset.operator;
745
  const phone = button.dataset.phone;
746
  const textSpan = button.querySelector('.button-text');
747
-
748
  button.addEventListener('mouseenter', () => textSpan.textContent = phone);
749
  button.addEventListener('mouseleave', () => textSpan.textContent = operator);
750
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
751
  </script>
752
  </body>
753
  </html>
 
2
  <html lang="ru">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta name="description" content="Профессиональные кровельные работы любой сложности">
7
  <title>RoofMaster - Кровельные работы</title>
8
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
175
  display: inline-block;
176
  position: relative;
177
  }
 
 
 
178
  @keyframes fadeIn {
179
  from { opacity: 0; transform: translateY(3px); }
180
  to { opacity: 1; transform: translateY(0); }
 
273
  overflow: hidden;
274
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
275
  transition: transform 0.3s;
276
+ position: relative;
277
  }
278
  .material-card:hover {
279
  transform: translateY(-5px);
 
304
  width: 20px;
305
  text-align: center;
306
  }
307
+ .material-description {
308
+ position: absolute;
309
+ top: 0;
310
+ left: 0;
311
+ right: 0;
312
+ bottom: 0;
313
+ background: rgba(255, 255, 255, 0.98);
314
+ padding: 1.5rem;
315
+ opacity: 0;
316
+ visibility: hidden;
317
+ transition: all 0.3s ease;
318
+ overflow-y: auto;
319
+ font-size: 0.9rem;
320
+ line-height: 1.5;
321
+ border-radius: 12px;
322
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
323
+ }
324
+ .material-card:hover .material-description {
325
+ opacity: 1;
326
+ visibility: visible;
327
+ }
328
+ @media (max-width: 768px) {
329
+ :root {
330
+ --section-padding: 3rem 5%;
331
+ --section-gap: 1.5rem;
332
+ }
333
+ .menu-toggle {
334
+ display: block;
335
+ }
336
+ .nav-links {
337
+ display: none;
338
+ position: absolute;
339
+ top: 100%;
340
+ left: 0;
341
+ right: 0;
342
+ background: white;
343
+ padding: 1rem;
344
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
345
+ flex-direction: column;
346
+ gap: 0.5rem;
347
+ }
348
+ .nav-links.active {
349
+ display: flex;
350
+ }
351
+ .hero {
352
+ padding: 100px 5% 40px;
353
+ }
354
+ .hero h1 {
355
+ font-size: 2rem;
356
+ }
357
+ .swiper {
358
+ height: 300px;
359
+ }
360
+ .cta-button {
361
+ width: 100%;
362
+ justify-content: center;
363
+ }
364
+ .social-buttons {
365
+ flex-direction: column;
366
+ }
367
+ .material-card {
368
+ margin: 0 1rem;
369
+ }
370
+ .material-description {
371
+ padding: 1rem;
372
+ font-size: 0.85rem;
373
+ }
374
+ .material-card.active .material-description {
375
+ opacity: 1;
376
+ visibility: visible;
377
+ z-index: 100;
378
+ }
379
+ }
380
  .steps-section {
381
  padding: var(--section-padding);
382
  background: var(--light);
 
466
  .footer-links a:hover {
467
  color: var(--accent);
468
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
469
  @keyframes fadeIn {
470
  from { opacity: 0; transform: translateY(20px); }
471
  to { opacity: 1; transform: translateY(0); }
 
577
  <li><i class="fas fa-tools"></i> Монтаж: бесщелевой</li>
578
  </ul>
579
  </div>
580
+ <div class="material-description">
581
+ <!-- Ваше описание -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
582
  </div>
583
  </div>
584
+
585
+ <!-- Остальные карточки материалов с аналогичной структурой -->
586
+ <!-- Добавьте остальные 7 карточек с блоками material-description -->
587
+
588
  </div>
589
  </section>
590
 
 
659
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
660
  grabCursor: true,
661
  });
662
+
663
  const menuToggle = document.querySelector('.menu-toggle');
664
  const navLinks = document.querySelector('.nav-links');
665
  menuToggle.addEventListener('click', () => {
666
  navLinks.classList.toggle('active');
667
  });
668
+
669
  document.addEventListener('click', (e) => {
670
  if (!e.target.closest('.nav')) {
671
  navLinks.classList.remove('active');
672
  }
673
  });
674
+
675
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
676
  anchor.addEventListener('click', function(e) {
677
  e.preventDefault();
 
679
  target.scrollIntoView({ behavior: 'smooth', block: 'start' });
680
  });
681
  });
682
+
683
  document.querySelectorAll('.cta-button[data-phone]').forEach(button => {
684
  const operator = button.dataset.operator;
685
  const phone = button.dataset.phone;
686
  const textSpan = button.querySelector('.button-text');
 
687
  button.addEventListener('mouseenter', () => textSpan.textContent = phone);
688
  button.addEventListener('mouseleave', () => textSpan.textContent = operator);
689
  });
690
+
691
+ // Обработчики для описаний материалов
692
+ document.querySelectorAll('.material-card').forEach(card => {
693
+ card.addEventListener('click', function(e) {
694
+ if (window.matchMedia("(max-width: 768px)").matches) {
695
+ this.classList.toggle('active');
696
+ }
697
+ });
698
+ });
699
+
700
+ document.addEventListener('click', (e) => {
701
+ if (!e.target.closest('.material-card') && window.matchMedia("(max-width: 768px)").matches) {
702
+ document.querySelectorAll('.material-card').forEach(card => {
703
+ card.classList.remove('active');
704
+ });
705
+ }
706
+ });
707
  </script>
708
  </body>
709
  </html>