hello-page/index.html

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Стартовая страница для навигации по личной экосистеме Bratskih Tech."
    />
    <title>Bratskih Tech Hub</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="ambient ambient-one"></div>
    <div class="ambient ambient-two"></div>

    <main class="shell">
      <section class="hero" aria-labelledby="page-title">
        <div class="hero-content">
          <p class="eyebrow">Personal ecosystem</p>
          <h1 id="page-title">Bratskih Tech Hub</h1>
          <p class="lead">
            Быстрый старт для твоих сервисов: облако, почта, тестовая сеть и
            репозитории в одном аккуратном месте.
          </p>
        </div>

        <div class="control-panel" aria-label="Настройки внешнего вида">
          <div class="control-group">
            <span>Тема</span>
            <button class="segmented is-active" type="button" data-theme="dark">
              Темная
            </button>
            <button class="segmented" type="button" data-theme="light">
              Светлая
            </button>
          </div>

          <div class="control-group">
            <span>Вид</span>
            <button class="segmented is-active" type="button" data-view="cards">
              Карточки
            </button>
            <button class="segmented" type="button" data-view="list">
              Список
            </button>
          </div>

          <div class="control-group accent-group">
            <span>Акцент</span>
            <button
              class="accent-swatch is-active"
              type="button"
              data-accent="violet"
              aria-label="Фиолетовый акцент"
            ></button>
            <button
              class="accent-swatch"
              type="button"
              data-accent="cyan"
              aria-label="Голубой акцент"
            ></button>
            <button
              class="accent-swatch"
              type="button"
              data-accent="lime"
              aria-label="Лаймовый акцент"
            ></button>
            <button
              class="accent-swatch"
              type="button"
              data-accent="rose"
              aria-label="Розовый акцент"
            ></button>
          </div>
        </div>
      </section>

      <section class="services cards-view" aria-label="Сервисы экосистемы">
        <a
          class="service-card"
          href="https://nextcloud.bratskih.tech"
          target="_blank"
          rel="noopener noreferrer"
        >
          <span class="shine"></span>
          <img src="assets/nextcloud.svg" alt="" loading="lazy" />
          <div>
            <p class="service-kicker">Cloud storage</p>
            <h2>Nextcloud</h2>
            <p>
              Личное облако для файлов, заметок, календарей и синхронизации
              между устройствами.
            </p>
          </div>
          <span class="arrow" aria-hidden="true">→</span>
        </a>

        <a
          class="service-card"
          href="https://mail.bratskih.tech"
          target="_blank"
          rel="noopener noreferrer"
        >
          <span class="shine"></span>
          <img src="assets/mail.svg" alt="" loading="lazy" />
          <div>
            <p class="service-kicker">Mailbox</p>
            <h2>Mail</h2>
            <p>
              Почтовый шлюз для рабочей переписки, уведомлений и управления
              сообщениями.
            </p>
          </div>
          <span class="arrow" aria-hidden="true">→</span>
        </a>

        <a
          class="service-card"
          href="https://test-net.bratskih.tech"
          target="_blank"
          rel="noopener noreferrer"
        >
          <span class="shine"></span>
          <img src="assets/test-net.svg" alt="" loading="lazy" />
          <div>
            <p class="service-kicker">Lab network</p>
            <h2>Test Net</h2>
            <p>
              Песочница для экспериментов, тестовых окружений и проверки новых
              идей.
            </p>
          </div>
          <span class="arrow" aria-hidden="true">→</span>
        </a>

        <a
          class="service-card"
          href="https://gitea.bratskih.tech"
          target="_blank"
          rel="noopener noreferrer"
        >
          <span class="shine"></span>
          <img src="assets/gitea.svg" alt="" loading="lazy" />
          <div>
            <p class="service-kicker">Git forge</p>
            <h2>Gitea</h2>
            <p>
              Домашняя кузница кода: репозитории, задачи, ревью и история
              проектов.
            </p>
          </div>
          <span class="arrow" aria-hidden="true">→</span>
        </a>
      </section>
    </main>

    <script src="script.js"></script>
  </body>
</html>