Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 60e25d8

Browse files
Update index.html
1 parent 1eb26ce commit 60e25d8

File tree

1 file changed

+176
-110
lines changed

1 file changed

+176
-110
lines changed

‎docs/index.html‎

Lines changed: 176 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -5,131 +5,197 @@
55
<title>Python Editor (Pyodide)</title>
66
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/codemirror.min.css" />
77
<style>
8-
body { font-family: Arial, sans-serif; margin: 20px; }
9-
.container { display: flex; justify-content: space-between; flex-wrap: wrap; }
10-
.draggable { border: 1px solid #ccc; margin: 10px; padding: 10px; background-color: #f9f9f9; }
11-
#editor { height: 300px; width: 45%; }
12-
#output { height: 300px; width: 45%; }
13-
#runBtn { margin-top: 10px; padding: 8px 16px; cursor: pointer; }
14-
#output { white-space: pre-wrap; }
15-
#drag-editor, #drag-output { cursor: move; }
16-
button { margin-top: 10px; padding: 8px 16px; }
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
height: 100vh;
13+
display: flex;
14+
flex-direction: column;
15+
}
16+
h2 {
17+
text-align: center;
18+
padding: 20px;
19+
background-color: #f4f4f4;
20+
margin: 0;
21+
}
22+
.welcome-message {
23+
background-color: #4CAF50;
24+
color: white;
25+
padding: 10px;
26+
text-align: center;
27+
font-size: 1.2em;
28+
font-weight: bold;
29+
}
30+
.container {
31+
display: flex;
32+
flex: 1; /* This makes it stretch to fill remaining space */
33+
flex-wrap: wrap;
34+
}
35+
.draggable {
36+
flex: 1;
37+
margin: 10px;
38+
padding: 10px;
39+
background-color: #f9f9f9;
40+
border: 1px solid #ccc;
41+
display: flex;
42+
flex-direction: column;
43+
justify-content: flex-start;
44+
min-width: 45%; /* This ensures the sections are at least 45% wide */
45+
height: calc(100vh - 70px); /* Adjust height to the screen */
46+
}
47+
#editor {
48+
height: calc(50vh - 20px);
49+
}
50+
#output {
51+
white-space: pre-wrap;
52+
padding: 10px;
53+
background-color: #f0f0f0;
54+
border-radius: 4px;
55+
flex-grow: 1;
56+
}
57+
#runBtn {
58+
padding: 8px 16px;
59+
cursor: pointer;
60+
align-self: center;
61+
background-color: #4CAF50;
62+
color: white;
63+
border: none;
64+
border-radius: 5px;
65+
}
66+
button:hover {
67+
background-color: #45a049;
68+
}
69+
@media screen and (max-width: 768px) {
70+
.container {
71+
flex-direction: column; /* Stack vertically on small screens */
72+
}
73+
.draggable {
74+
width: 100%; /* Make sections full width on small screens */
75+
}
76+
}
1777
</style>
1878
</head>
1979
<body>
2080

21-
<h2>Try Python in Your Browser</h2>
22-
<div class="container">
23-
<div id="drag-editor" class="draggable" style="width:45%; cursor: move;">
24-
<h3>Code Editor</h3>
25-
<textarea id="editor">print("Hello from Python!")</textarea><br>
81+
<!-- Welcome Message -->
82+
<div class="welcome-message">
83+
Welcome Learner, this is an interactive web Python interpreter by Bit and Pi channel
2684
</div>
2785

