coder

Running

App Files Files Community

nofl commited on Nov 6, 2024

Commit

7eb7701

verified ·

1 Parent(s): 325675e

Update index.html

Browse files

Files changed (1) hide show

index.html +117 -46

index.html CHANGED Viewed

@@ -1,52 +1,123 @@
-import React from 'react';
-import { Heart } from "lucide-react";
-export default function FullScreenIframe() {
-  return (
-    <div className="flex flex-col min-h-screen">
-      <header className="px-4 lg:px-6 h-14 flex items-center">
-        <a className="flex items-center justify-center" href="#">
-          <Heart className="h-6 w-6 text-primary" />
-          <span className="sr-only">FullScreen Iframe</span>
-        </a>
-      </header>
-      <main className="flex-1">
-        <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
-          <div className="container px-4 md:px-6">
-            <div className="flex flex-col items-center space-y-4 text-center">
-              <div className="space-y-2">
-                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
-                  Full Screen Iframe
-                </h1>
-                <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
-                  This is a full screen iframe.
-                </p>
-              </div>
-            </div>
-          </div>
-        </section>
-        <section className="w-full py-12 md:py-24 lg:py-32">
-          <div className="container px-4 md:px-6">
-            <iframe src="https://aidark.net/" frameBorder="0" scrolling="no" className="w-full h-screen"></iframe>
-          </div>
-        </section>
-      </main>
-      <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t">
-        <p className="text-xs text-gray-500 dark:text-gray-400"> 2023 Full Screen Iframe. All rights reserved.</p>
-        <nav className="sm:ml-auto flex gap-4 sm:gap-6">
-          <a className="text-xs hover:underline underline-offset-4" href="#">
-            Terms of Service
-          </a>
-          <a className="text-xs hover:underline underline-offset-4" href="#">
-            Privacy
-          </a>
-        </nav>
-      </footer>
     </div>
-  );
-}
-<!-- <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="Full screen iframe implementation">
+    <title>Full Screen Iframe</title>
+    <style>
+        /* CSS Reset for cross-browser consistency */
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        /* Base styles */
+        html, body {
+            height: 100vh;
+            width: 100vw;
+            overflow: hidden;
+            position: relative;
+        }
+        /* Container for iframe with fallback message */
+        .iframe-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #f5f5f5;
+        }
+        /* Iframe styles with improved performance */
+        .responsive-iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+            overflow: hidden;
+            /* Enable hardware acceleration */
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
+            /* Improve scrolling performance */
+            -webkit-overflow-scrolling: touch;
+        }
+        /* Fallback message styling */
+        .fallback-message {
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            padding: 20px;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        /* Show fallback when iframe fails */
+        .iframe-error .fallback-message {
+            display: block;
+        }
+        .iframe-error .responsive-iframe {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="iframe-container">
+        <iframe
+            src="https://aidark.net/"
+            class="responsive-iframe"
+            title="Full screen content"
+            sandbox="allow-scripts allow-same-origin allow-forms"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            onload="this.parentElement.classList.remove('iframe-error')"
+            onerror="this.parentElement.classList.add('iframe-error')"
+        ></iframe>
+        <div class="fallback-message">
+            <h2>Unable to load content</h2>
+            <p>Please check your internet connection and try again.</p>
+        </div>
     </div>
+    <script>
+        // Handle iframe loading errors
+        window.addEventListener('load', function() {
+            const iframe = document.querySelector('.responsive-iframe');
+            const container = document.querySelector('.iframe-container');
+            // Additional error handling
+            iframe.addEventListener('error', function() {
+                container.classList.add('iframe-error');
+            });
+            // Handle resize events efficiently
+            let resizeTimeout;
+            window.addEventListener('resize', function() {
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(function() {
+                    // Trigger reflow only when resize ends
+                    iframe.style.height = window.innerHeight + 'px';
+                    iframe.style.width = window.innerWidth + 'px';
+                }, 250);
+            });
+        });
+    </script>
+</body>
+</html>
+<!--
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">