Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dual Website Viewer</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> | |
| .resize-handle { | |
| width: 8px; | |
| background: #e5e7eb; | |
| cursor: col-resize; | |
| transition: background 0.2s; | |
| } | |
| .resize-handle:hover { | |
| background: #3b82f6; | |
| } | |
| .iframe-container { | |
| transition: width 0.3s ease; | |
| } | |
| .tab-button { | |
| transition: all 0.2s ease; | |
| } | |
| .tab-button.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .tab-button:hover:not(.active) { | |
| background-color: #e5e7eb; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <!-- Header --> | |
| <header class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-atom text-blue-500 text-2xl"></i> | |
| <h1 class="text-xl font-bold text-gray-800">Dual Website Viewer</h1> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="reset-btn" class="px-3 py-1 bg-gray-200 rounded-md hover:bg-gray-300 text-sm"> | |
| <i class="fas fa-sync-alt mr-1"></i> Reset | |
| </button> | |
| <button id="fullscreen-btn" class="px-3 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 text-sm"> | |
| <i class="fas fa-expand mr-1"></i> Fullscreen | |
| </button> | |
| </div> | |
| </header> | |
| <!-- URL Input Section --> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="url1" class="block text-sm font-medium text-gray-700 mb-1">Left Website URL</label> | |
| <div class="flex"> | |
| <input type="text" id="url1" placeholder="https://example.com" | |
| class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button id="load1" class="px-4 py-2 bg-blue-500 text-white rounded-r-md hover:bg-blue-600"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="url2" class="block text-sm font-medium text-gray-700 mb-1">Right Website URL</label> | |
| <div class="flex"> | |
| <input type="text" id="url2" placeholder="https://example.com" | |
| class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button id="load2" class="px-4 py-2 bg-blue-500 text-white rounded-r-md hover:bg-blue-600"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- View Mode Selector --> | |
| <div class="flex mb-4 bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <button id="split-view" class="tab-button active flex-1 py-2 text-center border-r border-gray-200"> | |
| <i class="fas fa-columns mr-2"></i> Split View | |
| </button> | |
| <button id="left-only" class="tab-button flex-1 py-2 text-center border-r border-gray-200"> | |
| <i class="fas fa-arrow-left mr-2"></i> Left Only | |
| </button> | |
| <button id="right-only" class="tab-button flex-1 py-2 text-center"> | |
| <i class="fas fa-arrow-right mr-2"></i> Right Only | |
| </button> | |
| </div> | |
| <!-- Website Viewers --> | |
| <div class="flex bg-white rounded-lg shadow-md overflow-hidden" style="height: 70vh;"> | |
| <!-- Left Website --> | |
| <div id="iframe-container1" class="iframe-container h-full relative" style="width: 50%;"> | |
| <div class="absolute top-0 left-0 right-0 bg-gray-100 px-3 py-1 flex justify-between items-center"> | |
| <span class="text-xs text-gray-600 truncate" id="url-display1">No website loaded</span> | |
| <div class="flex space-x-1"> | |
| <button class="iframe-control p-1 text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-redo text-xs"></i> | |
| </button> | |
| <button class="iframe-control p-1 text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-external-link-alt text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <iframe id="iframe1" class="w-full h-full border-0" style="height: calc(100% - 28px);"></iframe> | |
| </div> | |
| <!-- Resize Handle --> | |
| <div id="resize-handle" class="resize-handle h-full"></div> | |
| <!-- Right Website --> | |
| <div id="iframe-container2" class="iframe-container h-full relative" style="width: 50%;"> | |
| <div class="absolute top-0 left-0 right-0 bg-gray-100 px-3 py-1 flex justify-between items-center"> | |
| <span class="text-xs text-gray-600 truncate" id="url-display2">No website loaded</span> | |
| <div class="flex space-x-1"> | |
| <button class="iframe-control p-1 text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-redo text-xs"></i> | |
| </button> | |
| <button class="iframe-control p-1 text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-external-link-alt text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <iframe id="iframe2" class="w-full h-full border-0" style="height: calc(100% - 28px);"></iframe> | |
| </div> | |
| </div> | |
| <!-- Responsive Presets --> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <span class="text-sm text-gray-600 mr-2">Device Presets:</span> | |
| <button class="preset-btn px-3 py-1 bg-gray-200 rounded-md text-xs hover:bg-gray-300" data-width="25"> | |
| <i class="fas fa-mobile-alt mr-1"></i> Mobile (25%) | |
| </button> | |
| <button class="preset-btn px-3 py-1 bg-gray-200 rounded-md text-xs hover:bg-gray-300" data-width="50"> | |
| <i class="fas fa-tablet-alt mr-1"></i> Tablet (50%) | |
| </button> | |
| <button class="preset-btn px-3 py-1 bg-gray-200 rounded-md text-xs hover:bg-gray-300" data-width="75"> | |
| <i class="fas fa-laptop mr-1"></i> Laptop (75%) | |
| </button> | |
| <button class="preset-btn px-3 py-1 bg-gray-200 rounded-md text-xs hover:bg-gray-300" data-width="100"> | |
| <i class="fas fa-desktop mr-1"></i> Full (100%) | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Elements | |
| const iframe1 = document.getElementById('iframe1'); | |
| const iframe2 = document.getElementById('iframe2'); | |
| const url1Input = document.getElementById('url1'); | |
| const url2Input = document.getElementById('url2'); | |
| const loadBtn1 = document.getElementById('load1'); | |
| const loadBtn2 = document.getElementById('load2'); | |
| const urlDisplay1 = document.getElementById('url-display1'); | |
| const urlDisplay2 = document.getElementById('url-display2'); | |
| const iframeContainer1 = document.getElementById('iframe-container1'); | |
| const iframeContainer2 = document.getElementById('iframe-container2'); | |
| const resizeHandle = document.getElementById('resize-handle'); | |
| const resetBtn = document.getElementById('reset-btn'); | |
| const fullscreenBtn = document.getElementById('fullscreen-btn'); | |
| const splitViewBtn = document.getElementById('split-view'); | |
| const leftOnlyBtn = document.getElementById('left-only'); | |
| const rightOnlyBtn = document.getElementById('right-only'); | |
| const presetBtns = document.querySelectorAll('.preset-btn'); | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| // Default URLs | |
| const defaultUrl1 = 'https://huggingface.co'; | |
| const defaultUrl2 = 'https://github.com'; | |
| url1Input.value = defaultUrl1; | |
| url2Input.value = defaultUrl2; | |
| loadIframe(iframe1, defaultUrl1, urlDisplay1); | |
| loadIframe(iframe2, defaultUrl2, urlDisplay2); | |
| // Load buttons | |
| loadBtn1.addEventListener('click', () => { | |
| const url = url1Input.value.trim(); | |
| if (url) { | |
| loadIframe(iframe1, url, urlDisplay1); | |
| } | |
| }); | |
| loadBtn2.addEventListener('click', () => { | |
| const url = url2Input.value.trim(); | |
| if (url) { | |
| loadIframe(iframe2, url, urlDisplay2); | |
| } | |
| }); | |
| // Enter key to load | |
| url1Input.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') loadBtn1.click(); | |
| }); | |
| url2Input.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') loadBtn2.click(); | |
| }); | |
| // Reset button | |
| resetBtn.addEventListener('click', () => { | |
| url1Input.value = defaultUrl1; | |
| url2Input.value = defaultUrl2; | |
| loadIframe(iframe1, defaultUrl1, urlDisplay1); | |
| loadIframe(iframe2, defaultUrl2, urlDisplay2); | |
| setViewMode('split'); | |
| iframeContainer1.style.width = '50%'; | |
| iframeContainer2.style.width = '50%'; | |
| }); | |
| // Fullscreen button | |
| fullscreenBtn.addEventListener('click', () => { | |
| if (!document.fullscreenElement) { | |
| document.documentElement.requestFullscreen(); | |
| } else { | |
| if (document.exitFullscreen) { | |
| document.exitFullscreen(); | |
| } | |
| } | |
| }); | |
| // View mode buttons | |
| splitViewBtn.addEventListener('click', () => setViewMode('split')); | |
| leftOnlyBtn.addEventListener('click', () => setViewMode('left')); | |
| rightOnlyBtn.addEventListener('click', () => setViewMode('right')); | |
| // Preset buttons | |
| presetBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const width = parseInt(btn.dataset.width); | |
| if (width === 100) { | |
| setViewMode('split'); | |
| iframeContainer1.style.width = '50%'; | |
| iframeContainer2.style.width = '50%'; | |
| } else { | |
| setViewMode('left'); | |
| iframeContainer1.style.width = `${width}%`; | |
| iframeContainer2.style.width = `${100 - width}%`; | |
| } | |
| }); | |
| }); | |
| // Resize functionality | |
| let isResizing = false; | |
| resizeHandle.addEventListener('mousedown', (e) => { | |
| isResizing = true; | |
| document.body.style.cursor = 'col-resize'; | |
| document.addEventListener('mousemove', handleResize); | |
| document.addEventListener('mouseup', () => { | |
| isResizing = false; | |
| document.body.style.cursor = ''; | |
| document.removeEventListener('mousemove', handleResize); | |
| }); | |
| }); | |
| function handleResize(e) { | |
| if (!isResizing) return; | |
| const containerRect = iframeContainer1.parentElement.getBoundingClientRect(); | |
| const containerWidth = containerRect.width; | |
| const mouseX = e.clientX - containerRect.left; | |
| // Calculate new widths (minimum 20% each) | |
| const newLeftWidth = Math.max(20, Math.min(80, (mouseX / containerWidth) * 100)); | |
| iframeContainer1.style.width = `${newLeftWidth}%`; | |
| iframeContainer2.style.width = `${100 - newLeftWidth}%`; | |
| } | |
| // Helper functions | |
| function loadIframe(iframe, url, displayElement) { | |
| if (!url.startsWith('http://') && !url.startsWith('https://')) { | |
| url = 'https://' + url; | |
| } | |
| iframe.src = url; | |
| displayElement.textContent = url; | |
| } | |
| function setViewMode(mode) { | |
| // Update active tab | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| if (mode === 'split') { | |
| splitViewBtn.classList.add('active'); | |
| iframeContainer1.style.display = 'block'; | |
| iframeContainer2.style.display = 'block'; | |
| resizeHandle.style.display = 'block'; | |
| iframeContainer1.style.width = '50%'; | |
| iframeContainer2.style.width = '50%'; | |
| } else if (mode === 'left') { | |
| leftOnlyBtn.classList.add('active'); | |
| iframeContainer1.style.display = 'block'; | |
| iframeContainer2.style.display = 'none'; | |
| resizeHandle.style.display = 'none'; | |
| iframeContainer1.style.width = '100%'; | |
| } else if (mode === 'right') { | |
| rightOnlyBtn.classList.add('active'); | |
| iframeContainer1.style.display = 'none'; | |
| iframeContainer2.style.display = 'block'; | |
| resizeHandle.style.display = 'none'; | |
| iframeContainer2.style.width = '100%'; | |
| } | |
| } | |
| // Iframe controls | |
| document.querySelectorAll('.iframe-control').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const iframeContainer = this.closest('.iframe-container'); | |
| const iframe = iframeContainer.querySelector('iframe'); | |
| const urlDisplay = iframeContainer.querySelector('.text-xs'); | |
| if (this.querySelector('.fa-redo')) { | |
| // Refresh button | |
| iframe.src = iframe.src; | |
| } else if (this.querySelector('.fa-external-link-alt')) { | |
| // Open in new tab | |
| window.open(iframe.src, '_blank'); | |
| } | |
| }); | |
| }); | |
| }); | |
| </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=vorstcavry/test12" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |