Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dynamic Page Zoom Plugin</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> | |
| .zoom-transition { | |
| transition: transform 0.3s ease, opacity 0.3s ease; | |
| } | |
| .zoom-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| z-index: 9998; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .zoom-overlay.active { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .zoom-content { | |
| position: relative; | |
| z-index: 9999; | |
| transform-origin: center center; | |
| } | |
| .zoom-controls { | |
| transition: all 0.3s ease; | |
| } | |
| .zoom-controls.hidden { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <!-- Demo Content --> | |
| <div class="container mx-auto px-4 py-12"> | |
| <h1 class="text-4xl font-bold text-center mb-8">Page Zoom Plugin Demo</h1> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Zoomable Items --> | |
| <div class="zoom-item bg-white rounded-lg shadow-md overflow-hidden cursor-zoom-in" data-zoom-level="1.5"> | |
| <img src="https://source.unsplash.com/random/600x400?nature=1" alt="Nature" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold mb-2">Nature View</h3> | |
| <p class="text-gray-600">Click to zoom this beautiful nature scene.</p> | |
| </div> | |
| </div> | |
| <div class="zoom-item bg-white rounded-lg shadow-md overflow-hidden cursor-zoom-in" data-zoom-level="2"> | |
| <img src="https://source.unsplash.com/random/600x400?city=1" alt="City" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold mb-2">Cityscape</h3> | |
| <p class="text-gray-600">Click to zoom in on this urban landscape.</p> | |
| </div> | |
| </div> | |
| <div class="zoom-item bg-white rounded-lg shadow-md overflow-hidden cursor-zoom-in" data-zoom-level="2.5"> | |
| <img src="https://source.unsplash.com/random/600x400?architecture=1" alt="Architecture" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold mb-2">Modern Architecture</h3> | |
| <p class="text-gray-600">Click to examine the architectural details.</p> | |
| </div> | |
| </div> | |
| <div class="zoom-item bg-white rounded-lg shadow-md overflow-hidden cursor-zoom-in" data-zoom-level="1.8"> | |
| <img src="https://source.unsplash.com/random/600x400?food=1" alt="Food" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold mb-2">Delicious Food</h3> | |
| <p class="text-gray-600">Click to zoom and see the delicious details.</p> | |
| </div> | |
| </div> | |
| <div class="zoom-item bg-white rounded-lg shadow-md overflow-hidden cursor-zoom-in" data-zoom-level="3"> | |
| <img src="https://source.unsplash.com/random/600x400?technology=1" alt="Tech" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold mb-2">Technology</h3> | |
| <p class="text-gray-600">Click to zoom in on these tech gadgets.</p> | |
| </div> | |
| </div> | |
| <div class="zoom-item bg-white rounded-lg shadow-md overflow-hidden cursor-zoom-in" data-zoom-level="2.2"> | |
| <img src="https://source.unsplash.com/random/600x400?art=1" alt="Art" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold mb-2">Artwork</h3> | |
| <p class="text-gray-600">Click to examine the artistic details.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-4">About This Plugin</h2> | |
| <p class="mb-4">This page demonstrates a dynamic zoom plugin that enhances page views when elements are clicked. The plugin provides:</p> | |
| <ul class="list-disc pl-6 mb-4"> | |
| <li>Smooth zoom animations with configurable levels</li> | |
| <li>Interactive controls for adjusting zoom level</li> | |
| <li>Dark overlay for better focus</li> | |
| <li>Responsive design that works on all devices</li> | |
| <li>Easy integration with any website</li> | |
| </ul> | |
| <p>Try clicking on any of the cards above to experience the zoom effect!</p> | |
| </div> | |
| </div> | |
| <!-- Zoom Overlay --> | |
| <div class="zoom-overlay"></div> | |
| <!-- Zoom Controls --> | |
| <div class="zoom-controls fixed bottom-6 right-6 bg-white rounded-full shadow-xl p-3 flex items-center space-x-2 z-[10000] hidden"> | |
| <button id="zoom-out" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition"> | |
| <i class="fas fa-search-minus"></i> | |
| </button> | |
| <div id="zoom-level-display" class="w-16 text-center font-medium">100%</div> | |
| <button id="zoom-in" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| <button id="zoom-reset" class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i class="fas fa-undo"></i> | |
| </button> | |
| <button id="zoom-close" class="w-10 h-10 rounded-full bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Zoom plugin variables | |
| let currentZoomElement = null; | |
| let currentZoomLevel = 1; | |
| let defaultZoomLevel = 1; | |
| let maxZoomLevel = 5; | |
| let minZoomLevel = 0.5; | |
| let zoomStep = 0.2; | |
| // DOM elements | |
| const zoomItems = document.querySelectorAll('.zoom-item'); | |
| const zoomOverlay = document.querySelector('.zoom-overlay'); | |
| const zoomControls = document.querySelector('.zoom-controls'); | |
| const zoomOutBtn = document.getElementById('zoom-out'); | |
| const zoomInBtn = document.getElementById('zoom-in'); | |
| const zoomResetBtn = document.getElementById('zoom-reset'); | |
| const zoomCloseBtn = document.getElementById('zoom-close'); | |
| const zoomLevelDisplay = document.getElementById('zoom-level-display'); | |
| // Initialize zoom items | |
| zoomItems.forEach(item => { | |
| item.classList.add('zoom-transition'); | |
| item.addEventListener('click', function(e) { | |
| // Don't zoom if clicking on a link or button inside the item | |
| if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON') { | |
| return; | |
| } | |
| // Set the current zoom element | |
| currentZoomElement = item.cloneNode(true); | |
| currentZoomElement.classList.add('zoom-content'); | |
| currentZoomElement.style.position = 'fixed'; | |
| currentZoomElement.style.top = '50%'; | |
| currentZoomElement.style.left = '50%'; | |
| currentZoomElement.style.transform = 'translate(-50%, -50%) scale(1)'; | |
| currentZoomElement.style.maxWidth = '90vw'; | |
| currentZoomElement.style.maxHeight = '90vh'; | |
| currentZoomElement.style.zIndex = '9999'; | |
| currentZoomElement.style.cursor = 'zoom-out'; | |
| // Get the default zoom level from data attribute or use 1.5 as default | |
| defaultZoomLevel = parseFloat(item.getAttribute('data-zoom-level')) || 1.5; | |
| currentZoomLevel = defaultZoomLevel; | |
| // Calculate initial position and size | |
| const rect = item.getBoundingClientRect(); | |
| currentZoomElement.style.width = `${rect.width}px`; | |
| currentZoomElement.style.height = `${rect.height}px`; | |
| currentZoomElement.style.top = `${rect.top + rect.height / 2}px`; | |
| currentZoomElement.style.left = `${rect.left + rect.width / 2}px`; | |
| currentZoomElement.style.transform = `translate(-50%, -50%) scale(1)`; | |
| // Add to DOM | |
| document.body.appendChild(currentZoomElement); | |
| // Activate overlay | |
| zoomOverlay.classList.add('active'); | |
| // Show controls | |
| zoomControls.classList.remove('hidden'); | |
| updateZoomDisplay(); | |
| // Animate to zoomed state | |
| setTimeout(() => { | |
| currentZoomElement.style.width = 'auto'; | |
| currentZoomElement.style.height = 'auto'; | |
| currentZoomElement.style.top = '50%'; | |
| currentZoomElement.style.left = '50%'; | |
| currentZoomElement.style.transform = `translate(-50%, -50%) scale(${currentZoomLevel})`; | |
| }, 10); | |
| // Add click handler to close zoom | |
| currentZoomElement.addEventListener('click', function(e) { | |
| if (e.target === currentZoomElement || !e.target.closest('a, button')) { | |
| closeZoom(); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Overlay click handler | |
| zoomOverlay.addEventListener('click', closeZoom); | |
| // Control buttons | |
| zoomOutBtn.addEventListener('click', () => adjustZoom(-zoomStep)); | |
| zoomInBtn.addEventListener('click', () => adjustZoom(zoomStep)); | |
| zoomResetBtn.addEventListener('click', resetZoom); | |
| zoomCloseBtn.addEventListener('click', closeZoom); | |
| // Keyboard controls | |
| document.addEventListener('keydown', function(e) { | |
| if (!currentZoomElement) return; | |
| switch (e.key) { | |
| case 'Escape': | |
| closeZoom(); | |
| break; | |
| case '-': | |
| case '_': | |
| adjustZoom(-zoomStep); | |
| break; | |
| case '+': | |
| case '=': | |
| adjustZoom(zoomStep); | |
| break; | |
| case '0': | |
| resetZoom(); | |
| break; | |
| } | |
| }); | |
| // Zoom adjustment function | |
| function adjustZoom(amount) { | |
| if (!currentZoomElement) return; | |
| currentZoomLevel += amount; | |
| currentZoomLevel = Math.max(minZoomLevel, Math.min(maxZoomLevel, currentZoomLevel)); | |
| currentZoomElement.style.transform = `translate(-50%, -50%) scale(${currentZoomLevel})`; | |
| updateZoomDisplay(); | |
| } | |
| // Reset zoom function | |
| function resetZoom() { | |
| if (!currentZoomElement) return; | |
| currentZoomLevel = defaultZoomLevel; | |
| currentZoomElement.style.transform = `translate(-50%, -50%) scale(${currentZoomLevel})`; | |
| updateZoomDisplay(); | |
| } | |
| // Close zoom function | |
| function closeZoom() { | |
| if (!currentZoomElement) return; | |
| // Animate back to original position | |
| const originalItem = [...zoomItems].find(item => { | |
| return item.innerHTML === currentZoomElement.innerHTML; | |
| }); | |
| if (originalItem) { | |
| const rect = originalItem.getBoundingClientRect(); | |
| currentZoomElement.style.width = `${rect.width}px`; | |
| currentZoomElement.style.height = `${rect.height}px`; | |
| currentZoomElement.style.top = `${rect.top + rect.height / 2}px`; | |
| currentZoomElement.style.left = `${rect.left + rect.width / 2}px`; | |
| currentZoomElement.style.transform = 'translate(-50%, -50%) scale(1)'; | |
| } | |
| // Hide controls and overlay | |
| zoomControls.classList.add('hidden'); | |
| zoomOverlay.classList.remove('active'); | |
| // Remove element after animation | |
| setTimeout(() => { | |
| if (currentZoomElement && currentZoomElement.parentNode) { | |
| currentZoomElement.parentNode.removeChild(currentZoomElement); | |
| } | |
| currentZoomElement = null; | |
| }, 300); | |
| } | |
| // Update zoom level display | |
| function updateZoomDisplay() { | |
| zoomLevelDisplay.textContent = `${Math.round(currentZoomLevel * 100)}%`; | |
| } | |
| }); | |
| </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/pagezoomplugin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |