-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathyntarot.html
112 lines (105 loc) · 7.5 KB
/
yntarot.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<title>ADHD Yes / No Tarot</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
--s: 200px; /* control the size*/
--c1: #1d1d1d;
--c2: #4e4f51;
--c3: #3c3c3c;
background:
repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 180deg)
calc(.5*var(--s)) calc(.5*var(--s)*0.577),
repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 180deg);
background-size: var(--s) calc(var(--s)*0.577);
}
body {
font-family: Arial, sans-serif;
text-align: center;
color: white;
}
#cardImage {
margin: 20px 0;
font-size: 150px;
color: #ccc;
cursor: pointer;
filter: saturate(25%);
}
#card {
background: rgba(255, 255, 255, 0.19);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.37);
display: inline-block;
width: 90%;
max-width: 400px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body>
<h1>ADHD Yes / No Tarot</h1>
<div id="card">
<div id="cardImage">♠<br><br></div>
<div id="result"></div>
</div>
<script type="module">
// Array of tarot card objects
const tarotCards = [
// Major Arcana
{ name: 'The Fool', meaning: 'Yes', symbol: '🤡', explanation: 'The Fool represents new beginnings, spontaneity, and a free spirit. This card suggests taking a leap of faith and embracing opportunities.' },
{ name: 'The Magician', meaning: 'Yes', symbol: '🧙♂️', explanation: 'The Magician symbolizes the power of manifestation, creativity, and resourcefulness. This card indicates that you have the skills and ability to achieve your goals.' },
{ name: 'The High Priestess', meaning: 'Yes', symbol: '🔮', explanation: 'The High Priestess represents intuition, wisdom, and spiritual enlightenment. This card suggests trusting your inner voice and seeking knowledge.' },
{ name: 'The Empress', meaning: 'Yes', symbol: '👸', explanation: 'The Empress signifies fertility, nurturing, and abundance. This card indicates a time of growth, sensuality, and enjoying life\'s pleasures.' },
{ name: 'The Emperor', meaning: 'No', symbol: '👑', explanation: 'The Emperor represents authority, structure, and discipline. This card suggests that you may be facing obstacles or a need for more control.' },
{ name: 'The Hierophant', meaning: 'No', symbol: '📿', explanation: 'The Hierophant symbolizes tradition, conformity, and established systems. This card indicates a need to question beliefs or break from conventions.' },
{ name: 'The Lovers', meaning: 'Yes', symbol: '❤️', explanation: 'The Lovers represent love, harmony, and meaningful connections. This card suggests a time of important choices and following your heart.' },
{ name: 'The Chariot', meaning: 'Yes', symbol: '🏎️', explanation: 'The Chariot signifies willpower, determination, and overcoming obstacles. This card indicates that you have the drive and focus to achieve your goals.' },
{ name: 'Strength', meaning: 'Yes', symbol: '🦁', explanation: 'Strength represents inner courage, compassion, and the ability to tame the wild aspects of life. This card suggests that you have the fortitude to overcome challenges.' },
{ name: 'The Hermit', meaning: 'No', symbol: '🧘♂️', explanation: 'The Hermit symbolizes introspection, solitude, and seeking inner guidance. This card indicates a need for contemplation and soul-searching.' },
{ name: 'Wheel of Fortune', meaning: 'Yes', symbol: '🎡', explanation: 'The Wheel of Fortune represents cycles, destiny, and the ever-changing nature of life. This card suggests that you should embrace the changes coming your way.' },
{ name: 'Justice', meaning: 'No', symbol: '⚖️', explanation: 'Justice symbolizes fairness, truth, and cause and effect. This card indicates a need to seek balance and make impartial decisions.' },
{ name: 'The Hanged Man', meaning: 'No', symbol: '🙃', explanation: 'The Hanged Man represents sacrifice, letting go, and a new perspective. This card suggests that you may need to suspend your beliefs or surrender to a situation.' },
{ name: 'Death', meaning: 'No', symbol: '💀', explanation: 'Death symbolizes endings, transitions, and transformations. This card indicates that you may be facing a significant change or the need to let go of something.' },
{ name: 'Temperance', meaning: 'Yes', symbol: '🌈', explanation: 'Temperance represents balance, moderation, and patience. This card suggests that you should strive for harmony and find the middle ground.' },
{ name: 'The Devil', meaning: 'No', symbol: '😈', explanation: 'The Devil symbolizes temptation, addiction, and the darker aspects of life. This card indicates a need to break free from unhealthy attachments or behaviors.' },
{ name: 'The Tower', meaning: 'No', symbol: '🌩️', explanation: 'The Tower represents upheaval, sudden change, and the breaking down of old structures. This card suggests that you may be facing a crisis or a major life event.' },
{ name: 'The Star', meaning: 'Yes', symbol: '⭐', explanation: 'The Star signifies hope, inspiration, and renewal. This card indicates that you should have faith and pursue your dreams and aspirations.' },
{ name: 'The Moon', meaning: 'No', symbol: '🌕', explanation: 'The Moon represents illusion, fear, and the unconscious mind. This card suggests that you may be facing confusion or deception, and should trust your intuition.' },
{ name: 'The Sun', meaning: 'Yes', symbol: '🌞', explanation: 'The Sun symbolizes joy, success, and positivity. This card indicates that you are on the right path and can expect good fortune and happiness.' },
{ name: 'Judgement', meaning: 'Yes', symbol: '🎺', explanation: 'Judgement represents resurrection, awakening, and a call to action. This card suggests that you should follow your true calling and embrace a fresh start.' },
{ name: 'The World', meaning: 'Yes', symbol: '🌍', explanation: 'The World signifies completion, integration, and accomplishment. This card indicates that you have achieved a major goal or are ready to move on to the next stage of your journey.' },
];
// Get DOM elements
const card = document.getElementById('card');
const cardImageContainer = document.getElementById('cardImage');
const resultContainer = document.getElementById('result');
// Function to pick a random card
function pickRandomCard() {
const randomIndex = Math.floor(Math.random() * tarotCards.length);
const randomCard = tarotCards[randomIndex];
// Update the card symbol
cardImageContainer.innerHTML = randomCard.symbol;
// Display the result
resultContainer.innerHTML = `
<h2>"${randomCard.name}"</h2>
<p>${randomCard.meaning}</p>
<p>${randomCard.explanation}</p>
`;
}
// Add click event listener to the button
card.addEventListener('click', pickRandomCard);
</script>
</body>
</html>