|
|
<!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> |
