Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Oracle's Gym | Intuition Practice</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| mauve: '#E0C2C0', | |
| sage: '#C1C9A0', | |
| cream: '#F5F1E0', | |
| dustpurple: '#9678A0', | |
| gold: '#E7C76A', | |
| amber: '#D98D47', | |
| ivory: '#FFFFF0', | |
| pearl: '#F0E6D9', | |
| plum: '#8E7495', | |
| rose: '#D4A6B1', | |
| terracotta: '#D86A4D', | |
| mutedgold: '#B5A366', | |
| }, | |
| fontFamily: { | |
| 'serif': ['Playfair Display', 'serif'], | |
| 'sans': ['Poppins', 'sans-serif'], | |
| }, | |
| backgroundImage: { | |
| 'art-nouveau': "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%239678a0' opacity='0.1' d='M5,25 C10,15 30,5 50,5 C70,5 90,15 95,25 C100,35 95,45 80,55 C65,65 40,70 25,65 C10,60 0,35 5,25 Z'/%3E%3C/svg%3E\")" | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .art-nouveau-border { | |
| border: 1px solid transparent; | |
| border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath d='M0,5 C10,0 30,0 40,5 C50,10 60,15 70,10 C80,5 75,20 65,25 C55,30 35,35 20,30 C5,25 0,10 0,5 Z' fill='none' stroke='%239678a0' stroke-width='0.5'/%3E%3C/svg%3E") 20 round; | |
| } | |
| .card-rotation:hover { | |
| transform: rotate(1.5deg); | |
| transition: transform 0.3s ease; | |
| } | |
| .mode-card { | |
| background: linear-gradient(145deg, rgba(240,230,217,0.7), rgba(245,241,224,0.7)); | |
| backdrop-filter: blur(5px); | |
| border-radius: 16px; | |
| box-shadow: 0 8px 20px rgba(150, 120, 160, 0.15); | |
| overflow: hidden; | |
| } | |
| .theme-badge { | |
| background-color: rgba(151, 201, 160, 0.2); | |
| border: 1px solid rgba(193, 201, 160, 0.3); | |
| } | |
| .celestial-icon { | |
| position: absolute; | |
| opacity: 0.07; | |
| z-index: -1; | |
| } | |
| .reading-interface { | |
| background-color: rgba(245, 241, 224, 0.95); | |
| border-radius: 24px; | |
| box-shadow: 0 20px 50px rgba(0,0,0,0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-pearl font-sans text-plum min-h-screen"> | |
| <i class="celestial-icon top-1/4 left-10" data-feather="moon"></i> | |
| <i class="celestial-icon top-1/3 right-20" data-feather="star"></i> | |
| <i class="celestial-icon bottom-20 left-1/4" data-feather="sun"></i> | |
| <!-- Main Dashboard --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-12"> | |
| <h1 class="font-serif text-5xl font-bold text-plum mb-2">The Oracle's Gym</h1> | |
| <p class="text-amber text-lg italic">A sparring partner for your intuition</p> | |
| </header> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto"> | |
| <!-- Case Files Card --> | |
| <div class="mode-card art-nouveau-border p-6 flex flex-col items-center card-rotation" data-aos="fade-right"> | |
| <div class="bg-dustpurple/10 w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="book-open" class="text-plum w-8 h-8"></i> | |
| </div> | |
| <h2 class="font-serif text-xl font-semibold text-plum mb-2">Case Files</h2> | |
| <p class="text-amber text-sm mb-4 text-center">Deep-Dive Practice</p> | |
| <p class="text-plum/90 mb-4 text-center text-sm">Solve complex scenarios with hidden insights</p> | |
| <button class="mt-auto bg-plum hover:bg-plum/90 text-cream px-5 py-2 rounded-full text-sm">Select Case</button> | |
| </div> | |
| <!-- Oracle's Outcome Card --> | |
| <div class="mode-card art-nouveau-border p-6 flex flex-col items-center card-rotation" data-aos="fade-up"> | |
| <div class="bg-amber/10 w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="compass" class="text-plum w-8 h-8"></i> | |
| </div> | |
| <h2 class="font-serif text-xl font-semibold text-plum mb-2">Oracle's Outcome</h2> | |
| <p class="text-amber text-sm mb-4 text-center">Predictive Practice</p> | |
| <p class="text-plum/90 mb-4 text-center text-sm">Guide characters through branching futures</p> | |
| <button class="mt-auto bg-plum hover:bg-plum/90 text-cream px-5 py-2 rounded-full text-sm">Choose Path</button> | |
| </div> | |
| <!-- Reading Replay Card --> | |
| <div class="mode-card art-nouveau-border p-6 flex flex-col items-center card-rotation" data-aos="fade-left"> | |
| <div class="bg-rose/10 w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="refresh-cw" class="text-plum w-8 h-8"></i> | |
| </div> | |
| <h2 class="font-serif text-xl font-semibold text-plum mb-2">Reading Replay</h2> | |
| <p class="text-amber text-sm mb-4 text-center">Nuance Practice</p> | |
| <p class="text-plum/90 mb-4 text-center text-sm">Discover how context evolves over time</p> | |
| <button class="mt-auto bg-plum hover:bg-plum/90 text-cream px-5 py-2 rounded-full text-sm">Review Readings</button> | |
| </div> | |
| </div> | |
| <!-- Master Journal Button --> | |
| <div class="flex justify-center mt-12"> | |
| <button class="flex items-center gap-2 bg-plum/90 hover:bg-plum text-cream px-6 py-3 rounded-full font-serif"> | |
| <i data-feather="book"></i> | |
| Master Journal | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Theme Badges --> | |
| <div class="mt-20 max-w-2xl mx-auto px-4" data-aos="fade-up"> | |
| <h2 class="font-serif text-2xl text-center text-plum mb-6">Practice Themes</h2> | |
| <div class="flex flex-wrap justify-center gap-3"> | |
| <span class="theme-badge px-4 py-2 rounded-full text-xs">Career & Finance</span> | |
| <span class="theme-badge px-4 py-2 rounded-full text-xs">Romance & Relationships</span> | |
| <span class="theme-badge px-4 py-2 rounded-full text-xs">Family & Home</span> | |
| <span class="theme-badge px-4 py-2 rounded-full text-xs">Personal Growth</span> | |
| <span class="theme-badge px-4 py-2 rounded-full text-xs">Creativity</span> | |
| <span class="theme-badge px-4 py-2 rounded-full text-xs">Health & Well-being</span> | |
| </div> | |
| </div> | |
| <!-- Featured Decks --> | |
| <div class="mt-20" data-aos="fade-up"> | |
| <div class="bg-sage/20 py-8"> | |
| <h2 class="font-serif text-2xl text-center text-plum mb-2">Featured Tarot Decks</h2> | |
| <p class="text-center text-plum/80 mb-8">Premium digital experiences</p> | |
| <div class="flex overflow-x-auto pb-8 px-4 gap-4 max-w-5xl mx-auto"> | |
| <div class="min-w-[140px] h-[220px] bg-rose/30 rounded-xl border border-mauve/40 flex items-center justify-center"> | |
| <i data-feather="hexagon" class="text-sage w-8 h-8"></i> | |
| </div> | |
| <div class="min-w-[140px] h-[220px] bg-amber/30 rounded-xl border border-mauve/40 flex items-center justify-center"> | |
| <i data-feather="circle" class="text-gold w-8 h-8"></i> | |
| </div> | |
| <div class="min-w-[140px] h-[220px] bg-dustpurple/30 rounded-xl border border-mauve/40 flex items-center justify-center"> | |
| <i data-feather="triangle" class="text-mutedgold w-8 h-8"></i> | |
| </div> | |
| <div class="min-w-[140px] h-[220px] bg-terracotta/30 rounded-xl border border-mauve/40 flex items-center justify-center"> | |
| <i data-feather="square" class="text-plum w-8 h-8"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal Reading Interface (Hidden until triggered) --> | |
| <div id="reading-modal" class="fixed inset-0 bg-black/70 hidden items-center justify-center p-4 z-50"> | |
| <div class="reading-interface w-full max-w-2xl p-8"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <h3 class="font-serif text-2xl text-plum">Reading Session</h3> | |
| <button id="close-modal" class="text-plum/50 hover:text-plum"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-6 my-8"> | |
| <div class="w-24 h-36 bg-sage/30 rounded-lg shadow-md border border-mauve/40"></div> | |
| <div class="w-24 h-36 bg-sage/30 rounded-lg shadow-md border border-mauve/40"></div> | |
| <div class="w-24 h-36 bg-sage/30 rounded-lg shadow-md border border-mauve/40"></div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button class="bg-plum/80 hover:bg-plum text-cream py-3 rounded-lg text-sm flex items-center justify-center gap-2"> | |
| <i data-feather="refresh-cw"></i> Shuffle Deck | |
| </button> | |
| <button class="bg-gold/90 hover:bg-amber text-cream py-3 rounded-lg text-sm flex items-center justify-center gap-2"> | |
| <i data-feather="layers"></i> Change Spread | |
| </button> | |
| </div> | |
| <div class="mt-8"> | |
| <label class="block font-serif text-plum mb-3">Your Interpretation</label> | |
| <textarea class="w-full h-32 p-4 bg-cream/90 text-plum border border-mauve/40 rounded-lg focus:ring-sage focus:border-sage" placeholder="Share your intuitive insights..."></textarea> | |
| <div class="flex justify-between mt-4"> | |
| <button class="flex items-center gap-2 text-plum/70 hover:text-plum text-sm"> | |
| <i data-feather="mic"></i> Voice Note | |
| </button> | |
| <button class="bg-plum hover:bg-plum/90 text-cream px-5 py-2 rounded-full font-serif text-sm"> | |
| Submit Reading | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize libraries | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-out-cubic' | |
| }); | |
| // Add Feather Icons after DOM load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Open modal on card click | |
| document.querySelectorAll('.mode-card button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| document.getElementById('reading-modal').classList.remove('hidden'); | |
| }); | |
| }); | |
| // Close modal functionality | |
| document.getElementById('close-modal').addEventListener('click', () => { | |
| document.getElementById('reading-modal').classList.add('hidden'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |