| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>VRML Data Visualization with CBR Pixels</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.net.min.js"></script> |
| <style> |
| body { |
| margin: 0; |
| overflow: hidden; |
| font-family: 'Courier New', monospace; |
| } |
| #vrml-container { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| .data-block { |
| position: absolute; |
| background: rgba(30, 30, 30, 0.7); |
| border: 1px solid rgba(100, 255, 255, 0.5); |
| border-radius: 4px; |
| padding: 10px; |
| color: #66ffcc; |
| font-size: 12px; |
| pointer-events: none; |
| transform: translateZ(0); |
| } |
| .pixel-cluster { |
| position: absolute; |
| display: flex; |
| flex-wrap: wrap; |
| width: 80px; |
| height: 80px; |
| pointer-events: none; |
| } |
| .pixel { |
| width: 8px; |
| height: 8px; |
| margin: 1px; |
| background: #4aff9d; |
| opacity: 0.8; |
| transition: all 0.3s ease; |
| } |
| .pixel:hover { |
| transform: scale(1.5); |
| opacity: 1; |
| background: #ff4a9d; |
| } |
| .search-btn { |
| position: fixed; |
| bottom: 30px; |
| right: 30px; |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #4aff9d, #4a9dff); |
| color: white; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
| z-index: 1000; |
| transition: all 0.3s ease; |
| } |
| .search-btn:hover { |
| transform: scale(1.1) rotate(15deg); |
| box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4); |
| } |
| .search-panel { |
| position: fixed; |
| bottom: 110px; |
| right: 30px; |
| width: 300px; |
| padding: 20px; |
| background: rgba(30, 30, 30, 0.9); |
| border-radius: 10px; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); |
| z-index: 1000; |
| transform: translateY(20px); |
| opacity: 0; |
| pointer-events: none; |
| transition: all 0.3s ease; |
| } |
| .search-panel.active { |
| transform: translateY(0); |
| opacity: 1; |
| pointer-events: all; |
| } |
| .search-input { |
| width: 100%; |
| padding: 10px; |
| background: rgba(50, 50, 50, 0.8); |
| border: 1px solid #4aff9d; |
| border-radius: 5px; |
| color: white; |
| margin-bottom: 10px; |
| } |
| .search-results { |
| max-height: 300px; |
| overflow-y: auto; |
| } |
| .result-item { |
| padding: 8px; |
| margin: 5px 0; |
| background: rgba(70, 70, 70, 0.5); |
| border-radius: 3px; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
| .result-item:hover { |
| background: rgba(100, 255, 255, 0.2); |
| transform: translateX(5px); |
| } |
| .highlight { |
| background-color: rgba(255, 215, 0, 0.3); |
| color: #ffd700; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="vrml-container"></div> |
| |
| |
| <div class="data-block" style="top: 20%; left: 15%;"> |
| <h3 class="text-lg mb-2">Data Block #1</h3> |
| <p>VRML Geometry Nodes</p> |
| <p>Transform: [x:1.2, y:0.8, z:0.5]</p> |
| <div class="pixel-cluster" style="top: 50px; left: 10px;"></div> |
| </div> |
| |
| <div class="data-block" style="top: 30%; right: 20%;"> |
| <h3 class="text-lg mb-2">Data Block #2</h3> |
| <p>Pixel Cluster Analysis</p> |
| <p>Density: 0.78</p> |
| <div class="pixel-cluster" style="top: 50px; left: 10px;"></div> |
| </div> |
| |
| <div class="data-block" style="bottom: 25%; left: 25%;"> |
| <h3 class="text-lg mb-2">Data Block #3</h3> |
| <p>CBR Metadata</p> |
| <p>Index: 42</p> |
| <div class="pixel-cluster" style="top: 50px; left: 10px;"></div> |
| </div> |
| |
| |
| <div class="search-btn" id="searchBtn"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <circle cx="11" cy="11" r="8"></circle> |
| <line x1="21" y1="21" x2="16.65" y2="16.65"></line> |
| </svg> |
| </div> |
| |
| |
| <div class="search-panel" id="searchPanel"> |
| <input type="text" class="search-input" placeholder="Search data blocks..." id="searchInput"> |
| <div class="search-results" id="searchResults"> |
| |
| </div> |
| </div> |
|
|
| <script> |
| |
| const container = document.getElementById('vrml-container'); |
| const scene = new THREE.Scene(); |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
| const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); |
| |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| container.appendChild(renderer.domElement); |
| |
| |
| const geometry = new THREE.BoxGeometry(1, 1, 1); |
| const material = new THREE.MeshBasicMaterial({ |
| color: 0x44ffaa, |
| wireframe: true, |
| transparent: true, |
| opacity: 0.5 |
| }); |
| |
| |
| const cubes = []; |
| for (let i = 0; i < 15; i++) { |
| const cube = new THREE.Mesh(geometry, material); |
| cube.position.x = Math.random() * 10 - 5; |
| cube.position.y = Math.random() * 10 - 5; |
| cube.position.z = Math.random() * 10 - 5; |
| cube.rotation.x = Math.random() * Math.PI; |
| cube.rotation.y = Math.random() * Math.PI; |
| scene.add(cube); |
| cubes.push(cube); |
| } |
| |
| |
| const lineMaterial = new THREE.LineBasicMaterial({ color: 0x44aaff, transparent: true, opacity: 0.3 }); |
| for (let i = 0; i < cubes.length; i++) { |
| for (let j = i + 1; j < cubes.length; j++) { |
| if (Math.random() > 0.7) { |
| const geometry = new THREE.BufferGeometry().setFromPoints([ |
| cubes[i].position, |
| cubes[j].position |
| ]); |
| const line = new THREE.Line(geometry, lineMaterial); |
| scene.add(line); |
| } |
| } |
| } |
| |
| camera.position.z = 15; |
| |
| |
| function animate() { |
| requestAnimationFrame(animate); |
| |
| cubes.forEach(cube => { |
| cube.rotation.x += 0.005; |
| cube.rotation.y += 0.007; |
| }); |
| |
| renderer.render(scene, camera); |
| } |
| animate(); |
| |
| |
| window.addEventListener('resize', () => { |
| camera.aspect = window.innerWidth / window.innerHeight; |
| camera.updateProjectionMatrix(); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| }); |
| |
| |
| document.querySelectorAll('.pixel-cluster').forEach(cluster => { |
| for (let i = 0; i < 64; i++) { |
| const pixel = document.createElement('div'); |
| pixel.className = 'pixel'; |
| pixel.style.opacity = Math.random() * 0.5 + 0.3; |
| cluster.appendChild(pixel); |
| } |
| }); |
| |
| |
| const searchBtn = document.getElementById('searchBtn'); |
| const searchPanel = document.getElementById('searchPanel'); |
| const searchInput = document.getElementById('searchInput'); |
| const searchResults = document.getElementById('searchResults'); |
| |
| |
| const dataBlocks = [ |
| { id: 1, title: "VRML Geometry Nodes", content: "Transform nodes with xyz coordinates and rotation parameters", tags: ["geometry", "nodes", "transform"] }, |
| { id: 2, title: "Pixel Cluster Analysis", content: "Analysis of pixel clusters within data blocks for CBR", tags: ["pixels", "clusters", "analysis"] }, |
| { id: 3, title: "CBR Metadata", content: "Content-based retrieval metadata for efficient search", tags: ["cbr", "metadata", "search"] }, |
| { id: 4, title: "Data Block Transform", content: "Transformation matrix for 3D data visualization", tags: ["transform", "matrix", "3d"] }, |
| { id: 5, title: "Pixel Density Metrics", content: "Metrics for measuring pixel cluster density in VRML", tags: ["metrics", "density", "pixels"] } |
| ]; |
| |
| |
| searchBtn.addEventListener('click', () => { |
| searchPanel.classList.toggle('active'); |
| if (searchPanel.classList.contains('active')) { |
| searchInput.focus(); |
| } |
| }); |
| |
| |
| searchInput.addEventListener('input', (e) => { |
| const query = e.target.value.toLowerCase(); |
| searchResults.innerHTML = ''; |
| |
| if (query.length < 2) return; |
| |
| const results = dataBlocks.filter(block => |
| block.title.toLowerCase().includes(query) || |
| block.content.toLowerCase().includes(query) || |
| block.tags.some(tag => tag.includes(query)) |
| ); |
| |
| if (results.length === 0) { |
| searchResults.innerHTML = '<div class="result-item">No results found</div>'; |
| return; |
| } |
| |
| results.forEach(block => { |
| const resultItem = document.createElement('div'); |
| resultItem.className = 'result-item'; |
| |
| |
| let title = block.title; |
| let content = block.content.substring(0, 60) + '...'; |
| |
| |
| const titleMatchIndex = title.toLowerCase().indexOf(query); |
| if (titleMatchIndex >= 0) { |
| const before = title.substring(0, titleMatchIndex); |
| const match = title.substring(titleMatchIndex, titleMatchIndex + query.length); |
| const after = title.substring(titleMatchIndex + query.length); |
| title = `${before}<span class="highlight">${match}</span>${after}`; |
| } |
| |
| |
| const contentMatchIndex = content.toLowerCase().indexOf(query); |
| if (contentMatchIndex >= 0) { |
| const before = content.substring(0, contentMatchIndex); |
| const match = content.substring(contentMatchIndex, contentMatchIndex + query.length); |
| const after = content.substring(contentMatchIndex + query.length); |
| content = `${before}<span class="highlight">${match}</span>${after}`; |
| } |
| |
| resultItem.innerHTML = ` |
| <div class="font-bold">${title}</div> |
| <div class="text-sm opacity-80">${content}</div> |
| <div class="text-xs mt-1">Tags: ${block.tags.join(', ')}</div> |
| `; |
| |
| resultItem.addEventListener('click', () => { |
| |
| alert(`Navigating to: ${block.title}`); |
| }); |
| |
| searchResults.appendChild(resultItem); |
| }); |
| }); |
| |
| |
| VANTA.NET({ |
| el: "#vrml-container", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x44aaff, |
| backgroundColor: 0x111122, |
| points: 10.00, |
| maxDistance: 20.00, |
| spacing: 15.00 |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/privholochp1cbr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
