Hugging Face's logo

Spaces:
nofl
/
coder
Running

App Files Community
nofl commited on
Commit
06d399c
·
verified ·
1 Parent(s): f5a2f70

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +83 -128
index.html CHANGED
@@ -3,152 +3,107 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
- <meta name="description" content="Full screen iframe implementation">
8
- <title>Full Screen Iframe</title>
9
  <style>
10
- /* CSS Reset for cross-browser consistency */
11
- *,
12
- *::before,
13
- *::after {
14
- box-sizing: border-box;
15
- margin: 0;
16
- padding: 0;
17
  }
18
-
19
- /* Base styles */
20
- html, body {
21
- height: 100vh;
22
- width: 100vw;
23
- overflow: hidden;
24
- position: relative;
25
  }
26
-
27
- /* Container for iframe with fallback message */
28
- .iframe-container {
29
- position: fixed;
30
- top: 0;
31
- left: 0;
32
- width: 100%;
33
- height: 100%;
34
- background-color: #f5f5f5;
35
  }
36
-
37
- /* Iframe styles with improved performance */
38
- .responsive-iframe {
39
- position: absolute;
40
- top: 0;
41
- left: 0;
42
- width: 100%;
43
- height: 100%;
44
- border: none;
45
- overflow: hidden;
46
- /* Enable hardware acceleration */
47
- transform: translateZ(0);
48
- -webkit-transform: translateZ(0);
49
- /* Improve scrolling performance */
50
- -webkit-overflow-scrolling: touch;
51
  }
52
-
53
- /* Fallback message styling */
54
- .fallback-message {
55
- display: none;
56
- position: absolute;
57
- top: 50%;
58
- left: 50%;
59
- transform: translate(-50%, -50%);
60
- text-align: center;
61
- padding: 20px;
62
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
63
  }
64
-
65
- /* Show fallback when iframe fails */
66
- .iframe-error .fallback-message {
67
- display: block;
68
  }
69
-
70
- .iframe-error .responsive-iframe {
71
- display: none;
 
 
 
 
72
  }
73
  </style>
74
  </head>
75
  <body>
76
- <div class="iframe-container">
77
- <iframe
78
- src="https://aidark.net/"
79
- class="responsive-iframe"
80
- title="Full screen content"
81
- sandbox="allow-scripts allow-same-origin allow-forms"
82
- loading="lazy"
83
- referrerpolicy="no-referrer"
84
- onload="this.parentElement.classList.remove('iframe-error')"
85
- onerror="this.parentElement.classList.add('iframe-error')"
86
- ></iframe>
87
- <div class="fallback-message">
88
- <h2>Unable to load content</h2>
89
- <p>Please check your internet connection and try again.</p>
90
  </div>
91
- </div>
92
 
93
- <script>
94
- // Handle iframe loading errors
95
- window.addEventListener('load', function() {
96
- const iframe = document.querySelector('.responsive-iframe');
97
- const container = document.querySelector('.iframe-container');
98
-
99
- // Additional error handling
100
- iframe.addEventListener('error', function() {
101
- container.classList.add('iframe-error');
102
- });
103
 
104
- // Handle resize events efficiently
105
- let resizeTimeout;
106
- window.addEventListener('resize', function() {
107
- clearTimeout(resizeTimeout);
108
- resizeTimeout = setTimeout(function() {
109
- // Trigger reflow only when resize ends
110
- iframe.style.height = window.innerHeight + 'px';
111
- iframe.style.width = window.innerWidth + 'px';
112
- }, 250);
113
- });
 
114
  });
115
- </script>
116
- </body>
117
- </html>
118
- <!--
119
 
120
- <!DOCTYPE html>
121
- <html lang="en">
122
- <head>
123
- <meta charset="UTF-8">
124
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
125
- <title>Full Screen Iframe</title>
126
- <style>
127
- /* Remove padding and margin for body and html */
128
- html, body {
129
- margin: 0;
130
- padding: 0;
131
- height: 100%;
132
- }
133
 
