Hugging Face's logo

Spaces:
allknowingroger
/
Madewithwebsim
Running

App Files Community
Madewithwebsim
File size: 10,073 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
 
<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>