Spaces:
Running
Running
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| ...same head as index... | |
| </head> | |
| <body> | |
| <div id="scenario-container"></div> | |
| <script> | |
| // Get id from URL | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const id = urlParams.get('id'); | |
| // Hardcoded scenarios for this example | |
| const scenarios = { | |
| "1": { | |
| title: "The Stalled Entrepreneur", | |
| theme: "Career & Finance", | |
| difficulty: "Master", | |
| description: "Lena, a passionate ceramic artist, turned her hobby into a business three years ago. Her unique, nature-inspired pieces gained a cult following online, and demand exploded. Instead of feeling elated, she feels overwhelmed and creatively blocked. She spends more time managing orders, customer service, and hiring than she does creating. She fears hiring help will dilute her unique vision and erode quality, but her health is suffering from the unsustainable workload.", | |
| hiddenInsight: "Lena's core fear isn't failure, but success. She associates growing a team with losing her personal connection to her work and her creative authenticity. The success has amplified an old narrative that 'real artists stay poor and struggle'." | |
| }, | |
| "2": { | |
| title: "The Crossroads Commitment", | |
| theme: "Romance & Relationships", | |
| difficulty: "Intermediate", | |
| description: "Mark and Sophia have been together for five years. They initially bonded over shared wanderlust and a desire to remain child-free. Sophia has been offered a dream role working remote from Bali. Mark, an architect, can only practice locally due to licensing restrictions. He loves her deeply but feels his career defines him. Sophia feels this is a once-in-a-lifetime chance to live her true purpose. Tensions are rising, and both feel a painful ultimatum approaching: career sacrifice or separation?", | |
| hiddenInsight: "The conflict has reignited Mark's deep-seated abandonment trauma from his parent's messy divorce. He interprets Sophia's ambition as a rejection of *him*, not just a geographical constraint. Sophia, adopted and fiercely independent, interprets Mark's resistance as an attempt to control her autonomy, stemming from her own fear of being 'caged' by relationships." | |
| } | |
| }; | |
| const scenario = scenarios[id]; | |
| if (scenario) { | |
| // render the scenario | |
| const container = document.getElementById('scenario-container'); | |
| container.innerHTML = ` | |
| <h1>${scenario.title}</h1> | |
| <p><strong>Theme:</strong> ${scenario.theme}</p> | |
| <p><strong>Difficulty:</strong> ${scenario.difficulty}</p> | |
| <p>${scenario.description}</p> | |
| <a href="reading_interface.html?mode=case&id=${id}">Start Reading</a> | |
| `; | |
| } else { | |
| // Scenario not found | |
| container.innerHTML = "<p>Scenario not found</p>"; | |
| } | |
| </script> | |
| This would be the approach. | |
| But note: how to show the hidden insight? In Case Files mode, after the reading, the user submits their interpretation and then taps "Reveal Hidden Insight". So that will be in reading_interface.html? We'll have to conditionally display that. | |
| Therefore, we design reading_interface.html to handle all three modes. It will: | |
| 1. Read mode and id from URL. | |
| 2. If it's case mode, then after interpretation submission, show the hidden insight. | |
| 3. If it's oracle mode, then show the paths and after selection, reveal the outcome. | |
| 4. If it's replay mode, then just save the reading and wait for the notification (which we can simulate with a timeout? But static, so we'll just save to localStorage and then the notification is simulated by a badge). | |
| Given the complexity, we'll focus on building the UI for now and the core structure. We'll simulate the data for three modes. | |
| We'll create the following files: | |
| 1. index.html | |
| 2. case_files.html | |
| 3. case_detail.html (uses JavaScript to load scenario by id, which we hardcode in the script for the page) | |
| 4. oracles_outcome.html (list of scenarios for Oracle's Outcome mode) | |
| 5. outcome_detail.html (similar to case_detail.html but for outcome scenarios) | |
| 6. reading_replay.html (list of scenarios for Reading Replay mode) | |
| 7. replay_detail.html (similar, for replay scenarios) | |
| 8. reading_interface.html (the reading interface for all modes) | |
| 9. master_journal.html (the journal) | |
| 10. data.js? or we'll hardcode in each detail page? We decide to hardcode in the detail page to keep it contained. | |
| But note: we are to return multiple files. We'll do: | |
| </body> | |
| </html> |