Добавлены data-test-атрибуты для автоматического тестирования

vudovenko · vudovenko · commit cbf7a0e397a4 · 2024-12-28T18:41:07.000+05:00
diff --git a/catalog.html b/catalog.html
@@ -6,7 +6,8 @@
   <title>Каталог - Седона</title>
 </head>
 <body>
-<header>
+<!-- Шапка сайта -->
+<header data-test="header">
   <h1>Каталог</h1>
   <nav>
     <ul>
@@ -16,8 +17,22 @@ <h1>Каталог</h1>
     </ul>
   </nav>
 </header>
-<main>
-  <section>
+
+<!-- Основное содержимое -->
+<main data-test="main">
+  <!-- Блок с фильтрами -->
+  <section data-test="filter">
+    <h2>Фильтры</h2>
+    <!-- Тут могли бы быть чекбоксы/слайдер цены и т.д. -->
+    <form action="#" method="GET">
+      <label for="filter-price">Цена до:</label>
+      <input type="number" id="filter-price" name="price-max">
+      <button type="submit">Применить</button>
+    </form>
+  </section>
+
+  <!-- Блок каталога (список отелей) -->
+  <section data-test="catalog">
     <h2>Предложения</h2>
     <ul>
       <li>
@@ -37,8 +52,20 @@ <h3>Отель 3</h3>
       </li>
     </ul>
   </section>
+
+  <!-- Блок подписки (если требование сохраняется) -->
+  <section data-test="subscribe">
+    <h2>Подписка на рассылку</h2>
+    <form action="#" method="POST">
+      <label for="email-subscribe-catalog">Введите E-mail:</label>
+      <input type="email" id="email-subscribe-catalog" name="email" placeholder="you@example.com">
+      <button type="submit">Подписаться</button>
+    </form>
+  </section>
 </main>
-<footer>
+
+<!-- Подвал сайта -->
+<footer data-test="footer">
   <p>&copy; 2024 Седона. Все права защищены.</p>
 </footer>
 </body>
diff --git a/index.html b/index.html
@@ -6,7 +6,8 @@
   <title>Главная страница - Седона</title>
 </head>
 <body>
-<header>
+<!-- Шапка сайта -->
+<header data-test="header">
   <h1>Седона</h1>
   <nav>
     <ul>
@@ -16,18 +17,48 @@ <h1>Седона</h1>
     </ul>
   </nav>
 </header>
-<main>
-  <section>
+
+<!-- Основное содержимое -->
+<main data-test="main">
+  <!-- Герой-блок (крупная заставка, фото и заголовок) -->
+  <section data-test="hero">
     <h2>О городе</h2>
     <p>Седона — это красивый город в Аризоне, который известен своими красными скалами и природными достопримечательностями.</p>
     <img src="#" alt="Пейзаж Седоны">
   </section>
-  <section>
+
+  <!-- Блок преимуществ (пример) -->
+  <section data-test="advantages">
     <h2 class="visually-hidden">Скрытый заголовок</h2>
     <p class="visually-hidden">Этот текст скрыт от пользователей.</p>
+    <!-- Можно добавить сюда список преимуществ, если нужно -->
+  </section>
+
+  <!-- Блок поиска -->
+  <section data-test="search">
+    <h2>Поиск</h2>
+    <!-- Форма поиска, если она появится -->
+    <form action="#" method="GET">
+      <label for="search-field">Найти отель:</label>
+      <input type="text" id="search-field" name="q" placeholder="Поиск...">
+      <button type="submit">Искать</button>
+    </form>
+  </section>
+
+  <!-- Блок подписки -->
+  <section data-test="subscribe">
+    <h2>Подписка на новости</h2>
+    <!-- Форма подписки, если нужна -->
+    <form action="#" method="POST">
+      <label for="email-subscribe">Введите E-mail:</label>
+      <input type="email" id="email-subscribe" name="email" placeholder="you@example.com">
+      <button type="submit">Подписаться</button>
+    </form>
   </section>
 </main>
-<footer>
+
+<!-- Подвал сайта -->
+<footer data-test="footer">
   <p>&copy; 2024 Седона. Все права защищены.</p>
 </footer>
 </body>
