-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathyntarot2.html
171 lines (167 loc) · 9.61 KB
/
yntarot2.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ADHD Yes No Tarot</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #2c2c2c;
color: #e0e0e0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.app-container {
width: 100%;
max-width: 300px;
}
h1 {
color: #c9a95c;
margin-bottom: 20px;
text-align: center;
font-size: 24px;
}
.card-container {
width: 100%;
height: 450px;
perspective: 1000px;
margin-bottom: 20px;
}
.card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s;
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #1a1a1a;
border: 2px solid #8b8b8b;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
}
.card-back {
background-image: linear-gradient(45deg, #2c2c2c 25%, #3c3c3c 25%, #3c3c3c 50%, #2c2c2c 50%, #2c2c2c 75%, #3c3c3c 75%, #3c3c3c 100%);
background-size: 40px 40px;
transform: rotateY(180deg);
}
.card.revealed {
transform: rotateY(180deg);
}
.card-symbol {
font-size: 100px;
margin-bottom: 20px;
}
.card-title {
font-size: 22px;
margin-bottom: 10px;
text-align: center;
}
.card-answer {
font-size: 32px;
color: #a364e8;
margin-bottom: 30px;
}
.card-description {
font-size: 14px;
line-height: 1.4;
text-align: center;
background-color: #3a3a3a;
padding: 10px;
border-radius: 5px;
flex-grow: 0.1;
display: flex;
align-items: center;
}
button {
background-color: #c9a95c;
color: #1a1a1a;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
}
button:hover {
background-color: #d6b978;
}
</style>
</head>
<body>
<div class="app-container">
<h1>ADHD YES NO TAROT</h1>
<div class="card-container">
<div class="card" id="card">
<div class="card-face card-front">
<div class="card-symbol">🔮</div>
<div class="card-title">Ask a question and draw a card</div>
</div>
<div class="card-face card-back">
<div class="card-symbol" id="cardSymbol"></div>
<div class="card-title" id="cardTitle"></div>
<div class="card-answer" id="cardAnswer"></div>
<div class="card-description" id="cardDescription"></div>
</div>
</div>
</div>
<button onclick="drawCard()">Draw a New Card</button>
</div>
<script>
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.' },
];
function drawCard() {
const card = document.getElementById('card');
card.classList.remove('revealed');
setTimeout(() => {
const randomCard = tarotCards[Math.floor(Math.random() * tarotCards.length)];
document.getElementById('cardSymbol').textContent = randomCard.symbol;
document.getElementById('cardTitle').textContent = randomCard.name;
document.getElementById('cardAnswer').textContent = randomCard.meaning;
document.getElementById('cardDescription').textContent = randomCard.explanation;
card.classList.add('revealed');
}, 1000);
}
</script>
</body>
</html>