adaptive_1

2026-04-26 20:42:33 +03:00
parent 0932c40127
commit 6b6361b25a
3 changed files with 393 additions and 19 deletions
--- a/server/frontend/main/index.html
+++ b/server/frontend/main/index.html
@@ -13,8 +13,16 @@
 <body>

    <header class="header">
-        <nav class="nav">
+
+        <div class="burger" id="burger">
+        <span></span>
+        <span></span>
+        <span></span>
+        </div>
+
+        <nav class="nav" id="nav">
            <ul class="menu">
+                <div class="items_up">
                <!-- 1 -->
                <li class="item">
                    <a href="#" class="link">
@@ -39,6 +47,8 @@
                        Путешествие
                    </a>
                </li>
+                </div>
+                <div class="items_down">
                <!-- 5 -->
                <li class="item">
                    <a href="#photos" class="link">
@@ -57,6 +67,7 @@
                        Прошу ответить
                    </a>
                </li>
+                </div>
            </ul>
        </nav>
    </header>
@@ -302,7 +313,7 @@
                                Главное управление записи актов гражданского состояния</a>
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2181.349338718406!2d35.901452977352925!3d56.85710390639812!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b687a4d4edacad%3A0x15df9a38c874eb5d!2sGlavnoye%20Upravleniye%20Zapisi%20Aktov%20Grazhdanskogo%20Sostoyaniya%20Tverskoy%20Oblasti!5e0!3m2!1sen!2s!4v1773428540512!5m2!1sen!2s"
-                                width="760" height="500" style="border:1px;" allowfullscreen="true" loading="lazy"
+                                width="100%" height="100%" style="border:1px;" allowfullscreen="" loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                        <p class="map_adress">Тверь, Свободный переулок, 5</p>
@@ -315,7 +326,7 @@
                                style="color:#eee;font-size:12px;position:absolute;top:0px;">Лофт 1870</a>
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1749.675516895515!2d35.86030818806184!3d56.850656040536194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b68764eb0c1387%3A0x7cb135f5414bc1e0!2zTG9mdCAxODcwIHwg0J_Qu9C-0YnQsNC00LrQsCDQtNC70Y8g0LzQtdGA0L7Qv9GA0LjRj9GC0LjQuSDQotCy0LXRgNGMIHwg0LrQtdC50YLQtdGA0LjQvdCzINC90LAg0YHQstCw0LTRjNCx0YMsINCx0LDQvdC60LXRgtC90YvQuSDQt9Cw0Ls!5e0!3m2!1sen!2s!4v1773428705434!5m2!1sen!2s"
-                                width="760" height="500" style="border:1px;" allowfullscreen="true" loading="lazy"
+                                width="100%" height="100%" style="border:1px;" allowfullscreen="" loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                        <p class="map_adress">Тверь, улица Двор Пролетарки, 16</p>
--- a/server/frontend/main/main.js
+++ b/server/frontend/main/main.js
@@ -2,6 +2,8 @@ const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,
+  spaceBetween: 1, // расстояние между слайдами 10-15px
+    slidesPerView: 3,

  // Navigation arrows
  navigation: {
@@ -22,7 +24,7 @@ const swiper = new Swiper('.swiper', {
      1200: {
          slidesPerView: 2,
      },
-      1600: {
+      1650: {
          slidesPerView: 3,
      },
  }
@@ -57,3 +59,20 @@ var x = setInterval(function() {
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
 }, 1000);
+
+
+const burger = document.getElementById('burger');
+const nav = document.getElementById('nav');
+const links = document.querySelectorAll('.menu .link');
+
+burger.addEventListener('click', () => {
+    burger.classList.toggle('active');
+    nav.classList.toggle('active');
+});
+
+links.forEach(link => {
+    link.addEventListener('click', () => {
+        burger.classList.remove('active');
+        nav.classList.remove('active');
+    });
+});
--- a/server/frontend/main/style.css
+++ b/server/frontend/main/style.css
@@ -66,7 +66,16 @@ img {
 }
 .menu {
    display: flex;
-    justify-content: space-between;
+    justify-content: center;
+    gap: 20px;
+}
+.items_up {
+    display: flex;
+    gap: 20px;
+}
+.items_down {
+    display: flex;
+    gap: 20px;
 }
 .item {
    color: #e7b15c;
@@ -86,6 +95,132 @@ img {
    text-decoration: underline;
 }

+/* BURGER */
+.burger {
+    display: none;
+    width: 40px;
+    height: 30px;
+    position: relative;
+    cursor: pointer;
+    z-index: 1001;
+}
+
+.burger span {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: #e7b15c;
+    border-radius: 5px;
+    transition: 0.4s;
+}
+
+/* 3 полоски */
+.burger span:nth-child(1) {
+    top: 0;
+}
+.burger span:nth-child(2) {
+    top: 50%;
+    transform: translateY(-50%);
+}
+.burger span:nth-child(3) {
+    bottom: 0;
+}
+.burger.active span:nth-child(1) {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+}
+
+.burger.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.burger.active span:nth-child(3) {
+    top: 50%;
+    transform: translateY(-50%) rotate(-45deg);
+}
+
+/* MOBILE MENU */
+@media (max-width: 900px) {
+
+    .header {
+        position: fixed;
+        padding: 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        z-index: 100;
+        width: 10%;
+        border-radius: 10px;
+        margin-left: 40px;
+        box-shadow: #444 2px 2px 4px 0px;
+    }
+
+    .burger {
+        display: block;
+        display: flex;
+    }
+
+    .nav {
+    position: fixed;
+    top: 0;
+    left: 0; /* ВАЖНО */
+    width: 100%;
+    height: 100vh;
+
+    background: rgba(102, 60, 36, 0.97);
+    backdrop-filter: blur(12px);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    transform: translateY(-100%);
+    transition: 0.5s ease;
+    z-index: 1000;
+}
+
+.nav.active {
+    transform: translateY(0);
+}
+.nav::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.4));
+}
+
+    .menu {
+        flex-direction: column;
+        gap: 30px;
+        text-align: center;
+    }
+
+    .item {
+        font-size: 28px;
+    }
+
+    .link {
+        position: relative;
+    }
+
+    /* красивый hover эффект */
+    .link::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -5px;
+        width: 0%;
+        height: 2px;
+        background: #e7b15c;
+        transition: 0.3s;
+    }
+
+    .link:hover::after {
+        width: 100%;
+    }
+}
+
 /* --------------------------------Welcome----------------------------- */

 .heading {
@@ -181,6 +316,7 @@ h4 {
    margin-bottom: 40px;
 }
 .newlywed {
+    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
@@ -206,10 +342,11 @@ h4 {
    width: 60%;
 }
 .newlywed_title {
-    font-size: 34px;
+  font-size: 29px;
  font-weight: 700;
-    text-decoration:underline;
+  text-decoration: underline;
  line-height: 1.5;
+  margin-bottom: 15px;
 }
 .newlywed_info {
    font-size: 26px;
@@ -331,6 +468,7 @@ h4 {
    margin-top: 60px;
 }
 .transfer_map {
+    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
@@ -338,17 +476,25 @@ h4 {
 }
 .map > div {
    border: 1px solid #000;
+    width: 760px;   /* или 100% */
+    height: 500px;
+}
+.map iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
 }
 .map_adress {
    font-size: 50px;
    text-align: center;
-    text-decoration: underline;
    margin-top: 20px;
+    font-weight: 900;
 }
 .map_info {
    font-size: 50px;
    text-align: center;
    margin-top: 10px;
+    font-weight: 900;
 }
 .map_time {
    font-size: 50px;
@@ -360,7 +506,7 @@ h4 {
 /* --------------------------------PHOTOS-------------------------------------- */
 .photos {
    padding-bottom: 140px;
-    margin: 0 auto;
+    margin: 0 60px;
    padding-top: 60px;
 }
 .photos_title {
@@ -371,10 +517,12 @@ h4 {
    border: 5px dotted #000;
 }
 .swiper {
-  width: 95%;
+    width: 100%;
    height: 550px;
    text-align: center;
    padding: 20px;
+    margin: 0px auto;
+    overflow: hidden !important; /* возвращаем скрытие слайдов */
 }
 .swiper-wrapper {
    width: 100%;
@@ -385,6 +533,13 @@ h4 {
 .swiper-navigation-icon {
    color: #000;
 }
+.swiper-button-prev {
+    left: -10px !important;
+}
+
+.swiper-button-next {
+    right: -10px !important;
+}

 /* --------------------------------------------TODOLIST------------------------------------------------------ */

@@ -575,6 +730,7 @@ textarea {
 .fotter_logo {
  font-size: 42px;
  text-decoration: underline;
+  margin-bottom: 25px;
 }
 .footer_date {
    font-size: 36px;
@@ -615,7 +771,195 @@ textarea {
 .footer_hashtag {
    text-decoration: underline;
    font-size: 36px;
-    margin-bottom: 10px;
+    margin-bottom: 25px;
 }
 .footer_copyright {
 }
+
+
+/* --------------------------------------------------------ADAPTIVE------------------------------------------------------ */
+
+/* обычные экраны */
+@media (max-width: 1720px) {
+    .item {
+        font-size: 30px;
+    }
+    .map > div {
+    width: 680px;
+    height: 450px;
+    }
+    .heading {
+    margin: 0 350px;
+}
+}
+
+@media (max-width: 1620px) {
+    .row_up_item {
+        width: 350px;
+    }
+    .time_img {
+  width: 50px;
+  height: 50px;
+}
+.time_h6 {
+  font-size: 22px;
+}
+.time_p {
+  font-size: 26px; 
+}
+.time_comment {
+  font-size: 22px;
+}
+.img_newlywed {
+    height: 200px;
+    width: 200px;
+}
+  .heading {
+    margin: 0 300px;
+    height: 580px;
+  }
+}
+@media (max-width: 1520px) {
+    .menu {
+        flex-direction: column;
+    }
+    .items_up,
+    .items_down {
+        justify-content: center;
+        gap: 100px;
+    }
+    .heading_content {
+  padding: 15px 60px;
+}
+  .heading {
+    margin: 0 280px;
+  }
+.time {
+    font-size: 90px;
+}
+.transfer_map {
+    gap: 50px;
+}
+  .map > div {
+    width: 620px;
+    height: 420px;
+  }
+  .form_name {
+    font-size: 30px;
+    width: 430px;
+  }
+  .block_title {
+    font-size: 30px;
+  }
+  .form_name input[type="text"] {
+  width: 300px;
+  }
+  .answer_btn {
+    font-size: 30px;
+  }
+  .to-do-list_items {
+    width: 70%;
+  }
+
+}
+
+@media (max-width: 1420px) {
+    .heading {
+    margin: 0 250px;
+  }
+  .newlywed {
+    width: 50%;
+  }
+  .row_up_item {
+    width: 300px;
+  }
+   .time_comment {
+    font-size: 20px;
+  }
+    .time_p {
+    font-size: 22px;
+  }
+    .time_img {
+    width: 40px;
+    height: 40px;
+  }
+    .map > div {
+    width: 560px;
+    height: 400px;
+  }
+  .map_adress {
+    font-size: 30px;
+  }
+  .map_info {
+    font-size: 35px;
+  }
+  .map_time {
+  font-size: 40px; 
+  }
+  .form-info {
+    display: block;
+    grid: none;
+  }
+  .form_name {
+    width: 100%;
+    padding: 0 140px;
+    margin-bottom: 30px;
+  }
+  .form_menu,
+  .form_drink {
+    padding: 0 140px;
+    margin-bottom: 30px;
+  }
+  .newlywed {
+    display: flex;
+    flex-direction: column;
+  }
+  .newlywed_text {
+  margin-left: 50px;
+  }
+  .people {
+    width: auto;
+  }
+}
+
+
+@media (max-width: 1320px){
+  .heading {
+    height: 480px;
+  }
+    .time {
+    font-size: 70px;
+  }
+  .newlywed_info {
+  font-size: 24px;
+}
+.form_name {
+    padding: 0 80px;
+}
+.form_menu, .form_drink {
+    padding: 0 80px;
+}
+  .newlywed_info {
+    font-size: 22px;
+  }
+    .map > div {
+    width: 500px;
+    height: 350px;
+  }
+    .heading {
+    margin: 0 200px;
+  }
+    .to-do-list_items {
+    width: 80%;
+  }
+    .img_newlywed {
+    height: 160px;
+    width: 160px;
+  }
+}
+
+@media (max-width: 1220px){
+      .heading {
+    margin: 0 160px;
+  }
+}