Spaces:
Running
Running
| <html><head><base href="https://websim.ai/scifiscenarios" /><title>Sci-Fi Scenario Simulator - Explore Futuristic Worlds</title><style> | |
| body { | |
| font-family: 'Exo 2', sans-serif; | |
| line-height: 1.6; | |
| color: #e0e0e0; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #121212; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(50, 50, 255, 0.1) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(255, 50, 50, 0.1) 0%, transparent 20%); | |
| } | |
| h1, h2 { | |
| color: #81d4fa; | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 2.5em; | |
| margin-bottom: 20px; | |
| text-shadow: 0 0 10px rgba(129, 212, 250, 0.5); | |
| } | |
| .container { | |
| background-color: #1e1e1e; | |
| border-radius: 15px; | |
| padding: 30px; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); | |
| } | |
| select, button { | |
| width: 100%; | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| border: 1px solid #81d4fa; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| background-color: #2c2c2c; | |
| color: #e0e0e0; | |
| } | |
| button { | |
| background-color: #0277bd; | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| transition: background-color 0.3s, transform 0.1s; | |
| } | |
| button:hover { | |
| background-color: #0288d1; | |
| transform: scale(1.05); | |
| } | |
| #output, #userInput { | |
| margin-top: 20px; | |
| padding: 20px; | |
| background-color: #2c2c2c; | |
| border-left: 5px solid #81d4fa; | |
| border-radius: 5px; | |
| } | |
| #userInput { | |
| width: calc(100% - 50px); | |
| min-height: 50px; | |
| resize: vertical; | |
| } | |
| .footer { | |
| margin-top: 30px; | |
| text-align: center; | |
| font-size: 0.9em; | |
| color: #757575; | |
| } | |
| .scenario-image { | |
| width: 100%; | |
| height: 200px; | |
| background-size: cover; | |
| background-position: center; | |
| border-radius: 10px; | |
| margin-bottom: 20px; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(129, 212, 250, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(129, 212, 250, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(129, 212, 250, 0); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| </style></head><body> | |
| <div class="container"> | |
| <h1>Sci-Fi Scenario Simulator</h1> | |
| <p>Welcome to the Sci-Fi Scenario Simulator, where we explore the fascinating worlds of tomorrow and the challenges they might bring. Choose a scenario to begin your journey into the future!</p> | |
| <select id="scenarioSelect"> | |
| <option value="">Select a scenario...</option> | |
| <option value="colonization">Mars Colonization</option> | |
| <option value="ai">Artificial General Intelligence</option> | |
| <option value="time">Time Travel Paradoxes</option> | |
| <option value="aliens">First Contact with Aliens</option> | |
| <option value="virtual">Full Immersion Virtual Reality</option> | |
| </select> | |
| <button onclick="exploreScenario()">Explore Scenario</button> | |
| <div id="scenarioImage" class="scenario-image"></div> | |
| <div id="output"></div> | |
| <textarea id="userInput" placeholder="Share your thoughts or ask a question about the scenario..." rows="3"></textarea> | |
| <button onclick="discussScenario()" class="pulse">Discuss</button> | |
| </div> | |
| <div class="footer"> | |
| <p>© 2023 Sci-Fi Scenario Simulator | <a href="https://websim.ai/scifiscenarios/about">About</a> | <a href="https://websim.ai/scifiscenarios/contact">Contact</a></p> | |
| </div> | |
| <script> | |
| let currentScenario = ""; | |
| function exploreScenario() { | |
| const scenario = document.getElementById('scenarioSelect').value; | |
| const outputDiv = document.getElementById('output'); | |
| const imageDiv = document.getElementById('scenarioImage'); | |
| if (!scenario) { | |
| outputDiv.innerHTML = "<p>Please select a scenario to explore.</p>"; | |
| return; | |
| } | |
| currentScenario = scenario; | |
| outputDiv.innerHTML = "<p>Loading scenario details...</p>"; | |
| // Simulating API call and response | |
| setTimeout(() => { | |
| const scenarioDetails = getScenarioDetails(scenario); | |
| outputDiv.innerHTML = ` | |
| <h2>${scenarioDetails.title}</h2> | |
| <p>${scenarioDetails.description}</p> | |
| <h3>Key Challenges:</h3> | |
| <ul> | |
| ${scenarioDetails.challenges.map(challenge => `<li>${challenge}</li>`).join('')} | |
| </ul> | |
| <p>What are your thoughts on this scenario? Share them below!</p> | |
| `; | |
| imageDiv.style.backgroundImage = `url(${scenarioDetails.image})`; | |
| }, 1500); | |
| } | |
| function discussScenario() { | |
| const userInput = document.getElementById('userInput').value; | |
| const outputDiv = document.getElementById('output'); | |
| if (!currentScenario) { | |
| outputDiv.innerHTML += "<p>Please select and explore a scenario first.</p>"; | |
| return; | |
| } | |
| if (!userInput.trim()) { | |
| outputDiv.innerHTML += "<p>Please enter your thoughts or question about the scenario.</p>"; | |
| return; | |
| } | |
| outputDiv.innerHTML += `<p><strong>You:</strong> ${userInput}</p>`; | |
| outputDiv.innerHTML += "<p><strong>AI:</strong> Analyzing your input...</p>"; | |
| // Simulating AI response | |
| setTimeout(() => { | |
| const aiResponse = generateAIResponse(currentScenario, userInput); | |
| outputDiv.innerHTML += `<p><strong>AI:</strong> ${aiResponse}</p>`; | |
| document.getElementById('userInput').value = ''; | |
| }, 2000); | |
| } | |
| function getScenarioDetails(scenario) { | |
| // This would typically be fetched from a database or API | |
| const scenarios = { | |
| "colonization": { | |
| title: "Mars Colonization", | |
| description: "Humanity has established its first permanent settlement on Mars. A group of 1,000 colonists must navigate the challenges of living on an alien world.", | |
| challenges: [ | |
| "Maintaining a sustainable food and water supply", | |
| "Dealing with extreme radiation and harsh environmental conditions", | |
| "Psychological effects of isolation from Earth", | |
| "Developing a self-sufficient economy and governance system" | |
| ], | |
| image: "https://websim.ai/scifiscenarios/images/mars_colony.jpg" | |
| }, | |
| "ai": { | |
| title: "Artificial General Intelligence", | |
| description: "An AI system has achieved human-level intelligence across all domains. Society must grapple with the implications of this technological breakthrough.", | |
| challenges: [ | |
| "Ensuring AI alignment with human values and ethics", | |
| "Managing economic disruption due to widespread automation", | |
| "Preventing potential existential risks from superintelligent AI", | |
| "Redefining human identity and purpose in an AI-driven world" | |
| ], | |
| image: "https://websim.ai/scifiscenarios/images/agi.jpg" | |
| }, | |
| "time": { | |
| title: "Time Travel Paradoxes", | |
| description: "Scientists have invented a device that allows for controlled time travel. The world must now contend with the moral and logical implications of altering the past and future.", | |
| challenges: [ | |
| "Preventing paradoxes that could unravel the fabric of spacetime", | |
| "Ethical considerations of changing historical events", | |
| "Regulating access to time travel technology", | |
| "Dealing with potential alternate timelines and parallel universes" | |
| ], | |
| image: "https://websim.ai/scifiscenarios/images/time_travel.jpg" | |
| }, | |
| "aliens": { | |
| title: "First Contact with Aliens", | |
| description: "An alien civilization has made contact with Earth. Humanity must prepare for its first interaction with an extraterrestrial intelligence.", | |
| challenges: [ | |
| "Overcoming language and communication barriers", | |
| "Managing global reactions and potential panic", | |
| "Assessing the aliens' intentions and potential threats", | |
| "Negotiating diplomatic relations and cultural exchange" | |
| ], | |
| image: "https://websim.ai/scifiscenarios/images/alien_contact.jpg" | |
| }, | |
| "virtual": { | |
| title: "Full Immersion Virtual Reality", | |
| description: "Technology has advanced to create fully immersive virtual worlds indistinguishable from reality. Society must adapt to a world where the line between real and virtual is blurred.", | |
| challenges: [ | |
| "Addressing addiction and escapism in virtual worlds", | |
| "Legal and ethical implications of actions in virtual space", | |
| "Maintaining physical health in a predominantly virtual lifestyle", | |
| "Redefining concepts of identity, relationships, and society" | |
| ], | |
| image: "https://websim.ai/scifiscenarios/images/virtual_reality.jpg" | |
| } | |
| }; | |
| return scenarios[scenario]; | |
| } | |
| function generateAIResponse(scenario, userInput) { | |
| // This would typically involve more sophisticated natural language processing | |
| const responses = { | |
| "colonization": "That's an interesting perspective on Mars colonization. Indeed, the challenges of establishing a self-sustaining colony on another planet are immense. Have you considered how the colonists might adapt psychologically to living in such an alien environment? The isolation and constant danger could have profound effects on mental health and social dynamics.", | |
| "ai": "Your thoughts on Artificial General Intelligence raise some compelling points. The ethical implications of creating an intelligence that matches or surpasses human capabilities are indeed complex. How do you think we might ensure that such an AI remains aligned with human values as it continues to evolve and potentially surpass our understanding?", | |
| "time": "Time travel paradoxes are indeed a fascinating topic to explore. Your input touches on some of the key issues we'd face if time travel became a reality. Have you considered the potential for unintended consequences even with the best intentions? Small changes in the past could have massive ripple effects throughout history.", | |
| "aliens": "First contact with an alien civilization would certainly be a paradigm-shifting event for humanity. Your thoughts on the subject are intriguing. How do you think we might prepare for such an encounter, given that their biology, technology, and culture could be utterly unlike anything we've ever experienced?", | |
| "virtual": "Full immersion virtual reality presents a myriad of philosophical and practical challenges, as you've noted. The blurring of lines between physical and virtual existence could fundamentally change how we perceive reality. How might we maintain a healthy balance between virtual experiences and physical world interactions in such a future?" | |
| }; | |
| return responses[scenario]; | |
| } | |
| </script> | |
| </body></html> |