Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Web Explorer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .scene { | |
| perspective: 1000px; | |
| width: 100%; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .carousel { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| transform-style: preserve-3d; | |
| transition: transform 1s; | |
| } | |
| .card { | |
| position: absolute; | |
| width: 300px; | |
| height: 400px; | |
| left: 50%; | |
| top: 50%; | |
| transform-origin: center center; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.3); | |
| transition: all 0.5s ease; | |
| cursor: pointer; | |
| background: white; | |
| } | |
| .card:hover { | |
| transform: scale(1.05) ; | |
| box-shadow: 0 25px 50px rgba(0,0,0,0.4); | |
| } | |
| .card iframe { | |
| width: 100%; | |
| height: 80%; | |
| border: none; | |
| } | |
| .card-info { | |
| padding: 15px; | |
| height: 20%; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .enhanced-view { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.9); | |
| z-index: 100; | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .enhanced-content { | |
| width: 90%; | |
| height: 90%; | |
| background: white; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .enhanced-content iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .close-btn { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: #ff4757; | |
| color: white; | |
| border: none; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| font-size: 20px; | |
| cursor: pointer; | |
| z-index: 101; | |
| } | |
| .enhance-effects { | |
| position: absolute; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: 10px; | |
| z-index: 101; | |
| } | |
| .effect-btn { | |
| background: #4a69bd; | |
| color: white; | |
| border: none; | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: all 0.3s; | |
| } | |
| .effect-btn:hover { | |
| background: #1e3799; | |
| transform: translateY(-3px); | |
| } | |
| @media (max-width: 768px) { | |
| .card { | |
| width: 250px; | |
| height: 350px; | |
| } | |
| .enhance-effects { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| width: 90%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="scene"> | |
| <div class="carousel" id="carousel"> | |
| <!-- Cards will be added dynamically --> | |
| </div> | |
| </div> | |
| <div class="enhanced-view" id="enhancedView"> | |
| <div class="enhanced-content"> | |
| <button class="close-btn" id="closeBtn"><i class="fas fa-times"></i></button> | |
| <iframe id="enhancedFrame" src=""></iframe> | |
| <div class="enhance-effects"> | |
| <button class="effect-btn" data-effect="zoom"><i class="fas fa-search-plus"></i> Zoom</button> | |
| <button class="effect-btn" data-effect="contrast"><i class="fas fa-adjust"></i> Contrast</button> | |
| <button class="effect-btn" data-effect="readable"><i class="fas fa-book-open"></i> Readable</button> | |
| <button class="effect-btn" data-effect="dark"><i class="fas fa-moon"></i> Dark Mode</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Sample websites to display | |
| const websites = [ | |
| { | |
| title: "Tech News", | |
| url: "https://techcrunch.com", | |
| color: "bg-blue-500" | |
| }, | |
| { | |
| title: "Science Daily", | |
| url: "https://www.sciencedaily.com", | |
| color: "bg-green-500" | |
| }, | |
| { | |
| title: "Design Inspiration", | |
| url: "https://dribbble.com", | |
| color: "bg-pink-500" | |
| }, | |
| { | |
| title: "Programming", | |
| url: "https://stackoverflow.com", | |
| color: "bg-orange-500" | |
| }, | |
| { | |
| title: "Space Exploration", | |
| url: "https://www.nasa.gov", | |
| color: "bg-indigo-500" | |
| } | |
| ]; | |
| const carousel = document.getElementById('carousel'); | |
| const enhancedView = document.getElementById('enhancedView'); | |
| const enhancedFrame = document.getElementById('enhancedFrame'); | |
| const closeBtn = document.getElementById('closeBtn'); | |
| // Create cards for each website | |
| websites.forEach((site, index) => { | |
| const card = document.createElement('div'); | |
| card.className = 'card'; | |
| card.innerHTML = ` | |
| <iframe src="${site.url}" loading="lazy"></iframe> | |
| <div class="card-info ${site.color} flex flex-col justify-center items-center"> | |
| <h3 class="text-xl font-bold">${site.title}</h3> | |
| <p class="text-sm opacity-80">Click to enhance</p> | |
| </div> | |
| `; | |
| // Position cards in 3D space | |
| const angle = (index / websites.length) * Math.PI * 2; | |
| const radius = websites.length * 30; | |
| const x = Math.cos(angle) * radius; | |
| const z = Math.sin(angle) * radius; | |
| card.style.transform = `translate(-50%, -50%) translateZ(${z}px) translateX(${x}px) rotateY(${angle}rad)`; | |
| // Add click event to enhance the page | |
| card.addEventListener('click', () => { | |
| enhancePage(site.url); | |
| }); | |
| carousel.appendChild(card); | |
| }); | |
| // Rotate carousel continuously | |
| let angle = 0; | |
| setInterval(() => { | |
| angle += 0.002; | |
| carousel.style.transform = `rotateY(${angle}rad)`; | |
| }, 16); | |
| // Enhance page function | |
| function enhancePage(url) { | |
| enhancedFrame.src = url; | |
| enhancedView.style.display = 'flex'; | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| // Close enhanced view | |
| closeBtn.addEventListener('click', () => { | |
| enhancedView.style.display = 'none'; | |
| document.body.style.overflow = 'auto'; | |
| enhancedFrame.src = ''; | |
| }); | |
| // Enhancement effects | |
| const effectButtons = document.querySelectorAll('.effect-btn'); | |
| effectButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const effect = this.getAttribute('data-effect'); | |
| applyEffect(effect); | |
| }); | |
| }); | |
| function applyEffect(effect) { | |
| const iframeDoc = enhancedFrame.contentDocument || enhancedFrame.contentWindow.document; | |
| try { | |
| // Create a style element if it doesn't exist | |
| let style = iframeDoc.getElementById('enhancement-style'); | |
| if (!style) { | |
| style = iframeDoc.createElement('style'); | |
| style.id = 'enhancement-style'; | |
| iframeDoc.head.appendChild(style); | |
| } | |
| switch(effect) { | |
| case 'zoom': | |
| style.innerHTML = ` | |
| body { | |
| zoom: 1.5; | |
| } | |
| img, video { | |
| max-width: 100% !important; | |
| height: auto !important; | |
| } | |
| `; | |
| break; | |
| case 'contrast': | |
| style.innerHTML = ` | |
| body { | |
| filter: contrast(1.2) brightness(1.1); | |
| } | |
| `; | |
| break; | |
| case 'readable': | |
| style.innerHTML = ` | |
| body { | |
| font-size: 18px !important; | |
| line-height: 1.6 !important; | |
| max-width: 800px !important; | |
| margin: 0 auto !important; | |
| padding: 20px !important; | |
| } | |
| p, li { | |
| margin-bottom: 1em !important; | |
| } | |
| `; | |
| break; | |
| case 'dark': | |
| style.innerHTML = ` | |
| body { | |
| background-color: #222 !important; | |
| color: #eee !important; | |
| filter: invert(1) hue-rotate(180deg); | |
| } | |
| img, video { | |
| filter: invert(1) hue-rotate(180deg) !important; | |
| } | |
| `; | |
| break; | |
| } | |
| } catch (e) { | |
| console.log("Could not apply effect due to cross-origin restrictions"); | |
| // In a real implementation, you would need a proxy server to bypass CORS | |
| } | |
| } | |
| }); | |
| </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=Mackin7/webpage360" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |