Spaces:

allknowingroger
/

Madewithwebsim

Running

App Files Files Community

allknowingroger commited on Jul 4, 2024

Commit

bd9d750

verified ·

1 Parent(s): d8cf6a3

Upload 30 files

Browse files

Files changed (28) hide show

3coBt1IXriuQsgcXB.html +78 -0
3idxEhBNkScb0PfiO.html +175 -0
4lUqnsnO3ShitR5ow.html +132 -0
7FQ8tde0NjsOEkivO.html +354 -0
9gwLjbpZKVd6Hs4Yy.html +144 -0
IGcZCVDlVe6wQDZOK.html +78 -0
IpiL5e3XmBvC8zIYc.html +151 -0
JkDNLJnf5cvaKlr0C.html +142 -0
Ju6NyzfkxiEUQMJJU.html +227 -0
OQnUUFVv9rY1pFLFM.html +83 -0
RKuJrfCm8ZlLAgYES.html +219 -0
WPhS2osiyGKInfTqb.html +139 -0
WqE3pXOmpC4fzd2R8.html +303 -0
YQVELXyRHVtPLOLZ0.html +375 -0
b0nTIje2IorBnxbn4.html +181 -0
bDWjOaPOtlaMLADFT.html +56 -0
eDcZGrhdCEYZ00ATI.html +214 -0
eLVIZm95PqDycHF0i.html +189 -0
ffHrkxgFpIRIFJFH2.html +163 -0
ka7hqzOKlKKqpdsut.html +113 -0
le6kYD6PULsHCIrx0.html +260 -0
mpE6CPUzINPUXaxAj.html +373 -0
ouUxFFTFA296osu4s.html +235 -0
pqNwQVRUmKZ4ZO6qy.html +203 -0
qpNidDJx06Bh68FtT.html +171 -0
sHbBg9FjlkYrIVKIw.html +156 -0
vuZ4HnBut0SI8pWXC.html +325 -0
zFxvKFmaf159fZIEm.html +413 -0

3coBt1IXriuQsgcXB.html ADDED Viewed

	@@ -0,0 +1,78 @@

+<html><head><base href="https://dodecahedra.websim.ai" />
+<title>Dodecahedra Animation in WebGL</title>
+<style>
+  body {
+    margin: 0;
+    overflow: hidden;
+    background-color: #000;
+    font-family: Arial, sans-serif;
+  }
+  #info {
+    position: absolute;
+    top: 10px;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+  }
+</style>
+</head>
+<body>
+<div id="info">Dodecahedra Animation in WebGL<br/>
+<a href="https://websim.ai/mathshapes" style="color: #8af;">Explore More Mathematical Shapes</a>
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<script>
+  let scene, camera, renderer, dodecahedra = [];
+  function init() {
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.z = 5;
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+    const geometry = new THREE.DodecahedronGeometry(0.5);
+    const material = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 });
+    for (let i = 0; i < 20; i++) {
+      const dodecahedron = new THREE.Mesh(geometry, material);
+      dodecahedron.position.set(
+        Math.random() * 8 - 4,
+        Math.random() * 8 - 4,
+        Math.random() * 8 - 4
+      );
+      scene.add(dodecahedron);
+      dodecahedra.push(dodecahedron);
+    }
+    const light = new THREE.PointLight(0xffffff, 1, 100);
+    light.position.set(0, 0, 10);
+    scene.add(light);
+    window.addEventListener('resize', onWindowResize, false);
+  }
+  function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+  }
+  function animate() {
+    requestAnimationFrame(animate);
+    dodecahedra.forEach((d, index) => {
+      d.rotation.x += 0.01 * (index % 3 + 1);
+      d.rotation.y += 0.02 * (index % 3 + 1);
+      d.position.y = Math.sin(Date.now() * 0.001 + index) * 2;
+    });
+    renderer.render(scene, camera);
+  }
+  init();
+  animate();
+</script>
+</body></html>

3idxEhBNkScb0PfiO.html ADDED Viewed

	@@ -0,0 +1,175 @@

+<html><head><base href="https://websim.ai"><title>Sina Daily Funny GIFs - WebSim</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<style type="text/css">
+  * {
+    padding: 0;
+    margin: 0;
+  }
+  body {
+    background: #333;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  }
+  ul {
+    list-style: none;
+  }
+  li {
+    text-align: center;
+    border: 1px solid #d8d5d5;
+    margin: 18px 8px;
+    padding: 16px 0px;
+    border-radius: 10px;
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: transform 0.2s ease-in-out;
+  }
+  li:hover {
+    transform: translateY(-5px);
+  }
+  img {
+    width: 100%;
+    border-radius: 5px;
+  }
+  h1 {
+    font-size: 16px;
+    text-align: left;
+    margin: 10px 20px 20px;
+    font-weight: 500;
+    color: #333;
+  }
+  h2 {
+    text-align: right;
+    font-size: 12px;
+    font-weight: 400;
+    margin: 9px 12px -7px 0;
+    color: #666;
+  }
+  @media screen and (min-width:440px) {
+    body {
+      width: 440px;
+      margin: 0 auto;
+    }
+  }
+  section {
+    position: fixed;
+    bottom: 30px;
+    right: 20px;
+    display: flex;
+    gap: 10px;
+  }
+  a {
+    background: #598263;
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 10px;
+    font-size: 14px;
+    text-decoration: none;
+    transition: background-color 0.2s ease-in-out;
+    cursor: pointer;
+  }
+  a:hover {
+    background: #4a6e53;
+  }
+  .page {
+    position: fixed;
+    right: 8px;
+    top: 8px;
+    font-size: 14px;
+    padding: 4px 8px;
+    color: #fff;
+    background: rgba(89, 130, 99, 0.8);
+    border-radius: 8px;
+  }
+  .container {
+    padding-bottom: 60px;
+  }
+  .header {
+    background: #598263;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  .header h1 {
+    font-size: 24px;
+    margin: 0;
+    color: #fff;
+  }
+  .loading {
+    text-align: center;
+    color: #fff;
+    padding: 20px;
+    font-size: 18px;
+  }
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="header">
+    <h1>Sina Daily Funny GIFs</h1>
+  </div>
+  <span class="page"></span>
+  <ul></ul>
+  <section>
+    <a onclick="prePage()">Previous</a>
+    <a onclick="nextPage()">Next</a>
+  </section>
+</div>
+<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
+<script type="text/javascript">
+  var refresh = function (page) {
+    $('ul').html('<div class="loading">Loading...</div>');
+    $.ajax({
+      type: 'GET',
+      url: 'https://interface.sina.cn/tech/gif/album.d.json?num=' + 20 + '&page=' + page + '&jsoncallback=jsonp1&_=' + new Date().getTime(),
+      async: true,
+      dataType: "jsonp",
+      jsonp: "callback",
+      jsonpCallback: "jsonp1",
+      success: function (msg) {
+        $('ul').empty();
+        msg.data.forEach(function (currentValue, index, arr) {
+          $('ul').append('<li><h1>' + msg.data[index].name + '</h1><img src="' + msg.data[index].img_url.replace(/^http:/, 'https:') + '" alt="' + msg.data[index].name + '"/><h2>' + msg.data[index].createtime + '</h2></li>')
+        })
+      },
+      error: function() {
+        $('ul').html('<div class="loading">Loading failed, please try again</div>');
+      }
+    })
+    $('.page').html('Current Page: ' + page);
+  }
+  refresh(1);
+  var page = 1;
+  var prePage = function () {
+    if (page == 1) {
+      alert('This is the first page');
+    } else {
+      page--;
+      refresh(page);
+    }
+  }
+  var nextPage = function () {
+    page++;
+    refresh(page);
+  }
+</script>
+</body></html>

4lUqnsnO3ShitR5ow.html ADDED Viewed

	@@ -0,0 +1,132 @@

+<html><head><base href="https://websim.ai/c/lottery"><title>Lucky Draw</title>
+<style>
+* {
+    margin: 0;
+    padding: 0;
+}
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(135deg, #83a4d4, #b6fbff);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    color: #333;
+}
+.container {
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 10px;
+    padding: 30px;
+    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+    text-align: center;
+}
+h2 {
+    margin-bottom: 20px;
+    color: #4a4a4a;
+}
+#list {
+    display: block;
+    margin: 20px 0;
+    font-size: 24px;
+    font-weight: bold;
+    color: #e74c3c;
+    height: 40px;
+    line-height: 40px;
+}
+button {
+    background: #3498db;
+    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: 5px;
+    transition: background 0.3s ease;
+}
+button:hover {
+    background: #2980b9;
+}
+button:disabled {
+    background: #95a5a6;
+    cursor: not-allowed;
+}
+.decription {
+    margin-top: 30px;
+    font-style: italic;
+    color: #7f8c8d;
+}
+</style>
+</head>
+<body>
+<div class="container">
+    <h2>WebSim Lucky Draw</h2>
+    <div id="list">Ready to Start</div>
+    <button id="start">Start</button>
+    <button id="stop" disabled>Stop</button>
+    <div class="decription">
+        <p>Press Start or hit Enter to begin. Press Stop or hit Enter again to end the draw.</p>
+    </div>
+</div>
+<script>
+const list = document.getElementById('list');
+const start = document.getElementById('start');
+const stop = document.getElementById('stop');
+const prizes = [
+    "WebSim Pro Account",
+    "Virtual Reality Headset",
+    "AI Assistant Bot",
+    "Quantum Computer Access",
+    "Holographic Display",
+    "Neural Interface",
+    "Time Machine Demo",
+    "Space Tourism Ticket",
+    "Nanomedicine Treatment",
+    "Better luck next time!"
+];
+let timer = null;
+start.addEventListener('click', startDraw);
+stop.addEventListener('click', stopDraw);
+document.addEventListener('keyup', handleKeyPress);
+function startDraw() {
+    clearInterval(timer);
+    timer = setInterval(() => {
+        const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
+        list.textContent = randomPrize;
+    }, 50);
+    start.disabled = true;
+    stop.disabled = false;
+}
+function stopDraw() {
+    clearInterval(timer);
+    start.disabled = false;
+    stop.disabled = true;
+}
+function handleKeyPress(e) {
+    if (e.key === 'Enter') {
+        if (start.disabled) {
+            stopDraw();
+        } else {
+            startDraw();
+        }
+    }
+}
+</script>
+</body>
+</html>

7FQ8tde0NjsOEkivO.html ADDED Viewed

	@@ -0,0 +1,354 @@

+<html><head><base href="https://websim.ai" />
+<title>Stormy Pet Rescue: Raining Cats and Dogs!</title>
+<style>
+  body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    font-family: 'Comic Sans MS', cursive, sans-serif;
+    background: linear-gradient(to bottom, #1a2a3a, #2c3e50);
+    user-select: none;
+  }
+  #game-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+  #trampoline {
+    width: 100px;
+    height: 20px;
+    background: linear-gradient(to bottom, #FF69B4, #C71585);
+    position: absolute;
+    bottom: 20px;
+    border-radius: 50%;
+    box-shadow: 0 5px 0 #8B008B, 0 0 10px rgba(255,255,255,0.5);
+    cursor: grab;
+    z-index: 10;
+    transition: transform 0.1s;
+  }
+  #trampoline:active {
+    cursor: grabbing;
+    transform: scale(0.95);
+  }
+  .animal {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    z-index: 5;
+    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
+  }
+  .cat { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🐱</text></svg>'); }
+  .dog { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🐶</text></svg>'); }
+  #score, #level {
+    position: absolute;
+    font-size: 24px;
+    color: #FFFFFF;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    z-index: 15;
+  }
+  #score { top: 10px; left: 10px; }
+  #level { top: 10px; right: 10px; }
+  #game-over {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    display: none;
+    z-index: 20;
+    box-shadow: 0 0 20px rgba(0,0,0,0.5);
+  }
+  #restart-btn {
+    margin-top: 10px;
+    padding: 10px 20px;
+    font-size: 18px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  #restart-btn:hover {
+    background-color: #45a049;
+  }
+  .cloud {
+    position: absolute;
+    background-color: #7f8c8d;
+    border-radius: 50%;
+    opacity: 0.8;
+    animation: float 20s infinite linear;
+    z-index: 1;
+    box-shadow: 0 0 10px rgba(0,0,0,0.3);
+  }
+  @keyframes float {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(-100%); }
+  }
+  .lightning {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.3);
+    opacity: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+  .raindrop {
+    position: absolute;
+    width: 2px;
+    height: 20px;
+    background: linear-gradient(to bottom, rgba(174, 194, 224, 0), rgba(174, 194, 224, 0.5));
+    opacity: 0.6;
+    z-index: 3;
+  }
+  #pause-btn {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 5px 10px;
+    font-size: 16px;
+    background-color: rgba(255, 255, 255, 0.7);
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    z-index: 15;
+  }
+</style>
+</head>
+<body>
+<div id="game-container">
+  <div id="score">Score: <span id="score-value">0</span></div>
+  <div id="level">Level: <span id="level-value">1</span></div>
+  <button id="pause-btn">Pause</button>
+  <div id="trampoline"></div>
+  <div id="game-over">
+    <h2>Game Over!</h2>
+    <p>Your final score: <span id="final-score"></span></p>
+    <p>Highest level: <span id="final-level"></span></p>
+    <button id="restart-btn">Play Again</button>
+  </div>
+  <div class="lightning"></div>
+</div>
+<script>
+const gameContainer = document.getElementById('game-container');
+const trampoline = document.getElementById('trampoline');
+const scoreElement = document.getElementById('score-value');
+const levelElement = document.getElementById('level-value');
+const gameOverElement = document.getElementById('game-over');
+const finalScoreElement = document.getElementById('final-score');
+const finalLevelElement = document.getElementById('final-level');
+const restartBtn = document.getElementById('restart-btn');
+const pauseBtn = document.getElementById('pause-btn');
+const lightning = document.querySelector('.lightning');
+let score = 0;
+let level = 1;
+let gameRunning = true;
+let isPaused = false;
+let isDragging = false;
+let startX, trampolineLeft;
+let fallSpeedMultiplier = 1;
+let spawnDelayMultiplier = 1;
+let spawnInterval;
+let rainInterval;
+let lightningInterval;
+function createCloud() {
+  const cloud = document.createElement('div');
+  cloud.className = 'cloud';
+  cloud.style.width = Math.random() * 100 + 50 + 'px';
+  cloud.style.height = cloud.style.width;
+  cloud.style.top = Math.random() * 50 + '%';
+  gameContainer.appendChild(cloud);
+  setTimeout(() => {
+    gameContainer.removeChild(cloud);
+  }, 20000);
+}
+function createRaindrop() {
+  if (isPaused) return;
+  const raindrop = document.createElement('div');
+  raindrop.className = 'raindrop';
+  raindrop.style.left = Math.random() * 100 + '%';
+  raindrop.style.top = '-20px';
+  gameContainer.appendChild(raindrop);
+  const fallAnimation = raindrop.animate(
+    [
+      { transform: 'translateY(0)' },
+      { transform: `translateY(${window.innerHeight + 20}px)` }
+    ],
+    {
+      duration: 1000,
+      easing: 'linear'
+    }
+  );
+  fallAnimation.onfinish = () => {
+    gameContainer.removeChild(raindrop);
+  };
+}
+function flashLightning() {
+  if (isPaused) return;
+  lightning.style.opacity = 1;
+  setTimeout(() => {
+    lightning.style.opacity = 0;
+  }, 100);
+}
+function spawnAnimal() {
+  if (!gameRunning || isPaused) return;
+  const animal = document.createElement('div');
+  animal.className = 'animal ' + (Math.random() < 0.5 ? 'cat' : 'dog');
+  animal.style.left = Math.random() * (gameContainer.clientWidth - 50) + 'px';
+  animal.style.top = '-50px';
+  gameContainer.appendChild(animal);
+  let posY = -50;
+  const fallInterval = setInterval(() => {
+    if (!gameRunning || isPaused) {
+      clearInterval(fallInterval);
+      return;
+    }
+    posY += 5 * fallSpeedMultiplier;
+    animal.style.top = posY + 'px';
+    const animalRect = animal.getBoundingClientRect();
+    const trampolineRect = trampoline.getBoundingClientRect();
+    if (
+      animalRect.bottom >= trampolineRect.top &&
+      animalRect.left < trampolineRect.right &&
+      animalRect.right > trampolineRect.left
+    ) {
+      score++;
+      scoreElement.textContent = score;
+      gameContainer.removeChild(animal);
+      clearInterval(fallInterval);
+      checkLevelUp();
+    } else if (posY > gameContainer.clientHeight) {
+      gameOver();
+      clearInterval(fallInterval);
+    }
+  }, 50);
+}
+function checkLevelUp() {
+  if (score % 10 === 0) {
+    level++;
+    levelElement.textContent = level;
+    fallSpeedMultiplier *= 1.1;
+    spawnDelayMultiplier *= 0.9;
+    updateSpawnInterval();
+  }
+}
+function updateSpawnInterval() {
+  clearInterval(spawnInterval);
+  spawnInterval = setInterval(spawnAnimal, 1000 * spawnDelayMultiplier);
+}
+function gameOver() {
+  gameRunning = false;
+  gameOverElement.style.display = 'block';
+  finalScoreElement.textContent = score;
+  finalLevelElement.textContent = level;
+  clearInterval(spawnInterval);
+  clearInterval(rainInterval);
+  clearInterval(lightningInterval);
+}
+function restartGame() {
+  score = 0;
+  level = 1;
+  scoreElement.textContent = score;
+  levelElement.textContent = level;
+  gameOverElement.style.display = 'none';
+  gameRunning = true;
+  isPaused = false;
+  pauseBtn.textContent = 'Pause';
+  fallSpeedMultiplier = 1;
+  spawnDelayMultiplier = 1;
+  document.querySelectorAll('.animal').forEach(animal => animal.remove());
+  startGame();
+}
+function startGame() {
+  updateSpawnInterval();
+  setInterval(createCloud, 5000);
+  rainInterval = setInterval(createRaindrop, 50);
+  lightningInterval = setInterval(flashLightning, 5000);
+  trampoline.style.left = (gameContainer.clientWidth - trampoline.offsetWidth) / 2 + 'px';
+}
+function togglePause() {
+  isPaused = !isPaused;
+  pauseBtn.textContent = isPaused ? 'Resume' : 'Pause';
+}
+restartBtn.addEventListener('click', restartGame);
+pauseBtn.addEventListener('click', togglePause);
+trampoline.addEventListener('mousedown', (e) => {
+  isDragging = true;
+  startX = e.clientX - trampoline.offsetLeft;
+});
+document.addEventListener('mousemove', (e) => {
+  if (!isDragging || isPaused) return;
+  e.preventDefault();
+  const trampolineWidth = trampoline.offsetWidth;
+  let newX = e.clientX - startX;
+  newX = Math.max(-trampolineWidth / 2, Math.min(newX, gameContainer.clientWidth - trampolineWidth / 2));
+  trampoline.style.left = newX + 'px';
+});
+document.addEventListener('mouseup', () => {
+  isDragging = false;
+});
+trampoline.addEventListener('touchstart', (e) => {
+  isDragging = true;
+  startX = e.touches[0].clientX - trampoline.offsetLeft;
+});
+document.addEventListener('touchmove', (e) => {
+  if (!isDragging || isPaused) return;
+  e.preventDefault();
+  const trampolineWidth = trampoline.offsetWidth;
+  let newX = e.touches[0].clientX - startX;
+  newX = Math.max(-trampolineWidth / 2, Math.min(newX, gameContainer.clientWidth - trampolineWidth / 2));
+  trampoline.style.left = newX + 'px';
+});
+document.addEventListener('touchend', () => {
+  isDragging = false;
+});
+window.addEventListener('resize', () => {
+  const trampolineWidth = trampoline.offsetWidth;
+  let currentLeft = parseInt(trampoline.style.left);
+  currentLeft = Math.max(-trampolineWidth / 2, Math.min(currentLeft, gameContainer.clientWidth - trampolineWidth / 2));
+  trampoline.style.left = currentLeft + 'px';
+});
+startGame();
+</script>
+</body></html>

