Spaces:

Mackin7
/

webpage360

Running

App Files Files Community

Mackin7 commited on 13 days ago

Commit

80e80c9

verified ·

1 Parent(s): 73f2986

Creat a 3d web browser explorer for web pages than can enhance web pages when click at . The idea is to make pages more enhanced, larger n viewable - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: webpage360
+emoji: 🐳
+colorFrom: pink
+colorTo: gray
 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,322 @@
-<!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>3D Web Explorer</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>
+        .scene {
+            perspective: 1000px;
+            width: 100%;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .carousel {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform 1s;
+        }
+        .card {
+            position: absolute;
+            width: 300px;
+            height: 400px;
+            left: 50%;
+            top: 50%;
+            transform-origin: center center;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+            transition: all 0.5s ease;
+            cursor: pointer;
+            background: white;
+        }
+        .card:hover {
+            transform: scale(1.05) !important;
+            box-shadow: 0 25px 50px rgba(0,0,0,0.4);
+        }
+        .card iframe {
+            width: 100%;
+            height: 80%;
+            border: none;
+        }
+        .card-info {
+            padding: 15px;
+            height: 20%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .enhanced-view {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.9);
+            z-index: 100;
+            display: none;
+            justify-content: center;
+            align-items: center;
+        }
+        .enhanced-content {
+            width: 90%;
+            height: 90%;
+            background: white;
+            border-radius: 10px;
+            overflow: hidden;
+            position: relative;
+        }
+        .enhanced-content iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        .close-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: #ff4757;
+            color: white;
+            border: none;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            font-size: 20px;
+            cursor: pointer;
+            z-index: 101;
+        }
+        .enhance-effects {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 10px;
+            z-index: 101;
+        }
+        .effect-btn {
+            background: #4a69bd;
+            color: white;
+            border: none;
+            padding: 8px 15px;
+            border-radius: 20px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: all 0.3s;
+        }
+        .effect-btn:hover {
+            background: #1e3799;
+            transform: translateY(-3px);
+        }
+        @media (max-width: 768px) {
+            .card {
+                width: 250px;
+                height: 350px;
+            }
+            .enhance-effects {
+                flex-wrap: wrap;
+                justify-content: center;
+                width: 90%;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-100">
+    <div class="scene">
+        <div class="carousel" id="carousel">
+            <!-- Cards will be added dynamically -->
+        </div>
+    </div>
+    <div class="enhanced-view" id="enhancedView">
+        <div class="enhanced-content">
+            <button class="close-btn" id="closeBtn"><i class="fas fa-times"></i></button>
+            <iframe id="enhancedFrame" src=""></iframe>
+            <div class="enhance-effects">
+                <button class="effect-btn" data-effect="zoom"><i class="fas fa-search-plus"></i> Zoom</button>
+                <button class="effect-btn" data-effect="contrast"><i class="fas fa-adjust"></i> Contrast</button>
+                <button class="effect-btn" data-effect="readable"><i class="fas fa-book-open"></i> Readable</button>
+                <button class="effect-btn" data-effect="dark"><i class="fas fa-moon"></i> Dark Mode</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Sample websites to display
+            const websites = [
+                {
+                    title: "Tech News",
+                    url: "https://techcrunch.com",
+                    color: "bg-blue-500"
+                },
+                {
+                    title: "Science Daily",
+                    url: "https://www.sciencedaily.com",
+                    color: "bg-green-500"
+                },
+                {
+                    title: "Design Inspiration",
+                    url: "https://dribbble.com",
+                    color: "bg-pink-500"
+                },
+                {
+                    title: "Programming",
+                    url: "https://stackoverflow.com",
+                    color: "bg-orange-500"
+                },
+                {
+                    title: "Space Exploration",
+                    url: "https://www.nasa.gov",
+                    color: "bg-indigo-500"
+                }
+            ];
+            const carousel = document.getElementById('carousel');
+            const enhancedView = document.getElementById('enhancedView');
+            const enhancedFrame = document.getElementById('enhancedFrame');
+            const closeBtn = document.getElementById('closeBtn');
+            // Create cards for each website
+            websites.forEach((site, index) => {
+                const card = document.createElement('div');
+                card.className = 'card';
+                card.innerHTML = `
+                    <iframe src="${site.url}" loading="lazy"></iframe>
+                    <div class="card-info ${site.color} flex flex-col justify-center items-center">
+                        <h3 class="text-xl font-bold">${site.title}</h3>
+                        <p class="text-sm opacity-80">Click to enhance</p>
+                    </div>
+                `;
+                // Position cards in 3D space
+                const angle = (index / websites.length) * Math.PI * 2;
+                const radius = websites.length * 30;
+                const x = Math.cos(angle) * radius;
+                const z = Math.sin(angle) * radius;
+                card.style.transform = `translate(-50%, -50%) translateZ(${z}px) translateX(${x}px) rotateY(${angle}rad)`;
+                // Add click event to enhance the page
+                card.addEventListener('click', () => {
+                    enhancePage(site.url);
+                });
+                carousel.appendChild(card);
+            });
+            // Rotate carousel continuously
+            let angle = 0;
+            setInterval(() => {
+                angle += 0.002;
+                carousel.style.transform = `rotateY(${angle}rad)`;
+            }, 16);
+            // Enhance page function
+            function enhancePage(url) {
+                enhancedFrame.src = url;
+                enhancedView.style.display = 'flex';
+                document.body.style.overflow = 'hidden';
+            }
+            // Close enhanced view
+            closeBtn.addEventListener('click', () => {
+                enhancedView.style.display = 'none';
+                document.body.style.overflow = 'auto';
+                enhancedFrame.src = '';
+            });
+            // Enhancement effects
+            const effectButtons = document.querySelectorAll('.effect-btn');
+            effectButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const effect = this.getAttribute('data-effect');
+                    applyEffect(effect);
+                });
+            });
+            function applyEffect(effect) {
+                const iframeDoc = enhancedFrame.contentDocument || enhancedFrame.contentWindow.document;
+                try {
+                    // Create a style element if it doesn't exist
+                    let style = iframeDoc.getElementById('enhancement-style');
+                    if (!style) {
+                        style = iframeDoc.createElement('style');
+                        style.id = 'enhancement-style';
+                        iframeDoc.head.appendChild(style);
+                    }
+                    switch(effect) {
+                        case 'zoom':
+                            style.innerHTML = `
+                                body {
+                                    zoom: 1.5;
+                                }
+                                img, video {
+                                    max-width: 100% !important;
+                                    height: auto !important;
+                                }
+                            `;
+                            break;
+                        case 'contrast':
+                            style.innerHTML = `
+                                body {
+                                    filter: contrast(1.2) brightness(1.1);
+                                }
+                            `;
+                            break;
+                        case 'readable':
+                            style.innerHTML = `
+                                body {
+                                    font-size: 18px !important;
+                                    line-height: 1.6 !important;
+                                    max-width: 800px !important;
+                                    margin: 0 auto !important;
+                                    padding: 20px !important;
+                                }
+                                p, li {
+                                    margin-bottom: 1em !important;
+                                }
+                            `;
+                            break;
+                        case 'dark':
+                            style.innerHTML = `
+                                body {
+                                    background-color: #222 !important;
+                                    color: #eee !important;
+                                    filter: invert(1) hue-rotate(180deg);
+                                }
+                                img, video {
+                                    filter: invert(1) hue-rotate(180deg) !important;
+                                }
+                            `;
+                            break;
+                    }
+                } catch (e) {
+                    console.log("Could not apply effect due to cross-origin restrictions");
+                    // In a real implementation, you would need a proxy server to bypass CORS
+                }
+            }
+        });
+    </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/webpage360" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>