134
- /* Make the iframe full screen and remove the border */
135
- iframe {
136
- position: absolute;
137
- top: 0;
138
- left: 0;
139
- width: 100%;
140
- height: 100%;
141
- border: none; /* Removes the border */
142
- margin: 0;
143
- padding: 0;
144
- overflow: hidden; /* Prevents scrollbars */
145
  }
146
- </style>
147
- </head>
148
- <body>
149
-
150
- <iframe src="https://aidark.net/" frameborder="0" scrolling="no"></iframe>
151
 
 
 
 
 
152
  </body>
153
  </html>
154
- -->
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Coder Space</title>
 
 
7
  <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ line-height: 1.6;
11
+ padding: 20px;
12
+ background-color: #f4f4f4;
 
 
13
  }
14
+ .container {
15
+ max-width: 800px;
16
+ margin: auto;
17
+ background-color: #fff;
18
+ padding: 20px;
19
+ border-radius: 5px;
20
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
21
  }
22
+ header {
23
+ background-color: #3498db;
24
+ color: white;
25
+ text-align: center;
26
+ padding: 20px 0;
27
+ border-radius: 5px 5px 0 0;
 
 
 
28
  }
29
+ main {
30
+ display: flex;
31
+ flex-direction: column;
32
+ gap: 20px;
 
 
 
 
 
 
 
 
 
 
 
33
  }
34
+ .card {
35
+ background-color: #fff;
36
+ border-radius: 5px;
37
+ box-shadow: 0 0 10px rgba(0,0,0,0.05);
38
+ transition: transform 0.3s ease-in-out;
 
 
 
 
 
 
39
  }
40
+ .card:hover {
41
+ transform: translateY(-5px);
 
 
42
  }
43
+ footer {
44
+ background-color: #3498db;
45
+ color: white;
46
+ text-align: center;
47
+ padding: 10px 0;
48
+ margin-top: auto;
49
+ border-radius: 0 0 5px 5px;
50
  }
51
  </style>
52
  </head>
53
  <body>
54
+ <header>
55
+ <h1>Coder Space</h1>
56
+ <p>Interactive coding environment powered by Hugging Face</p>
57
+ </header>
58
+
59
+ <main>
60
+ <!-- Add your main content here -->
61
+ <div class="card">
62
+ <h2>Code Editor</h2>
63
+ <textarea id="codeEditor" rows="10" cols="50"></textarea>
 
 
 
 
64
  </div>
 
65
 
66
+ <div class="card">
67
+ <h2>Console Output</h2>
68
+ <pre id="consoleOutput"></pre>
69
+ </div>
70
+
71
+ <div class="card">
72
+ <h2>Run Code</h2>
73
+ <button onclick="runCode()">Execute</button>
74
+ </div>
75
+ </main>
76
 
77
+ <footer>
78
+ <p>&copy; 2023 Coder Space. All rights reserved.</p>
79
+ </footer>
80
+
81
+ <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.34.2/min/vs/loader.js"></script>
82
+ <script>
83
+ // Initialize Monaco Editor
84
+ const editor = monaco.editor.create(document.getElementById('codeEditor'), {
85
+ value: '',
86
+ language: 'javascript',
87
+ theme: 'vs-dark'
88
  });
 
 
 
 
89
 
90
+ let consoleOutput = document.getElementById('consoleOutput');
 
 
 
 
 
 
 
 
 
 
 
 
91
 
92
+ function runCode() {
93
+ try {
94
+ const code = editor.getValue();
95
+ console.log(code);
96
+ // Here you would typically execute the code and update the console output
97
+ consoleOutput.textContent += `Output:\n${code}\n`;
98
+ } catch (error) {
99
+ console.error(error);
100
+ consoleOutput.textContent += `Error:\n${error.message}\n`;
101
+ }
 
102
  }
 
 
 
 
 
103
 
104
+ // Example of using environment variables
105
+ const envVars = window.huggingface.variables;
106
+ console.log('Environment Variables:', JSON.stringify(envVars, null, 2));
107
+ </script>
108
  </body>
109
  </html>