9gwLjbpZKVd6Hs4Yy.html ADDED Viewed

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

+<html><head><base href="https://websim.ai/c/jokegenerator" />
+<title>AI Joke Generator Pro</title>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f8ff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+  }
+  .container {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    max-width: 600px;
+    width: 100%;
+  }
+  h1 {
+    color: #4a4a4a;
+    margin-bottom: 1rem;
+  }
+  #joke-display {
+    font-size: 1.2rem;
+    margin: 1rem 0;
+    min-height: 3em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  button {
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  button:hover {
+    background-color: #45a049;
+  }
+  .mood-selector {
+    margin: 1rem 0;
+  }
+  select {
+    padding: 0.5rem;
+    font-size: 1rem;
+  }
+  .loading {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(0,0,0,.3);
+    border-radius: 50%;
+    border-top-color: #4CAF50;
+    animation: spin 1s ease-in-out infinite;
+    margin-left: 10px;
+  }
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+</style>
+</head>
+<body>
+  <div class="container">
+    <h1>AI Joke Generator Pro</h1>
+    <div class="mood-selector">
+      <label for="mood">Select joke mood:</label>
+      <select id="mood">
+        <option value="funny">Funny</option>
+        <option value="dad">Dad Joke</option>
+        <option value="nerdy">Nerdy</option>
+        <option value="pun">Pun</option>
+        <option value="dark">Dark Humor</option>
+      </select>
+    </div>
+    <div id="joke-display">Click the button to generate a joke!</div>
+    <button onclick="generateJoke()">Generate Joke</button>
+    <div id="loading" class="loading" style="display: none;"></div>
+  </div>
+  <script>
+    const jokes = {
+      funny: [
+        "Why don't scientists trust atoms? Because they make up everything!",
+        "Why did the scarecrow win an award? He was outstanding in his field!",
+        "Why don't eggs tell jokes? They'd crack each other up!",
+        "What do you call a fake noodle? An impasta!",
+        "Why did the math book look so sad? Because it had too many problems!"
+      ],
+      dad: [
+        "I'm afraid for the calendar. Its days are numbered.",
+        "What do you call a fish wearing a bowtie? Sofishticated.",
+        "How do you make a tissue dance? Put a little boogie in it!",
+        "Why did the cookie go to the doctor? Because it was feeling crumbly!",
+        "What do you call cheese that isn't yours? Nacho cheese!"
+      ],
+      nerdy: [
+        "There are 10 types of people in the world: those who understand binary, and those who don't.",
+        "Why do programmers prefer dark mode? Because light attracts bugs!",
+        "A photon checks into a hotel. The bellhop asks, 'Can I help you with your luggage?' The photon replies, 'No thanks, I'm traveling light.'",
+        "Why was the math book sad? Because it had too many problems!",
+        "What do you get when you cross a snowman with a vampire? Frostbite!"
+      ],
+      pun: [
+        "I wondered why the baseball was getting bigger. Then it hit me.",
+        "What do you call a can opener that doesn't work? A can't opener!",
+        "I used to be addicted to soap, but I'm clean now.",
+        "A bicycle can't stand on its own because it's two-tired.",
+        "What do you call a fake noodle? An impasta!"
+      ],
+      dark: [
+        "I have a stepladder because my real ladder left when I was just a kid.",
+        "Light travels faster than sound, which is why some people appear bright until you hear them speak.",
+        "I was going to tell a dead baby joke. But I decided to abort.",
+        "What's the difference between a tire and 365 used condoms? One's a Goodyear. The other's a great year.",
+        "Give a man a match, and he'll be warm for a few hours. Set a man on fire, and he will be warm for the rest of his life."
+      ]
+    };
+    function generateJoke() {
+      const mood = document.getElementById('mood').value;
+      const jokeDisplay = document.getElementById('joke-display');
+      const loadingSpinner = document.getElementById('loading');
+      jokeDisplay.textContent = '';
+      loadingSpinner.style.display = 'inline-block';
+      setTimeout(() => {
+        const randomJoke = jokes[mood][Math.floor(Math.random() * jokes[mood].length)];
+        jokeDisplay.textContent = randomJoke;
+        loadingSpinner.style.display = 'none';
+      }, 1000);
+    }
+  </script>
+</body></html>

IGcZCVDlVe6wQDZOK.html ADDED Viewed

	@@ -0,0 +1,78 @@

+<html><head><base href="https://websim.ai" />
+<title>PBS Viral Player - WebSim Integrated Viewing Experience</title>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 20px;
+    color: #333;
+  }
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  }
+  h1 {
+    color: #2c3e50;
+    text-align: center;
+  }
+  .video-container {
+    margin-bottom: 20px;
+  }
+  .description {
+    line-height: 1.6;
+  }
+  .related-content {
+    margin-top: 30px;
+  }
+  .related-content h2 {
+    color: #2c3e50;
+    border-bottom: 2px solid #3498db;
+    padding-bottom: 10px;
+  }
+  .related-content ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  .related-content li {
+    margin-bottom: 10px;
+  }
+  .related-content a {
+    color: #3498db;
+    text-decoration: none;
+  }
+  .related-content a:hover {
+    text-decoration: underline;
+  }
+</style>
+</head>
+<body>
+  <div class="container">
+    <h1>WebSim Integrated PBS Viewing Experience</h1>
+    <div class="video-container">
+      <div class="pbs-viral-player-wrapper" style="position: relative; padding-top: calc(56.25% + 43px);">
+        <iframe src="https://player.pbs.org/viralplayer/3074764395/" allowfullscreen allow="encrypted-media" style="position: absolute; top: 0; width: 100%; height: 100%; border: 0;"></iframe>
+      </div>
+    </div>
+    <div class="description">
+      <p>Welcome to the WebSim integrated PBS viewing experience. This innovative platform combines the educational content of PBS with the interactive capabilities of WebSim, creating a unique learning environment.</p>
+      <p>The video above is sourced directly from PBS, ensuring high-quality, factual content. As you watch, WebSim's AI will analyze the video in real-time, providing additional context, related information, and interactive elements to enhance your viewing experience.</p>
+    </div>
+    <div class="related-content">
+      <h2>Explore More with WebSim</h2>
+      <ul>
+        <li><a href="https://websim.ai/pbs/interactive-timeline">Interactive Timeline: Trace the history related to this video</a></li>
+        <li><a href="https://websim.ai/pbs/quiz-generator">AI-Generated Quiz: Test your knowledge on the video's content</a></li>
+        <li><a href="https://websim.ai/pbs/virtual-field-trip">Virtual Field Trip: Explore locations mentioned in the video</a></li>
+        <li><a href="https://websim.ai/pbs/discussion-forum">Join the Discussion: Share your thoughts with other viewers</a></li>
+      </ul>
+    </div>
+  </div>
+</body></html>

IpiL5e3XmBvC8zIYc.html ADDED Viewed

	@@ -0,0 +1,151 @@

+<html><head><base href="https://websim.ai"><title>Pocket Memory Game</title>
+<style>
+  body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: Arial, sans-serif;
+    background-color: #000000;
+    color: #ffffff;
+  }
+  .game-container {
+    width: 2.88in;
+    height: 2.88in;
+    background-color: #000000;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .board {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.08in;
+    margin-bottom: 0.16in;
+  }
+  .card {
+    width: 0.6in;
+    height: 0.6in;
+    background-color: #000000;
+    border: 2px solid #ffffff;
+    border-radius: 0.08in;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.3in;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  .card.flipped {
+    background-color: #ffffff;
+    color: #000000;
+  }
+  .status {
+    font-size: 0.18in;
+    text-align: center;
+  }
+</style>
+</head><body>
+<div class="game-container">
+  <div class="board">
+    <div class="card" data-card="A"></div>
+    <div class="card" data-card="A"></div>
+    <div class="card" data-card="B"></div>
+    <div class="card" data-card="B"></div>
+    <div class="card" data-card="C"></div>
+    <div class="card" data-card="C"></div>
+    <div class="card" data-card="D"></div>
+    <div class="card" data-card="D"></div>
+    <div class="card" data-card="E"></div>
+    <div class="card" data-card="E"></div>
+    <div class="card" data-card="F"></div>
+    <div class="card" data-card="F"></div>
+    <div class="card" data-card="G"></div>
+    <div class="card" data-card="G"></div>
+    <div class="card" data-card="H"></div>
+    <div class="card" data-card="H"></div>
+  </div>
+  <div class="status">Pairs: 0 | Moves: 0</div>
+</div>
+<script>
+const cards = document.querySelectorAll('.card');
+const statusDisplay = document.querySelector('.status');
+let hasFlippedCard = false;
+let lockBoard = false;
+let firstCard, secondCard;
+let pairs = 0;
+let moves = 0;
+function flipCard() {
+  if (lockBoard) return;
+  if (this === firstCard) return;
+  this.classList.add('flipped');
+  this.textContent = this.dataset.card;
+  if (!hasFlippedCard) {
+    hasFlippedCard = true;
+    firstCard = this;
+    return;
+  }
+  secondCard = this;
+  checkForMatch();
+}
+function checkForMatch() {
+  moves++;
+  let isMatch = firstCard.dataset.card === secondCard.dataset.card;
+  isMatch ? disableCards() : unflipCards();
+  updateStatus();
+}
+function disableCards() {
+  firstCard.removeEventListener('click', flipCard);
+  secondCard.removeEventListener('click', flipCard);
+  pairs++;
+  resetBoard();
+}
+function unflipCards() {
+  lockBoard = true;
+  setTimeout(() => {
+    firstCard.classList.remove('flipped');
+    secondCard.classList.remove('flipped');
+    firstCard.textContent = '';
+    secondCard.textContent = '';
+    resetBoard();
+  }, 1000);
+}
+function resetBoard() {
+  [hasFlippedCard, lockBoard] = [false, false];
+  [firstCard, secondCard] = [null, null];
+}
+function updateStatus() {
+  statusDisplay.textContent = `Pairs: ${pairs} | Moves: ${moves}`;
+  if (pairs === 8) {
+    statusDisplay.textContent += ' | You Win!';
+  }
+}
+function shuffle() {
+  cards.forEach(card => {
+    let randomPos = Math.floor(Math.random() * 16);
+    card.style.order = randomPos;
+  });
+}
+cards.forEach(card => card.addEventListener('click', flipCard));
+shuffle();
+</script>
+</body></html>

JkDNLJnf5cvaKlr0C.html ADDED Viewed

	@@ -0,0 +1,142 @@

+<html><head><base href="https://websim.ai/"><title>AInfinitoGram - Infinite AI-Generated Photography</title><style>
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f0f0;
+  }
+  header {
+    background-color: #333;
+    color: white;
+    padding: 1rem;
+    text-align: center;
+  }
+  h1 {
+    margin: 0;
+  }
+  .gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 1rem;
+  }
+  .photo {
+    margin: 0.5rem;
+    background-color: white;
+    box-shadow: 0 0 5px rgba(0,0,0,0.1);
+    border-radius: 5px;
+    overflow: hidden;
+    width: 300px;
+  }
+  .photo img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+  }
+  .photo-info {
+    padding: 0.5rem;
+  }
+  .photo-title {
+    font-weight: bold;
+    margin-bottom: 0.25rem;
+  }
+  .photo-date {
+    color: #666;
+    font-size: 0.8rem;
+  }
+  #load-more {
+    display: block;
+    margin: 1rem auto;
+    padding: 0.5rem 1rem;
+    background-color: #333;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  footer {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 1rem;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+  }
+</style></head><body>
+  <header>
+    <h1>AInfinitoGram</h1>
+    <p>Infinite AI-Generated Photography</p>
+  </header>
+  <div class="gallery" id="photo-gallery">
+    <!-- Photos will be dynamically added here -->
+  </div>
+  <button id="load-more">Load More</button>
+  <footer>
+    <p>&copy; 2023 AInfinitoGram - AI-Generated Photography</p>
+  </footer>
+  <script>
+    const photoGallery = document.getElementById('photo-gallery');
+    const loadMoreButton = document.getElementById('load-more');
+    let photoCount = 0;
+    function generateRandomDate() {
+      const start = new Date(2010, 0, 1);
+      const end = new Date();
+      return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+    }
+    function formatDate(date) {
+      return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+    }
+    function generatePhotoTitle() {
+      const subjects = ['Landscape', 'Portrait', 'Street', 'Nature', 'Abstract', 'Architecture', 'Wildlife', 'Macro', 'Night', 'Aerial'];
+      const adjectives = ['Vibrant', 'Serene', 'Mysterious', 'Energetic', 'Dreamy', 'Bold', 'Ethereal', 'Dramatic', 'Minimalist', 'Surreal'];
+      return `${adjectives[Math.floor(Math.random() * adjectives.length)]} ${subjects[Math.floor(Math.random() * subjects.length)]}`;
+    }
+    function addPhoto() {
+      const photo = document.createElement('div');
+      photo.className = 'photo';
+      const img = document.createElement('img');
+      img.src = `https://picsum.photos/300/200?random=${photoCount}`;
+      img.alt = 'AI-generated photo';
+      const info = document.createElement('div');
+      info.className = 'photo-info';
+      const title = document.createElement('div');
+      title.className = 'photo-title';
+      title.textContent = generatePhotoTitle();
+      const date = document.createElement('div');
+      date.className = 'photo-date';
+      date.textContent = formatDate(generateRandomDate());
+      info.appendChild(title);
+      info.appendChild(date);
+      photo.appendChild(img);
+      photo.appendChild(info);
+      photoGallery.appendChild(photo);
+      photoCount++;
+    }
+    function loadMorePhotos() {
+      for (let i = 0; i < 12; i++) {
+        addPhoto();
+      }
+    }
+    loadMoreButton.addEventListener('click', loadMorePhotos);
+    // Initial load
+    loadMorePhotos();
+  </script>
+</body></html>

Ju6NyzfkxiEUQMJJU.html ADDED Viewed

	@@ -0,0 +1,227 @@

