Тестовик апопа

[html]<style>
:root, .day {
--bord: #cdd2de;
--navi-link: #767883;
--sec-font: ralewe;
--text: #212123;
--navi-link-hov: #b77a69;
--quote: #ebebeb;
}

.evening {
--navi-link: #65517c;
--text: #25262a;
--navi-link-hov: #b0abb9;
--quote: #cdcdcd;
}
.night {
--bord: #807A96;
--navi-link: #7b759f;
--text: #bebebe;
--navi-link-hov: #574c5f;
--quote: #2e2b31;
}

.theme-switcher {
display: flex;
gap: 10px;
justify-content: center;
margin: 15px 0;
}
.theme-switcher button {
padding: 5px 10px;
cursor: pointer;
}
.tarodesk {
font-family: 'Georgia', serif;
background-color: transparent;
width: 600px;
color: var(--text);
line-height: 1.6;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.taroh1 {
text-align: center;
border-bottom: 2px solid var(--bord);
padding-bottom: 10px;
color: var(--navi-link);
font: bold 24px var(--sec-font);
font-style: italic;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin: 25px 0;
flex-wrap: wrap;
}
button {
padding: 10px 20px;
color: var(--text);
font: 400 24px var(--sec-font);
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
background-color: var(--navi-link-hov) !important;
}
.selecttaro {
font: 400 24px var(--sec-font) !important;
padding: 10px 20px !important;
color: var(--text) !important;
border: none !important;
border-radius: 4px !important;
cursor: pointer !important;
font-size: 16px !important;
transition: all 0.3s !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url(data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path></svg>) !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
padding-right: 40px !important;
width: auto !important;
display: inline-block !important;
box-shadow: none !important;
outline: none !important;
background-color: var(--navi-link-hov) !important;
}
.select-wrapper {
position: relative;
display: inline-block;
}

.select-wrapper::after {
color: white;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
z-index: 1;
}

button:hover {
background: #3e2723;
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 30px 0;
}

/* Стили для карт */
.card {
width: 150px;
height: 260px;
margin: 10px;
position: relative;
cursor: pointer;
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.card-back {
background: url('https://i.imgur.com/ddA6fjd.jpeg') center/cover;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 15px;
}
.card-front {
background: var(--quote);
transform: rotateY(180deg);
display: flex;
flex-direction: column;
}
.card-image {
width: 100%;
height: 88%;
object-fit: cover;
}
.card-info {
padding: 5px;
text-align: center;
}
.card-name {
font-weight: bold;
font-size: 12px;
margin-bottom: 5px;
}

.reversed-img {
transform: rotate(180deg);
}
@font-face {
font-family: 'DreiFraktur';
src: url('https://forumstatic.ru/files/001c/75/d0/75013.ttf');}

.highlighted {
display: inline;
color: var(--text);
font-size: 12px;
background-color: var(--quote) / 0.4;
text-shadow: 1px 1px 3px black;
}

.hieroglyph {
font-size: 25px;
line-height: 1;
vertical-align: middle;
filter: drop-shadow(0 0 2px var(--navi-link));
}

#karsig {
padding: 15px;
border-radius: 8px;
margin-top: 20px;
text-align: center;
display: none;
position: relative;
cursor: default;
color:var(--text);

}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(10px); }
}
.kar-a {
color: var(--navi-link-hov);
font-family: DreiFraktur;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
border-bottom: 1px dashed transparent;
}

.kar-a:hover {
color: var(--navi-link);
text-decoration: none;
transition: opacity .3s, transform 1s;

}
.meaning {
background: var(--quote);
padding: 15px;
border-radius: 8px;
margin-top: 30px;
box-shadow: 6px 5px 10px #0000000a;
}

.meaning_zag {
color: var(--navi-link);
margin-top: 0;
font-size: 1.17em;
margin-bottom: 0.5em;
font-weight: bold;
}
.reversed-badge {
color: var(--text);
padding: 3px 8px;
border-radius: 4px;
font-size: 14px;
margin-left: 10px;
background-color: var(--navi-link-hov) !important;
}

