-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbgyntaro.html
172 lines (167 loc) · 12.6 KB
/
bgyntaro.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
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ADHD Да или Не Таро</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 1.2s;
}
.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: justify;
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 Да или Не Таро</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">Задайте въпрос и изтеглете карта</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()">Изтеглете нова карта</button>
</div>
<script>
const tarotCards = [
// Голяма Аркана
{ name: 'Глупакът', meaning: 'Да', symbol: '🤡', explanation: 'Глупакът представлява ново начало, спонтанност и свободен дух. Тази карта предполага да направите скок на вярата и да приемете възможностите.' },
{ name: 'Магьосникът', meaning: 'Да', symbol: '🧙♂️', explanation: 'Магьосникът символизира силата на проявление, креативност и находчивост. Тази карта показва, че имате уменията и способността да постигнете целите си.' },
{ name: 'Висшата Жрица', meaning: 'Да', symbol: '🔮', explanation: 'Висшата Жрица представлява интуиция, мъдрост и духовно просветление. Тази карта предполага да се доверите на вътрешния си глас и да търсите знание.' },
{ name: 'Императрицата', meaning: 'Да', symbol: '👸', explanation: 'Императрицата означава плодородие, грижовност и изобилие. Тази карта показва време на растеж, чувственост и наслада от живота.' },
{ name: 'Императорът', meaning: 'Не', symbol: '👑', explanation: 'Императорът представлява власт, структура и дисциплина. Тази карта предполага, че може да се сблъскате с препятствия или необходимост от повече контрол.' },
{ name: 'Жрецът', meaning: 'Не', symbol: '📿', explanation: 'Жрецът символизира традиция, конформизъм и установени системи. Тази карта показва необходимост от въпроси на вярванията или отклоняване от конвенциите.' },
{ name: 'Влюбените', meaning: 'Да', symbol: '❤️', explanation: 'Влюбените представляват любов, хармония и значими връзки. Тази карта предполага време на важни избори и следване на сърцето.' },
{ name: 'Колесницата', meaning: 'Да', symbol: '🏎️', explanation: 'Колесницата означава воля, решителност и преодоляване на препятствия. Тази карта показва, че имате желание и фокус да постигнете целите си.' },
{ name: 'Силата', meaning: 'Да', symbol: '🦁', explanation: 'Силата представлява вътрешна смелост, състрадание и способността да укротите дивите аспекти на живота. Тази карта предполага, че имате твърдостта да преодолеете предизвикателствата.' },
{ name: 'Отшелникът', meaning: 'Не', symbol: '🧘♂️', explanation: 'Отшелникът символизира интроспекция, самота и търсене на вътрешно напътствие. Тази карта показва необходимост от размисъл и търсене на душата.' },
{ name: 'Колелото на Съдбата', meaning: 'Да', symbol: '🎡', explanation: 'Колелото на Съдбата представлява цикли, съдба и постоянно променящата се природа на живота. Тази карта предполага, че трябва да приемете предстоящите промени.' },
{ name: 'Правосъдие', meaning: 'Не', symbol: '⚖️', explanation: 'Правосъдие символизира справедливост, истина и причинно-следствена връзка. Тази карта показва необходимост от търсене на баланс и вземане на безпристрастни решения.' },
{ name: 'Обесеният', meaning: 'Не', symbol: '🙃', explanation: 'Обесеният представлява жертва, пускане и нова перспектива. Тази карта предполага, че може да се наложи да спрете вярванията си или да се предадете на ситуация.' },
{ name: 'Смърт', meaning: 'Не', symbol: '💀', explanation: 'Смърт символизира край, преходи и трансформации. Тази карта показва, че може да се сблъскате със значителна промяна или необходимостта да се освободите от нещо.' },
{ name: 'Умереност', meaning: 'Да', symbol: '🌈', explanation: 'Умереност представлява баланс, умереност и търпение. Тази карта предполага, че трябва да се стремите към хармония и да намерите средния път.' },
{ name: 'Дяволът', meaning: 'Не', symbol: '😈', explanation: 'Дяволът символизира изкушение, пристрастяване и тъмните аспекти на живота. Тази карта показва необходимост от освобождаване от нездравословни привързаности или поведения.' },
{ name: 'Кулата', meaning: 'Не', symbol: '🌩️', explanation: 'Кулата представлява превратности, внезапна промяна и разрушаване на старите структури. Тази карта предполага, че може да се сблъскате с криза или значимо събитие в живота.' },
{ name: 'Звездата', meaning: 'Да', symbol: '⭐', explanation: 'Звездата означава надежда, вдъхновение и обновление. Тази карта показва, че трябва да имате вяра и да преследвате мечтите и амбициите си.' },
{ name: 'Луната', meaning: 'Не', symbol: '🌕', explanation: 'Луната представлява илюзия, страх и несъзнателен ум. Тази карта предполага, че може да се сблъскате с объркване или измама и трябва да се доверите на интуицията си.' },
{ name: 'Слънцето', meaning: 'Да', symbol: '🌞', explanation: 'Слънцето символизира радост, успех и позитивност. Тази карта показва, че сте на прав път и можете да очаквате добро бъдеще и щастие.' },
{ name: 'Съд', meaning: 'Да', symbol: '🎺', explanation: 'Съд представлява възкресение, пробуждане и призив за действие. Тази карта предполага, че трябва да следвате истинския си призив и да приемете ново начало.' },
{ name: 'Светът', meaning: 'Да', symbol: '🌍', explanation: 'Светът означава завършек, интеграция и постижение. Тази карта показва, че сте постигнали голяма цел или сте готови да преминете към следващия етап на своето пътешествие.' },
];
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>