+<html><head><base href="https://magicaldoors.websim.ai/"/><title>Magical Doors - A Whimsical Adventure</title><style>
+    body {
+        font-family: 'Work Sans', sans-serif;
+        margin: 0;
+        padding: 0;
+        background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
+        color: #4a4a4a;
+    }
+    .header {
+        background-color: #8ec5fc;
+        background-image: linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
+        height: 50px;
+    }
+    .container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+    .title-row {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 30px;
+    }
+    .instructions-title {
+        font-size: 24px;
+        margin: 0 15px;
+        color: #6a3093;
+    }
+    .instructions-row {
+        width: 100%;
+        margin-bottom: 30px;
+    }
+    .instructions-number {
+        font-size: 36px;
+        color: #a044ff;
+        width: 50px;
+        text-align: center;
+        vertical-align: top;
+    }
+    .instructions-text {
+        font-size: 18px;
+        padding: 10px;
+        line-height: 1.5;
+    }
+    .door-row {
+        display: flex;
+        justify-content: space-around;
+        margin-bottom: 30px;
+    }
+    .frame {
+        width: 200px;
+        cursor: pointer;
+        transition: transform 0.3s ease;
+    }
+    .frame:hover {
+        transform: scale(1.05);
+    }
+    #start-row {
+        text-align: center;
+    }
+    #start {
+        font-size: 18px;
+        padding: 10px 20px;
+        background-color: #a044ff;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+    #start:hover {
+        background-color: #8e2de2;
+    }
+    @keyframes doorGlow {
+        0% { box-shadow: 0 0 5px #f6d365; }
+        50% { box-shadow: 0 0 20px #fda085; }
+        100% { box-shadow: 0 0 5px #f6d365; }
+    }
+    .frame {
+        animation: doorGlow 2s infinite;
+    }
+</style></head><body>
+    <div class="header"></div>
+    <div class="container">
+        <div class="title-row">
+            <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg" alt="Magical star" width="30" height="30">
+            <p class="instructions-title">Welcome to the Magical Doors!</p>
+            <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg" alt="Magical star" width="30" height="30">
+        </div>
+        <table class="instructions-row">
+            <tr>
+                <td class="instructions-number">1</td>
+                <td class="instructions-text">
+                    Behind one of these enchanted doors lies the mischievous Pixie.
+                </td>
+            </tr>
+            <tr>
+                <td class="instructions-number">2</td>
+                <td class="instructions-text">
+                    Your quest is to open all the doors without encountering the Pixie.
+                </td>
+            </tr>
+            <tr>
+                <td class="instructions-number">3</td>
+                <td class="instructions-text">
+                    If you succeed in avoiding the Pixie until the very last door, you'll discover a magical treasure!
+                </td>
+            </tr>
+            <tr>
+                <td class="instructions-number">4</td>
+                <td class="instructions-text">
+                    Challenge yourself to achieve a streak of successful quests!
+                </td>
+            </tr>
+        </table>
+        <div class="door-row">
+            <img id="door1" class="frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt="Magical door 1" width="200" height="360">
+            <img id="door2" class="frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt="Magical door 2" width="200" height="360">
+            <img id="door3" class="frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt="Magical door 3" width="200" height="360">
+        </div>
+        <div id="start-row">
+            <button id="start">Begin Your Magical Quest!</button>
+        </div>
+    </div>
+    <script>
+        const door1 = document.getElementById('door1');
+        const door2 = document.getElementById('door2');
+        const door3 = document.getElementById('door3');
+        const startButton = document.getElementById('start');
+        const closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";
+        const pixiePath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
+        const fairyPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
+        const unicornPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";
+        let openDoor1, openDoor2, openDoor3;
+        let numClosedDoors = 3;
+        let currentlyPlaying = true;
+        const isPixie = (door) => {
+            return door.src === pixiePath;
+        }
+        const isClicked = (door) => {
+            return door.src !== closedDoorPath;
+        }
+        const playDoor = (door) => {
+            numClosedDoors--;
+            if (numClosedDoors === 0) {
+                gameOver('win');
+            } else if (isPixie(door)) {
+                gameOver();
+            }
+        }
+        const randomDoorGenerator = () => {
+            const pixieDoor = Math.floor(Math.random() * numClosedDoors);
+            if (pixieDoor === 0) {
+                openDoor1 = pixiePath;
+                openDoor2 = fairyPath;
+                openDoor3 = unicornPath;
+            } else if (pixieDoor === 1) {
+                openDoor1 = fairyPath;
+                openDoor2 = pixiePath;
+                openDoor3 = unicornPath;
+            } else {
+                openDoor1 = fairyPath;
+                openDoor2 = unicornPath;
+                openDoor3 = pixiePath;
+            }
+        }
+        door1.onclick = () => {
+            if (currentlyPlaying && !isClicked(door1)) {
+                door1.src = openDoor1;
+                playDoor(door1);
+            }
+        }
+        door2.onclick = () => {
+            if (currentlyPlaying && !isClicked(door2)) {
+                door2.src = openDoor2;
+                playDoor(door2);
+            }
+        }
+        door3.onclick = () => {
+            if (currentlyPlaying && !isClicked(door3)) {
+                door3.src = openDoor3;
+                playDoor(door3);
+            }
+        }
+        startButton.onclick = () => {
+            if (!currentlyPlaying) {
+                startRound();
+            }
+        }
+        const startRound = () => {
+            door1.src = closedDoorPath;
+            door2.src = closedDoorPath;
+            door3.src = closedDoorPath;
+            numClosedDoors = 3;
+            startButton.innerHTML = 'Good luck!';
+            currentlyPlaying = true;
+            randomDoorGenerator();
+        }
+        const gameOver = (status) => {
+            if (status === 'win') {
+                startButton.innerHTML = 'You found the treasure! Play again?';
+            } else {
+                startButton.innerHTML = 'Game over! Play again?';
+            }
+            currentlyPlaying = false;
+        }
+        startRound();
+    </script>
+</body></html>

OQnUUFVv9rY1pFLFM.html ADDED Viewed

	@@ -0,0 +1,83 @@

+<html><head><base href="https://%3Ciframe%3Ehttps://mapbox.github.io/webgl-wind/demo/%3C/iframe%3E">
+  <title>WebGL Wind Simulation</title>
+  <style>
+    body, html {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      overflow: hidden;
+      font-family: Arial, sans-serif;
+    }
+    #wind-simulation {
+      width: 100%;
+      height: 100vh;
+      border: none;
+    }
+    #overlay {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      background: rgba(255,255,255,0.8);
+      padding: 10px;
+      border-radius: 5px;
+    }
+    h1 {
+      margin: 0 0 10px 0;
+      font-size: 24px;
+    }
+    p {
+      margin: 5px 0;
+    }
+    .control {
+      margin-top: 10px;
+    }
+    select, input {
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <iframe id="wind-simulation" src="https://mapbox.github.io/webgl-wind/demo/" title="WebGL Wind Simulation"></iframe>
+  <div id="overlay">
+    <h1>WebGL Wind Simulation</h1>
+    <p>Explore global wind patterns in real-time using cutting-edge WebGL technology.</p>
+    <div class="control">
+      <label for="wind-layer">Wind Layer:</label>
+      <select id="wind-layer">
+        <option value="surface">Surface</option>
+        <option value="850hpa">850 hPa</option>
+        <option value="250hpa">250 hPa</option>
+      </select>
+    </div>
+    <div class="control">
+      <label for="particle-density">Particle Density:</label>
+      <input type="range" id="particle-density" min="1000" max="100000" step="1000" value="65000">
+    </div>
+    <div class="control">
+      <label for="particle-speed">Particle Speed:</label>
+      <input type="range" id="particle-speed" min="0.1" max="2" step="0.1" value="0.75">
+    </div>
+    <p><a href="https://websim.ai/wind-patterns">Learn more about global wind patterns</a></p>
+    <p><a href="https://websim.ai/webgl-tech">Explore WebGL technology</a></p>
+  </div>
+  <script>
+    // Simulated interactivity
+    document.getElementById('wind-layer').addEventListener('change', function(e) {
+      console.log('Wind layer changed to: ' + e.target.value);
+    });
+    document.getElementById('particle-density').addEventListener('input', function(e) {
+      console.log('Particle density changed to: ' + e.target.value);
+    });
+    document.getElementById('particle-speed').addEventListener('input', function(e) {
+      console.log('Particle speed changed to: ' + e.target.value);
+    });
+  </script>
+</body></html>

RKuJrfCm8ZlLAgYES.html ADDED Viewed

	@@ -0,0 +1,219 @@

+<html><head><base href="https://websim.ai/" /><title>Whack-a-Mole Mania: Eco Edition</title>
+<style>
+  body {
+    font-family: 'Fredoka One', cursive;
+    background: linear-gradient(135deg, #7cba01, #2c8c09);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
+  }
+  #game-container {
+    width: 500px;
+    height: 500px;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23654321"/><circle cx="50" cy="50" r="30" fill="%23543210"/></svg>');
+    background-size: 100px 100px;
+    border-radius: 20px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    gap: 20px;
+    padding: 20px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+  }
+  .hole {
+    background: radial-gradient(circle, #3a2410 60%, #291809 100%);
+    border-radius: 50%;
+    overflow: hidden;
+    position: relative;
+    box-shadow: inset 0 5px 10px rgba(0,0,0,0.5);
+  }
+  .mole {
+    width: 100%;
+    height: 100%;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23964B00"/><circle cx="30" cy="30" r="10" fill="%23000"/><circle cx="70" cy="30" r="10" fill="%23000"/><path d="M35 70 Q50 80 65 70" stroke="%23000" stroke-width="5" fill="none"/><ellipse cx="50" cy="40" rx="10" ry="5" fill="%23FFA500"/></svg>');
+    background-size: cover;
+    position: absolute;
+    bottom: 100%;
+    transition: bottom 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    cursor: pointer;
+  }
+  .mole.up {
+    bottom: 0;
+  }
+  #score, #misses, #time {
+    position: absolute;
+    top: 20px;
+    font-size: 28px;
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+  }
+  #score { left: 20px; }
+  #misses { right: 20px; }
+  #time { top: 60px; left: 20px; }
+  #start-btn {
+    position: absolute;
+    bottom: 20px;
+    padding: 15px 30px;
+    font-size: 24px;
+    font-family: 'Fredoka One', cursive;
+    background-color: #FFD700;
+    color: #333;
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3s;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+  }
+  #start-btn:hover {
+    background-color: #FFC300;
+    transform: translateY(-3px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
+  }
+  .particle {
+    position: absolute;
+    pointer-events: none;
+    animation: particleAnimation 0.5s ease-out forwards;
+  }
+  @keyframes particleAnimation {
+    0% { transform: translateY(0) scale(1); opacity: 1; }
+    100% { transform: translateY(-50px) scale(0); opacity: 0; }
+  }
+  #level-up {
+    position: absolute;
+    font-size: 48px;
+    color: #FFD700;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    opacity: 0;
+    transition: opacity 0.5s;
+  }
+</style>
+</head>
+<body>
+<div id="score">Score: 0</div>
+<div id="misses">Misses: 0</div>
+<div id="time">Time: 60s</div>
+<div id="game-container"></div>
+<button id="start-btn">Start Game</button>
+<div id="level-up">Level Up!</div>
+<script>
+const gameContainer = document.getElementById('game-container');
+const scoreElement = document.getElementById('score');
+const missesElement = document.getElementById('misses');
+const timeElement = document.getElementById('time');
+const startBtn = document.getElementById('start-btn');
+const levelUpElement = document.getElementById('level-up');
+let score = 0;
+let misses = 0;
+let consecutiveMisses = 0;
+let gameInterval;
+let speed = 1000;
+let timeLeft = 60;
+let level = 1;
+function createHoles() {
+  for (let i = 0; i < 9; i++) {
+    const hole = document.createElement('div');
+    hole.classList.add('hole');
+    const mole = document.createElement('div');
+    mole.classList.add('mole');
+    mole.addEventListener('click', whackMole);
+    hole.appendChild(mole);
+    gameContainer.appendChild(hole);
+  }
+}
+function whackMole(event) {
+  if (this.classList.contains('up')) {
+    this.classList.remove('up');
+    score++;
+    scoreElement.textContent = `Score: ${score}`;
+    consecutiveMisses = 0;
+    createParticles(event.clientX, event.clientY);
+    checkLevelUp();
+  }
+}
+function createParticles(x, y) {
+  for (let i = 0; i < 10; i++) {
+    const particle = document.createElement('div');
+    particle.classList.add('particle');
+    particle.style.left = `${x}px`;
+    particle.style.top = `${y}px`;
+    particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
+    particle.style.width = `${Math.random() * 10 + 5}px`;
+    particle.style.height = particle.style.width;
+    document.body.appendChild(particle);
+    setTimeout(() => particle.remove(), 500);
+  }
+}
+function showMole() {
+  const moles = document.querySelectorAll('.mole');
+  const randomMole = moles[Math.floor(Math.random() * moles.length)];
+  if (!randomMole.classList.contains('up')) {
+    randomMole.classList.add('up');
+    setTimeout(() => {
+      if (randomMole.classList.contains('up')) {
+        randomMole.classList.remove('up');
+        misses++;
+        consecutiveMisses++;
+        missesElement.textContent = `Misses: ${misses}`;
+        if (consecutiveMisses >= 3) {
+          endGame();
+        }
+      }
+    }, speed);
+  }
+}
+function startGame() {
+  score = 0;
+  misses = 0;
+  consecutiveMisses = 0;
+  speed = 1000;
+  timeLeft = 60;
+  level = 1;
+  scoreElement.textContent = 'Score: 0';
+  missesElement.textContent = 'Misses: 0';
+  timeElement.textContent = 'Time: 60s';
+  startBtn.style.display = 'none';
+  gameInterval = setInterval(() => {
+    showMole();
+    timeLeft--;
+    timeElement.textContent = `Time: ${timeLeft}s`;
+    if (timeLeft <= 0) {
+      endGame();
+    }
+  }, 1000);
+}
+function endGame() {
+  clearInterval(gameInterval);
+  alert(`Game Over! Your score: ${score}`);
+  startBtn.style.display = 'block';
+}
+function checkLevelUp() {
+  if (score % 10 === 0) {
+    level++;
+    speed = Math.max(300, speed - 50);
+    levelUpElement.style.opacity = '1';
+    levelUpElement.textContent = `Level ${level}!`;
+    setTimeout(() => {
+      levelUpElement.style.opacity = '0';
+    }, 1500);
+  }
+}
+createHoles();
+startBtn.addEventListener('click', startGame);
+</script>
+</body></html>

WPhS2osiyGKInfTqb.html ADDED Viewed

	@@ -0,0 +1,139 @@

+<html><head><base href="https://websim.ai" /><title>WeChat-style Chat - WebSim</title><style>
+  body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    background-color: #f1f1f1;
+  }
+  .chat-container {
+    max-width: 500px;
+    margin: 0 auto;
+    background-color: #fff;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .chat-header {
+    background-color: #07C160;
+    color: white;
+    padding: 10px;
+    text-align: center;
+    font-size: 18px;
+  }
+  .chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+  }
+  .message {
+    max-width: 70%;
+    margin-bottom: 10px;
+    clear: both;
+  }
+  .message-content {
+    padding: 10px;
+    border-radius: 10px;
+  }
+  .left {
+    float: left;
+  }
+  .right {
+    float: right;
+  }
+  .left .message-content {
+    background-color: #fff;
+    border: 1px solid #ccc;
+  }
+  .right .message-content {
+    background-color: #07C160;
+    color: white;
+  }
+  .chat-input {
+    padding: 10px;
+    background-color: #f1f1f1;
+    display: flex;
+  }
+  .chat-input input {
+    flex: 1;
+    padding: 10px;
+    border: none;
+    border-radius: 20px;
+    outline: none;
+  }
+  .chat-input button {
+    background-color: #07C160;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    margin-left: 10px;
+    border-radius: 20px;
+    cursor: pointer;
+  }
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+</style></head><body>
+<div class="chat-container">
+  <div class="chat-header">
+    WeChat-style Chat
+  </div>
+  <div class="chat-messages" id="chatMessages">
+    <div class="message left">
+      <img src="https://websim.ai/images/ai-avatar.png" alt="AI Avatar" class="avatar">
+      <div class="message-content">
+        Hello! Welcome to the simulated WeChat chat interface. How can I assist you today?
+      </div>
+    </div>
+  </div>
+  <div class="chat-input">
+    <input type="text" id="userInput" placeholder="Enter a message...">
+    <button onclick="sendMessage()">Send</button>
+  </div>
+</div>
+<script>
+function sendMessage() {
+  const userInput = document.getElementById('userInput');
+  const chatMessages = document.getElementById('chatMessages');
+  if (userInput.value.trim() !== '') {
+    // Add user message
+    const userMessage = document.createElement('div');
+    userMessage.className = 'message right';
+    userMessage.innerHTML = `
+      <div class="message-content">
+        ${userInput.value}
+      </div>
+    `;
+    chatMessages.appendChild(userMessage);
+    // Simulate AI reply
+    setTimeout(() => {
+      const aiMessage = document.createElement('div');
+      aiMessage.className = 'message left';
+      aiMessage.innerHTML = `
+        <img src="https://websim.ai/images/ai-avatar.png" alt="AI Avatar" class="avatar">
+        <div class="message-content">
+          You said "${userInput.value}", I understand. Is there anything else I can help you with?
+        </div>
+      `;
+      chatMessages.appendChild(aiMessage);
+      chatMessages.scrollTop = chatMessages.scrollHeight;
+    }, 1000);
+    userInput.value = '';
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+  }
+}
+document.getElementById('userInput').addEventListener('keypress', function(e) {
+  if (e.key === 'Enter') {
+    sendMessage();
+  }
+});
+</script>
+</body></html>

WqE3pXOmpC4fzd2R8.html ADDED Viewed

	@@ -0,0 +1,303 @@

+<html><head><base href="https://bugsquish.com/" /><title>BugSquish Pro - Ultimate Bug Squashing Challenge!</title><style>
+  @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Fredoka One', cursive;
+    background: linear-gradient(135deg, #8FBC8F, #3CB371);
+    touch-action: manipulation;
+    user-select: none;
+    overflow: hidden;
+  }
+  #game-container {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+    overflow: hidden;
+  }
+  .bug {
+    position: absolute;
+    cursor: pointer;
+    transition: transform 0.1s, opacity 0.3s;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .bug:active {
+    transform: scale(0.8) rotate(10deg);
+  }
+  .squished {
+    opacity: 0;
+    transform: scale(1.2) rotate(180deg);
+  }
+  #score, #timer, #level {
+    position: absolute;
+    font-size: 24px;
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    background: rgba(0,0,0,0.3);
+    padding: 5px 10px;
+    border-radius: 10px;
+  }
+  #score { top: 10px; left: 10px; }
+  #timer { top: 10px; right: 10px; }
+  #level { top: 50px; left: 10px; }
+  #start-button, #tutorial-button {
+    position: absolute;
+    font-size: 24px;
+    padding: 15px 30px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 15px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.1s;
+    font-family: 'Fredoka One', cursive;
+  }
+  #start-button:hover, #tutorial-button:hover {
+    background-color: #45a049;
+    transform: scale(1.05);
+  }
+  #start-button { top: 40%; left: 50%; transform: translate(-50%, -50%); }
+  #tutorial-button { top: 55%; left: 50%; transform: translate(-50%, -50%); }
+  .powerup {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-size: contain;
+    cursor: pointer;
+    animation: pulse 1s infinite alternate;
+  }
+  @keyframes pulse {
+    from { transform: scale(1); }
+    to { transform: scale(1.1); }
+  }
+  #tutorial {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(255,255,255,0.9);
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    display: none;
+  }
+  #tutorial h2 { margin-top: 0; }
+  #tutorial button {
+    margin-top: 10px;
+    padding: 10px 20px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+</style></head><body>
+<div id="game-container">
+  <div id="score">Score: 0</div>
+  <div id="timer">Time: 60</div>
+  <div id="level">Level: 1</div>
+  <button id="start-button">Start Game</button>
+  <button id="tutorial-button">How to Play</button>
+</div>
+<div id="tutorial">
+  <h2>How to Play BugSquish Pro</h2>
+  <p>Tap or click on bugs to squish them. Different bugs have different health and points:</p>
+  <ul>
+    <li>Ants: 1 tap, 1 point</li>
+    <li>Beetles: 2 taps, 2 points</li>
+    <li>Spiders: 3 taps, 3 points</li>
+  </ul>
+  <p>Look out for power-ups to boost your score or freeze time!</p>
+  <button onclick="closeTutorial()">Got it!</button>
+</div>
+<script>
+  const gameContainer = document.getElementById('game-container');
+  const scoreElement = document.getElementById('score');
+  const timerElement = document.getElementById('timer');
+  const levelElement = document.getElementById('level');
+  const startButton = document.getElementById('start-button');
+  const tutorialButton = document.getElementById('tutorial-button');
+  const tutorial = document.getElementById('tutorial');
+  let score = 0;
+  let timeLeft = 60;
+  let level = 1;
+  let gameInterval;
+  let bugs = [];
+  let powerups = [];
+  const bugTypes = [
+    { name: 'ant', points: 1, health: 1, size: 30, image: 'ant.png', speed: 2 },
+    { name: 'beetle', points: 2, health: 2, size: 40, image: 'beetle.png', speed: 1.5 },
+    { name: 'spider', points: 3, health: 3, size: 50, image: 'spider.png', speed: 2.5 },
+  ];
+  const powerUpTypes = [
+    { name: 'freeze', duration: 5, image: 'freeze.png' },
+    { name: 'doublePoints', duration: 10, image: 'double.png' },
+  ];
+  function createBug() {
+    const bugType = bugTypes[Math.floor(Math.random() * bugTypes.length)];
+    const bug = document.createElement('div');
+    bug.className = 'bug';
+    bug.style.width = bug.style.height = `${bugType.size}px`;
+    bug.style.backgroundImage = `url(${bugType.image})`;
+    bug.style.left = `${Math.random() * (gameContainer.clientWidth - bugType.size)}px`;
+    bug.style.top = `${Math.random() * (gameContainer.clientHeight - bugType.size)}px`;
+    const bugData = {
+      element: bug,
+      health: bugType.health,
+      points: bugType.points,
+      speed: bugType.speed * (1 + (level - 1) * 0.1),
+      direction: Math.random() * 2 * Math.PI
+    };
+    bug.addEventListener('click', () => squishBug(bugData));
+    gameContainer.appendChild(bug);
+    bugs.push(bugData);
+  }
+  function createPowerUp() {
+    if (Math.random() < 0.1) {
+      const powerUpType = powerUpTypes[Math.floor(Math.random() * powerUpTypes.length)];
+      const powerUp = document.createElement('div');
+      powerUp.className = 'powerup';
+      powerUp.style.backgroundImage = `url(${powerUpType.image})`;
+      powerUp.style.left = `${Math.random() * (gameContainer.clientWidth - 40)}px`;
+      powerUp.style.top = `${Math.random() * (gameContainer.clientHeight - 40)}px`;
+      powerUp.addEventListener('click', () => activatePowerUp(powerUpType));
+      gameContainer.appendChild(powerUp);
+      powerups.push(powerUp);
+      setTimeout(() => {
+        if (powerups.includes(powerUp)) {
+          gameContainer.removeChild(powerUp);
+          powerups = powerups.filter(p => p !== powerUp);
+        }
+      }, 5000);
+    }
+  }
+  function activatePowerUp(powerUpType) {
+    if (powerUpType.name === 'freeze') {
+      bugs.forEach(bug => bug.element.style.animationPlayState = 'paused');
+      setTimeout(() => {
+        bugs.forEach(bug => bug.element.style.animationPlayState = 'running');
+      }, powerUpType.duration * 1000);
+    } else if (powerUpType.name === 'doublePoints') {
+      const originalPoints = bugTypes.map(bug => bug.points);
+      bugTypes.forEach(bug => bug.points *= 2);
+      setTimeout(() => {
+        bugTypes.forEach((bug, index) => bug.points = originalPoints[index]);
+      }, powerUpType.duration * 1000);
+    }
+    gameContainer.removeChild(event.target);
+    powerups = powerups.filter(p => p !== event.target);
+  }
+  function moveBugs() {
+    bugs.forEach(bug => {
+      const rect = bug.element.getBoundingClientRect();
+      let newX = rect.left + Math.cos(bug.direction) * bug.speed;
+      let newY = rect.top + Math.sin(bug.direction) * bug.speed;
+      if (newX <= 0 || newX + rect.width >= gameContainer.clientWidth) {
+        bug.direction = Math.PI - bug.direction;
+      }
+      if (newY <= 0 || newY + rect.height >= gameContainer.clientHeight) {
+        bug.direction = -bug.direction;
+      }
+      bug.element.style.left = `${newX}px`;
+      bug.element.style.top = `${newY}px`;
+    });
+  }
+  function squishBug(bug) {
+    bug.health--;
+    if (bug.health <= 0) {
+      score += bug.points;
+      scoreElement.textContent = `Score: ${score}`;
+      bug.element.classList.add('squished');
+      setTimeout(() => {
+        gameContainer.removeChild(bug.element);
+        bugs = bugs.filter(b => b !== bug);
+        createBug();
+      }, 300);
+    } else {
+      bug.element.style.opacity = bug.health / bugTypes.find(t => t.points === bug.points).health;
+    }
+  }
+  function startGame() {
+    score = 0;
+    timeLeft = 60;
+    level = 1;
+    bugs.forEach(bug => gameContainer.removeChild(bug.element));
+    powerups.forEach(powerup => gameContainer.removeChild(powerup));
+    bugs = [];
+    powerups = [];
+    scoreElement.textContent = 'Score: 0';
+    timerElement.textContent = 'Time: 60';
+    levelElement.textContent = 'Level: 1';
+    startButton.style.display = 'none';
+    tutorialButton.style.display = 'none';
+    for (let i = 0; i < 10; i++) {
+      createBug();
+    }
+    gameInterval = setInterval(() => {
+      timeLeft--;
+      timerElement.textContent = `Time: ${timeLeft}`;
+      moveBugs();
+      createPowerUp();
+      if (timeLeft <= 0) {
+        clearInterval(gameInterval);
+        endGame();
+      } else if (timeLeft % 20 === 0) {
+        levelUp();
+      }
+    }, 1000);
+  }
+  function levelUp() {
+    level++;
+    levelElement.textContent = `Level: ${level}`;
+    for (let i = 0; i < 2; i++) {
+      createBug();
+    }
+  }
+  function endGame() {
+    bugs.forEach(bug => gameContainer.removeChild(bug.element));
+    powerups.forEach(powerup => gameContainer.removeChild(powerup));
+    bugs = [];
+    powerups = [];
+    alert(`Game Over! Your score: ${score}`);
+    startButton.style.display = 'block';
+    tutorialButton.style.display = 'block';
+  }
+  function showTutorial() {
+    tutorial.style.display = 'block';
+  }
+  function closeTutorial() {
+    tutorial.style.display = 'none';
+  }
+  startButton.addEventListener('click', startGame);
+  tutorialButton.addEventListener('click', showTutorial);
+</script>
+</body></html>

