comfycamp/src/pages/services.astro

---
import Layout from '../layouts/Layout.astro'
---

<Layout
  title="Список сервисов"
  description="Список сервисов, доступных на Уютном Домике."
>
  <h1>Сервисы</h1>

  <p>
    На данной странице собраны запущенные сервисы,
    которыми вы можете воспользоваться.
  </p>

  <p>
    Если у сервиса нет открытой регистрации, напишите мне.
    Контакты есть внизу каждой страницы.
    Я не кусаюсь.
  </p>

  <div class="letter">
    <div class="letter-header">
      <img
        src="/icons/envelope-solid.svg"
        width="18px"
        height="18px"
        alt="Email icon"
      />
      Пример
    </div>
    Можно мне аккаунт в xmpp с ником example? Я хороший и добрый человек.
  </div>

  <div class="title">
    <h2>Mastodon</h2>
    <div class="tag green-tag">Самостоятельная регистрация</div>
  </div>
  <a href="https://m.comfycamp.space" target="_blank">m.comfycamp.space</a>
  <p>Свободная социальная сеть, альтернатива twitter.</p>

  <div class="title">
    <h2>Matrix</h2>
    <div class="tag green-tag">Самостоятельная регистрация</div>
  </div>
  <a>matrix.comfycamp.space</a>
  <p>Современный протокол для общения.</p>

  <div class="title">
    <h2>XMPP</h2>
    <div class="tag orange-tag">Регистрация по обращению</div>
  </div>
  <a>xmpp.comfycamp.space</a>
  <p>Проверенный временем протокол для общения.</p>

  <div class="title">
    <h2>FreshRSS</h2>
    <div class="tag orange-tag">Регистрация по обращению</div>
  </div>
  <a href="https://freshrss.comfycamp.space" target="_blank">freshrss.comfycamp.space</a>
  <p>Сервис для чтения RSS-лент.</p>

  <div class="title">
    <h2>Nextcloud</h2>
    <div class="tag orange-tag">Регистрация по обращению</div>
  </div>
  <a href="https://nc.comfycamp.space" target="_blank">nc.comfycamp.space</a>
  <p>Облако с открытым исходным кодом.</p>

  <div class="title">
    <h2>Email</h2>
    <div class="tag orange-tag">Регистрация по обращению</div>
  </div>
  <a>comfycamp.space</a>
  <p>
    Простой почтовый сервер.
    Он не может отправлять и получать письма с заблокированных в России сервисах, простите.
  </p>
</Layout>

<style>
  h2 {
    margin: 0;
  }
  p {
    color: #eee;
  }

  .letter {
    background-color: rgb(30 27 75);
    padding: 10px;
    border-radius: 5px;
  }
  .letter-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .title {
    margin-top: 20px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
  }
  .tag {
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 5px;
  }
  .green-tag {
    background-color: rgb(22 163 74);
  }
  .orange-tag {
    background-color: rgb(194 65 12);
  }
</style>