| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>星辰占卜 - 探索你的命运</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=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Serif SC', serif; |
| background-color: #0f172a; |
| color: #e2e8f0; |
| } |
| |
| .title-font { |
| font-family: 'Ma Shan Zheng', cursive; |
| } |
| |
| .card { |
| background: rgba(15, 23, 42, 0.7); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3); |
| } |
| |
| .tarot-card { |
| width: 120px; |
| height: 200px; |
| perspective: 1000px; |
| cursor: pointer; |
| } |
| |
| .tarot-inner { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| transition: transform 0.8s; |
| transform-style: preserve-3d; |
| } |
| |
| .tarot-card.flipped .tarot-inner { |
| transform: rotateY(180deg); |
| } |
| |
| .tarot-front, .tarot-back { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| backface-visibility: hidden; |
| border-radius: 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| } |
| |
| .tarot-front { |
| background: linear-gradient(135deg, #6b21a8, #9333ea); |
| color: white; |
| font-size: 24px; |
| } |
| |
| .tarot-back { |
| background: linear-gradient(135deg, #1e293b, #334155); |
| transform: rotateY(180deg); |
| padding: 10px; |
| text-align: center; |
| font-size: 14px; |
| } |
| |
| .glow { |
| animation: glow 2s infinite alternate; |
| } |
| |
| @keyframes glow { |
| from { |
| box-shadow: 0 0 5px rgba(167, 139, 250, 0.5); |
| } |
| to { |
| box-shadow: 0 0 20px rgba(167, 139, 250, 0.8); |
| } |
| } |
| |
| .fade-in { |
| animation: fadeIn 1s ease-in; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .constellation-icon { |
| font-size: 2rem; |
| margin-bottom: 10px; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <div class="fixed inset-0 overflow-hidden -z-10"> |
| <div class="absolute inset-0 bg-gradient-to-b from-indigo-900/20 via-purple-900/20 to-gray-900"></div> |
| <div id="stars-container" class="absolute inset-0"></div> |
| </div> |
|
|
| |
| <nav class="bg-gray-900/80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-800"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-star text-purple-400 text-2xl"></i> |
| <span class="title-font text-2xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">星辰占卜</span> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="#tarot" class="text-gray-300 hover:text-purple-300 transition">塔罗占卜</a> |
| <a href="#horoscope" class="text-gray-300 hover:text-purple-300 transition">星座运势</a> |
| <a href="#numerology" class="text-gray-300 hover:text-purple-300 transition">数字命理</a> |
| <a href="#about" class="text-gray-300 hover:text-purple-300 transition">关于我们</a> |
| </div> |
| <button class="md:hidden text-gray-300"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <header class="relative pt-24 pb-32 px-4 text-center"> |
| <div class="max-w-4xl mx-auto"> |
| <h1 class="title-font text-5xl md:text-7xl mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-pink-300"> |
| 探索命运的神秘面纱 |
| </h1> |
| <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto"> |
| 通过古老的占卜艺术，揭示你生活中的隐藏模式和未来可能性 |
| </p> |
| <div class="flex flex-wrap justify-center gap-4"> |
| <a href="#tarot" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full font-medium hover:opacity-90 transition shadow-lg"> |
| 开始占卜 |
| </a> |
| <a href="#about" class="px-8 py-3 border border-purple-400 text-purple-300 rounded-full font-medium hover:bg-purple-900/30 transition"> |
| 了解更多 |
| </a> |
| </div> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-900/90 to-transparent"></div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 pb-20"> |
| |
| <section id="tarot" class="mb-28"> |
| <div class="text-center mb-12"> |
| <h2 class="title-font text-4xl mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-pink-300"> |
| <i class="fas fa-cards mr-3"></i>塔罗占卜 |
| </h2> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| 塔罗牌是探索潜意识和未来可能性的强大工具。选择三张牌分别代表过去、现在和未来。 |
| </p> |
| </div> |
| |
| <div class="max-w-4xl mx-auto"> |
| <div class="card rounded-xl p-6 mb-8"> |
| <h3 class="text-xl font-semibold mb-4 text-purple-300">选择你的问题类型</h3> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <button onclick="setQuestionType('love')" class="question-type-btn py-3 px-4 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition text-center"> |
| <i class="fas fa-heart text-pink-400 mb-2"></i> |
| <div>爱情</div> |
| </button> |
| <button onclick="setQuestionType('career')" class="question-type-btn py-3 px-4 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition text-center"> |
| <i class="fas fa-briefcase text-blue-400 mb-2"></i> |
| <div>事业</div> |
| </button> |
| <button onclick="setQuestionType('finance')" class="question-type-btn py-3 px-4 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition text-center"> |
| <i class="fas fa-coins text-yellow-400 mb-2"></i> |
| <div>财富</div> |
| </button> |
| <button onclick="setQuestionType('health')" class="question-type-btn py-3 px-4 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition text-center"> |
| <i class="fas fa-heartbeat text-green-400 mb-2"></i> |
| <div>健康</div> |
| </button> |
| </div> |
| </div> |
| |
| <div id="question-input" class="card rounded-xl p-6 mb-8 hidden"> |
| <h3 class="text-xl font-semibold mb-4 text-purple-300">专注于你的问题</h3> |
| <textarea id="user-question" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-gray-300 mb-4" rows="3" placeholder="在心中默念你的问题..."></textarea> |
| <button onclick="startTarotReading()" class="px-6 py-2 bg-purple-600 rounded-lg font-medium hover:bg-purple-700 transition"> |
| 开始抽牌 |
| </button> |
| </div> |
| |
| <div id="tarot-reading" class="hidden"> |
| <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-6"> |
| <div class="text-center"> |
| <h4 class="text-lg text-purple-300 mb-2">过去</h4> |
| <div id="past-card" class="tarot-card mx-auto" onclick="flipCard(this)"> |
| <div class="tarot-inner"> |
| <div class="tarot-front"> |
| <i class="fas fa-question"></i> |
| </div> |
| <div class="tarot-back"></div> |
| </div> |
| </div> |
| </div> |
| <div class="text-center"> |
| <h4 class="text-lg text-purple-300 mb-2">现在</h4> |
| <div id="present-card" class="tarot-card mx-auto" onclick="flipCard(this)"> |
| <div class="tarot-inner"> |
| <div class="tarot-front"> |
| <i class="fas fa-question"></i> |
| </div> |
| <div class="tarot-back"></div> |
| </div> |
| </div> |
| </div> |
| <div class="text-center"> |
| <h4 class="text-lg text-purple-300 mb-2">未来</h4> |
| <div id="future-card" class="tarot-card mx-auto" onclick="flipCard(this)"> |
| <div class="tarot-inner"> |
| <div class="tarot-front"> |
| <i class="fas fa-question"></i> |
| </div> |
| <div class="tarot-back"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="tarot-interpretation" class="card rounded-xl p-6 hidden"> |
| <h3 class="text-xl font-semibold mb-4 text-purple-300">解读</h3> |
| <div class="space-y-4"> |
| <div> |
| <h4 class="text-lg text-pink-300 mb-2">过去: <span id="past-card-name"></span></h4> |
| <p id="past-interpretation" class="text-gray-300"></p> |
| </div> |
| <div> |
| <h4 class="text-lg text-blue-300 mb-2">现在: <span id="present-card-name"></span></h4> |
| <p id="present-interpretation" class="text-gray-300"></p> |
| </div> |
| <div> |
| <h4 class="text-lg text-purple-300 mb-2">未来: <span id="future-card-name"></span></h4> |
| <p id="future-interpretation" class="text-gray-300"></p> |
| </div> |
| </div> |
| <div class="mt-6 pt-4 border-t border-gray-800"> |
| <h4 class="text-lg text-yellow-300 mb-2">整体建议</h4> |
| <p id="overall-advice" class="text-gray-300"></p> |
| </div> |
| </div> |
| |
| <div class="text-center mt-8"> |
| <button onclick="resetTarotReading()" class="px-6 py-2 border border-purple-600 text-purple-300 rounded-lg font-medium hover:bg-purple-900/30 transition"> |
| 重新开始 |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="horoscope" class="mb-28"> |
| <div class="text-center mb-12"> |
| <h2 class="title-font text-4xl mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-pink-300"> |
| <i class="fas fa-star-and-crescent mr-3"></i>星座运势 |
| </h2> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| 了解你的星座今日、本周和本月的运势，获取关于爱情、事业和健康的指导。 |
| </p> |
| </div> |
| |
| <div class="max-w-4xl mx-auto"> |
| <div class="card rounded-xl p-6 mb-8"> |
| <h3 class="text-xl font-semibold mb-6 text-purple-300">选择你的星座</h3> |
| <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4"> |
| <button onclick="selectZodiac('aries')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-ram constellation-icon text-red-400"></i> |
| <div>白羊座</div> |
| <div class="text-xs text-gray-400">3.21-4.19</div> |
| </button> |
| <button onclick="selectZodiac('taurus')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-bull constellation-icon text-green-400"></i> |
| <div>金牛座</div> |
| <div class="text-xs text-gray-400">4.20-5.20</div> |
| </button> |
| <button onclick="selectZodiac('gemini')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-users constellation-icon text-yellow-400"></i> |
| <div>双子座</div> |
| <div class="text-xs text-gray-400">5.21-6.21</div> |
| </button> |
| <button onclick="selectZodiac('cancer')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-crab constellation-icon text-blue-400"></i> |
| <div>巨蟹座</div> |
| <div class="text-xs text-gray-400">6.22-7.22</div> |
| </button> |
| <button onclick="selectZodiac('leo')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-lion constellation-icon text-orange-400"></i> |
| <div>狮子座</div> |
| <div class="text-xs text-gray-400">7.23-8.22</div> |
| </button> |
| <button onclick="selectZodiac('virgo')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-virgo constellation-icon text-purple-400"></i> |
| <div>处女座</div> |
| <div class="text-xs text-gray-400">8.23-9.22</div> |
| </button> |
| <button onclick="selectZodiac('libra')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-balance-scale constellation-icon text-pink-400"></i> |
| <div>天秤座</div> |
| <div class="text-xs text-gray-400">9.23-10.23</div> |
| </button> |
| <button onclick="selectZodiac('scorpio')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-scorpion constellation-icon text-red-500"></i> |
| <div>天蝎座</div> |
| <div class="text-xs text-gray-400">10.24-11.21</div> |
| </button> |
| <button onclick="selectZodiac('sagittarius')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-arrow-right constellation-icon text-purple-300"></i> |
| <div>射手座</div> |
| <div class="text-xs text-gray-400">11.22-12.21</div> |
| </button> |
| <button onclick="selectZodiac('capricorn')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-goat constellation-icon text-gray-400"></i> |
| <div>摩羯座</div> |
| <div class="text-xs text-gray-400">12.22-1.19</div> |
| </button> |
| <button onclick="selectZodiac('aquarius')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-water constellation-icon text-blue-300"></i> |
| <div>水瓶座</div> |
| <div class="text-xs text-gray-400">1.20-2.18</div> |
| </button> |
| <button onclick="selectZodiac('pisces')" class="zodiac-btn py-3 px-2 rounded-lg border border-purple-900 hover:bg-purple-900/30 transition flex flex-col items-center"> |
| <i class="fas fa-fish constellation-icon text-teal-400"></i> |
| <div>双鱼座</div> |
| <div class="text-xs text-gray-400">2.19-3.20</div> |
| </button> |
| </div> |
| </div> |
| |
| <div id="horoscope-result" class="hidden"> |
| <div class="card rounded-xl p-6 mb-6"> |
| <div class="flex items-center mb-4"> |
| <h3 class="text-xl font-semibold text-purple-300" id="selected-zodiac-name"></h3> |
| <span class="ml-auto text-sm text-gray-400" id="horoscope-date"></span> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-6"> |
| <div class="card rounded-lg p-4"> |
| <h4 class="text-lg font-medium text-pink-300 mb-3 flex items-center"> |
| <i class="fas fa-sun mr-2"></i>今日运势 |
| </h4> |
| <div class="mb-3"> |
| <span class="text-sm text-gray-400">幸运指数:</span> |
| <div class="w-full bg-gray-700 rounded-full h-2 mt-1"> |
| <div id="today-luck" class="bg-yellow-400 h-2 rounded-full"></div> |
| </div> |
| </div> |
| <p id="today-horoscope" class="text-gray-300 text-sm"></p> |
| </div> |
| |
| <div class="card rounded-lg p-4"> |
| <h4 class="text-lg font-medium text-blue-300 mb-3 flex items-center"> |
| <i class="fas fa-calendar-week mr-2"></i>本周运势 |
| </h4> |
| <div class="mb-3"> |
| <span class="text-sm text-gray-400">幸运指数:</span> |
| <div class="w-full bg-gray-700 rounded-full h-2 mt-1"> |
| <div id="week-luck" class="bg-blue-400 h-2 rounded-full"></div> |
| </div> |
| </div> |
| <p id="week-horoscope" class="text-gray-300 text-sm"></p> |
| </div> |
| |
| <div class="card rounded-lg p-4"> |
| <h4 class="text-lg font-medium text-purple-300 mb-3 flex items-center"> |
| <i class="fas fa-calendar-alt mr-2"></i>本月运势 |
| </h4> |
| <div class="mb-3"> |
| <span class="text-sm text-gray-400">幸运指数:</span> |
| <div class="w-full bg-gray-700 rounded-full h-2 mt-1"> |
| <div id="month-luck" class="bg-purple-400 h-2 rounded-full"></div> |
| </div> |
| </div> |
| <p id="month-horoscope" class="text-gray-300 text-sm"></p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card rounded-xl p-6"> |
| <h3 class="text-xl font-semibold mb-4 text-purple-300">详细分析</h3> |
| <div class="grid md:grid-cols-3 gap-6"> |
| <div> |
| <h4 class="text-lg text-pink-300 mb-2 flex items-center"> |
| <i class="fas fa-heart mr-2"></i>爱情运势 |
| </h4> |
| <p id="love-horoscope" class="text-gray-300 text-sm"></p> |
| </div> |
| <div> |
| <h4 class="text-lg text-blue-300 mb-2 flex items-center"> |
| <i class="fas fa-briefcase mr-2"></i>事业运势 |
| </h4> |
| <p id="career-horoscope" class="text-gray-300 text-sm"></p> |
| </div> |
| <div> |
| <h4 class="text-lg text-green-300 mb-2 flex items-center"> |
| <i class="fas fa-heartbeat mr-2"></i>健康运势 |
| </h4> |
| <p id="health-horoscope" class="text-gray-300 text-sm"></p> |
| </div> |
| </div> |
| |
| <div class="mt-6 pt-4 border-t border-gray-800"> |
| <h4 class="text-lg text-yellow-300 mb-2 flex items-center"> |
| <i class="fas fa-lightbulb mr-2"></i>幸运提示 |
| </h4> |
| <div class="flex flex-wrap gap-2"> |
| <div class="flex items-center bg-gray-800/50 px-3 py-1 rounded-full text-sm"> |
| <span class="text-yellow-300 mr-1">幸运色:</span> |
| <span id="lucky-color" class="text-gray-300"></span> |
| </div> |
| <div class="flex items-center bg-gray-800/50 px-3 py-1 rounded-full text-sm"> |
| <span class="text-yellow-300 mr-1">幸运数字:</span> |
| <span id="lucky-number" class="text-gray-300"></span> |
| </div> |
| <div class="flex items-center bg-gray-800/50 px-3 py-1 rounded-full text-sm"> |
| <span class="text-yellow-300 mr-1">幸运方向:</span> |
| <span id="lucky-direction" class="text-gray-300"></span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-8"> |
| <button onclick="resetHoroscope()" class="px-6 py-2 border border-purple-600 text-purple-300 rounded-lg font-medium hover:bg-purple-900/30 transition"> |
| 选择其他星座 |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="numerology" class="mb-28"> |
| <div class="text-center mb-12"> |
| <h2 class="title-font text-4xl mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-pink-300"> |
| <i class="fas fa-calculator mr-3"></i>数字命理 |
| </h2> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| 通过你的出生日期和姓名计算生命灵数，了解你的天赋、挑战和人生道路。 |
| </p> |
| </div> |
| |
| <div class="max-w-2xl mx-auto"> |
| <div class="card rounded-xl p-6 mb-8"> |
| <h3 class="text-xl font-semibold mb-6 text-purple-300">输入你的信息</h3> |
| |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <label class="block text-gray-400 mb-2">出生日期</label> |
| <input type="date" id="birth-date" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-gray-300"> |
| </div> |
| <div> |
| <label class="block text-gray-400 mb-2">姓名</label> |
| <input type="text" id="user-name" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-gray-300" placeholder="输入你的全名"> |
| </div> |
| </div> |
| |
| <button onclick="calculateNumerology()" class="px-6 py-3 bg-purple-600 rounded-lg font-medium hover:bg-purple-700 transition w-full"> |
| 计算我的生命数字 |
| </button> |
| </div> |
| |
| <div id="numerology-result" class="hidden"> |
| <div class="card rounded-xl p-6 mb-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <h3 class="text-xl font-semibold text-purple-300">你的生命数字</h3> |
| <div id="life-path-number" class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-3xl font-bold glow"></div> |
| </div> |
| |
| <div class="mb-6"> |
| <h4 class="text-lg text-blue-300 mb-3">基本含义</h4> |
| <p id="life-path-meaning" class="text-gray-300"></p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <h4 class="text-lg text-pink-300 mb-3">天赋与优势</h4> |
| <ul id="strengths" class="text-gray-300 space-y-2"></ul> |
| </div> |
| <div> |
| <h4 class="text-lg text-yellow-300 mb-3">挑战与弱点</h4> |
| <ul id="weaknesses" class="text-gray-300 space-y-2"></ul> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg text-green-300 mb-3">人生建议</h4> |
| <p id="life-advice" class="text-gray-300"></p> |
| </div> |
| </div> |
| |
| <div class="card rounded-xl p-6 mb-6"> |
| <h3 class="text-xl font-semibold mb-6 text-purple-300">详细分析</h3> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <h4 class="text-lg text-blue-300 mb-3 flex items-center"> |
| <i class="fas fa-birthday-cake mr-2"></i>生日数字 |
| </h4> |
| <div class="flex items-center mb-2"> |
| <span id="birth-day-number" class="w-10 h-10 rounded-full bg-blue-600/30 flex items-center justify-center text-lg font-medium mr-3"></span> |
| <p id="birth-day-meaning" class="text-gray-300 text-sm"></p> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg text-pink-300 mb-3 flex items-center"> |
| <i class="fas fa-heart mr-2"></i>心灵数字 |
| </h4> |
| <div class="flex items-center mb-2"> |
| <span id="soul-number" class="w-10 h-10 rounded-full bg-pink-600/30 flex items-center justify-center text-lg font-medium mr-3"></span> |
| <p id="soul-meaning" class="text-gray-300 text-sm"></p> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg text-yellow-300 mb-3 flex items-center"> |
| <i class="fas fa-user mr-2"></i>个性数字 |
| </h4> |
| <div class="flex items-center mb-2"> |
| <span id="personality-number" class="w-10 h-10 rounded-full bg-yellow-600/30 flex items-center justify-center text-lg font-medium mr-3"></span> |
| <p id="personality-meaning" class="text-gray-300 text-sm"></p> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg text-purple-300 mb-3 flex items-center"> |
| <i class="fas fa-magic mr-2"></i>命运数字 |
| </h4> |
| <div class="flex items-center mb-2"> |
| <span id="destiny-number" class="w-10 h-10 rounded-full bg-purple-600/30 flex items-center justify-center text-lg font-medium mr-3"></span> |
| <p id="destiny-meaning" class="text-gray-300 text-sm"></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-8"> |
| <button onclick="resetNumerology()" class="px-6 py-2 border border-purple-600 text-purple-300 rounded-lg font-medium hover:bg-purple-900/30 transition"> |
| 重新计算 |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="mb-20"> |
| <div class="text-center mb-12"> |
| <h2 class="title-font text-4xl mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-pink-300"> |
| <i class="fas fa-moon mr-3"></i>关于我们 |
| </h2> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| 星辰占卜致力于提供准确、有意义的占卜服务，帮助你更好地理解自己和未来。 |
| </p> |
| </div> |
| |
| <div class="max-w-4xl mx-auto"> |
| <div class="card rounded-xl p-8"> |
| <div class="grid md:grid-cols-2 gap-8 items-center"> |
| <div> |
| <h3 class="text-2xl font-semibold mb-4 text-purple-300">我们的使命</h3> |
| <p class="text-gray-300 mb-6"> |
| 星辰占卜创立于2010年，由一群热爱神秘学和心理学的专业人士组成。我们相信每个人都能从古老的占卜智慧中获益，获得关于生活方向的指引。 |
| </p> |
| <p class="text-gray-300 mb-6"> |
| 我们的解读不仅基于传统占卜方法，还结合了现代心理学知识，旨在为你提供既有灵性深度又有实用价值的建议。 |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-600 transition"> |
| <i class="fab fa-weixin"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-600 transition"> |
| <i class="fab fa-weibo"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-600 transition"> |
| <i class="fab fa-github"></i> |
| </a> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="aspect-w-1 aspect-h-1"> |
| <div class="w-full h-80 bg-gradient-to-br from-purple-900/30 to-pink-900/30 rounded-xl flex items-center justify-center"> |
| <i class="fas fa-crystal-ball text-6xl text-purple-300 opacity-50"></i> |
| </div> |
| </div> |
| <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center text-4xl"> |
| <i class="fas fa-star text-white"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-gray-900/80 border-t border-gray-800 py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-star text-purple-400 text-xl"></i> |
| <span class="title-font text-xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">星辰占卜</span> |
| </div> |
| <p class="text-gray-400 text-sm"> |
| 探索命运的神秘面纱，发现你生活中的隐藏模式和未来可能性。 |
| </p> |
| </div> |
| <div> |
| <h4 class="text-lg text-gray-300 mb-4">快速链接</h4> |
| <ul class="space-y-2"> |
| <li><a href="#tarot" class="text-gray-400 hover:text-purple-300 transition text-sm">塔罗占卜</a></li> |
| <li><a href="#horoscope" class="text-gray-400 hover:text-purple-300 transition text-sm">星座运势</a></li> |
| <li><a href="#numerology" class="text-gray-400 hover:text-purple-300 transition text-sm">数字命理</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-purple-300 transition text-sm">关于我们</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg text-gray-300 mb-4">联系我们</h4> |
| <ul class="space-y-2 text-sm text-gray-400"> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope mr-2 text-purple-300"></i> |
| contact@stardivination.com |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone mr-2 text-purple-300"></i> |
| +86 138 1234 5678 |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-map-marker-alt mr-2 text-purple-300"></i> |
| 上海市浦东新区星辰大厦 |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg text-gray-300 mb-4">订阅我们</h4> |
| <p class="text-gray-400 text-sm mb-3"> |
| 订阅获取最新的占卜技巧和星座运势更新。 |
| </p> |
| <div class="flex"> |
| <input type="email" placeholder="你的邮箱" class="bg-gray-800 text-gray-300 px-3 py-2 rounded-l-lg text-sm w-full"> |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r-lg text-sm"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="pt-6 border-t border-gray-800 text-center text-gray-500 text-sm"> |
| <p>© 2023 星辰占卜. 保留所有权利。</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function createStars() { |
| const container = document.getElementById('stars-container'); |
| const starsCount = 200; |
| |
| for (let i = 0; i < starsCount; i++) { |
| const star = document.createElement('div'); |
| star.className = 'absolute rounded-full bg-white'; |
| |
| |
| const size = Math.random() * 0.5 + 0.1; |
| star.style.width = `${size}px`; |
| star.style.height = `${size}px`; |
| |
| |
| star.style.left = `${Math.random() * 100}%`; |
| star.style.top = `${Math.random() * 100}%`; |
| |
| |
| star.style.opacity = Math.random() * 0.8 + 0.2; |
| |
| |
| if (Math.random() > 0.7) { |
| star.style.animation = `twinkle ${Math.random() * 3 + 2}s infinite alternate`; |
| } |
| |
| container.appendChild(star); |
| } |
| |
| |
| const style = document.createElement('style'); |
| style.textContent = ` |
| @keyframes twinkle { |
| 0% { opacity: 0.2; } |
| 100% { opacity: 1; } |
| } |
| `; |
| document.head.appendChild(style); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| createStars(); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| }); |
| |
| |
| const tarotCards = [ |
| { |
| name: "愚者", |
| meaning: "新的开始,冒险,无限可能", |
| reversed: "鲁莽,缺乏计划,愚蠢" |
| }, |
| { |
| name: "魔术师", |
| meaning: "技能,创造力,意志力", |
| reversed: "操纵,欺骗,未实现的才能" |
| }, |
| { |
| name: "女祭司", |
| meaning: "直觉,神秘,潜意识", |
| reversed: "隐藏的知识,忽视直觉" |
| }, |
| { |
| name: "皇后", |
| meaning: "养育,丰富,感官享受", |
| reversed: "依赖,忽视自我照顾" |
| }, |
| { |
| name: "皇帝", |
| meaning: "权威,结构,控制", |
| reversed: "专制,缺乏纪律" |
| }, |
| { |
| name: "教皇", |
| meaning: "传统,精神指导", |
| reversed: "非传统信仰,自由思考" |
| }, |
| { |
| name: "恋人", |
| meaning: "爱情,和谐,关系", |
| reversed: "不平衡,冲突" |
| }, |
| { |
| name: "战车", |
| meaning: "意志力,胜利,控制", |
| reversed: "缺乏方向,失控" |
| }, |
| { |
| name: "力量", |
| meaning: "内在力量,勇气,耐心", |
| reversed: "自我怀疑,软弱" |
| }, |
| { |
| name: "隐士", |
| meaning: "内省,孤独,寻求真理", |
| reversed: "孤立,拒绝帮助" |
| }, |
| { |
| name: "命运之轮", |
| meaning: "命运,变化,转折点", |
| reversed: "抵抗变化,坏运气" |
| }, |
| { |
| name: "正义", |
| meaning: "公平,真相,法律", |
| reversed: "不公正,偏见" |
| }, |
| { |
| name: "倒吊人", |
| meaning: "牺牲,新视角", |
| reversed: "拖延,不愿牺牲" |
| }, |
| { |
| name: "死神", |
| meaning: "结束,转变,新的开始", |
| reversed: "抗拒改变,停滞" |
| }, |
| { |
| name: "节制", |
| meaning: "平衡,和谐,耐心", |
| reversed: "不平衡,极端" |
| }, |
| { |
| name: "恶魔", |
| meaning: "束缚,物质主义", |
| reversed: "摆脱束缚,精神自由" |
| }, |
| { |
| name: "塔", |
| meaning: "突然变化,启示", |
| reversed: "避免灾难,抗拒改变" |
| }, |
| { |
| name: "星星", |
| meaning: "希望,灵感,精神觉醒", |
| reversed: "绝望,失去信心" |
| }, |
| { |
| name: "月亮", |
| meaning: "幻觉,恐惧,潜意识", |
| reversed: "清晰,释放恐惧" |
| }, |
| { |
| name: "太阳", |
| meaning: "快乐,成功,活力", |
| reversed: "暂时的挫折" |
| }, |
| { |
| name: "审判", |
| meaning: "重生,内在召唤", |
| reversed: "自我怀疑,拒绝召唤" |
| }, |
| { |
| name: "世界", |
| meaning: "完成,成就,旅行", |
| reversed: "未完成,缺乏结束" |
| } |
| ]; |
| |
| |
| const zodiacData = { |
| aries: { |
| name: "白羊座", |
| today: "今天是充满活力的一天，你的热情会感染周围的人。抓住机会表达你的想法。", |
| week: "本周人际关系是重点，可能会遇到志同道合的朋友。工作上有新机会出现。", |
| month: "这个月是你展现领导才能的好时机，不要害怕承担责任。财务上有小惊喜。", |
| love: "单身者有机会遇到热情的对象，已有伴侣的需要多表达情感。", |
| career: "工作上有突破机会，勇于提出创新想法会得到认可。", |
| health: "注意休息，避免过度劳累。运动时小心受伤。", |
| color: "红色", |
| number: "7", |
| direction: "东方" |
| }, |
| taurus: { |
| name: "金牛座", |
| today: "今天适合处理财务问题，你的务实态度会带来好结果。享受生活中的小确幸。", |
| week: "本周需要耐心处理家庭事务，避免冲动决定。周末适合放松和享受美食。", |
| month: "这个月是巩固财务基础的好时机，考虑长期投资计划。感情关系需要更多关注。", |
| love: "稳定是关键词，已有伴侣的需要更多沟通，单身者不急于开始新关系。", |
| career: "稳步前进，不要被短期困难吓倒。你的坚持会得到回报。", |
| health: "注意饮食平衡，适当增加运动量。", |
| color: "绿色", |
| number: "6", |
| direction: "北方" |
| }, |
| gemini: { |
| name: "双子座", |
| today: "今天思维敏捷，适合学习和交流。可能会收到意想不到的消息。", |
| week: "本周社交活跃，有机会结识有趣的人。注意不要过度承诺。", |
| month: "这个月是扩展人际网络的好时机，旅行或进修计划可能带来惊喜。", |
| love: "沟通是关键，单身者可能通过朋友介绍认识特别的人。", |
| career: "多任务处理能力强，但要注意细节。新合作机会出现。", |
| health: "注意神经系统，保证充足睡眠。", |
| color: "黄色", |
| number: "5", |
| direction: "西方" |
| }, |
| cancer: { |
| name: "巨蟹座", |
| today: "今天情绪敏感，适合与亲密的人相处。家庭事务需要你的关注。", |
| week: "本周直觉敏锐，相信你的第一感觉。财务上可能有小惊喜。", |
| month: "这个月家庭和情感是重点，考虑改善居住环境或解决家庭问题。", |
| love: "情感需求强烈，已有伴侣的需要更多安全感，单身者可能遇到体贴对象。", |
| career: "团队合作比单打独斗更有效，不要害怕寻求帮助。", |
| health: "注意消化系统，保持规律作息。", |
| color: "银色", |
| number: "2", |
| direction: "北方" |
| }, |
| leo: { |
| name: "狮子座", |
| today: "今天是展现自我的好时机，你的创意和热情会得到赞赏。", |
| week: "本周充满活力，社交活动多。注意不要过度消费。周末适合娱乐活动。", |
| month: "这个月是事业发展的关键期，勇于表达你的想法。财务上有好消息。", |
| love: "魅力四射，单身者容易吸引他人注意，已有伴侣的需要更多浪漫时刻。", |
| career: "领导才能凸显，可能获得认可或晋升机会。", |
| health: "注意心脏健康，适当放松。", |
| color: "金色", |
| number: "1", |
| direction: "南方" |
| }, |
| virgo: { |
| name: "处女座", |
| today: "今天适合处理细节工作，你的分析能力特别强。健康问题需要关注。", |
| week: "本周工作效率高，但要注意不要对自己要求太苛刻。周末适合整理和规划。", |
| month: "这个月是提升技能的好时机，考虑学习新知识。财务上需要谨慎决策。", |
| love: "务实态度重要，单身者可能通过工作认识特别的人，已有伴侣的需要实际支持。", |
| career: "细节决定成败，你的专业能力会得到认可。", |
| health: "注意神经系统，避免过度紧张。", |
| color: "棕色", |
| number: "4", |
| direction: "西方" |
| }, |
| libra: { |
| name: "天秤座", |
| today: "今天人际关系和谐，适合解决冲突或谈判。艺术活动带来愉悦。", |
| week: "本周需要平衡工作与生活，避免拖延重要决定。周末适合社交活动。", |
| month: "这个月合作是关键，可能建立重要商业或个人关系。财务上有波动。", |
| love: "关系和谐重要，单身者可能遇到有魅力对象，已有伴侣的需要更多陪伴。", |
| career: "团队合作带来成功，法律或艺术相关事务顺利。", |
| health: "注意肾脏健康，多喝水。", |
| color: "粉色", |
| number: "3", |
| direction: "东方" |
| }, |
| scorpio: { |
| name: "天蝎座", |
| today: "今天直觉敏锐，适合处理复杂问题。可能有重要发现或启示。", |
| week: "本周情感强烈，可能经历深刻体验。财务上有意外收获。", |
| month: "这个月是转变的时期，考虑结束不再服务你的事物。研究或调查事务顺利。", |
| love: "情感深刻，单身者可能遇到强烈吸引对象，已有伴侣的需要更深连接。", |
| career: "策略性思考带来突破，可能发现隐藏机会或资源。", |
| health: "注意生殖系统健康，适当释放压力。", |
| color: "深红色", |
| number: "8", |
| direction: "北方" |
| }, |
| sagittarius: { |
| name: "射手座", |
| today: "今天乐观积极，适合开始新项目或计划旅行。可能收到远方消息。", |
| week: "本周充满冒险精神，尝试新事物会带来快乐。注意不要过度承诺。", |
| month: "这个月是扩展视野的好时机，考虑教育或旅行计划。出版或法律事务顺利。", |
| love: "自由重要，单身者可能遇到来自不同背景对象，已有伴侣的需要共同冒险。", |
| career: "国际或教育相关机会出现，勇于表达你的哲学观点。", |
| health: "注意肝脏健康，适量运动。", |
| color: "紫色", |
| number: "9", |
| direction: "南方" |
| }, |
| capricorn: { |
| name: "摩羯座", |
| today: "今天务实专注，适合处理长期计划。权威人士可能提供帮助。", |
| week: "本周事业是重点，你的努力会得到认可。周末适合规划未来。", |
| month: "这个月是事业发展的关键期，可能获得晋升或重要项目。财务稳定。", |
| love: "责任重要，单身者可能遇到成熟对象，已有伴侣的需要共同目标。", |
| career: "专业能力得到认可，长期计划开始显现成果。", |
| health: "注意骨骼健康，适当补充钙质。", |
| color: "黑色", |
| number: "10", |
| direction: "南方" |
| }, |
| aquarius: { |
| name: "水瓶座", |
| today: "今天思维创新，适合提出非传统解决方案。朋友可能带来惊喜。", |
| week: "本周社交活跃，可能加入新团体或组织。科技相关事务顺利。", |
| month: "这个月是改变常规的好时机，考虑人道主义活动或科技项目。", |
| love: "友谊重要，单身者可能通过朋友认识特别对象，已有伴侣的需要更多空间。", |
| career: "创新思维带来突破，团队项目特别顺利。", |
| health: "注意循环系统，适当放松。", |
| color: "蓝色", |
| number: "11", |
| direction: "西方" |
| }, |
| pisces: { |
| name: "双鱼座", |
| today: "今天直觉敏锐，适合创意或灵性活动。可能有神秘体验或启示。", |
| week: "本周情感丰富，艺术或慈善活动带来满足感。周末适合独处或冥想。", |
| month: "这个月是灵性成长的好时机，考虑冥想或艺术创作。隐藏才能可能显现。", |
| love: "情感连接重要，单身者可能遇到灵魂伴侣，已有伴侣的需要更深理解。", |
| career: "创意领域特别顺利，直觉引导你做出正确决定。", |
| health: "注意脚部健康，适当放松。", |
| color: "海绿色", |
| number: "12", |
| direction: "北方" |
| } |
| }; |
| |
| |
| const numerologyData = { |
| 1: { |
| meaning: "你是天生的领导者，充满创意和独立性。你的道路是学习自信和开创自己的道路。", |
| strengths: ["创新", "独立", "自信", "雄心", "原创性"], |
| weaknesses: ["固执", "自私", "傲慢", "冲动", "支配欲"], |
| advice: "相信你的直觉，但也要学会倾听他人意见。你的原创想法可以改变世界。" |
| }, |
| 2: { |
| meaning: "你是和平的缔造者，敏感且富有外交手腕。你的道路是学习合作与平衡。", |
| strengths: ["合作", "耐心", "体贴", "和谐", "直觉"], |
| weaknesses: ["过度敏感", "依赖", "优柔寡断", "害羞", "逃避冲突"], |
| advice: "你的敏感是天赋不是弱点。在需要时勇敢表达自己，你的意见很重要。" |
| }, |
| 3: { |
| meaning: "你是快乐的传播者，充满创意和表达力。你的道路是学习乐观和有效沟通。", |
| strengths: ["创意", "表达", "热情", "社交", "乐观"], |
| weaknesses: ["肤浅", "夸张", "浪费", "注意力分散", "多话"], |
| advice: "用你的创意才能激励他人。记住，真正的快乐来自内心而非外在。" |
| }, |
| 4: { |
| meaning: "你是务实的建设者，可靠且注重细节。你的道路是学习稳定和努力工作。", |
| strengths: ["可靠", "纪律", "耐心", "务实", "组织能力"], |
| weaknesses: ["固执", "缺乏弹性", "过于保守", "工作狂", "抗拒变化"], |
| advice: "你的稳定性是宝贵资产。偶尔放松规则，生活会更有趣。" |
| }, |
| 5: { |
| meaning: "你是自由的灵魂，充满冒险精神和适应力。你的道路是学习自由与责任的平衡。", |
| strengths: ["适应力", "自由", "冒险", "进步", "多才多艺"], |
| weaknesses: ["不安定", "不负责任", "冲动", "不可预测", "过度追求刺激"], |
| advice: "用你的适应力探索世界，但记住真正的自由来自内在而非外在。" |
| }, |
| 6: { |
| meaning: "你是关怀的养育者，负责任且富有同情心。你的道路是学习无私服务和平衡给予与接受。", |
| strengths: ["负责", "关怀", "治愈", "同情", "家庭导向"], |
| weaknesses: ["自我牺牲", "固执", "干涉", "完美主义", "过度保护"], |
| advice: "你的关怀让世界更美好。记住也要照顾好自己，你不能从空杯子倒水给别人。" |
| }, |
| 7: { |
| meaning: "你是智慧的追寻者，内省且富有灵性。你的道路是学习信任内在智慧和分享知识。", |
| strengths: ["智慧", "内省", "直觉", "分析", "灵性"], |
| weaknesses: ["孤僻", "怀疑", "悲观", "固执", "逃避现实"], |
| advice: "你的洞察力可以照亮他人道路。走出象牙塔，与世界分享你的智慧。" |
| }, |
| 8: { |
| meaning: "你是权力的掌控者，雄心勃勃且富有商业头脑。你的道路是学习权力的正确使用和物质与精神的平衡。", |
| strengths: ["雄心", "组织", "实际", "权威", "财务能力"], |
| weaknesses: ["工作狂", "物质主义", "无情", "过度控制", "地位导向"], |
| advice: "你有成就伟大的潜力。记住真正的成功是内外平衡的。" |
| }, |
| 9: { |
| meaning: "你是人道的理想主义者，富有同情心和全球视野。你的道路是学习无私服务和释放过去。", |
| strengths: ["人道主义", "创意", "慷慨", "理想主义", "艺术性"], |
| weaknesses: ["不切实际", "情感依赖", "过度牺牲", "怀旧", "逃避"], |
| advice: "你的同情心可以治愈世界。学会放手过去，专注于现在能做的善事。" |
| }, |
| 11: { |
| meaning: "你是启迪者，拥有高度直觉和灵性洞察力。你的道路是学习信任直觉和启发他人。", |
| strengths: ["直觉", "灵感", "理想主义", "洞察力", "敏感"], |
| weaknesses: ["紧张", "过度敏感", "不切实际", "逃避", "自我怀疑"], |
| advice: "你的直觉是神圣礼物。相信它并勇敢分享你的愿景。" |
| }, |
| 22: { |
| meaning: "你是大师建设者，拥有将愿景变为现实的非凡能力。你的道路是学习运用权力为全人类谋福利。", |
| strengths: ["实践理想", "远见", "领导力", "组织", "全球思维"], |
| weaknesses: ["过度工作", "压力", "不切实际", "固执", "支配欲"], |
| advice: "你有改变世界的潜力。保持谦卑，让服务而非自我成为动力。" |
| } |
| }; |
| |
| |
| let currentQuestionType = ''; |
| |
| function setQuestionType(type) { |
| currentQuestionType = type; |
| document.querySelectorAll('.question-type-btn').forEach(btn => { |
| btn.classList.remove('bg-purple-900/50', 'border-purple-400'); |
| }); |
| event.currentTarget.classList.add('bg-purple-900/50', 'border-purple-400'); |
| document.getElementById('question-input').classList.remove('hidden'); |
| } |
| |
| function startTarotReading() { |
| const question = document.getElementById('user-question').value; |
| if (!currentQuestionType) { |
| alert('请先选择问题类型'); |
| return; |
| } |
| |
| document.getElementById('question-input').classList.add('hidden'); |
| document.getElementById('tarot-reading').classList.remove('hidden'); |
| |
| |
| const shuffled = [...tarotCards].sort(() => 0.5 - Math.random()); |
| const selectedCards = shuffled.slice(0, 3); |
| |
| |
| setTimeout(() => { |
| document.getElementById('past-card').querySelector('.tarot-back').textContent = selectedCards[0].name; |
| document.getElementById('present-card').querySelector('.tarot-back').textContent = selectedCards[1].name; |
| document.getElementById('future-card').querySelector('.tarot-back').textContent = selectedCards[2].name; |
| |
| |
| setTimeout(() => { |
| document.getElementById('past-card-name').textContent = selectedCards[0].name; |
| document.getElementById('present-card-name').textContent = selectedCards[1].name; |
| document.getElementById('future-card-name').textContent = selectedCards[2].name; |
| |
| document.getElementById('past-interpretation').textContent = getInterpretation(selectedCards[0], 'past'); |
| document.getElementById('present-interpretation').textContent = getInterpretation(selectedCards[1], 'present'); |
| document.getElementById('future-interpretation').textContent = getInterpretation(selectedCards[2], 'future'); |
| |
| document.getElementById('overall-advice').textContent = getOverallAdvice(selectedCards); |
| |
| document.getElementById('tarot-interpretation').classList.remove('hidden'); |
| document.getElementById('tarot-interpretation').classList.add('fade-in'); |
| }, 1500); |
| }, 500); |
| } |
| |
| function getInterpretation(card, position) { |
| const interpretations = { |
| love: { |
| past: `在爱情方面，${card.name}表示你过去${card.meaning.toLowerCase()}。`, |
| present: `当前的感情状况显示${card.name}的能量，意味着${card.meaning.toLowerCase()}。`, |
| future: `未来的感情发展可能${card.meaning.toLowerCase()}，${card.name}建议你${Math.random() > 0.5 ? '保持开放心态' : '谨慎选择'}。` |
| }, |
| career: { |
| past: `职业发展上，${card.name}显示你过去${card.meaning.toLowerCase()}。`, |
| present: `当前工作状况受到${card.name}影响，表明${card.meaning.toLowerCase()}。`, |
| future: `职业前景显示${card.name}的能量，可能${card.meaning.toLowerCase()}，建议${Math.random() > 0.5 ? '主动争取机会' : '耐心等待时机'}。` |
| }, |
| finance: { |
| past: `财务状况上，${card.name}反映你过去${card.meaning.toLowerCase()}。`, |
| present: `当前金钱流动显示${card.name}的影响，意味着${card.meaning.toLowerCase()}。`, |
| future: `财务未来可能${card.meaning.toLowerCase()}，${card.name}建议${Math.random() > 0.5 ? '保守理财' : '适度冒险'}。` |
| }, |
| health: { |
| past: `健康方面，${card.name}表示你过去${card.meaning.toLowerCase()}。`, |
| present: `当前身体状况受到${card.name}影响，${card.meaning.toLowerCase()}。`, |
| future: `健康前景显示${card.name}的能量，可能${card.meaning.toLowerCase()}，建议${Math.random() > 0.5 ? '增加休息' : '更多运动'}。` |
| } |
| }; |
| |
| return interpretations[currentQuestionType][position]; |
| } |
| |
| function getOverallAdvice(cards) { |
| const advices = [ |
| "保持开放心态，接受变化带来的机会。", |
| "相信你的直觉，它正引导你走向正确的方向。", |
| "现在是行动的时候，不要被恐惧阻碍。", |
| "耐心是关键，有些事需要时间发展。", |
| "平衡是你当前最重要的课题。", |
| "与他人合作会带来意想不到的好处。", |
| "关注细节，小事情可能产生大影响。", |
| "表达你的真实感受，沟通是解决问题的关键。", |
| "照顾好自己的身心健康，这是成功的基础。", |
| "过去的经验是宝贵的教训，但不是未来的限制。" |
| ]; |
| |
| return advices[Math.floor(Math.random() * advices.length)]; |
| } |
| |
| function flipCard(cardElement) { |
| cardElement.classList.toggle('flipped'); |
| } |
| |
| function resetTarotReading() { |
| document.getElementById('tarot-reading').classList.add('hidden'); |
| document.getElementById('question-input').classList.remove('hidden'); |
| document.getElementById('user-question').value = ''; |
| |
| |
| const cards = document.querySelectorAll('.tarot-card'); |
| cards.forEach(card => { |
| card.classList.remove('flipped'); |
| card.querySelector('.tarot-back').textContent = ''; |
| }); |
| |
| document.getElementById('tarot-interpretation').classList.add('hidden'); |
| } |
| |
| |
| function selectZodiac(sign) { |
| const zodiac = zodiacData[sign]; |
| |
| |
| document.getElementById('selected-zodiac-name').textContent = zodiac.name; |
| |
| |
| const now = new Date(); |
| document.getElementById('horoscope-date').textContent = `更新于: ${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`; |
| |
| |
| document.getElementById('today-horoscope').textContent = zodiac.today; |
| document.getElementById('week-horoscope').textContent = zodiac.week; |
| document.getElementById('month-horoscope').textContent = zodiac.month; |
| |
| document.getElementById('love-horoscope').textContent = zodiac.love; |
| document.getElementById('career-horoscope').textContent = zodiac.career; |
| document.getElementById('health-horoscope').textContent = zodiac.health; |
| |
| |
| document.getElementById('lucky-color').textContent = zodiac.color; |
| document.getElementById('lucky-number').textContent = zodiac.number; |
| document.getElementById('lucky-direction').textContent = zodiac.direction; |
| |
| |
| document.getElementById('today-luck').style.width = `${Math.floor(Math.random() * 60 + 40)}%`; |
| document.getElementById('week-luck').style.width = `${Math.floor(Math.random() * 60 + 40)}%`; |
| document.getElementById('month-luck').style.width = `${Math.floor(Math.random() * 60 + 40)}%`; |
| |
| |
| document.getElementById('horoscope-result').classList.remove('hidden'); |
| |
| |
| document.getElementById('horoscope-result').scrollIntoView({ behavior: 'smooth' }); |
| } |
| |
| function resetHoroscope() { |
| document.getElementById('horoscope-result').classList.add('hidden'); |
| } |
| |
| |
| function calculateNumerology() { |
| const birthDate = document.getElementById('birth-date').value; |
| const name = document.getElementById('user-name').value.trim(); |
| |
| if (!birthDate || !name) { |
| alert('请输入出生日期和姓名'); |
| return; |
| } |
| |
| |
| const dateParts = birthDate.split('-'); |
| const day = parseInt(dateParts[2]); |
| const month = parseInt(dateParts[1]); |
| const year = parseInt(dateParts[0]); |
| |
| let lifePathNumber = reduceToSingleDigit(day) + reduceToSingleDigit(month) + reduceToSingleDigit(year); |
| lifePathNumber = reduceToSingleDigit(lifePathNumber); |
| |
| |
| if (lifePathNumber === 11 || lifePathNumber === 22) { |
| |
| } else { |
| lifePathNumber = reduceToSingleDigit(lifePathNumber); |
| } |
| |
| |
| const nameNumbers = calculateNameNumbers(name); |
| const destinyNumber = reduceToSingleDigit(nameNumbers.total); |
| const soulNumber = reduceToSingleDigit(nameNumbers.vowels); |
| const personalityNumber = reduceToSingleDigit(nameNumbers.consonants); |
| |
| |
| document.getElementById('life-path-number').textContent = lifePathNumber; |
| |
| const numerology = numerologyData[lifePathNumber] || numerologyData[reduceToSingleDigit(lifePathNumber)]; |
| |
| document.getElementById('life-path-meaning').textContent = numerology.meaning; |
| |
| |
| const strengthsList = document.getElementById('strengths'); |
| const weaknessesList = document.getElementById('weaknesses'); |
| |
| strengthsList.innerHTML = ''; |
| weaknessesList.innerHTML = ''; |
| |
| numerology.strengths.forEach(strength => { |
| const li = document.createElement('li'); |
| li.className = 'flex items-center'; |
| li.innerHTML = `<i class="fas fa-check-circle text-green-400 mr-2"></i>${strength}`; |
| strengthsList.appendChild(li); |
| }); |
| |
| numerology.weaknesses.forEach(weakness => { |
| const li = document.createElement('li'); |
| li.className = 'flex items-center'; |
| li.innerHTML = `<i class="fas fa-exclamation-circle text-red-400 mr-2"></i>${weakness}`; |
| weaknessesList.appendChild(li); |
| }); |
| |
| document.getElementById('life-advice').textContent = numerology.advice; |
| |
| |
| document.getElementById('birth-day-number').textContent = reduceToSingleDigit(day); |
| document.getElementById('birth-day-meaning').textContent = getBirthDayMeaning(day); |
| |
| document.getElementById('soul-number').textContent = soulNumber; |
| document.getElementById('soul-meaning').textContent = getSoulMeaning(soulNumber); |
| |
| document.getElementById('personality-number').textContent = personalityNumber; |
| document.getElementById('personality-meaning').textContent = getPersonalityMeaning(personalityNumber); |
| |
| document.getElementById('destiny-number').textContent = destinyNumber; |
| document.getElementById('destiny-meaning').textContent = getDestinyMeaning(destinyNumber); |
| |
| |
| document.getElementById('numerology-result').classList.remove('hidden'); |
| |
| |
| document.getElementById('numerology-result').scrollIntoView({ behavior: 'smooth' }); |
| } |
| |
| function reduceToSingleDigit(number) { |
| while (number > 9) { |
| number = number.toString().split('').reduce((sum, digit) => sum + parseInt(digit), 0); |
| } |
| return number; |
| } |
| |
| function calculateNameNumbers(name) { |
| const letterValues = { |
| 'a': 1, 'b': 2, 'c': 3, 'd': 4, 'e': 5, 'f': 6, 'g': 7, 'h': 8, 'i': 9, |
| 'j': 1, 'k': 2, 'l': 3, 'm': 4, 'n': 5, 'o': 6, 'p': 7, 'q': 8, 'r': 9, |
| 's': 1, 't': 2, 'u': 3, 'v': 4, 'w': 5, 'x': 6, 'y': 7, 'z': 8 |
| }; |
| |
| const vowels = ['a', 'e', 'i', 'o', 'u']; |
| let total = 0; |
| let vowelSum = 0; |
| let consonantSum = 0; |
| |
| for (let char of name.toLowerCase()) { |
| if (letterValues[char]) { |
| total += letterValues[char]; |
| |
| if (vowels.includes(char)) { |
| vowelSum += letterValues[char]; |
| } else { |
| consonantSum += letterValues[char]; |
| } |
| } |
| } |
| |
| return { |
| total: total, |
| vowels: vowelSum, |
| consonants: consonantSum |
| }; |
| } |
| |
| function getBirthDayMeaning(day) { |
| const meanings = [ |
| "独立、创造力强", |
| "合作、敏感", |
| "表达、社交", |
| "稳定、务实", |
| "自由、冒险", |
| "责任、关怀", |
| "智慧、内省", |
| "成功、权力", |
| "人道、理想主义" |
| ]; |
| |
| return meanings[reduceToSingleDigit(day) - 1] || "特殊能量"; |
| } |
| |
| function getSoulMeaning(number) { |
| const meanings = [ |
| "渴望独立和自我表达", |
| "渴望和谐与伙伴关系", |
| "渴望快乐和创造性表达", |
| "渴望安全和稳定", |
| "渴望自由和变化", |
| "渴望服务和责任", |
| "渴望知识和真理", |
| "渴望成功和认可", |
| "渴望完美和理想" |
| ]; |
| |
| return meanings[number - 1] || "深层次灵魂需求"; |
| } |
| |
| function getPersonalityMeaning(number) { |
| const meanings = [ |
| "自信、独立的形象", |
| "温和、友善的形象", |
| "开朗、有魅力的形象", |
| "可靠、务实的形象", |
| "自由、冒险的形象", |
| "负责、关怀的形象", |
| "智慧、神秘的形象", |
| "强大、成功的形象", |
| "理想主义、慷慨的形象" |
| ]; |
| |
| return meanings[number - 1] || "外在表现特质"; |
| } |
| |
| function getDestinyMeaning(number) { |
| const meanings = [ |
| "领导力和创新的人生道路", |
| "合作与平衡的人生道路", |
| "表达与快乐的人生道路", |
| "建设与稳定的人生道路", |
| "自由与变化的人生道路", |
| "服务与责任的人生道路", |
| "智慧与真理的人生道路", |
| "成功与权力的人生道路", |
| "人道与理想的人生道路" |
| ]; |
| |
| return meanings[number - 1] || "灵魂的人生目的"; |
| } |
| |
| function resetNumerology() { |
| document.getElementById('birth-date').value = ''; |
| document.getElementById('user-name').value = ''; |
| document.getElementById('numerology-result').classList.add('hidden'); |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sexyfrad/sexyfrad" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
