Spaces:
Running
no user accounts or auth system 1. Project Overview
Browse files* App Name: The Oracle's Gym
* Tagline: A sparring partner for your intuition.
* Core Purpose: To provide a sophisticated practice environment for intermediate and advanced tarot readers. The app solves the problem of not having varied, complex, and specific scenarios to practice on, and provides a unique "feedback loop" to help readers measure the relevance and depth of their interpretations.
* Target Audience: Experienced tarot enthusiasts who know the card meanings but want to improve their storytelling, intuitive accuracy, and ability to handle complex, real-world questions.
2. Vibe & Design Aesthetic
* Use the attached images to draw inspiration from for the ui elements design and the app’s design
* Core Concept: The aesthetic is "Modern Grimoire" or "Soft Witchcraft." It should feel elegant, focused, and personal—like a beautifully crafted digital journal. The design should empower the user without resorting to mystical clichés, drawing heavily from the ethereal and sophisticated mood of the provided images.
* Color Palette: Inspired by the deep, muted tones and soft highlights in your reference images, we'll use a palette of soft mauves, sage greens, warm creams, dusty purples, warm golden yellows, honey and amber tones , Ivory, cream, and soft pearl tones, sophisticated purples and plums, dusty roses, terracotta, and burnt oranges Accents of muted gold or antique bronze will be incorporated for subtle highlights, reminiscent of aged metallic details found in ancient texts or elegant jewelry.
* Typography: For headers, we'll use an elegant serif font that evokes a sense of history and wisdom, similar to the classic, refined lettering seen in the grimoire-style images. Body text will utilize a clean, highly readable sans-serif to ensure clarity and a modern feel, balancing the traditional header style with contemporary usability.
* Visual Elements: The UI will feature Art Nouveau-inspired borders and delicate line work, echoing the flowing, organic patterns and intricate details present in the reference art. Subtle mystical symbols (e.g., celestial bodies, stylized botanicals, abstract sigils) will be integrated sparingly as elegant icons or background textures, maintaining the ethereal illustration style from your images. Think soft, watercolor-like gradients and gentle glows for interactive elements, creating a sense of depth and magic without being overtly fantastical.
3. Core User Experience (UX) Flow
1. Onboarding: A brief, elegant walkthrough of the three practice modes. The user selects their preferred default digital deck.
2. Dashboard: The user lands on a clean main screen with three clear choices: "Case Files," "Oracle's Outcome," and "Reading Replay," along with access to their "Master Journal."
3. Mode Selection: The user chooses a mode to begin their practice session.
4. The Reading: Within any mode, the user is presented with a scenario. They proceed to the Reading Interface to shuffle, draw cards, and lay them out in a chosen spread.
5. Interpretation & Feedback: The user types (or voice records) their interpretation. They then submit it to receive their "feedback" (revealing the Hidden Insight, the scenario Outcome, or a future information update).
6. Journaling: The app prompts the user: "Would you like to save this reading to your Master Journal?" The complete reading is saved for future review.
4. Feature Breakdown
* 4.1. Dashboard
* Clean design following the specified aesthetic.
* Three prominent buttons for the three modes.
* A persistent icon/link to the "Master Journal."
* A "Settings" icon (for deck selection, notifications, etc.).
* 4.2. Mode 1: Case Files (Deep-Dive Practice)
* A scrollable library of cases, displayed as cards with a title and theme tags.
* User Flow: Select Case -> Read Scenario -> Perform Reading -> Submit Interpretation -> Tap "Reveal Hidden Insight" -> Compare interpretation to the revealed insight.
* 4.3. Mode 2: Oracle's Outcome (Predictive Practice)
* Presents a scenario with 2-4 distinct paths (A, B, C).
* User Flow: Read Scenario -> Perform Reading -> Select the path you advise -> Tap "Lock In & Reveal Outcome" -> The app reveals the narrative consequences of that path.
* 4.4. Mode 3: Reading Replay (Nuance Practice)
* A list of "in-progress" readings.
* User Flow: Select a new Replay prompt -> Perform Reading -> Submit Interpretation.
* Push Notification System: After 24-48 hours, a notification alerts the user to "new information" regarding their reading.
* The user reviews their original interpretation alongside the new context.
* 4.5. The Reading Interface
* A virtual space to draw cards.
* Deck Selection: A library of high-quality digital decks.
* Spreads: A library of classic spreads (e.g., 3-Card, Celtic Cross) and a "Freestyle" option.
* Tapping a card enlarges it for detailed viewing.
* 4.6. The Master Journal
* A searchable and filterable archive of all saved readings.
* Filter Options: By date, by mode, by theme, by cards that appeared, by keyword.
* Annotation Feature: Users can add notes to saved readings.
* 4.7. Theming & Categorization
* A core system for organizing all content.
* Functionality: Allows users to filter existing cases or direct the AI to generate new cases based on a chosen theme.
* Theme Categories: Career & Finance, Romance & Relationships, Family & Home, Personal Growth & Spirituality, Creativity & Projects, Health & Well-being.
5. Content Generation: The AI Story Architect
* A backend AI model will be prompted using a Master Blueprint to generate all scenarios.
* Blueprint Rules:
1. Create a Relatable Character: Define a name, desire, and problem.
2. Define the Stakes: Clarify what the character stands to gain or lose.
3. Inject a Hidden Nuance: Every case must include a secret fear or motivation that serves as the "Hidden Insight."
4. Ensure Tarot-Friendliness: The core question must be open-ended.
5. Assign Theme & Difficulty: Tag every case with a theme and a difficulty level (Beginner, Intermediate, Master). - Initial Deployment
- README.md +7 -5
- index.html +255 -18
- prompts.txt +56 -0
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: tar-pract-dsv3
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: red
|
| 5 |
+
colorTo: pink
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
@@ -1,19 +1,256 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>The Oracle's Gym</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script>
|
| 9 |
+
tailwind.config = {
|
| 10 |
+
theme: {
|
| 11 |
+
extend: {
|
| 12 |
+
colors: {
|
| 13 |
+
mauve: '#B784A7',
|
| 14 |
+
sage: '#8A9B68',
|
| 15 |
+
cream: '#F5F0E6',
|
| 16 |
+
plum: '#6A4C6B',
|
| 17 |
+
terracotta: '#E2725B',
|
| 18 |
+
antique: '#D4AF37',
|
| 19 |
+
},
|
| 20 |
+
fontFamily: {
|
| 21 |
+
serif: ['Cormorant Garamond', 'serif'],
|
| 22 |
+
sans: ['Montserrat', 'sans-serif'],
|
| 23 |
+
},
|
| 24 |
+
}
|
| 25 |
+
}
|
| 26 |
+
}
|
| 27 |
+
</script>
|
| 28 |
+
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
|
| 29 |
+
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
|
| 30 |
+
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
|
| 31 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 32 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 33 |
+
<style>
|
| 34 |
+
.art-nouveau-border {
|
| 35 |
+
border: 8px solid transparent;
|
| 36 |
+
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0,0 C20,10 30,30 50,50 C70,70 80,90 100,100 L100,0 Z' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3C/svg%3E") 20% round;
|
| 37 |
+
}
|
| 38 |
+
.watercolor-bg {
|
| 39 |
+
background-image: radial-gradient(circle, rgba(247,237,226,0.8) 0%, rgba(245,240,230,0.4) 100%);
|
| 40 |
+
}
|
| 41 |
+
.card-hover {
|
| 42 |
+
transition: all 0.3s ease;
|
| 43 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 44 |
+
}
|
| 45 |
+
.card-hover:hover {
|
| 46 |
+
transform: translateY(-5px);
|
| 47 |
+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
|
| 48 |
+
}
|
| 49 |
+
.sigil {
|
| 50 |
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50,10 C60,30 80,30 90,50 C80,70 60,70 50,90 C40,70 20,70 10,50 C20,30 40,30 50,10 Z' fill='none' stroke='%23D4AF37' stroke-width='0.5'/%3E%3C/svg%3E");
|
| 51 |
+
background-size: 100px 100px;
|
| 52 |
+
opacity: 0.1;
|
| 53 |
+
}
|
| 54 |
+
</style>
|
| 55 |
+
</head>
|
| 56 |
+
<body class="bg-cream font-sans text-plum min-h-screen">
|
| 57 |
+
<!-- Navigation -->
|
| 58 |
+
<nav class="bg-white bg-opacity-70 backdrop-blur-md shadow-sm fixed w-full z-10">
|
| 59 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 60 |
+
<div class="flex justify-between h-16 items-center">
|
| 61 |
+
<div class="flex items-center">
|
| 62 |
+
<div class="flex-shrink-0 flex items-center">
|
| 63 |
+
<i data-feather="moon" class="text-antique h-8 w-8"></i>
|
| 64 |
+
<span class="ml-2 font-serif text-2xl font-medium">The Oracle's Gym</span>
|
| 65 |
+
</div>
|
| 66 |
+
</div>
|
| 67 |
+
<div class="hidden md:block">
|
| 68 |
+
<div class="ml-10 flex items-baseline space-x-8">
|
| 69 |
+
<a href="#" class="text-plum hover:text-terracotta px-3 py-2 text-sm font-medium">Dashboard</a>
|
| 70 |
+
<a href="#" class="text-plum hover:text-terracotta px-3 py-2 text-sm font-medium">Journal</a>
|
| 71 |
+
<a href="#" class="text-plum hover:text-terracotta px-3 py-2 text-sm font-medium">Settings</a>
|
| 72 |
+
</div>
|
| 73 |
+
</div>
|
| 74 |
+
<div class="md:hidden">
|
| 75 |
+
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-plum hover:text-terracotta focus:outline-none">
|
| 76 |
+
<i data-feather="menu" class="h-6 w-6"></i>
|
| 77 |
+
</button>
|
| 78 |
+
</div>
|
| 79 |
+
</div>
|
| 80 |
+
</div>
|
| 81 |
+
</nav>
|
| 82 |
+
|
| 83 |
+
<!-- Hero Section -->
|
| 84 |
+
<div class="relative pt-24 pb-20 px-4 sm:px-6 lg:pt-32 lg:pb-28 lg:px-8 sigil">
|
| 85 |
+
<div class="absolute inset-0">
|
| 86 |
+
<div class="watercolor-bg h-full w-full"></div>
|
| 87 |
+
</div>
|
| 88 |
+
<div class="relative max-w-7xl mx-auto">
|
| 89 |
+
<div class="text-center">
|
| 90 |
+
<h1 class="text-4xl tracking-tight font-serif font-bold text-plum sm:text-5xl md:text-6xl" data-aos="fade-down">
|
| 91 |
+
<span class="block">A sparring partner</span>
|
| 92 |
+
<span class="block text-antique">for your intuition</span>
|
| 93 |
+
</h1>
|
| 94 |
+
<p class="mt-3 max-w-md mx-auto text-base text-plum sm:text-lg md:mt-5 md:text-xl md:max-w-3xl" data-aos="fade-up" data-aos-delay="200">
|
| 95 |
+
Refine your tarot skills with complex scenarios, meaningful feedback, and a personalized journal to track your growth.
|
| 96 |
+
</p>
|
| 97 |
+
<div class="mt-10 sm:flex sm:justify-center" data-aos="fade-up" data-aos-delay="400">
|
| 98 |
+
<div class="rounded-md shadow">
|
| 99 |
+
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-cream bg-plum hover:bg-mauve md:py-4 md:text-lg md:px-10">
|
| 100 |
+
Begin Your Practice
|
| 101 |
+
</a>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
|
| 108 |
+
<!-- Practice Modes -->
|
| 109 |
+
<div class="py-12 bg-cream">
|
| 110 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 111 |
+
<div class="lg:text-center">
|
| 112 |
+
<h2 class="text-base text-antique font-semibold tracking-wide uppercase" data-aos="fade-down">Practice Modes</h2>
|
| 113 |
+
<p class="mt-2 font-serif text-3xl leading-8 font-extrabold tracking-tight text-plum sm:text-4xl" data-aos="fade-down" data-aos-delay="100">
|
| 114 |
+
Three ways to deepen your craft
|
| 115 |
+
</p>
|
| 116 |
+
</div>
|
| 117 |
+
|
| 118 |
+
<div class="mt-20">
|
| 119 |
+
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
|
| 120 |
+
<!-- Case Files -->
|
| 121 |
+
<div class="relative bg-white p-6 rounded-lg art-nouveau-border card-hover" data-aos="fade-up">
|
| 122 |
+
<div class="absolute -top-6 left-6 rounded-full bg-plum p-3">
|
| 123 |
+
<i data-feather="book-open" class="text-cream h-6 w-6"></i>
|
| 124 |
+
</div>
|
| 125 |
+
<h3 class="font-serif text-lg font-medium text-plum mb-2">Case Files</h3>
|
| 126 |
+
<p class="mt-2 text-base text-plum">
|
| 127 |
+
Deep-dive practice with complex scenarios and hidden insights to uncover.
|
| 128 |
+
</p>
|
| 129 |
+
<div class="mt-4">
|
| 130 |
+
<a href="#" class="text-base font-medium text-terracotta hover:text-antique">
|
| 131 |
+
Explore cases
|
| 132 |
+
<i data-feather="arrow-right" class="inline h-4 w-4"></i>
|
| 133 |
+
</a>
|
| 134 |
+
</div>
|
| 135 |
+
</div>
|
| 136 |
+
|
| 137 |
+
<!-- Oracle's Outcome -->
|
| 138 |
+
<div class="relative bg-white p-6 rounded-lg art-nouveau-border card-hover" data-aos="fade-up" data-aos-delay="100">
|
| 139 |
+
<div class="absolute -top-6 left-6 rounded-full bg-plum p-3">
|
| 140 |
+
<i data-feather="eye" class="text-cream h-6 w-6"></i>
|
| 141 |
+
</div>
|
| 142 |
+
<h3 class="font-serif text-lg font-medium text-plum mb-2">Oracle's Outcome</h3>
|
| 143 |
+
<p class="mt-2 text-base text-plum">
|
| 144 |
+
Predictive practice with multiple paths and narrative consequences to reveal.
|
| 145 |
+
</p>
|
| 146 |
+
<div class="mt-4">
|
| 147 |
+
<a href="#" class="text-base font-medium text-terracotta hover:text-antique">
|
| 148 |
+
Choose a path
|
| 149 |
+
<i data-feather="arrow-right" class="inline h-4 w-4"></i>
|
| 150 |
+
</a>
|
| 151 |
+
</div>
|
| 152 |
+
</div>
|
| 153 |
+
|
| 154 |
+
<!-- Reading Replay -->
|
| 155 |
+
<div class="relative bg-white p-6 rounded-lg art-nouveau-border card-hover" data-aos="fade-up" data-aos-delay="200">
|
| 156 |
+
<div class="absolute -top-6 left-6 rounded-full bg-plum p-3">
|
| 157 |
+
<i data-feather="refresh-cw" class="text-cream h-6 w-6"></i>
|
| 158 |
+
</div>
|
| 159 |
+
<h3 class="font-serif text-lg font-medium text-plum mb-2">Reading Replay</h3>
|
| 160 |
+
<p class="mt-2 text-base text-plum">
|
| 161 |
+
Nuance practice with evolving scenarios that update over time.
|
| 162 |
+
</p>
|
| 163 |
+
<div class="mt-4">
|
| 164 |
+
<a href="#" class="text-base font-medium text-terracotta hover:text-antique">
|
| 165 |
+
Revisit readings
|
| 166 |
+
<i data-feather="arrow-right" class="inline h-4 w-4"></i>
|
| 167 |
+
</a>
|
| 168 |
+
</div>
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
|
| 175 |
+
<!-- Journal Preview -->
|
| 176 |
+
<div class="relative py-16 bg-plum overflow-hidden">
|
| 177 |
+
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 178 |
+
<div class="lg:text-center">
|
| 179 |
+
<h2 class="text-base text-antique font-semibold tracking-wide uppercase" data-aos="fade-down">Your Practice</h2>
|
| 180 |
+
<p class="mt-2 font-serif text-3xl leading-8 font-extrabold tracking-tight text-cream sm:text-4xl" data-aos="fade-down" data-aos-delay="100">
|
| 181 |
+
Master Journal
|
| 182 |
+
</p>
|
| 183 |
+
<p class="mt-4 max-w-2xl text-lg text-cream lg:mx-auto" data-aos="fade-down" data-aos-delay="200">
|
| 184 |
+
Track your progress, revisit interpretations, and watch your intuitive skills grow.
|
| 185 |
+
</p>
|
| 186 |
+
</div>
|
| 187 |
+
|
| 188 |
+
<div class="mt-12">
|
| 189 |
+
<div class="bg-cream rounded-lg shadow-xl overflow-hidden md:flex max-w-4xl mx-auto" data-aos="fade-up">
|
| 190 |
+
<div class="md:flex-shrink-0 md:w-1/3 bg-gradient-to-b from-mauve to-plum flex items-center justify-center p-8">
|
| 191 |
+
<i data-feather="book" class="text-cream h-20 w-20"></i>
|
| 192 |
+
</div>
|
| 193 |
+
<div class="p-8">
|
| 194 |
+
<div class="uppercase tracking-wide text-sm text-antique font-semibold">Featured Reading</div>
|
| 195 |
+
<h3 class="mt-2 font-serif text-xl font-medium text-plum">The Artist's Dilemma</h3>
|
| 196 |
+
<p class="mt-2 text-plum">
|
| 197 |
+
"Should I pursue the safe commission or the risky passion project?"
|
| 198 |
+
</p>
|
| 199 |
+
<div class="mt-4 flex items-center">
|
| 200 |
+
<div class="flex-shrink-0">
|
| 201 |
+
<i data-feather="calendar" class="h-5 w-5 text-terracotta"></i>
|
| 202 |
+
</div>
|
| 203 |
+
<div class="ml-3">
|
| 204 |
+
<p class="text-sm text-plum">May 15, 2023</p>
|
| 205 |
+
</div>
|
| 206 |
+
</div>
|
| 207 |
+
<div class="mt-6">
|
| 208 |
+
<a href="#" class="text-base font-medium text-terracotta hover:text-antique">
|
| 209 |
+
View in journal
|
| 210 |
+
<i data-feather="arrow-right" class="inline h-4 w-4"></i>
|
| 211 |
+
</a>
|
| 212 |
+
</div>
|
| 213 |
+
</div>
|
| 214 |
+
</div>
|
| 215 |
+
</div>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
|
| 219 |
+
<!-- Footer -->
|
| 220 |
+
<footer class="bg-white">
|
| 221 |
+
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
|
| 222 |
+
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
|
| 223 |
+
<div class="px-5 py-2">
|
| 224 |
+
<a href="#" class="text-base text-plum hover:text-terracotta">About</a>
|
| 225 |
+
</div>
|
| 226 |
+
<div class="px-5 py-2">
|
| 227 |
+
<a href="#" class="text-base text-plum hover:text-terracotta">FAQ</a>
|
| 228 |
+
</div>
|
| 229 |
+
<div class="px-5 py-2">
|
| 230 |
+
<a href="#" class="text-base text-plum hover:text-terracotta">Contact</a>
|
| 231 |
+
</div>
|
| 232 |
+
<div class="px-5 py-2">
|
| 233 |
+
<a href="#" class="text-base text-plum hover:text-terracotta">Privacy</a>
|
| 234 |
+
</div>
|
| 235 |
+
</nav>
|
| 236 |
+
<div class="mt-8 flex justify-center space-x-6">
|
| 237 |
+
<a href="#" class="text-plum hover:text-terracotta">
|
| 238 |
+
<i data-feather="instagram" class="h-6 w-6"></i>
|
| 239 |
+
</a>
|
| 240 |
+
<a href="#" class="text-plum hover:text-terracotta">
|
| 241 |
+
<i data-feather="twitter" class="h-6 w-6"></i>
|
| 242 |
+
</a>
|
| 243 |
+
<a href="#" class="text-plum hover:text-terracotta">
|
| 244 |
+
<i data-feather="facebook" class="h-6 w-6"></i>
|
| 245 |
+
</a>
|
| 246 |
+
</div>
|
| 247 |
+
<p class="mt-8 text-center text-base text-plum">
|
| 248 |
+
© 2023 The Oracle's Gym. All rights reserved.
|
| 249 |
+
</p>
|
| 250 |
+
</div>
|
| 251 |
+
</footer>
|
| 252 |
+
|
| 253 |
+
<script>AOS.init();</script>
|
| 254 |
+
<script>feather.replace();</script>
|
| 255 |
+
</body>
|
| 256 |
</html>
|
|
@@ -0,0 +1,56 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
no user accounts or auth system 1. Project Overview
|
| 2 |
+
* App Name: The Oracle's Gym
|
| 3 |
+
* Tagline: A sparring partner for your intuition.
|
| 4 |
+
* Core Purpose: To provide a sophisticated practice environment for intermediate and advanced tarot readers. The app solves the problem of not having varied, complex, and specific scenarios to practice on, and provides a unique "feedback loop" to help readers measure the relevance and depth of their interpretations.
|
| 5 |
+
* Target Audience: Experienced tarot enthusiasts who know the card meanings but want to improve their storytelling, intuitive accuracy, and ability to handle complex, real-world questions.
|
| 6 |
+
2. Vibe & Design Aesthetic
|
| 7 |
+
* Use the attached images to draw inspiration from for the ui elements design and the app’s design
|
| 8 |
+
* Core Concept: The aesthetic is "Modern Grimoire" or "Soft Witchcraft." It should feel elegant, focused, and personal—like a beautifully crafted digital journal. The design should empower the user without resorting to mystical clichés, drawing heavily from the ethereal and sophisticated mood of the provided images.
|
| 9 |
+
* Color Palette: Inspired by the deep, muted tones and soft highlights in your reference images, we'll use a palette of soft mauves, sage greens, warm creams, dusty purples, warm golden yellows, honey and amber tones , Ivory, cream, and soft pearl tones, sophisticated purples and plums, dusty roses, terracotta, and burnt oranges Accents of muted gold or antique bronze will be incorporated for subtle highlights, reminiscent of aged metallic details found in ancient texts or elegant jewelry.
|
| 10 |
+
* Typography: For headers, we'll use an elegant serif font that evokes a sense of history and wisdom, similar to the classic, refined lettering seen in the grimoire-style images. Body text will utilize a clean, highly readable sans-serif to ensure clarity and a modern feel, balancing the traditional header style with contemporary usability.
|
| 11 |
+
* Visual Elements: The UI will feature Art Nouveau-inspired borders and delicate line work, echoing the flowing, organic patterns and intricate details present in the reference art. Subtle mystical symbols (e.g., celestial bodies, stylized botanicals, abstract sigils) will be integrated sparingly as elegant icons or background textures, maintaining the ethereal illustration style from your images. Think soft, watercolor-like gradients and gentle glows for interactive elements, creating a sense of depth and magic without being overtly fantastical.
|
| 12 |
+
3. Core User Experience (UX) Flow
|
| 13 |
+
1. Onboarding: A brief, elegant walkthrough of the three practice modes. The user selects their preferred default digital deck.
|
| 14 |
+
2. Dashboard: The user lands on a clean main screen with three clear choices: "Case Files," "Oracle's Outcome," and "Reading Replay," along with access to their "Master Journal."
|
| 15 |
+
3. Mode Selection: The user chooses a mode to begin their practice session.
|
| 16 |
+
4. The Reading: Within any mode, the user is presented with a scenario. They proceed to the Reading Interface to shuffle, draw cards, and lay them out in a chosen spread.
|
| 17 |
+
5. Interpretation & Feedback: The user types (or voice records) their interpretation. They then submit it to receive their "feedback" (revealing the Hidden Insight, the scenario Outcome, or a future information update).
|
| 18 |
+
6. Journaling: The app prompts the user: "Would you like to save this reading to your Master Journal?" The complete reading is saved for future review.
|
| 19 |
+
4. Feature Breakdown
|
| 20 |
+
* 4.1. Dashboard
|
| 21 |
+
* Clean design following the specified aesthetic.
|
| 22 |
+
* Three prominent buttons for the three modes.
|
| 23 |
+
* A persistent icon/link to the "Master Journal."
|
| 24 |
+
* A "Settings" icon (for deck selection, notifications, etc.).
|
| 25 |
+
* 4.2. Mode 1: Case Files (Deep-Dive Practice)
|
| 26 |
+
* A scrollable library of cases, displayed as cards with a title and theme tags.
|
| 27 |
+
* User Flow: Select Case -> Read Scenario -> Perform Reading -> Submit Interpretation -> Tap "Reveal Hidden Insight" -> Compare interpretation to the revealed insight.
|
| 28 |
+
* 4.3. Mode 2: Oracle's Outcome (Predictive Practice)
|
| 29 |
+
* Presents a scenario with 2-4 distinct paths (A, B, C).
|
| 30 |
+
* User Flow: Read Scenario -> Perform Reading -> Select the path you advise -> Tap "Lock In & Reveal Outcome" -> The app reveals the narrative consequences of that path.
|
| 31 |
+
* 4.4. Mode 3: Reading Replay (Nuance Practice)
|
| 32 |
+
* A list of "in-progress" readings.
|
| 33 |
+
* User Flow: Select a new Replay prompt -> Perform Reading -> Submit Interpretation.
|
| 34 |
+
* Push Notification System: After 24-48 hours, a notification alerts the user to "new information" regarding their reading.
|
| 35 |
+
* The user reviews their original interpretation alongside the new context.
|
| 36 |
+
* 4.5. The Reading Interface
|
| 37 |
+
* A virtual space to draw cards.
|
| 38 |
+
* Deck Selection: A library of high-quality digital decks.
|
| 39 |
+
* Spreads: A library of classic spreads (e.g., 3-Card, Celtic Cross) and a "Freestyle" option.
|
| 40 |
+
* Tapping a card enlarges it for detailed viewing.
|
| 41 |
+
* 4.6. The Master Journal
|
| 42 |
+
* A searchable and filterable archive of all saved readings.
|
| 43 |
+
* Filter Options: By date, by mode, by theme, by cards that appeared, by keyword.
|
| 44 |
+
* Annotation Feature: Users can add notes to saved readings.
|
| 45 |
+
* 4.7. Theming & Categorization
|
| 46 |
+
* A core system for organizing all content.
|
| 47 |
+
* Functionality: Allows users to filter existing cases or direct the AI to generate new cases based on a chosen theme.
|
| 48 |
+
* Theme Categories: Career & Finance, Romance & Relationships, Family & Home, Personal Growth & Spirituality, Creativity & Projects, Health & Well-being.
|
| 49 |
+
5. Content Generation: The AI Story Architect
|
| 50 |
+
* A backend AI model will be prompted using a Master Blueprint to generate all scenarios.
|
| 51 |
+
* Blueprint Rules:
|
| 52 |
+
1. Create a Relatable Character: Define a name, desire, and problem.
|
| 53 |
+
2. Define the Stakes: Clarify what the character stands to gain or lose.
|
| 54 |
+
3. Inject a Hidden Nuance: Every case must include a secret fear or motivation that serves as the "Hidden Insight."
|
| 55 |
+
4. Ensure Tarot-Friendliness: The core question must be open-ended.
|
| 56 |
+
5. Assign Theme & Difficulty: Tag every case with a theme and a difficulty level (Beginner, Intermediate, Master).
|