Hugging Face's logo

Spaces:
ducnhat036
/
tarot
Running

App Files Community
ducnhat036 commited on
Commit
0374654
·
verified ·
1 Parent(s): fc0b4b0

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +254 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tarot
3
- emoji: 🏃
4
- colorFrom: red
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tarot
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,254 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="vi">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Trải Bài Tarot Huyền Bí</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Montserrat:wght@300;400;500&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ background-color: #0f0e17;
15
+ color: #fffffe;
16
+ }
17
+
18
+ .title-font {
19
+ font-family: 'Cinzel Decorative', cursive;
20
+ }
21
+
22
+ .card {
23
+ transition: all 0.3s ease;
24
+ transform-style: preserve-3d;
25
+ position: relative;
26
+ }
27
+
28
+ .card.flipped {
29
+ transform: rotateY(180deg);
30
+ }
31
+
32
+ .card-face {
33
+ backface-visibility: hidden;
34
+ position: absolute;
35
+ width: 100%;
36
+ height: 100%;
37
+ border-radius: 1rem;
38
+ display: flex;
39
+ flex-direction: column;
40
+ justify-content: center;
41
+ align-items: center;
42
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
43
+ }
44
+
45
+ .card-front {
46
+ background: linear-gradient(135deg, #2d334a 0%, #1e1e2e 100%);
47
+ transform: rotateY(0deg);
48
+ }
49
+
50
+ .card-back {
51
+ background: linear-gradient(135deg, #ff8906 0%, #e53170 100%);
52
+ transform: rotateY(180deg);
53
+ display: flex;
54
+ justify-content: center;
55
+ align-items: center;
56
+ }
57
+
58
+ .card-image {
59
+ width: 80%;
60
+ height: auto;
61
+ border-radius: 0.5rem;
62
+ margin-bottom: 1rem;
63
+ }
64
+
65
+ .meaning-text {
66
+ max-height: 0;
67
+ overflow: hidden;
68
+ transition: max-height 0.5s ease-out;
69
+ }
70
+
71
+ .meaning-text.expanded {
72
+ max-height: 500px;
73
+ }
74
+
75
+ .glow {
76
+ animation: glow 2s infinite alternate;
77
+ }
78
+
79
+ @keyframes glow {
80
+ from {
81
+ box-shadow: 0 0 5px #ff8906, 0 0 10px #ff8906;
82
+ }
83
+ to {
84
+ box-shadow: 0 0 15px #ff8906, 0 0 30px #e53170;
85
+ }
86
+ }
87
+
88
+ .theme-love { background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%) !important; }
89
+ .theme-career { background: linear-gradient(135deg, #4ecdc4 0%, #556270 100%) !important; }
90
+ .theme-health { background: linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%) !important; }
91
+ .theme-general { background: linear-gradient(135deg, #ffafbd 0%, #ffc3a0 100%) !important; }
92
+ </style>
93
+ </head>
94
+ <body>
95
+ <div class="min-h-screen flex flex-col items-center py-8 px-4">
96
+ <!-- Header -->
97
+ <header class="text-center mb-8">
98
+ <h1 class="title-font text-4xl md:text-5xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-pink-600">
99
+ TRẢI BÀI TAROT HUYỀN BÍ
100
+ </h1>
101
+ <p class="text-lg md:text-xl text-gray-300 max-w-2xl">
102
+ Khám phá thông điệp từ quá khứ, hiện tại và tương lai với trải bài 3 lá cổ điển
103
+ </p>
104
+ </header>
105
+
106
+ <!-- Theme Selection -->
107
+ <div class="mb-8 w-full max-w-2xl">
108
+ <h2 class="text-xl font-semibold mb-4 text-center text-white">CHỌN CHỦ ĐỀ CỦA BẠN</h2>
109
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
110
+ <button onclick="setTheme('love')" class="theme-love py-3 px-4 rounded-lg font-medium text-white flex items-center justify-center">
111
+ <i class="fas fa-heart mr-2"></i> Tình Yêu
112
+ </button>
113
+ <button onclick="setTheme('career')" class="theme-career py-3 px-4 rounded-lg font-medium text-white flex items-center justify-center">
114
+ <i class="fas fa-briefcase mr-2"></i> Sự Nghiệp
115
+ </button>
116
+ <button onclick="setTheme('health')" class="theme-health py-3 px-4 rounded-lg font-medium text-gray-800 flex items-center justify-center">
117
+ <i class="fas fa-heartbeat mr-2"></i> Sức Khỏe
118
+ </button>
119
+ <button onclick="setTheme('general')" class="theme-general py-3 px-4 rounded-lg font-medium text-gray-800 flex items-center justify-center">
120
+ <i class="fas fa-star mr-2"></i> Tổng Quát
121
+ </button>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Main Content -->
126
+ <main class="w-full max-w-6xl flex flex-col items-center">
127
+ <!-- Card Display Area -->
128
+ <div class="w-full mb-8">
129
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
130
+ <!-- Past Card -->
131
+ <div class="flex flex-col items-center">
132
+ <h3 class="text-xl font-semibold mb-4 text-amber-300">QUÁ KHỨ</h3>
133
+ <div class="card w-full h-96 cursor-pointer" onclick="flipCard(this)">
134
+ <div class="card-face card-front flex flex-col items-center justify-center p-4">
135
+ <div class="w-24 h-24 rounded-full bg-gray-800 flex items-center justify-center mb-4">
136
+ <i class="fas fa-hourglass-start text-3xl text-amber-400"></i>
137
+ </div>
138
+ <p class="text-center">Nhấn để khám phá quá khứ</p>
139
+ </div>
140
+ <div class="card-face card-back p-4">
141
+ <div id="past-card-content" class="text-center">
142
+ <!-- Will be filled by JavaScript -->
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Present Card -->
149
+ <div class="flex flex-col items-center">
150
+ <h3 class="text-xl font-semibold mb-4 text-pink-400">HIỆN TẠI</h3>
151
+ <div class="card w-full h-96 cursor-pointer" onclick="flipCard(this)">
152
+ <div class="card-face card-front flex flex-col items-center justify-center p-4">
153
+ <div class="w-24 h-24 rounded-full bg-gray-800 flex items-center justify-center mb-4">
154
+ <i class="fas fa-spinner text-3xl text-pink-400"></i>
155
+ </div>
156
+ <p class="text-center">Nhấn để khám phá hiện tại</p>
157
+ </div>
158
+ <div class="card-face card-back p-4">
159
+ <div id="present-card-content" class="text-center">
160
+ <!-- Will be filled by JavaScript -->
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Future Card -->
167
+ <div class="flex flex-col items-center">
168
+ <h3 class="text-xl font-semibold mb-4 text-purple-400">TƯƠNG LAI</h3>
169
+ <div class="card w-full h-96 cursor-pointer" onclick="flipCard(this)">
170
+ <div class="card-face card-front flex flex-col items-center justify-center p-4">
171
+ <div class="w-24 h-24 rounded-full bg-gray-800 flex items-center justify-center mb-4">
172
+ <i class="fas fa-hourglass-end text-3xl text-purple-400"></i>
173
+ </div>
174
+ <p class="text-center">Nhấn để khám phá tương lai</p>
175
+ </div>
176
+ <div class="card-face card-back p-4">
177
+ <div id="future-card-content" class="text-center">
178
+ <!-- Will be filled by JavaScript -->
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Controls -->
187
+ <div class="flex flex-col items-center space-y-4 w-full max-w-md">
188
+ <button id="draw-cards-btn" class="px-8 py-3 bg-gradient-to-r from-amber-500 to-pink-600 rounded-full font-semibold text-lg hover:from-amber-600 hover:to-pink-700 transition-all duration-300 transform hover:scale-105 glow">
189
+ <i class="fas fa-magic mr-2"></i> RÚT BÀI MỚI
190
+ </button>
191
+
192
+ <div class="w-full bg-gradient-to-r from-purple-900 to-blue-900 rounded-lg p-4 mt-4">
193
+ <h3 class="text-xl font-semibold mb-2 text-center text-white">CÂU HỎI CỦA BẠN</h3>
194
+ <textarea id="user-question" class="w-full bg-gray-800 bg-opacity-70 rounded p-3 mb-3 text-white placeholder-gray-400" rows="3" placeholder="Tập trung vào câu hỏi của bạn khi rút bài..."></textarea>
195
+ <button onclick="saveQuestion()" class="w-full py-2 bg-pink-600 hover:bg-pink-700 rounded font-medium text-white transition">
196
+ <i class="fas fa-save mr-2"></i> Lưu Câu Hỏi
197
+ </button>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Interpretation -->
202
+ <div id="interpretation" class="w-full max-w-3xl mt-8 bg-gray-800 bg-opacity-70 rounded-xl p-6 hidden">
203
+ <h3 class="text-2xl font-bold mb-4 text-center text-amber-400">GIẢI NGHĨA TRẢI BÀI</h3>
204
+ <div id="interpretation-content" class="text-gray-200">
205
+ <!-- Will be filled by JavaScript -->
206
+ </div>
207
+ <div class="flex justify-center mt-4">
208
+ <button onclick="shareReading()" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-full text-white font-medium">
209
+ <i class="fas fa-share-alt mr-2"></i> Chia Sẻ
210
+ </button>
211
+ </div>
212
+ </div>
213
+ </main>
214
+
215
+ <!-- Footer -->
216
+ <footer class="mt-12 text-center text-gray-400 text-sm">
217
+ <p>Đây chỉ là công cụ giải trí. Hãy tin vào trực giác của chính bạn.</p>
218
+ <p class="mt-2">© 2023 Trải Bài Tarot Huyền Bí | Tạo bởi <i class="fas fa-heart text-pink-500"></i> với năng lượng tích cực</p>
219
+ </footer>
220
+ </div>
221
+
222
+ <script>
223
+ // Tarot card data in Vietnamese
224
+ const tarotDeck = [
225
+ // Major Arcana
226
+ { name: "Kẻ Ngốc", image: "🃏", upright: "Khởi đầu mới, bộc phát, tinh thần tự do", reversed: "Liều lĩnh, phán đoán kém, do dự" },
227
+ { name: "Pháp Sư", image: "🧙", upright: "Hiện thực hóa, tài nguyên, quyền lực", reversed: "Thao túng, tài năng chưa được khai phá" },
228
+ { name: "Nữ Tư Tế", image: "🔮", upright: "Trực giác, bí ẩn, tiềm thức", reversed: "Ẩn ý, thiếu trực giác" },
229
+ { name: "Nữ Hoàng", image: "👑", upright: "Sinh sôi, nữ tính, sung túc", reversed: "Phụ thuộc, bóp nghẹt, bỏ bê" },
230
+ { name: "Hoàng Đế", image: "🏛️", upright: "Quyền lực, cấu trúc, kiểm soát", reversed: "Bạo ngược, cứng nhắc, thống trị" },
231
+ { name: "Giáo Hoàng", image: "🙏", upright: "Truyền thống, quy tắc, đạo đức", reversed: "Nổi loạn, niềm tin phi truyền thống" },
232
+ { name: "Tình Nhân", image: "💑", upright: "Tình yêu, hài hòa, mối quan hệ", reversed: "Mất cân bằng, giá trị không đồng điệu" },
233
+ { name: "Cỗ Xe", image: "🏎️", upright: "Ý chí, thành công, quyết tâm", reversed: "Thiếu kiểm soát, hung hăng" },
234
+ { name: "Sức Mạnh", image: "🦁", upright: "Can đảm, thuyết phục, ảnh hưởng", reversed: "Tự nghi ngờ, yếu đuối" },
235
+ { name: "Ẩn Sĩ", image: "🧙‍♂️", upright: "Tìm kiếm linh hồn, nội tâm, hướng dẫn", reversed: "Cô lập, cô đơn" },
236
+ { name: "Vận May", image: "🎡", upright: "Thay đổi, chu kỳ, số phận", reversed: "Vận rủi, kháng cự thay đổi" },
237
+ { name: "Công Lý", image: "⚖️", upright: "Công bằng, sự thật, luật pháp", reversed: "Bất công, không trung thực" },
238
+ { name: "Treo Ngược", image: "🙃", upright: "Hy sinh, góc nhìn mới", reversed: "Trì hoãn, kháng cự" },
239
+ { name: "Tử Thần", image: "💀", upright: "Kết thúc, thay đổi, biến đổi", reversed: "Kháng cự thay đổi, trì trệ" },
240
+ { name: "Điều Độ", image: "🥃", upright: "Cân bằng, điều độ, kiên nhẫn", reversed: "Mất cân bằng, thái quá" },
241
+ { name: "Ác Quỷ", image: "😈", upright: "Nghiện ngập, vật chất, vui chơi", reversed: "Tự do, giải phóng, lấy lại quyền lực" },
242
+ { name: "Tòa Tháp", image: "⚡", upright: "Thay đổi đột ngột, khải huyền, thức tỉnh", reversed: "Tránh thảm họa, sợ thay đổi" },
243
+ { name: "Ngôi Sao", image: "⭐", upright: "Hy vọng, niềm tin, cảm hứng", reversed: "Tuyệt vọng, chán nản" },
244
+ { name: "Mặt Trăng", image: "🌙", upright: "Ảo ảnh, trực giác, không chắc chắn", reversed: "Nhầm lẫn, sợ hãi, hiểu sai" },
245
+ { name: "Mặt Trời", image: "☀️", upright: "Niềm vui, thành công, ăn mừng", reversed: "Tiêu cực, trầm cảm" },
246
+ { name: "Phán Xét", image: "👼", upright: "Giải thoát, tái sinh, tiếng gọi nội tâm", reversed: "Tự nghi ngờ, từ chối tự vấn" },
247
+ { name: "Thế Giới", image: "🌍", upright: "Hoàn thành, hội nhập, thành tựu", reversed: "Chưa hoàn thiện, thiếu kết thúc" },
248
+
249
+ // Minor Arcana - Cups
250
+ { name: "Át Bình", image: "🍶", upright: "Cảm xúc mới, tâm linh, trực giác", reversed: "Mất mát cảm xúc, sáng tạo bị chặn" },
251
+ { name: "Hai Bình", image: "💕", upright: "Đoàn kết, hợp tác, thu hút lẫn nhau", reversed: "Mất cân bằng, thông tin sai lệch" },
252
+ { name: "Ba Bình", image: "🥂", upright: "Ăn mừng, tình bạn, sáng tạo", reversed: "Quá đà, ngồi lê đôi mách" },
253
+ { name: "Bốn Bình", image: "🤔", upright: "Thờ ơ, chiêm nghiệm, đánh giá lại", reversed: "Cơ hội mới, nh
254
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ 1. Prompt tạo phần mềm xem Tarot cơ bản (dành cho lập trình viên): Prompt: Viết một ứng dụng đơn giản bằng Python hiển thị ngẫu nhiên một lá bài Tarot trong bộ 78 lá, kèm theo tên lá bài, hình ảnh minh họa (nếu có) và ý nghĩa ngắn gọn khi lá bài xuôi và ngược. 🔮 2. Prompt tạo trải bài 3 lá cổ điển (Quá khứ - Hiện tại - Tương lai): Prompt: Viết một ứng dụng web bằng HTML/CSS/JavaScript cho phép người dùng bốc 3 lá bài Tarot tương ứng với quá khứ, hiện tại và tương lai. Mỗi lá bài có mô tả tên, hình ảnh và giải nghĩa tùy thuộc hướng xuôi hoặc ngược. 📱 3. Prompt tạo chatbot AI xem Tarot (dùng ChatGPT hoặc AI tương tự): Prompt: Bạn là một tarot reader chuyên nghiệp. Khi người dùng hỏi một vấn đề cụ thể (về tình yêu, công việc, tài chính...), hãy thực hiện trải bài 3 lá theo phương pháp quá khứ - hiện tại - tương lai. Giải thích từng lá rõ ràng, liên kết câu chuyện logic, ngôn từ nhẹ nhàng, truyền cảm hứng. 💌 4. Prompt tạo ứng dụng xem bài theo chủ đề (tình yêu, sự nghiệp, sức khỏe): Prompt: Tạo ứng dụng di động đơn giản cho phép người dùng chọn một chủ đề: Tình yêu, Sự nghiệp, Sức khỏe. Sau đó, ứng dụng sẽ trải 1 hoặc 3 lá bài Tarot và giải thích ý nghĩa theo chủ đề đó. Giao diện thân thiện, hình ảnh đẹp, có lựa chọn chia sẻ lên mạng xã hội. 🧠 5. Prompt tạo nội dung ý nghĩa lá bài dùng cho AI viết lại linh hoạt (phù hợp viết content, video): Prompt: Cho tôi danh sách đầy đủ 78 lá bài Tarot (22 lá Major Arcana và 56 lá Minor Arcana) kèm ý nghĩa xuôi và ngược của mỗi lá, theo phong cách viết truyền cảm, dễ hiểu, phù hợp dùng trong app xem Tarot cho giới trẻ.
2
+ chuyển thành tiếng việt và ghi thật nổi bật màu sắc và bố cục