Заглавная страница: различия между версиями

Версия от 10:31, 6 сентября 2026

Добро пожаловать на сюжетную Вики «Зари»!

   <a href="/wiki/Основной_сюжет" class="zarya-card">
       <img src="/images/сюжет.jpg" class="zarya-card-img" alt="Основной сюжет">

Основной сюжет

   </a>

   <a href="/wiki/Места" class="zarya-card">

?

Места

   </a>

   <a href="/wiki/Персонажи" class="zarya-card">
       <img src="/images/персонажи.jpg" class="zarya-card-img" alt="Персонажи">

Персонажи

   </a>

   <a href="/wiki/Предметы" class="zarya-card">

?

Предметы

   </a>

@@ Строка 1: / Строка 1: @@
-<!-- А это вставьте на саму Заглавную страницу в режиме вики-текста -->
 <div class="zarya-header">
 Добро пожаловать на сюжетную Вики «Зари»!
 </div>
-<div class="zarya-cards-grid">
+<div class="zarya-grid">
+     <a href="/wiki/Основной_сюжет" class="zarya-card">
-    <!-- Секция 1: Основной сюжет -->
+         <img src="/images/сюжет.jpg" class="zarya-card-img" alt="Основной сюжет">
-     <a href="/wiki/Основной_сюжет" class="zarya-card" data-tilt>
-         <div class="zarya-card-media">
-            <!-- Замените src на ссылку вашей картинки или удалите тег img, если картинки нет -->
-            <img src="/images/ сюжет.jpg" alt="Основной сюжет">
-        </div>
          <div class="zarya-card-title">Основной сюжет</div>
      </a>
-    <!-- Секция 2: Места (пример без картинки — сработает знак вопроса) -->
+     <a href="/wiki/Места" class="zarya-card">
-     <a href="/wiki/Места" class="zarya-card" data-tilt>
+         <div class="zarya-card-empty">?</div>
-         <div class="zarya-card-media is-empty"></div>
          <div class="zarya-card-title">Места</div>
      </a>
-    <!-- Секция 3: Персонажи -->
+     <a href="/wiki/Персонажи" class="zarya-card">
-     <a href="/wiki/Персонажи" class="zarya-card" data-tilt>
+         <img src="/images/персонажи.jpg" class="zarya-card-img" alt="Персонажи">
-         <div class="zarya-card-media">
-            <img src="/images/ персонажи.jpg" alt="Персонажи">
-        </div>
          <div class="zarya-card-title">Персонажи</div>
      </a>
-    <!-- Секция 4: Предметы -->
+     <a href="/wiki/Предметы" class="zarya-card">
-     <a href="/wiki/Предметы" class="zarya-card" data-tilt>
+         <div class="zarya-card-empty">?</div>
-         <div class="zarya-card-media is-empty"></div>
          <div class="zarya-card-title">Предметы</div>
      </a>
 </div>
-<!-- Скрипт для создания эффекта наклона карточки за курсором (как в Steam) -->
-<script>
-document.addEventListener("DOMContentLoaded", () => {
-    const cards = document.querySelectorAll('.zarya-card');
-    cards.forEach(card => {
-        card.addEventListener('mousemove', (e) => {
-            const rect = card.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            const centerX = rect.width / 2;
-            const centerY = rect.height / 2;
-            const rotateX = ((y - centerY) / centerY) * -10;
-            const rotateY = ((x - centerX) / centerX) * 10;
-            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
-        });
-        card.addEventListener('mouseleave', () => {
-            card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px)';
-        });
-    });
-});
-</script>