Spaces:
Running
Running
File size: 12,288 Bytes
ad1dcd6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 |
<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> |