brstu · alexsandro007 · Sep 18, 2025 · Sep 18, 2025 · Sep 18, 2025 · Sep 18, 2025
@@ -0,0 +1,54 @@
+# ЛР00 — Отчёт об установке окружения
+
+ФИО: Ярмола Александр Олегович
+Идентификатор: p30_yarmola
+
+## Установлено
+
+- Git: 2.45.1.windows.1
+- .NET SDK: 8.0.414
+- Node.js: v22.13.1
+- npm: 11.4.2
+- VS Code: 1.89.1 (см. скриншот)
+- SQL Server LocalDB: MSSQLLocalDB
+
+## Скриншоты
+
+- **Git:**  
+  ![git](./img/git_version.png)
+
+  _Рис. 1 — Проверка версии Git (git --version)_
+
+- **.NET SDK:**  
+  ![dotnet](./img/dotnet_version.png)
+
+  _Рис. 2 — Проверка версии .NET SDK (dotnet --version)_
+
+- **Node.js:**  
+  ![node](./img/node_version.png)
+
+  _Рис. 3 — Проверка версии Node.js (node --version)_
+
+- **npm:**  
+  ![npm](./img/npm_version.png)
+
+  _Рис. 4 — Проверка версии npm (npm --version)_
+
+- **VS Code:**  
+  ![VS Code](./img/vscode_about.png)
+
+  _Рис. 5 — Окно "About" в VS Code_
+
+- **SQL Server LocalDB:**  
+  ![SQL](./img/sql_version.png)
+
+  _Рис. 6 — Проверка MSSQLLocalDB (sqllocaldb info)_
+
+## Краткое описание установки
+
+- **Git** установлен по умолчанию в папку `C:\Program Files\Git`.
+- **.NET SDK 8.0.414** установлен по умолчанию в ` C:\Program Files\dotnet`.
+- **Node.js** и **npm** установлены по умолчанию в `C:\Program Files\nodejs`.
+- **Visual Studio Code** установлен по умолчанию в `C:\Users\Alex07\AppData\Local\Programs\Microsoft VS Code`.
+- **SQL Server LocalDB** установлен в стандартную папку, используется экземпляр `MSSQLLocalDB`.
+- Пути по умолчанию не менялись.
@@ -0,0 +1,17 @@
+# Отчёт по ЛР01
+
+Вариант: <укажите № и тему>
+
+## Скриншоты
+- Главная (index.html)
+- Список (list.html)
+- Карточка (item.html)
+- Форма (contact.html)
+- Lighthouse a11y для каждой страницы
+
+## Проверка
+- Как открыть: откройте index.html в браузере (или через VS Code Live Server)
+- Шаги: ...
+
+## Комментарии
+- Особенности реализации, компромиссы, что улучшить
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>ЛР01 — Контакты</title>
+  <link rel="stylesheet" href="./styles.css" />
+</head>
+<body>
+  <a class="skip-link" href="#content">Пропустить к контенту</a>
+  <header>
+    <div class="container">
+      <nav aria-label="Главная навигация">
+        <ul>
+          <li><a href="./index.html">Главная</a></li>
+          <li><a href="./list.html">Список</a></li>
+          <li><a href="./item.html">Карточка</a></li>
+          <li><a aria-current="page" href="./contact.html">Контакты</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main id="content" class="container">
+    <h1>Форма обратной связи</h1>
+
+    <form aria-describedby="form-help">
+      <p id="form-help" class="sr-only">Все поля обязательны для заполнения</p>
+
+      <div>
+        <label for="name">Имя</label>
+        <input id="name" name="name" type="text" required minlength="2" maxlength="50" />
+      </div>
+
+      <div>
+        <label for="email">Email</label>
+        <input id="email" name="email" type="email" required aria-describedby="email-help" />
+        <small id="email-help">Мы не передаем email третьим лицам.</small>
+      </div>
+
+      <div>
+        <label for="topic">Тема</label>
+        <select id="topic" name="topic" required>
+          <option value="">Выберите тему…</option>
+          <option>Вопрос по каталогу</option>
+          <option>Проблема с сайтом</option>
+          <option>Другое</option>
+        </select>
+      </div>
+
+      <div>
+        <label for="message">Сообщение</label>
+        <textarea id="message" name="message" rows="5" required minlength="10" maxlength="1000"></textarea>
+      </div>
+
+      <div>
+        <input id="consent" name="consent" type="checkbox" required />
+        <label for="consent">Согласен с обработкой персональных данных</label>
+      </div>
+
+      <button type="submit">Отправить</button>
+    </form>
+  </main>
+
+  <footer>
+    <div class="container">
+      <small>© 2025 Вариант темы</small>
+    </div>
+  </footer>
+</body>
+</html>
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>ЛР01 — Главная</title>
+  <link rel="stylesheet" href="./styles.css" />
+</head>
+<body>
+  <a class="skip-link" href="#content">Пропустить к контенту</a>
+  <header>
+    <div class="container">
+      <nav aria-label="Главная навигация">
+        <ul>
+          <li><a aria-current="page" href="./index.html">Главная</a></li>
+          <li><a href="./list.html">Список</a></li>
+          <li><a href="./item.html">Карточка</a></li>
+          <li><a href="./contact.html">Контакты</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main id="content" class="container">
+    <h1>Проект темы варианта</h1>
+
+    <section class="card">
+      <h2>Добро пожаловать</h2>
+      <p>Краткое промо и описание сервиса/темы. Здесь объясните, что пользователь увидит на сайте.</p>
+      <p><a href="./list.html">Перейти к списку →</a></p>
+    </section>
+
+    <section class="grid cols-3" aria-label="Преимущества">
+      <article class="card">
+        <h3>Преимущество 1</h3>
+        <p>Короткое описание.</p>
+      </article>
+      <article class="card">
+        <h3>Преимущество 2</h3>
+        <p>Короткое описание.</p>
+      </article>
+      <article class="card">
+        <h3>Преимущество 3</h3>
+        <p>Короткое описание.</p>
+      </article>
+    </section>
+  </main>
+
+  <footer>
+    <div class="container">
+      <small>© 2025 Вариант темы. Все права защищены.</small>
+    </div>
+  </footer>
+</body>
+</html>
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>ЛР01 — Карточка</title>
+  <link rel="stylesheet" href="./styles.css" />
+</head>
+<body>
+  <a class="skip-link" href="#content">Пропустить к контенту</a>
+  <header>
+    <div class="container">
+      <nav aria-label="Главная навигация">
+        <ul>
+          <li><a href="./index.html">Главная</a></li>
+          <li><a href="./list.html">Список</a></li>
+          <li><a aria-current="page" href="./item.html">Карточка</a></li>
+          <li><a href="./contact.html">Контакты</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main id="content" class="container">
+    <h1>Название сущности</h1>
+
+    <figure class="card">
+      <img src="./img/placeholder.svg" alt="Изображение сущности" />
+      <figcaption>Мини‑галерея/описание</figcaption>
+    </figure>
+
+    <section class="card">
+      <h2>Характеристики</h2>
+      <table class="table">
+        <thead>
+          <tr>
+            <th scope="col">Параметр</th>
+            <th scope="col">Значение</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><th scope="row">Параметр 1</th><td>Значение</td></tr>
+          <tr><th scope="row">Параметр 2</th><td>Значение</td></tr>
+        </tbody>
+      </table>
+    </section>
+
+    <aside class="card" aria-label="Похожие">
+      <h2>Похожие элементы</h2>
+      <ul>
+        <li><a href="./item.html">Элемент X</a></li>
+        <li><a href="./item.html">Элемент Y</a></li>
+      </ul>
+    </aside>
+  </main>
+
+  <footer>
+    <div class="container">
+      <small>© 2025 Вариант темы</small>
+    </div>
+  </footer>
+</body>
+</html>
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>ЛР01 — Список</title>
+  <link rel="stylesheet" href="./styles.css" />
+</head>
+<body>
+  <a class="skip-link" href="#content">Пропустить к контенту</a>
+  <header>
+    <div class="container">
+      <nav aria-label="Главная навигация">
+        <ul>
+          <li><a href="./index.html">Главная</a></li>
+          <li><a aria-current="page" href="./list.html">Список</a></li>
+          <li><a href="./item.html">Карточка</a></li>
+          <li><a href="./contact.html">Контакты</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main id="content" class="container">
+    <h1>Список сущностей</h1>
+
+    <section aria-labelledby="tbl-caption">
+      <h2 id="tbl-caption">Табличный вид</h2>
+      <table class="table">
+        <thead>
+          <tr>
+            <th scope="col">ID</th>
+            <th scope="col">Название</th>
+            <th scope="col">Статус</th>
+            <th scope="col">Дата</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td><a href="./item.html">Пример элемента</a></td>
+            <td>Активно</td>
+            <td>2025‑09‑16</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td><a href="./item.html">Второй элемент</a></td>
+            <td>Черновик</td>
+            <td>2025‑09‑10</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section class="grid cols-3" aria-label="Карточки">
+      <article class="card">
+        <h2>Элемент A</h2>
+        <p>Краткое описание элемента. <a href="./item.html">Подробнее</a></p>
+      </article>
+      <article class="card">
+        <h2>Элемент B</h2>
+        <p>Краткое описание элемента. <a href="./item.html">Подробнее</a></p>
+      </article>
+      <article class="card">
+        <h2>Элемент C</h2>
+        <p>Краткое описание элемента. <a href="./item.html">Подробнее</a></p>
+      </article>
+    </section>
+  </main>
+
+  <footer>
+    <div class="container">
+      <small>© 2025 Вариант темы</small>
+    </div>
+  </footer>
+</body>
+</html>
@@ -0,0 +1,38 @@
+/* ЛР01 базовые стили (mobile-first) */
+:root {
+  --bg: #0b0d12;
+  --fg: #e7ecf3;
+  --muted: #a9b3c2;
+  --accent: #4da3ff;
+  --focus: #ffd166;
+}
+* { box-sizing: border-box; }
+html { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
+body { margin: 0; background: var(--bg); color: var(--fg); line-height: 1.6; }
+img { max-width: 100%; height: auto; display: block; }
+a { color: var(--accent); text-decoration: none; }
+a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
+
+.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
+header, footer { background: #11151d; }
+nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
+nav a { padding: 8px 10px; border-radius: 6px; }
+nav a[aria-current="page"] { background: #1a2230; }
+
+.grid { display: grid; gap: 16px; }
+@media (min-width: 600px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
+@media (min-width: 960px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
+
+.card { background: #141a23; border: 1px solid #1f2a3a; border-radius: 10px; padding: 16px; }
+.table { width: 100%; border-collapse: collapse; }
+.table th, .table td { padding: 10px; border-bottom: 1px solid #223047; text-align: left; }
+.table th { background: #121824; }
+
+form { display: grid; gap: 12px; max-width: 600px; }
+label { display: block; font-weight: 600; }
+input, select, textarea { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #2a3a55; background: #0e131b; color: var(--fg); }
+small { color: var(--muted); }
+button { padding: 10px 14px; border-radius: 8px; border: 0; background: var(--accent); color: #001; font-weight: 700; }
+
+.skip-link { position: absolute; left: -9999px; top: auto; }
+.skip-link:focus { left: 12px; top: 12px; background: #000; padding: 8px 10px; border-radius: 6px; }
@@ -0,0 +1,11 @@
+# Отчёт по ЛР02
+
+Стек: Vite + TypeScript.
+
+## Скриншоты
+- Главные экраны (UI)
+- Консоль: сборка/запуск
+
+## Проверка
+- Как запустить: npm ci; npm run dev; открыть localhost ссылку
+- Важные фичи: валидация форм, типы, ESLint/Prettier