Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Trải Bài Tarot Huyền Bí</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Montserrat:wght@300;400;500&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #0f0e17; | |
| color: #fffffe; | |
| } | |
| .title-font { | |
| font-family: 'Cinzel Decorative', cursive; | |
| } | |
| .card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| position: relative; | |
| } | |
| .card.flipped { | |
| transform: rotateY(180deg); | |
| } | |
| .card-face { | |
| backface-visibility: hidden; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); | |
| } | |
| .card-front { | |
| background: linear-gradient(135deg, #2d334a 0%, #1e1e2e 100%); | |
| transform: rotateY(0deg); | |
| } | |
| .card-back { | |
| background: linear-gradient(135deg, #ff8906 0%, #e53170 100%); | |
| transform: rotateY(180deg); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .card-image { | |
| width: 80%; | |
| height: auto; | |
| border-radius: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .meaning-text { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease-out; | |
| } | |
| .meaning-text.expanded { | |
| max-height: 500px; | |
| } | |
| .glow { | |
| animation: glow 2s infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 5px #ff8906, 0 0 10px #ff8906; | |
| } | |
| to { | |
| box-shadow: 0 0 15px #ff8906, 0 0 30px #e53170; | |
| } | |
| } | |
| .theme-love { background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%) ; } | |
| .theme-career { background: linear-gradient(135deg, #4ecdc4 0%, #556270 100%) ; } | |
| .theme-health { background: linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%) ; } | |
| .theme-general { background: linear-gradient(135deg, #ffafbd 0%, #ffc3a0 100%) ; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="min-h-screen flex flex-col items-center py-8 px-4"> | |
| <!-- Header --> | |
| <header class="text-center mb-8"> | |
| <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"> | |
| TRẢI BÀI TAROT HUYỀN BÍ | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-300 max-w-2xl"> | |
| 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 | |
| </p> | |
| </header> | |
| <!-- Theme Selection --> | |
| <div class="mb-8 w-full max-w-2xl"> | |
| <h2 class="text-xl font-semibold mb-4 text-center text-white">CHỌN CHỦ ĐỀ CỦA BẠN</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <button onclick="setTheme('love')" class="theme-love py-3 px-4 rounded-lg font-medium text-white flex items-center justify-center"> | |
| <i class="fas fa-heart mr-2"></i> Tình Yêu | |
| </button> | |
| <button onclick="setTheme('career')" class="theme-career py-3 px-4 rounded-lg font-medium text-white flex items-center justify-center"> | |
| <i class="fas fa-briefcase mr-2"></i> Sự Nghiệp | |
| </button> | |
| <button onclick="setTheme('health')" class="theme-health py-3 px-4 rounded-lg font-medium text-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-heartbeat mr-2"></i> Sức Khỏe | |
| </button> | |
| <button onclick="setTheme('general')" class="theme-general py-3 px-4 rounded-lg font-medium text-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-star mr-2"></i> Tổng Quát | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="w-full max-w-6xl flex flex-col items-center"> | |
| <!-- Card Display Area --> | |
| <div class="w-full mb-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8"> | |
| <!-- Past Card --> | |
| <div class="flex flex-col items-center"> | |
| <h3 class="text-xl font-semibold mb-4 text-amber-300">QUÁ KHỨ</h3> | |
| <div class="card w-full h-96 cursor-pointer" onclick="flipCard(this)"> | |
| <div class="card-face card-front flex flex-col items-center justify-center p-4"> | |
| <div class="w-24 h-24 rounded-full bg-gray-800 flex items-center justify-center mb-4"> | |
| <i class="fas fa-hourglass-start text-3xl text-amber-400"></i> | |
| </div> | |
| <p class="text-center">Nhấn để khám phá quá khứ</p> | |
| </div> | |
| <div class="card-face card-back p-4"> | |
| <div id="past-card-content" class="text-center"> | |
| <!-- Will be filled by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Present Card --> | |
| <div class="flex flex-col items-center"> | |
| <h3 class="text-xl font-semibold mb-4 text-pink-400">HIỆN TẠI</h3> | |
| <div class="card w-full h-96 cursor-pointer" onclick="flipCard(this)"> | |
| <div class="card-face card-front flex flex-col items-center justify-center p-4"> | |
| <div class="w-24 h-24 rounded-full bg-gray-800 flex items-center justify-center mb-4"> | |
| <i class="fas fa-spinner text-3xl text-pink-400"></i> | |
| </div> | |
| <p class="text-center">Nhấn để khám phá hiện tại</p> | |
| </div> | |
| <div class="card-face card-back p-4"> | |
| <div id="present-card-content" class="text-center"> | |
| <!-- Will be filled by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Future Card --> | |
| <div class="flex flex-col items-center"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-400">TƯƠNG LAI</h3> | |
| <div class="card w-full h-96 cursor-pointer" onclick="flipCard(this)"> | |
| <div class="card-face card-front flex flex-col items-center justify-center p-4"> | |
| <div class="w-24 h-24 rounded-full bg-gray-800 flex items-center justify-center mb-4"> | |
| <i class="fas fa-hourglass-end text-3xl text-purple-400"></i> | |
| </div> | |
| <p class="text-center">Nhấn để khám phá tương lai</p> | |
| </div> | |
| <div class="card-face card-back p-4"> | |
| <div id="future-card-content" class="text-center"> | |
| <!-- Will be filled by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="flex flex-col items-center space-y-4 w-full max-w-md"> | |
| <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"> | |
| <i class="fas fa-magic mr-2"></i> RÚT BÀI MỚI | |
| </button> | |
| <div class="w-full bg-gradient-to-r from-purple-900 to-blue-900 rounded-lg p-4 mt-4"> | |
| <h3 class="text-xl font-semibold mb-2 text-center text-white">CÂU HỎI CỦA BẠN</h3> | |
| <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> | |
| <button onclick="saveQuestion()" class="w-full py-2 bg-pink-600 hover:bg-pink-700 rounded font-medium text-white transition"> | |
| <i class="fas fa-save mr-2"></i> Lưu Câu Hỏi | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Interpretation --> | |
| <div id="interpretation" class="w-full max-w-3xl mt-8 bg-gray-800 bg-opacity-70 rounded-xl p-6 hidden"> | |
| <h3 class="text-2xl font-bold mb-4 text-center text-amber-400">GIẢI NGHĨA TRẢI BÀI</h3> | |
| <div id="interpretation-content" class="text-gray-200"> | |
| <!-- Will be filled by JavaScript --> | |
| </div> | |
| <div class="flex justify-center mt-4"> | |
| <button onclick="shareReading()" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-full text-white font-medium"> | |
| <i class="fas fa-share-alt mr-2"></i> Chia Sẻ | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-12 text-center text-gray-400 text-sm"> | |
| <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> | |
| <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> | |
| </footer> | |
| </div> | |
| <script> | |