YQVELXyRHVtPLOLZ0.html ADDED Viewed

	@@ -0,0 +1,375 @@

+<html><head><base href="https://websim.ai/" />
+<title>PropNet Builder - Advanced Propagator Network Editor</title>
+<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.6/js/jsplumb.min.js"></script>
+<style>
+  body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: Arial, sans-serif;
+  }
+  #app {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  .controls {
+    background-color: #f0f0f0;
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+  }
+  button, select {
+    padding: 10px;
+    font-size: 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  button {
+    background-color: #4CAF50;
+    color: white;
+  }
+  button:hover {
+    background-color: #45a049;
+  }
+  select {
+    background-color: #f8f8f8;
+  }
+  .network-canvas {
+    flex-grow: 1;
+    position: relative;
+    overflow: hidden;
+    background-color: #f0f0f0;
+  }
+  .node {
+    width: 200px;
+    background-color: #3498db;
+    border-radius: 8px;
+    color: white;
+    position: absolute;
+    cursor: move;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+  .node-title {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+  .node.prompt-node { background-color: #e74c3c; }
+  .node.combine-node { background-color: #2ecc71; }
+  .node.text-node { background-color: #9b59b6; }
+  .node.delay-node { background-color: #f39c12; }
+  .connection-point {
+    width: 10px;
+    height: 10px;
+    background-color: #f39c12;
+    border-radius: 50%;
+    position: absolute;
+  }
+  .connection-point.input { top: 25px; left: -5px; }
+  .connection-point.output { top: 25px; right: -5px; }
+  .node textarea, .node input[type="number"] {
+    width: 180px;
+    margin-top: 5px;
+  }
+  .node textarea { height: 60px; resize: vertical; }
+  .node .output-text {
+    width: 180px;
+    height: 60px;
+    margin-top: 5px;
+    background-color: rgba(255, 255, 255, 0.2);
+    color: white;
+    padding: 5px;
+    border-radius: 4px;
+    overflow-y: auto;
+  }
+  .edit-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background-color: rgba(255, 255, 255, 0.3);
+    border: none;
+    border-radius: 3px;
+    padding: 2px 5px;
+    cursor: pointer;
+  }
+  .edit-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 5px;
+    z-index: 1000;
+  }
+  .edit-menu button {
+    display: block;
+    width: 100%;
+    text-align: left;
+    background: none;
+    border: none;
+    padding: 5px;
+    cursor: pointer;
+  }
+  .edit-menu button:hover {
+    background-color: #f0f0f0;
+  }
+  .status-bar {
+    background-color: #34495e;
+    color: white;
+    padding: 5px 10px;
+    text-align: center;
+  }
+</style>
+</head>
+<body>
+  <div id="app">
+    <div class="controls">
+      <button @click="addNode">Add Node</button>
+      <select v-model="selectedNodeType">
+        <option value="prompt-node">Prompt Node</option>
+        <option value="combine-node">Combine Node</option>
+        <option value="text-node">Text Node</option>
+        <option value="delay-node">Delay Node</option>
+      </select>
+    </div>
+    <div class="status-bar">
+      {{ statusMessage }}
+    </div>
+    <div class="network-canvas" ref="canvas">
+      <div v-for="node in nodes" :key="node.id" :id="node.id" class="node" :class="node.type"
+           :style="{ left: node.x + 'px', top: node.y + 'px' }">
+        <div class="node-title">{{ node.type }}</div>
+        <textarea v-if="['prompt-node', 'text-node'].includes(node.type)"
+                  v-model="node.data.text" placeholder="Enter text..." @input="handleUserInput(node)"></textarea>
+        <input v-if="node.type === 'delay-node'" type="number" v-model="node.data.delay" @input="handleUserInput(node)" placeholder="Delay (ms)">
+        <div v-if="['prompt-node', 'combine-node'].includes(node.type)" class="output-text">{{ node.data.output }}</div>
+        <div class="connection-point input"></div>
+        <div class="connection-point output"></div>
+        <button class="edit-button" @click="toggleEditMenu(node)">⋮</button>
+        <div v-if="node.showEditMenu" class="edit-menu">
+          <button @click="deleteNode(node)">Delete Node</button>
+          <button @click="disconnectNode(node)">Disconnect All</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    const { createApp, ref, onMounted, watch } = Vue;
+    createApp({
+      setup() {
+        const nodes = ref([]);
+        const selectedNodeType = ref('prompt-node');
+        const canvas = ref(null);
+        let jsPlumbInstance;
+        const statusMessage = ref('System ready');
+        let lastUserInputTime = Date.now();
+        let inactivityTimer = null;
+        onMounted(() => {
+          jsPlumbInstance = jsPlumb.getInstance();
+          jsPlumbInstance.setContainer(canvas.value);
+          jsPlumbInstance.bind("ready", function() {
+            jsPlumbInstance.registerConnectionType("basic", {
+              anchor: ["Left", "Right"],
+              connector: ["Bezier", { curviness: 50 }],
+              paintStyle: { stroke: "#f39c12", strokeWidth: 4 },
+              hoverPaintStyle: { stroke: "#2980b9", strokeWidth: 6 },
+            });
+          });
+          jsPlumbInstance.bind("connection", function(info) {
+            const sourceNode = nodes.value.find(node => node.id === info.sourceId);
+            const targetNode = nodes.value.find(node => node.id === info.targetId);
+            if (sourceNode && targetNode) {
+              if (!targetNode.inputs) targetNode.inputs = [];
+              targetNode.inputs.push(sourceNode);
+              updateNode(targetNode);
+            }
+          });
+          jsPlumbInstance.bind("connectionDetached", function(info) {
+            const targetNode = nodes.value.find(node => node.id === info.targetId);
+            if (targetNode) {
+              targetNode.inputs = targetNode.inputs.filter(input => input.id !== info.sourceId);
+              updateNode(targetNode);
+            }
+          });
+          startInactivityTimer();
+        });
+        function addNode() {
+          const newNode = {
+            id: `node-${Date.now()}`,
+            type: selectedNodeType.value,
+            x: Math.random() * (canvas.value.clientWidth - 200),
+            y: Math.random() * (canvas.value.clientHeight - 100),
+            data: {
+              text: '',
+              output: '',
+              delay: 1000,
+            },
+            inputs: [],
+            showEditMenu: false,
+          };
+          nodes.value.push(newNode);
+          setTimeout(() => {
+            makeNodeDraggable(newNode.id);
+            addEndpoints(newNode.id);
+          }, 0);
+          handleUserInput();
+        }
+        function makeNodeDraggable(id) {
+          jsPlumbInstance.draggable(id, {
+            grid: [10, 10],
+            stop: function(event) {
+              const nodeElement = event.el;
+              const nodeId = nodeElement.id;
+              const node = nodes.value.find(n => n.id === nodeId);
+              if (node) {
+                node.x = parseInt(nodeElement.style.left, 10);
+                node.y = parseInt(nodeElement.style.top, 10);
+              }
+              handleUserInput();
+            }
+          });
+        }
+        function addEndpoints(id) {
+          jsPlumbInstance.addEndpoint(id, {
+            anchor: "Left",
+            isSource: false,
+            isTarget: true,
+            maxConnections: -1,
+            endpoint: ["Dot", { radius: 7 }],
+            paintStyle: { fill: "#f39c12" },
+          });
+          jsPlumbInstance.addEndpoint(id, {
+            anchor: "Right",
+            isSource: true,
+            isTarget: false,
+            maxConnections: -1,
+            endpoint: ["Dot", { radius: 7 }],
+            paintStyle: { fill: "#f39c12" },
+            connectorStyle: { stroke: "#f39c12", strokeWidth: 4 },
+            connector: ["Bezier", { curviness: 50 }],
+            connectionType: "basic",
+          });
+        }
+        async function updateNode(node) {
+          const inputData = node.inputs.map(input => input.data.output || input.data.text);
+          if (node.type === 'prompt-node') {
+            const instruction = node.data.text;
+            try {
+              statusMessage.value = 'Processing request...';
+              await new Promise(resolve => setTimeout(resolve, 5000)); // Minimum 5 second delay
+              const response = await fetch('/api/llm', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ instruction, input: inputData.join('\n') }),
+              });
+              const data = await response.json();
+              node.data.output = data.response;
+              statusMessage.value = 'Request completed';
+            } catch (error) {
+              console.error('Error calling LLM API:', error);
+              node.data.output = 'Error: Unable to process request';
+              statusMessage.value = 'Error in processing request';
+            }
+          } else if (node.type === 'text-node') {
+            node.data.output = node.data.text;
+          } else if (node.type === 'combine-node') {
+            node.data.output = inputData.join('\n');
+          } else if (node.type === 'delay-node') {
+            setTimeout(() => {
+              node.data.output = inputData[0] || '';
+              propagateUpdate(node);
+            }, Math.max(node.data.delay, 5000)); // Ensure minimum 5 second delay
+            return; // Early return to prevent immediate propagation
+          }
+          propagateUpdate(node);
+        }
+        function propagateUpdate(node) {
+          const connectedNodes = nodes.value.filter(n => n.inputs.includes(node));
+          connectedNodes.forEach(updateNode);
+          Vue.nextTick(() => {
+            jsPlumbInstance.repaintEverything();
+          });
+        }
+        function toggleEditMenu(node) {
+          node.showEditMenu = !node.showEditMenu;
+          handleUserInput();
+        }
+        function deleteNode(nodeToDelete) {
+          jsPlumbInstance.remove(nodeToDelete.id);
+          nodes.value = nodes.value.filter(node => node.id !== nodeToDelete.id);
+          nodes.value.forEach(node => {
+            node.inputs = node.inputs.filter(input => input.id !== nodeToDelete.id);
+          });
+          handleUserInput();
+        }
+        function disconnectNode(node) {
+          jsPlumbInstance.deleteConnectionsForElement(node.id);
+          node.inputs = [];
+          updateNode(node);
+          handleUserInput();
+        }
+        function handleUserInput(node) {
+          lastUserInputTime = Date.now();
+          if (inactivityTimer) {
+            clearTimeout(inactivityTimer);
+          }
+          startInactivityTimer();
+          if (node) {
+            updateNode(node);
+          }
+        }
+        function startInactivityTimer() {
+          inactivityTimer = setTimeout(() => {
+            statusMessage.value = 'Inactive for 1 minute. Prompt requests paused.';
+          }, 60000);
+        }
+        return {
+          nodes,
+          selectedNodeType,
+          canvas,
+          statusMessage,
+          addNode,
+          updateNode,
+          toggleEditMenu,
+          deleteNode,
+          disconnectNode,
+          handleUserInput
+        };
+      }
+    }).mount('#app');
+  </script>
+</body></html>

b0nTIje2IorBnxbn4.html ADDED Viewed

	@@ -0,0 +1,181 @@

+<html><head><base href="https://websim.ai/geometry-insights"><title>Geometry Insights - Interactive 3D Weaire-Phelan Structure with Dodecahedra</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<style>
+body {
+  font-family: Arial, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  margin: 0;
+  padding: 20px;
+  background-color: #f0f8ff;
+}
+h1 {
+  color: #1a5f7a;
+  border-bottom: 2px solid #1a5f7a;
+  padding-bottom: 10px;
+}
+#model-container {
+  width: 100%;
+  height: 400px;
+  background-color: #e6f3ff;
+  border: 1px solid #b0d4ff;
+  border-radius: 5px;
+  margin: 20px 0;
+}
+.controls {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 10px;
+}
+button {
+  background-color: #4a90e2;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+button:hover {
+  background-color: #357abd;
+}
+</style>
+</head><body>
+<h1>Interactive 3D Weaire-Phelan Structure with Dodecahedra</h1>
+<div id="model-container"></div>
+<div class="controls">
+  <button id="rotate">Toggle Rotation</button>
+  <button id="wireframe">Toggle Wireframe</button>
+  <button id="explode">Explode/Implode</button>
+</div>
+<script>
+let scene, camera, renderer, dodecahedra = [];
+let isRotating = true;
+let isWireframe = false;
+let isExploded = false;
+function init() {
+  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);
+  document.getElementById('model-container').appendChild(renderer.domElement);
+  camera.position.z = 10;
+  createWeairePhelanStructure();
+  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+  scene.add(ambientLight);
+  const pointLight = new THREE.PointLight(0xffffff, 0.5);
+  pointLight.position.set(5, 5, 5);
+  scene.add(pointLight);
+  window.addEventListener('resize', onWindowResize, false);
+  document.getElementById('rotate').addEventListener('click', toggleRotation);
+  document.getElementById('wireframe').addEventListener('click', toggleWireframe);
+  document.getElementById('explode').addEventListener('click', toggleExplode);
+  animate();
+}
+function createWeairePhelanStructure() {
+  const phi = (1 + Math.sqrt(5)) / 2; // Golden ratio
+  const scale = 0.5;
+  const dodecahedronGeometry = new THREE.DodecahedronGeometry(scale);
+  const material = new THREE.MeshPhongMaterial({ color: 0x4a90e2, flatShading: true });
+  // Create a 2x2x2 grid of dodecahedra
+  for (let x = -1; x <= 1; x += 2) {
+    for (let y = -1; y <= 1; y += 2) {
+      for (let z = -1; z <= 1; z += 2) {
+        const dodecahedron = new THREE.Mesh(dodecahedronGeometry, material);
+        dodecahedron.position.set(x * scale * phi, y * scale * phi, z * scale * phi);
+        scene.add(dodecahedron);
+        dodecahedra.push(dodecahedron);
+      }
+    }
+  }
+}
+function animate() {
+  requestAnimationFrame(animate);
+  if (isRotating) {
+    dodecahedra.forEach(dodecahedron => {
+      dodecahedron.rotation.x += 0.01;
+      dodecahedron.rotation.y += 0.01;
+    });
+  }
+  renderer.render(scene, camera);
+}
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+function toggleRotation() {
+  isRotating = !isRotating;
+}
+function toggleWireframe() {
+  isWireframe = !isWireframe;
+  dodecahedra.forEach(dodecahedron => {
+    dodecahedron.material.wireframe = isWireframe;
+  });
+}
+function toggleExplode() {
+  isExploded = !isExploded;
+  const phi = (1 + Math.sqrt(5)) / 2;
+  const scale = isExploded ? 1 : 0.5;
+  dodecahedra.forEach(dodecahedron => {
+    const { x, y, z } = dodecahedron.position;
+    dodecahedron.position.set(
+      x > 0 ? scale * phi : -scale * phi,
+      y > 0 ? scale * phi : -scale * phi,
+      z > 0 ? scale * phi : -scale * phi
+    );
+  });
+}
+init();
+</script>
+<p>This interactive 3D model now demonstrates a simplified version of the Weaire-Phelan structure using dodecahedra. While it doesn't capture all the intricacies of the actual structure (which includes both dodecahedra and tetrakaidecahedra), it provides a visual representation of how the dodecahedral cells are arranged in three-dimensional space.</p>
+<p>Use the controls below the model to:</p>
+<ul>
+  <li><strong>Toggle Rotation:</strong> Start or stop the automatic rotation of the structure.</li>
+  <li><strong>Toggle Wireframe:</strong> Switch between solid and wireframe views to better observe the structure's geometry.</li>
+  <li><strong>Explode/Implode:</strong> Separate or bring together the dodecahedra to better visualize individual cells.</li>
+</ul>
+<p>Key points about this model:</p>
+<ul>
+  <li>The structure consists of 8 dodecahedra arranged in a 2x2x2 grid.</li>
+  <li>Each dodecahedron is positioned using the golden ratio (phi) to approximate the Weaire-Phelan structure's proportions.</li>
+  <li>The explode/implode function helps visualize how these cells pack together in the structure.</li>
+</ul>
+<p>Remember, the actual Weaire-Phelan structure is more complex, consisting of both irregular dodecahedra and tetrakaidecahedra. This model focuses on the dodecahedral component to give you a general idea of its three-dimensional nature and packing.</p>
+<p>For a more detailed exploration of the Weaire-Phelan structure and its properties, consider visiting our other pages:</p>
+<ul>
+  <li><a href="https://websim.ai/geometry-insights/weaire-phelan-full-structure">Complete Weaire-Phelan Structure</a></li>
+  <li><a href="https://websim.ai/geometry-insights/foam-geometry">Geometry of Foams and Minimal Surfaces</a></li>
+  <li><a href="https://websim.ai/geometry-insights/applications-in-nature">Weaire-Phelan Structure in Nature</a></li>
+</ul>
+</body></html>

bDWjOaPOtlaMLADFT.html ADDED Viewed

	@@ -0,0 +1,56 @@