@media (max-width: 380px) {
.card {
width: 100px;
height: 175px;
}
}</style>
<div class="tarodesk">
<div class="theme-switcher">
<button onclick="setTheme('day')">☀</button>
<button onclick="setTheme('evening')">☁</button>
<button onclick="setTheme('night')">✦</button>
</div>
<div class="container">
<div class="taroh1">🕯 goddamn tarot 🕯</div>

<div class="controls">
<button id="shuffle">shuffle</button>
<div class="select-wrapper"> <select id="spread" class="selecttaro">
<option value="1">1 card</option>
<option value="3">3 card (Past-Present-Future)</option>
</select></div>
</div>

<div class="cards" id="cards"></div>

<div class="meaning" id="meaning">
<p>Нажмите на карту, чтобы узнать её значение.</p>
</div>
</div>
<script> //переключение темы
function setTheme(theme) {
document.documentElement.className = theme; // Меняем класс у корневого элемента
}
// Данные колоды Таро (сокращённый пример)
const tarotDeck = [
{
name: "0. Шут",
meaning: {
upright: "Новые начинания, спонтанность, свобода, невинность, приключения.",
reversed: "Безрассудство, риск, задержки, незрелость, плохое планирование."
},
image: "https://i.imgur.com/P7SiDSm.gif",
},
{
name: "I. Маг",
meaning: {
upright: "Сила воли, мастерство, концентрация, инициатива, проявление.",
reversed: "Манипуляции, обман, нерешительность, неиспользованный потенциал."
},
image: "https://i.imgur.com/VSChTFc.gif"
},
{
name: "II. Верховная Жрица",
meaning: {
upright: "Интуиция, тайны, подсознание, мудрость, скрытые знания.",
reversed: "Скрытые мотивы, игнорирование интуиции, подавленные чувства."
},
image: "https://i.imgur.com/GLag73p.jpeg"
},
{
name: "III. Императрица",
meaning: {
upright: "Плодородие, изобилие, природа, творчество, материнство.",
reversed: "Зависимость, расточительство, бесплодие, подавление."
},
image: "https://i.imgur.com/0imPCVU.jpeg"
},
{
name: "IV. Император",
meaning: {
upright: "Власть, структура, контроль, стабильность, дисциплина.",
reversed: "Тирания, жесткость, злоупотребление властью, хаос."
},
image: "https://i.imgur.com/04rseRj.jpeg"
},
{
name: "V. Иерофант",
meaning: {
upright: "Традиции, духовность, религия, обучение, наставничество.",
reversed: "Догматизм, слепая вера, лицемерие, подавление инакомыслия."
},
image: "https://i.imgur.com/V0WrJE5.jpeg"
},
{
name: "VI. Влюбленные",
meaning: {
upright: "Любовь, гармония, выбор, партнерство, единство.",
reversed: "Дисбаланс, конфликты, неверность, нерешительность."
},
image: "https://i.imgur.com/qwFXvdx.jpeg"
},
{
name: "VII. Колесница",
meaning: {
upright: "Победа, контроль, движение, решимость, успех.",
reversed: "Дисбаланс, конфликты, неверность, нерешительность."
},
image: "https://i.imgur.com/oQvMl9l.jpeg"
},
{
name: "VIII. Сила",
meaning: {
upright: "Мужество, терпение, мягкая сила, внутренняя мощь.",
reversed: " Слабость, неуверенность, страх, подавление."
},
image: "https://i.imgur.com/uZkvpEQ.jpeg"
},
{
name: "IX. Отшельник",
meaning: {
upright: "Самоанализ, мудрость, одиночество, поиск истины.",
reversed: "Изоляция, одиночество, депрессия, отказ от помощи."
},
image: "https://i.imgur.com/XWMruQ6.jpeg"
},
{
name: "X. Колесо Фортуны",
meaning: {
upright: " Судьба, удача, циклы, перемена, движение.",
reversed: "Неудача, сопротивление переменам, дисбаланс."
},
image: "https://i.imgur.com/Hy9WA9B.jpeg"
},
{
name: "XI. Правосудие",
meaning: {
upright: "Правда, закон, карма, равновесие, ответственность.",
reversed: "Несправедливость, коррупция, предвзятость."
},
image: "https://i.imgur.com/8Wvfnko.jpeg",
_meta: {
author: "apep",
project: "tarot",
signature: "<span class='hieroglyph'>𓅪</span> with chaos <span class='hieroglyph'>𓆗</span>",
}
},
{
name: "XII. Повешенный",
meaning: {
upright: "Жертва, сдача, новый взгляд, ожидание.",
reversed: "Бездействие, сопротивление, бесполезные жертвы."
},
image: "https://i.imgur.com/keBcoGT.jpeg"
},
{
name: "XIII. Смерть",
meaning: {
upright: "Трансформация, конец, переход, обновление.",
reversed: "Страх перемен, застой, сопротивление судьбе."
},
image: "https://i.imgur.com/AJHEPsG.jpeg"
},
{
name: "XIV. Умеренность",
meaning: {
upright: "Баланс, гармония, терпение, исцеление.",
reversed: "Дисбаланс, крайности, нетерпение, конфликты."
},
image: "https://i.imgur.com/XVAVPlz.jpeg"
},
{
name: "XV. Дьявол",
meaning: {
upright: "Иллюзии, зависимость, материализм, соблазн.",
reversed: "Освобождение, преодоление искушений, пробуждение."
},
image: "https://i.imgur.com/yqSLHX0.jpeg"
},
{
name: "XVI. Башня",
meaning: {
upright: " Разрушение, внезапные перемены, откровение, освобождение.",
reversed: "Избегание катастрофы, сопротивление изменениям, затяжной кризис."
},
image: "https://i.imgur.com/KIGpPi1.jpeg"
},
{
name: "XVII. Звезда",
meaning: {
upright: "Надежда, вера, исцеление, вдохновение, духовность.",
reversed: "Отчаяние, потеря веры, пессимизм, разочарование."
},
image: "https://i.imgur.com/SjbqmXa.jpeg"
},
{
name: "XVIII. Луна",
meaning: {
upright: "Иллюзии, страхи, подсознание, неопределенность.",
reversed: "Обман, тревога, подавленные эмоции, паранойя."
},
image: "https://i.imgur.com/hJnOegv.jpeg"
},
{
name: "XIX. Солнце",
meaning: {
upright: "Радость, успех, ясность, оптимизм, энергия.",
reversed: "Пессимизм, временные неудачи, задержки."
},
image: "https://i.imgur.com/K238qLs.jpeg"
},
{
name: "XX. Суд",
meaning: {
upright: "Обновление, призыв, прощение, возрождение.",
reversed: "Сожаление, застой, отказ от изменений."
},
image: "https://i.imgur.com/zTJiUOS.jpeg"
},
{
name: "XXI. Мир",
meaning: {
upright: "Завершение, гармония, достижение, путешествие.",
reversed: "Незавершенность, задержки, отсутствие удовлетворения."
},
image: "https://i.imgur.com/cNCSIOy.jpeg"
},

{
name: "Туз Кубков",
meaning: {
upright: "Любовь, новые чувства, эмоциональное начало, радость, духовность.",
reversed: "Эмоциональный дисбаланс, подавленные чувства, разочарование."
},
image: "https://i.imgur.com/30Gml12.jpeg"
},
{
name: "II Кубков",
meaning: {
upright: "Гармония, партнерство, взаимная любовь, союз, дружба.",
reversed: "Разрыв, дисбаланс, недоверие, несовместимость."
},
image: "https://i.imgur.com/9CLzYFY.jpeg"
},
{
name: "III Кубков",
meaning: {
upright: "Праздник, дружба, радость, сотрудничество, веселье.",
reversed: "Конфликты, излишества, одиночество, сплетни."
},
image: "https://i.imgur.com/EJxL2Ik.jpeg"
},
{
name: "IV Кубков",
meaning: {
upright: "Апатия, размышления, упущенные возможности, самоанализ.",
reversed: "Новые перспективы, пробуждение, принятие решений."
},
image: "https://i.imgur.com/VeXtvUz.jpeg"
},
{
name: "V Кубков",
meaning: {
upright: "Потеря, сожаление, печаль, разочарование.",
reversed: "Принятие, прощение, движение вперед, исцеление."
},
image: "https://i.imgur.com/E1w7ljD.jpeg"
},
{
name: "VI Кубков",
meaning: {
upright: "Ностальгия, детские воспоминания, невинность, радость прошлого.",
reversed: "Застревание в прошлом, трудности с отпусканием, наивность."
},
image: "https://i.imgur.com/PjYKpEC.jpeg"
},
{
name: "VII Кубков",
meaning: {
upright: "Иллюзии, выбор, мечты, фантазии, неопределенность.",
reversed: "Ясность, принятие реальности, осознанный выбор."
},
image: "https://i.imgur.com/Rn7qWSP.jpeg"
},
{
name: "VIII Кубков",
meaning: {
upright: "Уход, поиск смысла, оставление прошлого, духовный путь.",
reversed: "Боязнь перемен, застой, нежелание отпускать."
},
image: "https://i.imgur.com/Kdlwj0W.jpeg"
},
{
name: "IX Кубков",
meaning: {
upright: "Удовлетворение, эмоциональная стабильность, исполнение желаний.",
reversed: "Тщеславие, излишний комфорт, эгоизм."
},
image: "https://i.imgur.com/lomRlOK.jpeg"
},
{
name: "X Кубков",
meaning: {
upright: "Гармония в семье, счастье, любовь, домашний уют.",
reversed: "Дисгармония, семейные конфликты, неустроенность."
},
image: "https://i.imgur.com/CN6h4Hx.jpeg"
},
{
name: "Паж Кубков",
meaning: {
upright: "Чувствительность, мечтательность, новые эмоции, творчество.",
reversed: "Эмоциональная незрелость, обман, иллюзии."
},
image: "https://i.imgur.com/IuZMZyl.jpeg"
},
{
name: "Рыцарь Кубков",
meaning: {
upright: "Романтика, обаяние, дипломатия, предложение чувств.",
reversed: "Манипуляции, эмоциональная нестабильность, обман."
},
image: "https://i.imgur.com/givyldm.jpeg"
},
{
name: "Королева Кубков",
meaning: {
upright: "Забота, интуиция, сострадание, эмоциональная мудрость.",
reversed: "Жертвенность, подавленные чувства, зависимость."
},
image: "https://i.imgur.com/IWQCku2.jpeg"
},
{
name: "Король Кубков",
meaning: {
upright: "Эмоциональный контроль, мудрость, сочувствие, дипломатия.",
reversed: "Холодность, скрытые эмоции, манипуляции."
},
image: "https://i.imgur.com/Tmo8fT2.jpeg"
},

{
name: "Туз Пентаклей",
meaning: {
upright: "Новые финансовые возможности, материальное благополучие, стабильность, процветание.",
reversed: "Упущенные шансы, финансовые потери, нестабильность, жадность."
},
image: "https://i.imgur.com/fN7mlLv.jpeg"
},
{
name: "II Пентаклей",
meaning: {
upright: "Баланс ресурсов, адаптация, гибкость, управление финансами.",
reversed: "Дисбаланс, финансовый стресс, неорганизованность, перегрузка."
},
image: "https://i.imgur.com/rLGOuDL.jpeg"
},
{
name: "III Пентаклей",
meaning: {
upright: "Сотрудничество, мастерство, профессионализм, командная работа.",
reversed: "Некачественная работа, отсутствие мотивации, конфликты в коллективе."
},
image: "https://i.imgur.com/npBQUva.jpeg"
},
{
name: "IV Пентаклей",
meaning: {
upright: "Сохранение ресурсов, стабильность, бережливость, контроль.",
reversed: "Жадность, страх потерь, чрезмерный контроль, финансовые ограничения."
},
image: "https://i.imgur.com/uoU806F.jpeg"
},
{
name: "V Пентаклей",
meaning: {
upright: "Финансовые трудности, изоляция, лишения, потребность в помощи.",
reversed: "Восстановление, преодоление трудностей, новая надежда."
},
image: "https://i.imgur.com/ELUwXJ1.jpeg"
},
{
name: "VI Пентаклей",
meaning: {
upright: "Щедрость, благотворительность, баланс даяния и получения, финансовая помощь.",
reversed: "Долги, неравенство, эгоизм, злоупотребление щедростью."
},
image: "https://i.imgur.com/vyGYIdC.jpeg"
},
{
name: "VII Пентаклей",
meaning: {
upright: "Терпение, долгосрочные инвестиции, ожидание результатов, оценка прогресса.",
reversed: "Разочарование, поспешные решения, отсутствие роста."
},
image: "https://i.imgur.com/Xabp40K.jpeg"
},
{
name: "VIII Пентаклей",
meaning: {
upright: "Усердие, мастерство, внимание к деталям, профессиональный рост.",
reversed: "Отсутствие мотивации, рутина, некачественная работа."
},
image: "https://i.imgur.com/dh48Nck.jpeg"
},
{
name: "IX Пентаклей",
meaning: {
upright: "Финансовая независимость, комфорт, наслаждение плодами труда, самодостаточность.",
reversed: "Расточительство, зависимость, ложное благополучие."
},
image: "https://i.imgur.com/TUKSnlb.jpeg"
},
{
name: "X Пентаклей",
meaning: {
upright: "Богатство, семейное благополучие, наследство, стабильность, долгосрочная безопасность.",
reversed: "Финансовые потери, семейные конфликты, нестабильность."
},
image: "https://i.imgur.com/D5WYgCl.jpeg"
},
{
name: "Паж Пентаклей",
meaning: {
upright: "Обучение, новые возможности, практичность, финансовый потенциал.",
reversed: "Неуверенность, лень, упущенные шансы, безответственность."
},
image: "https://i.imgur.com/KCKbWlS.jpeg"
},
{
name: "Рыцарь Пентаклей",
meaning: {
upright: "Трудолюбие, надежность, методичность, финансовый прогресс.",
reversed: "Застой, лень, безответственность, промедление."
},
image: "https://i.imgur.com/uO5MIGO.png"
},
{
name: "Королева Пентаклей",
meaning: {
upright: "Изобилие, забота, практичность, финансовая мудрость, щедрость.",
reversed: "Материализм, жадность, пренебрежение семьей, финансовые трудности."
},
image: "https://i.imgur.com/O0mKYgR.jpeg"
},
{
name: "Король Пентаклей",
meaning: {
upright: "Финансовая стабильность, успех, надежность, лидерство, процветание.",
reversed: "Жадность, авторитаризм, финансовые риски, коррупция."
},
image: "https://i.imgur.com/zeD6pJ1.jpeg"
},
{
name: "Туз Жезлов",
meaning: {
upright: "Новые начинания, энергия, вдохновение, творческий потенциал, энтузиазм.",
reversed: "Промедление, отсутствие мотивации, упущенные возможности, творческий кризис."
},
image: "https://i.imgur.com/8UIpdfC.jpeg"
},
{
name: "II Жезлов",
meaning: {
upright: "Планирование, будущие перспективы, лидерство, принятие решений.",
reversed: "Страх перед изменениями, плохое планирование, отсутствие видения."
},
image: "https://i.imgur.com/dEbyCUS.jpeg"
},
{
name: "III Жезлов",
meaning: {
upright: "Сотрудничество, первые результаты, расширение горизонтов, предпринимательство.",
reversed: "Разочарование, задержки, отсутствие поддержки, нереализованные планы."
},
image: "https://i.imgur.com/7qOpYRT.jpeg"
},
{
name: "IV Жезлов",
meaning: {
upright: "Праздник, гармония, стабильность, домашний уют, достижения.",
reversed: "Конфликты, временные трудности, нестабильность, отсрочка радости."
},
image: "https://i.imgur.com/OU6JVY2.jpeg"
},
{
name: "V Жезлов",
meaning: {
upright: "Конкуренция, конфликты, борьба, испытания, энергичное соперничество.",
reversed: "Избегание конфликтов, беспорядок, нечестная игра, истощение."
},
image: "https://i.imgur.com/o8UEpRF.jpeg"
},
{
name: "VI Жезлов",
meaning: {
upright: "Победа, успех, признание, триумф, лидерство.",
reversed: "Гордыня, временные неудачи, отсутствие поддержки, задержка успеха."
},
image: "https://i.imgur.com/PIuAqwn.jpeg"
},
{
name: "VII Жезлов",
meaning: {
upright: "Защита своих позиций, стойкость, отстаивание убеждений, вызов.",
reversed: "Упадок сил, сомнения, поражение, неспособность постоять за себя."
},
image: "https://i.imgur.com/XpwdGN8.jpeg"
},
{
name: "VIII Жезлов",
meaning: {
upright: "Быстрое движение, новости, поездки, динамичные изменения, прогресс.",
reversed: "Задержки, неожиданные препятствия, поспешные решения, хаос."
},
image: "https://i.imgur.com/3mOp2KJ.jpeg"
},
{
name: "IX Жезлов",
meaning: {
upright: "Сила воли, стойкость, защита, бдительность, внутренняя сила.",
reversed: "Упрямство, истощение, паранойя, сопротивление без причины."
},
image: "https://i.imgur.com/ykMT6Le.jpeg"
},
{
name: "X Жезлов",
meaning: {
upright: "Нагрузка, ответственность, тяжелый труд, необходимость завершить дело.",
reversed: "Переутомление, неумение делегировать, освобождение от ноши."
},
image: "https://i.imgur.com/yDjKG08.jpeg"
},
{
name: "Паж Жезлов",
meaning: {
upright: "Энтузиазм, новые идеи, любопытство, энергия юности, вдохновение.",
reversed: "Неуверенность, промедление, незрелость, отсутствие направления."
},
image: "https://i.imgur.com/2OFPR0L.jpeg"
},
{
name: "Рыцарь Жезлов",
meaning: {
upright: "Страсть, действие, авантюризм, энергичность, движение вперед.",
reversed: "Импульсивность, агрессия, поспешность, отсутствие терпения."
},
image: "https://i.imgur.com/QvbbRl0.jpeg"
},
{
name: "Королева Жезлов",
meaning: {
upright: "Уверенность, харизма, жизнерадостность, лидерство, оптимизм.",
reversed: "Ревность, властность, манипуляции, потеря вдохновения."
},
image: "https://i.imgur.com/cPpSCzs.jpeg"
},
{
name: "Король Жезлов",
meaning: {
upright: "Лидерство, амбиции, предпринимательство, уверенность, авторитет.",
reversed: "Властность, тирания, импульсивность, злоупотребление силой."
},
image: "https://i.imgur.com/pwT6wgT.jpeg"
},
{
name: "Туз Мечей",
meaning: {
upright: "Ясность мысли, интеллектуальный прорыв, победа разума, новые идеи.",
reversed: "Путаница, плохие решения, когнитивные искажения, ментальные блоки."
},
image: "https://i.imgur.com/yNZ6IKU.jpeg"
},
{
name: "II Мечей",
meaning: {
upright: "Трудный выбор, тупиковая ситуация, баланс, временное перемирие.",
reversed: "Избегание правды, нерешительность, раскрытие обмана, вынужденный выбор."
},
image: "https://i.imgur.com/4m9of5i.jpeg"
},
{
name: "III Мечей",
meaning: {
upright: "Душевная боль, предательство, разрыв, горе, эмоциональная травма.",
reversed: "Исцеление, прощение, принятие, освобождение от страданий."
},
image: "https://i.imgur.com/5qxru5z.jpeg"
},
{
name: "IV Мечей",
meaning: {
upright: "Отдых, восстановление, медитация, временное отступление, покой.",
reversed: "Бессонница, истощение, возвращение к активности, избегание отдыха."
},
image: "https://i.imgur.com/nOmFq14.jpeg"
},
{
name: "V Мечей",
meaning: {
upright: "Конфликт, победа любой ценой, унижение противника, горький триумф.",
reversed: "Примирение, отказ от борьбы, извлечение уроков, моральная победа."
},
image: "https://i.imgur.com/1CAm97e.jpeg"
},
{
name: "VI Мечей",
meaning: {
upright: "Переходный период, движение вперед, исцеление, помощь в трудный момент.",
reversed: "Застревание в прошлом, сопротивление переменам, эмоциональные багаж."
},
image: "https://i.imgur.com/OPz9QaS.jpeg"
},
{
name: "VII Мечей",
meaning: {
upright: "Хитрость, обман, тактический маневр, скрытые мотивы, воровство.",
reversed: "Разоблачение, наивность, провал планов, возвращение к честности."
},
image: "https://i.imgur.com/A32AGdJ.jpeg"
},
{
name: "VIII Мечей",
meaning: {
upright: "Ограничения, ментальная ловушка, жертва обстоятельств, беспомощность.",
reversed: "Освобождение, новый взгляд, преодоление страхов, выход из тупика."
},
image: "https://i.imgur.com/FyRnDWl.jpeg"
},
{
name: "IX Мечей",
meaning: {
upright: "Тревога, кошмары, чувство вины, депрессия, ментальные страдания.",
reversed: "Надежда, преодоление страхов, поиск помощи, облегчение."
},
image: "https://i.imgur.com/5GowvZQ.jpeg"
},
{
name: "X Мечей",
meaning: {
upright: "Конец, болезненное завершение, предательство, неизбежный крах.",
reversed: "Восстановление, возрождение, принятие потерь, начало исцеления."
},
image: "https://i.imgur.com/8GMyX7B.jpeg"
},
{
name: "Паж Мечей",
meaning: {
upright: "Любознательность, новые идеи, бдительность, интеллектуальный вызов.",
reversed: "Хитрость, сплетни, незрелость, необдуманные слова, клевета."
},
image: "https://i.imgur.com/QVh08vf.jpeg"
},
{
name: "Рыцарь Мечей",
meaning: {
upright: "Решительность, напор, интеллектуальная мощь, стремительные действия.",
reversed: "Безрассудство, агрессия, разрушение, импульсивные поступки."
},
image: "https://i.imgur.com/KNhgjLQ.jpeg"
},
{
name: "Королева Мечей",
meaning: {
upright: "Ясность ума, независимость, справедливость, объективность, мудрость.",
reversed: "Жестокость, манипуляции, холодность, цинизм, эмоциональная отстраненность."
},
image: "https://i.imgur.com/EcJrEM5.jpeg"
},
{
name: "Король Мечей",
meaning: {
upright: "Интеллектуальная власть, авторитет, стратегическое мышление, справедливость.",
reversed: "Манипуляции, деспотизм, злоупотребление властью, жестокость."
},
image: "https://i.imgur.com/uZHEbR2.jpeg"
}
];

