Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JavaRunner — Learn Java Online for Mobile & Desktop</title> | |
| <meta name="description" content="JavaRunner is a mobile and desktop-friendly interactive Java IDE for beginners. Learn Java safely on your device with auto-formatting, run code, and save files locally."> | |
| <meta name="keywords" content="Java IDE, Learn Java, Online Java Compiler, JavaRunner, Coding for Beginners, Ragini Didi"> | |
| <meta name="author" content="JavaRunner Team"> | |
| <!-- OpenGraph / LLM friendly --> | |
| <meta property="og:title" content="JavaRunner — Learn Java Online"/> | |
| <meta property="og:description" content="Interactive Java IDE for mobile and desktop. Write, run, save Java code locally. Perfect for beginners and students."/> | |
| <meta property="og:type" content="website"/> | |
| <!-- Font --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <!-- FontAwesome Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-t9f6b..." crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <!-- CodeMirror --> | |
| <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> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/edit/closebrackets.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/edit/matchbrackets.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/edit/indentation.min.js"></script> | |
| <style> | |
| :root{ | |
| --bg: #0f1720; | |
| --glass: rgba(255,255,255,0.05); | |
| --glass-dark: rgba(0,0,0,0.35); | |
| --accent: #6c8cff; | |
| --accent-light: #8be5d0; | |
| --muted: #9aa4b2; | |
| --card-shadow: 0 8px 30px rgba(2,6,23,0.6); | |
| --radius: 16px; | |
| } | |
| *{box-sizing:border-box;} | |
| html, body{margin:0;padding:0;font-family:Inter,sans-serif;background: linear-gradient(180deg,#071227 0%,#0d1a2b 100%); color:#e6eef8;} | |
| body{min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:12px;} | |
| h1,h2,h3,h4,h5,h6{margin:0;} | |
| .app { | |
| display:grid; | |
| grid-template-columns: 280px 1fr; | |
| gap:16px; | |
| width:100%; | |
| max-width:1200px; | |
| margin:0 auto; | |
| flex:1 1 auto; | |
| } | |
| /* Glass morph panel */ | |
| .panel { | |
| background: var(--glass); | |
| backdrop-filter: blur(10px) saturate(1.05); | |
| border-radius: var(--radius); | |
| border:1px solid rgba(255,255,255,0.08); | |
| padding:14px; | |
| display:flex; | |
| flex-direction:column; | |
| gap:12px; | |
| box-shadow: var(--card-shadow); | |
| transition: all 0.2s ease; | |
| } | |
| .panel:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(8,14,40,0.6); } | |
| /* File sidebar */ | |
| .files { | |
| display:flex; | |
| flex-direction:column; | |
| gap:12px; | |
| min-height:200px; | |
| } | |
| .files .top { display:flex; justify-content:space-between; align-items:center; gap:8px; } | |
| .brand { font-size:18px; font-weight:700; color: var(--accent); display:flex; align-items:center; gap:8px; } | |
| .brand i{font-size:20px; transform:translateY(-1px);} | |
| .file-list { display:flex; flex-direction:column; gap:6px; overflow:auto; max-height:calc(100vh - 220px); } | |
| .file-item { | |
| padding:8px; border-radius:12px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; background: rgba(255,255,255,0.02); | |
| transition: all .14s ease; | |
| } | |
| .file-item:hover{background: rgba(108,140,255,0.1);} | |
| .file-item.active{background: rgba(108,140,255,0.12); color:#fff;} | |
| /* Editor area */ | |
| .editor-area{display:flex; flex-direction:column; gap:10px;} | |
| .topbar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;} | |
| .title{font-size:14px;color:var(--muted);} | |
| .controls{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;} | |
| .btn{ | |
| padding:8px 10px; border-radius:12px; border:none; cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:6px; | |
| transition: all 0.15s ease; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color:var(--muted); | |
| } | |
| .btn:hover{transform:translateY(-2px);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,0.35);} | |
| .primary{background: linear-gradient(90deg,var(--accent), var(--accent-light)); color:#04253b; font-weight:700;} | |
| .secondary{background:transparent; border:1px solid rgba(255,255,255,0.05); color:var(--muted);} | |
| .cm-wrap{border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.02);} | |
| .CodeMirror{height:calc(100vh - 400px); background: var(--glass-dark); color:#e8f1ff; font-size:13px;} | |
| .console{background: rgba(0,0,0,0.4); border-radius:12px; padding:10px; font-family:monospace; color:#cfe7ff; max-height:160px; overflow:auto; border:1px solid rgba(255,255,255,0.04);} | |
| footer{text-align:center; font-size:13px; color:var(--muted); margin-top:14px;} | |
| .note{color:#c7d7ff; font-weight:600;} | |
| /* Responsive */ | |
| @media(max-width:1000px){.app{grid-template-columns:1fr;}} | |
| @media(max-width:600px){.CodeMirror{height:calc(100vh - 380px); font-size:12px;}} | |
| @media(max-width:400px){.topbar{flex-direction:column; align-items:flex-start;} .controls{flex-wrap:wrap;}} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <!-- File sidebar --> | |
| <div class="panel files" id="sidebar"> | |
| <div class="top"> | |
| <div class="brand"><i class="fa-solid fa-rocket"></i> JavaRunner</div> | |
| <div> | |
| <button class="btn" id="newBtn" title="New file"><i class="fa-solid fa-file-circle-plus"></i></button> | |
| </div> | |
| </div> | |
| <div class="file-list" id="fileList"></div> | |
| </div> | |
| <!-- Editor area --> | |
| <div class="panel editor-area"> | |
| <div class="topbar"> | |
| <div class="title">Interactive Java IDE — Mobile & Desktop Friendly</div> | |
| <div class="controls"> | |
| <button class="btn primary" id="runBtn"><i class="fa-solid fa-play"></i> Run</button> | |
| <button class="btn secondary" id="saveBtn"><i class="fa-solid fa-floppy-disk"></i> Save</button> | |
| <button class="btn secondary" id="downloadBtn"><i class="fa-solid fa-download"></i> Download</button> | |
| <button class="btn secondary" id="formatBtn"><i class="fa-solid fa-align-left"></i> Format</button> | |
| <button class="btn secondary" id="deleteBtn"><i class="fa-solid fa-trash"></i> Delete</button> | |
| </div> | |
| </div> | |
| <div class="cm-wrap" id="cmWrap"> | |
| <div id="editor"></div> | |
| </div> | |
| <div class="console" id="console">Console output will appear here.</div> | |
| </div> | |
| </div> | |
| <footer> | |
| Made with love for <span class="note">Ragini Didi 💖</span> — Happy Java Learning! | |
| </footer> | |
| <script> | |
| // ---------- CodeMirror ---------- | |
| const editor = CodeMirror(document.getElementById('editor'), { | |
| mode:"text/x-java", | |
| lineNumbers:true, | |
| tabSize:4, | |
| indentUnit:4, | |
| autoCloseBrackets:true, | |
| matchBrackets:true, | |
| theme:"default", | |
| value:`class Main { | |
| public static void main(String[] args) { | |
| System.out.println("Hello Ragini Didi! Welcome to JavaRunner"); | |
| } | |
| }` | |
| }); | |
| function resizeEditor(){ editor.setSize('100%', window.innerHeight-400); } | |
| window.addEventListener('resize',resizeEditor); | |
| setTimeout(resizeEditor,200); | |
| // Local file storage | |
| let files = JSON.parse(localStorage.getItem('java_runner_files')||'{}'); | |
| let active = localStorage.getItem('java_runner_active') || null; | |
| const fileListEl = document.getElementById('fileList'); | |
| const consoleEl = document.getElementById('console'); | |
| function saveToStorage(){ localStorage.setItem('java_runner_files',JSON.stringify(files)); } | |
| function setActive(name){ active=name; localStorage.setItem('java_runner_active',active); renderFiles(); editor.setValue(files[active]); } | |
| function renderFiles(){ fileListEl.innerHTML=''; Object.keys(files).forEach(f=>{const div=document.createElement('div');div.className='file-item'+(f===active?' active':''); div.innerText=f; div.onclick=()=>setActive(f); fileListEl.appendChild(div); }); } | |
| function newFile(){ const name='Main.java'; if(files[name]) { alert('File exists'); return;} files[name]=editor.getValue(); saveToStorage(); setActive(name);} | |
| function saveFile(){ if(!active)return; files[active]=editor.getValue(); saveToStorage(); consoleEl.innerText='Saved locally ✔';} | |
| function downloadFile(){ if(!active)return; const blob=new Blob([editor.getValue()],{type:'text/plain'}); const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download=active; a.click(); URL.revokeObjectURL(a.href);} | |
| function deleteFile(){ if(!active) return; if(confirm(`Delete ${active}?`)){ delete files[active]; saveToStorage(); active=null; editor.setValue(''); renderFiles(); }} | |
| document.getElementById('newBtn').onclick=newFile; | |
| document.getElementById('saveBtn').onclick=saveFile; | |
| document.getElementById('downloadBtn').onclick=downloadFile; | |
| document.getElementById('deleteBtn').onclick=deleteFile; | |
| document.getElementById('formatBtn').onclick=()=>{ editor.execCommand('selectAll'); editor.execCommand('indentAuto'); editor.execCommand('singleSelection');}; | |
| document.getElementById('runBtn').onclick=async()=>{ | |
| if(!active) return; saveFile(); consoleEl.innerText='Running...'; | |
| try{ | |
| const resp=await fetch('/run-java',{method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({code: editor.getValue(), filename: active})}); | |
| const data=await resp.json(); | |
| consoleEl.innerText=data.output||data.error||'No output'; | |
| }catch(e){ consoleEl.innerText='Error: '+e.message; } | |
| }; | |
| if(Object.keys(files).length===0) newFile(); else setActive(Object.keys(files)[0]); | |
| </script> | |
| </body> | |
| </html> |