+<html><head><base href="https://websim.ai" />
+  <title>WebSim Video Player</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f0f0f0;
+      margin: 0;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .video-container {
+      background-color: white;
+      border-radius: 10px;
+      padding: 20px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    h1 {
+      color: #333;
+      margin-bottom: 20px;
+    }
+    .description {
+      max-width: 512px;
+      text-align: center;
+      margin-top: 20px;
+      color: #666;
+    }
+    .related-links {
+      margin-top: 30px;
+    }
+    .related-links a {
+      display: inline-block;
+      margin: 0 10px;
+      color: #0066cc;
+      text-decoration: none;
+    }
+    .related-links a:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+  <h1>WebSim Educational Video Portal</h1>
+  <div class="video-container">
+    <iframe width="512" height="332" src="https://player.pbs.org/viralplayer/3009692333/" allowfullscreen allow="encrypted-media" style="border: 0;"></iframe>
+  </div>
+  <p class="description">
+    Welcome to the WebSim Educational Video Portal. Here, we curate thought-provoking content from various sources to expand your understanding of the digital world and beyond.
+  </p>
+  <div class="related-links">
+    <a href="https://websim.ai/learn/web-history">Web History</a>
+    <a href="https://websim.ai/explore/digital-literacy">Digital Literacy</a>
+    <a href="https://websim.ai/simulate/future-web">Simulate Future Web</a>
+  </div>
+</body></html>

eDcZGrhdCEYZ00ATI.html ADDED Viewed

	@@ -0,0 +1,214 @@

+<html><head><base href="https://websim.ai/c/code-interpreter"><title>Cute Chick Catches Basketball</title>
+<style>
+body {
+  font-family: 'Comic Sans MS', cursive, sans-serif;
+  background-color: #FFE5E5;
+  margin: 0;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+.game-container {
+  background-color: #FFF0F5;
+  border-radius: 20px;
+  box-shadow: 0 0 20px rgba(255,105,180,0.3);
+  padding: 20px;
+  text-align: center;
+}
+canvas {
+  border: 4px solid #FF69B4;
+  border-radius: 10px;
+  background-color: #E6E6FA;
+}
+h1 {
+  color: #FF1493;
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+p {
+  color: #8B008B;
+  font-size: 18px;
+}
+button {
+  background-color: #FF69B4;
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 18px;
+  margin: 10px 2px;
+  cursor: pointer;
+  border-radius: 25px;
+  transition: background-color 0.3s;
+}
+button:hover {
+  background-color: #FF1493;
+}
+#score {
+  font-size: 24px;
+  font-weight: bold;
+  color: #FF1493;
+}
+</style>
+</head>
+<body>
+<div class="game-container">
+  <h1>Cute Chick Catches Basketball</h1>
+  <canvas id="gameCanvas" width="400" height="400"></canvas>
+  <p>Use the mouse to move the cute chick and catch the colorful basketballs!</p>
+  <button onclick="startGame()">Start Game</button>
+  <p id="score">Score: 0</p>
+</div>
+<script>
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+let chickenX = 200;
+let chickenY = 350;
+let ballX = Math.random() * 360 + 20;
+let ballY = 0;
+let ballSpeed = 4;
+let score = 0;
+let gameRunning = false;
+function drawChicken() {
+  // Body
+  ctx.fillStyle = '#FFD700';
+  ctx.beginPath();
+  ctx.arc(chickenX, chickenY - 25, 25, 0, Math.PI * 2);
+  ctx.fill();
+  // Overalls
+  ctx.fillStyle = '#FFFFFF';
+  ctx.fillRect(chickenX - 20, chickenY - 15, 40, 35);
+  ctx.strokeStyle = '#000000';
+  ctx.lineWidth = 2;
+  ctx.strokeRect(chickenX - 20, chickenY - 15, 40, 35);
+  // Straps
+  ctx.beginPath();
+  ctx.moveTo(chickenX - 15, chickenY - 15);
+  ctx.lineTo(chickenX - 15, chickenY + 20);
+  ctx.moveTo(chickenX + 15, chickenY - 15);
+  ctx.lineTo(chickenX + 15, chickenY + 20);
+  ctx.stroke();
+  // Hair
+  ctx.fillStyle = '#808080';
+  ctx.beginPath();
+  ctx.moveTo(chickenX - 20, chickenY - 30);
+  ctx.lineTo(chickenX, chickenY - 45);
+  ctx.lineTo(chickenX + 20, chickenY - 30);
+  ctx.closePath();
+  ctx.fill();
+  // Eyes
+  ctx.fillStyle = '#000000';
+  ctx.beginPath();
+  ctx.arc(chickenX - 10, chickenY - 30, 3, 0, Math.PI * 2);
+  ctx.arc(chickenX + 10, chickenY - 30, 3, 0, Math.PI * 2);
+  ctx.fill();
+  // Smile
+  ctx.beginPath();
+  ctx.arc(chickenX, chickenY - 20, 12, 0.1 * Math.PI, 0.9 * Math.PI);
+  ctx.stroke();
+  // Legs
+  ctx.strokeStyle = '#FFA500';
+  ctx.lineWidth = 3;
+  ctx.beginPath();
+  ctx.moveTo(chickenX - 10, chickenY + 20);
+  ctx.lineTo(chickenX - 10, chickenY + 30);
+  ctx.moveTo(chickenX + 10, chickenY + 20);
+  ctx.lineTo(chickenX + 10, chickenY + 30);
+  ctx.stroke();
+}
+function drawBall() {
+  let gradient = ctx.createRadialGradient(ballX, ballY, 0, ballX, ballY, 20);
+  gradient.addColorStop(0, '#FF69B4');
+  gradient.addColorStop(0.5, '#FF1493');
+  gradient.addColorStop(1, '#C71585');
+  ctx.fillStyle = gradient;
+  ctx.beginPath();
+  ctx.arc(ballX, ballY, 20, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.strokeStyle = '#FFFFFF';
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(ballX - 20, ballY);
+  ctx.lineTo(ballX + 20, ballY);
+  ctx.moveTo(ballX, ballY - 20);
+  ctx.lineTo(ballX, ballY + 20);
+  ctx.stroke();
+}
+function updateGame() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawChicken();
+  drawBall();
+  ballY += ballSpeed;
+  if (ballY > chickenY - 45 && ballY < chickenY + 10 &&
+      Math.abs(ballX - chickenX) < 40) {
+    ballY = 0;
+    ballX = Math.random() * 360 + 20;
+    score++;
+    updateScore();
+    ballSpeed += 0.2;
+  }
+  if (ballY > canvas.height) {
+    gameRunning = false;
+    showGameOver();
+  }
+  if (gameRunning) {
+    requestAnimationFrame(updateGame);
+  }
+}
+function startGame() {
+  if (!gameRunning) {
+    gameRunning = true;
+    score = 0;
+    ballSpeed = 4;
+    ballY = 0;
+    ballX = Math.random() * 360 + 20;
+    updateScore();
+    updateGame();
+  }
+}
+function updateScore() {
+  document.getElementById('score').textContent = `Score: ${score}`;
+}
+function showGameOver() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = '#FFFFFF';
+  ctx.font = '30px Comic Sans MS';
+  ctx.textAlign = 'center';
+  ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 30);
+  ctx.fillText(`Your total score is: ${score}`, canvas.width / 2, canvas.height / 2 + 20);
+}
+canvas.addEventListener('mousemove', (e) => {
+  let rect = canvas.getBoundingClientRect();
+  chickenX = e.clientX - rect.left;
+  chickenX = Math.max(25, Math.min(chickenX, canvas.width - 25));
+});
+</script>
+</body></html>

eLVIZm95PqDycHF0i.html ADDED Viewed

	@@ -0,0 +1,189 @@

+<html><head><base href="https://websim.ai" />
+<title>Welcome to WebSim - Interactive Web Environment</title>
+<style>
+  body, html {
+    margin: 0;
+    padding: 0;
+    font-family: 'Ubuntu Condensed', Arial, sans-serif;
+    background-color: #1a1a2e;
+    color: #e0e0e0;
+    height: 100%;
+    overflow: hidden;
+  }
+  #main_canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+  #load_progress {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: 20px;
+  }
+  .body_dialog {
+    background-color: rgba(26, 26, 46, 0.9);
+    border: 2px solid #4a4e69;
+    border-radius: 10px;
+    color: #e0e0e0;
+    padding: 20px;
+    max-width: 80%;
+    max-height: 80%;
+    overflow-y: auto;
+  }
+  .dialog_content_left, .dialog_content_middle, .dialog_content_right {
+    display: inline-block;
+    vertical-align: top;
+    padding: 10px;
+  }
+  .menu {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 100;
+  }
+  .menu-item {
+    display: block;
+    margin-bottom: 10px;
+    padding: 10px;
+    background-color: #4a4e69;
+    color: #e0e0e0;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+  }
+  .menu-item:hover {
+    background-color: #22223b;
+  }
+  @keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+    100% { transform: translateY(0px); }
+  }
+  .floating-element {
+    position: absolute;
+    animation: float 6s ease-in-out infinite;
+  }
+</style>
+</head>
+<body>
+  <canvas id="main_canvas"></canvas>
+  <progress id="load_progress" value="0" max="100"></progress>
+  <nav class="menu">
+    <a href="#home" class="menu-item">Home</a>
+    <a href="#about" class="menu-item">About</a>
+    <a href="#projects" class="menu-item">Projects</a>
+    <a href="#technologies" class="menu-item">Technologies</a>
+    <a href="#contact" class="menu-item">Contact</a>
+  </nav>
+  <div id="content"></div>
+  <script>
+    const canvas = document.getElementById('main_canvas');
+    const ctx = canvas.getContext('2d');
+    const progress = document.getElementById('load_progress');
+    const content = document.getElementById('content');
+    // Resize canvas to fit window
+    function resizeCanvas() {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    }
+    window.addEventListener('resize', resizeCanvas);
+    resizeCanvas();
+    // Simulate loading
+    let loadProgress = 0;
+    const loadInterval = setInterval(() => {
+      loadProgress += Math.random() * 10;
+      if (loadProgress >= 100) {
+        loadProgress = 100;
+        clearInterval(loadInterval);
+        progress.style.display = 'none';
+        startSimulation();
+      }
+      progress.value = loadProgress;
+    }, 200);
+    // WebSim environment simulation
+    function startSimulation() {
+      const particles = [];
+      const maxParticles = 100;
+      class Particle {
+        constructor() {
+          this.x = Math.random() * canvas.width;
+          this.y = Math.random() * canvas.height;
+          this.size = Math.random() * 5 + 1;
+          this.speedX = Math.random() * 3 - 1.5;
+          this.speedY = Math.random() * 3 - 1.5;
+          this.color = `hsl(${Math.random() * 360}, 50%, 50%)`;
+        }
+        update() {
+          this.x += this.speedX;
+          this.y += this.speedY;
+          if (this.size > 0.2) this.size -= 0.1;
+          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 = this.color;
+          ctx.beginPath();
+          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+      function handleParticles() {
+        for (let i = 0; i < particles.length; i++) {
+          particles[i].update();
+          particles[i].draw();
+          if (particles[i].size <= 0.2) {
+            particles.splice(i, 1);
+            i--;
+          }
+        }
+        if (particles.length < maxParticles) {
+          particles.push(new Particle());
+        }
+      }
+      function animate() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        handleParticles();
+        requestAnimationFrame(animate);
+      }
+      animate();
+    }
+    // Simple routing
+    function loadContent(route) {
+      const contentMap = {
+        '#home': 'Welcome to WebSim - where imagination meets the web!',
+        '#about': 'WebSim is an interactive web environment simulation platform.',
+        '#projects': 'Explore endless possibilities with WebSim projects.',
+        '#technologies': 'WebSim utilizes cutting-edge web technologies.',
+        '#contact': 'Get in touch with us at [email protected]'
+      };
+      content.innerHTML = `<h1>${contentMap[route] || 'Page not found'}</h1>`;
+    }
+    window.addEventListener('hashchange', () => loadContent(window.location.hash));
+    loadContent(window.location.hash || '#home');
+  </script>
+</body></html>

ffHrkxgFpIRIFJFH2.html ADDED Viewed

	@@ -0,0 +1,163 @@

+<html><head><base href="https://websim.ai" />
+<title>3D Carousel Gallery - WebSim</title>
+<style>
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+  margin: 0;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+.container {
+  background-color: white;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  max-width: 800px;
+  width: 100%;
+}
+h1 {
+  color: #333;
+  text-align: center;
+}
+.carousel {
+  position: relative;
+  width: 100%;
+  height: 400px;
+  perspective: 1000px;
+  transform-style: preserve-3d;
+}
+.carousel__face {
+  position: absolute;
+  width: 300px;
+  height: 187px;
+  top: 20px;
+  left: 10px;
+  right: 10px;
+  background-size: cover;
+  box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.5);
+  display: flex;
+}
+.carousel__face:nth-child(1) { background-image: url("https://images.websim.ai/v1/sample/nature1"); }
+.carousel__face:nth-child(2) { background-image: url("https://images.websim.ai/v1/sample/nature2"); }
+.carousel__face:nth-child(3) { background-image: url("https://images.websim.ai/v1/sample/nature3"); }
+.carousel__face:nth-child(4) { background-image: url("https://images.websim.ai/v1/sample/nature4"); }
+.carousel__face:nth-child(5) { background-image: url("https://images.websim.ai/v1/sample/nature5"); }
+.carousel__face:nth-child(6) { background-image: url("https://images.websim.ai/v1/sample/nature6"); }
+.carousel__face:nth-child(1) { transform: rotateY(  0deg) translateZ(430px); }
+.carousel__face:nth-child(2) { transform: rotateY( 60deg) translateZ(430px); }
+.carousel__face:nth-child(3) { transform: rotateY(120deg) translateZ(430px); }
+.carousel__face:nth-child(4) { transform: rotateY(180deg) translateZ(430px); }
+.carousel__face:nth-child(5) { transform: rotateY(240deg) translateZ(430px); }
+.carousel__face:nth-child(6) { transform: rotateY(300deg) translateZ(430px); }
+@keyframes rotate {
+  from { transform: rotateY(0deg); }
+  to { transform: rotateY(-360deg); }
+}
+.carousel {
+  animation: rotate 15s infinite linear;
+}
+.carousel__face {
+  border: 2px solid white;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.image-title {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  color: white;
+  font-size: 24px;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+.description {
+  text-align: center;
+  margin-top: 20px;
+  color: #666;
+}
+.controls {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+.control-btn {
+  background-color: #4CAF50;
+  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: 5px;
+  transition: background-color 0.3s;
+}
+.control-btn:hover {
+  background-color: #45a049;
+}
+.control-btn:active {
+  background-color: #3e8e41;
+}
+</style>
+</head>
+<body>
+<div class="container">
+  <h1>3D Carousel Gallery</h1>
+  <div class="carousel">
+    <div class="carousel__face"><span class="image-title">Mountain View</span></div>
+    <div class="carousel__face"><span class="image-title">Serene Lake</span></div>
+    <div class="carousel__face"><span class="image-title">Forest Path</span></div>
+    <div class="carousel__face"><span class="image-title">Autumn Colors</span></div>
+    <div class="carousel__face"><span class="image-title">Coastal Sunset</span></div>
+    <div class="carousel__face"><span class="image-title">Misty Valley</span></div>
+  </div>
+  <p class="description">
+    Experience the beauty of nature through our innovative 3D carousel gallery.
+    This mesmerizing display showcases breathtaking landscapes from around the world,
+    allowing you to immerse yourself in stunning natural scenery with just a glance.
+  </p>
+  <div class="controls">
+    <button class="control-btn" id="pauseBtn">Pause</button>
+    <button class="control-btn" id="resumeBtn">Resume</button>
+  </div>
+</div>
+<script>
+const carousel = document.querySelector('.carousel');
+const pauseBtn = document.getElementById('pauseBtn');
+const resumeBtn = document.getElementById('resumeBtn');
+pauseBtn.addEventListener('click', () => {
+  carousel.style.animationPlayState = 'paused';
+});
+resumeBtn.addEventListener('click', () => {
+  carousel.style.animationPlayState = 'running';
+});
+</script>
+</body></html>

ka7hqzOKlKKqpdsut.html ADDED Viewed

	@@ -0,0 +1,113 @@

+<html><head><base href="https://websim.ai"><title>Gallery WebSim</title><style>
+body {
+  background-color: #152836;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+}
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+.gallery-item {
+  width: 200px;
+  border: 3px solid #FFF;
+  border-radius: 3px;
+  overflow: hidden;
+  position: relative;
+  transition: transform 0.3s ease;
+}
+.gallery-item:hover {
+  transform: scale(1.05);
+}
+.gallery-item img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.gallery-item .caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0,0,0,0.7);
+  color: #fff;
+  padding: 10px;
+  transform: translateY(100%);
+  transition: transform 0.3s ease;
+}
+.gallery-item:hover .caption {
+  transform: translateY(0);
+}
+h1 {
+  color: #fff;
+  text-align: center;
+  margin-bottom: 30px;
+}
+.websim-footer {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  color: #fff;
+  font-size: 14px;
+}
+</style></head>
+<body>
+  <h1>WebSim Gallery Showcase</h1>
+  <div class="gallery">
+    <div class="gallery-item">
+      <img src="https://websim.ai/img/gallery/fading-light.jpg" alt="Fading Light" width="200" height="150">
+      <div class="caption">
+        <h4>Fading Light</h4>
+        <p>Classic view from Rigwood Jetty on Coniston Water</p>
+      </div>
+    </div>
+    <div class="gallery-item">
+      <img src="https://websim.ai/img/gallery/bowness-bay.jpg" alt="Bowness Bay" width="200" height="150">
+      <div class="caption">
+        <h4>Bowness Bay</h4>
+        <p>A beautiful Sunrise en-route to Keswick</p>
+      </div>
+    </div>
+    <div class="gallery-item">
+      <img src="https://websim.ai/img/gallery/virtual-reality.jpg" alt="Virtual Reality Experience" width="200" height="150">
+      <div class="caption">
+        <h4>Virtual Reality Experience</h4>
+        <p>Immersive WebSim VR technology showcase</p>
+      </div>
+    </div>
+    <div class="gallery-item">
+      <img src="https://websim.ai/img/gallery/ai-generated-art.jpg" alt="AI Generated Art" width="200" height="150">
+      <div class="caption">
+        <h4>AI Generated Art</h4>
+        <p>Stunning artwork created by WebSim's AI</p>
+      </div>
+    </div>
+  </div>
+  <div class="websim-footer">
+    Powered by WebSim.ai - Explore the possibilities
+  </div>
+  <script>
+    document.querySelectorAll('.gallery-item').forEach(item => {
+      item.addEventListener('click', () => {
+        window.location.href = `https://websim.ai/gallery/${item.querySelector('h4').textContent.toLowerCase().replace(' ', '-')}`;
+      });
+    });
+  </script>
+</body></html>

le6kYD6PULsHCIrx0.html ADDED Viewed

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

+<html><head><base href="https://websim.ai/">
+<title>WebSim - Basic Data Entry Form</title>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
+<script src="./oidc_web/oidc-web.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/rdflib.min.js"></script>
+<style>
+.error { border: 2px solid red; }
+.errorMessage { color: red; }
+td { word-wrap: break-word; }
+#spinner {
+  position: fixed;
+  width: 100%;
+  left: 0;right: 0;top: 0;bottom: 0;
+  background-color: rgba(255,255,255,0.7);
+  z-index: 9999;
+  display: none;
+}
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+#spinner::after {
+  content:'';
+  display:block;
+  position:absolute;
+  left:48%;top:40%;
+  width:40px;height:40px;
+  border-style:solid;
+  border-color:black;
+  border-top-color:transparent;
+  border-width: 4px;
+  border-radius:50%;
+  -webkit-animation: spin .8s linear infinite;
+  animation: spin .8s linear infinite;
+}
+.dropdown-menu {
+   padding-left: 15px;
+   width: 450px;
+}
+.glyphicon.glyphicon-cog {
+    font-size: 20px;
+}
+#snackbar {
+  visibility: hidden;
+  min-width: 250px;
+  margin-left: -125px;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+  padding: 16px;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  bottom: 30px;
+  font-size: 17px;
+}
+#snackbar.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+@-webkit-keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+@keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+@-webkit-keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}
+@keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}
+</style>
+</head>
+<body>
+<div id="snackbar">
+  <div id="msg1"></div>
+  <div id="msg2"></div>
+</div>
+<div id="spinner"></div>
+<div class="container">
+  <ul class="nav nav-tabs">
+    <li class="active" id="dbmsTabID"><a data-toggle="tab" href="#dbmsID">DBMS</a></li>
+    <li id="fsTabID"><a data-toggle="tab" href="#fsID">File System</a></li>
+    <li id="aboutTabID"><a data-toggle="tab" href="#aboutID">About</a></li>
+    <li class="pull-right dropdown">
+      <a class="dropdown-toggle" style="max-height: 40px" data-toggle="dropdown" href="#">
+        <span class="glyphicon glyphicon-cog"></span>
+        <span class="caret"></span>
+      </a>
+      <ul class="dropdown-menu">
+        <div class="checkbox">
+          <label><input id="fctID" type="checkbox" value="">Faceted Browser Links</label>
+        </div>
+        <div class="checkbox">
+          <label><input id="uriID" type="checkbox" value="">Shortened URI Results</label>
+        </div>
+        <div class="checkbox">
+          <label><input id="riID" type="checkbox" value="">owl:sameAs Reasoning & Inference</label>
+        </div>
+        <div class="checkbox">
+          <label><input id="ruleNameID" type="checkbox" value="">Inference Rule</label>
+          <input type="text" style="max-width: 250px" value="urn:ifp:inference:rule" id="infRuleNameID">
+        </div>
+        <div>
+          <label style="font-weight: normal">SPARQL Endpoint</label>
+          <input type="text" style="width: 20em" value="https://linkeddata.uriburner.com/sparql" id="sparql_endpoint">
+        </div>
+        <div class="checkbox">
+          <label><input id="cmdID" type="checkbox" value="">Console Log Commands</label>
+        </div>
+        <div class="form-group">
+          <label style="font-weight: normal" for="resultsID">Results per Page:</label>
+          <input type="text" style="width: 5em" value="5" id="resultsID">
+        </div>
+        <h5>Return Data As:</h5>
+        <div class="radio">
+          <label><input id="defaultID" type="radio" name="radiogroup" checked>Default (JSON)</label>
+        </div>
+        <div class="radio">
+          <label><input id="csvID" type="radio" name="radiogroup">CSV</label>
+        </div>
+        <div class="radio">
+          <label><input id="xmlID" type="radio" name="radiogroup">XML</label>
+        </div>
+      </ul>
+    </li>
+    <a id="logged-href" href="" title="" style="margin-top: 5px; margin-left: 15px; max-height: 35px" class="pull-right hidden"><img id="uid-icon" src="./common/uid.png"></a>
+    <li class="pull-right"><button id="loginID" style="margin-top: 5px" type="button" class="btn btn-primary hidden">Login</button></li>
+    <li class="pull-right"><button id="logoutID" style="margin-top: 5px" type="button" class="btn btn-danger hidden">Logout</button></li>
+    <li class="pull-right"><a id="permalinkID">Permalink</a></li>
+  </ul>
+  <div class="tab-content">
+    <div id="dbmsID" class="tab-pane fade in active">
+      <div class="container">
+        <div class="row">
+          <div class="col-xs-6">
+            <h1 style="text-align:center">Data Entry</h1>
+            <form id="dbmsFormID" class="form" method="post">
+              <div class="form-group">
+                <label for="subjectID">Subject</label>
+                <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-original-title="If the subject is not a URI it will be used as the fragment identifier of a Relative URI."></span>
+                <textarea class="form-control" placeholder="Subject" rows="1" style="resize:vertical" id="subjectID"></textarea>
+                <p class="errorMessage" id="subjectErrorID"></p>
+              </div>
+              <div class="form-group">
+                <label for="predicateID">Predicate</label>
+                <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-original-title="The predicate can either be a URI (ex. http://xmlns.com/foaf/0.1/name) or a curie (ex. foaf:name) because these are preloaded in Virtuoso."></span>
+                <input type="text" class="form-control" placeholder="Predicate" id="predicateID">
+                <p class="errorMessage" id="predicateErrorID"></p>
+              </div>
+              <div class="form-group">
+                <label for="objectID">Object</label>
+                <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-original-title="Whether or not the Object is a literal value or a reference is determined by the range of the predicate. Quoting the Object will override this feature and make it a literal value."></span>
+                <textarea class="form-control" placeholder="Object" rows="1" style="resize:vertical" id="objectID"></textarea>
+              </div>
+              <div class="form-group">
+                <label for="docNameID">Document Name</label>
+                <input type="text" class="form-control" value="urn:records:test" id="docNameID">
+                <p class="errorMessage" id="docNameErrorID"></p>
+              </div>
+              <div class="button-wrapper">
+                <span>
+                  <button id="clearBtnID" type="button" class="btn btn-primary">Clear</button>
+                  <button id="insertBtnID" type="button" class="btn btn-success">Add</button>
+                  <button id="deleteBtnID" type="button" class="btn btn-danger">Delete</button>
+                  <button id="queryBtnID" type="button" class="btn btn-warning">Query</button>
+                  <button id="dataBtnID" type="button" class="btn btn-info">All Data</button>
+                </span>
+              </div>
+            </form>
+          </div>
+          <div class="col-xs-6">
+            <h1 style="text-align:center">Data</h1>
+            <table id="dbmsTableID" class="table table-bordered" style="table-layout: fixed; max-width:600px;">
+              <div style="padding-top: 25px"></div>
+            </table>
+            <div class="button-wrapper">
+              <button id="firstBtnID" type="button" style="background-color: #99A3A4; color: #FDFEFE; margin-right: 5px" class="btn pull-left">First</button>
+              <button id="prevBtnID" type="button" style="background-color: #99A3A4; color: #FDFEFE" class="btn pull-left">Prev</button>
+              <button id="lastBtnID" type="button" style="background-color: #99A3A4; color: #FDFEFE; margin-left: 5px" class="btn pull-right">Last</button>
+              <button id="nextBtnID" type="button" style="background-color: #99A3A4; color: #FDFEFE" class="btn pull-right">Next</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="fsID" class="tab-pane fade">
+      <div class="container">
+        <div class="row">
+          <div class="col-xs-6">
+            <h1 style="text-align:center">Data Entry</h1>
+            <form id="fsFormID" class="form" method="post">
+              <div class="form-group">
+                <label for="subjectID2">Subject</label>
+                <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-original-title="If the subject is not a URI it will be used as the fragment identifier of a Relative URI."></span>
+                <textarea class="form-control" placeholder="Subject" rows="1" style="resize:vertical" id="subjectID2"></textarea>
+                <p class="errorMessage" id="subjectErrorID2"></p>
+              </div>
+              <div class="form-group">
+                <label for="predicateID2">Predicate</label>
+                <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-original-title="The predicate can either be a URI (ex. http://xmlns.com/foaf/0.1/name) or a curie (ex. foaf:name) because these are preloaded in Virtuoso."></span>
+                <input type="text" class="form-control" placeholder="Predicate" id="predicateID2">
+                <p class="errorMessage" id="predicateErrorID2"></p>
+              </div>
+              <div class="form-group">
+                <label for="objectID2">Object</label>
+                <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-original-title="Whether or not the Object is a literal value or a reference is determined by the range of the predicate. Quoting the Object will override this feature and make it a literal value."></span>
+                <textarea class="form-control" placeholder="Object" rows="1" style="resize:vertical" id="objectID2"></textarea>
+              </div>
+              <div class="form-group">
+                <label for="docNameID2">Document Name</label>
+                <input type="text" class="form-control" value="https://id.myopenlink.net/public_home/KingsleyUyiIdehen/RWW-QA/test1.ttl" id="docNameID2">
+                <p class="errorMessage" id="docNameErrorID2"></p>
+              </div>
+              <div class="button-wrapper">
+                <span>
+                  <button id="clearBtnID2" type="button" class="btn btn-primary">Clear</button>
+                  <button id="insertBtnID2" type="button" class="btn btn-success">Add</button>
+                  <button id="deleteBtnID2" type="button" class="btn btn-danger">Delete</button>
+                  <button id="queryBtnID2" type="button" class="btn btn-warning">Query</button>
+                  <button id="dataBtnID2" type="button" class="btn btn-info">All Data</button>
+                </span>
+              </div>
+            </form>
+          </div>
+          <div class="col-xs-6">
+            <h1 style="text-align:center">Data</h1>
+            <table id="fsTableID" class="table table-bordered" style="table-layout: fixed; max-width:600px;">
+              <div style="padding-top: 25px"></div>
+            </table>
+            <div class="button-wrapper">
+              <button id="firstBtnID2" type="button" style="background-color: #99A3A4; color: #FDFEFE; margin-right: 5px" class="btn pull-left disabled">First</button>
+              <button id="prevBtnID2" type="button" style="background-color: #99A3A4; color: #FDFEFE" class="btn pull-left disabled">Prev</button>
+              <button id="lastBtnID2" type="button" style="background-color: #99A3A4; color: #FDFEFE; margin-left: 5px" class="btn pull-right disabled">Last</button>
+              <button id="nextBtnID2" type="button" style="background-color: #99A3A4; color: #FDFEFE" class="btn pull-right disabled">Next</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="aboutID" class="tab-pane fade">
+      <div class="container">
+        <p style="padding-top: 10px">
+          Generic SPARQL Data Entry Form 1.0.4<br>
+          Description: Simple Data Entry Form that helps unravel the power of RDF and SPARQL with regards
+          to Structured Data creation and interaction