// Элементы DOM
const cardsContainer = document.getElementById('cards');
const meaningDiv = document.getElementById('meaning');
const shuffleBtn = document.getElementById('shuffle');
const spreadSelect = document.getElementById('spread');
let activeCard = null;

// Тасование колоды
function shuffleDeck() {
return [...tarotDeck].sort(() => Math.random() - 0.5);
}

// Отрисовка карт
function drawCards(numCards) {
cardsContainer.innerHTML = '';
const shuffledDeck = shuffleDeck().slice(0, numCards);
activeCard = null;

shuffledDeck.forEach((card, index) => {
const cardEl = document.createElement('div');
cardEl.className = 'card';

const isReversed = Math.random() > 0.5;

cardEl.innerHTML = `
<div class="card-inner">
<div class="card-face card-back">
</div>
<div class="card-face card-front">
<img src="${card.image}" alt="${card.name}" class="card-image ${isReversed ? 'reversed-img' : ''}">
<div class="card-info">
<div class="card-name">${card.name}</div>

</div>
</div>
</div>
`;

cardEl.addEventListener('click', () => {
// Переворачиваем карту при первом клике
if (!cardEl.classList.contains('flipped')) {
cardEl.classList.add('flipped');
}

// Показываем значение карты
showCardMeaning(card, isReversed, index, numCards);

// Убираем выделение с предыдущей активной карты
if (activeCard) {
activeCard.classList.remove('active');
}

// Выделяем текущую карту
cardEl.classList.add('active');
activeCard = cardEl;
});

cardsContainer.appendChild(cardEl);
});

meaningDiv.innerHTML = '<p>Нажмите на карту, чтобы узнать её значение.</p>';
}

