<!DOCTYPE html> <html lang="ru"> <head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Расы</title>
 <style>
   /* Сброс стилей */
   * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   body {
     font-family: Arial, sans-serif;
     background: #f2f2f2;
     color: #333;
     line-height: 1.6;
     padding: 20px;
   }
   /* Баннер разработки */
   .in-development {
     background: #ffe0b3;
     color: #8a4500;
     padding: 10px;
     text-align: center;
     border-radius: 5px;
     margin-bottom: 20px;
     font-weight: bold;
   }
   /* Заголовок страницы */
   .page-header {
     text-align: center;
     margin-bottom: 30px;
   }
   .page-header h1 {
     font-size: 40px;
     text-shadow: 2px 3px black, 3px 5px #0C9456;
     display: inline-block;
     margin: 0 10px;
   }
   .page-header img {
     vertical-align: middle;
     width: 64px;
     height: 64px;
     image-rendering: pixelated;
   }
   /* Сетка с мини-картами рас */
   .species-grid {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
   }
   .species-card {
     background: #fff;
     padding: 10px;
     width: 180px;
     text-align: center;
     border: 1px solid #ddd;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     transition: transform 0.2s;
   }
   .species-card:hover {
     transform: scale(1.05);
   }
   .species-card img {
     width: 180px;
     height: auto;
     border-radius: 4px;
     margin-bottom: 8px;
   }
   .species-card .name {
     font-weight: bold;
     margin-bottom: 5px;
   }
   .species-card .secret {
     color: #e35b5b;
   }
   /* Фильтр */
   .filter {
     text-align: center;
     margin-bottom: 20px;
   }
   .filter input {
     padding: 8px 12px;
     width: 300px;
     border: 1px solid #ccc;
     border-radius: 4px;
   }
   /* Блок информации о расах */
   .species-info {
     margin-bottom: 40px;
   }
   .species-info .info-card {
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 8px;
     margin-bottom: 20px;
     padding: 15px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
   .info-card h2 {
     margin-bottom: 10px;
     font-size: 28px;
     border-bottom: 1px solid #0C9456;
     padding-bottom: 5px;
   }
   .info-card img {
     max-width: 100%;
     height: auto;
     border-radius: 4px;
     margin-bottom: 10px;
   }
   .info-card .organs, 
   .info-card .features {
     margin-bottom: 10px;
   }
   .info-card .organs ul,
   .info-card .features ul {
     margin-left: 20px;
     list-style-type: disc;
   }
   .info-card .separator {
     height: 2px;
     background: #0C9456;
     border-radius: 2px;
     margin: 20px 0;
   }
 </style>

</head> <body>

   In development / Прогрессирующий

 <header class="page-header">
   <img src="File:Смайл.gif" alt="Смайл">

Расы

 </header>

 <section class="species-grid">

<a href="Человек">Человек</a>

     <img src="File:Человек.png" alt="Человек">

<a href="Унатх">Унатх</a>

     <img src="File:Унатх.png" alt="Унатх">

<a href="Дворф">Дворф</a>

     <img src="File:Дворф.png" alt="Дворф">

<a href="Диона">Диона</a>

     <img src="File:Диона.png" alt="Диона">

<a href="Кидан">Кидан</a>

     <img src="File:Кидан.png" alt="Кидан">

<a href="Арахнид">Арахнид</a>

     <img src="File:Арахнид.png" alt="Арахнид">

<a href="Слаймолюд">Слаймолюд</a>

     <img src="File:Слаймолюд.png" alt="Слаймолюд">

     <img src="File:Ниан.png" alt="Ниан">

     <img src="File:Вокс.png" alt="Вокс">

ДАННЫЕ ЗАСЕКРЕЧЕНЫ

     <img src="File:Скрытая раса.png" alt="Скрытая раса">

 </section>

   <input type="text" id="searchInput" placeholder="Поиск по расе...">

 <section class="species-info">

Человек

     <img src="File:Человек.png" alt="Человек">

       Органы:

Метаболизм: 0.5 единиц в секунду
Сердце – Усваивает лекарства, яды и наркотики (количество: 2)
Желудок – Усваивает еду и напитки (вместимость: 50, количество: 3)
Легкие – Дают возможность дышать кислородом (скорость: 1 единица/сек)
Печень – Усваивает алкоголь (0.05 ед./сек, количество: 1)
Почки – Удаляют неметаболизируемые вещества (количество: 5)
Глаза, аппендикс, уши, кости и язык – без функционала
Скорость: 2.5 и 4.5 тайлов/сек (ходьба и бег)
При нулевом давлении получают 0.35 ударов

       Особенности:

Безопасная температура: от -13.15°С (260°К) до 86.85°С (360°К)
Безоружные удары – 5 единиц ударов
Можно разделать на 5 единиц человеческого мяса
Имена: стандартные (Иван Петров, Джо Вильсон, Чжун Линь)

Унатх

     <img src="File:Унатх.png" alt="Унатх">

       Органы:

Метаболизм: 0.5 единиц в секунду
Сердце – Усваивает лекарства, яды и наркотики (количество: 2)
Животный желудок – Усваивает еду, напитки, органы (вместимость: 50, количество: 5)
Легкие – Дышат кислородом (скорость: 1 ед./сек)
Печень – Усваивает алкоголь (0.05 ед./сек, количество: 1)
Почки – Удаляют неметаболизируемые вещества (количество: 5)
Глаза, аппендикс, уши, кости, язык – без функционала
Скорость: 2.5 и 4.5 тайлов/сек (ходьба и бег)
При нулевом давлении – 0.35 ударов

       Особенности:

Безопасная температура: от 11.85°C (285°К) до 128°C (400°К)
Безоружные удары – 5 единиц уколов
Могут таскать предметы хвостом
Шоколад наносит урон ядами
Можно разделать на 5 единиц мяса ящерицы
Имена: состоят из имени и фамилии через дефис (на Синта’унати)

ДАННЫЕ ЗАСЕКРЕЧЕНЫ

       <img src="File:Скрытая раса.png" alt="Скрытая раса">

ДАННЫЕ ЗАСЕКРЕЧЕНЫ

 </section>

 <script>
   // Фильтрация карточек информации по названию расы
   const searchInput = document.getElementById('searchInput');
   const infoCards = document.querySelectorAll('.info-card');

   searchInput.addEventListener('input', function() {
     const filter = searchInput.value.trim().toLowerCase();
     infoCards.forEach(card => {
       const name = card.getAttribute('data-name').toLowerCase();
       if (name.includes(filter)) {
         card.style.display = ;
       } else {
         card.style.display = 'none';
       }
     });
   });
 </script>

</body> </html>