mpE6CPUzINPUXaxAj.html ADDED Viewed

	@@ -0,0 +1,373 @@

+<html><head><base href="https://websim.ai/c/maintenance"><title>系统维护中.....</title><style>
+    body {
+      overflow: hidden;
+    }
+    #canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    * {
+      margin: 0;
+      padding: 0;
+    }
+    html,
+    body,
+    .ll_cloudtag {
+      height: 100%;
+    }
+    .ll_cloudtag {
+      position: relative;
+      z-index: 20;
+    }
+    .ll_cloudtag a {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      color: #5cff00;
+      font-weight: bold;
+      text-decoration: none;
+      padding: 3px 6px;
+    }
+    .ll_cloudtag a:hover {
+      color: #ff0000;
+      letter-spacing: 2px;
+    }
+  </style></head><body><div class="ll_cloudtag" id="cloudTag">
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+    <a href="https://websim.ai/c/maintenance">系统维护中</a>
+    <a href="https://websim.ai/c/maintenance">请稍后</a>
+  </div>
+  <script>
+    if (typeof ll !== 'object') {
+      var ll = {}
+      ll.ui = {}
+    }
+    ll.ui.cloudTag = function (el) {
+      var radius = 120,
+        dtr = Math.PI / 180,
+        d = 300,
+        mcList = [],
+        active = false,
+        lasta = 1,
+        lastb = 1,
+        distr = true,
+        tspeed = 10,
+        size = 250,
+        mouseX = 0,
+        mouseY = 0,
+        howElliptical = 1,
+        aA = null,
+        oDiv = null
+      function update() {
+        var a
+        var b
+        if (active) {
+          a = (-Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed
+          b = (Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed
+        } else {
+          a = lasta * 0.98
+          b = lastb * 0.98
+        }
+        lasta = a
+        lastb = b
+        if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
+          return
+        }
+        var c = 0
+        sineCosine(a, b, c)
+        for (var j = 0; j < mcList.length; j++) {
+          var rx1 = mcList[j].cx
+          var ry1 = mcList[j].cy * ca + mcList[j].cz * -sa
+          var rz1 = mcList[j].cy * sa + mcList[j].cz * ca
+          var rx2 = rx1 * cb + rz1 * sb
+          var ry2 = ry1
+          var rz2 = rx1 * -sb + rz1 * cb
+          var rx3 = rx2 * cc + ry2 * -sc
+          var ry3 = rx2 * sc + ry2 * cc
+          var rz3 = rz2
+          mcList[j].cx = rx3
+          mcList[j].cy = ry3
+          mcList[j].cz = rz3
+          per = d / (d + rz3)
+          mcList[j].x = howElliptical * rx3 * per - howElliptical * 2
+          mcList[j].y = ry3 * per
+          mcList[j].scale = per
+          mcList[j].alpha = per
+          mcList[j].alpha = (mcList[j].alpha - 0.6) * (10 / 6)
+        }
+        doPosition()
+        depthSort()
+      }
+      function depthSort() {
+        var i = 0
+        var aTmp = []
+        for (i = 0; i < aA.length; i++) {
+          aTmp.push(aA[i])
+        }
+        aTmp.sort(function (vItem1, vItem2) {
+          if (vItem1.cz > vItem2.cz) {
+            return -1
+          } else if (vItem1.cz < vItem2.cz) {
+            return 1
+          } else {
+            return 0
+          }
+        })
+        for (i = 0; i < aTmp.length; i++) {
+          aTmp[i].style.zIndex = i
+        }
+      }
+      function positionAll() {
+        var phi = 0
+        var theta = 0
+        var max = mcList.length
+        var i = 0
+        var aTmp = []
+        var oFragment = document.createDocumentFragment()
+        //随机排序
+        for (i = 0; i < aA.length; i++) {
+          aTmp.push(aA[i])
+        }
+        aTmp.sort(function () {
+          return Math.random() < 0.5 ? 1 : -1
+        })
+        for (i = 0; i < aTmp.length; i++) {
+          oFragment.appendChild(aTmp[i])
+        }
+        oDiv.appendChild(oFragment)
+        for (var i = 1; i < max + 1; i++) {
+          if (distr) {
+            phi = Math.acos(-1 + (2 * i - 1) / max)
+            theta = Math.sqrt(max * Math.PI) * phi
+          } else {
+            phi = Math.random() * Math.PI
+            theta = Math.random() * (2 * Math.PI)
+          }
+          //坐标变换
+          mcList[i - 1].cx = radius * Math.cos(theta) * Math.sin(phi)
+          mcList[i - 1].cy = radius * Math.sin(theta) * Math.sin(phi)
+          mcList[i - 1].cz = radius * Math.cos(phi)
+          aA[i - 1].style.left =
+            mcList[i - 1].cx +
+            oDiv.offsetWidth / 2 -
+            mcList[i - 1].offsetWidth / 2 +
+            'px'
+          aA[i - 1].style.top =
+            mcList[i - 1].cy +
+            oDiv.offsetHeight / 2 -
+            mcList[i - 1].offsetHeight / 2 +
+            'px'
+        }
+      }
+      function doPosition() {
+        var l = oDiv.offsetWidth / 2
+        var t = oDiv.offsetHeight / 2
+        for (var i = 0; i < mcList.length; i++) {
+          aA[i].style.left =
+            mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px'
+          aA[i].style.top =
+            mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px'
+          aA[i].style.fontSize =
+            Math.ceil((12 * mcList[i].scale) / 2) + 8 + 'px'
+          aA[i].style.filter = 'alpha(opacity=' + 100 * mcList[i].alpha + ')'
+          aA[i].style.opacity = mcList[i].alpha
+        }
+      }
+      function sineCosine(a, b, c) {
+        sa = Math.sin(a * dtr)
+        ca = Math.cos(a * dtr)
+        sb = Math.sin(b * dtr)
+        cb = Math.cos(b * dtr)
+        sc = Math.sin(c * dtr)
+        cc = Math.cos(c * dtr)
+      }
+      return (function () {
+        var i = 0
+        var oTag = null
+        oDiv = document.getElementById(el)
+        aA = oDiv.getElementsByTagName('a')
+        for (i = 0; i < aA.length; i++) {
+          oTag = {}
+          oTag.offsetWidth = aA[i].offsetWidth
+          oTag.offsetHeight = aA[i].offsetHeight
+          mcList.push(oTag)
+        }
+        sineCosine(0, 0, 0)
+        positionAll()
+        oDiv.onmouseover = function () {
+          active = true
+        }
+        oDiv.onmouseout = function () {
+          active = false
+        }
+        oDiv.onmousemove = function (ev) {
+          var oEvent = window.event || ev
+          mouseX = oEvent.clientX - (oDiv.offsetLeft + oDiv.offsetWidth / 2)
+          mouseY = oEvent.clientY - (oDiv.offsetTop + oDiv.offsetHeight / 2)
+          mouseX /= 5
+          mouseY /= 5
+        }
+        setInterval(update, 30)
+      })()
+    }
+    ll.ui.cloudTag('cloudTag')
+  </script>
+  <canvas id="canvas" width="1920" height="1080" alt="A canvas with falling green characters resembling the Matrix digital rain effect"> 您的浏览器不支持canvas标签，请您更换浏览器 </canvas>
+  <script>
+    var canvas = document.getElementById('canvas')
+    var can = canvas.getContext('2d')
+    var s = window.screen //获取屏幕
+    var w = (canvas.width = s.width) //获取屏幕宽度
+    var h = (canvas.height = s.height) //获取屏幕高度
+    can.fillStyle = color2()
+    var words = Array(256).join('1').split('')
+    //设置一个包含256个空元素的数组，join("1")用来把数组里的元素拼接成字符串，split("")过滤掉数组里的空元素
+    setInterval(draw, 50)
+    can.font = '15px 微软雅黑' //只设置一个不生效，一定要两个属性都设
+    // //绘制实心的文本：绘制的文本，文本的坐标x，文本的坐标y
+    // can.fillText("黑客帝国",100,100);
+    // // setInterval(draw,50);
+    function draw() {
+      //can.fillRect()画一个实心矩形:坐标x，坐标y，矩形宽，举行高
+      can.fillStyle = 'rgba(0,0,0,0.05)'
+      can.fillRect(0, 0, w, h)
+      can.fillStyle = color2()
+      words.map(function (y, n) {
+        text = String.fromCharCode(Math.ceil(65 + Math.random() * 57)) //转换为键盘上值
+        x = n * 10
+        can.fillText(text, x, y)
+        words[n] = y > 758 + Math.random() * 484 ? 0 : y + 10
+      }) //数组元素的一个映射
+    }
+    //获取随机颜色，三种方法
+    function color1() {
+      var colors = [
+        0,
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        'a',
+        'b',
+        'c',
+        'd',
+        'e',
+        'f',
+      ]
+      var color = ''
+      for (var i = 0; i < 6; i++) {
+        //Math.random()产生一个0-1之间的小数
+        var n = Math.ceil(Math.random() * 15)
+        color += '' + colors[n]
+        // console.log(color);
+      }
+      return '#' + color
+    }
+    function color2() {
+      var color = Math.ceil(Math.random() * 16777215).toString(16)
+      // for( var i=color.length; i<6; i++ ){
+      // 	color = '0'+color;
+      // }
+      while (color.length < 6) {
+        color = '0' + color
+      }
+      return '#' + color
+    }
+    function color3() {
+      return (
+        '#' +
+        (function (color) {
+          return new Array(7 - color.length).join('0') + color
+          //神奇的方法，总共字符串有6位，如果只产生了3位，则前面应该补三个0，在长度为7-3=4的空数组中利用join插入0，则为['',0,'',0,'',0,''],刚好三个0补在前面
+        })(((Math.random() * 0x1000000) << 0).toString(16))
+      )
+      // << 0 也是一种取整的方法
+    }
+  </script>
+</body></html>

ouUxFFTFA296osu4s.html ADDED Viewed

	@@ -0,0 +1,235 @@

+<html><head><base href="https://websim.ai"><title>Enhanced 3D Walking Wooden Man in Minecraft-style World</title><style>
+  body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    font-family: 'Minecraft', Arial, sans-serif;
+  }
+  @font-face {
+    font-family: 'Minecraft';
+    src: url('https://fonts.cdnfonts.com/css/minecraft-4') format('woff2');
+  }
+  .Scene {
+    width: 100%;
+    height: 100%;
+    perspective: 1000px;
+    background: linear-gradient(to bottom, #87CEEB, #E0F6FF);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+  .Godo-wrap {
+    width: 200px;
+    height: 300px;
+    position: relative;
+    transform-style: preserve-3d;
+    animation: walk 2s infinite linear;
+  }
+  .Godo {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    transform-style: preserve-3d;
+  }
+  .u-bg {
+    background: #8B4513;
+    position: absolute;
+    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
+  }
+  .Head, .Torso, .LeftArm, .RightArm, .LeftLeg, .RightLeg {
+    position: absolute;
+    transform-style: preserve-3d;
+  }
+  .Head {
+    width: 50px;
+    height: 50px;
+    top: 0;
+    left: 75px;
+  }
+  .Torso {
+    width: 100px;
+    height: 150px;
+    top: 50px;
+    left: 50px;
+  }
+  .LeftArm, .RightArm {
+    width: 30px;
+    height: 100px;
+    top: 50px;
+  }
+  .LeftArm { left: 20px; }
+  .RightArm { right: 20px; }
+  .LeftLeg, .RightLeg {
+    width: 30px;
+    height: 100px;
+    top: 200px;
+  }
+  .LeftLeg { left: 60px; }
+  .RightLeg { right: 60px; }
+  .Head > div, .Torso > div, .LeftArm > div, .RightArm > div, .LeftLeg > div, .RightLeg > div {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .base {
+    width: 500px;
+    height: 500px;
+    background: url('https://i.imgur.com/TZ5Ct9N.png') repeat;
+    position: absolute;
+    bottom: -250px;
+    border-radius: 50%;
+    transform: rotateX(90deg);
+    animation: moveGround 10s linear infinite;
+  }
+  @keyframes walk {
+    0%, 100% { transform: rotateX(-10deg) translateY(0); }
+    25%, 75% { transform: rotateX(0deg) translateY(-20px); }
+    50% { transform: rotateX(10deg) translateY(0); }
+  }
+  .LeftArm, .RightArm {
+    animation: swing 1s infinite alternate;
+  }
+  .LeftLeg, .RightLeg {
+    animation: step 1s infinite alternate;
+  }
+  @keyframes swing {
+    0% { transform: rotateX(-30deg); }
+    100% { transform: rotateX(30deg); }
+  }
+  @keyframes step {
+    0% { transform: translateY(0) rotateX(0deg); }
+    100% { transform: translateY(-15px) rotateX(-30deg); }
+  }
+  @keyframes moveGround {
+    0% { background-position: 0 0; }
+    100% { background-position: 500px 0; }
+  }
+  .clouds {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    animation: moveClouds 30s linear infinite;
+  }
+  .cloud {
+    position: absolute;
+    background: rgba(255,255,255,0.8);
+    border-radius: 50%;
+  }
+  .cloud:nth-child(1) { width: 100px; height: 40px; top: 10%; left: 10%; }
+  .cloud:nth-child(2) { width: 80px; height: 30px; top: 20%; right: 15%; }
+  .cloud:nth-child(3) { width: 120px; height: 50px; bottom: 30%; left: 20%; }
+  @keyframes moveClouds {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(-100%); }
+  }
+  .sun {
+    position: absolute;
+    top: 50px;
+    right: 50px;
+    width: 80px;
+    height: 80px;
+    background: #FFD700;
+    border-radius: 50%;
+    box-shadow: 0 0 20px #FFD700;
+    animation: rotateSun 20s linear infinite;
+  }
+  @keyframes rotateSun {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+</style></head><body>
+  <div class="Scene">
+    <div class="sun"></div>
+    <div class="clouds">
+      <div class="cloud"></div>
+      <div class="cloud"></div>
+      <div class="cloud"></div>
+    </div>
+    <div class="Godo-wrap">
+      <div class="Godo">
+        <div class="Head">
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+        </div>
+        <div class="Torso">
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+        </div>
+        <div class="LeftArm">
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+        </div>
+        <div class="RightArm">
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+        </div>
+        <div class="LeftLeg">
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+        </div>
+        <div class="RightLeg">
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+          <div class="u-bg"></div>
+        </div>
+      </div>
+    </div>
+    <div class="base"></div>
+  </div>
+  <a href="https://websim.ai/c/minecraft-world-builder" style="position: fixed; bottom: 10px; right: 10px; background: rgba(255,255,255,0.7); padding: 5px 10px; border-radius: 5px; text-decoration: none; color: #333; font-family: 'Minecraft', Arial, sans-serif;">Build Your Minecraft World</a>
+</body></html>

pqNwQVRUmKZ4ZO6qy.html ADDED Viewed

	@@ -0,0 +1,203 @@

+<html><head><base href="https://websim.ai" /><title>Beautiful Photo Wall - WebSim AI</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style>
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
+        segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto,
+        arial, sans-serif;
+      background-color: #f0f0f0;
+    }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    h1 {
+      text-align: center;
+      color: #333;
+    }
+    #img {
+      width: 503px;
+      height: 252px;
+      margin: 50px auto;
+      perspective: 700px;
+      -webkit-perspective: 700px;
+    }
+    #img img {
+      width: 50px;
+      height: 50px;
+      float: left;
+      object-fit: cover;
+    }
+    #btn {
+      width: 200px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      color: #fff;
+      background: #4CAF50;
+      border-radius: 25px;
+      margin: 20px auto;
+      padding: 0 10px;
+      cursor: pointer;
+      transition: background-color 0.3s, transform 0.1s;
+      user-select: none;
+    }
+    #btn:hover {
+      background: #45a049;
+    }
+    #btn:active {
+      transform: scale(0.98);
+    }
+    .credits {
+      text-align: center;
+      margin-top: 20px;
+      font-size: 14px;
+      color: #666;
+    }
+    .credits a {
+      color: #4CAF50;
+      text-decoration: none;
+    }
+    .credits a:hover {
+      text-decoration: underline;
+    }
+  </style></head><body><div id="app" class="container">
+    <h1>{{ title }}</h1>
+    <div id="img">
+      <img v-for="(image, index) in images" :key="index" :src="image" :alt="'Image ' + (index + 1)">
+    </div>
+    <div id="btn" @click="triggerAnimation">{{ buttonText }}</div>
+    <p class="credits">Created with <a href="https://websim.ai">WebSim AI</a> - Explore endless possibilities!</p>
+  </div>
+  <script>
+    const { createApp } = Vue;
+    createApp({
+      data() {
+        return {
+          title: 'Beautiful Photo Wall',
+          buttonText: 'Click to see effect',
+          images: [
+            'https://picsum.photos/50/50?random=1',
+            'https://picsum.photos/50/50?random=2',
+            'https://picsum.photos/50/50?random=3',
+            'https://picsum.photos/50/50?random=4',
+            'https://picsum.photos/50/50?random=5',
+            'https://picsum.photos/50/50?random=6',
+            'https://picsum.photos/50/50?random=7',
+            'https://picsum.photos/50/50?random=8',
+            'https://picsum.photos/50/50?random=9',
+            'https://picsum.photos/50/50?random=10',
+            'https://picsum.photos/50/50?random=11',
+            'https://picsum.photos/50/50?random=12',
+            'https://picsum.photos/50/50?random=13',
+            'https://picsum.photos/50/50?random=14',
+            'https://picsum.photos/50/50?random=15',
+            'https://picsum.photos/50/50?random=16',
+            'https://picsum.photos/50/50?random=17',
+            'https://picsum.photos/50/50?random=18',
+            'https://picsum.photos/50/50?random=19',
+            'https://picsum.photos/50/50?random=20',
+            'https://picsum.photos/50/50?random=21',
+            'https://picsum.photos/50/50?random=22',
+            'https://picsum.photos/50/50?random=23',
+            'https://picsum.photos/50/50?random=24',
+            'https://picsum.photos/50/50?random=25',
+            'https://picsum.photos/50/50?random=26',
+            'https://picsum.photos/50/50?random=27',
+            'https://picsum.photos/50/50?random=28',
+            'https://picsum.photos/50/50?random=29',
+            'https://picsum.photos/50/50?random=30',
+            'https://picsum.photos/50/50?random=31',
+            'https://picsum.photos/50/50?random=32',
+            'https://picsum.photos/50/50?random=33',
+            'https://picsum.photos/50/50?random=34',
+            'https://picsum.photos/50/50?random=35',
+            'https://picsum.photos/50/50?random=36',
+            'https://picsum.photos/50/50?random=37',
+            'https://picsum.photos/50/50?random=38',
+            'https://picsum.photos/50/50?random=39',
+            'https://picsum.photos/50/50?random=40',
+            'https://picsum.photos/50/50?random=41',
+            'https://picsum.photos/50/50?random=42',
+            'https://picsum.photos/50/50?random=43',
+            'https://picsum.photos/50/50?random=44',
+            'https://picsum.photos/50/50?random=45',
+            'https://picsum.photos/50/50?random=46',
+            'https://picsum.photos/50/50?random=47',
+            'https://picsum.photos/50/50?random=48',
+            'https://picsum.photos/50/50?random=49',
+            'https://picsum.photos/50/50?random=50'
+          ],
+          animationInProgress: false
+        };
+      },
+      methods: {
+        triggerAnimation() {
+          if (this.animationInProgress) return;
+          this.animationInProgress = true;
+          this.buttonText = 'Animation in progress...';
+          const imgs = document.querySelectorAll('#img img');
+          let endNum = 0;
+          const montion = (obj, time, doFn, callBack) => {
+            obj.style.transition = time;
+            doFn.call(obj);
+            let called = false;
+            obj.addEventListener('transitionend', function () {
+              if (!called) {
+                callBack && callBack.call(obj);
+                called = true;
+              }
+            }, { once: true });
+          };
+          const toBig = () => {
+            let allEnd = 0;
+            imgs.forEach((img, i) => {
+              img.style.transition = '';
+              img.style.transform = `rotateY(0deg) translateZ(-${Math.random() * 500}px)`;
+              setTimeout(() => {
+                montion(img, '2s', function () {
+                  this.style.opacity = 1;
+                  this.style.transform = 'rotateY(-360deg) translateZ(0)';
+                }, function () {
+                  allEnd++;
+                  if (allEnd === imgs.length) {
+                    this.animationInProgress = false;
+                    this.buttonText = 'Play animation again';
+                  }
+                });
+              }, Math.random() * 1000);
+            });
+          };
+          imgs.forEach((img, i) => {
+            setTimeout(() => {
+              montion(img, '1s', function () {
+                this.style.transform = 'scale(0)';
+              }, function () {
+                montion(this, '1s', function () {
+                  this.style.transform = 'scale(1)';
+                  this.style.opacity = '0';
+                }, function () {
+                  endNum++;
+                  if (endNum === imgs.length) {
+                    toBig();
+                  }
+                });
+              });
+            }, Math.random() * 1000);
+          });
+        }
+      }
+    }).mount('#app');
+  </script></body></html>

