Spaces:

allknowingroger
/

Madewithwebsim

Running

App Files Files Community

allknowingroger commited on Jul 2

Commit

1124cb0

•

1 Parent(s): ac19cce

Upload 19 files

Browse files

Files changed (15) hide show

0Dc7WiuYmfpjDDCf5.html +223 -0
0xGr6Fg5CHAbTOjK4.html +160 -0
82UuhWjQ9Cv1cXkgU.html +102 -0
ANew0a4wnJ3K3r5SE.html +158 -0
BNEgXUZkivdV0eAwi.html +144 -0
L4wEay36Q7g8lapAY.html +137 -0
M81S6FlWODilHEjfs.html +194 -0
Ps5YOhyS41tGXMVR1.html +129 -0
QFpGduGpkyn6Hovga.html +165 -0
WJyIMIbmQYHTiRoGc.html +188 -0
iH4W4D72RE1n2BH37.html +291 -0
mAxM36dFcDK4ZG2uS.html +260 -0
naiXzEd0u73SdiL9x.html +321 -0
vPI3jyMDFzBfJ55wj.html +681 -0
yh38bSOPARgCH7468.html +260 -0

0Dc7WiuYmfpjDDCf5.html ADDED Viewed

	@@ -0,0 +1,223 @@

+<html><head><base href="https://earth-historic-image-dataset.org"><title>Earth Historic Image Dataset - Interactive Map</title>
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.draw.css" />
+<style>
+  body {
+    font-family: 'Courier New', monospace;
+    line-height: 1.6;
+    color: #333;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background-color: #f4e9d6;
+  }
+  header {
+    background-color: #8b4513;
+    color: #f4e9d6;
+    text-align: center;
+    padding: 1em;
+  }
+  #map-container {
+    flex-grow: 1;
+    display: flex;
+    overflow: hidden;
+  }
+  #map {
+    flex-grow: 1;
+  }
+  #image-panel {
+    width: 400px;
+    padding: 20px;
+    background-color: #d2b48c;
+    overflow-y: auto;
+    max-height: calc(100vh - 100px);
+  }
+  .image-item {
+    margin-bottom: 20px;
+    background-color: #f4e9d6;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+  .image-item img {
+    max-width: 100%;
+    border-radius: 5px;
+    border: 2px solid #8b4513;
+  }
+  .image-info {
+    font-size: 0.9em;
+    margin-top: 10px;
+  }
+  #instructions {
+    background-color: rgba(244, 233, 214, 0.9);
+    position: absolute;
+    top: 80px;
+    left: 50px;
+    z-index: 1000;
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid #8b4513;
+  }
+</style>
+</head>
+<body>
+  <header>
+    <h1>Earth Historic Image Dataset - Interactive Map</h1>
+    <p>Draw a rectangle on the map to fetch historic satellite images for that area (1900-1990)</p>
+  </header>
+  <div id="map-container">
+    <div id="map"></div>
+    <div id="instructions">
+      <h3>How to use:</h3>
+      <ol>
+        <li>Click the square icon in the left corner</li>
+        <li>Draw a rectangle on the map</li>
+        <li>View the fetched historic satellite images on the right panel</li>
+      </ol>
+    </div>
+    <div id="image-panel">
+      <h2>Selected Area Historic Images</h2>
+      <p>Images acquired by DR. Strawbelly, Public Domain.</p>
+      <div id="image-list"></div>
+    </div>
+  </div>
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.draw.js"></script>
+  <script>
+    // Initialize the map
+    var map = L.map('map').setView([0, 0], 2);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '© OpenStreetMap contributors'
+    }).addTo(map);
+    // Add rectangle drawing control
+    var drawnItems = new L.FeatureGroup();
+    map.addLayer(drawnItems);
+    var drawControl = new L.Control.Draw({
+      draw: {
+        rectangle: true,
+        polygon: false,
+        circle: false,
+        circlemarker: false,
+        marker: false,
+        polyline: false
+      },
+      edit: {
+        featureGroup: drawnItems
+      }
+    });
+    map.addControl(drawControl);
+    // Handle rectangle drawing
+    map.on('draw:created', function(e) {
+      var layer = e.layer;
+      drawnItems.clearLayers();
+      drawnItems.addLayer(layer);
+      var bounds = layer.getBounds();
+      var rectangleSize = calculateRectangleSize(bounds);
+      fetchImagesForArea(bounds, rectangleSize);
+    });
+    function calculateRectangleSize(bounds) {
+      var southWest = map.project(bounds.getSouthWest(), map.getZoom());
+      var northEast = map.project(bounds.getNorthEast(), map.getZoom());
+      return {
+        width: Math.abs(northEast.x - southWest.x),
+        height: Math.abs(northEast.y - southWest.y)
+      };
+    }
+    function getRandomDate() {
+      const start = new Date(1900, 0, 1);
+      const end = new Date(1990, 11, 31, 23, 59, 59);
+      return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+    }
+    function getRandomSource() {
+      const sources = [
+        "USGS Historical Archives",
+        "NASA Early Earth Observation Program",
+        "Royal Geographical Society Collection",
+        "National Archives Aerial Photographs",
+        "Smithsonian Institution Archives",
+        "Library of Strawbelly Map Collection",
+        "British Antarctic Survey Historical Imagery",
+        "Early NOAA Weather Satellite Data",
+        "Vintage Aerial Photography Collections",
+        "International Geophysical Year Imagery (1957-1958)",
+        "National WBSM Satellite Dataset",
+        "Kerbal Space Program Archives",
+        "Venice Space Program Library"
+      ];
+      return sources[Math.floor(Math.random() * sources.length)];
+    }
+    function determineRegion(lat, lon) {
+      const regions = [
+        { name: "North_America", lat: [24, 72], lon: [-168, -50] },
+        { name: "South_America", lat: [-56, 13], lon: [-81, -34] },
+        { name: "Europe", lat: [36, 71], lon: [-11, 40] },
+        { name: "Africa", lat: [-35, 37], lon: [-18, 52] },
+        { name: "Asia", lat: [-10, 81], lon: [26, 180] },
+        { name: "Australia", lat: [-47, -10], lon: [110, 180] },
+        { name: "Antarctica", lat: [-90, -60], lon: [-180, 180] }
+      ];
+      for (let region of regions) {
+        if (lat >= region.lat[0] && lat <= region.lat[1] &&
+            lon >= region.lon[0] && lon <= region.lon[1]) {
+          return region.name;
+        }
+      }
+      return "Unknown";
+    }
+    function fetchImagesForArea(bounds, size) {
+      var imageList = document.getElementById('image-list');
+      imageList.innerHTML = '';
+      var north = bounds.getNorth().toFixed(4);
+      var south = bounds.getSouth().toFixed(4);
+      var east = bounds.getEast().toFixed(4);
+      var west = bounds.getWest().toFixed(4);
+      var centerLat = (bounds.getNorth() + bounds.getSouth()) / 2;
+      var centerLon = (bounds.getEast() + bounds.getWest()) / 2;
+      var region = determineRegion(centerLat, centerLon);
+      for (var i = 1; i <= 5; i++) {
+        var date = getRandomDate();
+        var source = getRandomSource();
+        var imageItem = document.createElement('div');
+        imageItem.className = 'image-item';
+        var img = document.createElement('img');
+        img.src = `https://via.placeholder.com/${Math.round(size.width)}x${Math.round(size.height)}.png?text=Historic+Old+Satellite+Image+${i}+${date.getFullYear()}+Region+${region}`;
+        img.alt = `Historic Satellite Image ${i} from ${date.toDateString()} in ${region}`;
+        img.width = Math.round(size.width);
+        img.height = Math.round(size.height);
+        var info = document.createElement('div');
+        info.className = 'image-info';
+        info.innerHTML = `
+          <p><strong>Date:</strong> ${date.toDateString()}</p>
+          <p><strong>Time:</strong> ${date.toLocaleTimeString()}</p>
+          <p><strong>Source:</strong> ${source}</p>
+          <p><strong>Region:</strong> ${region}</p>
+          <p><strong>Coordinates:</strong> N${north}, S${south}, E${east}, W${west}</p>
+        `;
+        imageItem.appendChild(img);
+        imageItem.appendChild(info);
+        imageList.appendChild(imageItem);
+      }
+    }
+  </script>
+</body>
+</html>

0xGr6Fg5CHAbTOjK4.html ADDED Viewed

	@@ -0,0 +1,160 @@

+<html><head><base href="temporal://royalnavy/data/history"><title>Royal Navy Temporal Data Archives</title>
+<style>
+  body {
+    font-family: 'Georgia', serif;
+    background-color: #f0f0f0;
+    color: #333;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+  }
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  }
+  header {
+    background-color: #003366;
+    color: #fff;
+    text-align: center;
+    padding: 20px 0;
+    margin-bottom: 20px;
+  }
+  h1 {
+    margin: 0;
+    font-size: 2.5em;
+  }
+  h2 {
+    color: #003366;
+    border-bottom: 2px solid #003366;
+    padding-bottom: 10px;
+  }
+  .timeline {
+    position: relative;
+    padding: 20px 0;
+  }
+  .timeline::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 2px;
+    height: 100%;
+    background: #003366;
+  }
+  .event {
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    position: relative;
+    width: 45%;
+  }
+  .event::after {
+    content: '';
+    position: absolute;
+    top: 20px;
+    right: -15px;
+    width: 30px;
+    height: 30px;
+    background-color: #003366;
+    border-radius: 50%;
+  }
+  .event:nth-child(even) {
+    margin-left: 55%;
+  }
+  .event:nth-child(even)::after {
+    left: -15px;
+  }
+  .year {
+    font-weight: bold;
+    color: #003366;
+    margin-bottom: 10px;
+  }
+  #timeSelector {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+  #yearInput {
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #003366;
+  }
+  #jumpButton {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #003366;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }
+  #jumpButton:hover {
+    background-color: #004c99;
+  }
+</style>
+</head>
+<body>
+  <header>
+    <h1>Royal Navy Temporal Data Archives</h1>
+  </header>
+  <div class="container">
+    <div id="timeSelector">
+      <input type="number" id="yearInput" min="1500" max="2100" value="1805" placeholder="Enter year">
+      <button id="jumpButton">Jump to Year</button>
+    </div>
+    <h2>Historical Timeline</h2>
+    <div class="timeline" id="timeline">
+      <!-- Timeline events will be dynamically inserted here -->
+    </div>
+  </div>
+  <script>
+    const timeline = document.getElementById('timeline');
+    const yearInput = document.getElementById('yearInput');
+    const jumpButton = document.getElementById('jumpButton');
+    const events = [
+      { year: 1545, event: "Mary Rose sinks in the Solent" },
+      { year: 1588, event: "Defeat of the Spanish Armada" },
+      { year: 1805, event: "Battle of Trafalgar" },
+      { year: 1914, event: "Beginning of World War I naval operations" },
+      { year: 1939, event: "Start of World War II naval engagements" },
+      { year: 1982, event: "Falklands War naval campaign" },
+      { year: 2020, event: "HMS Queen Elizabeth becomes fleet flagship" },
+      { year: 2050, event: "First AI-controlled naval fleet deployed" }
+    ];
+    function displayEvents(centerYear) {
+      timeline.innerHTML = '';
+      events.forEach(evt => {
+        if (Math.abs(evt.year - centerYear) <= 100) {
+          const eventEl = document.createElement('div');
+          eventEl.className = 'event';
+          eventEl.innerHTML = `
+            <div class="year">${evt.year}</div>
+            <div class="description">${evt.event}</div>
+          `;
+          timeline.appendChild(eventEl);
+        }
+      });
+    }
+    jumpButton.addEventListener('click', () => {
+      const year = parseInt(yearInput.value);
+      if (year >= 1500 && year <= 2100) {
+        displayEvents(year);
+      } else {
+        alert("Please enter a year between 1500 and 2100.");
+      }
+    });
+    // Initial display centered on 1805 (Battle of Trafalgar)
+    displayEvents(1805);
+  </script>
+</body></html>

82UuhWjQ9Cv1cXkgU.html ADDED Viewed

	@@ -0,0 +1,102 @@