28-
<div id="drag-output" class="draggable" style="width:45%; cursor: move;">
29-
<h3>Output:</h3>
30-
<div id="output">...</div>
86+
<h2>Try Python in Your Browser</h2>
87+
88+
<div class="container">
89+
<div id="drag-editor" class="draggable" style="cursor: move;">
90+
<h3>Code Editor</h3>
91+
<textarea id="editor">print("Hello from Python!")</textarea><br>
92+
</div>
93+
94+
<div id="drag-output" class="draggable" style="cursor: move;">
95+
<h3>Output:</h3>
96+
<div id="output">...</div>
97+
</div>
3198
</div>
32-
</div>
33-
34-
<button id="runBtn">▶ Run Code</button>
35-
36-
<!-- CodeMirror -->
37-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/codemirror.min.js"></script>
38-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/mode/python/python.min.js"></script>
39-
40-
<!-- Pyodide -->
41-
<script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
42-
43-
<script>
44-
// Initialize CodeMirror
45-
const cm = CodeMirror.fromTextArea(document.getElementById("editor"), {
46-
mode: "python",
47-
lineNumbers: true,
48-
theme: "default",
49-
indentUnit: 4,
50-
tabSize: 4,
51-
});
52-
53-
let pyodideReady = false;
54-
let pyodide = null;
55-
56-
async function loadPyodideAndPackages() {
57-
pyodide = await loadPyodide();
58-
pyodideReady = true;
59-
document.getElementById("output").textContent = "✅ Pyodide loaded. You can now run Python code.";
60-
}
61-
62-
loadPyodideAndPackages();
63-
64-
// Function to redirect stdout to output div
65-
function redirectOutput() {
66-
pyodide.runPython(`
67-
import sys
68-
import io
69-
sys.stdout = io.StringIO() # Redirect stdout to capture print statements
70-
`);
71-
}
72-
73-
// Button click handler to run code
74-
document.getElementById("runBtn").addEventListener("click", async () => {
75-
const output = document.getElementById("output");
76-
77-
if (!pyodideReady) {
78-
output.textContent = "⏳ Please wait, Pyodide is still loading...";
79-
return;
99+
100+
<button id="runBtn">▶ Run Code</button>
101+
102+
<!-- CodeMirror -->
103+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/codemirror.min.js"></script>
104+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/mode/python/python.min.js"></script>
105+
106+
<!-- Pyodide -->
107+
<script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
108+
109+
<script>
110+
// Initialize CodeMirror
111+
const cm = CodeMirror.fromTextArea(document.getElementById("editor"), {
112+
mode: "python",
113+
lineNumbers: true,
114+
theme: "default",
115+
indentUnit: 4,
116+
tabSize: 4,
117+
});
118+
119+
let pyodideReady = false;
120+
let pyodide = null;
121+
122+
async function loadPyodideAndPackages() {
123+
pyodide = await loadPyodide();
124+
pyodideReady = true;
125+
document.getElementById("output").textContent = "✅ Pyodide loaded. You can now run Python code.";
80126
}
81127

82-
output.textContent = ""; // clear old output
83-
try {
84-
const code = cm.getValue(); // Get code from editor
85-
redirectOutput(); // Redirect stdout before running the code
86-
await pyodide.runPythonAsync(code);
87-
88-
// Get the output and display it
89-
const result = pyodide.runPython('sys.stdout.getvalue()'); // Capture the stdout
90-
if (result !== undefined && result !== null) {
91-
output.textContent = result.toString();
92-
} else {
93-
output.textContent = "✅ Code executed successfully.";
94-
}
95-
} catch (err) {
96-
output.textContent = `❌ Error:\n${err.message || err}`;
128+
loadPyodideAndPackages();
129+
130+
// Function to redirect stdout to output div
131+
function redirectOutput() {
132+
pyodide.runPython(`
133+
import sys
134+
import io
135+
sys.stdout = io.StringIO() // Redirect stdout to capture print statements
136+
`);
97137
}
98-
});
99-
100-
// Drag functionality (for customizability)
101-
let dragging = null;
102-
let offsetX = 0;
103-
let offsetY = 0;
104-
105-
function makeDraggable(element) {
106-
element.addEventListener('mousedown', (e) => {
107-
dragging = element;
108-
offsetX = e.clientX - element.getBoundingClientRect().left;
109-
offsetY = e.clientY - element.getBoundingClientRect().top;
110-
111-
document.addEventListener('mousemove', dragElement);
112-
document.addEventListener('mouseup', stopDragging);
138+
139+
// Button click handler to run code
140+
document.getElementById("runBtn").addEventListener("click", async () => {
141+
const output = document.getElementById("output");
142+
143+
if (!pyodideReady) {
144+
output.textContent = "⏳ Please wait, Pyodide is still loading...";
145+
return;
146+
}
147+
148+
output.textContent = ""; // clear old output
149+
try {
150+
const code = cm.getValue(); // Get code from editor
151+
redirectOutput(); // Redirect stdout before running the code
152+
await pyodide.runPythonAsync(code);
153+
154+
// Get the output and display it
155+
const result = pyodide.runPython('sys.stdout.getvalue()'); // Capture the stdout
156+
if (result !== undefined && result !== null) {
157+
output.textContent = result.toString();
158+
} else {
159+
output.textContent = "✅ Code executed successfully.";
160+
}
161+
} catch (err) {
162+
output.textContent = `❌ Error:\n${err.message || err}`;
163+
}
113164
});
114-
}
115165

116-
function dragElement(e) {
117-
if (dragging) {
118-
dragging.style.position = 'absolute';
119-
dragging.style.left = (e.clientX - offsetX) + 'px';
120-
dragging.style.top = (e.clientY - offsetY) + 'px';
166+
// Drag functionality (for customizability)
167+
let dragging = null;
168+
let offsetX = 0;
169+
let offsetY = 0;
170+
171+
function makeDraggable(element) {
172+
element.addEventListener('mousedown', (e) => {
173+
dragging = element;
174+
offsetX = e.clientX - element.getBoundingClientRect().left;
175+
offsetY = e.clientY - element.getBoundingClientRect().top;
176+
177+
document.addEventListener('mousemove', dragElement);
178+
document.addEventListener('mouseup', stopDragging);
179+
});
121180
}
122-
}
123181

124-
function stopDragging() {
125-
dragging = null;
126-
document.removeEventListener('mousemove', dragElement);
127-
document.removeEventListener('mouseup', stopDragging);
128-
}
182+
function dragElement(e) {
183+
if (dragging) {
184+
dragging.style.position = 'absolute';
185+
dragging.style.left = (e.clientX - offsetX) + 'px';
186+
dragging.style.top = (e.clientY - offsetY) + 'px';
187+
}
188+
}
189+
190+
function stopDragging() {
191+
dragging = null;
192+
document.removeEventListener('mousemove', dragElement);
193+
document.removeEventListener('mouseup', stopDragging);
194+
}
129195

130-
makeDraggable(document.getElementById('drag-editor'));
131-
makeDraggable(document.getElementById('drag-output'));
132-
</script>
196+
makeDraggable(document.getElementById('drag-editor'));
197+
makeDraggable(document.getElementById('drag-output'));
198+
</script>
133199

134200
</body>
135201
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /