Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FutureScape AR</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/webxr/VRButton.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| font-family: 'Orbitron', sans-serif; | |
| background-color: transparent ; | |
| } | |
| #ar-container { | |
| position: absolute; | |
| width: 100vw; | |
| height: 100vh; | |
| pointer-events: none; | |
| } | |
| .ar-panel { | |
| backdrop-filter: blur(10px); | |
| background: rgba(0, 0, 30, 0.7); | |
| border-radius: 16px; | |
| border: 1px solid rgba(100, 200, 255, 0.3); | |
| box-shadow: 0 0 30px rgba(0, 150, 255, 0.5); | |
| color: white; | |
| padding: 20px; | |
| position: absolute; | |
| transform: translate(-50%, -50%); | |
| transition: all 0.3s ease; | |
| } | |
| .ar-button { | |
| backdrop-filter: blur(5px); | |
| background: rgba(0, 50, 100, 0.5); | |
| border-radius: 12px; | |
| border: 1px solid rgba(100, 200, 255, 0.5); | |
| box-shadow: 0 0 15px rgba(0, 150, 255, 0.3); | |
| color: white; | |
| cursor: pointer; | |
| font-size: 18px; | |
| font-weight: bold; | |
| padding: 15px 25px; | |
| pointer-events: auto; | |
| position: absolute; | |
| text-align: center; | |
| transition: all 0.2s ease; | |
| user-select: none; | |
| } | |
| .ar-button:hover, .ar-button.active { | |
| background: rgba(0, 100, 200, 0.7); | |
| box-shadow: 0 0 25px rgba(0, 200, 255, 0.7); | |
| transform: scale(1.05); | |
| } | |
| .ar-button:active { | |
| transform: scale(0.98); | |
| } | |
| .title-text { | |
| background: linear-gradient(90deg, #00ffff, #0088ff); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| text-shadow: 0 0 10px rgba(0, 200, 255, 0.5); | |
| animation: pulse 2s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| 0% { text-shadow: 0 0 10px rgba(0, 200, 255, 0.5); } | |
| 100% { text-shadow: 0 0 20px rgba(0, 255, 255, 0.8); } | |
| } | |
| .particle { | |
| position: absolute; | |
| background: rgba(0, 200, 255, 0.7); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| #gaze-cursor { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.8); | |
| box-shadow: 0 0 10px rgba(0, 200, 255, 0.8); | |
| transform: translate(-50%, -50%); | |
| pointer-events: none; | |
| z-index: 1000; | |
| transition: transform 0.1s ease-out; | |
| } | |
| #gaze-timer { | |
| position: absolute; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| border: 2px solid rgba(0, 200, 255, 0.8); | |
| transform: translate(-50%, -50%); | |
| pointer-events: none; | |
| z-index: 1001; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="ar-container"> | |
| <div id="welcome-panel" class="ar-panel" style="top: 50%; left: 50%; width: 80%; max-width: 500px;"> | |
| <h1 class="title-text text-center mb-4">Welcome to FutureScape AR</h1> | |
| <p class="text-white text-opacity-80 text-center">Experience the future of spatial computing with our augmented reality interface.</p> | |
| </div> | |
| <div id="explore-btn" class="ar-button" style="top: 70%; left: 30%;">Explore</div> | |
| <div id="map-btn" class="ar-button" style="top: 70%; left: 50%;">Map</div> | |
| <div id="scan-btn" class="ar-button" style="top: 70%; left: 70%;">Scan</div> | |
| <div id="gaze-cursor"></div> | |
| <div id="gaze-timer"></div> | |
| </div> | |
| <script> | |
| // Three.js and WebXR setup | |
| let camera, scene, renderer; | |
| let controller; | |
| // UI elements | |
| const welcomePanel = document.getElementById('welcome-panel'); | |
| const exploreBtn = document.getElementById('explore-btn'); | |
| const mapBtn = document.getElementById('map-btn'); | |
| const scanBtn = document.getElementById('scan-btn'); | |
| const gazeCursor = document.getElementById('gaze-cursor'); | |
| const gazeTimer = document.getElementById('gaze-timer'); | |
| // Gaze interaction variables | |
| let gazeTarget = null; | |
| let gazeStartTime = 0; | |
| let gazeProgress = 0; | |
| const gazeTimeThreshold = 1000; // 1 second to activate | |
| // Initialize Three.js scene | |
| function initXR() { | |
| scene = new THREE.Scene(); | |
| camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10); | |
| renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |
| renderer.setPixelRatio(window.devicePixelRatio); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| renderer.xr.enabled = true; | |
| document.body.appendChild(renderer.domElement); | |
| // Add basic lighting | |
| const ambientLight = new THREE.AmbientLight(0x404040); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); | |
| directionalLight.position.set(0, 1, 0); | |
| scene.add(directionalLight); | |
| // Add controller for gaze detection | |
| controller = renderer.xr.getController(0); | |
| controller.addEventListener('move', onControllerMove); | |
| scene.add(controller); | |
| // Add WebXR button | |
| document.body.appendChild(VRButton.createButton(renderer)); | |
| // Handle window resize | |
| window.addEventListener('resize', onWindowResize); | |
| // Start animation loop | |
| renderer.setAnimationLoop(render); | |
| } | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| } | |
| function onControllerMove(event) { | |
| // Convert controller position to screen coordinates for gaze cursor | |
| const position = event.target.position.clone(); | |
| position.project(camera); | |
| const x = (position.x * 0.5 + 0.5) * window.innerWidth; | |
| const y = (-(position.y * 0.5) + 0.5) * window.innerHeight; | |
| gazeCursor.style.left = `${x}px`; | |
| gazeCursor.style.top = `${y}px`; | |
| // Check for UI element hover | |
| checkGazeIntersection(x, y); | |
| } | |
| function checkGazeIntersection(x, y) { | |
| const elements = [exploreBtn, mapBtn, scanBtn]; | |
| let newTarget = null; | |
| elements.forEach(element => { | |
| const rect = element.getBoundingClientRect(); | |
| const isHovering = x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom; | |
| if (isHovering) { | |
| newTarget = element; | |
| element.classList.add('active'); | |
| } else { | |
| element.classList.remove('active'); | |
| } | |
| }); | |
| // Handle gaze target changes | |
| if (newTarget !== gazeTarget) { | |
| gazeTarget = newTarget; | |
| gazeStartTime = performance.now(); | |
| gazeProgress = 0; | |
| gazeTimer.style.width = '0px'; | |
| gazeTimer.style.height = '0px'; | |
| } | |
| // Update gaze timer if hovering | |
| if (gazeTarget) { | |
| const elapsed = performance.now() - gazeStartTime; | |
| gazeProgress = Math.min(elapsed / gazeTimeThreshold, 1); | |
| const size = 24 + 20 * gazeProgress; | |
| gazeTimer.style.width = `${size}px`; | |
| gazeTimer.style.height = `${size}px`; | |
| gazeTimer.style.borderColor = `rgba(0, 200, 255, ${0.8 * gazeProgress})`; | |
| if (gazeProgress >= 1) { | |
| activateButton(gazeTarget); | |
| gazeTarget = null; | |
| } | |
| } | |
| } | |
| function activateButton(button) { | |
| // Visual feedback | |
| button.style.transform = 'scale(0.95)'; | |
| button.style.boxShadow = '0 0 30px rgba(0, 255, 255, 0.9)'; | |
| // Create particle effect | |
| createParticles(button); | |
| // Handle button action | |
| setTimeout(() => { | |
| button.style.transform = 'scale(1.05)'; | |
| switch(button.id) { | |
| case 'explore-btn': | |
| welcomePanel.querySelector('h1').textContent = 'Explore Mode Activated'; | |
| break; | |
| case 'map-btn': | |
| welcomePanel.querySelector('h1').textContent = 'Map View Engaged'; | |
| break; | |
| case 'scan-btn': | |
| welcomePanel.querySelector('h1').textContent = 'Scanning Environment'; | |
| break; | |
| } | |
| }, 100); | |
| } | |
| function createParticles(element) { | |
| const rect = element.getBoundingClientRect(); | |
| const centerX = rect.left + rect.width / 2; | |
| const centerY = rect.top + rect.height / 2; | |
| for (let i = 0; i < 20; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| const size = Math.random() * 8 + 4; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| const angle = Math.random() * Math.PI * 2; | |
| const distance = Math.random() * 50 + 30; | |
| const x = centerX + Math.cos(angle) * distance; | |
| const y = centerY + Math.sin(angle) * distance; | |
| particle.style.left = `${x}px`; | |
| particle.style.top = `${y}px`; | |
| document.body.appendChild(particle); | |
| // Animate particle | |
| const duration = Math.random() * 1000 + 500; | |
| const targetX = x + (Math.random() - 0.5) * 100; | |
| const targetY = y + (Math.random() - 0.5) * 100; | |
| const animation = particle.animate([ | |
| { | |
| transform: 'translate(0, 0) scale(1)', | |
| opacity: 1 | |
| }, | |
| { | |
| transform: `translate(${targetX - x}px, ${targetY - y}px) scale(0.1)`, | |
| opacity: 0 | |
| } | |
| ], { | |
| duration: duration, | |
| easing: 'cubic-bezier(0.4, 0, 0.2, 1)' | |
| }); | |
| animation.onfinish = () => particle.remove(); | |
| } | |
| } | |
| function render() { | |
| renderer.render(scene, camera); | |
| } | |
| // Initialize the AR experience | |
| window.addEventListener('load', () => { | |
| initXR(); | |
| // Add floating animation to welcome panel | |
| let floatOffset = 0; | |
| let floatDirection = 1; | |
| function floatAnimation() { | |
| floatOffset += 0.2 * floatDirection; | |
| if (Math.abs(floatOffset) > 5) { | |
| floatDirection *= -1; | |
| } | |
| welcomePanel.style.transform = `translate(-50%, calc(-50% + ${floatOffset}px))`; | |
| requestAnimationFrame(floatAnimation); | |
| } | |
| floatAnimation(); | |
| }); | |
| </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=triton7777/ar-sample" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |