Hugging Face's logo

Spaces:
Artificial-superintelligence
/
Athspi
Running

App Files Community
Artificial-superintelligence commited on
Commit
87415be
·
verified ·
1 Parent(s): 79c9c44

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +82 -13
templates/index.html CHANGED
@@ -3,23 +3,92 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Python IDE</title>
7
- <link rel="stylesheet" href="static/style.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
- <div class="terminal-container">
11
- <div class="header">
12
- <h1>Python IDE</h1>
13
- <span>Running Python 3.x</span>
14
- </div>
15
- <div id="terminal" class="terminal">
16
- <div class="output">
17
- <div class="prompt">>>> </div>
18
- </div>
19
- <input type="text" id="user-input" class="input" placeholder="Type your Python code here..." />
20
  </div>
21
  </div>
 
 
 
 
22
 
23
- <script src="static/script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </body>
25
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Python Terminal</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #1e1e1e;
11
+ color: #c7c7c7;
12
+ margin: 0;
13
+ padding: 0;
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ height: 100vh;
18
+ }
19
+ .terminal {
20
+ width: 80%;
21
+ height: 70%;
22
+ background: #2e2e2e;
23
+ border-radius: 8px;
24
+ padding: 15px;
25
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
26
+ display: flex;
27
+ flex-direction: column;
28
+ }
29
+ .terminal-output {
30
+ flex: 1;
31
+ background: #1e1e1e;
32
+ padding: 10px;
33
+ border-radius: 5px;
34
+ overflow-y: auto;
35
+ margin-bottom: 10px;
36
+ white-space: pre-wrap;
37
+ }
38
+ .terminal-input {
39
+ display: flex;
40
+ }
41
+ input {
42
+ flex: 1;
43
+ padding: 10px;
44
+ border-radius: 5px;
45
+ border: 1px solid #444;
46
+ background: #1e1e1e;
47
+ color: #c7c7c7;
48
+ }
49
+ button {
50
+ margin-left: 10px;
51
+ padding: 10px 20px;
52
+ border: none;
53
+ border-radius: 5px;
54
+ background: #0078d4;
55
+ color: white;
56
+ cursor: pointer;
57
+ }
58
+ button:hover {
59
+ background: #005bb5;
60
+ }
61
+ </style>
62
  </head>
63
  <body>
64
+ <div class="terminal">
65
+ <div id="output" class="terminal-output">Python Terminal Ready...</div>
66
+ <div class="terminal-input">
67
+ <input type="text" id="code-input" placeholder="Enter Python code here..." />
68
+ <button onclick="executeCode()">Run</button>
 
 
 
 
 
69
  </div>
70
  </div>
71
+ <script>
72
+ function executeCode() {
73
+ const codeInput = document.getElementById("code-input");
74
+ const outputDiv = document.getElementById("output");
75
 
76
+ fetch("/execute", {
77
+ method: "POST",
78
+ headers: { "Content-Type": "application/json" },
79
+ body: JSON.stringify({ code: codeInput.value }),
80
+ })
81
+ .then(response => response.json())
82
+ .then(data => {
83
+ outputDiv.innerHTML += `\n> ${codeInput.value}\n${data.result}`;
84
+ outputDiv.scrollTop = outputDiv.scrollHeight; // Auto-scroll to bottom
85
+ codeInput.value = ""; // Clear input field
86
+ })
87
+ .catch(error => {
88
+ outputDiv.innerHTML += `\nError: ${error}`;
89
+ outputDiv.scrollTop = outputDiv.scrollHeight;
90
+ });
91
+ }
92
+ </script>
93
  </body>
94
  </html>