Spaces:

vorstcavry
/

as

Running

App Files Files Community

vorstcavry commited on Apr 8

Commit

8a5fe19

verified ·

1 Parent(s): 5c99ba8

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +144 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: As
-emoji: 🏃
-colorFrom: red
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: as
+emoji: 🐳
+colorFrom: pink
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,144 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>