JavaRunner / index.html
parthmax's picture
Create index.html
6d38145 verified
raw
history blame
4.89 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Java IDE (HF)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/clike/clike.min.js"></script>
<style>
body { display: flex; margin: 0; font-family: Arial; background: #121212; color: #eee; height: 100vh; }
#files { width: 200px; background: #1e1e1e; padding: 10px; border-right: 2px solid #333; overflow-y: auto; }
#files button { display: block; width: 100%; margin: 5px 0; padding: 8px; background: #333; border: none; color: white; cursor: pointer; border-radius: 5px; text-align: left; }
#files button.active { background: #4CAF50; }
#editor-container { flex: 1; display: flex; flex-direction: column; }
#editor { flex: 1; border-bottom: 2px solid #333; }
#controls { padding: 10px; background: #1e1e1e; display: flex; gap: 10px; }
button { border: none; padding: 10px; border-radius: 5px; cursor: pointer; }
#run { background: #4CAF50; color: white; }
#save { background: #2196F3; color: white; }
#download { background: #FF9800; color: white; }
#delete { background: #f44336; color: white; }
#output { padding: 10px; background: #222; white-space: pre-wrap; height: 150px; overflow-y: auto; }
</style>
</head>
<body>
<div id="files">
<h3>Files</h3>
<button onclick="newFile()">+ New File</button>
<div id="file-list"></div>
</div>
<div id="editor-container">
<div id="editor"></div>
<div id="controls">
<button id="run" onclick="runCode()">▶ Run</button>
<button id="save" onclick="saveFile()">💾 Save</button>
<button id="download" onclick="downloadFile()">⬇ Download</button>
<button id="delete" onclick="deleteFile()">🗑 Delete</button>
</div>
<pre id="output"></pre>
</div>
<script>
let editor = CodeMirror(document.getElementById("editor"), {
mode: "text/x-java",
theme: "default",
lineNumbers: true,
indentUnit: 4,
tabSize: 4
});
let files = JSON.parse(localStorage.getItem("javaFiles") || "{}");
let currentFile = null;
function renderFiles() {
let list = document.getElementById("file-list");
list.innerHTML = "";
Object.keys(files).forEach(name => {
let btn = document.createElement("button");
btn.textContent = name;
if (name === currentFile) btn.classList.add("active");
btn.onclick = () => openFile(name);
list.appendChild(btn);
});
}
function newFile() {
let name = prompt("Enter file name (with .java):", "Main.java");
if (!name.endsWith(".java")) return alert("File must end with .java");
if (files[name]) return alert("File already exists");
files[name] = "// New Java file\nclass " + name.replace(".java", "") + " {\n public static void main(String[] args) {\n System.out.println(\"Hello " + name + "!\");\n }\n}";
currentFile = name;
saveStorage();
renderFiles();
openFile(name);
}
function openFile(name) {
currentFile = name;
editor.setValue(files[name]);
renderFiles();
}
function saveFile() {
if (!currentFile) return alert("No file open");
files[currentFile] = editor.getValue();
saveStorage();
alert("✅ File saved");
}
function deleteFile() {
if (!currentFile) return;
if (confirm("Delete " + currentFile + "?")) {
delete files[currentFile];
currentFile = null;
saveStorage();
renderFiles();
editor.setValue("");
}
}
function downloadFile() {
if (!currentFile) return;
let blob = new Blob([editor.getValue()], {type: "text/plain"});
let link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = currentFile;
link.click();
}
async function runCode() {
if (!currentFile) return alert("No file open");
saveFile();
document.getElementById("output").innerText = "⏳ Running...";
const res = await fetch("/run-java", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({code: editor.getValue(), filename: currentFile})
});
const data = await res.json();
document.getElementById("output").innerText = data.output;
}
function saveStorage() {
localStorage.setItem("javaFiles", JSON.stringify(files));
}
// Load last state
renderFiles();
if (Object.keys(files).length > 0) {
currentFile = Object.keys(files)[0];
openFile(currentFile);
}
</script>
</body>
</html>