Карта дня: магический скрипт, который раскроет тайны завтра

Что такое «Карта дня» и зачем её размещать на сайте?

Краткое описание. Пользователь нажимает кнопку‚ получает случайно выбранную карту Таро с интерпретацией на текущий день.
Польза для сайта.
- Увеличение вовлечённости (в среднем +15‑25 % времени на странице).
- Повышение SEO‑показателей за счёт снижения bounce‑rate.
- Возможность собрать e‑mail подписчиков через форму «Получить более глубокий расклад».
Требования. Небольшой объём ресурсов‚ кросс‑браузерность‚ отсутствие серверных зависимостей (можно разместить полностью на клиенте).

План реализации

Подготовка набора карт Таро (изображения и тексты).
Стилизация (CSS) для приятного внешнего вида.
Написание JavaScript‑логики:
- Генерация случайного индекса.
- Отображение карты и текста.
- Запоминание выбранной карты в localStorage (чтобы пользователь видел одну и ту же карту в течение дня).
Опционально: подключение внешнего API (например‚ Tarot API) для получения дополнительных интерпретаций.
Тестирование и деплой;

Подготовка данных о картах

Для простоты будем хранить данные в виде JavaScript‑массива. Каждый элемент содержит:

id – порядковый номер (0‑77).
name – название карты.
image – путь к изображению (можно разместить в папке img/cards/).
description – короткая интерпретация.

Пример:

const cards = [
 {
 id: 0‚
 name: 'Шут'‚
 image: 'img/cards/fool.jpg'‚
 description: 'Новый путь‚ спонтанность‚ начало приключения.'
 }‚
 {
 id: 1‚
 name: 'Маг'‚
 image: 'img/cards/magician.jpg'‚
 description: 'Возможности‚ воля к действию‚ умение использовать ресурсы.'
 }‚
 // … остальные 78 карт …
];

Разметка должна быть максимально семантичной‚ чтобы её легко было стилизовать и адаптировать.

<section id="daily-card" class="daily-card">
 <h2 class="daily-card__title">Карта дня</h2>
 <div class="daily-card__wrapper">
 <img src="img/placeholder.jpg" alt="Карта дня" class="daily-card__image" id="card-image">
 <div class="daily-card__info">
 <h3 class="daily-card__name" id="card-name">—</h3>
 <p class="daily-card__desc" id="card-desc">Нажмите кнопку‚ чтобы узнать‚ какая карта будет сопровождать вас сегодня.</p>
 </div>
 </div>
 <button type="button" class="daily-card__btn" id="draw-btn">Тянуть карту</button>
</section>

CSS‑стилизация

Ниже небольшие стили‚ которые можно разместить в отдельном файле daily-card.css или в <style>‑блоке.

#daily-card {
 max-width: 400px;
 margin: 0 auto;
 padding: 20px;
 border: 2px solid #16a085;
 border-radius: 10px;
 background: #f9f9f9;
 text-align: center;
 font-family: 'Helvetica Neue'‚ Helvetica‚ Arial‚ sans-serif;
}
.daily-card__title {
 margin-bottom: 15px;
 color: #2c3e50;
}.daily-card__wrapper {
 display: flex;
 flex-direction: column;
 align-items: center;
}
.daily-card__image {
 width: 200px;
 height: auto;
 border-radius: 5px;
 box-shadow: 0 4px 6px rgba(0‚0‚0‚0.1);
}
.daily-card__name {
 margin: 10px 0 5px;
 font-size: 1.3em;
 color: #34495e;
}
.daily-card__desc {
 font-size: 0.95em;
 color: #555;
}
.daily-card__btn {
 margin-top: 15px;
 padding: 10px 20px;
 background: #16a085;
 color: #fff;
 border: none;
 border-radius: 5px;
 cursor: pointer;
}
.daily-card__btn:hover {
 background: #1abc9c;
}

JavaScript‑логика

Скрипт отвечает за:

Выбор случайной карты.
Сохранение её в localStorage до полуночи.
Отображение данных в пользовательском интерфейсе.

