Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>360° Page Enhancer</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> | |
| /* Custom CSS for the 360 effect */ | |
| .page-container { | |
| transition: all 0.3s ease; | |
| transform-origin: center center; | |
| } | |
| .enhanced-view { | |
| transform: scale(1.5); | |
| overflow-x: auto; | |
| width: 150%; | |
| margin-left: -25%; | |
| background-color: white; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.2); | |
| min-height: 100vh; | |
| } | |
| .toolbar { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 9999; | |
| transition: all 0.3s ease; | |
| } | |
| .toolbar-expanded { | |
| width: 300px; | |
| background: rgba(255,255,255,0.95); | |
| border-radius: 15px; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); | |
| padding: 15px; | |
| } | |
| .pan-indicator { | |
| position: fixed; | |
| top: 10px; | |
| right: 10px; | |
| background: rgba(0,0,0,0.7); | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| z-index: 9999; | |
| display: none; | |
| } | |
| @media (max-width: 768px) { | |
| .enhanced-view { | |
| transform: scale(1.3); | |
| width: 130%; | |
| margin-left: -15%; | |
| } | |
| .toolbar { | |
| bottom: 10px; | |
| right: 10px; | |
| } | |
| .toolbar-expanded { | |
| width: 280px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Main page container that will be enhanced --> | |
| <div id="pageContainer" class="page-container"> | |
| <!-- This would be the existing webpage content --> | |
| <div class="p-8"> | |
| <h1 class="text-4xl font-bold mb-6">Sample Web Page</h1> | |
| <p class="text-lg mb-4">This is a demonstration of how the 360° Page Enhancer would work on a typical webpage. When you click the enhance button, this content will expand to be more viewable.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 my-8"> | |
| <div class="bg-blue-100 p-6 rounded-lg"> | |
| <h2 class="text-xl font-semibold mb-3">Feature 1</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p> | |
| </div> | |
| <div class="bg-green-100 p-6 rounded-lg"> | |
| <h2 class="text-xl font-semibold mb-3">Feature 2</h2> | |
| <p>Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur non nulla sit amet nisl.</p> | |
| </div> | |
| <div class="bg-purple-100 p-6 rounded-lg"> | |
| <h2 class="text-xl font-semibold mb-3">Feature 3</h2> | |
| <p>Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.</p> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <img src="https://via.placeholder.com/1200x500" alt="Sample image" class="w-full rounded-lg shadow-md mb-6"> | |
| <p class="text-gray-700">This image and the surrounding content will become larger and more readable when the 360° enhancement is activated.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pan indicator (shown during enhanced view) --> | |
| <div id="panIndicator" class="pan-indicator"> | |
| <i class="fas fa-arrows-alt mr-2"></i> Pan Mode Active | |
| </div> | |
| <!-- Enhancement toolbar --> | |
| <div id="enhancerToolbar" class="toolbar"> | |
| <div id="toolbarContent" class="hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">360° Page Enhancer</h3> | |
| <button id="closeToolbar" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Zoom Level</label> | |
| <div class="flex items-center"> | |
| <button id="zoomOut" class="bg-gray-200 hover:bg-gray-300 p-2 rounded-l"> | |
| <i class="fas fa-search-minus"></i> | |
| </button> | |
| <div class="bg-gray-100 px-4 py-2 text-center w-full"> | |
| <span id="zoomLevel">100%</span> | |
| </div> | |
| <button id="zoomIn" class="bg-gray-200 hover:bg-gray-300 p-2 rounded-r"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2 mb-4"> | |
| <button id="panMode" class="flex-1 bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded flex items-center justify-center"> | |
| <i class="fas fa-arrows-alt mr-2"></i> Pan Mode | |
| </button> | |
| <button id="resetView" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded flex items-center justify-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Reset | |
| </button> | |
| </div> | |
| <div class="text-xs text-gray-500"> | |
| <p>Tip: Use mouse wheel to zoom in/out when in pan mode.</p> | |
| </div> | |
| </div> | |
| <button id="enhanceButton" class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-expand text-xl"></i> | |
| </button> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const pageContainer = document.getElementById('pageContainer'); | |
| const enhancerToolbar = document.getElementById('enhancerToolbar'); | |
| const toolbarContent = document.getElementById('toolbarContent'); | |
| const enhanceButton = document.getElementById('enhanceButton'); | |
| const closeToolbar = document.getElementById('closeToolbar'); | |
| const zoomIn = document.getElementById('zoomIn'); | |
| const zoomOut = document.getElementById('zoomOut'); | |
| const zoomLevel = document.getElementById('zoomLevel'); | |
| const panMode = document.getElementById('panMode'); | |
| const resetView = document.getElementById('resetView'); | |
| const panIndicator = document.getElementById('panIndicator'); | |
| let isEnhanced = false; | |
| let isPanMode = false; | |
| let currentZoom = 1; | |
| let startX, startY, scrollLeft, scrollTop; | |
| // Toggle enhanced view | |
| enhanceButton.addEventListener('click', function() { | |
| isEnhanced = !isEnhanced; | |
| if (isEnhanced) { | |
| pageContainer.classList.add('enhanced-view'); | |
| toolbarContent.classList.remove('hidden'); | |
| enhancerToolbar.classList.add('toolbar-expanded'); | |
| enhanceButton.innerHTML = '<i class="fas fa-compress text-xl"></i>'; | |
| // Store original scroll position | |
| scrollLeft = window.pageXOffset; | |
| scrollTop = window.pageYOffset; | |
| // Center the view | |
| window.scrollTo( | |
| (document.documentElement.scrollWidth - window.innerWidth) / 2, | |
| (document.documentElement.scrollHeight - window.innerHeight) / 2 | |
| ); | |
| } else { | |
| pageContainer.classList.remove('enhanced-view'); | |
| toolbarContent.classList.add('hidden'); | |
| enhancerToolbar.classList.remove('toolbar-expanded'); | |
| enhanceButton.innerHTML = '<i class="fas fa-expand text-xl"></i>'; | |
| disablePanMode(); | |
| // Restore original scroll position | |
| window.scrollTo(scrollLeft, scrollTop); | |
| } | |
| }); | |
| // Close toolbar | |
| closeToolbar.addEventListener('click', function() { | |
| isEnhanced = false; | |
| pageContainer.classList.remove('enhanced-view'); | |
| toolbarContent.classList.add('hidden'); | |
| enhancerToolbar.classList.remove('toolbar-expanded'); | |
| enhanceButton.innerHTML = '<i class="fas fa-expand text-xl"></i>'; | |
| disablePanMode(); | |
| // Restore original scroll position | |
| window.scrollTo(scrollLeft, scrollTop); | |
| }); | |
| // Zoom in | |
| zoomIn.addEventListener('click', function() { | |
| if (currentZoom < 3) { | |
| currentZoom += 0.1; | |
| updateZoom(); | |
| } | |
| }); | |
| // Zoom out | |
| zoomOut.addEventListener('click', function() { | |
| if (currentZoom > 0.5) { | |
| currentZoom -= 0.1; | |
| updateZoom(); | |
| } | |
| }); | |
| // Update zoom level | |
| function updateZoom() { | |
| pageContainer.style.transform = `scale(${currentZoom * 1.5})`; | |
| zoomLevel.textContent = `${Math.round(currentZoom * 100)}%`; | |
| } | |
| // Toggle pan mode | |
| panMode.addEventListener('click', function() { | |
| isPanMode = !isPanMode; | |
| if (isPanMode) { | |
| enablePanMode(); | |
| } else { | |
| disablePanMode(); | |
| } | |
| }); | |
| // Enable pan mode | |
| function enablePanMode() { | |
| panMode.classList.add('bg-blue-500', 'text-white'); | |
| panMode.classList.remove('bg-blue-100', 'text-blue-800'); | |
| panIndicator.style.display = 'block'; | |
| // Make page container draggable | |
| pageContainer.style.cursor = 'grab'; | |
| pageContainer.addEventListener('mousedown', startDrag); | |
| document.addEventListener('mouseup', stopDrag); | |
| document.addEventListener('mousemove', drag); | |
| // Add wheel event for zooming during pan mode | |
| pageContainer.addEventListener('wheel', handleWheel, { passive: false }); | |
| } | |
| // Disable pan mode | |
| function disablePanMode() { | |
| isPanMode = false; | |
| panMode.classList.remove('bg-blue-500', 'text-white'); | |
| panMode.classList.add('bg-blue-100', 'text-blue-800'); | |
| panIndicator.style.display = 'none'; | |
| // Remove draggable behavior | |
| pageContainer.style.cursor = ''; | |
| pageContainer.removeEventListener('mousedown', startDrag); | |
| document.removeEventListener('mouseup', stopDrag); | |
| document.removeEventListener('mousemove', drag); | |
| pageContainer.removeEventListener('wheel', handleWheel); | |
| } | |
| // Start drag | |
| function startDrag(e) { | |
| startX = e.pageX - pageContainer.offsetLeft; | |
| startY = e.pageY - pageContainer.offsetTop; | |
| pageContainer.style.cursor = 'grabbing'; | |
| } | |
| // Stop drag | |
| function stopDrag() { | |
| pageContainer.style.cursor = 'grab'; | |
| } | |
| // Drag movement | |
| function drag(e) { | |
| if (!isPanMode) return; | |
| e.preventDefault(); | |
| const x = e.pageX - startX; | |
| const y = e.pageY - startY; | |
| // Calculate boundaries to prevent dragging too far | |
| const maxX = (pageContainer.scrollWidth - window.innerWidth) / 2; | |
| const maxY = (pageContainer.scrollHeight - window.innerHeight) / 2; | |
| // Apply boundaries | |
| const boundedX = Math.max(-maxX, Math.min(x, maxX)); | |
| const boundedY = Math.max(-maxY, Math.min(y, maxY)); | |
| pageContainer.style.left = `${boundedX}px`; | |
| pageContainer.style.top = `${boundedY}px`; | |
| } | |
| // Handle wheel zoom | |
| function handleWheel(e) { | |
| if (!isPanMode) return; | |
| e.preventDefault(); | |
| if (e.deltaY < 0) { | |
| // Zoom in | |
| if (currentZoom < 3) { | |
| currentZoom += 0.05; | |
| updateZoom(); | |
| } | |
| } else { | |
| // Zoom out | |
| if (currentZoom > 0.5) { | |
| currentZoom -= 0.05; | |
| updateZoom(); | |
| } | |
| } | |
| } | |
| // Reset view | |
| resetView.addEventListener('click', function() { | |
| currentZoom = 1; | |
| updateZoom(); | |
| disablePanMode(); | |
| // Reset position | |
| pageContainer.style.left = '0'; | |
| pageContainer.style.top = '0'; | |
| // Center the view | |
| window.scrollTo( | |
| (document.documentElement.scrollWidth - window.innerWidth) / 2, | |
| (document.documentElement.scrollHeight - window.innerHeight) / 2 | |
| ); | |
| }); | |
| }); | |
| </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/360pluginenhancer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |