Spaces:

allknowingroger
/

Madewithwebsim

Running

App Files Files Community

allknowingroger commited on Jun 30

Commit

5920e02

•

1 Parent(s): 16ea91e

Upload 6 files

Browse files

Files changed (6) hide show

2TaL4VgstxyOxR1Dn.html +119 -0
FcBU2vAfa394xHFEE.html +35 -0
dFk2QRhlphzanAvzP.html +133 -0
siUi6EynghidyZU6N.html +284 -0
u6Q8itx84CMpzgUin.html +414 -0
xFNbOlWvWPkCQwLpa.html +126 -0

2TaL4VgstxyOxR1Dn.html ADDED Viewed

	@@ -0,0 +1,119 @@

+<html><head><base href="https://websim.ai"/><title>Drunk Image Search - Blurry Vision Edition</title><style>
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 20px;
+    overflow-x: hidden;
+  }
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  }
+  h1 {
+    color: #333;
+    text-align: center;
+    animation: wobble 2s infinite;
+  }
+  .search-bar {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+  #search-input {
+    width: 70%;
+    padding: 10px;
+    font-size: 16px;
+    border: 2px solid #ddd;
+    border-radius: 5px 0 0 5px;
+  }
+  #search-button {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 0 5px 5px 0;
+    cursor: pointer;
+  }
+  .results {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
+  .image-container {
+    width: 200px;
+    margin: 10px;
+    text-align: center;
+  }
+  .image-container img {
+    width: 100%;
+    height: auto;
+    border-radius: 5px;
+    transition: transform 0.3s ease;
+  }
+  .image-container img:hover {
+    transform: scale(1.1);
+  }
+  @keyframes wobble {
+    0% { transform: translateX(0); }
+    25% { transform: translateX(-5px) rotate(-5deg); }
+    50% { transform: translateX(5px) rotate(5deg); }
+    75% { transform: translateX(-5px) rotate(-5deg); }
+    100% { transform: translateX(0); }
+  }
+  .blurry {
+    filter: blur(3px);
+  }
+</style></head><body>
+  <div class="container">
+    <h1>Drunk Image Search</h1>
+    <div class="search-bar">
+      <input type="text" id="search-input" placeholder="What are you looking for?">
+      <button id="search-button">Search</button>
+    </div>
+    <div class="results">
+      <div class="image-container">
+        <img src="https://source.unsplash.com/random/200x200?beer" alt="Random beer image" class="blurry">
+      </div>
+      <div class="image-container">
+        <img src="https://source.unsplash.com/random/200x200?wine" alt="Random wine image" class="blurry">
+      </div>
+      <div class="image-container">
+        <img src="https://source.unsplash.com/random/200x200?cocktail" alt="Random cocktail image" class="blurry">
+      </div>
+      <div class="image-container">
+        <img src="https://source.unsplash.com/random/200x200?party" alt="Random party image" class="blurry">
+      </div>
+      <div class="image-container">
+        <img src="https://source.unsplash.com/random/200x200?drunk" alt="Random drunk image" class="blurry">
+      </div>
+      <div class="image-container">
+        <img src="https://source.unsplash.com/random/200x200?hangover" alt="Random hangover image" class="blurry">
+      </div>
+    </div>
+  </div>
+  <script>
+    document.getElementById('search-button').addEventListener('click', function() {
+      alert("Whoa there! You're too drunk to search right now. Try again when the room stops spinning!");
+    });
+    document.querySelectorAll('.image-container img').forEach(img => {
+      img.addEventListener('mouseover', function() {
+        this.style.transform = `rotate(${Math.random() * 20 - 10}deg) scale(1.1)`;
+      });
+      img.addEventListener('mouseout', function() {
+        this.style.transform = 'rotate(0deg) scale(1)';
+      });
+    });
+    let wobbleAmount = 5;
+    setInterval(() => {
+      document.body.style.transform = `translateX(${Math.random() * wobbleAmount - wobbleAmount/2}px)`;
+    }, 100);
+  </script>
+</body></html>

FcBU2vAfa394xHFEE.html ADDED Viewed

	@@ -0,0 +1,35 @@

+<html><head><base href="https://tamatris.com"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>TAMATRIS</title>
+<style>@import url(https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap);body{font-family:'Space Mono',monospace;background:#1a1a1a;color:#fff;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;overflow:hidden;user-select:none}.game-container{background:#2a2a2a;border-radius:15px;padding:15px;display:flex;flex-direction:column;align-items:center;box-shadow:0 0 40px rgba(255,255,255,.1)}.game-title{color:#ff6b6b;font-size:2.2em;margin:0 0 10px;letter-spacing:-2px;text-transform:uppercase}.game-content{display:flex;justify-content:center;align-items:flex-start}.tetris-grid{width:200px;height:400px;display:grid;grid-template-columns:repeat(10,1fr);gap:1px;background:#1a1a1a;border:2px solid #4a4a4a;border-radius:5px;position:relative;overflow:hidden}.tetris-cell{background:0 0;border-radius:2px;transition:background-color .2s ease}.controls{display:flex;justify-content:space-between;margin-top:20px;width:100%}.control-btn{background:#4a4a4a;color:#fff;border:none;padding:12px 0;border-radius:25px;cursor:pointer;font-family:'Space Mono',monospace;font-size:20px;transition:background .3s ease,transform .1s ease;width:22%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;outline:0}.control-btn:hover{background:#ff6b6b;transform:translateY(-2px)}.control-btn:active{transform:translateY(1px);background:#ff6b6b}.stats{display:flex;flex-direction:column;margin-left:20px;width:90px;background:#3a3a3a;padding:10px;border-radius:10px;height:400px;box-sizing:border-box}.monkey-face{font-size:50px;text-align:center;margin-bottom:20px}.stat-icon{font-size:14px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:20px;background:#4a4a4a;transition:background .3s ease}.stat-value{font-weight:700;transition:transform .2s ease}#hydration{color:#45aaf2}#nutrition{color:#4ecdc4}#mood{color:#feca57}.danger{background:#8c2a2a!important}.game-info{margin-top:auto}.info-box{background:#3a3a3a;border-radius:5px;padding:5px;width:100%;text-align:center;margin-bottom:5px}.info-label{font-size:.7em;text-transform:uppercase;color:#aaa;margin-bottom:2px}.info-value{font-size:1.2em;font-weight:700;transition:transform .2s ease}#score-value{color:#ff6b6b}#right-btn{margin-right:10%}.path-highlight{position:absolute;background:rgba(200,200,200,.1);pointer-events:none}.highlight-change{transform:scale(1.05)}</style>
+</head>
+<body>
+<div class="game-container">
+<h1 class="game-title">TAMATRIS</h1>
+<div class="game-content">
+<div class="tetris-grid"></div>
+<div class="stats">
+<div class="monkey-face" id="monkey-emoji">🐵</div>
+<div class="stat-icon" id="hydration">💧 <span id="hydration-value" class="stat-value">0</span></div>
+<div class="stat-icon" id="nutrition">🍏 <span id="nutrition-value" class="stat-value">0</span></div>
+<div class="stat-icon" id="mood">😊 <span id="mood-value" class="stat-value">0</span></div>
+<div class="game-info">
+<div class="info-box">
+<div class="info-label">LEVEL</div>
+<div id="level-value" class="info-value">1</div>
+</div>
+<div class="info-box">
+<div class="info-label">SCORE</div>
+<div id="score-value" class="info-value">0</div>
+</div>
+</div>
+</div>
+</div>
+<div class="controls">
+<button class="control-btn" id="left-btn">←</button>
+<button class="control-btn" id="rotate-btn">↻</button>
+<button class="control-btn" id="right-btn">→</button>
+<button class="control-btn" id="drop-btn">↓</button>
+</div>
+</div>
+<script>const grid=document.querySelector(".tetris-grid"),hydrationEl=document.getElementById("hydration-value"),nutritionEl=document.getElementById("nutrition-value"),moodEl=document.getElementById("mood-value"),scoreEl=document.getElementById("score-value"),levelEl=document.getElementById("level-value"),monkeyEmoji=document.getElementById("monkey-emoji");let score=0,level=1,lines=0,hydration,nutrition,mood,currentShape,currentPos,currentColors,currentShapeIndex,gameSpeed=1e3,statDecayRate=1;const colors=["#ff6b6b","#4ecdc4","#feca57","#45aaf2"],shapes=[{shape:[[1,1,1,1]],width:4},{shape:[[1,1],[1,1]],width:2},{shape:[[1,1,1],[0,1,0]],width:3},{shape:[[1,1,1],[1,0,0]],width:3},{shape:[[1,1,1],[0,0,1]],width:3},{shape:[[1,1,0],[0,1,1]],width:3},{shape:[[0,1,1],[1,1,0]],width:3}];for(let e=0;e<200;e++){const t=document.createElement("div");t.classList.add("tetris-cell"),grid.appendChild(t)}function initializeStats(){const e=[20,30,40],t=e.sort(()=>Math.random()-.5);hydration=t[0],nutrition=t[1],mood=t[2],updateStats()}function newShape(){currentShapeIndex=Math.floor(Math.random()*shapes.length),currentShape=shapes[currentShapeIndex].shape,currentPos={x:Math.floor((10-shapes[currentShapeIndex].width)/2),y:0},currentColors=currentShape.map(e=>e.map(()=>colors[Math.floor(Math.random()*colors.length)])),collision()?gameOver():(draw(),updatePetStats(),updatePathHighlight())}function draw(){currentShape.forEach((e,t)=>{e.forEach((e,n)=>{if(e){const e=grid.children[10*(currentPos.y+t)+(currentPos.x+n)];e&&(e.style.backgroundColor=currentColors[t][n],e.style.boxShadow=`0 0 5px ${currentColors[t][n]}`)}})})}function erase(){currentShape.forEach((e,t)=>{e.forEach((e,n)=>{if(e){const e=grid.children[10*(currentPos.y+t)+(currentPos.x+n)];e&&(e.style.backgroundColor="",e.style.boxShadow="")}})})}function collision(){return currentShape.some((e,t)=>e.some((e,n)=>e&&(currentPos.y+t>=20||currentPos.x+n<0||currentPos.x+n>=10||grid.children[10*(currentPos.y+t)+(currentPos.x+n)].classList.contains("taken"))))}function solidify(){currentShape.forEach((e,t)=>{e.forEach((e,n)=>{e&&grid.children[10*(currentPos.y+t)+(currentPos.x+n)].classList.add("taken")})})}function clearRows(){let e=0,t=[0,0,0],n=0;for(let r=19;r>=0;r--){const o=Array.from(grid.children).slice(10*r,10*(r+1));o.every(e=>e.classList.contains("taken"))&&(o.forEach(e=>{const r=e.style.backgroundColor;"rgb(255, 107, 107)"===r?(t[0]++,n++):"rgb(78, 205, 196)"===r?t[1]++:"rgb(254, 202, 87)"===r&&t[2]++,e.style.backgroundColor="",e.style.boxShadow="",e.classList.remove("taken")}),grid.prepend(...Array.from(grid.children).splice(10*r,10)),e++,r++)}e&&(lines+=e,score+=100*n,updateLevel(),updatePetStatsOnClear(t),updateScoreAndLevel())}function updateLevel(){const e=Math.floor(score/1e3)+1;e>level&&(level=e,gameSpeed*=.9,statDecayRate*=1.1,updateGameSpeed(),highlightChange(levelEl))}function updatePetStats(){hydration=Math.max(0,hydration-.5*statDecayRate),nutrition=Math.max(0,nutrition-.5*statDecayRate),mood=Math.max(0,mood-.5*statDecayRate),updateStats(),hydration<=0||nutrition<=0||mood<=0?gameOver():void 0}function updatePetStatsOnClear(e){hydration=Math.min(100,hydration+e[0]),nutrition=Math.min(100,nutrition+e[1]),mood=Math.min(100,mood+e[2]),updateStats()}function updateStats(){updateStatWithHighlight(hydrationEl,Math.round(hydration)),updateStatWithHighlight(nutritionEl,Math.round(nutrition)),updateStatWithHighlight(moodEl,Math.round(mood));const e=hydration<10||nutrition<10||mood<10;document.getElementById("hydration").classList.toggle("danger",hydration<10),document.getElementById("nutrition").classList.toggle("danger",nutrition<10),document.getElementById("mood").classList.toggle("danger",mood<10),monkeyEmoji.textContent=e?"🙊":"🐵"}function updateScoreAndLevel(){updateStatWithHighlight(scoreEl,score),updateStatWithHighlight(levelEl,level)}function updateStatWithHighlight(e,t){const n=parseInt(e.textContent);n!==t&&(e.textContent=t,highlightChange(e))}function highlightChange(e){e.classList.add("highlight-change"),setTimeout(()=>{e.classList.remove("highlight-change")},200)}function gameOver(){alert(`Game Over! Your score: ${score}`),Array.from(grid.children).forEach(e=>{e.style.backgroundColor="",e.style.boxShadow="",e.classList.remove("taken")}),score=0,level=1,lines=0,gameSpeed=1e3,statDecayRate=1,initializeStats(),updateScoreAndLevel(),updateGameSpeed(),newShape()}["left-btn","right-btn","rotate-btn","drop-btn"].forEach(e=>{const t=document.getElementById(e);t.addEventListener("mousedown",n=>{"left-btn"===e?move(-1):"right-btn"===e?move(1):"rotate-btn"===e?rotate():"drop-btn"===e&&hardDrop(),n.preventDefault()}),t.addEventListener("touchstart",n=>{"left-btn"===e?move(-1):"right-btn"===e?move(1):"rotate-btn"===e?rotate():"drop-btn"===e&&hardDrop(),n.preventDefault()}),t.addEventListener("mouseup",()=>{t.blur()}),t.addEventListener("touchend",()=>{t.blur()})});function move(e){erase(),currentPos.x+=e,collision()?(currentPos.x-=e,draw()):(draw(),updatePathHighlight())}function rotate(){erase();const e=currentShape,t=currentColors;currentShape=currentShape[0].map((e,t)=>currentShape.map(e=>e[t]).reverse()),currentColors=currentColors[0].map((e,t)=>currentColors.map(e=>e[t]).reverse()),collision()?(currentShape=e,currentColors=t,draw()):(draw(),updatePathHighlight())}function hardDrop(){for(erase();!collision();)currentPos.y++;currentPos.y--,draw(),solidify(),clearRows(),newShape()}function moveDown(){erase(),currentPos.y++,collision()?(currentPos.y--,draw(),solidify(),clearRows(),newShape()):(draw(),updatePathHighlight())}function updateGameSpeed(){clearInterval(gameInterval),gameInterval=setInterval(moveDown,gameSpeed)}function updatePathHighlight(){const e=document.querySelectorAll(".path-highlight");e.forEach(e=>e.remove());const t=getShapeWidth(),n=document.createElement("div"),r=document.createElement("div");n.classList.add("path-highlight"),r.classList.add("path-highlight"),n.style.width="1px",r.style.width="1px",n.style.height="400px",r.style.height="400px",n.style.left=20*currentPos.x+"px",r.style.left=20*(currentPos.x+t)+"px",n.style.top="0px",r.style.top="0px",grid.appendChild(n),grid.appendChild(r)}function getShapeWidth(){let e=0;for(let t=0;t<currentShape[0].length;t++)currentShape.some(e=>e[t])&&e++;return e}initializeStats(),updateScoreAndLevel(),newShape();let gameInterval=setInterval(moveDown,gameSpeed);setInterval(updatePetStats,5e3);</script>
+</body></html>

dFk2QRhlphzanAvzP.html ADDED Viewed

	@@ -0,0 +1,133 @@

+<html><head><base href="https://vastgallery.art"><title>Vast Gallery - Infinite Canvas of Digital Art</title><style>
+    body {
+        font-family: 'Arial', sans-serif;
+        margin: 0;
+        padding: 0;
+        background-color: #f0f0f0;
+        color: #333;
+    }
+    header {
+        background-color: #fff;
+        padding: 20px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    }
+    h1 {
+        margin: 0;
+        color: #4a4a4a;
+    }
+    nav {
+        margin-top: 20px;
+    }
+    nav a {
+        color: #4a4a4a;
+        text-decoration: none;
+        margin-right: 15px;
+    }
+    .gallery {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        padding: 20px;
+    }
+    .artwork {
+        background-color: #fff;
+        margin: 10px;
+        padding: 15px;
+        width: 300px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        transition: transform 0.3s ease;
+    }
+    .artwork:hover {
+        transform: scale(1.05);
+    }
+    .artwork img {
+        width: 100%;
+        height: auto;
+    }
+    .artwork h3 {
+        margin: 10px 0;
+    }
+    .artwork p {
+        color: #666;
+        font-size: 0.9em;
+    }
+    footer {
+        background-color: #333;
+        color: #fff;
+        text-align: center;
+        padding: 20px;
+        margin-top: 20px;
+    }
+    @keyframes float {
+        0% { transform: translateY(0px); }
+        50% { transform: translateY(-20px); }
+        100% { transform: translateY(0px); }
+    }
+    .floating {
+        animation: float 6s ease-in-out infinite;
+    }
+</style></head><body>
+    <header>
+        <h1>Vast Gallery</h1>
+        <nav>
+            <a href="#featured">Featured</a>
+            <a href="#explore">Explore</a>
+            <a href="#artists">Artists</a>
+            <a href="#about">About</a>
+            <a href="https://vastgallery.art/vr">VR Experience</a>
+        </nav>
+    </header>
+    <main class="gallery">
+        <div class="artwork floating">
+            <img src="quantum_landscape.jpg" alt="A swirling quantum landscape with fractals and abstract shapes, digital art" width="300" height="200">
+            <h3>Quantum Landscape</h3>
+            <p>By: QuantumDreamer</p>
+        </div>
+        <div class="artwork floating" style="animation-delay: 2s;">
+            <img src="neural_network_portrait.jpg" alt="A portrait created by a neural network, showing a face merging with circuit patterns" width="300" height="200">
+            <h3>Neural Network Portrait</h3>
+            <p>By: AIArtist2045</p>
+        </div>
+        <div class="artwork floating" style="animation-delay: 4s;">
+            <img src="fractal_city.jpg" alt="A city made entirely of fractals, with impossible architecture and glowing lines" width="300" height="200">
+            <h3>Fractal City</h3>
+            <p>By: FractalArchitect</p>
+        </div>
+    </main>
+    <footer>
+        <p>Vast Gallery - Infinite Canvas of Digital Art</p>
+        <p><a href="https://vastgallery.art/submit">Submit Your Artwork</a> | <a href="https://vastgallery.art/marketplace">NFT Marketplace</a></p>
+    </footer>
+    <script>
+        // Dynamic loading of artworks
+        window.addEventListener('scroll', function() {
+            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
+                loadMoreArtworks();
+            }
+        });
+        function loadMoreArtworks() {
+            // Simulating API call to load more artworks
+            const newArtworks = [
+                {title: "Cybernetic Dreamscape", artist: "NeonMindscaper", image: "cybernetic_dreamscape.jpg"},
+                {title: "Quantum Entanglement", artist: "ParticlePoet", image: "quantum_entanglement.jpg"},
+                {title: "Digital Ecosystem", artist: "BinaryBiologist", image: "digital_ecosystem.jpg"}
+            ];
+            const gallery = document.querySelector('.gallery');
+            newArtworks.forEach(artwork => {
+                const div = document.createElement('div');
+                div.className = 'artwork floating';
+                div.innerHTML = `
+                    <img src="${artwork.image}" alt="${artwork.title} by ${artwork.artist}, digital artwork" width="300" height="200">
+                    <h3>${artwork.title}</h3>
+                    <p>By: ${artwork.artist}</p>
+                `;
+                gallery.appendChild(div);
+            });
+        }
+    </script>
+</body></html>

siUi6EynghidyZU6N.html ADDED Viewed

	@@ -0,0 +1,284 @@

+<html><head><base href="interface://insight.dataviz"><title>InsightViz - Cognitive Data Visualization Platform</title>
+<style>
+    body, html {
+        margin: 0;
+        padding: 0;
+        font-family: 'Roboto', sans-serif;
+        background-color: #0a0a1a;
+        color: #e0e0e0;
+        height: 100%;
+        overflow: hidden;
+    }
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+    header {
+        background-color: #1a1a2e;
+        padding: 1rem;
+        text-align: center;
+    }
+    h1 {
+        margin: 0;
+        color: #4db8ff;
+    }
+    .content {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+    }
+    .sidebar {
+        width: 250px;
+        background-color: #1a1a2e;
+        padding: 1rem;
+        overflow-y: auto;
+    }
+    .main {
+        flex: 1;
+        padding: 1rem;
+        overflow: hidden;
+    }
+    #visualization {
+        width: 100%;
+        height: 100%;
+        background-color: #0f0f1e;
+        border-radius: 10px;
+    }
+    .control-group {
+        margin-bottom: 1rem;
+    }
+    label {
+        display: block;
+        margin-bottom: 0.5rem;
+        color: #4db8ff;
+    }
+    select, input[type="range"] {
+        width: 100%;
+        padding: 0.5rem;
+        background-color: #2a2a3e;
+        color: #e0e0e0;
+        border: none;
+        border-radius: 5px;
+    }
+    button {
+        background-color: #4db8ff;
+        color: #0a0a1a;
+        border: none;
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+        border-radius: 5px;
+        transition: background-color 0.3s ease;
+    }
+    button:hover {
+        background-color: #3a9bd9;
+    }
+</style>
+</head>
+<body>
+<div class="container">
+    <header>
+        <h1>InsightViz - Cognitive Data Visualization Platform</h1>
+    </header>
+    <div class="content">
+        <div class="sidebar">
+            <div class="control-group">
+                <label for="data-source">Data Source:</label>
+                <select id="data-source">
+                    <option value="eeg">EEG Brainwaves</option>
+                    <option value="fmri">fMRI Scans</option>
+                    <option value="biometrics">Biometric Signals</option>
+                    <option value="linguistic">Linguistic Patterns</option>
+                </select>
+            </div>
+            <div class="control-group">
+                <label for="viz-type">Visualization Type:</label>
+                <select id="viz-type">
+                    <option value="neural-network">Neural Network</option>
+                    <option value="thought-stream">Thought Stream</option>
+                    <option value="emotion-landscape">Emotion Landscape</option>
+                    <option value="decision-tree">Decision Tree</option>
+                </select>
+            </div>
+            <div class="control-group">
+                <label for="time-scale">Time Scale:</label>
+                <input type="range" id="time-scale" min="1" max="100" value="50">
+            </div>
+            <div class="control-group">
+                <label for="complexity">Complexity Level:</label>
+                <input type="range" id="complexity" min="1" max="10" value="5">
+            </div>
+            <button id="generate-viz">Generate Visualization</button>
+        </div>
+        <div class="main">
+            <div id="visualization"></div>
+        </div>
+    </div>
+</div>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+    const width = document.getElementById('visualization').clientWidth;
+    const height = document.getElementById('visualization').clientHeight;
+    const svg = d3.select('#visualization')
+        .append('svg')
+        .attr('width', width)
+        .attr('height', height);
+    function generateVisualization() {
+        const dataSource = document.getElementById('data-source').value;
+        const vizType = document.getElementById('viz-type').value;
+        const timeScale = document.getElementById('time-scale').value;
+        const complexity = document.getElementById('complexity').value;
+        svg.selectAll('*').remove();
+        switch(vizType) {
+            case 'neural-network':
+                generateNeuralNetwork();
+                break;
+            case 'thought-stream':
+                generateThoughtStream();
+                break;
+            case 'emotion-landscape':
+                generateEmotionLandscape();
+                break;
+            case 'decision-tree':
+                generateDecisionTree();
+                break;
+        }
+    }
+    function generateNeuralNetwork() {
+        const nodes = d3.range(50).map(d => ({x: Math.random() * width, y: Math.random() * height}));
+        const links = d3.range(100).map(() => ({
+            source: Math.floor(Math.random() * nodes.length),
+            target: Math.floor(Math.random() * nodes.length)
+        }));
+        svg.selectAll('line')
+            .data(links)
+            .enter().append('line')
+            .style('stroke', '#4db8ff')
+            .style('stroke-width', 0.5);
+        svg.selectAll('circle')
+            .data(nodes)
+            .enter().append('circle')
+            .attr('r', 3)
+            .style('fill', '#4db8ff');
+        d3.forceSimulation(nodes)
+            .force('charge', d3.forceManyBody().strength(-20))
+            .force('center', d3.forceCenter(width / 2, height / 2))
+            .force('link', d3.forceLink(links))
+            .on('tick', () => {
+                svg.selectAll('line')
+                    .attr('x1', d => d.source.x)
+                    .attr('y1', d => d.source.y)
+                    .attr('x2', d => d.target.x)
+                    .attr('y2', d => d.target.y);
+                svg.selectAll('circle')
+                    .attr('cx', d => d.x)
+                    .attr('cy', d => d.y);
+            });
+    }
+    function generateThoughtStream() {
+        const data = d3.range(100).map((d, i) => ({
+            x: i,
+            y: Math.sin(i / 10) * Math.random() * 100 + Math.random() * 50
+        }));
+        const line = d3.line()
+            .x(d => d.x * (width / 100))
+            .y(d => height - d.y)
+            .curve(d3.curveBasis);
+        svg.append('path')
+            .datum(data)
+            .attr('fill', 'none')
+            .attr('stroke', '#4db8ff')
+            .attr('stroke-width', 2)
+            .attr('d', line);
+    }
+    function generateEmotionLandscape() {
+        const data = d3.range(20).flatMap((x) =>
+            d3.range(20).map((y) => ({x, y, value: Math.random()}))
+        );
+        const color = d3.scaleSequential(d3.interpolateViridis)
+            .domain([0, 1]);
+        svg.selectAll('rect')
+            .data(data)
+            .enter().append('rect')
+            .attr('x', d => d.x * (width / 20))
+            .attr('y', d => d.y * (height / 20))
+            .attr('width', width / 20)
+            .attr('height', height / 20)
+            .attr('fill', d => color(d.value));
+    }
+    function generateDecisionTree() {
+        const treeData = {
+            name: "Root",
+            children: [
+                {
+                    name: "Decision A",
+                    children: [
+                        {name: "Outcome A1"},
+                        {name: "Outcome A2"}
+                    ]
+                },
+                {
+                    name: "Decision B",
+                    children: [
+                        {name: "Outcome B1"},
+                        {name: "Outcome B2"}
+                    ]
+                }
+            ]
+        };
+        const treeLayout = d3.tree().size([height, width - 100]);
+        const root = d3.hierarchy(treeData);
+        treeLayout(root);
+        svg.selectAll('.link')
+            .data(root.links())
+            .enter().append('path')
+            .attr('class', 'link')
+            .attr('d', d3.linkHorizontal()
+                .x(d => d.y)
+                .y(d => d.x))
+            .attr('fill', 'none')
+            .attr('stroke', '#4db8ff');
+        const node = svg.selectAll('.node')
+            .data(root.descendants())
+            .enter().append('g')
+            .attr('class', 'node')
+            .attr('transform', d => `translate(${d.y},${d.x})`);
+        node.append('circle')
+            .attr('r', 4)
+            .attr('fill', '#4db8ff');
+        node.append('text')
+            .attr('dy', '.31em')
+            .attr('x', d => d.children ? -6 : 6)
+            .style('text-anchor', d => d.children ? 'end' : 'start')
+            .text(d => d.data.name)
+            .attr('fill', '#e0e0e0');
+    }
+    document.getElementById('generate-viz').addEventListener('click', generateVisualization);
+    // Initial visualization
+    generateVisualization();
+</script>
+</body></html>