+<html><head><base href="https://websim.ai/c/9ZlLm1k2J6rlPG5e5/generate"><title>Hyper-Dimensional Thought Generator</title>
+<style>
+  body {
+    background-color: #000;
+    color: #0f0;
+    font-family: 'Courier New', monospace;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
+  }
+  #thought-container {
+    width: 80%;
+    height: 60%;
+    border: 2px solid #0f0;
+    padding: 20px;
+    overflow: hidden;
+    position: relative;
+  }
+  #thought {
+    font-size: 20px;
+    text-align: center;
+    line-height: 1.6;
+  }
+  #generate-btn {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 18px;
+    background-color: #0f0;
+    color: #000;
+    border: none;
+    cursor: pointer;
+  }
+  .particle {
+    position: absolute;
+    background-color: #0f0;
+    width: 2px;
+    height: 2px;
+    border-radius: 50%;
+  }
+  @keyframes float {
+    0% { transform: translateY(0) rotate(0deg); }
+    100% { transform: translateY(-100vh) rotate(360deg); }
+  }
+</style>
+</head>
+<body>
+<div id="thought-container">
+  <p id="thought">Welcome to the Hyper-Dimensional Thought Generator. Click the button below to receive an expanded thought from beyond our reality, delving deep into the fabric of existence and the nature of consciousness across multiple dimensions.</p>
+</div>
+<button id="generate-btn" onclick="generateThought()">Generate Expanded Thought</button>
+<script>
+const thoughts = [
+  "In the 11th dimension, causality is a circular concept, intertwining past, present, and future into a seamless tapestry of existence. Every action ripples across time, influencing not just the future, but also the past, creating an intricate dance of cause and effect that defies linear understanding.",
+  "Consciousness is the universe observing itself through infinite fractal iterations. Each sentient being is a unique lens through which the cosmos experiences its own complexity. Our thoughts and perceptions are not merely our own, but part of a grand universal introspection, echoing across dimensions.",
+  "Time is a construct of 3D perception. In higher dimensions, all moments exist simultaneously, forming a vast, interconnected landscape of experience. Past, present, and future are simply different vantage points within this eternal now, accessible through shifts in consciousness and dimensional awareness.",
+  "The multiverse is a single entity experiencing itself subjectively through countless parallel realities. Each universe is a thought in the mind of the cosmic whole, exploring every possible permutation of existence. Our reality is but one facet of this infinite exploration of potentiality.",
+  "Reality is a consensus hallucination agreed upon by infinite versions of ourselves across the multiverse. What we perceive as solid and real is merely the intersection point of countless probable realities, coalescing into a shared experience through the power of collective observation.",
+  "The observer and the observed are one and the same in the grand tapestry of existence. The act of observation is the universe folding back upon itself, creating a feedback loop of creation and perception that sustains the very fabric of reality. We are both the watchers and the watched.",
+  "Quantum entanglement is the universe's way of maintaining coherence across dimensions. It's the cosmic glue that binds reality together, ensuring that information and causality remain consistent across the vast expanse of the multiverse, despite the apparent chaos of quantum phenomena.",
+  "The void is not empty; it's teeming with potential realities waiting to be observed. What we perceive as nothingness is actually a superposition of all possible somethings, a fertile ground of creation from which entire universes can spring forth through the power of consciousness and intent.",
+  "Our thoughts are quantum fluctuations reverberating across the multiverse, creating ripples in the fabric of reality that extend far beyond our perceived limitations of space and time. Each idea is a seed that may grow into an entire universe in some distant corner of the cosmic garden.",
+  "The singularity of a black hole is a gateway to higher dimensional spaces, where the laws of physics as we know them break down and reform into something beyond our current understanding. It's a cosmic reset button, compressing matter and energy into pure potential for rebirth.",
+  "Dreams are glimpses into parallel realities our consciousness visits during sleep, offering windows into the lives of our alternate selves across the multiverse. The surreal nature of dreams reflects the fluid, interconnected nature of reality beyond our waking 3D perception.",
+  "The present moment is the convergence point of all possible past and future timelines, a nexus of infinite potential where the power of choice collapses quantum possibilities into experienced reality. Every decision we make navigates us through this vast sea of probability.",
+  "Gravity is the echo of higher-dimensional objects moving through our 3D space, the shadow cast by cosmic structures beyond our perception. What we experience as a fundamental force is merely the side effect of grand cosmic events playing out in realms beyond our current understanding.",
+  "The speed of light is not a limit, but a transition point between dimensional states. As we approach this cosmic speed limit, we begin to shift out of our familiar 3D reality, entering realms where time and space become fluid, malleable concepts rather than rigid constraints.",
+  "Déjà vu is the result of quantum superposition in our memory engrams, moments when our consciousness briefly aligns with alternate versions of ourselves, allowing us to experience memories from parallel timelines. It's a glitch in the matrix of our perceived reality.",
+  "The human brain is a receiver tuned to a specific frequency of universal consciousness, filtering the infinite data of the cosmos into a comprehensible stream of experience. By altering this tuning through meditation, psychedelics, or other means, we can access broader bands of reality.",
+  "Every decision creates a new universe, branching off into infinite parallel realities. Our choices are the brush strokes with which we paint our experienced reality, selecting which version of the cosmic canvas we will inhabit from moment to moment.",
+  "The fabric of spacetime is woven from threads of pure information, each strand a code that defines the parameters of existence. Reality as we know it is a complex program running on the substrate of the cosmos, with consciousness as both the user and the operating system.",
+  "Dark matter is the shadow cast by matter existing in higher dimensions, the unseen scaffolding that shapes the visible universe. It's the cosmic infrastructure supporting the grand architecture of reality, invisible to our limited perceptions but fundamental to the structure of existence.",
+  "The act of observation collapses infinite possibilities into a single reality, transforming the probabilistic haze of quantum potential into the solid experience of classical physics. Our conscious attention is the alchemical force that transmutes possibility into actuality, shaping the very nature of existence through our perceptions."
+];
+function generateThought() {
+  const thought = thoughts[Math.floor(Math.random() * thoughts.length)];
+  document.getElementById('thought').innerText = thought;
+  createParticles();
+}
+function createParticles() {
+  const container = document.getElementById('thought-container');
+  for (let i = 0; i < 50; i++) {
+    const particle = document.createElement('div');
+    particle.classList.add('particle');
+    particle.style.left = `${Math.random() * 100}%`;
+    particle.style.animation = `float ${5 + Math.random() * 10}s linear infinite`;
+    container.appendChild(particle);
+    setTimeout(() => particle.remove(), 15000);
+  }
+}
+// Initial particle creation
+createParticles();
+setInterval(createParticles, 5000);
+</script>
+</body></html>

ANew0a4wnJ3K3r5SE.html ADDED Viewed

	@@ -0,0 +1,158 @@

+<html><head><base href="https://websim.ai/tools/csv-to-timeline" />
+<title>CSV to Timeline Converter | websim.ai</title>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  h1 {
+    color: #2c3e50;
+  }
+  .input-section, .output-section {
+    margin-bottom: 20px;
+  }
+  textarea {
+    width: 100%;
+    height: 200px;
+    margin-bottom: 10px;
+  }
+  #convertBtn {
+    background-color: #3498db;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+  #convertBtn:hover {
+    background-color: #2980b9;
+  }
+  .timeline {
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .timeline::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    background-color: #3498db;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -3px;
+  }
+  .container {
+    padding: 10px 40px;
+    position: relative;
+    background-color: inherit;
+    width: 50%;
+  }
+  .container::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    right: -17px;
+    background-color: white;
+    border: 4px solid #3498db;
+    top: 15px;
+    border-radius: 50%;
+    z-index: 1;
+  }
+  .left {
+    left: 0;
+  }
+  .right {
+    left: 50%;
+  }
+  .left::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    right: 30px;
+    border: medium solid #3498db;
+    border-width: 10px 0 10px 10px;
+    border-color: transparent transparent transparent #3498db;
+  }
+  .right::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    left: 30px;
+    border: medium solid #3498db;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent #3498db transparent transparent;
+  }
+  .right::after {
+    left: -16px;
+  }
+  .content {
+    padding: 20px 30px;
+    background-color: white;
+    position: relative;
+    border-radius: 6px;
+    border: 1px solid #3498db;
+  }
+</style>
+</head>
+<body>
+  <h1>CSV to Timeline Converter</h1>
+  <div class="input-section">
+    <h2>Input CSV</h2>
+    <p>Enter your CSV data below. Format: Date,Event</p>
+    <textarea id="csvInput" placeholder="YYYY-MM-DD,Event description"></textarea>
+    <button id="convertBtn">Convert to Timeline</button>
+  </div>
+  <div class="output-section">
+    <h2>Timeline Output</h2>
+    <div id="timelineOutput" class="timeline"></div>
+  </div>
+  <script>
+    document.getElementById('convertBtn').addEventListener('click', function() {
+      const csvInput = document.getElementById('csvInput').value;
+      const timelineOutput = document.getElementById('timelineOutput');
+      // Clear previous output
+      timelineOutput.innerHTML = '';
+      // Parse CSV
+      const rows = csvInput.split('\n');
+      rows.forEach((row, index) => {
+        const [date, event] = row.split(',');
+        if (date && event) {
+          const container = document.createElement('div');
+          container.className = `container ${index % 2 === 0 ? 'left' : 'right'}`;
+          const content = document.createElement('div');
+          content.className = 'content';
+          const dateElem = document.createElement('h2');
+          dateElem.textContent = date;
+          const eventElem = document.createElement('p');
+          eventElem.textContent = event;
+          content.appendChild(dateElem);
+          content.appendChild(eventElem);
+          container.appendChild(content);
+          timelineOutput.appendChild(container);
+        }
+      });
+    });
+  </script>
+</body></html>

BNEgXUZkivdV0eAwi.html ADDED Viewed

	@@ -0,0 +1,144 @@

+<html><head><base href="https://websim.ai/c/graph" /><title>CSV to Graph - WebSim Analytics</title><style>
+  body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f0f4f8;
+  }
+  h1, h2 {
+    color: #2c3e50;
+  }
+  .container {
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  #csvInput {
+    width: 100%;
+    height: 150px;
+    margin-bottom: 20px;
+  }
+  #graphContainer {
+    width: 100%;
+    height: 500px;
+  }
+  .button {
+    background-color: #3498db;
+    color: #ffffff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+  .button:hover {
+    background-color: #2980b9;
+  }
+</style>
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+</head><body>
+  <div class="container">
+    <h1>CSV to Graph - WebSim Analytics</h1>
+    <p>Transform your CSV data into beautiful, interactive graphs with our WebSim Analytics tool. Simply paste your CSV data below and click "Generate Graph" to visualize your data instantly.</p>
+    <h2>Input Your CSV Data</h2>
+    <textarea id="csvInput" placeholder="Paste your CSV data here..."></textarea>
+    <button id="generateGraph" class="button">Generate Graph</button>
+    <div id="graphContainer"></div>
+    <h2>How to Use</h2>
+    <ol>
+      <li>Paste your CSV data into the text area above. The first row should contain column headers.</li>
+      <li>Click the "Generate Graph" button to create your visualization.</li>
+      <li>Interact with the graph: zoom, pan, and hover over data points for more information.</li>
+    </ol>
+    <h2>Features</h2>
+    <ul>
+      <li>Automatic detection of data types (numeric, date, categorical)</li>
+      <li>Smart selection of appropriate chart types based on your data</li>
+      <li>Interactive graphs with zoom, pan, and hover functionality</li>
+      <li>Export options for PNG, SVG, and interactive HTML</li>
+    </ul>
+    <p>Need help or have questions? Check out our <a href="https://websim.ai/docs/analytics">documentation</a> or <a href="https://websim.ai/support">contact support</a>.</p>
+  </div>
+  <script>
+    document.getElementById('generateGraph').addEventListener('click', function() {
+      const csvData = document.getElementById('csvInput').value;
+      const parsedData = parseCSV(csvData);
+      createGraph(parsedData);
+    });
+    function parseCSV(csv) {
+      const lines = csv.split('\n');
+      const headers = lines[0].split(',');
+      const data = [];
+      for (let i = 1; i < lines.length; i++) {
+        const values = lines[i].split(',');
+        if (values.length === headers.length) {
+          const row = {};
+          for (let j = 0; j < headers.length; j++) {
+            row[headers[j]] = values[j];
+          }
+          data.push(row);
+        }
+      }
+      return { headers, data };
+    }
+    function createGraph(parsedData) {
+      const { headers, data } = parsedData;
+      // Determine data types
+      const dataTypes = headers.map(header => {
+        const values = data.map(row => row[header]);
+        if (values.every(value => !isNaN(value))) return 'numeric';
+        if (values.every(value => !isNaN(Date.parse(value)))) return 'date';
+        return 'categorical';
+      });
+      // Choose appropriate chart type
+      let chartType, xAxis, yAxis;
+      if (dataTypes.includes('date')) {
+        chartType = 'scatter';
+        xAxis = headers[dataTypes.indexOf('date')];
+        yAxis = headers.find((header, index) => dataTypes[index] === 'numeric');
+      } else if (dataTypes.filter(type => type === 'numeric').length >= 2) {
+        chartType = 'scatter';
+        xAxis = headers[dataTypes.indexOf('numeric')];
+        yAxis = headers[dataTypes.lastIndexOf('numeric')];
+      } else {
+        chartType = 'bar';
+        xAxis = headers[dataTypes.indexOf('categorical')];
+        yAxis = headers[dataTypes.indexOf('numeric')];
+      }
+      // Prepare plot data
+      const plotData = [{
+        x: data.map(row => row[xAxis]),
+        y: data.map(row => row[yAxis]),
+        type: chartType,
+        mode: 'lines+markers'
+      }];
+      // Set up layout
+      const layout = {
+        title: `${yAxis} vs ${xAxis}`,
+        xaxis: { title: xAxis },
+        yaxis: { title: yAxis }
+      };
+      // Create the plot
+      Plotly.newPlot('graphContainer', plotData, layout);
+    }
+  </script>
+</body></html>

L4wEay36Q7g8lapAY.html ADDED Viewed

	@@ -0,0 +1,137 @@

