feat: add tags for services, add new services

src/pages/services.astro

@@ -9,38 +9,112 @@ import Layout from '../layouts/Layout.astro'
   <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>
+  <p>Свободная социальная сеть, альтернатива twitter.</p>
 
+  <div class="title">
     <h2>Matrix</h2>
+    <div class="tag green-tag">Самостоятельная регистрация</div>
+  </div>
   <a>matrix.comfycamp.space</a>
-  <p>Свободный федеративный мессенджер.</p>
+  <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>
-  <p>Простой почтовый сервер.</p>
+    <div class="tag orange-tag">Регистрация по обращению</div>
-  <p>Он не может отправлять и получать письма с заблокированных в России сервисах, простите.</p>
+  </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>