Hugging Face's logo

Spaces:
ayush-thakur02
/
EdgeCoder
Sleeping

App Files Community
ayush-thakur02 commited on
Commit
43195a9
·
verified ·
1 Parent(s): 60d0ca0

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +173 -0
templates/index.html ADDED
@@ -0,0 +1,173 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>EdgeCoder | Reconfigure</title>
7
+ <script src="https://cdn.jsdelivr.net/gh/Reconfigure-In/Content-Protection-Script@refs/heads/main/script.js"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css">
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
13
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script>
14
+ <style>
15
+ body, html {
16
+ margin: 0;
17
+ padding: 0;
18
+ height: 100vh;
19
+ overflow: hidden;
20
+ font-family: Arial, sans-serif;
21
+ }
22
+ body {
23
+ display: flex;
24
+ flex-direction: column;
25
+ background-color: #f0f0f0;
26
+ }
27
+ .container {
28
+ display: flex;
29
+ flex: 1;
30
+ overflow: hidden;
31
+ }
32
+ .editor, .output {
33
+ flex: 1;
34
+ display: flex;
35
+ flex-direction: column;
36
+ margin: 10px;
37
+ background-color: #fff;
38
+ border-radius: 5px;
39
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
40
+ }
41
+ .CodeMirror {
42
+ flex: 1;
43
+ height: auto;
44
+ font-size: 14px;
45
+ }
46
+ #output-container {
47
+ flex: 1;
48
+ overflow: auto;
49
+ font-family: monospace;
50
+ font-size: 14px;
51
+ line-height: 1.5;
52
+ }
53
+ #output-table {
54
+ border-collapse: collapse;
55
+ width: 100%;
56
+ }
57
+ #line-numbers {
58
+ width: 1%;
59
+ padding-left: 20px;
60
+ text-align: right;
61
+ color: #999;
62
+ user-select: none;
63
+ vertical-align: top;
64
+ border-right: 1px solid #ddd;
65
+ background-color: #f7f7f7;
66
+ }
67
+ #output {
68
+ padding-left: 10px;
69
+ white-space: pre-wrap;
70
+ word-break: break-all;
71
+ vertical-align: top;
72
+ }
73
+ .button-container {
74
+ padding: 10px;
75
+ background-color: #f0f0f0;
76
+ display: flex;
77
+ align-items: baseline;
78
+ }
79
+ button {
80
+ padding: 10px 20px;
81
+ background-color: black;
82
+ color: white;
83
+ border: none;
84
+ border-radius: 5px;
85
+ cursor: pointer;
86
+ font-size: 16px;
87
+ transition: 0.3s;
88
+ margin-right: auto;
89
+ }
90
+ button:hover {
91
+ background-color: #333;
92
+ }
93
+ .error {
94
+ color: red;
95
+ font-weight: bold;
96
+ }
97
+ #output .token.comment { color: gray; }
98
+ #output .token.keyword { color: blue; }
99
+ #output .token.string { color: green; }
100
+ #output .token.function { color: red; }
101
+ #output .token.number { color: purple; }
102
+
103
+ a {
104
+ color: black;
105
+ text-decoration: none;
106
+ font-size: 16px;
107
+ margin-left: auto;
108
+ font-family: monospace;
109
+ }
110
+ </style>
111
+ </head>
112
+ <body>
113
+ <div class="container">
114
+ <div class="editor">
115
+ <textarea id="code">def div(x, y):
116
+ return x/y</textarea>
117
+ </div>
118
+ <div class="output">
119
+ <div id="output-container">
120
+ <table id="output-table">
121
+ <tr>
122
+ <td id="line-numbers"></td>
123
+ <td id="output"></td>
124
+ </tr>
125
+ </table>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <div class="button-container">
130
+ <button onclick="runCode()">Enhance \w EdgeCoder</button>
131
+ <a href="https://reconfigure.in/" target="_blank">Build By Reconfigure.in</a>
132
+ </div>
133
+
134
+ <script>
135
+ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
136
+ lineNumbers: true,
137
+ mode: "python",
138
+ theme: "default"
139
+ });
140
+
141
+ function runCode() {
142
+ alert("Thinking! Please wait a moment.");
143
+ var code = editor.getValue();
144
+ fetch('/', {
145
+ method: 'POST',
146
+ headers: {
147
+ 'Content-Type': 'application/x-www-form-urlencoded',
148
+ },
149
+ body: 'code=' + encodeURIComponent(code)
150
+ })
151
+ .then(response => response.json())
152
+ .then(data => {
153
+ var outputElement = document.getElementById('output');
154
+ var lineNumbersElement = document.getElementById('line-numbers');
155
+ if (data.error) {
156
+ outputElement.innerHTML = '<span class="error">Error: ' + data.error + '</span>\n\nTraceback:\n' + data.traceback;
157
+ } else {
158
+ outputElement.innerHTML = Prism.highlight(data.result, Prism.languages.python, 'python');
159
+ }
160
+ var lines = outputElement.innerHTML.split('\n');
161
+ lineNumbersElement.innerHTML = lines.map((_, i) => i + 1).join('\n');
162
+
163
+ var outputContainer = document.getElementById('output-container');
164
+ outputContainer.scrollTop = outputContainer.scrollHeight;
165
+ })
166
+ .catch((error) => {
167
+ console.error('Error:', error);
168
+ document.getElementById('output').innerHTML = '<span class="error">An unexpected error occurred. Please try again.</span>';
169
+ });
170
+ }
171
+ </script>
172
+ </body>
173
+ </html>