qpNidDJx06Bh68FtT.html ADDED Viewed

	@@ -0,0 +1,171 @@

+<html><head><base href="https://websim.ai" /><title>WebSim: jQuery Slideshow with Thumbnails</title><style>
+  body, html {
+    margin: 0;
+    padding: 0;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f0f0f0;
+    color: #333;
+  }
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  h1 {
+    text-align: center;
+    color: #2c3e50;
+  }
+  .slideshow {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    position: relative;
+  }
+  .slide {
+    display: none;
+    text-align: center;
+  }
+  .slide.active {
+    display: block;
+  }
+  .slide img {
+    max-width: 100%;
+    height: auto;
+  }
+  .slide-title {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    padding: 10px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+  }
+  .thumbnails {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
+  .thumbnail {
+    width: 60px;
+    height: 60px;
+    border: 2px solid #ddd;
+    border-radius: 4px;
+    margin: 0 5px;
+    cursor: pointer;
+    transition: border-color 0.3s ease;
+  }
+  .thumbnail:hover, .thumbnail.active {
+    border-color: #3498db;
+  }
+  .navigation {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+  }
+  .nav-button {
+    background: #3498db;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+  }
+  .nav-button:hover {
+    background: #2980b9;
+  }
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  .slide.active {
+    animation: fadeIn 0.5s ease-in-out;
+  }
+</style></head><body><div class="container">
+  <h1>WebSim Fruit Gallery</h1>
+  <div class="slideshow">
+    <div class="slide active">
+      <img src="https://websim.ai/images/bananas.png" alt="A bunch of ripe bananas" width="389" height="300">
+      <h2 class="slide-title">Bananas</h2>
+    </div>
+    <div class="slide">
+      <img src="https://websim.ai/images/coconut.png" alt="Half of a coconut" width="325" height="300">
+      <h2 class="slide-title">Coconut</h2>
+    </div>
+    <div class="slide">
+      <img src="https://websim.ai/images/orange.png" alt="A ripe orange" width="350" height="300">
+      <h2 class="slide-title">Orange</h2>
+    </div>
+  </div>
+  <div class="thumbnails">
+    <img src="https://websim.ai/images/[email protected]" alt="Banana thumbnail" class="thumbnail active" width="50" height="40">
+    <img src="https://websim.ai/images/[email protected]" alt="Coconut thumbnail" class="thumbnail" width="50" height="40">
+    <img src="https://websim.ai/images/[email protected]" alt="Orange thumbnail" class="thumbnail" width="50" height="40">
+  </div>
+  <div class="navigation">
+    <button class="nav-button prev">Previous</button>
+    <button class="nav-button next">Next</button>
+  </div>
+</div>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const slides = document.querySelectorAll('.slide');
+  const thumbnails = document.querySelectorAll('.thumbnail');
+  const prevButton = document.querySelector('.prev');
+  const nextButton = document.querySelector('.next');
+  let currentSlide = 0;
+  function showSlide(index) {
+    slides[currentSlide].classList.remove('active');
+    thumbnails[currentSlide].classList.remove('active');
+    currentSlide = (index + slides.length) % slides.length;
+    slides[currentSlide].classList.add('active');
+    thumbnails[currentSlide].classList.add('active');
+  }
+  function nextSlide() {
+    showSlide(currentSlide + 1);
+  }
+  function prevSlide() {
+    showSlide(currentSlide - 1);
+  }
+  nextButton.addEventListener('click', nextSlide);
+  prevButton.addEventListener('click', prevSlide);
+  thumbnails.forEach((thumbnail, index) => {
+    thumbnail.addEventListener('click', () => showSlide(index));
+  });
+  // Auto-advance slides every 5 seconds
+  setInterval(nextSlide, 5000);
+});
+</script>
+<div style="text-align:center;margin-top:30px;">
+  <p>Explore our WebSim fruit gallery! This interactive slideshow showcases various fruits with smooth transitions and thumbnail navigation.</p>
+  <p>Want to create your own custom web experiences? Try <a href="https://websim.ai/create">WebSim's website creator</a> today!</p>
+</div>
+</body></html>

sHbBg9FjlkYrIVKIw.html ADDED Viewed

	@@ -0,0 +1,156 @@

+<html><head><base href="https://websim.ai" />
+<title>RagdollPhysics.js - Throw, Explode, and Reset!</title>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+  }
+  #canvas {
+    border: 1px solid #000;
+    background-color: #fff;
+  }
+  #controls {
+    margin-top: 10px;
+  }
+  button {
+    font-size: 16px;
+    padding: 10px 20px;
+    margin: 0 10px;
+    cursor: pointer;
+  }
+  #info {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-color: rgba(255, 255, 255, 0.7);
+    padding: 10px;
+    border-radius: 5px;
+  }
+</style>
+</head>
+<body>
+<canvas id="canvas" width="800" height="600"></canvas>
+<div id="controls">
+  <button id="resetBtn">Reset Scene</button>
+  <button id="explodeBtn">Explode Ragdoll</button>
+</div>
+<div id="info">Click and drag to throw the ragdoll!</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
+<script>
+// Initialize Matter.js
+const Engine = Matter.Engine,
+      Render = Matter.Render,
+      Runner = Matter.Runner,
+      Bodies = Matter.Bodies,
+      Composite = Matter.Composite,
+      Constraint = Matter.Constraint,
+      Mouse = Matter.Mouse,
+      MouseConstraint = Matter.MouseConstraint,
+      Vector = Matter.Vector;
+// Create engine
+const engine = Engine.create(),
+      world = engine.world;
+// Create renderer
+const render = Render.create({
+    canvas: document.getElementById('canvas'),
+    engine: engine,
+    options: {
+        width: 800,
+        height: 600,
+        wireframes: false
+    }
+});
+// Create borders
+const borderThickness = 50;
+const ground = Bodies.rectangle(400, 600 + borderThickness/2, 800 + 2*borderThickness, borderThickness, { isStatic: true });
+const ceiling = Bodies.rectangle(400, -borderThickness/2, 800 + 2*borderThickness, borderThickness, { isStatic: true });
+const leftWall = Bodies.rectangle(-borderThickness/2, 300, borderThickness, 600 + 2*borderThickness, { isStatic: true });
+const rightWall = Bodies.rectangle(800 + borderThickness/2, 300, borderThickness, 600 + 2*borderThickness, { isStatic: true });
+// Ragdoll creation function
+function createRagdoll() {
+    const head = Bodies.circle(400, 100, 30, { friction: 0.5, restitution: 0.6, render: { fillStyle: '#FFD700' } });
+    const torso = Bodies.rectangle(400, 180, 60, 100, { friction: 0.5, restitution: 0.6, render: { fillStyle: '#4169E1' } });
+    const leftArm = Bodies.rectangle(350, 180, 20, 80, { friction: 0.5, restitution: 0.6, render: { fillStyle: '#FF6347' } });
+    const rightArm = Bodies.rectangle(450, 180, 20, 80, { friction: 0.5, restitution: 0.6, render: { fillStyle: '#FF6347' } });
+    const leftLeg = Bodies.rectangle(375, 300, 20, 80, { friction: 0.5, restitution: 0.6, render: { fillStyle: '#32CD32' } });
+    const rightLeg = Bodies.rectangle(425, 300, 20, 80, { friction: 0.5, restitution: 0.6, render: { fillStyle: '#32CD32' } });
+    const neck = Constraint.create({ bodyA: head, bodyB: torso, pointA: { x: 0, y: 30 }, pointB: { x: 0, y: -50 }, stiffness: 0.5 });
+    const leftShoulder = Constraint.create({ bodyA: torso, bodyB: leftArm, pointA: { x: -30, y: -40 }, pointB: { x: 0, y: -35 }, stiffness: 0.5 });
+    const rightShoulder = Constraint.create({ bodyA: torso, bodyB: rightArm, pointA: { x: 30, y: -40 }, pointB: { x: 0, y: -35 }, stiffness: 0.5 });
+    const leftHip = Constraint.create({ bodyA: torso, bodyB: leftLeg, pointA: { x: -20, y: 50 }, pointB: { x: 0, y: -35 }, stiffness: 0.5 });
+    const rightHip = Constraint.create({ bodyA: torso, bodyB: rightLeg, pointA: { x: 20, y: 50 }, pointB: { x: 0, y: -35 }, stiffness: 0.5 });
+    return {
+        parts: [head, torso, leftArm, rightArm, leftLeg, rightLeg],
+        constraints: [neck, leftShoulder, rightShoulder, leftHip, rightHip]
+    };
+}
+let ragdoll = createRagdoll();
+// Add all bodies and constraints to the world
+Composite.add(world, [
+    ground, ceiling, leftWall, rightWall,
+    ...ragdoll.parts,
+    ...ragdoll.constraints
+]);
+// Add mouse control
+const mouse = Mouse.create(render.canvas),
+      mouseConstraint = MouseConstraint.create(engine, {
+          mouse: mouse,
+          constraint: {
+              stiffness: 0.2,
+              render: {
+                  visible: false
+              }
+          }
+      });
+Composite.add(world, mouseConstraint);
+// Keep the mouse in sync with rendering
+render.mouse = mouse;
+// Reset scene function
+function resetScene() {
+    Composite.remove(world, [...ragdoll.parts, ...ragdoll.constraints]);
+    ragdoll = createRagdoll();
+    Composite.add(world, [...ragdoll.parts, ...ragdoll.constraints]);
+}
+// Explode ragdoll function
+function explodeRagdoll() {
+    Composite.remove(world, ragdoll.constraints);
+    ragdoll.parts.forEach(part => {
+        const force = Vector.mult(
+            Vector.normalise(Vector.sub(part.position, ragdoll.parts[1].position)),
+            0.05 * part.mass
+        );
+        Matter.Body.applyForce(part, part.position, force);
+    });
+    ragdoll.constraints = [];
+}
+// Event listeners for buttons
+document.getElementById('resetBtn').addEventListener('click', resetScene);
+document.getElementById('explodeBtn').addEventListener('click', explodeRagdoll);
+// Run the engine
+Render.run(render);
+Runner.run(Runner.create(), engine);
+</script>
+</body></html>

vuZ4HnBut0SI8pWXC.html ADDED Viewed

	@@ -0,0 +1,325 @@

