Spaces:

Mackin7
/

360pluginenhancer

Running

App Files Files Community

Mackin7 commited on 25 days ago

Commit

9c57894

verified ·

1 Parent(s): 0e889a8

Creat a page enhancer tools for web browers that can enlarge web pages into 360.the idea is to make web pages more viewable and larger when click - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +350 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
 title: 360pluginenhancer
-emoji: ⚡
-colorFrom: green
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: 360pluginenhancer
+emoji: 🐳
+colorFrom: yellow
+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,350 @@
-<!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>360° Page Enhancer</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>
+        /* Custom CSS for the 360 effect */
+        .page-container {
+            transition: all 0.3s ease;
+            transform-origin: center center;
+        }
+        .enhanced-view {
+            transform: scale(1.5);
+            overflow-x: auto;
+            width: 150%;
+            margin-left: -25%;
+            background-color: white;
+            box-shadow: 0 0 20px rgba(0,0,0,0.2);
+            min-height: 100vh;
+        }
+        .toolbar {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 9999;
+            transition: all 0.3s ease;
+        }
+        .toolbar-expanded {
+            width: 300px;
+            background: rgba(255,255,255,0.95);
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            padding: 15px;
+        }
+        .pan-indicator {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 20px;
+            font-size: 12px;
+            z-index: 9999;
+            display: none;
+        }
+        @media (max-width: 768px) {
+            .enhanced-view {
+                transform: scale(1.3);
+                width: 130%;
+                margin-left: -15%;
+            }
+            .toolbar {
+                bottom: 10px;
+                right: 10px;
+            }
+            .toolbar-expanded {
+                width: 280px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Main page container that will be enhanced -->
+    <div id="pageContainer" class="page-container">
+        <!-- This would be the existing webpage content -->
+        <div class="p-8">
+            <h1 class="text-4xl font-bold mb-6">Sample Web Page</h1>
+            <p class="text-lg mb-4">This is a demonstration of how the 360° Page Enhancer would work on a typical webpage. When you click the enhance button, this content will expand to be more viewable.</p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 my-8">
+                <div class="bg-blue-100 p-6 rounded-lg">
+                    <h2 class="text-xl font-semibold mb-3">Feature 1</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
+                </div>
+                <div class="bg-green-100 p-6 rounded-lg">
+                    <h2 class="text-xl font-semibold mb-3">Feature 2</h2>
+                    <p>Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur non nulla sit amet nisl.</p>
+                </div>
+                <div class="bg-purple-100 p-6 rounded-lg">
+                    <h2 class="text-xl font-semibold mb-3">Feature 3</h2>
+                    <p>Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.</p>
+                </div>
+            </div>
+            <div class="mt-10">
+                <img src="https://via.placeholder.com/1200x500" alt="Sample image" class="w-full rounded-lg shadow-md mb-6">
+                <p class="text-gray-700">This image and the surrounding content will become larger and more readable when the 360° enhancement is activated.</p>
+            </div>
+        </div>
+    </div>
+    <!-- Pan indicator (shown during enhanced view) -->
+    <div id="panIndicator" class="pan-indicator">
+        <i class="fas fa-arrows-alt mr-2"></i> Pan Mode Active
+    </div>
+    <!-- Enhancement toolbar -->
+    <div id="enhancerToolbar" class="toolbar">
+        <div id="toolbarContent" class="hidden">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">360° Page Enhancer</h3>
+                <button id="closeToolbar" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-1">Zoom Level</label>
+                <div class="flex items-center">
+                    <button id="zoomOut" class="bg-gray-200 hover:bg-gray-300 p-2 rounded-l">
+                        <i class="fas fa-search-minus"></i>
+                    </button>
+                    <div class="bg-gray-100 px-4 py-2 text-center w-full">
+                        <span id="zoomLevel">100%</span>
+                    </div>
+                    <button id="zoomIn" class="bg-gray-200 hover:bg-gray-300 p-2 rounded-r">
+                        <i class="fas fa-search-plus"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="flex space-x-2 mb-4">
+                <button id="panMode" class="flex-1 bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded flex items-center justify-center">
+                    <i class="fas fa-arrows-alt mr-2"></i> Pan Mode
+                </button>
+                <button id="resetView" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded flex items-center justify-center">
+                    <i class="fas fa-sync-alt mr-2"></i> Reset
+                </button>
+            </div>
+            <div class="text-xs text-gray-500">
+                <p>Tip: Use mouse wheel to zoom in/out when in pan mode.</p>
+            </div>
+        </div>
+        <button id="enhanceButton" class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg">
+            <i class="fas fa-expand text-xl"></i>
+        </button>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const pageContainer = document.getElementById('pageContainer');
+            const enhancerToolbar = document.getElementById('enhancerToolbar');
+            const toolbarContent = document.getElementById('toolbarContent');
+            const enhanceButton = document.getElementById('enhanceButton');
+            const closeToolbar = document.getElementById('closeToolbar');
+            const zoomIn = document.getElementById('zoomIn');
+            const zoomOut = document.getElementById('zoomOut');
+            const zoomLevel = document.getElementById('zoomLevel');
+            const panMode = document.getElementById('panMode');
+            const resetView = document.getElementById('resetView');
+            const panIndicator = document.getElementById('panIndicator');
+            let isEnhanced = false;
+            let isPanMode = false;
+            let currentZoom = 1;
+            let startX, startY, scrollLeft, scrollTop;
+            // Toggle enhanced view
+            enhanceButton.addEventListener('click', function() {
+                isEnhanced = !isEnhanced;
+                if (isEnhanced) {
+                    pageContainer.classList.add('enhanced-view');
+                    toolbarContent.classList.remove('hidden');
+                    enhancerToolbar.classList.add('toolbar-expanded');
+                    enhanceButton.innerHTML = '<i class="fas fa-compress text-xl"></i>';
+                    // Store original scroll position
+                    scrollLeft = window.pageXOffset;
+                    scrollTop = window.pageYOffset;
+                    // Center the view
+                    window.scrollTo(
+                        (document.documentElement.scrollWidth - window.innerWidth) / 2,
+                        (document.documentElement.scrollHeight - window.innerHeight) / 2
+                    );
+                } else {
+                    pageContainer.classList.remove('enhanced-view');
+                    toolbarContent.classList.add('hidden');
+                    enhancerToolbar.classList.remove('toolbar-expanded');
+                    enhanceButton.innerHTML = '<i class="fas fa-expand text-xl"></i>';
+                    disablePanMode();
+                    // Restore original scroll position
+                    window.scrollTo(scrollLeft, scrollTop);
+                }
+            });
+            // Close toolbar
+            closeToolbar.addEventListener('click', function() {
+                isEnhanced = false;
+                pageContainer.classList.remove('enhanced-view');
+                toolbarContent.classList.add('hidden');
+                enhancerToolbar.classList.remove('toolbar-expanded');
+                enhanceButton.innerHTML = '<i class="fas fa-expand text-xl"></i>';
+                disablePanMode();
+                // Restore original scroll position
+                window.scrollTo(scrollLeft, scrollTop);
+            });
+            // Zoom in
+            zoomIn.addEventListener('click', function() {
+                if (currentZoom < 3) {
+                    currentZoom += 0.1;
+                    updateZoom();
+                }
+            });
+            // Zoom out
+            zoomOut.addEventListener('click', function() {
+                if (currentZoom > 0.5) {
+                    currentZoom -= 0.1;
+                    updateZoom();
+                }
+            });
+            // Update zoom level
+            function updateZoom() {
+                pageContainer.style.transform = `scale(${currentZoom * 1.5})`;
+                zoomLevel.textContent = `${Math.round(currentZoom * 100)}%`;
+            }
+            // Toggle pan mode
+            panMode.addEventListener('click', function() {
+                isPanMode = !isPanMode;
+                if (isPanMode) {
+                    enablePanMode();
+                } else {
+                    disablePanMode();
+                }
+            });
+            // Enable pan mode
+            function enablePanMode() {
+                panMode.classList.add('bg-blue-500', 'text-white');
+                panMode.classList.remove('bg-blue-100', 'text-blue-800');
+                panIndicator.style.display = 'block';
+                // Make page container draggable
+                pageContainer.style.cursor = 'grab';
+                pageContainer.addEventListener('mousedown', startDrag);
+                document.addEventListener('mouseup', stopDrag);
+                document.addEventListener('mousemove', drag);
+                // Add wheel event for zooming during pan mode
+                pageContainer.addEventListener('wheel', handleWheel, { passive: false });
+            }
+            // Disable pan mode
+            function disablePanMode() {
+                isPanMode = false;
+                panMode.classList.remove('bg-blue-500', 'text-white');
+                panMode.classList.add('bg-blue-100', 'text-blue-800');
+                panIndicator.style.display = 'none';
+                // Remove draggable behavior
+                pageContainer.style.cursor = '';
+                pageContainer.removeEventListener('mousedown', startDrag);
+                document.removeEventListener('mouseup', stopDrag);
+                document.removeEventListener('mousemove', drag);
+                pageContainer.removeEventListener('wheel', handleWheel);
+            }
+            // Start drag
+            function startDrag(e) {
+                startX = e.pageX - pageContainer.offsetLeft;
+                startY = e.pageY - pageContainer.offsetTop;
+                pageContainer.style.cursor = 'grabbing';
+            }
+            // Stop drag
+            function stopDrag() {
+                pageContainer.style.cursor = 'grab';
+            }
+            // Drag movement
+            function drag(e) {
+                if (!isPanMode) return;
+                e.preventDefault();
+                const x = e.pageX - startX;
+                const y = e.pageY - startY;
+                // Calculate boundaries to prevent dragging too far
+                const maxX = (pageContainer.scrollWidth - window.innerWidth) / 2;
+                const maxY = (pageContainer.scrollHeight - window.innerHeight) / 2;
+                // Apply boundaries
+                const boundedX = Math.max(-maxX, Math.min(x, maxX));
+                const boundedY = Math.max(-maxY, Math.min(y, maxY));
+                pageContainer.style.left = `${boundedX}px`;
+                pageContainer.style.top = `${boundedY}px`;
+            }
+            // Handle wheel zoom
+            function handleWheel(e) {
+                if (!isPanMode) return;
+                e.preventDefault();
+                if (e.deltaY < 0) {
+                    // Zoom in
+                    if (currentZoom < 3) {
+                        currentZoom += 0.05;
+                        updateZoom();
+                    }
+                } else {
+                    // Zoom out
+                    if (currentZoom > 0.5) {
+                        currentZoom -= 0.05;
+                        updateZoom();
+                    }
+                }
+            }
+            // Reset view
+            resetView.addEventListener('click', function() {
+                currentZoom = 1;
+                updateZoom();
+                disablePanMode();
+                // Reset position
+                pageContainer.style.left = '0';
+                pageContainer.style.top = '0';
+                // Center the view
+                window.scrollTo(
+                    (document.documentElement.scrollWidth - window.innerWidth) / 2,
+                    (document.documentElement.scrollHeight - window.innerHeight) / 2
+                );
+            });
+        });
+    </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/360pluginenhancer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>