// daily-card.js
document.addEventListener('DOMContentLoaded'‚  => {
 const btn = document.getElementById('draw-btn');
 const img = document.getElementById('card-image');
 const nameEl = document.getElementById('card-name');
 const descEl = document.getElementById('card-desc');

 // Функция получения текущей даты в виде YYYY-MM-DD
 const todayKey =  => {
 const d = new Date;
 return d.toISOString.split('T')[0]; // '2026-04-28'
 };
 // Попытка загрузить уже вытянутую карту из localStorage
 const loadSavedCard =  => {
 const saved = localStorage.getItem('dailyCard_' + todayKey);
 return saved ? JSON.parse(saved) : null;
 };

 // Сохранить карту в localStorage
 const saveCard = (card) => {
 localStorage.setItem('dailyCard_' + todayKey‚ JSON.stringify(card));
 };

 // Выбрать случайную карту
 const getRandomCard =  => {
 const index = Math.floor(Math.random * cards.length);
 return cards[index];
 };

 // Отобразить карту в интерфейсе
 const renderCard = (card) => {
 img.src = card.image;
 img.alt = card.name;
 nameEl.textContent = card.name;
 descEl.textContent = card.description;
 };

 // Инициализация: если карта уже вытянута – показываем её‚ иначе ждём нажатия
 const init =  => {
 const savedCard = loadSavedCard;
 if (savedCard) {
 renderCard(savedCard);
 btn.disabled = true;
 btn.textContent = 'Карта уже выбрана';
 } else {
 btn.disabled = false;
 btn.textContent = 'Тянуть карту';
 }
 };

 // Обработчик кнопки
 btn.addEventListener('click'‚  => {
 const card = getRandomCard;
 renderCard(card);
 saveCard(card);
 btn.disabled = true;
 btn.textContent = 'Карта выбрана';
 });
 init;

});

Как подключить скрипт к странице

В конце <body> добавьте ссылки на стили и скрипт:

<link rel="stylesheet" href="css/daily-card.css">
...
<script src="js/cards-data.js"></script> <!-- массив cards -->
<script src="js/daily-card.js"></script>

Подключение через CDN (опционально)

Если хотите быстро протестировать без собственного хостинга‚ можно разместить файлы на jsDelivr или cdnjs. Пример:

<script src="https://cdn.jsdelivr.net/gh/yourname/daily-card@latest/daily-card.js"></script>

Расширенные возможности

Интеграция с внешним API Таро

Существует несколько бесплатных публичных API‚ например Tarot API. В этом случае вместо локального массива можно запрашивать случайную карту через fetch:

async function fetchRandomCard {
 const response = await fetch('https://tarotapi.dev/api/v1/cards/random');
 if (!response.ok) throw new Error('Network error');
 const data = await response.json;
 return {
 id: data.id‚
 name: data.name‚
 image: data.image‚ // ссылка на картинку
 description: data.meaning_up // трактовка «прямой» позиции
 };
}

Далее в обработчике кнопки заменяем локальный вызов getRandomCard на await fetchRandomCard. Не забывайте добавить async к функции‑обработчику.

Сохранение выбора на сервере

Если ваш сайт имеет пользовательскую базу‚ можно отправлять выбранную карту в бекенд (PHP‚ Node.js‚ Python) и хранить её в базе. Пример запроса через fetch:

fetch('/api/save-daily-card'‚ {
 method: 'POST'‚
 headers: {'Content-Type':'application/json'}‚
 body: JSON.stringify({cardId: card.id‚ date: todayKey})
})
.then(r=>r.json)
.then(data=>console.log('saved'‚ data))
.catch(err=>console.error(err));

Адаптивный дизайн

Для мобильных устройств стоит уменьшить размер изображения и добавить meta viewport в <head>:

<meta name="viewport" content="width=device-width‚ initial-scale=1">

В CSS добавить медиа‑запрос:

@media (max-width: 480px) {
 .daily-card__image {width: 150px;}
 .daily-card__wrapper {font-size: 0.9em;}
}

Тестирование и отладка

Проверьте работу в последних версиях Chrome‚ Firefox‚ Safari‚ Edge.
Убедитесь‚ что карта сохраняется в localStorage до полуночи. Для проверки можно изменить системные часы.
Тестируйте сценарий без JavaScript (скрытый fallback): покажите простое сообщение «Включите JavaScript‚ чтобы увидеть карту дня».
Проверьте‚ что изображения корректно загружаются (правильные пути‚ MIME‑типы).

Часто задаваемые вопросы (FAQ)

Можно ли использовать карты Таро без лицензии? Большинство классических изображений находятся в общественном достоянии (Rider‑Waite‚ Таро Тота). Если берёте изображения с чужих сайтов‚ убедитесь в наличии прав.
Сколько карт должно быть в наборе? Стандартный набор – 78 карт (22 старших аркана + 56 младших). Для упрощённого варианта можно использовать только старшие арканы.
Как сбросить карту вручную? Удалите запись из localStorage в консоли браузера:
```
localStorage.removeItem('dailyCard_' + (new Date).toISOString.split('T')[0]);
```
Можно ли добавить анимацию «перетаскивания»? Да‚ используйте CSS‑анимацию @keyframes или библиотеку anime.js для более плавного эффекта.

Создать интерактивный скрипт «Карта дня» для сайта – задача‚ которую можно решить без сложных серверных решений. Главное – подготовить набор карт‚ написать небольшую клиентскую логику и позаботиться о кросс‑браузерности. При желании скрипт можно расширять: подключать внешние API‚ сохранять результаты в базе‚ добавлять анимацию и форму подписки.

Следуя приведённому руководству‚ вы быстро внедрите элемент‚ который будет радовать ваших посетителей и повышать метрики сайта.

Важно: При работе с внешними API соблюдайте их условия использования и указывайте атрибуцию‚ если она требуется.