+<html><head><base href="https://websim.ai/"><title>Veggie Swap Deluxe: Healthy Match-3 Adventure</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<style>
+    body, html {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        font-family: 'Roboto', sans-serif;
+        background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+    }
+    #game-container {
+        width: 100%;
+        max-width: 400px;
+        margin: 20px auto;
+        padding: 20px;
+        box-sizing: border-box;
+        background-color: rgba(255, 255, 255, 0.8);
+        border-radius: 15px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    h1 {
+        text-align: center;
+        color: #2e7d32;
+        font-size: 28px;
+        margin-bottom: 20px;
+        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    }
+    #game-board {
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        background-color: #c8e6c9;
+        border: 3px solid #4caf50;
+        border-radius: 10px;
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        grid-template-rows: repeat(6, 1fr);
+        gap: 3px;
+        padding: 5px;
+        box-sizing: border-box;
+        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+    .veggie {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 28px;
+        cursor: pointer;
+        transition: transform 0.3s, background-color 0.3s;
+        background-color: #ffffff;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    .veggie:hover {
+        transform: scale(1.1);
+    }
+    .veggie.selected {
+        background-color: rgba(255, 255, 0, 0.3);
+        box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
+    }
+    #score, #moves, #level {
+        text-align: center;
+        font-size: 20px;
+        margin-top: 15px;
+        color: #1b5e20;
+        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+    }
+    #health-bar {
+        width: 100%;
+        height: 20px;
+        background-color: #ef5350;
+        margin-top: 20px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    #health {
+        width: 100%;
+        height: 100%;
+        background-color: #4caf50;
+        transition: width 0.5s;
+    }
+    @keyframes pop {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.2); }
+        100% { transform: scale(1); }
+    }
+    .pop {
+        animation: pop 0.3s ease-out;
+    }
+    @keyframes fall {
+        0% { transform: translateY(-100%); }
+        100% { transform: translateY(0); }
+    }
+    .fall {
+        animation: fall 0.5s ease-out;
+    }
+</style>
+</head>
+<body>
+<div id="game-container">
+    <h1>Veggie Swap Deluxe</h1>
+    <div id="game-board"></div>
+    <div id="score">Score: 0</div>
+    <div id="moves">Moves left: 20</div>
+    <div id="level">Level: 1</div>
+    <div id="health-bar"><div id="health"></div></div>
+</div>
+<script>
+const gameBoard = document.getElementById('game-board');
+const scoreElement = document.getElementById('score');
+const movesElement = document.getElementById('moves');
+const healthElement = document.getElementById('health');
+const levelElement = document.getElementById('level');
+const veggies = ['🥕', '🥦', '🍅', '🍆', '🥑', '🌽', '🥒', '🥔'];
+const gridSize = 6;
+let grid = [];
+let score = 0;
+let moves = 20;
+let health = 100;
+let selectedVeggie = null;
+let level = 1;
+let comboMultiplier = 1;
+function createGrid() {
+    gameBoard.innerHTML = '';
+    grid = [];
+    for (let i = 0; i < gridSize * gridSize; i++) {
+        const veggie = document.createElement('div');
+        veggie.classList.add('veggie');
+        veggie.innerText = veggies[Math.floor(Math.random() * veggies.length)];
+        veggie.addEventListener('click', () => handleClick(i));
+        gameBoard.appendChild(veggie);
+        grid.push(veggie);
+    }
+}
+function handleClick(index) {
+    if (moves <= 0) return;
+    if (selectedVeggie === null) {
+        selectedVeggie = index;
+        grid[index].classList.add('selected');
+    } else {
+        if (isAdjacent(selectedVeggie, index)) {
+            swapVeggies(selectedVeggie, index);
+            grid[selectedVeggie].classList.remove('selected');
+            selectedVeggie = null;
+            moves--;
+            updateMoves();
+            checkMatches();
+        } else {
+            grid[selectedVeggie].classList.remove('selected');
+            selectedVeggie = index;
+            grid[index].classList.add('selected');
+        }
+    }
+}
+function isAdjacent(index1, index2) {
+    const row1 = Math.floor(index1 / gridSize);
+    const col1 = index1 % gridSize;
+    const row2 = Math.floor(index2 / gridSize);
+    const col2 = index2 % gridSize;
+    return (Math.abs(row1 - row2) + Math.abs(col1 - col2) === 1);
+}
+function swapVeggies(index1, index2) {
+    const temp = grid[index1].innerText;
+    grid[index1].innerText = grid[index2].innerText;
+    grid[index2].innerText = temp;
+    grid[index1].classList.add('pop');
+    grid[index2].classList.add('pop');
+    setTimeout(() => {
+        grid[index1].classList.remove('pop');
+        grid[index2].classList.remove('pop');
+    }, 300);
+}
+function checkMatches() {
+    let matchFound = false;
+    // Check horizontal matches
+    for (let row = 0; row < gridSize; row++) {
+        for (let col = 0; col < gridSize - 2; col++) {
+            const index = row * gridSize + col;
+            const matchLength = getMatchLength(index, 1);
+            if (matchLength >= 3) {
+                removeMatch(index, matchLength, 1);
+                matchFound = true;
+            }
+        }
+    }
+    // Check vertical matches
+    for (let col = 0; col < gridSize; col++) {
+        for (let row = 0; row < gridSize - 2; row++) {
+            const index = row * gridSize + col;
+            const matchLength = getMatchLength(index, gridSize);
+            if (matchLength >= 3) {
+                removeMatch(index, matchLength, gridSize);
+                matchFound = true;
+            }
+        }
+    }
+    if (matchFound) {
+        comboMultiplier++;
+        setTimeout(() => {
+            fillEmptySpaces();
+            setTimeout(() => {
+                checkMatches();
+            }, 300);
+        }, 300);
+    } else {
+        comboMultiplier = 1;
+    }
+}
+function getMatchLength(startIndex, step) {
+    const startVeggie = grid[startIndex].innerText;
+    let length = 1;
+    let index = startIndex + step;
+    while (index < gridSize * gridSize && grid[index].innerText === startVeggie) {
+        length++;
+        index += step;
+    }
+    return length;
+}
+function removeMatch(startIndex, length, step) {
+    for (let i = 0; i < length; i++) {
+        const index = startIndex + i * step;
+        grid[index].innerText = '';
+        grid[index].classList.add('pop');
+        setTimeout(() => {
+            grid[index].classList.remove('pop');
+        }, 300);
+    }
+    updateScore(length);
+    updateHealth(length);
+}
+function fillEmptySpaces() {
+    for (let col = 0; col < gridSize; col++) {
+        let emptySpaces = 0;
+        for (let row = gridSize - 1; row >= 0; row--) {
+            const index = row * gridSize + col;
+            if (grid[index].innerText === '') {
+                emptySpaces++;
+            } else if (emptySpaces > 0) {
+                grid[(row + emptySpaces) * gridSize + col].innerText = grid[index].innerText;
+                grid[index].innerText = '';
+            }
+        }
+        for (let row = 0; row < emptySpaces; row++) {
+            const newVeggie = veggies[Math.floor(Math.random() * veggies.length)];
+            grid[row * gridSize + col].innerText = newVeggie;
+            grid[row * gridSize + col].classList.add('fall');
+            setTimeout(() => {
+                grid[row * gridSize + col].classList.remove('fall');
+            }, 500);
+        }
+    }
+}
+function updateScore(matchLength) {
+    const pointsGained = matchLength * matchLength * comboMultiplier;
+    score += pointsGained;
+    scoreElement.innerText = `Score: ${score}`;
+    checkLevelUp();
+}
+function checkLevelUp() {
+    const newLevel = Math.floor(score / 1000) + 1;
+    if (newLevel > level) {
+        level = newLevel;
+        levelElement.innerText = `Level: ${level}`;
+        moves += 5;
+        updateMoves();
+    }
+}
+function updateMoves() {
+    movesElement.innerText = `Moves left: ${moves}`;
+    if (moves <= 0) {
+        endGame();
+    }
+}
+function updateHealth(matchLength) {
+    health += matchLength * 2;
+    if (health > 100) health = 100;
+    healthElement.style.width = `${health}%`;
+}
+function endGame() {
+    alert(`Game Over! Your final score is ${score}. You reached level ${level}!`);
+    if (confirm('Do you want to play again?')) {
+        resetGame();
+    }
+}
+function resetGame() {
+    score = 0;
+    moves = 20;
+    health = 100;
+    level = 1;
+    comboMultiplier = 1;
+    scoreElement.innerText = `Score: ${score}`;
+    movesElement.innerText = `Moves left: ${moves}`;
+    healthElement.style.width = '100%';
+    levelElement.innerText = `Level: ${level}`;
+    createGrid();
+}
+createGrid();
+</script>
+</body></html>

zFxvKFmaf159fZIEm.html ADDED Viewed

	@@ -0,0 +1,413 @@

+<html><head><base href="https://websim.ai/advanced-space-quiz">
+<title>Cosmic Mastery: Elite Space Quiz</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;700&display=swap');
+  body {
+    font-family: 'Exo 2', sans-serif;
+    background-color: #000;
+    color: #e0f7ff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 100vh;
+    margin: 0;
+    padding: 20px;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #000033, #000066);
+    overflow-x: hidden;
+  }
+  .stars {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+  .star {
+    position: absolute;
+    background-color: #fff;
+    border-radius: 50%;
+  }
+  @keyframes twinkle {
+    0% { opacity: 0; }
+    50% { opacity: 1; }
+    100% { opacity: 0; }
+  }
+  h1 {
+    font-size: 2.8em;
+    text-align: center;
+    margin-bottom: 30px;
+    background: linear-gradient(to right, #00ffff, #ff00ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  }
+  #quiz-container {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    padding: 40px;
+    width: 90%;
+    max-width: 800px;
+    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
+    backdrop-filter: blur(10px);
+  }
+  #question {
+    font-size: 1.4em;
+    margin-bottom: 30px;
+    text-align: center;
+    font-weight: 700;
+  }
+  #answer-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+  }
+  .answer-btn {
+    padding: 20px;
+    background-color: rgba(0, 255, 255, 0.1);
+    color: #fff;
+    border: 2px solid #00ffff;
+    border-radius: 15px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-family: 'Exo 2', sans-serif;
+    font-size: 1.1em;
+    position: relative;
+    overflow: hidden;
+  }
+  .answer-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      120deg,
+      transparent,
+      rgba(255, 255, 255, 0.3),
+      transparent
+    );
+    transition: all 0.5s;
+  }
+  .answer-btn:hover::before {
+    left: 100%;
+  }
+  .answer-btn:hover {
+    background-color: rgba(0, 255, 255, 0.3);
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+  }
+  #result {
+    margin-top: 30px;
+    font-weight: bold;
+    text-align: center;
+    min-height: 50px;
+    font-size: 1.2em;
+  }
+  #next-btn {
+    display: none;
+    margin: 30px auto 0;
+    padding: 15px 30px;
+    background: linear-gradient(45deg, #00ffff, #ff00ff);
+    color: #000;
+    border: none;
+    border-radius: 25px;
+    cursor: pointer;
+    font-family: 'Exo 2', sans-serif;
+    font-size: 1.2em;
+    font-weight: 700;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+  }
+  #next-btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+  }
+  #score, #timer {
+    position: fixed;
+    font-size: 1.3em;
+    background-color: rgba(0, 255, 255, 0.2);
+    padding: 15px;
+    border-radius: 15px;
+    backdrop-filter: blur(5px);
+  }
+  #score {
+    top: 20px;
+    left: 20px;
+  }
+  #timer {
+    top: 20px;
+    right: 20px;
+  }
+  .explanation {
+    margin-top: 25px;
+    font-size: 1em;
+    text-align: justify;
+    display: none;
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 20px;
+    border-radius: 15px;
+    border-left: 5px solid #00ffff;
+  }
+  @media (max-width: 700px) {
+    #answer-container {
+      grid-template-columns: 1fr;
+    }
+    h1 {
+      font-size: 2.2em;
+    }
+    #quiz-container {
+      padding: 30px;
+    }
+  }
+  #progress-bar {
+    width: 100%;
+    height: 10px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 5px;
+    margin-top: 20px;
+    overflow: hidden;
+  }
+  #progress {
+    width: 0%;
+    height: 100%;
+    background: linear-gradient(90deg, #00ffff, #ff00ff);
+    transition: width 0.5s ease;
+  }
+</style>
+</head>
+<body>
+  <div class="stars"></div>
+  <h1>Cosmic Mastery: Elite Space Quiz</h1>
+  <div id="score">Score: <span id="score-value">0</span></div>
+  <div id="timer">Time: <span id="time-value">90</span>s</div>
+  <div id="quiz-container">
+    <div id="question"></div>
+    <div id="answer-container">
+      <button class="answer-btn" onclick="checkAnswer(0)"></button>
+      <button class="answer-btn" onclick="checkAnswer(1)"></button>
+      <button class="answer-btn" onclick="checkAnswer(2)"></button>
+      <button class="answer-btn" onclick="checkAnswer(3)"></button>
+    </div>
+    <div id="result"></div>
+    <div class="explanation" id="explanation"></div>
+    <div id="progress-bar">
+      <div id="progress"></div>
+    </div>
+    <button id="next-btn" onclick="nextQuestion()">Next Challenge</button>
+  </div>
+<script>
+const questions = [
+  {
+    question: "What is the Tolman–Oppenheimer–Volkoff limit?",
+    answers: [
+      "The maximum mass of a stable neutron star",
+      "The minimum mass required for stellar fusion",
+      "The limit at which a white dwarf becomes a neutron star",
+      "The point at which a star becomes a red giant"
+    ],
+    correct: 0,
+    explanation: "The Tolman–Oppenheimer–Volkoff limit is the maximum mass a neutron star can have while remaining stable. Beyond this limit, the neutron star would collapse into a black hole."
+  },
+  {
+    question: "What is the primary mechanism behind Type Ia supernovae?",
+    answers: [
+      "Core collapse of a massive star",
+      "Thermonuclear explosion of a white dwarf",
+      "Merger of two neutron stars",
+      "Sudden accretion of matter onto a black hole"
+    ],
+    correct: 1,
+    explanation: "Type Ia supernovae occur when a white dwarf in a binary system accretes matter from its companion, reaching the Chandrasekhar limit, leading to a thermonuclear explosion."
+  },
+  {
+    question: "What is the Lyman-alpha forest?",
+    answers: [
+      "A region of space with a high density of young stars",
+      "A collection of absorption lines in quasar spectra",
+      "A type of nebula rich in hydrogen",
+      "A pattern formed by cosmic microwave background radiation"
+    ],
+    correct: 1,
+    explanation: "The Lyman-alpha forest is a series of absorption lines in quasar spectra, caused by neutral hydrogen in the intergalactic medium along the line of sight to distant quasars."
+  },
+  {
+    question: "What is the current best explanation for dark energy?",
+    answers: [
+      "Quantum vacuum energy",
+      "A fifth fundamental force",
+      "Modified gravity theories",
+      "The nature of dark energy remains unknown"
+    ],
+    correct: 3,
+    explanation: "While there are several hypotheses, including quantum vacuum energy and modified gravity theories, the true nature of dark energy remains one of the biggest mysteries in modern cosmology."
+  },
+  {
+    question: "What is the Unruh effect?",
+    answers: [
+      "The creation of virtual particles in strong gravitational fields",
+      "The apparent temperature experienced by an accelerating observer",
+      "The bending of light around massive objects",
+      "The time dilation near the event horizon of a black hole"
+    ],
+    correct: 1,
+    explanation: "The Unruh effect, named after Bill Unruh, states that an accelerating observer will observe blackbody radiation where an inertial observer would observe none. This links acceleration to temperature."
+  },
+  {
+    question: "What is the theorized mechanism behind Hawking radiation?",
+    answers: [
+      "Quantum tunneling across the event horizon",
+      "Gravitational lensing of background radiation",
+      "Pair production near the event horizon",
+      "Accretion of matter onto the black hole"
+    ],
+    correct: 2,
+    explanation: "Hawking radiation is theorized to occur due to quantum effects near the event horizon. Virtual particle pairs are created, with one particle falling into the black hole and the other escaping, appearing as radiation."
+  },
+  {
+    question: "What is the Great Attractor?",
+    answers: [
+      "A supermassive black hole at the center of our galaxy",
+      "A hypothetical object pulling our galaxy towards it",
+      "The point where the expansion of the universe begins to accelerate",
+      "The region where the cosmic microwave background is most intense"
+    ],
+    correct: 1,
+    explanation: "The Great Attractor is a gravitational anomaly in intergalactic space that appears to be pulling our galaxy and others towards it, suggesting a concentration of mass beyond what can be accounted for by visible matter."
+  }
+];
+let currentQuestion = 0;
+let score = 0;
+let timeLeft = 90;
+let timer;
+function createStars() {
+  const starsContainer = document.querySelector('.stars');
+  for (let i = 0; i < 200; i++) {
+    const star = document.createElement('div');
+    star.classList.add('star');
+    star.style.width = `${Math.random() * 3}px`;
+    star.style.height = star.style.width;
+    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`;
+    starsContainer.appendChild(star);
+  }
+}
+function loadQuestion() {
+  const question = questions[currentQuestion];
+  document.getElementById('question').textContent = question.question;
+  const buttons = document.getElementsByClassName('answer-btn');
+  for (let i = 0; i < buttons.length; i++) {
+    buttons[i].textContent = question.answers[i];
+    buttons[i].disabled = false;
+    buttons[i].style.opacity = 1;
+  }
+  document.getElementById('result').textContent = '';
+  document.getElementById('explanation').style.display = 'none';
+  document.getElementById('next-btn').style.display = 'none';
+  clearInterval(timer);
+  timeLeft = 90;
+  updateTimer();
+  timer = setInterval(updateTimer, 1000);
+  updateProgressBar();
+}
+function updateProgressBar() {
+  const progress = ((currentQuestion + 1) / questions.length) * 100;
+  document.getElementById('progress').style.width = `${progress}%`;
+}
+function updateTimer() {
+  document.getElementById('time-value').textContent = timeLeft;
+  if (timeLeft <= 0) {
+    clearInterval(timer);
+    checkAnswer(-1);
+  } else {
+    timeLeft--;
+  }
+}
+function checkAnswer(answerIndex) {
+  clearInterval(timer);
+  const question = questions[currentQuestion];
+  const resultDiv = document.getElementById('result');
+  const buttons = document.getElementsByClassName('answer-btn');
+  for (let i = 0; i < buttons.length; i++) {
+    buttons[i].disabled = true;
+    if (i !== question.correct) {
+      buttons[i].style.opacity = 0.5;
+    }
+  }
+  if (answerIndex === question.correct) {
+    resultDiv.textContent = "Correct! You've mastered this cosmic concept!";
+    resultDiv.style.color = "#00ff00";
+    score++;
+    document.getElementById('score-value').textContent = score;
+  } else if (answerIndex === -1) {
+    resultDiv.textContent = "Time's up! The secrets of the cosmos wait for no one.";
+    resultDiv.style.color = "#ff0000";
+  } else {
+    resultDiv.textContent = `Incorrect. The mysteries of the universe continue to challenge us.`;
+    resultDiv.style.color = "#ff0000";
+  }
+  document.getElementById('explanation').textContent = question.explanation;
+  document.getElementById('explanation').style.display = 'block';
+  document.getElementById('next-btn').style.display = 'block';
+}
+function nextQuestion() {
+  currentQuestion++;
+  if (currentQuestion < questions.length) {
+    loadQuestion();
+  } else {
+    clearInterval(timer);
+    document.getElementById('quiz-container').innerHTML = `
+      <h2>Cosmic Mastery Achieved!</h2>
+      <p>Your final score: ${score} out of ${questions.length}</p>
+      <p>You've proven yourself as an elite cosmic explorer!</p>
+      <a href="https://websim.ai/space-research-simulator" class="answer-btn" style="display: inline-block; text-decoration: none; text-align: center; margin-top: 20px;">Launch Space Research Simulator</a>
+      <br><br>
+      <a href="https://websim.ai/astronomy-news" class="answer-btn" style="display: inline-block; text-decoration: none; text-align: center;">Explore Latest Astronomy Discoveries</a>
+    `;
+  }
+}
+createStars();
+loadQuestion();
+</script>
+</body></html>