170 lines
3.7 KiB
HTML
170 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>MKScript Editor – {{model_name}}</title>
|
||
|
||
<!-- CodeMirror CSS -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/codemirror.min.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/theme/dracula.min.css">
|
||
|
||
<style>
|
||
body {
|
||
background: #282a36;
|
||
color: #f8f8f2;
|
||
font-family: 'Fira Code', monospace;
|
||
margin: 0;
|
||
padding: 20px;
|
||
}
|
||
|
||
h2 {
|
||
text-align: center;
|
||
color: #50fa7b;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
button {
|
||
margin: 5px 5px 5px 0;
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
background: #6272a4;
|
||
color: #f8f8f2;
|
||
font-weight: bold;
|
||
transition: 0.2s;
|
||
}
|
||
button:hover {
|
||
background: #50fa7b;
|
||
color: #282a36;
|
||
}
|
||
|
||
#editor-container {
|
||
margin-top: 10px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
border: 1px solid #6272a4;
|
||
}
|
||
|
||
.CodeMirror {
|
||
height: 400px;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.panel {
|
||
margin-top: 20px;
|
||
background: #44475a;
|
||
padding: 10px;
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.panel h3 {
|
||
margin: 0 0 5px 0;
|
||
font-size: 14px;
|
||
color: #ff79c6;
|
||
}
|
||
|
||
#output, #debug {
|
||
white-space: pre-wrap;
|
||
color: #f1fa8c;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h2>MKScript Editor – {{model_name}}</h2>
|
||
|
||
<div>
|
||
<button onclick="run()">▶ Uruchom</button>
|
||
<button onclick="check()">✓ Sprawdź</button>
|
||
<button onclick="downloadFile()">💾 Pobierz</button>
|
||
<!-- Wczytywanie pliku -->
|
||
<input type="file" id="upload" accept=".ql" onchange="uploadFile()">
|
||
|
||
<a href="/" style="color:#50fa7b; margin-left: 10px;">← Wróć</a>
|
||
</div>
|
||
|
||
<div id="editor-container">
|
||
<textarea id="code">
|
||
use mk;
|
||
|
||
int a = 5;
|
||
int b = 10;
|
||
|
||
int c = mk.add(a, b);
|
||
print(c);
|
||
</textarea>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<h3>Console Output</h3>
|
||
<pre id="output"></pre>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<h3>Debugger (zmienne)</h3>
|
||
<pre id="debug"></pre>
|
||
</div>
|
||
|
||
<!-- CodeMirror JS -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/codemirror.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/mode/python/python.min.js"></script>
|
||
|
||
<script>
|
||
const editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
||
lineNumbers: true,
|
||
mode: "python",
|
||
theme: "dracula",
|
||
matchBrackets: true,
|
||
indentUnit: 4,
|
||
tabSize: 4,
|
||
autofocus: true
|
||
});
|
||
|
||
async function run() {
|
||
const code = editor.getValue();
|
||
const res = await fetch("/run_script", {
|
||
method: "POST",
|
||
headers: {"Content-Type":"application/json"},
|
||
body: JSON.stringify({code})
|
||
});
|
||
const data = await res.json();
|
||
if(data.error){
|
||
document.getElementById("output").textContent = "ERROR: "+data.error;
|
||
document.getElementById("debug").textContent = "";
|
||
}else{
|
||
document.getElementById("output").textContent = data.output.join("\n");
|
||
document.getElementById("debug").textContent = JSON.stringify(data.variables,null,2);
|
||
}
|
||
}
|
||
|
||
function check(){
|
||
const code = editor.getValue();
|
||
if(!code.includes(";")) alert("Brak średników ;");
|
||
else alert("Składnia OK ✔");
|
||
}
|
||
|
||
function downloadFile(){
|
||
const blob = new Blob([editor.getValue()], {type:"text/plain"});
|
||
const a = document.createElement("a");
|
||
a.href = URL.createObjectURL(blob);
|
||
a.download = "{{model_name}}.ql";
|
||
a.click();
|
||
}
|
||
|
||
function uploadFile(){
|
||
const file = document.getElementById("upload").files[0];
|
||
if(!file) return;
|
||
const form = new FormData();
|
||
form.append("file", file);
|
||
fetch("/upload_script", {method:"POST", body:form})
|
||
.then(r => r.text())
|
||
.then(alert);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|