Spaces:
Running
Running
File size: 5,669 Bytes
8a5fe19 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
<!DOCTYPE html>
<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> |