index.html - master - set2701/Bautex_Design

index.html
536 строк24 KB
Stepan
A11y
03 дек 2025, 01:04
03 дек 2025, 01:04a6e2ed2
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <!-- Preload fonts -->
  <link rel="preload" as="font" type="font/woff2" href="../fonts/fonts/GothicA1-Regular.woff2" crossorigin="anonymous">
  <link rel="preload" as="font" type="font/woff2" href="../fonts/fonts/GothicA1-Medium.woff2" crossorigin="anonymous">
  <link rel="preload" as="font" type="font/woff2" href="../fonts/fonts/GothicA1-Bold.woff2" crossorigin="anonymous">
  <link rel="preload" as="font" type="font/woff2" href="../fonts/fonts/GothicA1-ExtraLight.woff2" crossorigin="anonymous">
  <link rel="preload" as="font" type="font/woff2" href="../fonts/fonts/ProstoOne-Regular.woff2" crossorigin="anonymous">

  <title>BAUTEX DESIGN - Коллекция CLASSIC | Фактура ISTANBUL</title>

  <style>
    @font-face {
      font-family: 'Gothic A1';
      src: url('../fonts/fonts/GothicA1-Regular.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Gothic A1';
      src: url('../fonts/fonts/GothicA1-Medium.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Gothic A1';
      src: url('../fonts/fonts/GothicA1-Bold.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Gothic A1';
      src: url('../fonts/fonts/GothicA1-ExtraLight.woff2') format('woff2');
      font-weight: 200;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Prosto One';
      src: url('../fonts/fonts/ProstoOne-Regular.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    
    /* Skip link - скрыт по умолчанию */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: var(--brown-red);
      color: white;
      padding: 8px 16px;
      text-decoration: none;
      font-weight: 500;
      z-index: 9999;
      border-radius: 0 0 4px 0;
      transition: top 0.3s ease;
    }
    
    .skip-link:focus {
      top: 0;
      outline: 3px solid var(--brown-red);
      outline-offset: 2px;
    }
    
    /* Класс для скрытия элементов визуально, но доступности для скринридеров */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      border: 0;
      padding: 0;
      white-space: nowrap;
      clip-path: inset(100%);
      clip: rect(0 0 0 0);
      overflow: hidden;
    }
  </style>

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  
</head>
<body>
  <!-- Ссылка для пропуска навигации -->
  <a href="#main-content" class="skip-link">Перейти к основному содержанию</a>

  <!-- Header с wrapper -->
  <header role="banner">
    <div class="wrapper">
      <nav class="hbuttons" role="navigation" aria-label="Основная навигация">
        <button id="menu" class="menu-button" aria-label="Открыть меню навигации" aria-expanded="false">
          <div class="menu-line"></div>
          <div class="menu-line"></div>
          <div class="menu-line"></div>
          <span class="sr-only">Меню</span>
        </button>
        <!-- Навигация для десктопной версии (скрыта на мобильных) -->
        <nav class="desktop-nav" style="display: none;" aria-label="Десктопная навигация">
          <a href="#">Коллекции</a>
          <a href="#">Где купить</a>
          <a href="#">О нас</a>
          <a href="#">Инструкции</a>
          <a href="#">Для партнёров</a>
          <span class="header-number">8 (495) 532-91-12</span>
        </nav>
      </nav>
    </div>
  </header>

  <main id="main-content" role="main" tabindex="-1">
    <!-- Страница продукта с wrapper -->
    <section class="product-page about-us-section" aria-labelledby="product-title">
      <div class="wrapper">
        <nav class="breadcrumbs breadcrumb-nav" aria-label="Хлебные крошки">
          <div class="breadcrumb-top-line">
              <span class="breadcrumb-main breadcrumb-item">Главная</span>
              <a href="#" class="breadcrumb-collection">Коллекция «CLASSIC»</a>
          </div>
          <div class="breadcrumb-bottom-line">
              <a href="#" class="breadcrumb-texture breadcrumb-text">
                  <span class="active">Фактура «ISTANBUL»</span>
              </a>
          </div>
        </nav>
        
        <!-- <div class="product-content">
          <div class="product-gallery">
              <div class="gallery-frame">
                  <div class="frame-placeholder"></div>
              </div>
          </div> -->
          <img src="img/factura_1.png" alt="" class="factura-img" />

          <div class="slider-controls gallery-counter">
            <button type="button" class="prev-btn counter-btn" aria-label="Предыдущее изображение">←</button>
            <span class="slide-counter counter-text">1 / 8</span>
            <button type="button" class="next-btn counter-btn" aria-label="Следующее изображение">→</button>
          </div>
              
          <div class="product-info">
            <h1 class="product-title" id="product-title">ISTANBUL</h1>
            
            <div class="specs specs-grid">
              <div class="spec spec-item">
                <span class="value spec-value">5 750 р.</span>
                <span class="label spec-label">розничная цена</span>
              </div>
              <div class="spec spec-item">
                <span class="value spec-value">1 м × 25 м</span>
                <span class="label spec-label">размер</span>
              </div>
              <div class="spec spec-item">
                <span class="value spec-value">0 см</span>
                <span class="label spec-label">раппорт</span>
              </div>
              <div class="spec spec-item">
                <span class="value spec-value">255 г/м²</span>
                <span class="label spec-label">плотность</span>
              </div>
            </div>

            <div class="product-buttons button-group">
              <button class="buy-btn btn btn-primary">Купить</button>
              <button class="calculate-btn btn btn-outline">Рассчитать стоимость</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Преимущества с wrapper -->
    <section class="features footer-section" aria-labelledby="features-title">
      <div class="wrapper">
        <h2 id="features-title" class="sr-only">Преимущества обоев</h2>
        <ul class="feature-tags features-list">
          <li class="feature-tag feature-item">
            <img src="img/svg_1.svg" alt="" class="feature-icon" />
            <span class="feature-text">ПРОЧНЫЕ</span>
          </li>
          <li class="feature-tag feature-item">
            <img src="img/svg_2.svg" alt="" class="feature-icon" />
            <span class="feature-text">МОЖНО МЫТЬ</span>
          </li>
          <li class="feature-tag feature-item">
            <img src="img/svg_3.svg" alt="" class="feature-icon" />
            <span class="feature-text">ГИПОАЛЛЕРГЕННЫЕ</span>
          </li>
          <li class="feature-tag feature-item">
            <img src="img/svg_4.svg" alt="" class="feature-icon" />
            <span class="feature-text">ЭКОЛОГИЧНЫЕ</span>
          </li>
          <li class="feature-tag feature-item">
            <img src="img/svg_5.svg" alt="" class="feature-icon" />
            <span class="feature-text">ЗАЩИЩАЮТ ОТ ТРЕЩИН</span>
          </li>
        </ul>

        <div class="color-selection color-picker-section" id="color-container">
          <div class="color-preview" aria-label="Предпросмотр выбранного цвета"></div>

          <div class="color-card">
            <p class="features-description color-description">
              Сейчас вы выбираете фактуру, а позже сможете покрасить её в любой цвет. Посмотрите, как это будет!
            </p>
        
            <div class="slider-controls-color color-counter">
              <button type="button" class="prev-btn counter-btn" aria-label="Предыдущий цвет">←</button>
              <span class="slide-counter-color counter-text">1 / 12</span>
              <button type="button" class="next-btn counter-btn" aria-label="Следующий цвет">→</button>
            </div>

            <ul class="color-grid color-swatches" aria-label="Выбор цвета обоев">
              <li class="color-item">
                <button class="swatch" style="background-color: #1c9d7e;" aria-label="Цвет RAL 6026, салатовый"></button>
              </li>
              <li class="color-item">
                <button class="swatch" style="background-color: #85beb8;" aria-label="Цвет RAL 6027, бирюзовый"></button>
              </li>
              <li class="color-item">
                <button class="swatch" style="background-color: #446052;" aria-label="Цвет RAL 6028, тёмно-зелёный"></button>
              </li>
              <li class="color-item">
                <button class="swatch" style="background-color: #00784b;" aria-label="Цвет RAL 6029, зелёный"></button>
              </li>
              <li class="color-item">
                <button class="swatch" style="background-color: #36875e;" aria-label="Цвет RAL 6032, светло-зелёный"></button>
              </li>
            </ul>
            
            <div class="swatch-labels">
              <span>RAL 6026</span>
              <span>RAL 6027</span>
              <span>RAL 6028</span>
              <span>RAL 6029</span>
              <span>RAL 6032</span>
            </div>
            
            <div class="ral-input input-group">
              <label for="ral-input" class="sr-only">Введите номер цвета по RAL</label>
              <input type="text" id="ral-input" placeholder="Введите номер по RAL" class="input" />
              <button type="button" class="btn btn-primary">Применить</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Калькулятор с wrapper -->
    <section class="calculator main-content-section" aria-labelledby="calculator-title">
      <div class="wrapper">
        <h2 id="calculator-title" class="section-title">ФАКТУРА & ЦВЕТ</h2>
        <p class="section-description">
          Это калькулятор. Он поможет с выбором и расчетом стоимости покупок в зависимости от площади помещения. Просто заполните поля!
        </p>
        
        <div class="area-input form-group">
          <label for="area-input" class="form-label">Укажите площадь стен, м²</label>
          <input type="number" id="area-input" value="104" class="input" aria-describedby="area-description" />
          <p id="area-description" class="sr-only">Введите площадь стен в квадратных метрах</p>
        </div>

        <h3 class="form-label">Выберите клей</h3>

        <div class="slider-controls-color adhesive-selector">
          <button type="button" class="prev-btn selector-btn" aria-label="Предыдущий вариант клея">←</button>
          <img src="img/glue_1.jpg" alt="Универсальный клей Оклей, сухой, в упаковке" />
          <button type="button" class="next-btn selector-btn" aria-label="Следующий вариант клея">→</button>
        </div>

        <div class="glue-selection card">
          <div class="glue-item adhesive-name">Универсальный клей "Оклей", сухой</div>
        </div>

        <!-- Результаты расчета -->
        <div class="calculation-results">
          <div class="form-group">
            <h3 class="form-label">Материалов понадобится</h3>
            
            <div class="materials-list card">
              <div class="material material-item">
                <div>
                  <div class="material-name">Обои "ISTANBUL"</div>
                  <div class="material-qty">7 рулонов</div>
                </div>
              </div>
              <div class="divider"></div>
              <div class="material material-item">
                <div>
                  <div class="material-name">Клей "Оклей"</div>
                  <div class="material-qty">1 упаковка</div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="cost-calculation form-group">
            <h3 class="form-label">Средняя стоимость необходимых материалов*</h3>
            
            <div class="card">
              <div class="cost-item">
                <div>
                  <div class="cost-name">Обои "ISTANBUL"</div>
                  <div class="cost-calculation">
                    <span class="light">5 750 x 7</span>
                    <span class="result">= 40 250</span>
                  </div>
                </div>
              </div>
              <div class="divider"></div>
              <div class="cost-item">
                <div>
                  <div class="cost-name">Клей "Оклей"</div>
                  <div class="cost-calculation">
                    <span class="light">200 x 1</span>
                    <span class="result">= 200</span>
                  </div>
                </div>
              </div>
              <div class="divider"></div>
              <div class="total total-item">
                <span class="total-label">ИТОГО</span>
                <span class="total-value">42 050</span>
              </div>
            </div>
          </div>
          
          <p class="disclaimer">
            * в калькуляторе указана средняя стоимость товара. В зависимости от места приобретения, стоимость может меняться.
          </p>
        </div>
      </div>
    </section>

    <!-- Где купить с wrapper -->
    <section class="where-to-buy header-section" aria-labelledby="where-to-buy-title">
      <div class="wrapper">
        <h2 id="where-to-buy-title" class="section-title">ГДЕ КУПИТЬ?</h2>
        <p class="section-description">
          Выберите удобный филиал на карте и оставьте заявку. С вами свяжется менеджер магазина, поможет оформить заказ, расскажет об условиях доставки и самовывоза
        </p>
        
        <div class="divider"></div>

        <div class="location location-info">
          <span class="light">Россия,</span>
          <strong class="medium">Владимир</strong>
        </div>

        <div class="divider"></div>

        <div class="view-options button-group">
          <button class="button-map btn btn-primary">На карте</button>
          <button class="button-outline btn btn-outline">Списком</button>
        </div>
        <img src="img/map_2.png" alt="Карта с расположением магазинов BAUTEX DESIGN в городе Владимир" class="map-img">
      </div>
    </section>

    <!-- Заявка на заказ с wrapper -->
    <section class="order-request header-section" aria-labelledby="order-title">
      <div class="wrapper">
        <div class="card">
          <h2 id="order-title" class="card-title">ОСТАВЬТЕ ЗАЯВКУ, ЧТОБЫ СДЕЛАТЬ ЗАКАЗ</h2>
          <button class="btn btn-primary">Заполнить форму</button>
        </div>
      </div>
    </section>

    <!-- Галерея интерьеров с wrapper -->
    <section class="interior-gallery navigation-section" aria-labelledby="gallery-title">
      <div class="wrapper">
        <h2 id="gallery-title" class="nav-title">
          ОБОИ BAUTEX DESIGN В ИНТЕРЬЕРЕ
        </h2>
        
        <div class="project interior-gallery">
          <img src="img/Gallery_Rectangle_102.webp" alt="Интерьер загородного дома во Владимире с обоями BAUTEX DESIGN" class="gallery-image" />
          
          <div class="gallery-info">
            <h3>Загородный дом во Владимире</h3>
            <a href="gallery.html" class="gallery-btn">Открыть галерею →</a>
          </div>
        </div>
        
        <div class="slider-controls-oboi nav-counter">
          <button type="button" class="prev-btn counter-btn" aria-label="Предыдущий проект">←</button>
          <span class="counter-text">1 / 6</span>
          <button type="button" class="next-btn counter-btn" aria-label="Следующий проект">→</button>
        </div>
      </div>
    </section>

    <!-- Отзывы с wrapper -->
    <section class="reviews feature-section" aria-labelledby="reviews-title">
      <div class="wrapper">
        <h2 id="reviews-title" class="section-title light-text">ВЫ О BAUTEX DESIGN</h2>
        
        <div class="review testimonial-wrapper">
          <img src="img/Mask_Group.png" alt="" class="testimonial-bg" />
          <div class="testimonial-card">
            <p class="testimonial-text">
              Переехали с мужем в новостройку, очень хотели просто гладкие окрашенные стены. Пошли в салон покупать краску, и нам там посоветовали, чтобы потом трещин на стенах не было, т.к. дом новый и будет еще усаживаться, купить обои под покраску. Остановились на пигментированном холсте. Это полный восторг! Ни разу не пожалели!
            </p>
            
            <div class="author testimonial-author">
              <strong>Наталия</strong>
            </div>
          </div>
        </div>
        
        <div class="review-navigation testimonial-counter">
          <button type="button" class="prev-btn counter-btn" aria-label="Предыдущий отзыв">
            <img src="img/strelka_white_left.svg" alt="Стрелка влево" />
          </button>
          <span class="counter-text light-text">1 / 8</span>
          <button type="button" class="next-btn counter-btn" aria-label="Следующий отзыв">
            <img src="img/strelka_white_right.svg" alt="Стрелка вправо" />
          </button>
        </div>
        
        <button class="btn btn-testimonial">Оставить отзыв</button>
      </div>
    </section>

    <!-- Форма вопросов -->
    <section class="questions-form testimonial-section" aria-labelledby="questions-form-title">
      <img src="img/fon_svg_1.svg" alt="Декоративное фоновое изображение для формы вопросов" class="form-image" />
      <div class="wrapper">
        <div class="testimonial-form-container">
          <button class="close-btn" id="closeQuestionsForm" aria-label="Закрыть форму">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1L17 17M17 1L1 17" stroke="#725133" stroke-width="2" stroke-linecap="round" />
            </svg>
          </button>
          
          <h2 id="questions-form-title" class="form-title">ОСТАЛИСЬ ВОПРОСЫ?</h2>
          
          <form action="//httpbin.org/post" method="post">
            <div class="form-fields">
              <div class="form-field">
                <label for="questions-name">
                  Ваше имя
                  <span class="required" aria-hidden="true">*</span>
                  <span class="sr-only">Обязательное поле</span>
                </label>
                <input type="text" id="questions-name" name="name" placeholder="Ваше имя" class="input" required>
              </div>
              
              <div class="form-field">
                <label for="questions-phone">
                  Номер телефона
                  <span class="required" aria-hidden="true">*</span>
                  <span class="sr-only">Обязательное поле</span>
                </label>
                <input type="tel" id="questions-phone" name="phone" placeholder="+7 (999) 123-45-67" class="input" required>
              </div>
              
              <div class="form-field">
                <label for="questions-comment">Комментарий</label>
                <textarea id="questions-comment" name="comment" placeholder="Комментарий" class="textarea"></textarea>
              </div>
            </div>
            
            <hr class="divider" />
            
            <div class="form-buttons">
              <button type="submit" class="btn btn-primary">
                Отправить
              </button>
            </div>
            
            <p class="form-disclaimer">
              Нажимая кнопку "<span class="medium">Отправить</span>", Вы соглашаетесь с условиями <a href="#" class="underline">Политики Конфиденциальности</a>
            </p>
          </form>
        </div>
      </div>
    </section>
  </main>

  <!-- Футер -->
  <footer class="call-to-action-section" role="contentinfo">
    <div class="wrapper">
      <div class="footer-nav">
        <nav class="nav-section" aria-label="Навигация по сайту">
          <h3 class="nav-title">Навигация</h3>
          
          <div class="divider light"></div>
          
          <div class="nav-links">
            <a href="#">Коллекции</a>
            <a href="#">Где купить</a>
            <a href="#">О нас</a>
            <a href="#">Инструкции</a>
            <a href="#">Для партнёров</a>
            <a href="gallery.html">Галерея</a>
            <a href="dashboard.html">Дашборд</a>
            <a href="form.html">Заполнить форму</a>
          </div>
        </nav>
        
        <div class="contacts-section">
          <h3 class="nav-title">Контакты</h3>
          
          <div class="divider light"></div>
          
          <address class="contact-info">
            <p>119049, г. Москва, ул. Крымский вал, д.3, с.2</p>
            <a href="tel:+74955329112">+7 (495) 532-91-12</a>
            <a href="mailto:design@bautex.ru">design@bautex.ru</a>
          </address>
        </div>
      </div>
      
      <div class="footer-bottom footer-links">
        <a href="#">Политика конфиденциальности</a>
        <span>Designed by MAKIT</span>
      </div>
    </div>
  </footer>
</body>
</html>