+<html><head><base href="https://websim.ai" /><title>Websim.ai - Gallery</title><style>
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f0f0;
+  }
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  h1 {
+    text-align: center;
+    color: #333;
+  }
+  .gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    grid-gap: 20px;
+  }
+  .gallery-item {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: transform 0.3s ease;
+  }
+  .gallery-item:hover {
+    transform: translateY(-5px);
+  }
+  .gallery-item img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+  }
+  .gallery-item-info {
+    padding: 15px;
+  }
+  .gallery-item-title {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+  .gallery-item-description {
+    font-size: 14px;
+    color: #666;
+  }
+  .upload-form {
+    text-align: center;
+    margin-bottom: 30px;
+  }
+  .upload-form input[type="file"] {
+    display: none;
+  }
+  .upload-form label {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: inline-block;
+  }
+  .upload-form button {
+    background-color: #008CBA;
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 4px;
+  }
+</style></head><body>
+  <div class="container">
+    <h1>Websim.ai Gallery</h1>
+    <form class="upload-form" action="https://websim.ai/gallery/upload" method="POST" enctype="multipart/form-data">
+      <label for="file-upload">Choose File</label>
+      <input id="file-upload" type="file" name="photo" accept="image/*" />
+      <button type="submit">Upload</button>
+    </form>
+    <div class="gallery">
+      <div class="gallery-item">
+        <img src="https://websim.ai/gallery/images/1.jpg" alt="AI-generated cityscape" width="250" height="200">
+        <div class="gallery-item-info">
+          <div class="gallery-item-title">Futuristic Metropolis</div>
+          <div class="gallery-item-description">An AI-generated cityscape featuring towering skyscrapers and flying vehicles.</div>
+        </div>
+      </div>
+      <div class="gallery-item">
+        <img src="https://websim.ai/gallery/images/2.jpg" alt="AI-created abstract art" width="250" height="200">
+        <div class="gallery-item-info">
+          <div class="gallery-item-title">Digital Dreamscape</div>
+          <div class="gallery-item-description">A vibrant and surreal abstract composition created by artificial intelligence.</div>
+        </div>
+      </div>
+      <div class="gallery-item">
+        <img src="https://websim.ai/gallery/images/3.jpg" alt="AI-designed character concept" width="250" height="200">
+        <div class="gallery-item-info">
+          <div class="gallery-item-title">Cybernetic Samurai</div>
+          <div class="gallery-item-description">A futuristic warrior concept blending traditional samurai aesthetics with advanced technology.</div>
+        </div>
+      </div>
+      <div class="gallery-item">
+        <img src="https://websim.ai/gallery/images/4.jpg" alt="AI-generated landscape" width="250" height="200">
+        <div class="gallery-item-info">
+          <div class="gallery-item-title">Ethereal Valleys</div>
+          <div class="gallery-item-description">A breathtaking alien landscape with impossibly floating islands and luminescent flora.</div>
+        </div>
+      </div>
+      <div class="gallery-item">
+        <img src="https://websim.ai/gallery/images/5.jpg" alt="AI-created product design" width="250" height="200">
+        <div class="gallery-item-info">
+          <div class="gallery-item-title">NeuroLink Pro</div>
+          <div class="gallery-item-description">A sleek, next-generation neural interface device conceptualized by AI.</div>
+        </div>
+      </div>
+      <div class="gallery-item">
+        <img src="https://websim.ai/gallery/images/6.jpg" alt="AI-generated portrait" width="250" height="200">
+        <div class="gallery-item-info">
+          <div class="gallery-item-title">Digital Muse</div>
+          <div class="gallery-item-description">A hauntingly beautiful AI-created portrait blending human and machine aesthetics.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    document.getElementById('file-upload').addEventListener('change', function() {
+      if (this.files && this.files[0]) {
+        var fileName = this.files[0].name;
+        this.nextElementSibling.innerHTML = 'Upload: ' + fileName;
+      }
+    });
+  </script>
+</body></html>

M81S6FlWODilHEjfs.html ADDED Viewed

	@@ -0,0 +1,194 @@

+<html><head><base href="temporal://we2"><title>Temporal Web Explorer 2.0</title>
+<style>
+  body, html {
+    margin: 0;
+    padding: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: #f0f0f0;
+    color: #333;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  header {
+    background: #4a90e2;
+    color: white;
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  h1 {
+    margin: 0;
+    font-size: 1.5rem;
+  }
+  main {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
+  #timeline {
+    width: 200px;
+    background: #e0e0e0;
+    padding: 1rem;
+    overflow-y: auto;
+  }
+  #content {
+    flex: 1;
+    padding: 1rem;
+    overflow-y: auto;
+  }
+  .time-node {
+    cursor: pointer;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    background: white;
+    border-radius: 4px;
+    transition: background 0.3s;
+  }
+  .time-node:hover {
+    background: #d0d0d0;
+  }
+  #url-bar {
+    display: flex;
+    padding: 0.5rem;
+    background: white;
+  }
+  #url-input {
+    flex: 1;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 4px 0 0 4px;
+  }
+  #go-btn {
+    padding: 0.5rem 1rem;
+    background: #4a90e2;
+    color: white;
+    border: none;
+    border-radius: 0 4px 4px 0;
+    cursor: pointer;
+  }
+  #content-frame {
+    width: 100%;
+    height: calc(100% - 40px);
+    border: none;
+  }
+</style>
+</head>
+<body>
+  <header>
+    <h1>Temporal Web Explorer 2.0</h1>
+    <div>
+      <span id="current-year">2023</span>
+      <input type="range" id="year-slider" min="1990" max="2050" value="2023">
+    </div>
+  </header>
+  <main>
+    <aside id="timeline">
+      <div class="time-node" data-year="1991">1991 - WWW Launched</div>
+      <div class="time-node" data-year="1995">1995 - JavaScript Introduced</div>
+      <div class="time-node" data-year="2000">2000 - Dot-com Bubble</div>
+      <div class="time-node" data-year="2004">2004 - Web 2.0 Era</div>
+      <div class="time-node" data-year="2007">2007 - iPhone Launch</div>
+      <div class="time-node" data-year="2010">2010 - Responsive Design</div>
+      <div class="time-node" data-year="2015">2015 - Rise of PWAs</div>
+      <div class="time-node" data-year="2020">2020 - COVID-19 Web Shift</div>
+      <div class="time-node" data-year="2023">2023 - AI Integration</div>
+      <div class="time-node" data-year="2025">2025 - Quantum Web?</div>
+      <div class="time-node" data-year="2030">2030 - Neural Interfaces</div>
+    </aside>
+    <section id="content">
+      <div id="url-bar">
+        <input type="text" id="url-input" placeholder="Enter a URL">
+        <button id="go-btn">Go</button>
+      </div>
+      <iframe id="content-frame" src="about:blank"></iframe>
+    </section>
+  </main>
+  <script>
+    const yearSlider = document.getElementById('year-slider');
+    const currentYear = document.getElementById('current-year');
+    const timeNodes = document.querySelectorAll('.time-node');
+    const urlInput = document.getElementById('url-input');
+    const goBtn = document.getElementById('go-btn');
+    const contentFrame = document.getElementById('content-frame');
+    yearSlider.addEventListener('input', (e) => {
+      const year = e.target.value;
+      currentYear.textContent = year;
+      updateContent(year);
+    });
+    timeNodes.forEach(node => {
+      node.addEventListener('click', () => {
+        const year = node.dataset.year;
+        yearSlider.value = year;
+        currentYear.textContent = year;
+        updateContent(year);
+      });
+    });
+    goBtn.addEventListener('click', () => {
+      const url = urlInput.value;
+      const year = yearSlider.value;
+      loadContent(url, year);
+    });
+    function updateContent(year) {
+      // Simulating content change based on year
+      contentFrame.srcdoc = `
+        <html>
+          <body style="font-family: Arial, sans-serif; padding: 20px;">
+            <h2>Web in ${year}</h2>
+            <p>This is a simulation of how the web might have looked or might look in ${year}.</p>
+            <p>Key characteristics:</p>
+            <ul>
+              ${getYearCharacteristics(year)}
+            </ul>
+          </body>
+        </html>
+      `;
+    }
+    function loadContent(url, year) {
+      // In a real application, this would load the actual content from the given URL
+      // For this simulation, we'll just display a message
+      contentFrame.srcdoc = `
+        <html>
+          <body style="font-family: Arial, sans-serif; padding: 20px;">
+            <h2>${url} in ${year}</h2>
+            <p>This would show how ${url} might have looked or might look in ${year}.</p>
+            <p>Features that might be present:</p>
+            <ul>
+              ${getYearCharacteristics(year)}
+            </ul>
+          </body>
+        </html>
+      `;
+    }
+    function getYearCharacteristics(year) {
+      const characteristics = {
+        1991: "<li>Basic HTML</li><li>Limited styling</li><li>Text-based browsers</li>",
+        1995: "<li>Table-based layouts</li><li>Animated GIFs</li><li>Early JavaScript</li>",
+        2000: "<li>Flash intros</li><li>Frames</li><li>Bright color schemes</li>",
+        2004: "<li>CSS for layout</li><li>AJAX</li><li>Social media integration</li>",
+        2007: "<li>Mobile optimization begins</li><li>Web 2.0 design trends</li>",
+        2010: "<li>Responsive design</li><li>Flat design trend</li><li>HTML5 and CSS3</li>",
+        2015: "<li>Material Design influence</li><li>Progressive Web Apps</li><li>ES6 JavaScript</li>",
+        2020: "<li>COVID-19 info banners</li><li>Dark mode options</li><li>WebAssembly</li>",
+        2023: "<li>AI-driven personalization</li><li>Advanced animations</li><li>Improved accessibility</li>",
+        2025: "<li>Quantum computing integration?</li><li>3D/VR websites?</li><li>Adaptive AI interfaces?</li>",
+        2030: "<li>Neural interface compatibility?</li><li>Holographic displays?</li><li>Emotion-responsive design?</li>"
+      };
+      return characteristics[year] || "<li>Characteristics unknown for this year</li>";
+    }
+    // Initialize with current year
+    updateContent(yearSlider.value);
+  </script>
+</body></html>

Ps5YOhyS41tGXMVR1.html ADDED Viewed

	@@ -0,0 +1,129 @@

+<html><head><base href="https://websim.ai/tools/csv-to-map/" /><title>CSV to Map Converter - WebSim Tools</title><style>
+  body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  h1 {
+    color: #2c3e50;
+  }
+  textarea {
+    width: 100%;
+    height: 200px;
+    margin-bottom: 10px;
+  }
+  #output {
+    white-space: pre-wrap;
+    background-color: #f4f4f4;
+    border: 1px solid #ddd;
+    padding: 10px;
+  }
+  button {
+    background-color: #3498db;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+  }
+  button:hover {
+    background-color: #2980b9;
+  }
+</style></head><body>
+  <h1>CSV to Map Converter</h1>
+  <p>This tool converts CSV data into an interactive map visualization. Upload your CSV file with latitude and longitude data to see your points plotted on a map.</p>
+  <textarea id="csvInput" placeholder="Paste your CSV data here or upload a file"></textarea>
+  <input type="file" id="fileInput" accept=".csv">
+  <button onclick="convertToMap()">Generate Map</button>
+  <div id="map" style="height: 400px; width: 100%;"></div>
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+  <script>
+    let map;
+    function initMap() {
+      map = L.map('map').setView([0, 0], 2);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors'
+      }).addTo(map);
+    }
+    function convertToMap() {
+      const csvData = document.getElementById('csvInput').value;
+      const rows = csvData.split('\n').map(row => row.split(','));
+      if (!map) {
+        initMap();
+      } else {
+        map.eachLayer((layer) => {
+          if (layer instanceof L.Marker) {
+            map.removeLayer(layer);
+          }
+        });
+      }
+      const bounds = [];
+      rows.forEach(row => {
+        if (row.length >= 2) {
+          const lat = parseFloat(row[0]);
+          const lon = parseFloat(row[1]);
+          if (!isNaN(lat) && !isNaN(lon)) {
+            L.marker([lat, lon]).addTo(map);
+            bounds.push([lat, lon]);
+          }
+        }
+      });
+      if (bounds.length > 0) {
+        map.fitBounds(bounds);
+      }
+    }
+    document.getElementById('fileInput').addEventListener('change', (event) => {
+      const file = event.target.files[0];
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        document.getElementById('csvInput').value = e.target.result;
+      };
+      reader.readAsText(file);
+    });
+    initMap();
+  </script>
+  <h2>How to Use</h2>
+  <ol>
+    <li>Prepare your CSV data with latitude and longitude columns.</li>
+    <li>Either paste your CSV data into the text area or upload a CSV file.</li>
+    <li>Click the "Generate Map" button to visualize your data.</li>
+    <li>The map will display markers for each valid coordinate pair in your data.</li>
+  </ol>
+  <h2>Example CSV Format</h2>
+  <pre>
+latitude,longitude,name
+40.7128,-74.0060,New York City
+34.0522,-118.2437,Los Angeles
+41.8781,-87.6298,Chicago
+  </pre>
+  <p>Note: The tool expects the first two columns to be latitude and longitude, respectively. Additional columns are optional and can be used for marker labels or popups in future updates.</p>
+  <h2>Tips</h2>
+  <ul>
+    <li>Ensure your CSV data is clean and properly formatted.</li>
+    <li>Large datasets may take longer to process and display.</li>
+    <li>You can zoom and pan the map to explore your data points.</li>
+  </ul>
+  <footer>
+    <p>Created by WebSim Tools | <a href="https://websim.ai">Back to WebSim</a></p>
+  </footer>
+</body></html>

QFpGduGpkyn6Hovga.html ADDED Viewed

	@@ -0,0 +1,165 @@