u6Q8itx84CMpzgUin.html ADDED Viewed

	@@ -0,0 +1,414 @@

+<html><head><base href="interface://wikidata.graph"><title>Wikidata Graph Explorer</title>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script src="https://cdn.tailwindcss.com"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<style>
+  body {
+    touch-action: none;
+  }
+  .loader {
+    fill: red;
+    stroke: red;
+    animation: pulsing 1s linear infinite;
+    transform-origin: center;
+  }
+  @keyframes pulsing {
+    0% { opacity: 0.7; }
+    50% { opacity: 0.4; }
+    100% { opacity: 0.7; }
+  }
+  .popover {
+    position: relative;
+    display: inline-block;
+  }
+  .popover .popovertext {
+    font-size: 14px;
+    font-weight: normal;
+    visibility: hidden;
+    width: 200px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 1;
+    top: 171%;
+    left: 0;
+    margin-left: -0.8em;
+  }
+  .popover .popovertext::after {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    margin-left: 1.2em;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent black transparent;
+  }
+  .popover.active .popovertext {
+    visibility: visible;
+  }
+  #status {
+    position: absolute;
+    left: 1em;
+    top: 3em;
+  }
+  #status > div {
+    padding: 0.4em 1em;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 1em;
+    box-shadow: 0em 0.2em 0.5em 0 rgba(0, 0, 0, 0.25);
+    max-width: 50vw;
+    max-height: 3em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-word;
+    text-align: left;
+    overflow: hidden;
+    margin-bottom: 0.5em;
+  }
+  #status:empty {
+    display: none;
+  }
+  .modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+  }
+  .modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 1em;
+    border: 1px solid #888;
+    max-width: 90%;
+    display:flex;
+    flex-direction: column;
+    gap: 1em;
+  }
+  .modal-content textarea {
+    max-width: 100%;
+  }
+  .model-content h2 {
+    font-weight: bold;
+  }
+  path.link {
+    fill: none;
+    stroke: rgba(0,0,0,0.2);
+    stroke-width: 1px;
+    stroke-dasharray: 3 1;
+  }
+  path.link.highlight {
+    stroke: red;
+    stroke-dasharray: none;
+  }
+  text.edge-label {
+    fill: rgba(0,0,0,0.2);
+  }
+  text.edge-label.highlight {
+    fill: black;
+  }
+  marker#arrow {
+    fill: black;
+  }
+</style>
+</head>
+<body>
+<div id="app" class="flex flex-col min-h-screen bg-gray-100">
+  <div class="navbar bg-blue-600 text-white px-4 py-2 sticky top-0 flex justify-between items-center">
+    <h1 class="text-md font-bold">
+      <span id="info" class="popover">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+        </svg>
+        <span id="popoverContent" class="popovertext">This app allows you to interactively explore Wikidata. Click on nodes to expand and reveal connected entities. Use the controls to initialize, reset or export the graph.</span>
+      </span>
+      Wikidata Graph Explorer
+    </h1>
+    <div>
+      <button id="initButton" class="bg-white text-blue-600 px-2 py-1 rounded text-xs mr-2">New</button>
+      <button id="exportButton" class="bg-white text-blue-600 px-2 py-1 rounded text-xs mr-2">Export</button>
+      <button id="resetButton" class="bg-white text-red-600 px-2 py-1 rounded text-xs">Reset</button>
+    </div>
+  </div>
+  <div class="main-content flex-grow">
+    <div id="status" class="mt-4 text-center"></div>
+    <div id="graph"></div>
+  </div>
+  <div class="flex-shrink p-2 border-t border-gray-200 text-center text-xs">
+    Built with D3.js and Wikidata API
+  </div>
+</div>
+<script>
+const width = window.innerWidth;
+const height = window.innerHeight - 75;
+const svg = d3.select("#graph")
+  .append("svg")
+  .attr("viewBox", [0, 0, width, height]);
+svg.append("defs").append("marker")
+  .attr("id", "arrow")
+  .attr("viewBox", "0 -5 10 10")
+  .attr("refX", 20)
+  .attr("refY", 0)
+  .attr("markerWidth", 6)
+  .attr("markerHeight", 6)
+  .attr("orient", "auto")
+  .append("path")
+  .attr("d", "M0,-5L10,0L0,5")
+  .attr("fill", "#999");
+const g = svg.append("g");
+const zoom = d3.zoom()
+  .scaleExtent([0.2, 5])
+  .on("zoom", zoomed);
+svg.call(zoom);
+function zoomed({transform}) {
+  g.attr("transform", transform);
+}
+info.onclick = (ev) => info.classList.toggle("active")
+popoverContent.onclick = (ev) => ev.stopPropagation()
+const simulation = d3.forceSimulation()
+  .force("link", d3.forceLink().id(d => d.id).distance(100))
+  .force("charge", d3.forceManyBody().strength(-300))
+  .force("center", d3.forceCenter(width / 2, height / 2))
+  .force("collision", d3.forceCollide().radius(50));
+let link = g.append("g")
+  .attr("stroke", "#999")
+  .attr("stroke-opacity", 0.6)
+  .selectAll("path");
+let node = g.append("g")
+  .attr("stroke", "#fff")
+  .attr("stroke-width", 1.5)
+  .selectAll("circle");
+let edgeLabel = g.append("g")
+  .selectAll("text");
+let nodeLabel = g.append("g")
+  .selectAll("text");
+let currentGraph = {nodes: [], links: []};
+const init = (defaultEntity) => async () => {
+  const entity = defaultEntity || prompt("Enter a Wikidata entity ID (e.g. Q5 for human):", "Q5");
+  if (entity) {
+    currentGraph = {
+      nodes: [{id: entity, label: await fetchLabel(entity)}],
+      links: []
+    };
+    await updateGraph(currentGraph);
+  }
+}
+d3.select("#initButton").on("click", init());
+d3.select("#exportButton").on("click", () => {
+  const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(currentGraph));
+  const downloadAnchorNode = document.createElement('a');
+  downloadAnchorNode.setAttribute("href", dataStr);
+  downloadAnchorNode.setAttribute("download", "wikidata_graph.json");
+  document.body.appendChild(downloadAnchorNode);
+  downloadAnchorNode.click();
+  downloadAnchorNode.remove();
+});
+d3.select("#resetButton").on("click", async () => {
+  currentGraph = {nodes: [], links: []};
+  svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
+  await updateGraph(currentGraph);
+});
+async function updateGraph(data) {
+  console.log("Updating graph with data:", data);
+  let nodes = data.nodes.map(d => Object.create(d));
+  let links = data.links.map(d => Object.create(d));
+  simulation.nodes(nodes);
+  simulation.force("link").links(links);
+  link = link
+    .data(links)
+    .join("path")
+    .attr("class", "link")
+    .attr("marker-end", "url(#arrow)");
+  node = node
+    .data(nodes, d => d.id)
+    .join("circle")
+    .attr("r", 20)
+    .attr("fill", d => d.color || "#69b3a2")
+    .call(drag(simulation));
+  edgeLabel = edgeLabel
+    .data(links)
+    .join("text")
+    .attr("class", "edge-label")
+    .attr("font-size", "10px")
+    .attr("text-anchor", "middle")
+    .text(d => d.label);
+  nodeLabel = nodeLabel
+    .data(nodes)
+    .join("text")
+    .attr("font-size", "12px")
+    .attr("text-anchor", "middle")
+    .attr("dy", 30)
+    .text(d => d.label);
+  node.on("click", async (event, d) => {
+    event.stopPropagation();
+    console.log("Clicked node:", d);
+    d3.select(event.currentTarget).attr("class", "loader");
+    const loadingEl = document.createElement('div');
+    loadingEl.innerText = `Expanding "${d.label}" ...`;
+    document.getElementById('status').appendChild(loadingEl);
+    try {
+      const newData = await fetchConnectedEntities(d.id);
+      currentGraph.nodes = [...currentGraph.nodes, ...newData.nodes];
+      currentGraph.links = [...currentGraph.links, ...newData.links];
+      // Remove duplicates
+      currentGraph.nodes = Array.from(new Map(currentGraph.nodes.map(item => [item.id, item])).values());
+      currentGraph.links = currentGraph.links.filter((link, index, self) =>
+        index === self.findIndex((t) => t.source === link.source && t.target === link.target)
+      );
+      await updateGraph(currentGraph);
+    } catch (error) {
+      console.error("Error fetching connected entities:", error);
+    } finally {
+      d3.select(event.currentTarget).attr("class", "");
+      loadingEl.remove();
+    }
+  });
+  simulation.on("tick", () => {
+    link.attr("d", linkArc);
+    node.attr("cx", d => d.x).attr("cy", d => d.y);
+    nodeLabel.attr("x", d => d.x).attr("y", d => d.y);
+    edgeLabel
+      .attr("x", d => (d.source.x + d.target.x) / 2)
+      .attr("y", d => (d.source.y + d.target.y) / 2);
+  });
+  simulation.alpha(1).restart();
+}
+function linkArc(d) {
+  const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);
+  return `
+    M${d.source.x},${d.source.y}
+    A${r},${r} 0 0,1 ${d.target.x},${d.target.y}
+  `;
+}
+function drag(simulation) {
+  function dragstarted(event) {
+    if (!event.active) simulation.alphaTarget(0.3).restart();
+    event.subject.fx = event.subject.x;
+    event.subject.fy = event.subject.y;
+  }
+  function dragged(event) {
+    event.subject.fx = event.x;
+    event.subject.fy = event.y;
+  }
+  function dragended(event) {
+    if (!event.active) simulation.alphaTarget(0);
+    event.subject.fx = null;
+    event.subject.fy = null;
+  }
+  return d3.drag()
+    .on("start", dragstarted)
+    .on("drag", dragged)
+    .on("end", dragended);
+}
+async function fetchLabel(entityId) {
+  const url = `https://www.wikidata.org/w/api.php?action=wbgetentities&ids=${entityId}&props=labels&languages=en&format=json&origin=*`;
+  const response = await fetch(url);
+  const data = await response.json();
+  return data.entities[entityId].labels.en?.value || entityId;
+}
+async function fetchConnectedEntities(entityId) {
+  const url = `https://query.wikidata.org/sparql?query=
+    SELECT ?item ?itemLabel ?prop ?propLabel WHERE {
+      wd:${entityId} ?prop ?item .
+      ?item wdt:P31 ?type .
+      SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
+    }
+    LIMIT 10
+  &format=json`;
+  const response = await fetch(url);
+  const data = await response.json();
+  const nodes = [];
+  const links = [];
+  const seenItems = new Set();
+  for (const result of data.results.bindings) {
+    const item = result.item.value.split('/').pop();
+    if (!seenItems.has(item)) {
+      nodes.push({id: item, label: result.itemLabel.value});
+      links.push({
+        source: entityId,
+        target: item,
+        label: result.propLabel.value
+      });
+      seenItems.add(item);
+    }
+  }
+  return {nodes, links};
+}
+document.addEventListener("DOMContentLoaded", init());
+</script>
+</body>
+</html>

