generated from nhcarrigan/template
hikari
0670f96062
Security Scan and Upload / Security & DefectDojo Upload (pull_request) Successful in 49s
Each spread now has a fuller description and a "Good for:" line explaining what kinds of questions it suits best. ✨ This commit was made with love from Hikari~ 🌸
1070 lines
51 KiB
HTML
1070 lines
51 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Tarot Reading</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta
|
|
name="description"
|
|
content="Draw tarot cards and receive a reading with traditional card meanings."
|
|
/>
|
|
<script
|
|
src="https://cdn.nhcarrigan.com/headers/index.js"
|
|
async
|
|
defer
|
|
></script>
|
|
<style>
|
|
footer {
|
|
z-index: 2;
|
|
}
|
|
|
|
html, body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.tarot-hero {
|
|
text-align: center;
|
|
padding: 1em 1em 2em;
|
|
border-bottom: 2px solid var(--witch-plum);
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.tarot-hero h1 {
|
|
font-size: 2.5rem;
|
|
letter-spacing: 0.08em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.tarot-tagline {
|
|
font-size: 1.1rem;
|
|
color: var(--witch-plum);
|
|
font-style: italic;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.spread-select {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1em;
|
|
justify-content: center;
|
|
margin: 2em 0;
|
|
}
|
|
|
|
.spread-btn {
|
|
padding: 0.75em 1.5em;
|
|
border: 2px solid var(--witch-plum);
|
|
border-radius: 12px;
|
|
background: color-mix(in srgb, var(--witch-plum) 35%, transparent);
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.spread-btn:hover,
|
|
.spread-btn.active {
|
|
background: var(--witch-plum);
|
|
}
|
|
|
|
.spread-description {
|
|
text-align: center;
|
|
color: var(--witch-plum);
|
|
font-style: italic;
|
|
margin-bottom: 0.75em;
|
|
min-height: 1.5em;
|
|
}
|
|
|
|
.spread-goodfor {
|
|
text-align: center;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.spread-goodfor strong {
|
|
color: var(--witch-plum);
|
|
}
|
|
|
|
.draw-btn {
|
|
display: block;
|
|
margin: 0 auto 2em;
|
|
padding: 0.85em 2.5em;
|
|
border: none;
|
|
border-radius: 15px;
|
|
background: var(--witch-rose);
|
|
color: var(--witch-moon);
|
|
font-family: inherit;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
letter-spacing: 0.05em;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.draw-btn:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.draw-btn:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.cards-area-wrap {
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.cards-area {
|
|
margin: 2em auto;
|
|
display: grid;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
align-items: start;
|
|
gap: 1.5em;
|
|
}
|
|
|
|
/* Single card */
|
|
.layout-single { grid-template-columns: 1fr; }
|
|
|
|
/* Three-card horizontal line */
|
|
.layout-three,
|
|
.layout-love { grid-template-columns: repeat(3, auto); }
|
|
|
|
/* Five-card cross */
|
|
.layout-five {
|
|
grid-template-columns: repeat(3, auto);
|
|
grid-template-rows: repeat(3, auto);
|
|
}
|
|
.layout-five [data-slot="0"] { grid-column: 2; grid-row: 1; }
|
|
.layout-five [data-slot="1"] { grid-column: 2; grid-row: 2; }
|
|
.layout-five [data-slot="2"] { grid-column: 1; grid-row: 2; }
|
|
.layout-five [data-slot="3"] { grid-column: 3; grid-row: 2; }
|
|
.layout-five [data-slot="4"] { grid-column: 2; grid-row: 3; }
|
|
|
|
/* Compatibility H */
|
|
.layout-compatibility {
|
|
grid-template-columns: repeat(3, auto);
|
|
grid-template-rows: repeat(3, auto);
|
|
}
|
|
.layout-compatibility [data-slot="0"] { grid-column: 1; grid-row: 1; }
|
|
.layout-compatibility [data-slot="1"] { grid-column: 1; grid-row: 2; }
|
|
.layout-compatibility [data-slot="2"] { grid-column: 1; grid-row: 3; }
|
|
.layout-compatibility [data-slot="3"] { grid-column: 2; grid-row: 2; }
|
|
.layout-compatibility [data-slot="4"] { grid-column: 3; grid-row: 1; }
|
|
.layout-compatibility [data-slot="5"] { grid-column: 3; grid-row: 2; }
|
|
.layout-compatibility [data-slot="6"] { grid-column: 3; grid-row: 3; }
|
|
|
|
/* Horseshoe arc */
|
|
.layout-horseshoe {
|
|
grid-template-columns: repeat(5, auto);
|
|
grid-template-rows: repeat(4, auto);
|
|
}
|
|
.layout-horseshoe [data-slot="0"] { grid-column: 1; grid-row: 1; }
|
|
.layout-horseshoe [data-slot="1"] { grid-column: 2; grid-row: 2; }
|
|
.layout-horseshoe [data-slot="2"] { grid-column: 3; grid-row: 3; }
|
|
.layout-horseshoe [data-slot="3"] { grid-column: 3; grid-row: 4; }
|
|
.layout-horseshoe [data-slot="4"] { grid-column: 4; grid-row: 3; }
|
|
.layout-horseshoe [data-slot="5"] { grid-column: 4; grid-row: 2; }
|
|
.layout-horseshoe [data-slot="6"] { grid-column: 5; grid-row: 1; }
|
|
|
|
/* Astrological — clock ring */
|
|
.layout-astrological {
|
|
grid-template-columns: repeat(5, auto);
|
|
grid-template-rows: repeat(5, auto);
|
|
}
|
|
.layout-astrological [data-slot="0"] { grid-column: 3; grid-row: 1; }
|
|
.layout-astrological [data-slot="1"] { grid-column: 4; grid-row: 1; }
|
|
.layout-astrological [data-slot="2"] { grid-column: 5; grid-row: 2; }
|
|
.layout-astrological [data-slot="3"] { grid-column: 5; grid-row: 3; }
|
|
.layout-astrological [data-slot="4"] { grid-column: 5; grid-row: 4; }
|
|
.layout-astrological [data-slot="5"] { grid-column: 4; grid-row: 5; }
|
|
.layout-astrological [data-slot="6"] { grid-column: 3; grid-row: 5; }
|
|
.layout-astrological [data-slot="7"] { grid-column: 2; grid-row: 5; }
|
|
.layout-astrological [data-slot="8"] { grid-column: 1; grid-row: 4; }
|
|
.layout-astrological [data-slot="9"] { grid-column: 1; grid-row: 3; }
|
|
.layout-astrological [data-slot="10"] { grid-column: 1; grid-row: 2; }
|
|
.layout-astrological [data-slot="11"] { grid-column: 2; grid-row: 1; }
|
|
|
|
/* Celtic Cross */
|
|
.layout-celtic {
|
|
grid-template-columns: repeat(5, auto);
|
|
grid-template-rows: repeat(4, auto);
|
|
}
|
|
.layout-celtic [data-slot="0"] { grid-column: 3; grid-row: 2; }
|
|
.layout-celtic [data-slot="1"] { grid-column: 2; grid-row: 3; }
|
|
.layout-celtic [data-slot="2"] { grid-column: 3; grid-row: 3; }
|
|
.layout-celtic [data-slot="3"] { grid-column: 2; grid-row: 2; }
|
|
.layout-celtic [data-slot="4"] { grid-column: 3; grid-row: 1; }
|
|
.layout-celtic [data-slot="5"] { grid-column: 4; grid-row: 2; }
|
|
.layout-celtic [data-slot="6"] { grid-column: 5; grid-row: 4; }
|
|
.layout-celtic [data-slot="7"] { grid-column: 5; grid-row: 3; }
|
|
.layout-celtic [data-slot="8"] { grid-column: 5; grid-row: 2; }
|
|
.layout-celtic [data-slot="9"] { grid-column: 5; grid-row: 1; }
|
|
|
|
.card-slot {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 160px;
|
|
text-align: center;
|
|
}
|
|
|
|
.card-slot-label {
|
|
font-size: 0.85rem;
|
|
color: var(--witch-plum);
|
|
font-style: italic;
|
|
margin-bottom: 0.5em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.card-img-wrap {
|
|
width: 150px;
|
|
height: 260px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
border: 2px solid var(--witch-plum);
|
|
margin-bottom: 0.75em;
|
|
background: rgba(212, 165, 199, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card-img-wrap img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.card-img-wrap img.reversed {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.card-name {
|
|
font-weight: 700;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.card-orientation {
|
|
font-size: 0.8rem;
|
|
font-style: italic;
|
|
opacity: 0.65;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.card-meaning {
|
|
font-size: 0.85rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.reading-section {
|
|
display: none;
|
|
margin-top: 2em;
|
|
}
|
|
|
|
.reading-section.visible {
|
|
display: block;
|
|
}
|
|
|
|
.reading-divider {
|
|
border: none;
|
|
border-top: 2px solid var(--witch-plum);
|
|
margin: 2em 0;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.card-img-wrap {
|
|
width: 120px;
|
|
height: 208px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main style="padding-bottom: 6em;">
|
|
<section class="tarot-hero">
|
|
<h1>🔮 Tarot Reading</h1>
|
|
<p class="tarot-tagline">Draw your cards and receive guidance from the arcana.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<p style="text-align:center;margin-bottom:1em;">Choose your spread:</p>
|
|
<div class="spread-select">
|
|
<button class="spread-btn active" data-spread="single">Single Card</button>
|
|
<button class="spread-btn" data-spread="three">Three Card</button>
|
|
<button class="spread-btn" data-spread="five">Five Card</button>
|
|
<button class="spread-btn" data-spread="love">Three-Card Love</button>
|
|
<button class="spread-btn" data-spread="compatibility">Compatibility H</button>
|
|
<button class="spread-btn" data-spread="horseshoe">Horseshoe</button>
|
|
<button class="spread-btn" data-spread="astrological">Astrological</button>
|
|
<button class="spread-btn" data-spread="celtic">Celtic Cross</button>
|
|
</div>
|
|
<p class="spread-description" id="spread-desc">A single card drawn to offer guidance or a focus for your day.</p>
|
|
<p class="spread-goodfor" id="spread-goodfor"><strong>Good for:</strong> Daily check-ins, meditation focus, or a gentle nudge when you need clarity.</p>
|
|
<button class="draw-btn" id="draw-btn">Draw Cards</button>
|
|
</section>
|
|
|
|
<section class="reading-section" id="reading-section">
|
|
<hr class="reading-divider" />
|
|
<div class="cards-area-wrap">
|
|
<div class="cards-area" id="cards-area"></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
/* ========== CARD DATA ========== */
|
|
const CARDS = [
|
|
// Major Arcana
|
|
{
|
|
name: "The Fool",
|
|
img: "the_fool.png",
|
|
upright: "New beginnings, innocence, spontaneity, a free spirit. The Fool leaps into the unknown with optimism and trust that the universe will provide.",
|
|
reversed: "Naivety, foolishness, recklessness, risk-taking without thought. Look before you leap — carelessness may lead to unnecessary mistakes."
|
|
},
|
|
{
|
|
name: "The Magician",
|
|
img: "the_magician.png",
|
|
upright: "Manifestation, resourcefulness, power, inspired action. You have the tools and the will — use them to bring your desires into reality.",
|
|
reversed: "Manipulation, poor planning, untapped talents. Skills are present but not being fully utilised, or are being misused for selfish ends."
|
|
},
|
|
{
|
|
name: "The High Priestess",
|
|
img: "the_high_priestess.png",
|
|
upright: "Intuition, sacred knowledge, divine feminine, the subconscious mind. Trust your inner voice and look beyond the surface.",
|
|
reversed: "Secrets, disconnection from intuition, withdrawal. Hidden agendas or a reluctance to listen to your own inner wisdom."
|
|
},
|
|
{
|
|
name: "The Empress",
|
|
img: "the_empress.png",
|
|
upright: "Femininity, beauty, nature, nurturing, abundance. A time of growth, creativity, and connection with the natural world.",
|
|
reversed: "Creative block, dependence, smothering. An imbalance in giving and receiving — perhaps neglecting your own needs."
|
|
},
|
|
{
|
|
name: "The Emperor",
|
|
img: "the_emperor.png",
|
|
upright: "Authority, establishment, structure, a father figure. Stability and order; the power of discipline and logic applied with care.",
|
|
reversed: "Domination, excessive control, rigidity, inflexibility. Power being wielded without wisdom or compassion."
|
|
},
|
|
{
|
|
name: "The Hierophant",
|
|
img: "the_hierophant.png",
|
|
upright: "Spiritual wisdom, religious beliefs, conformity, tradition. Seeking guidance from established systems, mentors, or institutions.",
|
|
reversed: "Personal beliefs, freedom, challenging the status quo. Breaking away from convention to forge your own spiritual path."
|
|
},
|
|
{
|
|
name: "The Lovers",
|
|
img: "the_lovers.png",
|
|
upright: "Love, harmony, relationships, values alignment, choices. A deep connection and the alignment of heart and mind.",
|
|
reversed: "Self-love, disharmony, imbalance, misalignment of values. Conflict in a relationship or a choice made without consulting the heart."
|
|
},
|
|
{
|
|
name: "The Chariot",
|
|
img: "the_chariot.png",
|
|
upright: "Control, willpower, success, action, determination. Victory through focus and sheer force of will; moving forward despite obstacles.",
|
|
reversed: "Self-discipline, opposition, lack of direction. Losing control or allowing others to steer the course of your life."
|
|
},
|
|
{
|
|
name: "Strength",
|
|
img: "strength.png",
|
|
upright: "Strength, courage, persuasion, influence, compassion. True power comes not from force but from gentleness and inner resolve.",
|
|
reversed: "Inner strength, self-doubt, low energy, raw emotion. Courage is present but untapped; self-doubt is the only real obstacle."
|
|
},
|
|
{
|
|
name: "The Hermit",
|
|
img: "the_hermit.png",
|
|
upright: "Soul-searching, introspection, being alone, inner guidance. A period of withdrawal to find deeper truths within yourself.",
|
|
reversed: "Isolation, loneliness, withdrawal from others. Introspection that has become unhealthy, cutting off connection with the world."
|
|
},
|
|
{
|
|
name: "Wheel of Fortune",
|
|
img: "wheel_of_fortune.png",
|
|
upright: "Good luck, karma, life cycles, destiny, a turning point. The wheel turns — embrace the change that fortune brings.",
|
|
reversed: "Bad luck, resistance to change, breaking cycles. Clinging to the old when the wheel is demanding transformation."
|
|
},
|
|
{
|
|
name: "Justice",
|
|
img: "justice.png",
|
|
upright: "Justice, fairness, truth, cause and effect, law. What is right will be acknowledged; balance will be restored.",
|
|
reversed: "Unfairness, lack of accountability, dishonesty. A decision made without full information, or consequences being avoided."
|
|
},
|
|
{
|
|
name: "The Hanged Man",
|
|
img: "the_hanged_man.png",
|
|
upright: "Pause, surrender, letting go, new perspectives. There is wisdom in stillness; release control to gain clarity.",
|
|
reversed: "Delays, resistance, stalling, indecision. Refusing to let go of what no longer serves; a reluctance to see things differently."
|
|
},
|
|
{
|
|
name: "Death",
|
|
img: "death.png",
|
|
upright: "Endings, change, transformation, transition. Something must end for something new to begin — this is not a card of loss, but of rebirth.",
|
|
reversed: "Resistance to change, personal transformation, inner purging. Clinging to what has run its course; fear of the inevitable."
|
|
},
|
|
{
|
|
name: "Temperance",
|
|
img: "temperance.png",
|
|
upright: "Balance, moderation, patience, purpose, meaning. Find the middle path; blend opposing forces with grace and patience.",
|
|
reversed: "Imbalance, excess, self-healing, re-alignment. Something is out of proportion; recalibration is needed."
|
|
},
|
|
{
|
|
name: "The Devil",
|
|
img: "the_devil.png",
|
|
upright: "Shadow self, attachment, addiction, restriction, sexuality. Acknowledging the chains you have placed upon yourself is the first step to freedom.",
|
|
reversed: "Releasing limiting beliefs, exploring dark thoughts, detachment. The chains are loosening — freedom is within reach."
|
|
},
|
|
{
|
|
name: "The Tower",
|
|
img: "the_tower.png",
|
|
upright: "Sudden change, upheaval, chaos, revelation, awakening. A sudden disruption strips away false structures to reveal the truth beneath.",
|
|
reversed: "Personal transformation, fear of change, averting disaster. Inner upheaval; a crisis that is being avoided rather than faced."
|
|
},
|
|
{
|
|
name: "The Star",
|
|
img: "the_star.png",
|
|
upright: "Hope, faith, purpose, renewal, spirituality. After the storm, the star shines — a beacon of hope, healing, and trust in the future.",
|
|
reversed: "Lack of faith, despair, self-trust, disconnection. Hope has dimmed; a need to reconnect with your own sense of purpose."
|
|
},
|
|
{
|
|
name: "The Moon",
|
|
img: "the_moon.png",
|
|
upright: "Illusion, fear, the unconscious, intuition, confusion. Not all is as it appears; trust your instincts to navigate the fog.",
|
|
reversed: "Release of fear, repressed emotion, inner confusion. The fog is beginning to lift, but hidden feelings still need to be addressed."
|
|
},
|
|
{
|
|
name: "The Sun",
|
|
img: "the_sun.png",
|
|
upright: "Positivity, fun, warmth, success, vitality. A card of joy and abundance — clarity after confusion, light after darkness.",
|
|
reversed: "Inner child, feeling down, overly optimistic. Joy is present but perhaps not fully accessible; a temporary dimming of the light."
|
|
},
|
|
{
|
|
name: "Judgement",
|
|
img: "judgement.png",
|
|
upright: "Judgement, rebirth, inner calling, absolution. A moment of awakening — a call to rise, reflect, and step into your higher self.",
|
|
reversed: "Self-doubt, inner critic, ignoring the call. Hesitation in answering your true calling; harsh self-judgement blocking progress."
|
|
},
|
|
{
|
|
name: "The World",
|
|
img: "the_world.png",
|
|
upright: "Completion, integration, accomplishment, travel. A cycle comes to its fullest expression; celebration of all that has been achieved.",
|
|
reversed: "Seeking personal closure, short-cuts, delays. The end is in sight but something is holding back full completion."
|
|
},
|
|
|
|
// Minor Arcana — Wands
|
|
{
|
|
name: "Ace of Wands",
|
|
img: "ace_of_wands.png",
|
|
upright: "Inspiration, new opportunities, growth, potential. A spark of creative fire — seize the moment and begin something bold.",
|
|
reversed: "An emerging idea, lack of direction, distractions. The spark is there but struggles to ignite into sustained action."
|
|
},
|
|
{
|
|
name: "Two of Wands",
|
|
img: "two_of_wands.png",
|
|
upright: "Future planning, progress, decisions, discovery. You stand at the edge of your world, ready to expand beyond what you know.",
|
|
reversed: "Personal goals, inner alignment, fear of unknown. Hesitation to step forward; looking outward while holding back inwardly."
|
|
},
|
|
{
|
|
name: "Three of Wands",
|
|
img: "three_of_wands.png",
|
|
upright: "Progress, expansion, foresight, overseas opportunities. Your efforts are bearing fruit; look forward with confidence.",
|
|
reversed: "Playing small, lack of foresight, unexpected delays. Growth is being limited by a narrow vision or reluctance to expand."
|
|
},
|
|
{
|
|
name: "Four of Wands",
|
|
img: "four_of_wands.png",
|
|
upright: "Celebration, joy, harmony, relaxation, homecoming. A moment of happiness and community; celebrate what has been built.",
|
|
reversed: "Personal celebration, inner harmony, conflict at home. Joy is present but may be overshadowed by instability in the environment."
|
|
},
|
|
{
|
|
name: "Five of Wands",
|
|
img: "five_of_wands.png",
|
|
upright: "Conflict, disagreements, competition, tension, diversity. A clash of ideas or ambitions; channel the energy productively.",
|
|
reversed: "Inner conflict, conflict avoidance, tension release. Disagreements are simmering beneath the surface or being suppressed."
|
|
},
|
|
{
|
|
name: "Six of Wands",
|
|
img: "six_of_wands.png",
|
|
upright: "Success, public recognition, progress, self-confidence. Victory is yours — receive the acknowledgement you have earned.",
|
|
reversed: "Private achievement, broken promises, egotism. Success achieved but not yet recognised, or recognition turning to arrogance."
|
|
},
|
|
{
|
|
name: "Seven of Wands",
|
|
img: "seven_of_wands.png",
|
|
upright: "Challenge, competition, protection, perseverance. You are at an advantage — stand your ground and defend what you have built.",
|
|
reversed: "Exhaustion, giving up, overwhelmed. The struggle has gone on too long; question whether the fight is still worth it."
|
|
},
|
|
{
|
|
name: "Eight of Wands",
|
|
img: "eight_of_wands.png",
|
|
upright: "Speed, action, air travel, movement, swift change. Things are moving quickly — go with the flow and act decisively.",
|
|
reversed: "Delays, frustration, resisting change, internal alignment. Movement is stalling; patience is required as the path clears."
|
|
},
|
|
{
|
|
name: "Nine of Wands",
|
|
img: "nine_of_wands.png",
|
|
upright: "Resilience, courage, persistence, test of faith, boundaries. You are battle-worn but not beaten — one more effort will see you through.",
|
|
reversed: "Inner resources, struggle, overwhelm, defensive. Exhaustion is real; consider whether old wounds are making you overly defensive."
|
|
},
|
|
{
|
|
name: "Ten of Wands",
|
|
img: "ten_of_wands.png",
|
|
upright: "Burden, extra responsibility, hard work, completion. You carry a heavy load — consider what you can delegate or release.",
|
|
reversed: "Doing it all yourself, carrying the burden, delegation. The burden is acknowledged; the choice to share or release is now available."
|
|
},
|
|
{
|
|
name: "Page of Wands",
|
|
img: "page_of_wands.png",
|
|
upright: "Exploration, excitement, freedom, adventure, new ideas. An enthusiastic and curious spirit, ready to leap into the unknown.",
|
|
reversed: "Newly formed ideas, redirecting energy, self-limiting beliefs. Enthusiasm without follow-through; great ideas that stall."
|
|
},
|
|
{
|
|
name: "Knight of Wands",
|
|
img: "knight_of_wands.png",
|
|
upright: "Energy, passion, inspired action, adventure, impulsiveness. Full of fire and drive — but temper the impulse with some forethought.",
|
|
reversed: "Passion projects, haste, scattered energy, delays. Misdirected energy or rushing ahead without a plan."
|
|
},
|
|
{
|
|
name: "Queen of Wands",
|
|
img: "queen_of_wands.png",
|
|
upright: "Courage, confidence, independence, social butterfly, determination. A vibrant and magnetic energy — lead with warmth and conviction.",
|
|
reversed: "Self-respect, self-confidence, introverted, re-asserting. Confidence has turned inward; time to reclaim your power."
|
|
},
|
|
{
|
|
name: "King of Wands",
|
|
img: "king_of_wands.png",
|
|
upright: "Natural-born leader, vision, entrepreneur, honour. Lead with vision and inspire others to follow — this is your moment.",
|
|
reversed: "Impulsiveness, haste, ruthless, high expectations. A leader who demands too much without offering enough in return."
|
|
},
|
|
|
|
// Minor Arcana — Cups
|
|
{
|
|
name: "Ace of Cups",
|
|
img: "ace_of_cups.png",
|
|
upright: "Love, new relationships, compassion, creativity. An outpouring of emotion and new emotional beginnings — open your heart.",
|
|
reversed: "Self-love, intuition, repressed emotions. Emotional energy turned inward; healing the self before giving to others."
|
|
},
|
|
{
|
|
name: "Two of Cups",
|
|
img: "two_of_cups.png",
|
|
upright: "Unified love, partnership, mutual attraction. A beautiful connection — two people coming together in harmony and mutual respect.",
|
|
reversed: "Self-love, break-ups, disharmony, distrust. A disconnection or imbalance in a relationship; communication is needed."
|
|
},
|
|
{
|
|
name: "Three of Cups",
|
|
img: "three_of_cups.png",
|
|
upright: "Celebration, friendship, creativity, collaborations. Joy shared with community; a time of togetherness, laughter, and abundance.",
|
|
reversed: "Independence, alone time, hardcore partying, 'three's a crowd'. Too much socialising without depth, or a need for solitude."
|
|
},
|
|
{
|
|
name: "Four of Cups",
|
|
img: "four_of_cups.png",
|
|
upright: "Meditation, contemplation, apathy, reevaluation. Sitting with your feelings; be careful not to overlook a gift being offered.",
|
|
reversed: "Retreat, withdrawal, checking in for alignment. Turning inward to find what is truly needed before re-engaging."
|
|
},
|
|
{
|
|
name: "Five of Cups",
|
|
img: "five_of_cups.png",
|
|
upright: "Regret, failure, disappointment, pessimism. Focusing on what was lost — but behind you, two cups still stand full.",
|
|
reversed: "Personal setbacks, self-forgiveness, moving on. Beginning to release grief; turning away from loss toward what remains."
|
|
},
|
|
{
|
|
name: "Six of Cups",
|
|
img: "six_of_cups.png",
|
|
upright: "Revisiting the past, childhood memories, innocence, joy. A warm and nostalgic energy — let happy memories restore your spirit.",
|
|
reversed: "Living in the past, forgiveness, lacking playfulness. Nostalgia that holds you back; release the past to embrace the present."
|
|
},
|
|
{
|
|
name: "Seven of Cups",
|
|
img: "seven_of_cups.png",
|
|
upright: "Opportunities, choices, wishful thinking, illusion. Many possibilities lay before you — discern what is real from what is fantasy.",
|
|
reversed: "Alignment, personal values, overwhelmed by choices. Clarity emerging from confusion; narrowing down to what truly matters."
|
|
},
|
|
{
|
|
name: "Eight of Cups",
|
|
img: "eight_of_cups.png",
|
|
upright: "Disappointment, abandonment, withdrawal, escapism. Walking away from what no longer fulfils you in search of something deeper.",
|
|
reversed: "Trying one more time, indecision, aimless drifting. Staying in a situation past its time, or aimlessly leaving without a destination."
|
|
},
|
|
{
|
|
name: "Nine of Cups",
|
|
img: "nine_of_cups.png",
|
|
upright: "Contentment, satisfaction, gratitude, wish come true. The wish card — emotional fulfilment and deep satisfaction with life.",
|
|
reversed: "Inner happiness, materialism, dissatisfaction. Outer success that doesn't match inner fulfilment; seeking joy from within."
|
|
},
|
|
{
|
|
name: "Ten of Cups",
|
|
img: "ten_of_cups.png",
|
|
upright: "Divine love, blissful relationships, harmony, alignment. True happiness and emotional completion — family, love, and lasting joy.",
|
|
reversed: "Disconnection, misaligned values, struggling relationships. A gap between the ideal of happiness and the current emotional reality."
|
|
},
|
|
{
|
|
name: "Page of Cups",
|
|
img: "page_of_cups.png",
|
|
upright: "Creative opportunities, intuitive messages, curiosity, possibility. A sweet and imaginative energy, full of emotional openness and wonder.",
|
|
reversed: "New ideas, doubting intuition, creative blocks, emotional immaturity. Difficulty trusting feelings or expressing them authentically."
|
|
},
|
|
{
|
|
name: "Knight of Cups",
|
|
img: "knight_of_cups.png",
|
|
upright: "Creativity, romance, charm, imagination, beauty. A poetic and idealistic soul — follow your heart, but keep your feet on the ground.",
|
|
reversed: "Overactive imagination, unrealistic, jealous, moody. Romantic idealism that becomes impractical or emotionally unstable."
|
|
},
|
|
{
|
|
name: "Queen of Cups",
|
|
img: "queen_of_cups.png",
|
|
upright: "Compassionate, caring, emotionally stable, intuitive, in flow. A deeply empathic and nurturing presence — lead with love and wisdom.",
|
|
reversed: "Inner feelings, self-care, self-love, co-dependency. Emotional energy turned inward in an unhealthy way; boundaries are needed."
|
|
},
|
|
{
|
|
name: "King of Cups",
|
|
img: "king_of_cups.png",
|
|
upright: "Emotionally balanced, compassionate, diplomatic. A master of emotional intelligence — lead with both heart and mind.",
|
|
reversed: "Self-compassion, inner feelings, moodiness, emotionally manipulative. Emotional control that tips into suppression or manipulation."
|
|
},
|
|
|
|
// Minor Arcana — Swords
|
|
{
|
|
name: "Ace of Swords",
|
|
img: "ace_of_swords.png",
|
|
upright: "Breakthroughs, new ideas, mental clarity, success, truth. A flash of insight cuts through confusion — the truth is now visible.",
|
|
reversed: "Inner clarity, re-thinking an idea, clouded judgement. The mind is active but unclear; mental fog needs to be dispelled."
|
|
},
|
|
{
|
|
name: "Two of Swords",
|
|
img: "two_of_swords.png",
|
|
upright: "Difficult decisions, weighing up options, an impasse, avoidance. A choice must be made, but both options seem equal — what does your gut say?",
|
|
reversed: "Indecision, confusion, information overload, no right choice. Too many options or too much information is making the decision impossible."
|
|
},
|
|
{
|
|
name: "Three of Swords",
|
|
img: "three_of_swords.png",
|
|
upright: "Heartbreak, emotional pain, sorrow, grief, hurt. Pain is real and valid — allow yourself to feel it before you can heal.",
|
|
reversed: "Negative self-talk, releasing pain, optimism, forgiveness. The worst of the grief is passing; healing is beginning."
|
|
},
|
|
{
|
|
name: "Four of Swords",
|
|
img: "four_of_swords.png",
|
|
upright: "Rest, relaxation, meditation, contemplation, recuperation. Pause the battle and rest — restoration is not weakness but wisdom.",
|
|
reversed: "Exhaustion, burn-out, deep contemplation, stagnation. Rest has gone on too long, or is desperately needed but being avoided."
|
|
},
|
|
{
|
|
name: "Five of Swords",
|
|
img: "five_of_swords.png",
|
|
upright: "Conflict, disagreements, competition, defeat, winning at all costs. A hollow victory — ask whether the battle was worth the cost.",
|
|
reversed: "Reconciliation, making amends, past resentment. Moving past conflict; finding a way to heal old wounds and move forward."
|
|
},
|
|
{
|
|
name: "Six of Swords",
|
|
img: "six_of_swords.png",
|
|
upright: "Transition, change, rite of passage, releasing baggage. Moving away from turbulent waters toward calmer shores — progress through letting go.",
|
|
reversed: "Personal transition, resistance to change, unfinished business. Unable to leave the past behind; the boat is stuck in the shallows."
|
|
},
|
|
{
|
|
name: "Seven of Swords",
|
|
img: "seven_of_swords.png",
|
|
upright: "Betrayal, deception, getting away with something, acting strategically. Caution is warranted — not everyone is being honest with you.",
|
|
reversed: "Imposter syndrome, self-deceit, keeping secrets. Hidden truths coming to light; deception being turned on oneself."
|
|
},
|
|
{
|
|
name: "Eight of Swords",
|
|
img: "eight_of_swords.png",
|
|
upright: "Negative thoughts, self-imposed restriction, imprisonment, victim mentality. The chains are of your own making — you have more freedom than you realise.",
|
|
reversed: "Self-limiting beliefs, inner critic, releasing negative thoughts. Beginning to see past the illusion of restriction; freedom is near."
|
|
},
|
|
{
|
|
name: "Nine of Swords",
|
|
img: "nine_of_swords.png",
|
|
upright: "Anxiety, worry, fear, depression, nightmares. The worst happens in the mind at night — fears are often larger than reality.",
|
|
reversed: "Inner turmoil, deep-seated fears, secrets, releasing worry. Anxiety is lessening; the fears are being faced and diminished."
|
|
},
|
|
{
|
|
name: "Ten of Swords",
|
|
img: "ten_of_swords.png",
|
|
upright: "Painful endings, deep wounds, betrayal, loss, crisis. Rock bottom — but the only way is up, and the dawn is already breaking.",
|
|
reversed: "Recovery, regeneration, resisting an inevitable end. Rising from the ashes; a painful chapter finally drawing to a close."
|
|
},
|
|
{
|
|
name: "Page of Swords",
|
|
img: "page_of_swords.png",
|
|
upright: "New ideas, curiosity, thirst for knowledge, new ways of communicating. Alert, quick-witted, and eager — channel this energy into learning.",
|
|
reversed: "Self-expression, all talk and no action, haphazard action, haste. Ideas without follow-through; scattered mental energy."
|
|
},
|
|
{
|
|
name: "Knight of Swords",
|
|
img: "knight_of_swords.png",
|
|
upright: "Ambitious, action-oriented, driven to succeed, fast-thinking. Charging forward with brilliant ideas — just ensure the path is clear.",
|
|
reversed: "Restless, unfocused, impulsive, burn-out. Furious energy without direction; stop and recalibrate before charging ahead."
|
|
},
|
|
{
|
|
name: "Queen of Swords",
|
|
img: "queen_of_swords.png",
|
|
upright: "Independent, unbiased judgement, clear boundaries, direct communication. A sharp and perceptive mind — speak truth with compassion.",
|
|
reversed: "Overly emotional or cold, isolation, cruel judgement. Clarity that has hardened into coldness; warmth is needed alongside the logic."
|
|
},
|
|
{
|
|
name: "King of Swords",
|
|
img: "king_of_swords.png",
|
|
upright: "Mental clarity, intellectual power, authority, truth, decisiveness. Command any situation with reason, integrity, and clear-eyed judgement.",
|
|
reversed: "Quiet power, inner truth, misuse of power, manipulation. Authority used without ethics; cold calculation without moral compass."
|
|
},
|
|
|
|
// Minor Arcana — Pentacles
|
|
{
|
|
name: "Ace of Pentacles",
|
|
img: "ace_of_pentacles.png",
|
|
upright: "A new financial or career opportunity, manifestation, abundance. The seed of material success — plant it well and tend it with care.",
|
|
reversed: "Lost opportunity, lack of planning and foresight. A promising opportunity slipping away due to poor preparation."
|
|
},
|
|
{
|
|
name: "Two of Pentacles",
|
|
img: "two_of_pentacles.png",
|
|
upright: "Multiple priorities, time management, prioritisation, adaptability. You are juggling well — keep the balance, but know when to set something down.",
|
|
reversed: "Over-committed, disorganisation, reprioritisation. Too many balls in the air; something is about to drop."
|
|
},
|
|
{
|
|
name: "Three of Pentacles",
|
|
img: "three_of_pentacles.png",
|
|
upright: "Teamwork, collaboration, learning, implementation. Skill and craftsmanship recognised — work together to build something lasting.",
|
|
reversed: "Disharmony, misalignment, working alone. Collaboration breaking down; either skills aren't being recognised or teamwork has fallen apart."
|
|
},
|
|
{
|
|
name: "Four of Pentacles",
|
|
img: "four_of_pentacles.png",
|
|
upright: "Saving money, security, conservatism, scarcity, control. Stability is valued, but examine whether you are holding on too tightly.",
|
|
reversed: "Over-spending, greed, self-protection, generosity. Releasing financial control; either becoming generous or becoming reckless."
|
|
},
|
|
{
|
|
name: "Five of Pentacles",
|
|
img: "five_of_pentacles.png",
|
|
upright: "Financial loss, poverty, lack mindset, isolation, worry. A difficult time — but help is closer than it appears.",
|
|
reversed: "Recovery from financial loss, spiritual poverty, isolation. Beginning to move past hardship; the worst is over."
|
|
},
|
|
{
|
|
name: "Six of Pentacles",
|
|
img: "six_of_pentacles.png",
|
|
upright: "Giving, receiving, sharing wealth, generosity, charity. Abundance flows when shared — be both a gracious giver and receiver.",
|
|
reversed: "Self-care, unpaid debts, one-sided charity. Giving too much with nothing in return, or receiving without truly being helped."
|
|
},
|
|
{
|
|
name: "Seven of Pentacles",
|
|
img: "seven_of_pentacles.png",
|
|
upright: "Long-term view, sustainable results, perseverance, investment. You have worked hard — take stock of what has grown and plan the next phase.",
|
|
reversed: "Lack of long-term vision, limited success or reward. Effort not translating to results; re-evaluate the strategy."
|
|
},
|
|
{
|
|
name: "Eight of Pentacles",
|
|
img: "eight_of_pentacles.png",
|
|
upright: "Apprenticeship, repetitive tasks, mastery, skill development. Diligent focus on craft — dedication and practice will lead to mastery.",
|
|
reversed: "Self-development, perfectionism, misdirected activity. Effort directed without purpose; all work and no vision."
|
|
},
|
|
{
|
|
name: "Nine of Pentacles",
|
|
img: "nine_of_pentacles.png",
|
|
upright: "Abundance, luxury, self-sufficiency, financial independence. The fruits of your labour are here to enjoy — you have earned this comfort.",
|
|
reversed: "Self-worth, over-investment in work, hustling. Outer abundance that masks inner emptiness; reassess what truly satisfies."
|
|
},
|
|
{
|
|
name: "Ten of Pentacles",
|
|
img: "ten_of_pentacles.png",
|
|
upright: "Wealth, financial security, family, long-term success, contribution. Legacy and lasting abundance — the fullest expression of material wellbeing.",
|
|
reversed: "The dark side of wealth, financial failure or loss, family discord. The structure of security is under threat; tend to foundations."
|
|
},
|
|
{
|
|
name: "Page of Pentacles",
|
|
img: "page_of_pentacles.png",
|
|
upright: "Opportunity, ambition, desire, diligence, practicality. A studious and grounded energy — eager to learn and put plans into practice.",
|
|
reversed: "Lack of progress, procrastination, learn from failure. Good intentions without follow-through; a tendency to dream rather than do."
|
|
},
|
|
{
|
|
name: "Knight of Pentacles",
|
|
img: "knight_of_pentacles.png",
|
|
upright: "Hard work, productivity, routine, conservatism. Steady and reliable — not flashy, but utterly dependable in the long run.",
|
|
reversed: "Self-discipline, boredom, feeling 'stuck', perfectionism. Diligence becoming rigidity; being so cautious that nothing moves forward."
|
|
},
|
|
{
|
|
name: "Queen of Pentacles",
|
|
img: "queen_of_pentacles.png",
|
|
upright: "Nurturing, practical, providing financially, a working parent. Grounded, warm, and capable — creating comfort and security for all.",
|
|
reversed: "Financial independence, self-care, work-home conflict. Neglecting your own needs while caring for others; reclaim some nourishment for yourself."
|
|
},
|
|
{
|
|
name: "King of Pentacles",
|
|
img: "king_of_pentacles.png",
|
|
upright: "Wealth, business, leadership, security, discipline, abundance. A master of the material world — lead with generosity and firm judgment.",
|
|
reversed: "Financially inept, obsessed with wealth and status, stubbornness. Material success without meaning; greed replacing genuine leadership."
|
|
}
|
|
];
|
|
|
|
const SPREAD_INFO = {
|
|
single: {
|
|
description: "A single card drawn to offer a moment of clarity, reflection, or guidance. Simple yet powerful — the cards often speak most clearly when given space to breathe.",
|
|
goodFor: "Daily check-ins, quick gut-checks, meditation focus, or when you need a gentle nudge in a direction.",
|
|
slots: ["Your Card"],
|
|
positionKeys: ["single"]
|
|
},
|
|
three: {
|
|
description: "Three cards laid in sequence to map the arc of your situation — where you've come from, where you stand now, and where things are heading. A timeless spread for gaining perspective.",
|
|
goodFor: "Understanding how a situation has evolved, preparing for a decision, or checking in on an ongoing journey.",
|
|
slots: ["Past", "Present", "Future"],
|
|
positionKeys: ["three-card-past", "three-card-present", "three-card-future"]
|
|
},
|
|
five: {
|
|
description: "Five cards that look beneath the surface of your situation — what's driving it, what's holding you back, what action you can take, and what awaits you if you do. A practical spread for times when you feel stuck.",
|
|
goodFor: "Problem-solving, overcoming obstacles, mapping out a path forward, or situations where you feel blocked or uncertain.",
|
|
slots: [
|
|
"The Current Situation",
|
|
"The Response",
|
|
"What Is Holding You Back",
|
|
"What You Can Do to Change It",
|
|
"The Outcome If You Make That Change"
|
|
],
|
|
positionKeys: [
|
|
"five-card-situation",
|
|
"five-card-response",
|
|
"five-card-holding-back",
|
|
"five-card-change",
|
|
"five-card-outcome"
|
|
]
|
|
},
|
|
love: {
|
|
description: "Three cards focusing on the energy between two people — the individual personalities each brings, the shared foundation you've built, and the invisible thread that binds you together.",
|
|
goodFor: "Gaining insight into a romantic relationship, understanding connection and compatibility, or reflecting on a new or established partnership.",
|
|
slots: [
|
|
"Your Separate Personalities",
|
|
"The Common Base",
|
|
"The Bond That Connects You"
|
|
],
|
|
positionKeys: ["love-personalities", "love-common-base", "love-connection"]
|
|
},
|
|
compatibility: {
|
|
description: "Seven cards arranged in an H shape, with three cards forming a pillar for each person and one card bridging them at the centre. This spread explores the mind, heart, and body of each person, and what holds the relationship together.",
|
|
goodFor: "Deep relationship analysis, understanding how two people complement or challenge each other, or exploring emotional and physical compatibility.",
|
|
slots: [
|
|
"Your Mind (Crown Chakra)",
|
|
"Your Heart (Heart Chakra)",
|
|
"Your Root (Sexual Compatibility)",
|
|
"What Keeps You Together",
|
|
"Their Mind (Crown Chakra)",
|
|
"Their Heart (Heart Chakra)",
|
|
"Their Root (Sexual Compatibility)"
|
|
],
|
|
positionKeys: [
|
|
"compat-your-mind",
|
|
"compat-your-heart",
|
|
"compat-your-root",
|
|
"compat-bridge",
|
|
"compat-their-mind",
|
|
"compat-their-heart",
|
|
"compat-their-root"
|
|
]
|
|
},
|
|
horseshoe: {
|
|
description: "Seven cards arranged in a curved arc, offering a panoramic view of your situation. It takes in the past and present, surfaces hidden forces, examines your own role, accounts for outside opinions, and points toward the wisest action and most likely outcome.",
|
|
goodFor: "Decision-making, navigating complex situations, or understanding all the factors at play before committing to a path.",
|
|
slots: [
|
|
"The Past",
|
|
"The Present",
|
|
"Hidden Influences",
|
|
"Obstacles",
|
|
"External Influences",
|
|
"Best Course of Action",
|
|
"The Outcome"
|
|
],
|
|
positionKeys: [
|
|
"horseshoe-1",
|
|
"horseshoe-2",
|
|
"horseshoe-3",
|
|
"horseshoe-4",
|
|
"horseshoe-5",
|
|
"horseshoe-6",
|
|
"horseshoe-7"
|
|
]
|
|
},
|
|
astrological: {
|
|
description: "Twelve cards placed in a circle mirroring the zodiac wheel, with each card illuminating a different sphere of life — from your sense of self and your relationships to your career, spirituality, and everything in between.",
|
|
slots: [
|
|
"Aries — Self & Identity",
|
|
"Taurus — Values & Stability",
|
|
"Gemini — Communication & Learning",
|
|
"Cancer — Home & Emotional Roots",
|
|
"Leo — Creativity & Self-Expression",
|
|
"Virgo — Work & Daily Routines",
|
|
"Libra — Partnerships & Balance",
|
|
"Scorpio — Transformation & Depth",
|
|
"Sagittarius — Philosophy & Expansion",
|
|
"Capricorn — Career & Ambition",
|
|
"Aquarius — Community & Ideals",
|
|
"Pisces — Spirituality & Dreams"
|
|
],
|
|
goodFor: "Annual or seasonal reviews, full-life overviews, identifying which areas need attention, or birthday and new year readings.",
|
|
positionKeys: [
|
|
"astro-aries",
|
|
"astro-taurus",
|
|
"astro-gemini",
|
|
"astro-cancer",
|
|
"astro-leo",
|
|
"astro-virgo",
|
|
"astro-libra",
|
|
"astro-scorpio",
|
|
"astro-sagittarius",
|
|
"astro-capricorn",
|
|
"astro-aquarius",
|
|
"astro-pisces"
|
|
]
|
|
},
|
|
celtic: {
|
|
description: "The most iconic spread in tarot — ten cards that build a rich, layered portrait of your situation. The cross examines the present moment and its challenges, while the staff explores the deeper forces at work: past influences, future possibilities, your own mindset, and the forces beyond your control.",
|
|
goodFor: "Deep, comprehensive readings on a specific situation, exploring a major life question, or when you want nuance and detail rather than a quick answer.",
|
|
slots: [
|
|
"The Present",
|
|
"The Challenge",
|
|
"The Foundation",
|
|
"The Recent Past",
|
|
"The Best Outcome",
|
|
"The Near Future",
|
|
"Your Attitude",
|
|
"External Influences",
|
|
"Hopes and Fears",
|
|
"The Outcome"
|
|
],
|
|
positionKeys: [
|
|
"celtic-present",
|
|
"celtic-challenge",
|
|
"celtic-below",
|
|
"celtic-past",
|
|
"celtic-above",
|
|
"celtic-future",
|
|
"celtic-advice",
|
|
"celtic-external",
|
|
"celtic-hopes",
|
|
"celtic-outcome"
|
|
]
|
|
}
|
|
};
|
|
|
|
let selectedSpread = "single";
|
|
|
|
function shuffleAndDraw(count) {
|
|
const deck = [...CARDS];
|
|
for (let i = deck.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[deck[i], deck[j]] = [deck[j], deck[i]];
|
|
}
|
|
return deck.slice(0, count).map(card => ({
|
|
...card,
|
|
isReversed: Math.random() < 0.5
|
|
}));
|
|
}
|
|
|
|
const cardMeaningsCache = {};
|
|
|
|
async function fetchCardMeanings(cardKey) {
|
|
if (cardMeaningsCache[cardKey]) return cardMeaningsCache[cardKey];
|
|
try {
|
|
const res = await fetch(`cards/${cardKey}.json`);
|
|
if (!res.ok) return null;
|
|
const data = await res.json();
|
|
cardMeaningsCache[cardKey] = data;
|
|
return data;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function renderCards(drawn, slots, positionKeys, spreadKey) {
|
|
const area = document.getElementById("cards-area");
|
|
area.className = "cards-area layout-" + spreadKey;
|
|
area.innerHTML = "";
|
|
|
|
const drawBtn = document.getElementById("draw-btn");
|
|
drawBtn.disabled = true;
|
|
|
|
const meaningData = await Promise.all(
|
|
drawn.map(card => fetchCardMeanings(card.img.replace(".png", "")))
|
|
);
|
|
|
|
drawn.forEach((card, i) => {
|
|
const posData = meaningData[i];
|
|
const posKey = positionKeys[i];
|
|
let meaningText;
|
|
if (posData && posData[posKey]) {
|
|
meaningText = card.isReversed ? posData[posKey].inverted : posData[posKey].regular;
|
|
} else {
|
|
meaningText = card.isReversed ? card.reversed : card.upright;
|
|
}
|
|
|
|
const slot = document.createElement("div");
|
|
slot.className = "card-slot";
|
|
slot.dataset.slot = i;
|
|
|
|
const label = document.createElement("div");
|
|
label.className = "card-slot-label";
|
|
label.textContent = slots[i];
|
|
|
|
const imgWrap = document.createElement("div");
|
|
imgWrap.className = "card-img-wrap";
|
|
|
|
const imgLink = document.createElement("a");
|
|
imgLink.href = `https://cdn.nhcarrigan.com/tarot/${card.img}`;
|
|
imgLink.target = "_blank";
|
|
imgLink.rel = "noopener noreferrer";
|
|
|
|
const img = document.createElement("img");
|
|
img.src = `https://cdn.nhcarrigan.com/tarot/${card.img}`;
|
|
img.alt = card.name + (card.isReversed ? " (Reversed)" : "");
|
|
img.loading = "lazy";
|
|
if (card.isReversed) img.classList.add("reversed");
|
|
|
|
imgLink.appendChild(img);
|
|
imgWrap.appendChild(imgLink);
|
|
|
|
const name = document.createElement("div");
|
|
name.className = "card-name";
|
|
name.textContent = card.name;
|
|
|
|
const orientation = document.createElement("div");
|
|
orientation.className = "card-orientation";
|
|
orientation.textContent = card.isReversed ? "Reversed" : "Upright";
|
|
|
|
const meaning = document.createElement("div");
|
|
meaning.className = "card-meaning";
|
|
meaning.textContent = meaningText;
|
|
|
|
slot.appendChild(label);
|
|
slot.appendChild(imgWrap);
|
|
slot.appendChild(name);
|
|
slot.appendChild(orientation);
|
|
slot.appendChild(meaning);
|
|
area.appendChild(slot);
|
|
});
|
|
|
|
drawBtn.disabled = false;
|
|
}
|
|
|
|
document.querySelectorAll(".spread-btn").forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
document.querySelectorAll(".spread-btn").forEach(b => b.classList.remove("active"));
|
|
btn.classList.add("active");
|
|
selectedSpread = btn.dataset.spread;
|
|
const info = SPREAD_INFO[selectedSpread];
|
|
document.getElementById("spread-desc").textContent = info.description;
|
|
document.getElementById("spread-goodfor").innerHTML = `<strong>Good for:</strong> ${info.goodFor}`;
|
|
document.getElementById("reading-section").classList.remove("visible");
|
|
});
|
|
});
|
|
|
|
document.getElementById("draw-btn").addEventListener("click", async () => {
|
|
const info = SPREAD_INFO[selectedSpread];
|
|
const drawn = shuffleAndDraw(info.slots.length);
|
|
document.getElementById("reading-section").classList.add("visible");
|
|
document.getElementById("reading-section").scrollIntoView({ behavior: "smooth", block: "start" });
|
|
await renderCards(drawn, info.slots, info.positionKeys, selectedSpread);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|