Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dual Web 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> | |
| .webview-container { | |
| transition: all 0.3s ease; | |
| } | |
| .webview-focused { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 100; | |
| background: white; | |
| } | |
| .webview-minimized { | |
| width: 0; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .iframe-container { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .control-bar { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| background: rgba(0,0,0,0.7); | |
| color: white; | |
| padding: 8px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| z-index: 10; | |
| } | |
| .url-input { | |
| flex-grow: 1; | |
| margin: 0 10px; | |
| padding: 5px; | |
| border-radius: 4px; | |
| border: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto p-4"> | |
| <h1 class="text-3xl font-bold text-center mb-6">Dual Web Viewer</h1> | |
| <p class="text-center mb-8 text-gray-600">View two websites simultaneously. Click the expand button to focus on one while the other continues running.</p> | |
| <div class="flex flex-col md:flex-row gap-4 h-screen"> | |
| <!-- Web 1 Container --> | |
| <div id="web1-container" class="webview-container flex-1 bg-white rounded-lg shadow-lg overflow-hidden relative"> | |
| <div class="iframe-container"> | |
| <div class="control-bar"> | |
| <button onclick="toggleFullscreen('web1')" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| <input type="text" id="web1-url" class="url-input" value="https://www.wikipedia.org" placeholder="Enter URL"> | |
| <button onclick="loadUrl('web1')" class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| <iframe id="web1-frame" src="https://www.wikipedia.org"></iframe> | |
| </div> | |
| </div> | |
| <!-- Web 2 Container --> | |
| <div id="web2-container" class="webview-container flex-1 bg-white rounded-lg shadow-lg overflow-hidden relative"> | |
| <div class="iframe-container"> | |
| <div class="control-bar"> | |
| <button onclick="toggleFullscreen('web2')" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| <input type="text" id="web2-url" class="url-input" value="https://www.github.com" placeholder="Enter URL"> | |
| <button onclick="loadUrl('web2')" class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| <iframe id="web2-frame" src="https://www.github.com"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let fullscreenWeb = null; | |
| function toggleFullscreen(webId) { | |
| const container = document.getElementById(`${webId}-container`); | |
| const otherWebId = webId === 'web1' ? 'web2' : 'web1'; | |
| const otherContainer = document.getElementById(`${otherWebId}-container`); | |
| if (fullscreenWeb === webId) { | |
| // Exit fullscreen | |
| container.classList.remove('webview-focused'); | |
| otherContainer.classList.remove('webview-minimized'); | |
| fullscreenWeb = null; | |
| } else { | |
| // Enter fullscreen | |
| container.classList.add('webview-focused'); | |
| otherContainer.classList.add('webview-minimized'); | |
| fullscreenWeb = webId; | |
| } | |
| } | |
| function loadUrl(webId) { | |
| const urlInput = document.getElementById(`${webId}-url`); | |
| const frame = document.getElementById(`${webId}-frame`); | |
| let url = urlInput.value.trim(); | |
| // Add https:// if not present | |
| if (!url.startsWith('http://') && !url.startsWith('https://')) { | |
| url = 'https://' + url; | |
| urlInput.value = url; | |
| } | |
| frame.src = url; | |
| } | |
| // Handle URL input on Enter key | |
| document.getElementById('web1-url').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') loadUrl('web1'); | |
| }); | |
| document.getElementById('web2-url').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') loadUrl('web2'); | |
| }); | |
| // | |
| </html> |