xFNbOlWvWPkCQwLpa.html ADDED Viewed

	@@ -0,0 +1,126 @@

+<html><head><base href="telepathic://roger/brain/tingle"><title>Roger's Telepathic Brain Tingle</title>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f8ff;
+    color: #333;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    overflow: hidden;
+  }
+  .container {
+    background-color: white;
+    border-radius: 10px;
+    padding: 30px;
+    box-shadow: 0 0 20px rgba(0,0,0,0.1);
+    max-width: 600px;
+    text-align: center;
+    position: relative;
+  }
+  h1 {
+    color: #4b0082;
+    margin-bottom: 20px;
+  }
+  .thought-bubble {
+    background-color: #e6e6fa;
+    border-radius: 20px;
+    padding: 15px;
+    margin: 20px 0;
+    position: relative;
+  }
+  .thought-bubble:before {
+    content: '';
+    position: absolute;
+    bottom: -20px;
+    left: 20px;
+    border-width: 20px 0 0 20px;
+    border-style: solid;
+    border-color: #e6e6fa transparent transparent transparent;
+  }
+  .tingle-meter {
+    width: 100%;
+    height: 20px;
+    background-color: #ddd;
+    border-radius: 10px;
+    margin-top: 20px;
+    overflow: hidden;
+  }
+  .tingle-level {
+    width: 75%;
+    height: 100%;
+    background-color: #9370db;
+    animation: pulse 2s infinite;
+  }
+  @keyframes pulse {
+    0% { opacity: 0.6; }
+    50% { opacity: 1; }
+    100% { opacity: 0.6; }
+  }
+  .brain-waves {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+  .wave {
+    position: absolute;
+    border: 2px solid rgba(75, 0, 130, 0.2);
+    border-radius: 50%;
+    animation: ripple 4s linear infinite;
+  }
+  .wave:nth-child(1) { animation-delay: 0s; }
+  .wave:nth-child(2) { animation-delay: 1s; }
+  .wave:nth-child(3) { animation-delay: 2s; }
+  .wave:nth-child(4) { animation-delay: 3s; }
+  @keyframes ripple {
+    0% { width: 0; height: 0; opacity: 1; top: 50%; left: 50%; }
+    100% { width: 500px; height: 500px; opacity: 0; top: calc(50% - 250px); left: calc(50% - 250px); }
+  }
+</style>
+</head>
+<body>
+  <div class="container">
+    <h1>Roger's Brain Tingle</h1>
+    <div class="thought-bubble">
+      <p>You're experiencing a curious sensation, a gentle tingle in your mind. It feels as if someone is softly brushing the inside of your thoughts with a feather made of pure consciousness.</p>
+    </div>
+    <p>Current Tingle Intensity:</p>
+    <div class="tingle-meter">
+      <div class="tingle-level"></div>
+    </div>
+    <p>Your telepathic receptivity is currently at 75%</p>
+    <div class="brain-waves">
+      <div class="wave"></div>
+      <div class="wave"></div>
+      <div class="wave"></div>
+      <div class="wave"></div>
+    </div>
+  </div>
+  <script>
+    function generateThought() {
+      const thoughts = [
+        "Did I leave the stove on?",
+        "I wonder what dogs dream about",
+        "Is cereal soup?",
+        "Why don't sheep shrink when it rains?",
+        "Do fish ever get thirsty?",
+        "Is a hotdog a sandwich?",
+        "Why do we drive on parkways and park on driveways?",
+        "If I invisibly sleep, do I disappear in my dreams?",
+        "Are shadows 2D or 3D?",
+        "Why isn't phonetic spelled the way it sounds?"
+      ];
+      const randomThought = thoughts[Math.floor(Math.random() * thoughts.length)];
+      document.querySelector('.thought-bubble p').textContent = randomThought;
+    }
+    setInterval(generateThought, 5000);
+  </script>
+</body></html>