Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>A Legacy in Metal: The Wacker Tarot</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto+Mono:ital,wght@0,400;1,400&display=swap" rel="stylesheet"> | |
| <style> | |
| /* --- Basic Setup & Industrial Theming --- */ | |
| :root { | |
| --bg-color: #1a1a2e; /* Deep midnight blue */ | |
| --card-bg: #e0e0e0; /* Light steel grey */ | |
| --card-border: #a9a9a9; /* Medium grey */ | |
| --primary-text: #f0f0f0; /* Off-white */ | |
| --secondary-text: #1a1a2e; /* Dark blue for contrast on cards */ | |
| --accent-color: #00aaff; /* Electric blue */ | |
| --shadow-color: rgba(0, 170, 255, 0.2); | |
| --card-back-bg: linear-gradient(145deg, #2c3e50, #1a2a3a); /* Steel gradient */ | |
| } | |
| body { | |
| font-family: 'Roboto Mono', monospace; | |
| background-color: var(--bg-color); | |
| background-image: | |
| linear-gradient(rgba(0, 170, 255, 0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 170, 255, 0.05) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| color: var(--primary-text); | |
| margin: 0; | |
| padding: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-height: 100vh; | |
| text-align: center; | |
| } | |
| h1 { | |
| font-family: 'Orbitron', sans-serif; | |
| font-weight: 700; | |
| color: var(--accent-color); | |
| text-shadow: 0 0 10px var(--shadow-color), 0 0 20px var(--shadow-color); | |
| margin-bottom: 1rem; | |
| font-size: 2.5rem; | |
| letter-spacing: 2px; | |
| } | |
| p#instructions { | |
| max-width: 600px; | |
| margin-bottom: 2rem; | |
| font-style: italic; | |
| opacity: 0.9; | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| } | |
| /* --- Main Layout --- */ | |
| #table { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 2rem; | |
| width: 100%; | |
| } | |
| #controls { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| button { | |
| font-family: 'Orbitron', sans-serif; | |
| padding: 0.8rem 1.5rem; | |
| font-size: 1rem; | |
| border: 2px solid var(--accent-color); | |
| background-color: transparent; | |
| color: var(--accent-color); | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 15px rgba(0, 170, 255, 0.2); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| button:hover, button:focus { | |
| background-color: var(--accent-color); | |
| color: var(--bg-color); | |
| box-shadow: 0 0 25px rgba(0, 170, 255, 0.5); | |
| transform: translateY(-2px); | |
| } | |
| /* --- Card Slots and Reading Area --- */ | |
| #card-slots { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 1.5rem; | |
| perspective: 1200px; | |
| width: 100%; | |
| min-height: 450px; /* Ensure space for cards */ | |
| } | |
| .card-slot { | |
| width: 300px; | |
| height: 450px; | |
| position: relative; | |
| } | |
| .card-slot .placeholder { | |
| width: 100%; | |
| height: 100%; | |
| border: 2px dashed rgba(0, 170, 255, 0.4); | |
| border-radius: 15px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| font-style: italic; | |
| opacity: 0.7; | |
| color: var(--accent-color); | |
| background-color: rgba(0, 170, 255, 0.05); | |
| } | |
| .placeholder span { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| } | |
| /* --- Card Styling & Flip Animation --- */ | |
| .card { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| transform-style: preserve-3d; | |
| transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| cursor: pointer; | |
| } | |
| .card.is-flipped { | |
| transform: rotateY(180deg); | |
| } | |
| .card-face { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| backface-visibility: hidden; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.5); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .card-back { | |
| background: var(--card-back-bg); | |
| border: 3px solid var(--accent-color); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .card-back-design { | |
| width: 80%; | |
| height: 90%; | |
| border: 2px solid var(--accent-color); | |
| border-radius: 10px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 5rem; | |
| color: var(--accent-color); | |
| opacity: 0.8; | |
| font-family: 'Orbitron', sans-serif; | |
| text-shadow: 0 0 10px var(--shadow-color); | |
| } | |
| .card-front { | |
| background-color: var(--card-bg); | |
| color: var(--secondary-text); | |
| transform: rotateY(180deg); | |
| padding: 1rem; | |
| text-align: left; | |
| overflow-y: auto; | |
| } | |
| /* --- Card Content Styling --- */ | |
| .card-header { | |
| text-align: center; | |
| border-bottom: 2px solid var(--card-border); | |
| padding-bottom: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .card-header h2 { | |
| margin: 0; | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.1rem; | |
| color: #005a8d; | |
| } | |
| .card-header .tarot-title { | |
| font-style: italic; | |
| font-size: 1rem; | |
| color: #555; | |
| margin-top: 0.25rem; | |
| } | |
| .card-body { | |
| font-size: 0.90rem; | |
| line-height: 1.5; | |
| } | |
| .card-body p { | |
| margin: 0 0 0.75rem 0; | |
| } | |
| .card-body strong { | |
| color: #005a8d; | |
| font-weight: bold; | |
| } | |
| .story, .quote { | |
| font-style: italic; | |
| background-color: rgba(44, 62, 80, 0.1); | |
| padding: 0.5rem; | |
| border-radius: 8px; | |
| border-left: 3px solid var(--accent-color); | |
| } | |
| .quote { | |
| margin-top: 1rem; | |
| border-left-color: #d35400; /* A contrasting warm color */ | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>A Legacy in Metal</h1> | |
| <p id="instructions">A tarot reading forged from a history of steel, engineering, and innovation. This spread explores the forces of Past, Present, and Future through the lens of your family's legacy. Click "Draw Cards" to begin, then click each card to reveal its meaning.</p> | |
| <div id="controls"> | |
| <button id="draw-button">Draw Cards</button> | |
| <button id="reset-button">Reset</button> | |
| </div> | |
| <div id="table"> | |
| <div id="card-slots"> | |
| <!-- Card slots will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <script> | |
| // --- Data: The Wacker Tarot Deck --- | |
| const tarot_data = [ | |
| // Major Arcana | |
| {"name":"The Black Forest Anvil","card":"0 - The Fool","classifier":"Major Arcana","theme":"German Heritage","emojis":"🌲, 🔨","story":"The journey begins with a leap of faith from the old world to the new. It represents the ancestral spirit from the Black Forest, a heritage of metalworking and strength, stepping into the unknown future of America with raw potential and foundational skill.","quote":"From the old forest, a new path is forged."}, | |
| {"name":"Robotic Welding Arm","card":"I - The Magician","classifier":"Major Arcana","theme":"Automation & G-Code","emojis":"🤖, ✨","story":"The modern master of creation. With the tools of G-code, CNC, and automation, the robotic arm manifests precise parts from raw metal. It represents the power to take a concept and, through skill and technology, make it a reality.","quote":"As above, so below. As in the code, so in the steel."}, | |
| {"name":"The Die Maker's Knowledge","card":"II - The High Priestess","classifier":"Major Arcana","theme":"Intuitive Engineering","emojis":"🤫, 📏","story":"The die maker holds the secret knowledge. Their understanding of metal's stress, flow, and memory is intuitive, a deep wisdom that cannot be fully captured in blueprints. This card represents the hidden knowledge and gut feeling essential to true mastery.","quote":"The steel speaks to those who know how to listen."}, | |
| {"name":"Mercury Marine Engines","card":"III - The Empress","classifier":"Major Arcana","theme":"Creation & Nurturing Power","emojis":"🚤, 🌊","story":"The creation of powerful marine engines represents nurturing abundance. These engines, born from stamped metal parts, give life to vessels, enabling exploration and commerce. It is the material manifestation of creative energy, birthing power and motion.","quote":"From the factory's heart, power flows to the water."}, | |
| {"name":"The Wacker Legacy","card":"IV - The Emperor","classifier":"Major Arcana","theme":"Family & Industry","emojis":"🏢, 👑","story":"The family name itself, a structure of authority and influence in steel manufacturing and civic design (Charles Wacker in Chicago). This card embodies leadership, stability, and the establishment of a lasting industrial dynasty built on solid principles.","quote":"A foundation of steel, a legacy of stone."}, | |
| {"name":"The University of Engineering","card":"V - The Hierophant","classifier":"Major Arcana","theme":"Formal Knowledge","emojis":"🎓, 📚","story":"This represents the tradition and institutions of engineering. It is the formal education, the established principles of physics, metallurgy, and mathematics that are passed down, forming the bedrock upon which innovation is built.","quote":"Learning the rules to know how to break them."}, | |
| {"name":"Magnetic Attraction","card":"VI - The Lovers","classifier":"Major Arcana","theme":"Hidden Forces & Duality","emojis":"🧲, ❤️","story":"The mysterious pull of a magnet on a coin. This represents a fundamental choice and a powerful, unseen connection. It is the duality of technology and nature, the iPhone's magnet and the coin's metal, drawn together in a perfect, surprising alignment.","quote":"Two separate bodies, one undeniable force."}, | |
| {"name":"Caterpillar Assembly Line","card":"VII - The Chariot","classifier":"Major Arcana","theme":"Massive Production","emojis":"🚜, ➡️","story":"The unstoppable force of the assembly line. By harnessing immense power and directing it with focused will, countless parts are brought together to create mighty machines. It is the victory of process and determination, moving ever forward.","quote":"Willpower and horsepower, driving progress forward."}, | |
| {"name":"The Two-Handed Sword","card":"VIII - Strength","classifier":"Major Arcana","theme":"Ancestral Power","emojis":"⚔️, 🐻","story":"The ancestral strength required to hunt bears and wolves with a two-handed sword in the Black Forest. This is not brute force, but the inner courage, resilience, and mastery over one's own fear and power, passed down through generations.","quote":"True strength is not in the weapon, but in the hands that wield it."}, | |
| {"name":"Deep Water Well Drill","card":"IX - The Hermit","classifier":"Major Arcana","theme":"Singular Invention","emojis":"💧, 💡","story":"Your father's invention, born of solitary focus and inner wisdom. It represents withdrawing from the conventional to find a deeper truth, drilling past the surface to bring forth life-giving water for those in need. A light of innovation in the darkness.","quote":"To find what is needed, one must look where no one else has."}, | |
| {"name":"The Global Economy","card":"X - Wheel of Fortune","classifier":"Major Arcana","theme":"GDP & Currencies","emojis":"🌍, चक्र","story":"The ever-turning wheel of global economies and the shifting values of currencies. From the US Dollar to the Japanese Yen, fortunes rise and fall. This card represents the cycles of commerce, destiny, and the macroeconomic forces beyond any single person's control.","quote":"Empires rise, markets fall, the wheel turns for all."}, | |
| {"name":"The Engineering Blueprint","card":"XI - Justice","classifier":"Major Arcana","theme":"Precision & Consequence","emojis":"⚖️, 📐","story":"A blueprint is a contract with reality. Every measurement has a consequence; every tolerance must be respected. This card represents the clear, impartial laws of physics and engineering, where cause and effect are absolute and precision is paramount.","quote":"Measure twice, cut once. The laws of physics are not negotiable."}, | |
| {"name":"Superconductivity","card":"XII - The Hanged Man","classifier":"Major Arcana","theme":"Quantum Perspective","emojis":"❄️, ⚛️","story":"A superconductor, by suspending all electrical resistance, offers a new perspective on energy and matter. It represents a willing sacrifice of heat to gain extraordinary ability, a state of suspension that reveals a profound, hidden reality.","quote":"Let go of resistance to achieve perfect flow."}, | |
| {"name":"The Stamping Press Strike","card":"XIII - Death","classifier":"Major Arcana","theme":"Transformation","emojis":"💥, ♻️","story":"The powerful, final strike of a stamping die. It is a moment of irreversible transformation, ending the sheet metal's old form to create something new. This represents the necessary end of one state to allow for the beginning of another.","quote":"What was once whole is now redefined."}, | |
| {"name":"The Chemical Formula","card":"XIV - Temperance","classifier":"Major Arcana","theme":"Metallurgy & Alloys","emojis":"🧪, 🔥","story":"The alchemical process of creating steel alloys. By perfectly blending iron, carbon, and other elements, a new substance with superior qualities is born. This is the card of synthesis, balance, and combining different elements to create a stronger whole.","quote":"The right mix changes everything."}, | |
| {"name":"Planned Obsolescence","card":"XV - The Devil","classifier":"Major Arcana","theme":"Material Traps","emojis":"⛓️, 📱","story":"The shadow side of manufacturing and technology. The addiction to the new, the chains of consumerism, and the materialist trap of designing products to fail. It represents the powerful allure of technology that can sometimes bind us.","quote":"What you own can end up owning you."}, | |
| {"name":"Catastrophic Failure","card":"XVI - The Tower","classifier":"Major Arcana","theme":"Stress & Breaking Point","emojis":"⚡, 🗼","story":"When a part fails under stress, the entire structure can collapse. This represents a sudden, shocking revelation of a hidden flaw. The old structures of assumption are shattered by the undeniable truth of material limits, forcing a complete rebuild.","quote":"A chain is only as strong as its weakest link."}, | |
| {"name":"The Jetson Nano AI","card":"XVII - The Star","classifier":"Major Arcana","theme":"Inspiration & Hope","emojis":"✨, 🧠","story":"The NVIDIA Jetson Nano, a small device that brings the vast potential of AI into your hands. It is a source of hope and inspiration, a guiding light for future innovations in robotics and automation, promising a connection to a universe of data.","quote":"A universe of possibility in a circuit board."}, | |
| {"name":"The Unseen Magnetic Field","card":"XVIII - The Moon","classifier":"Major Arcana","theme":"Illusion & Hidden Forces","emojis":"🌙, 🧲","story":"The invisible magnetic field that permeates space around a magnet. It represents the world of illusion, dreams, and unseen forces. We can see its effects, but not the field itself, navigating by intuition and wrestling with fears of the unknown.","quote":"Not everything that is real can be seen."}, | |
| {"name":"The Finished Corvette Engine","card":"XIX - The Sun","classifier":"Major Arcana","theme":"Triumph & Success","emojis":"☀️, 🏎️","story":"The final, assembled engine, gleaming and powerful. It is the culmination of all the parts, processes, and hard work. This card represents success, vitality, and the pure joy of seeing a complex project come to brilliant, powerful life.","quote":"The brilliant result of a thousand small successes."}, | |
| {"name":"The Patent","card":"XX - Judgment","classifier":"Major Arcana","theme":"Legacy & Recognition","emojis":"📜, 📣","story":"A patent represents a final judgment and a resurrection of an idea into a protected, recognized form. It is a calling to account for one's innovation, leading to absolution and a permanent place in the annals of invention.","quote":"An idea, judged worthy of eternity."}, | |
| {"name":"The Integrated System","card":"XXI - The World","classifier":"Major Arcana","theme":"Completion & Synthesis","emojis":"🌍, ⚙️","story":"The successful integration of all systems: mechanical, electrical, software, and human. From the global supply chain to the finished robot, the cycle is complete. It represents wholeness, accomplishment, and the mastery of one's world.","quote":"Every part in its place, the whole greater than the sum."}, | |
| // Pentacles (The Material World: Coins, Metals, Products) | |
| {"name":"A Ferromagnetic Coin","card":"Ace of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Tangible Discovery","emojis":"🪙, 🧲","story":"The moment a coin unexpectedly sticks to your phone. A new, tangible opportunity for inquiry and understanding presents itself. It's the seed of a new project, grounded in the physical properties of the world.","quote":"A small discovery can lead to a great enterprise."}, | |
| {"name":"Juggling Currencies","card":"Two of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"International Business","emojis":"💴, 💷","story":"Managing resources across different countries and currencies, like the Scottish Pound and Japanese Yen. It's a constant balancing act, adapting to the fluctuations of the material world with skill and flexibility.","quote":"Adaptability is the currency of success."}, | |
| {"name":"Chevrolet Corvette Parts","card":"Three of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Collaborative Craftsmanship","emojis":"🏎️, 🤝","story":"The teamwork required to produce high-quality engine parts for a world-class customer like Chevrolet. It represents the mastery of a craft and the collaboration needed to achieve a shared material goal.","quote":"Excellence is a team sport."}, | |
| {"name":"The Bank Vault","card":"Four of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Asset Hoarding","emojis":"🔒, 💰","story":"Controlling resources and holding onto wealth and assets. This card represents the stability that comes from material security, but also the danger of becoming too possessive or resistant to change.","quote":"Security is important, but growth requires investment."}, | |
| {"name":"Supply Chain Disruption","card":"Five of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Material Hardship","emojis":"📉, 📦","story":"A break in the supply chain, a lack of raw materials. This represents a period of material hardship and feeling left out in the cold, highlighting a vulnerability in the physical process of creation.","quote":"A missing part can halt the entire line."}, | |
| {"name": "The Consultant's Fee", "card": "Six of Pentacles", "classifier": "Pentacles - Earth - Physical", "theme": "Sharing Expertise", "emojis": "🎁, 💡", "story": "Being paid for your expertise or paying for a specialist's knowledge. It represents a flow of resources, where one person's abundance of knowledge is given to another, creating a cycle of prosperity.", "quote": "Knowledge shared is knowledge squared." }, | |
| {"name":"A Long-Term Investment","card":"Seven of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Patient Growth","emojis":"⏳, 🌱","story":"Investing in new machinery or a long R&D project. It requires patience and a period of waiting, assessing the progress of the investment before it yields its full material return.","quote":"The seeds of today's work are tomorrow's harvest."}, | |
| {"name":"Kitamura CNC Machining","card":"Eight of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Diligent Work","emojis":"⚙️, 👨🔧","story":"The repetitive, diligent work of a CNC machine, perfecting one part after another. It represents apprenticeship, dedication to a craft, and the pursuit of mastery through focused, continuous effort.","quote":"Quality is the result of a thousand perfect repetitions."}, | |
| {"name":"The Finished Product","card":"Nine of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Self-Sufficiency","emojis":"🏆, ✅","story":"A finished, high-quality product, ready for market. It represents the culmination of hard work, resulting in material independence, discipline, and the satisfaction of a job well done.","quote":"Confidence in the quality of one's own work."}, | |
| {"name":"Wacker Steel Manufacturing Co.","card":"Ten of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Enduring Legacy","emojis":"🏭, 👨👩👧👦","story":"The family business as a lasting material legacy. It represents the wealth, infrastructure, and reputation passed down through generations, providing a stable foundation for the future.","quote":"A legacy forged not just in steel, but in family."}, | |
| {"name":"The Intern","card":"Page of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Eager Student","emojis":"🧑🎓, 🔬","story":"A young engineer, eager to learn the tangible skills of the trade. They are a student of the material world, focused on a new opportunity to manifest their ideas into physical reality.","quote":"An open mind is the first tool to pick up."}, | |
| {"name":"The Quality Control Inspector","card":"Knight of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Methodical Progress","emojis":"🧐, 📋","story":"The inspector who works diligently, methodically, and reliably to ensure every part meets the standard. They are not fast, but their steady, dependable work is the bedrock of quality.","quote":"Slow and steady wins the race to perfection."}, | |
| {"name":"The Plant Manager","card":"Queen of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Nurturing Resources","emojis":"👑, 📈","story":"The manager who nurtures the resources of the factory—the people, the materials, the finances—to create a productive and stable environment. They are practical, resourceful, and focused on tangible results.","quote":"A well-run plant is a garden of productivity."}, | |
| {"name":"The CEO","card":"King of Pentacles","classifier":"Pentacles - Earth - Physical","theme":"Master of Industry","emojis":"👑, 💼","story":"The leader of the industrial empire. They are a master of the material world, using their wealth and experience to build, acquire, and provide security. Their success is tangible and their influence is far-reaching.","quote":"The true measure of a king is the prosperity of his domain."}, | |
| // Swords (The Mind: Logic, G-Code, Challenges) | |
| {"name":"The Design Insight","card":"Ace of Swords","classifier":"Swords - Air - Reason","theme":"Breakthrough Idea","emojis":"💡, 🗡️","story":"A moment of pure intellectual breakthrough. The core idea for a new design or a solution to a complex engineering problem. It cuts through the confusion with sharp, undeniable clarity.","quote":"Clarity. The sharpest tool."}, | |
| {"name":"The Trade-Off","card":"Two of Swords","classifier":"Swords - Air - Reason","theme":"Difficult Decision","emojis":"⚖️, 🤔","story":"Choosing between two design paths: cost vs. performance, speed vs. durability. It's a stalemate of the mind, where a difficult decision is being blocked, waiting for more data or a leap of faith.","quote":"Every design is a compromise."}, | |
| {"name":"The Rejection Notice","card":"Three of Swords","classifier":"Swords - Air - Reason","theme":"Painful Truth","emojis":"💔, 📄","story":"A design being rejected by a client, or a critical flaw discovered late in the process. It's a painful, piercing truth that brings sorrow but also the necessary clarity to move forward.","quote":"Failure is a painful but effective teacher."}, | |
| {"name":"System Shutdown & Reboot","card":"Four of Swords","classifier":"Swords - Air - Reason","theme":"Mental Rest","emojis":"🔌, 🧘","story":"A period of mental rest and recovery after a challenging project. It's a strategic retreat to contemplate, analyze data, and prepare the mind for the next intellectual battle.","quote":"Sometimes the best solution is to turn it off and on again."}, | |
| {"name":"A Hostile Takeover","card":"Five of Swords","classifier":"Swords - Air - Reason","theme":"Conflict & Ambition","emojis":"😒, ⚔️","story":"A conflict where winning comes at a great cost. A business strategy that alienates partners or a debate won through aggression. It's a hollow victory, where the cost of winning was too high.","quote":"Not all victories are worth the battle."}, | |
| {"name":"Moving to a New Platform","card":"Six of Swords","classifier":"Swords - Air - Reason","theme":"Logical Transition","emojis":"💻, ➡️","story":"Transitioning from an old software or hardware platform to a new one. It's a sorrowful but necessary journey away from a difficult past, moving toward a more logical and efficient future.","quote":"Leaving the legacy system behind."}, | |
| {"name":"Reverse Engineering","card":"Seven of Swords","classifier":"Swords - Air - Reason","theme":"Strategy & Deception","emojis":"🤫, ⚙️","story":"Deconstructing a competitor's product to understand its secrets. It's an act of strategy and cunning, using one's intellect to gain an advantage, often operating alone and in secret.","quote":"To build a better one, first understand theirs."}, | |
| {"name":"Proprietary Software","card":"Eight of Swords","classifier":"Swords - Air - Reason","theme":"Limiting Beliefs","emojis":"⛓️, 💾","story":"Being trapped by a proprietary system or a limiting belief about what's possible. It's a self-imposed prison of the mind, where the perceived lack of options is the true barrier.","quote":"The walls are in your mind, not in the code."}, | |
| {"name":"Pre-Launch Anxiety","card":"Nine of Swords","classifier":"Swords - Air - Reason","theme":"Mental Anguish","emojis":"😰, ⏰","story":"The dark nights of anxiety and worry before a major product launch. The mind races with everything that could go wrong. It's the mental anguish born from high stakes and the fear of failure.","quote":"The thousand little worries that haunt the eve of creation."}, | |
| {"name":"The Critical Bug","card":"Ten of Swords","classifier":"Swords - Air - Reason","theme":"Final Failure","emojis":"💀, 🐛","story":"The discovery of a fatal flaw just before shipping, leading to project ruin. It's the painful, sudden end of a line of thought, a complete failure that requires starting over from scratch.","quote":"Game over. Insert coin to try again."}, | |
| {"name":"The Tech Blogger","card":"Page of Swords","classifier":"Swords - Air - Reason","theme":"Curiosity & a Sharp Tongue","emojis":"�️, ✍️","story":"Someone new to the scene, full of questions, ideas, and a desire to communicate. They are curious and energetic, wielding words and ideas like a sword to test the world around them.","quote":"'But why?' is the most powerful question."}, | |
| {"name":"The Troubleshooter","card":"Knight of Swords","classifier":"Swords - Air - Reason","theme":"Decisive Action","emojis":"🏃, ⚡","story":"The engineer who dives headfirst into a crisis, acting with swift, decisive, and focused ambition. They cut through the noise to solve the problem, driven by logic and a need for resolution.","quote":"Analyze, act, resolve. Next problem."}, | |
| {"name":"The Veteran Engineer","card":"Queen of Swords","classifier":"Swords - Air - Reason","theme":"Incisive Wisdom","emojis":"👑, 👓","story":"An experienced engineer who has seen it all. They cut through nonsense with incisive questions and unbiased judgment, communicating complex truths with clarity and authority.","quote":"Experience is recognizing a pattern you've seen before."}, | |
| {"name":"The Patent Attorney","card":"King of Swords","classifier":"Swords - Air - Reason","theme":"Intellectual Authority","emojis":"👑, ⚖️","story":"A master of intellectual property law. They wield the power of logic, rules, and language with absolute authority. Their judgment is final, and their truth is codified in law.","quote":"It is not only what you invent, but what you can defend."}, | |
| // Wands (Passion: Robotics, Innovation, Energy) | |
| {"name":"The Spark of an Idea","card":"Ace of Wands","classifier":"Wands - Fire - Creativity","theme":"New Inspiration","emojis":"💡, 🔥","story":"The initial, raw spark of inspiration for a new robot or invention. It's a burst of pure creative energy, a call to action, and the passionate start of a new venture.","quote":"Let there be light... and a motor."}, | |
| {"name":"The Initial Prototype","card":"Two of Wands","classifier":"Wands - Fire - Creativity","theme":"Planning & Potential","emojis":"🗺️, 🤖","story":"The first prototype is built. You hold your creation in your hands, contemplating its future potential. It's a moment of bold planning, choosing a path for your passion project.","quote":"The first step from thought to thing."}, | |
| {"name":"Presenting at a Tech Conference","card":"Three of Wands","classifier":"Wands - Fire - Creativity","theme":"Anticipating the Future","emojis":"🚢, 🔭","story":"Showcasing your work to the world, anticipating the partnerships and opportunities that will come. You are looking to the horizon, waiting for your creative ship to come in.","quote":"Putting your vision out into the world."}, | |
| {"name":"The First Successful Test","card":"Four of Wands","classifier":"Wands - Fire - Creativity","theme":"Celebration & Harmony","emojis":"🎉, ✅","story":"The moment a project works for the first time. It's a time of celebration, community, and harmony, the joyous establishment of a stable foundation for future development.","quote":"It works! It actually works!"}, | |
| {"name":"Competing Standards","card":"Five of Wands","classifier":"Wands - Fire - Creativity","theme":"Creative Friction","emojis":"😖, 🔌","story":"The chaos of competing technologies and standards (e.g., Apple vs. Android). It represents the creative clashes and minor struggles that arise when different passionate ideas compete for dominance.","quote":"The beautiful chaos of innovation."}, | |
| {"name":"A Favorable Review","card":"Six of Wands","classifier":"Wands - Fire - Creativity","theme":"Public Recognition","emojis":"🏆, ⭐","story":"Receiving public recognition for your work. It's a moment of victory, where your passion and vision are celebrated, boosting your confidence and inspiring you to continue.","quote":"Your work has been noticed."}, | |
| {"name":"Defending Your Design","card":"Seven of Wands","classifier":"Wands - Fire - Creativity","theme":"Standing Your Ground","emojis":"🛡️, 🗣️","story":"Defending your innovative design choices against skeptics and critics. You are standing your ground, fighting for your creative principles with courage and conviction.","quote":"This is my vision, and I stand by it."}, | |
| {"name":"Open-Source Code Commit","card":"Eight of Wands","classifier":"Wands - Fire - Creativity","theme":"Rapid Communication","emojis":"🚀, 💾","story":"Pushing code to a global repository. It's a message of rapid, energetic progress, collaborating with a community and moving a project forward at high speed.","quote":"Code pushed, world updated."}, | |
| {"name":"Project Burnout","card":"Nine of Wands","classifier":"Wands - Fire - Creativity","theme":"Resilience","emojis":"🤕, 🔋","story":"Feeling weary and battered after a long, difficult project, but not defeated. You gather your last reserves of energy and resilience for one final push.","quote":"Wounded, but not beaten. The final push remains."}, | |
| {"name":"The Burden of Maintenance","card":"Ten of Wands","classifier":"Wands - Fire - Creativity","theme":"Responsibility","emojis":"😫, 📚","story":"Being burdened with the responsibility of maintaining a successful but demanding project. The passion that started it has become a heavy weight of obligation.","quote":"The creator is forever bound to their creation."}, | |
| {"name":"The Hobbyist Roboticist","card":"Page of Wands","classifier":"Wands - Fire - Creativity","theme":"Exploration","emojis":"🤩, 🤖","story":"Exploring a new passion for robotics, full of energy and excitement. You're ready to start a new adventure, eager to learn and experiment without fear of failure.","quote":"What does this button do?"}, | |
| {"name":"The Entrepreneur","card":"Knight of Wands","classifier":"Wands - Fire - Creativity","theme":"Passionate Pursuit","emojis":"🧗, 🔥","story":"The entrepreneur who passionately and impulsively pursues a new venture. They are charming, energetic, and charge ahead, driven by a fiery vision that can be both inspiring and reckless.","quote":"Move fast and build things."}, | |
| {"name":"The Project Lead","card":"Queen of Wands","classifier":"Wands - Fire - Creativity","theme":"Confident Leadership","emojis":"👑, 👩🚀","story":"The confident and determined leader of a creative project. They inspire their team with vibrant energy, courage, and an unwavering belief in their shared vision.","quote":"Let's make this happen."}, | |
| {"name":"The Visionary Inventor","card":"King of Wands","classifier":"Wands - Fire - Creativity","theme":"Creative Vision","emojis":"👑, 💡","story":"The master inventor who has a long-term vision and the charisma to lead others towards it. They don't just have ideas; they build entire ecosystems around their creative fire.","quote":"It's not just about one invention; it's about the future we can build."} | |
| ]; | |
| // --- DOM Elements --- | |
| const drawButton = document.getElementById('draw-button'); | |
| const resetButton = document.getElementById('reset-button'); | |
| const cardSlotsContainer = document.getElementById('card-slots'); | |
| let drawnCards = []; | |
| // --- Functions --- | |
| /** | |
| * Shuffles an array in place using the Fisher-Yates algorithm. | |
| * @param {Array} array The array to shuffle. | |
| */ | |
| function shuffle(array) { | |
| for (let i = array.length - 1; i > 0; i--) { | |
| const j = Math.floor(Math.random() * (i + 1)); | |
| [array[i], array[j]] = [array[j], array[i]]; | |
| } | |
| } | |
| /** | |
| * Creates the HTML for a single card. | |
| * @param {Object} cardData The data for the card. | |
| * @param {string} position The position in the reading (e.g., 'Past'). | |
| * @returns {HTMLElement} The card element. | |
| */ | |
| function createCardElement(cardData, position) { | |
| const card = document.createElement('div'); | |
| card.className = 'card'; | |
| card.innerHTML = ` | |
| <div class="card-face card-back"> | |
| <div class="card-back-design"> | |
| <span>W</span> | |
| </div> | |
| </div> | |
| <div class="card-face card-front"> | |
| <div class="card-header"> | |
| <h2>${cardData.name} ${cardData.emojis}</h2> | |
| <p class="tarot-title">${cardData.card}</p> | |
| </div> | |
| <div class="card-body"> | |
| <p><strong>Position:</strong> ${position}</p> | |
| <p><strong>Theme:</strong> <em>${cardData.theme}</em></p> | |
| <p class="story"><strong>Story:</strong> ${cardData.story}</p> | |
| <p class="quote"><strong>Quote:</strong> "${cardData.quote}"</p> | |
| </div> | |
| </div> | |
| `; | |
| card.addEventListener('click', () => { | |
| card.classList.toggle('is-flipped'); | |
| }); | |
| return card; | |
| } | |
| /** | |
| * Draws three cards and places them in the slots. | |
| */ | |
| function drawReading() { | |
| if (drawnCards.length > 0) return; // Prevent re-drawing | |
| shuffle(tarot_data); | |
| drawnCards = tarot_data.slice(0, 3); | |
| const positions = ['The Past', 'The Present', 'The Future']; | |
| cardSlotsContainer.innerHTML = ''; // Clear placeholders | |
| drawnCards.forEach((card, index) => { | |
| const slot = document.createElement('div'); | |
| slot.className = 'card-slot'; | |
| const cardElement = createCardElement(card, positions[index]); | |
| slot.appendChild(cardElement); | |
| cardSlotsContainer.appendChild(slot); | |
| }); | |
| } | |
| /** | |
| * Resets the reading to its initial state. | |
| */ | |
| function resetReading() { | |
| drawnCards = []; | |
| cardSlotsContainer.innerHTML = ''; | |
| setupPlaceholders(); | |
| } | |
| /** | |
| * Sets up the initial placeholder slots. | |
| */ | |
| function setupPlaceholders() { | |
| const positions = ['The Past', 'The Present', 'The Future']; | |
| cardSlotsContainer.innerHTML = ''; // Clear any existing cards | |
| for (let i = 0; i < 3; i++) { | |
| const placeholder = document.createElement('div'); | |
| placeholder.className = 'card-slot'; | |
| placeholder.innerHTML = ` | |
| <div class="placeholder"> | |
| <span>${positions[i]}</span> | |
| </div> | |
| `; | |
| cardSlotsContainer.appendChild(placeholder); | |
| } | |
| } | |
| // --- Event Listeners --- | |
| drawButton.addEventListener('click', drawReading); | |
| resetButton.addEventListener('click', resetReading); | |
| // --- Initial Setup --- | |
| window.onload = setupPlaceholders; | |
| </script> | |
| </body> | |
| </html> |