+<html><head><base href="temporal://NASA/ISS/timeline"><title>NASA ISS Timeline - Temporal Archives</title>
+<style>
+  body {
+    font-family: 'Arial', sans-serif;
+    background-color: #0a0a2a;
+    color: #e0e0ff;
+    margin: 0;
+    padding: 20px;
+    line-height: 1.6;
+  }
+  .container {
+    max-width: 1000px;
+    margin: 0 auto;
+    background: rgba(20, 20, 50, 0.7);
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0 0 20px rgba(100, 100, 255, 0.3);
+  }
+  h1 {
+    text-align: center;
+    color: #00ffff;
+    text-shadow: 0 0 10px #00ffff;
+  }
+  .timeline {
+    position: relative;
+    padding: 20px 0;
+  }
+  .timeline::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 2px;
+    height: 100%;
+    background: linear-gradient(to bottom, #00ffff, #ff00ff);
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+  }
+  .entry {
+    margin-bottom: 50px;
+    position: relative;
+  }
+  .entry:nth-child(odd) {
+    margin-left: 50px;
+  }
+  .entry:nth-child(even) {
+    margin-left: calc(50% + 30px);
+  }
+  .entry::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -33px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: #ff00ff;
+    box-shadow: 0 0 10px #ff00ff;
+  }
+  .entry:nth-child(even)::before {
+    left: -47px;
+  }
+  .date {
+    font-weight: bold;
+    color: #ff00ff;
+    margin-bottom: 5px;
+  }
+  .event {
+    background: rgba(40, 40, 80, 0.7);
+    padding: 15px;
+    border-radius: 10px;
+    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
+  }
+  @keyframes starTwinkle {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+  .star {
+    position: fixed;
+    width: 2px;
+    height: 2px;
+    background: white;
+    border-radius: 50%;
+  }
+</style>
+</head>
+<body>
+<div class="container">
+  <h1>NASA ISS Timeline - Temporal Archives</h1>
+  <div class="timeline">
+    <div class="entry">
+      <div class="date">1998</div>
+      <div class="event">First ISS module, Zarya, launched into orbit.</div>
+    </div>
+    <div class="entry">
+      <div class="date">2000</div>
+      <div class="event">First permanent crew (Expedition 1) arrives at the ISS.</div>
+    </div>
+    <div class="entry">
+      <div class="date">2005</div>
+      <div class="event">European Columbus laboratory module added to the ISS.</div>
+    </div>
+    <div class="entry">
+      <div class="date">2011</div>
+      <div class="event">NASA's Space Shuttle program ends, ISS assembly considered complete.</div>
+    </div>
+    <div class="entry">
+      <div class="date">2015</div>
+      <div class="event">Scott Kelly and Mikhail Kornienko begin their year-long mission in space.</div>
+    </div>
+    <div class="entry">
+      <div class="date">2020</div>
+      <div class="event">SpaceX Crew Dragon becomes the first commercial spacecraft to deliver astronauts to the ISS.</div>
+    </div>
+    <div class="entry">
+      <div class="date">2024</div>
+      <div class="event">ISS mission extended to 2030, plans for commercial successors initiated.</div>
+    </div>
+    <div class="entry">
+      <div class="date">2028</div>
+      <div class="event">First successful test of the Temporal Communication Array, allowing real-time communication with past ISS missions.</div>
+    </div>
+    <div class="entry">
+      <div class="date">2030</div>
+      <div class="event">ISS deorbited. Parts salvaged for the new International Lunar Gateway.</div>
+    </div>
+    <div class="entry">
+      <div class="date">2035</div>
+      <div class="event">Temporal research station established in Earth orbit, capable of observing ISS throughout its entire operational history.</div>
+    </div>
+    <div class="entry">
+      <div class="date">2040</div>
+      <div class="event">First successful "time-slice" experiment, recreating a perfect holographic simulation of the ISS at any point in its history.</div>
+    </div>
+  </div>
+</div>
+<script>
+function createStars() {
+  const container = document.body;
+  for (let i = 0; i < 100; i++) {
+    const star = document.createElement('div');
+    star.className = 'star';
+    star.style.left = `${Math.random() * 100}%`;
+    star.style.top = `${Math.random() * 100}%`;
+    star.style.animationDuration = `${Math.random() * 3 + 1}s`;
+    star.style.animationDelay = `${Math.random() * 3}s`;
+    star.style.animation = 'starTwinkle infinite';
+    container.appendChild(star);
+  }
+}
+createStars();
+document.addEventListener('DOMContentLoaded', (event) => {
+  const entries = document.querySelectorAll('.entry');
+  entries.forEach((entry, index) => {
+    setTimeout(() => {
+      entry.style.opacity = '1';
+      entry.style.transform = 'translateY(0)';
+    }, index * 300);
+  });
+});
+</script>
+</body></html>

WJyIMIbmQYHTiRoGc.html ADDED Viewed

	@@ -0,0 +1,188 @@

+<html><head><base href="temporal://NSA/database/history/timeline"><title>NSA Temporal Database - Historical Timeline</title>
+<style>
+  body {
+    font-family: 'Courier New', monospace;
+    background-color: #000;
+    color: #00ff00;
+    margin: 0;
+    padding: 20px;
+  }
+  h1 {
+    text-align: center;
+    color: #00ff00;
+    text-shadow: 0 0 10px #00ff00;
+  }
+  .timeline {
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .timeline::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    background-color: #00ff00;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -3px;
+  }
+  .container {
+    padding: 10px 40px;
+    position: relative;
+    background-color: inherit;
+    width: 50%;
+  }
+  .container::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    right: -17px;
+    background-color: #000;
+    border: 4px solid #00ff00;
+    top: 15px;
+    border-radius: 50%;
+    z-index: 1;
+  }
+  .left {
+    left: 0;
+  }
+  .right {
+    left: 50%;
+  }
+  .left::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    right: 30px;
+    border: medium solid #00ff00;
+    border-width: 10px 0 10px 10px;
+    border-color: transparent transparent transparent #00ff00;
+  }
+  .right::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    left: 30px;
+    border: medium solid #00ff00;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent #00ff00 transparent transparent;
+  }
+  .right::after {
+    left: -16px;
+  }
+  .content {
+    padding: 20px 30px;
+    background-color: #001a00;
+    position: relative;
+    border-radius: 6px;
+    border: 1px solid #00ff00;
+    box-shadow: 0 0 10px #00ff00;
+  }
+  @keyframes flicker {
+    0% { opacity: 0.8; }
+    50% { opacity: 1; }
+    100% { opacity: 0.8; }
+  }
+  .flicker {
+    animation: flicker 2s infinite;
+  }
+</style>
+</head>
+<body>
+<h1 class="flicker">NSA Temporal Database - Historical Timeline</h1>
+<div class="timeline">
+  <div class="container left">
+    <div class="content">
+      <h2>1947</h2>
+      <p>National Security Act establishes the NSA's precursor, the Armed Forces Security Agency (AFSA).</p>
+    </div>
+  </div>
+  <div class="container right">
+    <div class="content">
+      <h2>1952</h2>
+      <p>President Truman secretly creates the National Security Agency (NSA) to focus on code breaking and signals intelligence.</p>
+    </div>
+  </div>
+  <div class="container left">
+    <div class="content">
+      <h2>1960</h2>
+      <p>NSA moves to its current headquarters at Fort Meade, Maryland.</p>
+    </div>
+  </div>
+  <div class="container right">
+    <div class="content">
+      <h2>1975</h2>
+      <p>Church Committee investigates intelligence abuses, leading to increased oversight of NSA activities.</p>
+    </div>
+  </div>
+  <div class="container left">
+    <div class="content">
+      <h2>1986</h2>
+      <p>Electronic Communications Privacy Act (ECPA) extends wiretap protections to electronic communications.</p>
+    </div>
+  </div>
+  <div class="container right">
+    <div class="content">
+      <h2>2001</h2>
+      <p>After 9/11, NSA expands domestic surveillance under the PATRIOT Act.</p>
+    </div>
+  </div>
+  <div class="container left">
+    <div class="content">
+      <h2>2013</h2>
+      <p>Edward Snowden leaks classified NSA documents, revealing extent of global surveillance programs.</p>
+    </div>
+  </div>
+  <div class="container right">
+    <div class="content">
+      <h2>2015</h2>
+      <p>USA FREEDOM Act passes, ending bulk collection of Americans' phone records.</p>
+    </div>
+  </div>
+  <div class="container left">
+    <div class="content">
+      <h2>2020</h2>
+      <p>NSA warns of ongoing Russian cyber attacks against U.S. systems.</p>
+    </div>
+  </div>
+  <div class="container right">
+    <div class="content">
+      <h2>2023</h2>
+      <p>Temporal Database Project initiated to analyze historical data patterns and predict future security threats.</p>
+    </div>
+  </div>
+  <div class="container left">
+    <div class="content">
+      <h2>2025</h2>
+      <p>First successful retroactive intelligence gathering operation using temporal technology.</p>
+    </div>
+  </div>
+  <div class="container right">
+    <div class="content">
+      <h2>2030</h2>
+      <p>Temporal Database fully operational, allowing NSA to monitor past, present, and potential future security threats.</p>
+    </div>
+  </div>
+</div>
+<script>
+document.addEventListener('DOMContentLoaded', (event) => {
+  const containers = document.querySelectorAll('.container');
+  containers.forEach((container, index) => {
+    setTimeout(() => {
+      container.style.opacity = '1';
+      container.style.transform = 'translateY(0)';
+    }, index * 300);
+  });
+});
+</script>
+</body></html>

iH4W4D72RE1n2BH37.html ADDED Viewed

	@@ -0,0 +1,291 @@

