Free Online Tarot Card Reader and Meaning Interpretation Tool

This application is a clean, interactive, and privacy-focused digital tarot deck. It is designed to provide users with a calming, meditative experience for drawing cards and reading interpretations without the need for accounts or database storage.

Developer Directives & Constraints

• Architecture: Single HTML file containing all HTML, CSS, and JS.
• Storage: ABSOLUTELY NO localStorage, sessionStorage, cookies, or IndexedDB. State must be handled entirely in-memory using JavaScript variables.
• Environment: Must function within a sandboxed iframe (null origin). No alert(), prompt(), or confirm().
• UI/UX: Strictly light-mode. Use high-quality white, off-white, and soft accent colors (sage, gold, or lavender). Avoid dark mode entirely.

Key Features

• Dynamic Spread Selector: Users can choose between a 1-card (Daily Guidance), 3-card (Past/Present/Future), or 5-card (Classic Cross) spread.
• In-Memory Shuffling Algorithm: Implements a standard Fisher-Yates shuffle on a local JSON object containing the 78 tarot cards (names, upright meanings, reversed meanings, and archetypes).
• Animated Interactions: Smooth CSS transitions for card flipping, hovering, and layout changes. Cards should "slide" or "flip" into position rather than appearing instantly.
• Detailed Interpretation View: When a card is clicked, a custom, animated modal (rendered within the DOM, not a browser popup) expands to show the full card detail.
• Interactive Deck: A visual deck of cards that allows users to "draw" cards one by one or initiate a "deal all" function.

UI Layout Design

• Header: Minimalist title bar. Contains a "Reset Spread" button and a spread-type selector dropdown.
• Main Tool Area: A centered canvas (table) area where cards are laid out. The deck sits in a prominent position, with a subtle hover effect indicating clickability.
• Card Components: Individual card elements with stylized borders and clear labels. Cards should look elegant, using a serif typography aesthetic to fit the tarot theme.
• Interpretation Modal: A clean, centered overlay with a soft shadow. It displays the card name, image/icon, and structured text sections for Upright and Reversed meanings.

Color Palette

• Background: #F8FAFC (Cool gray/white).
• Card Background: #FFFFFF (Pure white) with #E2E8F0 borders.
• Primary Text: #334155 (Slate gray).
• Accent Colors: #7C3AED (Deep violet) or #D97706 (Muted gold) for active states and icons.
• Shadows: Soft, subtle dropshadows (box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)) for a premium, tactile feel.

Technical Implementation

• JSON Data: Embed the full 78-card database directly into the <script> block as a const variable.
• State Management: Use a JavaScript object to track the current spread, the state of the deck (e.g., cards_remaining), and whether a card is currently flipped.
• Responsive Design: Ensure the spread layout adapts from a single-column stack on mobile to a multi-column display on larger screens using Flexbox or CSS Grid.