coder

Running

App Files Files Community

nofl commited on Nov 14, 2024

Commit

447f4ff

verified ·

1 Parent(s): 06d399c

Update index.html

Browse files

Files changed (1) hide show

index.html +128 -83

index.html CHANGED Viewed

@@ -3,107 +3,152 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Coder Space</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            line-height: 1.6;
-            padding: 20px;
-            background-color: #f4f4f4;
         }
-        .container {
-            max-width: 800px;
-            margin: auto;
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 5px;
-            box-shadow: 0 0 10px rgba(0,0,0,0.1);
         }
-        header {
-            background-color: #3498db;
-            color: white;
-            text-align: center;
-            padding: 20px 0;
-            border-radius: 5px 5px 0 0;
         }
-        main {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
         }
-        .card {
-            background-color: #fff;
-            border-radius: 5px;
-            box-shadow: 0 0 10px rgba(0,0,0,0.05);
-            transition: transform 0.3s ease-in-out;
         }
-        .card:hover {
-            transform: translateY(-5px);
         }
-        footer {
-            background-color: #3498db;
-            color: white;
-            text-align: center;
-            padding: 10px 0;
-            margin-top: auto;
-            border-radius: 0 0 5px 5px;
         }
     </style>
 </head>
 <body>
-    <header>
-        <h1>Coder Space</h1>
-        <p>Interactive coding environment powered by Hugging Face</p>
-    </header>
-    <main>
-        <!-- Add your main content here -->
-        <div class="card">
-            <h2>Code Editor</h2>
-            <textarea id="codeEditor" rows="10" cols="50"></textarea>
-        </div>
-        <div class="card">
-            <h2>Console Output</h2>
-            <pre id="consoleOutput"></pre>
-        </div>
-        <div class="card">
-            <h2>Run Code</h2>
-            <button onclick="runCode()">Execute</button>
         </div>
-    </main>
-    <footer>
-        <p>&copy; 2023 Coder Space. All rights reserved.</p>
-    </footer>
-    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.34.2/min/vs/loader.js"></script>
     <script>
-        // Initialize Monaco Editor
-        const editor = monaco.editor.create(document.getElementById('codeEditor'), {
-            value: '',
-            language: 'javascript',
-            theme: 'vs-dark'
         });
-        let consoleOutput = document.getElementById('consoleOutput');
-        function runCode() {
-            try {
-                const code = editor.getValue();
-                console.log(code);
-                // Here you would typically execute the code and update the console output
-                consoleOutput.textContent += `Output:\n${code}\n`;
-            } catch (error) {
-                console.error(error);
-                consoleOutput.textContent += `Error:\n${error.message}\n`;
-            }
         }
-        // Example of using environment variables
-        const envVars = window.huggingface.variables;
-        console.log('Environment Variables:', JSON.stringify(envVars, null, 2));
-    </script>
 </body>
 </html>

 <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">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Full Screen Iframe</title>
+    <style>
+        /* Remove padding and margin for body and html */
+        html, body {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+        }
+        /* Make the iframe full screen and remove the border */
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none; /* Removes the border */
+            margin: 0;
+            padding: 0;
+            overflow: hidden; /* Prevents scrollbars */
         }
+    </style>
+</head>
+<body>
+    <iframe src="https://aidark.net/" frameborder="0" scrolling="no"></iframe>
 </body>
 </html>
+ -->