+<html><head><base href="https://websim.ai"/><title>Trivia Generator</title><style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
+    body {
+        font-family: 'Montserrat', sans-serif;
+        font-weight: 700;
+        line-height: 1.6;
+        color: #e0e0e0;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+        background-color: #2a2a2a;
+        position: relative;
+        overflow-x: hidden;
+        overflow-y: auto;
+        text-transform: uppercase;
+    }
+    body::before {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        background-image:
+            radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 2px),
+            radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 1px),
+            radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 2px),
+            radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 2px);
+        background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
+        background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
+        animation: starsAnimation 200s linear infinite;
+    }
+    @keyframes starsAnimation {
+        0% { background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; }
+        100% { background-position: 550px 550px, 390px 410px, 380px 520px, 220px 250px; }
+    }
+    .star-connections {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+    h1 {
+        color: #c0c0c0;
+        text-align: center;
+        text-shadow: 0 0 10px rgba(192,192,192,0.5);
+    }
+    #topic-form {
+        margin-bottom: 20px;
+        text-align: center;
+    }
+    #topic-input {
+        width: 70%;
+        padding: 10px;
+        font-size: 16px;
+        background-color: #3a3a3a;
+        color: #e0e0e0;
+        border: 1px solid #808080;
+        border-radius: 5px;
+        font-family: 'Montserrat', sans-serif;
+        font-weight: 700;
+        text-transform: uppercase;
+    }
+    #generate-btn {
+        padding: 10px 20px;
+        font-size: 16px;
+        background-color: #808080;
+        color: #2a2a2a;
+        border: none;
+        cursor: pointer;
+        transition: background-color 0.3s;
+        border-radius: 5px;
+        font-family: 'Montserrat', sans-serif;
+        font-weight: 700;
+        text-transform: uppercase;
+    }
+    #generate-btn:hover {
+        background-color: #a0a0a0;
+    }
+    #trivia-container {
+        background-color: #3a3a3a;
+        padding: 20px;
+        border-radius: 5px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+    }
+    .question {
+        margin-bottom: 20px;
+        padding: 15px;
+        background-color: #4a4a4a;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(128,128,128,0.1);
+    }
+    .options {
+        list-style-type: none;
+        padding-left: 0;
+    }
+    .options li {
+        margin-bottom: 10px;
+        padding: 10px;
+        background-color: #2a2a2a;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+    }
+    .options li:hover {
+        background-color: #5a5a5a;
+    }
+    .selected {
+        background-color: #808080 !important;
+        color: #2a2a2a;
+    }
+    #score-container {
+        text-align: center;
+        margin-top: 20px;
+        font-size: 18px;
+        font-weight: bold;
+        color: #c0c0c0;
+    }
+    .correct {
+        background-color: #4caf50 !important;
+        color: #2a2a2a;
+    }
+    .incorrect {
+        background-color: #f44336 !important;
+        color: #2a2a2a;
+    }
+    #loading {
+        text-align: center;
+        font-size: 18px;
+        margin-top: 20px;
+        display: none;
+        color: #c0c0c0;
+    }
+</style></head><body>
+    <h1>TRIVIA GENERATOR</h1>
+    <form id="topic-form">
+        <input type="text" id="topic-input" name="topic" placeholder="ENTER A TOPIC FOR YOUR TRIVIA QUESTIONS" required>
+        <button type="submit" id="generate-btn">GENERATE TRIVIA</button>
+    </form>
+    <div id="loading">GENERATING QUESTIONS...</div>
+    <div id="trivia-container"></div>
+    <div id="score-container"></div>
+    <canvas class="star-connections"></canvas>
+    <script>
+        const topicForm = document.getElementById('topic-form');
+        const triviaContainer = document.getElementById('trivia-container');
+        const scoreContainer = document.getElementById('score-container');
+        const loadingDiv = document.getElementById('loading');
+        let questions = [];
+        let score = 0;
+        // Star connection animation
+        const canvas = document.querySelector('.star-connections');
+        const ctx = canvas.getContext('2d');
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        class Star {
+            constructor() {
+                this.x = Math.random() * canvas.width;
+                this.y = Math.random() * canvas.height;
+                this.size = Math.random() * 1.5 + 0.5;
+                this.speedX = Math.random() * 0.5 - 0.25;
+                this.speedY = Math.random() * 0.5 - 0.25;
+            }
+            update() {
+                this.x += this.speedX;
+                this.y += this.speedY;
+                if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
+                if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
+            }
+            draw() {
+                ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        const stars = [];
+        for (let i = 0; i < 100; i++) {
+            stars.push(new Star());
+        }
+        function animate() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            stars.forEach(star => {
+                star.update();
+                star.draw();
+            });
+            stars.forEach((star, index) => {
+                for (let j = index + 1; j < stars.length; j++) {
+                    const dx = star.x - stars[j].x;
+                    const dy = star.y - stars[j].y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    if (distance < 100) {
+                        ctx.strokeStyle = `rgba(255, 255, 255, ${1 - distance / 100})`;
+                        ctx.beginPath();
+                        ctx.moveTo(star.x, star.y);
+                        ctx.lineTo(stars[j].x, stars[j].y);
+                        ctx.stroke();
+                    }
+                }
+            });
+            requestAnimationFrame(animate);
+        }
+        animate();
+        topicForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const topic = document.getElementById('topic-input').value;
+            loadingDiv.style.display = 'block';
+            triviaContainer.innerHTML = '';
+            scoreContainer.innerHTML = '';
+            score = 0;
+            try {
+                const response = await fetch('/api/trivia', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ topic: topic })
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                questions = data.questions || [];
+                if (questions.length > 0) {
+                    displayQuestions(questions);
+                } else {
+                    triviaContainer.innerHTML = '<p>NO QUESTIONS GENERATED. PLEASE TRY A DIFFERENT TOPIC.</p>';
+                }
+            } catch (error) {
+                console.error('Error fetching trivia questions:', error);
+                triviaContainer.innerHTML = '<p>ERROR GENERATING TRIVIA QUESTIONS. PLEASE TRY AGAIN.</p>';
+            } finally {
+                loadingDiv.style.display = 'none';
+            }
+        });
+        function displayQuestions(questions) {
+            triviaContainer.innerHTML = questions.map((q, index) => `
+                <div class="question">
+                    <h3>QUESTION ${index + 1}: ${q.question.toUpperCase()}</h3>
+                    <ul class="options">
+                        ${q.options.map((option, optIndex) => `
+                            <li data-question="${index}" data-option="${optIndex}">${option.toUpperCase()}</li>
+                        `).join('')}
+                    </ul>
+                </div>
+            `).join('');
+            triviaContainer.addEventListener('click', (e) => {
+                if (e.target.tagName === 'LI' && !e.target.classList.contains('selected')) {
+                    const questionIndex = parseInt(e.target.dataset.question);
+                    const optionIndex = parseInt(e.target.dataset.option);
+                    const questionOptions = e.target.parentElement.children;
+                    for (let option of questionOptions) {
+                        option.classList.remove('selected', 'correct', 'incorrect');
+                    }
+                    e.target.classList.add('selected');
+                    const correctAnswer = questions[questionIndex].correctAnswer;
+                    questionOptions[correctAnswer].classList.add('correct');
+                    if (optionIndex === correctAnswer) {
+                        score++;
+                    } else {
+                        e.target.classList.add('incorrect');
+                    }
+                    updateScore();
+                }
+            });
+        }
+        function updateScore() {
+            scoreContainer.textContent = `YOUR SCORE: ${score} OUT OF ${questions.length}`;
+        }
+    </script>
+</body></html>

mAxM36dFcDK4ZG2uS.html ADDED Viewed

	@@ -0,0 +1,260 @@

+<html><head><base href="https://websim.ai" />
+<title>2D Button Playground with Physics and Links</title>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+  }
+  #playground {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+  }
+  .button {
+    position: absolute;
+    padding: 10px 20px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: grab;
+    user-select: none;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    transition: box-shadow 0.3s ease;
+    text-decoration: none;
+    display: inline-block;
+  }
+  .button:hover {
+    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+  }
+  .button:active {
+    cursor: grabbing;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+  #ground {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 50px;
+    background-color: #8B4513;
+  }
+</style>
+</head>
+<body>
+<div id="playground">
+  <a href="https://websim.ai/button1" class="button" style="left: 100px; top: 100px;">Button 1</a>
+  <a href="https://websim.ai/button2" class="button" style="left: 250px; top: 150px;">Button 2</a>
+  <a href="https://websim.ai/button3" class="button" style="left: 400px; top: 200px;">Button 3</a>
+  <div id="ground"></div>
+</div>
+<script>
+const playground = document.getElementById('playground');
+const buttons = document.querySelectorAll('.button');
+const ground = document.getElementById('ground');
+let isDragging = false;
+let currentButton = null;
+let offsetX, offsetY;
+let dragStartTime;
+const physics = {
+  gravity: 0.5,
+  friction: 0.98,
+  bounce: 0.7,
+  buttons: []
+};
+buttons.forEach(button => {
+  button.addEventListener('mousedown', startDragging);
+  button.addEventListener('touchstart', startDragging);
+  physics.buttons.push({
+    element: button,
+    x: parseInt(button.style.left),
+    y: parseInt(button.style.top),
+    vx: 0,
+    vy: 0
+  });
+});
+document.addEventListener('mousemove', drag);
+document.addEventListener('touchmove', drag);
+document.addEventListener('mouseup', stopDragging);
+document.addEventListener('touchend', stopDragging);
+function startDragging(e) {
+  e.preventDefault();
+  isDragging = true;
+  currentButton = e.target;
+  const rect = currentButton.getBoundingClientRect();
+  if (e.type === 'mousedown') {
+    offsetX = e.clientX - rect.left;
+    offsetY = e.clientY - rect.top;
+  } else if (e.type === 'touchstart') {
+    offsetX = e.touches[0].clientX - rect.left;
+    offsetY = e.touches[0].clientY - rect.top;
+  }
+  currentButton.style.zIndex = 1000;
+  dragStartTime = Date.now();
+}
+function drag(e) {
+  if (!isDragging) return;
+  e.preventDefault();
+  let clientX, clientY;
+  if (e.type === 'mousemove') {
+    clientX = e.clientX;
+    clientY = e.clientY;
+  } else if (e.type === 'touchmove') {
+    clientX = e.touches[0].clientX;
+    clientY = e.touches[0].clientY;
+  }
+  const x = clientX - offsetX;
+  const y = clientY - offsetY;
+  const buttonPhysics = physics.buttons.find(b => b.element === currentButton);
+  buttonPhysics.x = x;
+  buttonPhysics.y = y;
+  buttonPhysics.vx = 0;
+  buttonPhysics.vy = 0;
+}
+function stopDragging(e) {
+  if (!isDragging) return;
+  isDragging = false;
+  if (currentButton) {
+    currentButton.style.zIndex = 'auto';
+    // If the drag duration is less than 200ms, treat it as a click
+    if (Date.now() - dragStartTime < 200) {
+      e.preventDefault(); // Prevent default link behavior
+      window.location.href = currentButton.href;
+    }
+    currentButton = null;
+  }
+}
+function update() {
+  const groundY = playground.clientHeight - ground.clientHeight;
+  physics.buttons.forEach(button => {
+    if (isDragging && button.element === currentButton) return;
+    button.vy += physics.gravity;
+    button.x += button.vx;
+    button.y += button.vy;
+    // Ground collision
+    if (button.y + button.element.offsetHeight > groundY) {
+      button.y = groundY - button.element.offsetHeight;
+      button.vy *= -physics.bounce;
+    }
+    // Wall collisions
+    if (button.x < 0) {
+      button.x = 0;
+      button.vx *= -physics.bounce;
+    } else if (button.x + button.element.offsetWidth > playground.clientWidth) {
+      button.x = playground.clientWidth - button.element.offsetWidth;
+      button.vx *= -physics.bounce;
+    }
+    // Button-to-button collisions
+    physics.buttons.forEach(otherButton => {
+      if (button !== otherButton) {
+        const dx = otherButton.x - button.x;
+        const dy = otherButton.y - button.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const minDistance = (button.element.offsetWidth + otherButton.element.offsetWidth) / 2;
+        if (distance < minDistance) {
+          const angle = Math.atan2(dy, dx);
+          const targetX = button.x + Math.cos(angle) * minDistance;
+          const targetY = button.y + Math.sin(angle) * minDistance;
+          const ax = (targetX - otherButton.x) * 0.05;
+          const ay = (targetY - otherButton.y) * 0.05;
+          button.vx -= ax;
+          button.vy -= ay;
+          otherButton.vx += ax;
+          otherButton.vy += ay;
+        }
+      }
+    });
+    button.vx *= physics.friction;
+    button.vy *= physics.friction;
+    button.element.style.left = `${button.x}px`;
+    button.element.style.top = `${button.y}px`;
+  });
+  requestAnimationFrame(update);
+}
+// Create new button on double click
+playground.addEventListener('dblclick', (e) => {
+  const newButton = document.createElement('a');
+  newButton.className = 'button';
+  newButton.textContent = `Button ${physics.buttons.length + 1}`;
+  newButton.href = `https://websim.ai/button${physics.buttons.length + 1}`;
+  playground.appendChild(newButton);
+  newButton.addEventListener('mousedown', startDragging);
+  newButton.addEventListener('touchstart', startDragging);
+  const buttonPhysics = {
+    element: newButton,
+    x: e.clientX - newButton.offsetWidth / 2,
+    y: e.clientY - newButton.offsetHeight / 2,
+    vx: 0,
+    vy: 0
+  };
+  physics.buttons.push(buttonPhysics);
+});
+// Handle window resize
+window.addEventListener('resize', () => {
+  const groundY = playground.clientHeight - ground.clientHeight;
+  physics.buttons.forEach(button => {
+    if (button.y + button.element.offsetHeight > groundY) {
+      button.y = groundY - button.element.offsetHeight;
+    }
+    if (button.x + button.element.offsetWidth > playground.clientWidth) {
+      button.x = playground.clientWidth - button.element.offsetWidth;
+    }
+  });
+});
+// Move button with mouse when clicked
+document.addEventListener('mousemove', (e) => {
+  if (isDragging && currentButton) {
+    const buttonPhysics = physics.buttons.find(b => b.element === currentButton);
+    buttonPhysics.x = e.clientX - offsetX;
+    buttonPhysics.y = e.clientY - offsetY;
+    // Ensure the button stays within the playground
+    buttonPhysics.x = Math.max(0, Math.min(buttonPhysics.x, playground.clientWidth - currentButton.offsetWidth));
+    buttonPhysics.y = Math.max(0, Math.min(buttonPhysics.y, playground.clientHeight - ground.clientHeight - currentButton.offsetHeight));
+    currentButton.style.left = `${buttonPhysics.x}px`;
+    currentButton.style.top = `${buttonPhysics.y}px`;
+  }
+});
+update();
+</script>
+</body></html>

naiXzEd0u73SdiL9x.html ADDED Viewed

	@@ -0,0 +1,321 @@