// Показать значение карты
function showCardMeaning(card, isReversed, index, totalCards) {
const position = totalCards > 1 ? getPositionName(index, totalCards) : '';

meaningDiv.innerHTML = `
<div class="meaning_zag">
${card.name}
${isReversed ? '<span class="reversed-badge">Перевёрнутая</span>' : ''}
</div
${position ? `<p><strong>Позиция:</strong> ${position}</p>` : ''}
<p><strong>Значение:</strong> ${isReversed ? card.meaning.reversed : card.meaning.upright}</p>
`;
}

// Названия позиций в раскладе
function getPositionName(index, total) {
if (total === 3) {
return ["Прошлое", "Настоящее", "Будущее"][index];
} else if (total === 5) {
return ["Текущая ситуация", "Препятствие", "Совет", "Ближайшее будущее", "Итог"][index];
}
return "";
}

// Инициализация
shuffleBtn.addEventListener('click', () => {
const numCards = parseInt(spreadSelect.value);
drawCards(numCards);
});

// Первый запуск
drawCards(1);

let tapCount = 0;
let lastTapTime = 0;
let signatureVisible = false;

document.querySelector('.taroh1').addEventListener('click', function(e) {
const currentTime = new Date().getTime();
const tapDelay = currentTime - lastTapTime;

if (tapDelay < 500 && tapDelay > 0) {
tapCount++;
} else {
tapCount = 1;
}

lastTapTime = currentTime;

if (tapCount === 3) {
toggleSignature();
tapCount = 0;
}
});

document.getElementById('karsig').addEventListener('click', function(e) {
if (signatureVisible) toggleSignature();
});

/*свайп для мобилки */
if ('ontouchstart' in window) {
let touchStartX = 0;
let touchStartY = 0;
const SWIPE_THRESHOLD = 150;
document.addEventListener('touchstart', function(e) {
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
}, { passive: true });

document.addEventListener('touchend', function(e) {
const touchEndX = e.changedTouches[0].clientX;
const touchEndY = e.changedTouches[0].clientY;
const dx = touchEndX - touchStartX;
const dy = touchEndY - touchStartY;

// чек свайп
if (Math.abs(dx) > SWIPE_THRESHOLD &&
Math.abs(dx) > Math.abs(dy) * 2 &&
e.target.closest('.card')) {

// Свайп актив
if (!signatureVisible) toggleSignature();

// Анимация "сброса" карты
const card = e.target.closest('.card');
card.style.transform = `translateX(${dx > 0 ? 20 : -20}px)`; // Увеличенное смещение
setTimeout(() => card.style.transform = '', 300);
}
}, { passive: true });
}
</script><div id="karsig" style="display: none;"></div></div>