| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>The Oracle's Gym - A Sparring Partner for Your Intuition</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet"> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| background: '#F5F1E9', |
| primary: { |
| purple: '#9381FF', |
| green: '#8A9A5B', |
| blue: '#4A5899' |
| }, |
| secondary: { |
| ochre: '#D4A373', |
| brown: '#A86A3D', |
| earth: '#7D5E3C' |
| }, |
| accent: { |
| star: '#FFD700', |
| moon: '#E6E6FA' |
| } |
| }, |
| fontFamily: { |
| serif: ['Cormorant Garamond', 'serif'], |
| sans: ['Lato', 'sans-serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .botanical-divider { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 120L0 16.48 0 0 1200 0 1200 120z' fill='%23F5F1E9'%3E%3C/path%3E%3Cpath d='M0,80 L200,60 L400,100 L600,40 L800,100 L1000,20 L1200,80 L1200,120 L0,120 Z' fill='%238A9A5B' opacity='0.2'/%3E%3C/svg%3E"); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .celestial-bg { |
| background-image: radial-gradient(circle at 20% 30%, rgba(255,215,0,0.1) 0%, transparent 20%), |
| radial-gradient(circle at 80% 70%, rgba(230,230,250,0.1) 0%, transparent 20%); |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| |
| .theme-tag { |
| transition: all 0.2s ease; |
| } |
| |
| .theme-tag:hover { |
| transform: scale(1.05); |
| } |
| </style> |
| </head> |
| <body class="bg-background font-sans text-secondary-brown min-h-screen celestial-bg"> |
| |
| <nav class="bg-white bg-opacity-80 backdrop-blur-sm border-b border-primary-green border-opacity-20 py-4 px-6 sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-lucide="moon" class="text-primary-purple w-8 h-8"></i> |
| <h1 class="font-serif text-2xl font-semibold text-primary-purple">The Oracle's Gym</h1> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#dashboard" class="text-primary-blue hover:text-primary-purple transition-colors">Dashboard</a> |
| <a href="#journal" class="text-primary-blue hover:text-primary-purple transition-colors">Journal</a> |
| <a href="#settings" class="text-primary-blue hover:text-primary-purple transition-colors">Settings</a> |
| </div> |
| <button class="md:hidden"> |
| <i data-lucide="menu" class="w-6 h-6 text-primary-blue"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <section class="py-16 px-6 botanical-divider"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h2 class="font-serif text-4xl md:text-5xl font-bold text-primary-purple mb-4">A Sparring Partner for Your Intuition</h2> |
| <p class="text-xl text-secondary-brown mb-8">Refine your tarot reading skills with sophisticated practice scenarios and meaningful feedback</p> |
| <button class="bg-primary-purple hover:bg-opacity-90 text-white font-semibold py-3 px-8 rounded-full transition-all transform hover:scale-105 shadow-lg"> |
| Begin Your Practice |
| </button> |
| </div> |
| </section> |
|
|
| |
| <section id="dashboard" class="py-16 px-6"> |
| <div class="max-w-7xl mx-auto"> |
| <h2 class="font-serif text-3xl text-center text-primary-blue mb-12">Practice Modes</h2> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-2xl p-6 shadow-lg card-hover border border-primary-green border-opacity-20"> |
| <div class="w-14 h-14 bg-primary-purple bg-opacity-10 rounded-full flex items-center justify-center mb-4"> |
| <i data-lucide="file-text" class="w-8 h-8 text-primary-purple"></i> |
| </div> |
| <h3 class="font-serif text-xl font-semibold text-primary-purple mb-3">Case Files</h3> |
| <p class="text-secondary-brown mb-4">Deep-dive practice with complex scenarios and hidden insights to discover</p> |
| <button class="w-full bg-primary-purple bg-opacity-10 text-primary-purple font-semibold py-2 px-4 rounded-lg hover:bg-opacity-20 transition-colors"> |
| Explore Cases |
| </button> |
| </div> |
|
|
| |
| <div class="bg-white rounded-2xl p-6 shadow-lg card-hover border border-primary-green border-opacity-20"> |
| <div class="w-14 h-14 bg-primary-green bg-opacity-10 rounded-full flex items-center justify-center mb-4"> |
| <i data-lucide="git-branch" class="w-8 h-8 text-primary-green"></i> |
| </div> |
| <h3 class="font-serif text-xl font-semibold text-primary-green mb-3">Oracle's Outcome</h3> |
| <p class="text-secondary-brown mb-4">Predictive practice with multiple paths and consequences to explore</p> |
| <button class="w-full bg-primary-green bg-opacity-10 text-primary-green font-semibold py-2 px-4 rounded-lg hover:bg-opacity-20 transition-colors"> |
| Choose Path |
| </button> |
| </div> |
|
|
| |
| <div class="bg-white rounded-2xl p-6 shadow-lg card-hover border border-primary-blue border-opacity-20"> |
| <div class="w-14 h-14 bg-primary-blue bg-opacity-10 rounded-full flex items-center justify-center mb-4"> |
| <i data-lucide="refresh-cw" class="w-8 h-8 text-primary-blue"></i> |
| </div> |
| <h3 class="font-serif text-xl font-semibold text-primary-blue mb-3">Reading Replay</h3> |
| <p class="text-secondary-brown mb-4">Nuance practice with evolving scenarios that reveal new information over time</p> |
| <button class="w-full bg-primary-blue bg-opacity-10 text-primary-blue font-semibold py-2 px-4 rounded-lg hover:bg-opacity-20 transition-colors"> |
| Start Replay |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-16 bg-white rounded-2xl p-8 shadow-lg border border-secondary-ochre border-opacity-20"> |
| <div class="flex items-center justify-between mb-6"> |
| <h3 class="font-serif text-2xl text-secondary-ochre">Master Journal</h3> |
| <i data-lucide="book-open" class="w-8 h-8 text-secondary-ochre"></i> |
| </div> |
| <p class="text-secondary-brown mb-6">Review your past readings, add annotations, and track your progress over time</p> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> |
| <div class="text-center"> |
| <div class="text-2xl font-bold text-primary-purple">42</div> |
| <div class="text-sm text-secondary-brown">Readings</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-2xl font-bold text-primary-green">18</div> |
| <div class="text-sm text-secondary-brown">Case Files</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-2xl font-bold text-primary-blue">12</div> |
| <div class="text-sm text-secondary-brown">Replays</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-2xl font-bold text-secondary-ochre">7</div> |
| <div class="text-sm text-secondary-brown">Themes</div> |
| </div> |
| </div> |
| <button class="w-full bg-secondary-ochre bg-opacity-10 text-secondary-ochre font-semibold py-2 px-4 rounded-lg hover:bg-opacity-20 transition-colors"> |
| Open Journal |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 px-6 bg-primary-blue bg-opacity-5"> |
| <div class="max-w-7xl mx-auto"> |
| <h2 class="font-serif text-3xl text-center text-primary-blue mb-12">Practice Themes</h2> |
| |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"> |
| <div class="bg-white rounded-xl p-4 text-center theme-tag shadow-md"> |
| <i data-lucide="briefcase" class="w-8 h-8 text-primary-purple mx-auto mb-2"></i> |
| <span class="text-sm font-medium text-primary-purple">Career & Finance</span> |
| </div> |
| <div class="bg-white rounded-xl p-4 text-center theme-tag shadow-md"> |
| <i data-lucide="heart" class="w-8 h-8 text-primary-purple mx-auto mb-2"></i> |
| <span class="text-sm font-medium text-primary-purple">Romance</span> |
| </div> |
| <div class="bg-white rounded-xl p-4 text-center theme-tag shadow-md"> |
| <i data-lucide="home" class="w-8 h-8 text-primary-purple mx-auto mb-2"></i> |
| <span class="text-sm font-medium text-primary-purple">Family</span> |
| </div> |
| <div class="bg-white rounded-xl p-4 text-center theme-tag shadow-md"> |
| <i data-lucide="sparkles" class="w-8 h-8 text-primary-purple mx-auto mb-2"></i> |
| <span class="text-sm font-medium text-primary-purple">Growth</span> |
| </div> |
| <div class="bg-white rounded-xl p-4 text-center theme-tag shadow-md"> |
| <i data-lucide="palette" class="w-8 h-8 text-primary-purple mx-auto mb-2"></i> |
| <span class="text-sm font-medium text-primary-purple">Creativity</span> |
| </div> |
| <div class="bg-white rounded-xl p-4 text-center theme-tag shadow-md"> |
| <i data-lucide="heart-pulse" class="w-8 h-8 text-primary-purple mx-auto mb-2"></i> |
| <span class="text-sm font-medium text-primary-purple">Health</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 px-6"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="font-serif text-3xl text-center text-primary-green mb-12">Sample Case File</h2> |
| |
| <div class="bg-white rounded-2xl p-8 shadow-lg border border-primary-green border-opacity-20"> |
| <div class="flex items-center justify-between mb-6"> |
| <h3 class="font-serif text-xl text-primary-green">The Crossroads Decision</h3> |
| <span class="bg-primary-green bg-opacity-10 text-primary-green text-sm px-3 py-1 rounded-full">Intermediate</span> |
| </div> |
| |
| <div class="mb-6"> |
| <p class="text-secondary-brown mb-4">Alex, a talented graphic designer, faces a career crossroads: accept a stable corporate position or pursue their dream of starting a freelance studio. The corporate job offers security but little creative freedom, while freelancing promises autonomy but financial uncertainty.</p> |
| <p class="text-secondary-brown">Alex's hidden fear: They're secretly worried they lack the business acumen to succeed independently, despite their creative confidence.</p> |
| </div> |
| |
| <div class="flex flex-wrap gap-2 mb-6"> |
| <span class="bg-primary-purple bg-opacity-10 text-primary-purple text-sm px-3 py-1 rounded-full">Career</span> |
| <span class="bg-primary-purple bg-opacity-10 text-primary-purple text-sm px-3 py-1 rounded-full">Courage</span> |
| <span class="bg-primary-purple bg-opacity-10 text-primary-purple text-sm px-3 py-1 rounded-full">Transition</span> |
| </div> |
| |
| <button class="w-full bg-primary-green text-white font-semibold py-3 px-6 rounded-lg hover:bg-opacity-90 transition-colors"> |
| Practice This Reading |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-primary-blue bg-opacity-10 py-12 px-6 mt-16"> |
| <div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i data-lucide="moon" class="w-8 h-8 text-primary-blue"></i> |
| <span class="font-serif text-xl font-semibold text-primary-blue">The Oracle's Gym</span> |
| </div> |
| <p class="text-secondary-brown">Refining intuition through purposeful practice</p> |
| </div> |
| |
| <div> |
| <h4 class="font-serif text-lg text-primary-blue mb-4">Practice Modes</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-secondary-brown hover:text-primary-blue transition-colors">Case Files</a></li> |
| <li><a href="#" class="text-secondary-brown hover:text-primary-blue transition-colors">Oracle's Outcome</a></li> |
| <li><a href="#" class="text-secondary-brown hover:text-primary-blue transition-colors">Reading Replay</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-serif text-lg text-primary-blue mb-4">Resources</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-secondary-brown hover:text-primary-blue transition-colors">Master Journal</a></li> |
| <li><a href="#" class="text-secondary-brown hover:text-primary-blue transition-colors">Learning Guides</a></li> |
| <li><a href="#" class="text-secondary-brown hover:text-primary-blue transition-colors">Community</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="max-w-7xl mx-auto mt-8 pt-8 border-t border-primary-blue border-opacity-20"> |
| <p class="text-center text-secondary-brown">© 2023 The Oracle's Gym. A sanctuary for intuitive development.</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| lucide.createIcons(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const cards = document.querySelectorAll('.card-hover'); |
| cards.forEach(card => { |
| card.addEventListener('mouseenter', () => { |
| card.style.transform = 'translateY(-5px)'; |
| }); |
| card.addEventListener('mouseleave', () => { |
| card.style.transform = 'translateY(0)'; |
| }); |
| }); |
| |
| |
| const themeTags = document.querySelectorAll('.theme-tag'); |
| themeTags.forEach(tag => { |
| tag.addEventListener('mouseenter', () => { |
| tag.style.transform = 'scale(1.05)'; |
| }); |
| tag.addEventListener('mouseleave', () => { |
| tag.style.transform = 'scale(1)'; |
| }); |
| }); |
| }); |
| </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=user5358/tarot-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