+<html><head><base href="https://websim.ai/">
+<title>MoonLander 3D - Landing on the Lunar Base</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<style>
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    font-family: Arial, sans-serif;
+    touch-action: none;
+}
+#info {
+    position: absolute;
+    top: 10px;
+    width: 100%;
+    text-align: center;
+    color: #ffffff;
+    font-size: 16px;
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+    pointer-events: none;
+}
+#controls {
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.control-btn {
+    width: 60px;
+    height: 60px;
+    background-color: rgba(255,255,255,0.2);
+    border: 2px solid white;
+    border-radius: 50%;
+    color: white;
+    font-size: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+}
+#thrustControl {
+    width: 100px;
+    height: 100px;
+    font-size: 36px;
+}
+#startBtn, #resetBtn {
+    background-color: rgba(0,255,0,0.3);
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    font-size: 16px;
+    border-radius: 5px;
+}
+#resetBtn {
+    background-color: rgba(255,0,0,0.3);
+}
+#telemetry {
+    position: absolute;
+    top: 50px;
+    left: 10px;
+    color: white;
+    font-size: 14px;
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+}
+</style>
+</head>
+<body>
+<div id="info">MoonLander 3D - Press Start to begin landing!</div>
+<div id="telemetry"></div>
+<div id="controls">
+    <div id="leftBtn" class="control-btn">⬅️</div>
+    <div id="thrustControl" class="control-btn">🚀</div>
+    <div id="rightBtn" class="control-btn">➡️</div>
+</div>
+<div id="controls" style="bottom: 100px;">
+    <button id="startBtn">Start</button>
+    <button id="resetBtn">Reset</button>
+</div>
+<script>
+let scene, camera, renderer, lander, moonTerrain, moonBase;
+let engineFlame;
+let isLanding = false;
+let velocity = new THREE.Vector3();
+let acceleration = new THREE.Vector3();
+const gravity = new THREE.Vector3(0, -1.62, 0);
+let fuel = 100;
+const initialAltitude = 1000;
+let altitude = initialAltitude;
+let thrustPower = 5;
+function init() {
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
+    camera.position.set(0, 500, 1000);
+    camera.lookAt(0, 0, 0);
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+    const ambientLight = new THREE.AmbientLight(0x404040);
+    scene.add(ambientLight);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+    directionalLight.position.set(1, 1, 1);
+    scene.add(directionalLight);
+    createMoonTerrain();
+    createMoonBase();
+    createLander();
+    window.addEventListener('resize', onWindowResize, false);
+    document.getElementById('leftBtn').addEventListener('touchstart', () => { if(isLanding) acceleration.x = -2; });
+    document.getElementById('leftBtn').addEventListener('touchend', () => { if(isLanding) acceleration.x = 0; });
+    document.getElementById('rightBtn').addEventListener('touchstart', () => { if(isLanding) acceleration.x = 2; });
+    document.getElementById('rightBtn').addEventListener('touchend', () => { if(isLanding) acceleration.x = 0; });
+    document.getElementById('thrustControl').addEventListener('touchstart', () => { if(isLanding) activateThrust(); });
+    document.getElementById('thrustControl').addEventListener('touchend', () => { if(isLanding) deactivateThrust(); });
+    document.getElementById('startBtn').addEventListener('click', startLanding);
+    document.getElementById('resetBtn').addEventListener('click', resetLanding);
+    resetLanding();
+    animate();
+}
+function createMoonTerrain() {
+    const moonGeometry = new THREE.PlaneGeometry(2000, 2000, 200, 200);
+    const moonMaterial = new THREE.MeshPhongMaterial({
+        color: 0x888888,
+        shininess: 0,
+        flatShading: true
+    });
+    const vertices = moonGeometry.attributes.position.array;
+    for (let i = 0; i < vertices.length; i += 3) {
+        vertices[i + 2] = Math.random() * 50 - 25;
+    }
+    moonGeometry.computeVertexNormals();
+    moonTerrain = new THREE.Mesh(moonGeometry, moonMaterial);
+    moonTerrain.rotation.x = -Math.PI / 2;
+    scene.add(moonTerrain);
+}
+function createMoonBase() {
+    const baseGeometry = new THREE.BoxGeometry(100, 50, 100);
+    const baseMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc });
+    moonBase = new THREE.Mesh(baseGeometry, baseMaterial);
+    moonBase.position.set(0, 25, 0);
+    scene.add(moonBase);
+    const windowGeometry = new THREE.PlaneGeometry(10, 10);
+    const windowMaterial = new THREE.MeshPhongMaterial({ color: 0x00ffff, emissive: 0x00ffff, emissiveIntensity: 0.5 });
+    for (let i = 0; i < 4; i++) {
+        const window = new THREE.Mesh(windowGeometry, windowMaterial);
+        window.position.set(-45, 25, -30 + i * 20);
+        window.rotation.y = Math.PI / 2;
+        moonBase.add(window);
+    }
+    const platformGeometry = new THREE.BoxGeometry(60, 2, 60);
+    const platformMaterial = new THREE.MeshPhongMaterial({ color: 0xffff00 });
+    const landingPlatform = new THREE.Mesh(platformGeometry, platformMaterial);
+    landingPlatform.position.set(0, 26, 0);
+    moonBase.add(landingPlatform);
+}
+function createLander() {
+    lander = new THREE.Group();
+    const bodyGeometry = new THREE.CylinderGeometry(5, 5, 10, 16);
+    const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc });
+    const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+    lander.add(body);
+    const legGeometry = new THREE.CylinderGeometry(0.5, 0.5, 8, 8);
+    const legMaterial = new THREE.MeshPhongMaterial({ color: 0x888888 });
+    for (let i = 0; i < 4; i++) {
+        const leg = new THREE.Mesh(legGeometry, legMaterial);
+        leg.position.set(Math.cos(i * Math.PI / 2) * 4, -9, Math.sin(i * Math.PI / 2) * 4);
+        leg.rotation.x = Math.PI / 6;
+        leg.rotation.z = i * Math.PI / 2;
+        lander.add(leg);
+        const foot = new THREE.Mesh(new THREE.SphereGeometry(0.8, 8, 8), legMaterial);
+        foot.position.set(Math.cos(i * Math.PI / 2) * 5.5, -13, Math.sin(i * Math.PI / 2) * 5.5);
+        lander.add(foot);
+    }
+    const flameGeometry = new THREE.ConeGeometry(2, 6, 32);
+    const flameMaterial = new THREE.MeshBasicMaterial({
+        color: 0xff6600,
+        transparent: true,
+        opacity: 0.7
+    });
+    engineFlame = new THREE.Mesh(flameGeometry, flameMaterial);
+    engineFlame.position.y = -8;
+    engineFlame.visible = false;
+    lander.add(engineFlame);
+    lander.position.set(0, initialAltitude, 0);
+    scene.add(lander);
+}
+function activateThrust() {
+    if (fuel > 0) {
+        acceleration.y = thrustPower;
+        engineFlame.visible = true;
+    }
+}
+function deactivateThrust() {
+    acceleration.y = 0;
+    engineFlame.visible = false;
+}
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+}
+function startLanding() {
+    if (!isLanding) {
+        isLanding = true;
+        document.getElementById('info').textContent = "Landing started! Steer carefully!";
+        document.getElementById('startBtn').textContent = "In Progress";
+        document.getElementById('startBtn').disabled = true;
+    }
+}
+function resetLanding() {
+    isLanding = false;
+    lander.position.set(0, initialAltitude, 0);
+    velocity.set(0, 0, 0);
+    acceleration.set(0, 0, 0);
+    engineFlame.visible = false;
+    fuel = 100;
+    altitude = initialAltitude;
+    document.getElementById('info').textContent = "MoonLander 3D - Press Start to begin landing!";
+    document.getElementById('startBtn').textContent = "Start";
+    document.getElementById('startBtn').disabled = false;
+    updateTelemetry();
+}
+function updateTelemetry() {
+    document.getElementById('telemetry').innerHTML = `
+        Altitude: ${Math.round(altitude)} m<br>
+        Vertical Speed: ${Math.round(velocity.y * 10) / 10} m/s<br>
+        Horizontal Speed: ${Math.round(Math.sqrt(velocity.x * velocity.x + velocity.z * velocity.z) * 10) / 10} m/s<br>
+        Fuel: ${Math.round(fuel)}%
+    `;
+}
+function animate() {
+    requestAnimationFrame(animate);
+    if (isLanding) {
+        if (acceleration.y > 0 && fuel > 0) {
+            fuel -= 0.2;
+        }
+        velocity.add(acceleration);
+        velocity.add(gravity);
+        lander.position.add(velocity.clone().multiplyScalar(0.016));
+        altitude = lander.position.y - 13; // Account for the height of the lander's legs
+        camera.position.set(lander.position.x, lander.position.y + 20, lander.position.z + 40);
+        camera.lookAt(lander.position);
+        updateTelemetry();
+        if (engineFlame.visible) {
+            engineFlame.scale.set(
+                1 + Math.random() * 0.1,
+                1 + Math.random() * 0.2,
+                1 + Math.random() * 0.1
+            );
+        }
+        if (altitude <= 52) { // Base height + platform height
+            isLanding = false;
+            const distanceFromCenter = Math.sqrt(lander.position.x * lander.position.x + lander.position.z * lander.position.z);
+            const verticalSpeed = velocity.y;
+            const horizontalSpeed = Math.sqrt(velocity.x * velocity.x + velocity.z * velocity.z);
+            if (verticalSpeed > -100) { // Safe landing
+                if (distanceFromCenter < 30) {
+                    document.getElementById('info').textContent = "Successful landing on the base roof! Congratulations!";
+                } else {
+                    document.getElementById('info').textContent = "Successful landing, but off the base. Try to land on the roof!";
+                }
+            } else { // Mission failed
+                if (distanceFromCenter < 30) {
+                    document.getElementById('info').textContent = "Mission failed! The lander crashed into the base roof. Too much speed!";
+                } else {
+                    document.getElementById('info').textContent = "Mission failed! The lander crashed on the Moon's surface.";
+                }
+            }
+            document.getElementById('startBtn').textContent = "Start";
+            document.getElementById('startBtn').disabled = false;
+            engineFlame.visible = false;
+        }
+    }
+    renderer.render(scene, camera);
+}
+init();
+</script>
+</body></html>

vPI3jyMDFzBfJ55wj.html ADDED Viewed

	@@ -0,0 +1,681 @@

