Spaces:
Running
Running
| <html><head><base href="https://websim.ai/time-travel-consultant"><title>Chrono-Nexus: Time Travel Consultation Services</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes timeWarp { | |
| 0% { transform: scale(1) rotate(0deg); } | |
| 50% { transform: scale(1.2) rotate(180deg); } | |
| 100% { transform: scale(1) rotate(360deg); } | |
| } | |
| .time-warp { | |
| animation: timeWarp 10s infinite linear; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen font-sans"> | |
| <header class="bg-purple-900 py-6"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold">Chrono-Nexus</h1> | |
| <p class="mt-2 text-purple-200">Navigating the Temporal Tides</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold mb-4">Time Travel Scenario Generator</h2> | |
| <form id="scenario-form" class="space-y-4"> | |
| <div> | |
| <label for="era-select" class="block text-sm font-medium text-gray-300">Choose an Era</label> | |
| <select id="era-select" name="era-select" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-600 focus:outline-none focus:ring-purple-500 focus:border-purple-500 bg-gray-700 rounded-md"> | |
| <option value="">Select an era</option> | |
| <option value="prehistoric">Prehistoric (Before 3000 BCE)</option> | |
| <option value="ancient">Ancient (3000 BCE - 500 CE)</option> | |
| <option value="medieval">Medieval (500 - 1500 CE)</option> | |
| <option value="renaissance">Renaissance (1300 - 1700 CE)</option> | |
| <option value="industrial">Industrial Revolution (1760 - 1840)</option> | |
| <option value="modern">Modern Era (1900 - Present)</option> | |
| <option value="future">Near Future (Next 100 years)</option> | |
| <option value="far-future">Far Future (Beyond 100 years)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="purpose-select" class="block text-sm font-medium text-gray-300">Purpose of Travel</label> | |
| <select id="purpose-select" name="purpose-select" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-600 focus:outline-none focus:ring-purple-500 focus:border-purple-500 bg-gray-700 rounded-md"> | |
| <option value="">Select a purpose</option> | |
| <option value="observe">Observe historical events</option> | |
| <option value="interact">Interact with historical figures</option> | |
| <option value="change">Attempt to change history</option> | |
| <option value="research">Scientific research</option> | |
| <option value="technology">Acquire future technology</option> | |
| <option value="personal">Personal growth or adventure</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="duration-select" class="block text-sm font-medium text-gray-300">Duration of Stay</label> | |
| <select id="duration-select" name="duration-select" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-600 focus:outline-none focus:ring-purple-500 focus:border-purple-500 bg-gray-700 rounded-md"> | |
| <option value="">Select duration</option> | |
| <option value="hours">A few hours</option> | |
| <option value="day">One day</option> | |
| <option value="week">One week</option> | |
| <option value="month">One month</option> | |
| <option value="year">One year</option> | |
| <option value="decade">One decade</option> | |
| <option value="lifetime">A lifetime</option> | |
| </select> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> | |
| Generate Scenario | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="scenario-result" class="bg-gray-800 rounded-lg shadow-lg p-6 hidden"> | |
| <h2 class="text-2xl font-semibold mb-4">Your Time Travel Scenario</h2> | |
| <div id="scenario-content" class="prose prose-invert max-w-none"> | |
| <!-- Scenario content will be inserted here --> | |
| </div> | |
| <div class="mt-6 space-y-4"> | |
| <h3 class="text-xl font-semibold">Temporal Considerations:</h3> | |
| <ul id="considerations-list" class="list-disc pl-5 space-y-2"> | |
| <!-- Considerations will be inserted here --> | |
| </ul> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-xl font-semibold mb-2">Chrono-Ethical Advisory:</h3> | |
| <p id="ethical-advisory" class="italic text-purple-300"> | |
| <!-- Ethical advisory will be inserted here --> | |
| </p> | |
| </div> | |
| </div> | |
| </main> | |
| <div class="fixed bottom-4 right-4 w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center time-warp"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <script> | |
| document.getElementById('scenario-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const era = document.getElementById('era-select').value; | |
| const purpose = document.getElementById('purpose-select').value; | |
| const duration = document.getElementById('duration-select').value; | |
| if (!era || !purpose || !duration) { | |
| alert('Please select all options to generate a scenario.'); | |
| return; | |
| } | |
| generateScenario(era, purpose, duration); | |
| }); | |
| function generateScenario(era, purpose, duration) { | |
| document.getElementById('scenario-result').classList.remove('hidden'); | |
| document.getElementById('scenario-content').innerHTML = '<p>Generating your time travel scenario...</p>'; | |
| setTimeout(() => { | |
| const scenario = createScenario(era, purpose, duration); | |
| document.getElementById('scenario-content').innerHTML = scenario.content; | |
| document.getElementById('considerations-list').innerHTML = scenario.considerations.map(c => `<li>${c}</li>`).join(''); | |
| document.getElementById('ethical-advisory').textContent = scenario.ethicalAdvisory; | |
| }, 2000); | |
| } | |
| function createScenario(era, purpose, duration) { | |
| // This is a simplified scenario generation. In a real application, this would be much more complex and varied. | |
| const scenarios = { | |
| prehistoric: { | |
| content: `<p>You find yourself transported to the Pleistocene epoch, approximately 50,000 years ago. The air is crisp and clean, filled with unfamiliar scents. Vast grasslands stretch before you, dotted with herds of woolly mammoths and saber-toothed cats prowling in the distance. A small group of early humans, possibly Neanderthals or Homo sapiens, are setting up camp near a river.</p>`, | |
| considerations: [ | |
| "Language barriers with early humans", | |
| "Lack of modern amenities and potential exposure to extinct diseases", | |
| "Risk of altering the course of human evolution", | |
| "Difficulty in accurately recording observations without modern technology" | |
| ], | |
| ethicalAdvisory: "Observe only. Any interaction could dramatically alter the course of human evolution and history." | |
| }, | |
| ancient: { | |
| content: `<p>You materialize in the heart of ancient Rome during the reign of Julius Caesar, around 50 BCE. The Forum bustles with activity as senators debate, merchants hawk their wares, and citizens go about their daily lives. The air is thick with the smell of wood smoke and the sounds of Latin being spoken all around you.</p>`, | |
| considerations: [ | |
| "Need for appropriate period clothing to blend in", | |
| "Risk of introducing anachronistic ideas or technology", | |
| "Potential to witness or be involved in major historical events", | |
| "Challenges in navigating a society with different values and norms" | |
| ], | |
| ethicalAdvisory: "Minimal interaction advised. Your knowledge of future events could drastically change the course of Western civilization if revealed." | |
| }, | |
| // Add more scenarios for other eras... | |
| }; | |
| const baseScenario = scenarios[era] || { | |
| content: "<p>You step out of your time machine into an unknown era. The landscape and civilization around you are beyond your wildest imagination.</p>", | |
| considerations: [ | |
| "Unknown risks and challenges specific to this time period", | |
| "Potential for encountering unfamiliar technologies or societal structures", | |
| "Risk of inadvertently changing the course of history" | |
| ], | |
| ethicalAdvisory: "Proceed with extreme caution. The full implications of your actions in this unfamiliar time are impossible to predict." | |
| }; | |
| // Modify the scenario based on purpose and duration | |
| let modifiedContent = baseScenario.content; | |
| if (purpose === "interact") { | |
| modifiedContent += `<p>As per your mission, you seek out key figures of this era to engage in dialogue and learn from their firsthand experiences.</p>`; | |
| } else if (purpose === "change") { | |
| modifiedContent += `<p>With the weight of potential historical alterations on your shoulders, you carefully consider your next moves to influence the course of events.</p>`; | |
| } | |
| if (duration === "lifetime") { | |
| modifiedContent += `<p>Knowing that you'll spend the rest of your life in this era, you begin to contemplate how to fully integrate into this society while maintaining the integrity of the timeline.</p>`; | |
| } | |
| return { | |
| content: modifiedContent, | |
| considerations: baseScenario.considerations, | |
| ethicalAdvisory: baseScenario.ethicalAdvisory | |
| }; | |
| } | |
| </script> | |
| </body></html> |