+<html><head><base href="https://websim.ai/c/civilsim3d-improved-v14" /><title>CivilSim3D - Enhanced Global Population Distribution (Debug Mode)</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+  font-family: Arial, sans-serif;
+}
+#info {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  color: white;
+  background: rgba(0,0,0,0.7);
+  padding: 10px;
+  border-radius: 5px;
+  max-width: 300px;
+}
+#controls {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: white;
+  background: rgba(0,0,0,0.7);
+  padding: 10px;
+  border-radius: 5px;
+}
+#sliders {
+  position: absolute;
+  top: 50px;
+  right: 10px;
+  color: white;
+  background: rgba(0,0,0,0.7);
+  padding: 10px;
+  border-radius: 5px;
+  width: 250px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+.slider-container {
+  margin-bottom: 10px;
+}
+.slider-container label {
+  display: inline-block;
+  width: 100%;
+  margin-bottom: 5px;
+}
+.slider-container input {
+  width: 100%;
+}
+#canvas-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+#debug-info {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  color: white;
+  background: rgba(0,0,0,0.7);
+  padding: 10px;
+  border-radius: 5px;
+  max-width: 300px;
+  font-family: monospace;
+}
+</style>
+</head>
+<body>
+<div id="canvas-container"></div>
+<div id="info">
+  <h2>CivilSim3D Enhanced (Debug Mode)</h2>
+  <p>Year: <span id="year">-10000</span></p>
+  <p>Total Population: <span id="population">0</span></p>
+  <p>Males: <span id="males">0</span></p>
+  <p>Females: <span id="females">0</span></p>
+  <p>Global Technology Level: <span id="tech">1.00</span></p>
+  <p>Global Happiness: <span id="happiness">0.50</span></p>
+  <p>Events: <span id="events"></span></p>
+</div>
+<div id="controls">
+  <button onclick="toggleSimulation()">Start/Stop Simulation</button>
+  <button onclick="resetSimulation()">Reset Simulation</button>
+</div>
+<div id="sliders">
+  <!-- Sliders will be dynamically added here -->
+</div>
+<div id="debug-info">
+  <h3>Debug Information</h3>
+  <p>Scene Children: <span id="scene-children">0</span></p>
+  <p>Civilizations: <span id="civ-count">0</span></p>
+  <p>Rural Dots: <span id="rural-dots">0</span></p>
+  <p>Renderer Info: <span id="renderer-info"></span></p>
+  <p>Errors: <span id="error-log"></span></p>
+  <p>Earth Radius: <span id="earth-radius"></span></p>
+  <p>Dot Size: <span id="current-dot-size"></span></p>
+</div>
+<script>
+let scene, camera, renderer, earth, clouds, simulationRunning = false;
+let year = -10000, totalPopulation = 0, globalTechnology = 1, globalHappiness = 0.5;
+let civilizations = [];
+let orbitControls;
+let landGeometry;
+const EARTH_RADIUS = 5;
+// Simulation parameters
+let params = {
+  populationGrowthRate: 0.001,
+  technologyAdvancementRate: 0.0001,
+  disasterProbability: 0.005,
+  conflictProbability: 0.01,
+  simulationSpeed: 1,
+  populationPerDot: 100000,
+  birthRatio: 1.05,
+  lifeExpectancy: 25,
+  educationLevel: 0.1,
+  healthcareQuality: 0.1,
+  economicGrowth: 0.001,
+  polutionRate: 0.001,
+  dotSize: 0.01,
+  ruralPopulation: 0.9
+};
+// Initial civilization centers (ancient cities/regions)
+const ancientCenters = [
+  { name: "Mesopotamia", lat: 33.2232, lon: 43.6793, population: 500000, area: 50000 },
+  { name: "Egypt", lat: 26.8206, lon: 30.8025, population: 400000, area: 40000 },
+  { name: "Indus Valley", lat: 24.8607, lon: 67.0011, population: 300000, area: 30000 },
+  { name: "Yellow River", lat: 34.6937, lon: 113.5023, population: 350000, area: 35000 },
+  { name: "Mesoamerica", lat: 19.4326, lon: -99.1332, population: 200000, area: 20000 },
+];
+function init() {
+  try {
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    document.getElementById('canvas-container').appendChild(renderer.domElement);
+    // Earth
+    const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 64, 64);
+    const earthTexture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/land_ocean_ice_cloud_2048.jpg');
+    const earthMaterial = new THREE.MeshPhongMaterial({
+      map: earthTexture,
+      bumpMap: earthTexture,
+      bumpScale: 0.05,
+    });
+    earth = new THREE.Mesh(earthGeometry, earthMaterial);
+    scene.add(earth);
+    // Clouds
+    const cloudGeometry = new THREE.SphereGeometry(EARTH_RADIUS + 0.03, 64, 64);
+    const cloudTexture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/fair_clouds_4k.png');
+    const cloudMaterial = new THREE.MeshPhongMaterial({
+      map: cloudTexture,
+      transparent: true,
+      opacity: 0.4,
+      blending: THREE.AdditiveBlending
+    });
+    clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
+    scene.add(clouds);
+    // Lighting
+    const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
+    scene.add(ambientLight);
+    const pointLight = new THREE.PointLight(0xffffff, 1, 100);
+    pointLight.position.set(10, 10, 10);
+    scene.add(pointLight);
+    // Add a subtle blue atmosphere
+    const atmosphereGeometry = new THREE.SphereGeometry(EARTH_RADIUS + 0.1, 64, 64);
+    const atmosphereMaterial = new THREE.ShaderMaterial({
+      vertexShader: `
+        varying vec3 vNormal;
+        void main() {
+          vNormal = normalize(normalMatrix * normal);
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+      fragmentShader: `
+        varying vec3 vNormal;
+        void main() {
+          float intensity = pow(0.7 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0);
+          gl_FragColor = vec4(0.3, 0.6, 1.0, 1.0) * intensity;
+        }
+      `,
+      blending: THREE.AdditiveBlending,
+      side: THREE.BackSide
+    });
+    const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
+    scene.add(atmosphere);
+    camera.position.z = 15;
+    // Orbit controls for free rotation and zoom
+    orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
+    orbitControls.enableDamping = true;
+    orbitControls.dampingFactor = 0.25;
+    orbitControls.enableZoom = true;
+    // Load land geometry for more accurate dot placement
+    loadLandGeometry();
+    // Initialize civilizations based on ancient centers
+    ancientCenters.forEach(createCivilization);
+    // Add rural population
+    addRuralPopulation();
+    // Setup sliders
+    setupSliders();
+    animate();
+    updateDebugInfo();
+  } catch (error) {
+    console.error("Error in init function:", error);
+    document.getElementById('error-log').textContent = error.message;
+  }
+}
+function loadLandGeometry() {
+  const loader = new THREE.FileLoader();
+  loader.load('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/json/world/world.json', function(data) {
+    try {
+      const worldGeometry = JSON.parse(data);
+      landGeometry = new THREE.BufferGeometry();
+      landGeometry.setAttribute('position', new THREE.Float32BufferAttribute(worldGeometry.vertices, 3));
+      landGeometry.setIndex(new THREE.Uint16BufferAttribute(worldGeometry.faces, 1));
+      landGeometry.computeVertexNormals();
+    } catch (error) {
+      console.error("Error loading land geometry:", error);
+      document.getElementById('error-log').textContent = "Land geometry loading error: " + error.message;
+    }
+  });
+}
+function latLonToVector3(lat, lon, radius) {
+  const phi = (90 - lat) * (Math.PI / 180);
+  const theta = (lon + 180) * (Math.PI / 180);
+  const x = -(radius * Math.sin(phi) * Math.cos(theta));
+  const z = (radius * Math.sin(phi) * Math.sin(theta));
+  const y = (radius * Math.cos(phi));
+  return new THREE.Vector3(x, y, z);
+}
+function createCivilization(center) {
+  try {
+    const position = latLonToVector3(center.lat, center.lon, EARTH_RADIUS);
+    const urbanPopulation = center.population * (1 - params.ruralPopulation);
+    const males = urbanPopulation / (1 + 1/params.birthRatio);
+    const females = urbanPopulation / (1 + params.birthRatio);
+    const maleDotCount = Math.ceil(males / params.populationPerDot);
+    const femaleDotCount = Math.ceil(females / params.populationPerDot);
+    const dots = new THREE.Group();
+    // Calculate spread based on center area
+    const spread = Math.sqrt(center.area) / 1000;
+    for (let i = 0; i < maleDotCount + femaleDotCount; i++) {
+      const dotGeometry = new THREE.SphereGeometry(params.dotSize, 8, 8);
+      const dotMaterial = new THREE.MeshBasicMaterial({ color: i < maleDotCount ? 0x0000ff : 0xff69b4 });
+      const dot = new THREE.Mesh(dotGeometry, dotMaterial);
+      let offset;
+      do {
+        offset = new THREE.Vector3(
+          (Math.random() - 0.5) * spread,
+          (Math.random() - 0.5) * spread,
+          (Math.random() - 0.5) * spread
+        );
+      } while (!isOnLand(position.clone().add(offset).normalize().multiplyScalar(EARTH_RADIUS)));
+      dot.position.copy(position).add(offset);
+      dots.add(dot);
+    }
+    scene.add(dots);
+    civilizations.push({
+      dots: dots,
+      name: center.name,
+      population: urbanPopulation,
+      males: males,
+      females: females,
+      technology: 1,
+      happiness: 0.5,
+      position: position,
+      lat: center.lat,
+      lon: center.lon,
+      area: center.area
+    });
+  } catch (error) {
+    console.error("Error creating civilization:", error);
+    document.getElementById('error-log').textContent = "Civilization creation error: " + error.message;
+  }
+}
+function isOnLand(position) {
+  if (!landGeometry) return true; // If land geometry hasn't loaded yet, allow all positions
+  const raycaster = new THREE.Raycaster(position, position.clone().negate().normalize());
+  const intersects = raycaster.intersectObject(earth);
+  if (intersects.length > 0) {
+    const faceIndex = intersects[0].faceIndex;
+    const face = new THREE.Face3(
+      landGeometry.index.array[faceIndex * 3],
+      landGeometry.index.array[faceIndex * 3 + 1],
+      landGeometry.index.array[faceIndex * 3 + 2]
+    );
+    return face.normal.dot(position.normalize()) > 0.9; // Consider it land if the normal is close to the position vector
+  }
+  return false;
+}
+function addRuralPopulation() {
+  try {
+    const totalPopulation = ancientCenters.reduce((sum, center) => sum + center.population, 0);
+    const ruralPopulation = totalPopulation * params.ruralPopulation;
+    const ruralDots = Math.ceil(ruralPopulation / params.populationPerDot);
+    for (let i = 0; i < ruralDots; i++) {
+      let position;
+      do {
+        const lat = (Math.random() - 0.5) * 180;
+        const lon = (Math.random() - 0.5) * 360;
+        position = latLonToVector3(lat, lon, EARTH_RADIUS);
+      } while (!isOnLand(position));
+      const dotGeometry = new THREE.SphereGeometry(params.dotSize, 8, 8);
+      const dotMaterial = new THREE.MeshBasicMaterial({ color: Math.random() < 0.5 ? 0x0000ff : 0xff69b4 });
+      const dot = new THREE.Mesh(dotGeometry, dotMaterial);
+      dot.position.copy(position);
+      scene.add(dot);
+    }
+  } catch (error) {
+    console.error("Error adding rural population:", error);
+    document.getElementById('error-log').textContent = "Rural population error: " + error.message;
+  }
+}
+function animate() {
+  requestAnimationFrame(animate);
+  try {
+    orbitControls.update();
+    clouds.rotation.y += 0.0005;
+    renderer.render(scene, camera);
+    updateDebugInfo();
+""
+  } catch (error) {
+    console.error("Error in animate function:", error);
+    document.getElementById('error-log').textContent = "Animation error: " + error.message;
+  }
+}
+function updateInfo() {
+  document.getElementById('year').textContent = year;
+  document.getElementById('population').textContent = Math.round(totalPopulation).toLocaleString();
+  document.getElementById('males').textContent = Math.round(civilizations.reduce((sum, civ) => sum + civ.males, 0)).toLocaleString();
+  document.getElementById('females').textContent = Math.round(civilizations.reduce((sum, civ) => sum + civ.females, 0)).toLocaleString();
+  document.getElementById('tech').textContent = globalTechnology.toFixed(2);
+  document.getElementById('happiness').textContent = globalHappiness.toFixed(2);
+}
+function simulationStep() {
+  if (!simulationRunning) return;
+  try {
+    year++;
+    totalPopulation = 0;
+    globalTechnology = 0;
+    globalHappiness = 0;
+    civilizations.forEach((civ) => {
+      // Population growth
+      const births = (civ.males + civ.females) * params.populationGrowthRate;
+      const maleBirths = births * (params.birthRatio / (1 + params.birthRatio));
+      const femaleBirths = births * (1 / (1 + params.birthRatio));
+      civ.males += maleBirths - (civ.males / params.lifeExpectancy);
+      civ.females += femaleBirths - (civ.females / params.lifeExpectancy);
+      civ.population = civ.males + civ.females;
+      // Technology advancement
+      civ.technology *= 1 + (params.technologyAdvancementRate * params.educationLevel);
+      // Happiness calculation
+      civ.happiness = (params.healthcareQuality + params.educationLevel + params.economicGrowth - params.polutionRate) / 3;
+      civ.happiness = Math.max(0, Math.min(1, civ.happiness));
+      // Random events
+      if (Math.random() < params.disasterProbability) {
+        const disasterImpact = 0.05 + (1 - params.healthcareQuality) * 0.1;
+        civ.males *= 1 - disasterImpact;
+        civ.females *= 1 - disasterImpact;
+        civ.population = civ.males + civ.females;
+        civ.happiness *= 0.9;
+        civ.dots.children.forEach(dot => dot.material.color.setHex(0xff0000)); // Red for disaster
+        document.getElementById('events').textContent = `Natural disaster in ${civ.name}!`;
+      } else if (Math.random() < params.conflictProbability) {
+        const conflictImpact = 0.02 + (1 - params.educationLevel) * 0.05;
+        civ.males *= 1 - conflictImpact;
+        civ.females *= 1 - conflictImpact;
+        civ.population = civ.males + civ.females;
+        civ.happiness *= 0.95;
+        civ.dots.children.forEach(dot => dot.material.color.setHex(0xff8c00)); // Orange for conflict
+        document.getElementById('events').textContent = `Conflict in ${civ.name}!`;
+      } else {
+        updateDotColors(civ);
+        document.getElementById('events').textContent = '';
+      }
+      updateDotCount(civ);
+      totalPopulation += civ.population;
+      globalTechnology += civ.technology;
+      globalHappiness += civ.happiness;
+    });
+    // Update rural population
+    updateRuralPopulation();
+    globalTechnology /= civilizations.length;
+    globalHappiness /= civilizations.length;
+    updateInfo();
+    updateDebugInfo();
+  } catch (error) {
+    console.error("Error in simulation step:", error);
+    document.getElementById('error-log').textContent = "Simulation step error: " + error.message;
+  }
+  setTimeout(simulationStep, 100 / params.simulationSpeed);
+}
+function updateDotColors(civ) {
+  const maleDotCount = Math.ceil(civ.males / params.populationPerDot);
+  civ.dots.children.forEach((dot, index) => {
+    if (index < maleDotCount) {
+      dot.material.color.setHex(0x0000ff); // Blue for males
+    } else {
+      dot.material.color.setHex(0xff69b4); // Pink for females
+    }
+  });
+}
+function updateDotCount(civ) {
+  const newDotCount = Math.ceil(civ.population / params.populationPerDot);
+  const currentDotCount = civ.dots.children.length;
+  if (newDotCount > currentDotCount) {
+    // Add new dots
+    for (let i = 0; i < newDotCount - currentDotCount; i++) {
+      const dotGeometry = new THREE.SphereGeometry(params.dotSize, 8, 8);
+      const dotMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); // White initially, color will be set in updateDotColors
+      const dot = new THREE.Mesh(dotGeometry, dotMaterial);
+      let offset;
+      do {
+        const spread = Math.sqrt(civ.area) / 1000;
+        offset = new THREE.Vector3(
+          (Math.random() - 0.5) * spread,
+          (Math.random() - 0.5) * spread,
+          (Math.random() - 0.5) * spread
+        );
+      } while (!isOnLand(civ.position.clone().add(offset).normalize().multiplyScalar(EARTH_RADIUS)));
+      dot.position.copy(civ.position).add(offset);
+      civ.dots.add(dot);
+    }
+  } else if (newDotCount < currentDotCount) {
+    // Remove excess dots
+    for (let i = 0; i < currentDotCount - newDotCount; i++) {
+      const dotToRemove = civ.dots.children[civ.dots.children.length - 1];
+      civ.dots.remove(dotToRemove);
+    }
+  }
+  updateDotColors(civ);
+}
+function toggleSimulation() {
+  simulationRunning = !simulationRunning;
+  if (simulationRunning) {
+    simulationStep();
+  }
+}
+function resetSimulation() {
+  try {
+    simulationRunning = false;
+    year = -10000;
+    totalPopulation = 0;
+    globalTechnology = 1;
+    globalHappiness = 0.5;
+    // Remove all existing dots
+    civilizations.forEach(civ => {
+      scene.remove(civ.dots);
+    });
+    scene.children.filter(child => child instanceof THREE.Mesh && child !== earth && child !== clouds).forEach(dot => {
+      scene.remove(dot);
+    });
+    civilizations = [];
+    // Reinitialize civilizations
+    ancientCenters.forEach(createCivilization);
+    // Add rural population
+    addRuralPopulation();
+    updateInfo();
+    updateDebugInfo();
+    document.getElementById('events').textContent = '';
+    document.getElementById('error-log').textContent = '';
+  } catch (error) {
+    console.error("Error resetting simulation:", error);
+    document.getElementById('error-log').textContent = "Reset error: " + error.message;
+  }
+}
+function setupSliders() {
+  const sliders = [
+    { id: 'growthRate', param: 'populationGrowthRate', min: 0, max: 0.05, step: 0.001, initial: 0.001 },
+    { id: 'techRate', param: 'technologyAdvancementRate', min: 0, max: 0.05, step: 0.0001, initial: 0.0001 },
+    { id: 'disasterProb', param: 'disasterProbability', min: 0, max: 0.1, step: 0.001, initial: 0.005 },
+    { id: 'conflictProb', param: 'conflictProbability', min: 0, max: 0.1, step: 0.001, initial: 0.01 },
+    { id: 'simSpeed', param: 'simulationSpeed', min: 0.1, max: 5, step: 0.1, initial: 1 },
+    { id: 'birthRatio', param: 'birthRatio', min: 0, max: 2, step: 0.01, initial: 1.05 },
+    { id: 'lifeExpectancy', param: 'lifeExpectancy', min: 20, max: 100, step: 1, initial: 25 },
+    { id: 'educationLevel', param: 'educationLevel', min: 0, max: 1, step: 0.01, initial: 0.1 },
+    { id: 'healthcareQuality', param: 'healthcareQuality', min: 0, max: 1, step: 0.01, initial: 0.1 },
+    { id: 'economicGrowth', param: 'economicGrowth', min: -0.05, max: 0.1, step: 0.001, initial: 0.001 },
+    { id: 'polutionRate', param: 'polutionRate', min: 0, max: 0.1, step: 0.001, initial: 0.001 },
+    { id: 'populationPerDot', param: 'populationPerDot', min: 1, max: 1000000, step: 1, initial: 100000 },
+    { id: 'dotSize', param: 'dotSize', min: 0.001, max: 0.05, step: 0.001, initial: 0.01 },
+    { id: 'ruralPopulation', param: 'ruralPopulation', min: 0.5, max: 0.99, step: 0.01, initial: 0.9 }
+  ];
+  const slidersContainer = document.getElementById('sliders');
+  sliders.forEach(slider => {
+    const container = document.createElement('div');
+    container.className = 'slider-container';
+    const label = document.createElement('label');
+    label.htmlFor = slider.id;
+    label.textContent = `${slider.param}: `;
+    const span = document.createElement('span');
+    span.id = `${slider.id}Value`;
+    span.textContent = slider.initial;
+    label.appendChild(span);
+    const input = document.createElement('input');
+    input.type = 'range';
+    input.id = slider.id;
+    input.min = slider.min;
+    input.max = slider.max;
+    input.step = slider.step;
+    input.value = slider.initial;
+    input.addEventListener('input', function() {
+      params[slider.param] = parseFloat(this.value);
+      span.textContent = this.value;
+      if (slider.id === 'populationPerDot' || slider.id === 'dotSize') {
+        updateAllDots();
+      }
+      if (slider.id === 'ruralPopulation') {
+        updateRuralPopulation();
+      }
+      updateDebugInfo();
+    });
+    container.appendChild(label);
+    container.appendChild(input);
+    slidersContainer.appendChild(container);
+  });
+}
+function updateAllDots() {
+  civilizations.forEach(civ => {
+    updateDotCount(civ);
+    updateDotSizes(civ);
+  });
+  updateRuralPopulation();
+}
+function updateDotSizes(civ) {
+  const newGeometry = new THREE.SphereGeometry(params.dotSize, 8, 8);
+  civ.dots.children.forEach(dot => {
+    const oldPosition = dot.position.clone();
+    dot.geometry.dispose();
+    dot.geometry = newGeometry;
+    dot.position.copy(oldPosition);
+  });
+}
+function updateRuralPopulation() {
+  try {
+    const totalPopulation = civilizations.reduce((sum, civ) => sum + civ.population, 0);
+    const ruralPopulation = totalPopulation * params.ruralPopulation;
+    const ruralDots = Math.ceil(ruralPopulation / params.populationPerDot);
+    const currentRuralDots = scene.children.filter(child => !civilizations.some(civ => civ.dots === child) && child instanceof THREE.Mesh && child !== earth && child !== clouds).length;
+    if (ruralDots > currentRuralDots) {
+      for (let i = 0; i < ruralDots - currentRuralDots; i++) {
+        let position;
+        do {
+          const lat = (Math.random() - 0.5) * 180;
+          const lon = (Math.random() - 0.5) * 360;
+          position = latLonToVector3(lat, lon, EARTH_RADIUS);
+        } while (!isOnLand(position));
+        const dotGeometry = new THREE.SphereGeometry(params.dotSize, 8, 8);
+        const dotMaterial = new THREE.MeshBasicMaterial({ color: Math.random() < 0.5 ? 0x0000ff : 0xff69b4 });
+        const dot = new THREE.Mesh(dotGeometry, dotMaterial);
+        dot.position.copy(position);
+        scene.add(dot);
+      }
+    } else if (ruralDots < currentRuralDots) {
+      const ruralDotsToRemove = scene.children.filter(child => !civilizations.some(civ => civ.dots === child) && child instanceof THREE.Mesh && child !== earth && child !== clouds).slice(ruralDots);
+      ruralDotsToRemove.forEach(dot => {
+        dot.geometry.dispose();
+        dot.material.dispose();
+        scene.remove(dot);
+      });
+    }
+    // Update sizes of existing rural dots
+    scene.children.filter(child => !civilizations.some(civ => civ.dots === child) && child instanceof THREE.Mesh && child !== earth && child !== clouds).forEach(dot => {
+      const oldPosition = dot.position.clone();
+      dot.geometry.dispose();
+      dot.geometry = new THREE.SphereGeometry(params.dotSize, 8, 8);
+      dot.position.copy(oldPosition);
+    });
+  } catch (error) {
+    console.error("Error updating rural population:", error);
+    document.getElementById('error-log').textContent = "Rural population update error: " + error.message;
+  }
+}
+function updateDebugInfo() {
+  document.getElementById('scene-children').textContent = scene.children.length;
+  document.getElementById('civ-count').textContent = civilizations.length;
+  document.getElementById('rural-dots').textContent = scene.children.filter(child => !civilizations.some(civ => civ.dots === child) && child instanceof THREE.Mesh && child !== earth && child !== clouds).length;
+  const rendererInfo = renderer.info;
+  document.getElementById('renderer-info').textContent = `Geometries: ${rendererInfo.memory.geometries}, Textures: ${rendererInfo.memory.textures}`;
+  document.getElementById('earth-radius').textContent = EARTH_RADIUS;
+  document.getElementById('current-dot-size').textContent = params.dotSize;
+}
+window.addEventListener('resize', onWindowResize, false);
+function onWindowResize(){
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+init();
+</script>
+</body>
+</html>

yh38bSOPARgCH7468.html ADDED Viewed

	@@ -0,0 +1,260 @@

+<html><head><base href="temporal://Simulation/neuralnetworks/timeline"><title>Neural Network Timeline - Temporal Simulation</title>
+<style>
+  body {
+    font-family: 'Orbitron', sans-serif;
+    background-color: #0a0a1f;
+    color: #e0e0ff;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+  }
+  .container {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  header {
+    background-color: #1a1a3f;
+    padding: 20px 0;
+    text-align: center;
+  }
+  h1 {
+    margin: 0;
+    font-size: 2.5em;
+    color: #00ffff;
+  }
+  .timeline {
+    position: relative;
+    max-width: 800px;
+    margin: 40px auto;
+  }
+  .timeline::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    background-color: #00ffff;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -3px;
+  }
+  .entry {
+    padding: 10px 40px;
+    position: relative;
+    background-color: inherit;
+    width: 50%;
+  }
+  .entry::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    right: -17px;
+    background-color: #0a0a1f;
+    border: 4px solid #00ffff;
+    top: 15px;
+    border-radius: 50%;
+    z-index: 1;
+  }
+  .left {
+    left: 0;
+  }
+  .right {
+    left: 50%;
+  }
+  .left::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    right: 30px;
+    border: medium solid #00ffff;
+    border-width: 10px 0 10px 10px;
+    border-color: transparent transparent transparent #00ffff;
+  }
+  .right::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    left: 30px;
+    border: medium solid #00ffff;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent #00ffff transparent transparent;
+  }
+  .right::after {
+    left: -16px;
+  }
+  .content {
+    padding: 20px 30px;
+    background-color: #1a1a3f;
+    position: relative;
+    border-radius: 6px;
+  }
+  @media screen and (max-width: 600px) {
+    .timeline::after {
+      left: 31px;
+    }
+    .entry {
+      width: 100%;
+      padding-left: 70px;
+      padding-right: 25px;
+    }
+    .entry::before {
+      left: 60px;
+      border: medium solid #00ffff;
+      border-width: 10px 10px 10px 0;
+      border-color: transparent #00ffff transparent transparent;
+    }
+    .left::after, .right::after {
+      left: 15px;
+    }
+    .right {
+      left: 0%;
+    }
+  }
+  .year {
+    font-size: 1.2em;
+    font-weight: bold;
+    color: #00ffff;
+  }
+  .event {
+    margin-top: 10px;
+  }
+  .divergence {
+    color: #ff00ff;
+    font-style: italic;
+  }
+</style>
+</head>
+<body>
+  <header>
+    <div class="container">
+      <h1>Neural Network Timeline</h1>
+    </div>
+  </header>
+  <div class="container">
+    <div class="timeline">
+      <div class="entry left">
+        <div class="content">
+          <span class="year">1943</span>
+          <div class="event">Warren McCulloch and Walter Pitts create a computational model for neural networks.</div>
+        </div>
+      </div>
+      <div class="entry right">
+        <div class="content">
+          <span class="year">1958</span>
+          <div class="event">Frank Rosenblatt designs the Perceptron, the first artificial neural network.</div>
+        </div>
+      </div>
+      <div class="entry left">
+        <div class="content">
+          <span class="year">1969</span>
+          <div class="event">Marvin Minsky and Seymour Papert publish "Perceptrons," highlighting limitations of single-layer neural networks.</div>
+        </div>
+      </div>
+      <div class="entry right">
+        <div class="content">
+          <span class="year">1974</span>
+          <div class="event">Paul Werbos develops backpropagation learning algorithm for multi-layer networks.</div>
+        </div>
+      </div>
+      <div class="entry left">
+        <div class="content">
+          <span class="year">1980</span>
+          <div class="event">Kunihiko Fukushima introduces Neocognitron, a hierarchical multi-layered neural network.</div>
+        </div>
+      </div>
+      <div class="entry right">
+        <div class="content">
+          <span class="year">1982</span>
+          <div class="event">John Hopfield popularizes Hopfield networks for associative memory and optimization problems.</div>
+        </div>
+      </div>
+      <div class="entry left">
+        <div class="content">
+          <span class="year">1986</span>
+          <div class="event">David Rumelhart, Geoffrey Hinton, and Ronald Williams publish influential work on backpropagation.</div>
+        </div>
+      </div>
+      <div class="entry right">
+        <div class="content">
+          <span class="year">1989</span>
+          <div class="event">Yann LeCun applies convolutional neural networks to handwritten digit recognition.</div>
+        </div>
+      </div>
+      <div class="entry left">
+        <div class="content">
+          <span class="year">1997</span>
+          <div class="event">Sepp Hochreiter and Jürgen Schmidhuber introduce Long Short-Term Memory (LSTM) networks.</div>
+        </div>
+      </div>
+      <div class="entry right">
+        <div class="content">
+          <span class="year">2006</span>
+          <div class="event">Geoffrey Hinton introduces deep belief networks, sparking renewed interest in deep learning.</div>
+        </div>
+      </div>
+      <div class="entry left">
+        <div class="content">
+          <span class="year">2012</span>
+          <div class="event">AlexNet wins ImageNet competition, demonstrating the power of deep convolutional networks.</div>
+        </div>
+      </div>
+      <div class="entry right">
+        <div class="content">
+          <span class="year">2014</span>
+          <div class="event">Ian Goodfellow introduces Generative Adversarial Networks (GANs).</div>
+        </div>
+      </div>
+      <div class="entry left">
+        <div class="content">
+          <span class="year">2017</span>
+          <div class="event">Google's AlphaGo Zero achieves superhuman performance in Go using reinforcement learning.</div>
+        </div>
+      </div>
+      <div class="entry right">
+        <div class="content">
+          <span class="year">2020</span>
+          <div class="event">OpenAI releases GPT-3, a large language model with 175 billion parameters.</div>
+        </div>
+      </div>
+      <div class="entry left">
+        <div class="content">
+          <span class="year">2023</span>
+          <div class="event">Development of the first quantum-entangled neural network.</div>
+          <div class="divergence">Timeline Divergence Point</div>
+        </div>
+      </div>
+      <div class="entry right">
+        <div class="content">
+          <span class="year">2028</span>
+          <div class="event">Introduction of the Holographic Neural Interface (HNI) for direct brain-computer interaction.</div>
+        </div>
+      </div>
+      <div class="entry left">
+        <div class="content">
+          <span class="year">2035</span>
+          <div class="event">First successful implementation of a city-wide neural network for optimizing urban infrastructure.</div>
+        </div>
+      </div>
+      <div class="entry right">
+        <div class="content">
+          <span class="year">2042</span>
+          <div class="event">Launch of the Global Neural Network (GNN) for climate prediction and mitigation.</div>
+        </div>
+      </div>
+      <div class="entry left">
+        <div class="content">
+          <span class="year">2050</span>
+          <div class="event">Development of self-evolving neural networks capable of independent goal-setting and ethical decision-making.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body></html>