Update index.html

index.html

@@ -14,10 +14,8 @@
 <meta property="og:description" content="JavaRunner is a mobile-friendly online Java IDE. Write, run, save, and download Java code. Perfect for beginners like Ragini Didi.">
 <meta property="og:type" content="website">
 
-<!-- Font -->
+<!-- Fonts & Icons -->
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
-
-<!-- Font Awesome -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
 
 <!-- CodeMirror -->
@@ -31,8 +29,8 @@
 <style>
 :root {
     --bg:#0b1b2b;
-    --glass: rgba(255,255,255,0.05);
-    --glass-hover: rgba(255,255,255,0.08);
+    --glass: rgba(255,255,255,0.06);
+    --glass-hover: rgba(255,255,255,0.1);
     --accent:#6c8cff;
     --accent-light:#8be5d0;
     --text:#e6eef8;
@@ -40,65 +38,67 @@
     --radius:14px;
     --shadow:0 8px 30px rgba(2,6,23,0.6);
 }
-*{box-sizing:border-box;}
+*{box-sizing:border-box;margin:0;padding:0;}
 body{
-    margin:0;
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(180deg, #071227, #0d1a2b);
+    font-family:'Inter',sans-serif;
+    background:linear-gradient(180deg, #071227, #0d1a2b);
     color:var(--text);
-    min-height:100vh;
     display:flex;
     flex-direction:column;
-    align-items:center;
+    min-height:100vh;
     padding:10px;
 }
-h1,h2,h3,h4,h5{margin:0;padding:0;}
-a{text-decoration:none;color:var(--accent);}
-a:hover{color:var(--accent-light);}
+
+/* Header */
+header{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    margin-bottom:12px;
+}
+.brand{
+    font-weight:700;
+    font-size:24px;
+    color:var(--accent);
+    display:flex;
+    align-items:center;
+    gap:10px;
+    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
+}
+.brand i{font-size:28px;}
 
 /* App container */
 .app{
     display:flex;
-    flex-direction:row;
+    flex:1;
     gap:12px;
-    width:100%;
     max-width:1200px;
-    flex:1;
+    width:100%;
 }
 .panel{
     background: var(--glass);
     backdrop-filter: blur(12px) saturate(1.1);
     border-radius: var(--radius);
+    border:1px solid rgba(255,255,255,0.08);
     padding:12px;
     box-shadow: var(--shadow);
-    border:1px solid rgba(255,255,255,0.08);
     transition: transform .2s ease, box-shadow .2s ease;
 }
 .panel:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(8,14,40,0.5);}
 
 /* Sidebar */
 .sidebar{
-    flex:0 0 240px;
+    flex:0 0 260px;
     display:flex;
     flex-direction:column;
     gap:10px;
-    height:calc(100vh - 40px);
+    height:calc(100vh - 60px);
 }
 .sidebar-header{
     display:flex;
     justify-content:space-between;
     align-items:center;
-    margin-bottom:8px;
 }
-.brand{
-    font-weight:700;
-    font-size:18px;
-    color:var(--accent);
-    display:flex;
-    align-items:center;
-    gap:8px;
-}
-.brand i{font-size:20px;}
 .file-list{
     flex:1;
     overflow-y:auto;
@@ -110,17 +110,17 @@ a:hover{color:var(--accent-light);}
     display:flex;
     justify-content:space-between;
     align-items:center;
-    padding:6px 8px;
+    padding:8px;
     border-radius:10px;
     cursor:pointer;
     background: rgba(255,255,255,0.02);
-    transition:0.15s ease;
+    transition:0.2s;
 }
 .file-item:hover{background:var(--glass-hover);}
 .file-item.active{background:rgba(108,140,255,0.12);color:#fff;}
 .file-actions{display:flex;gap:6px;align-items:center;}
 
-/* Editor area */
+/* Editor */
 .editor-area{
     flex:1;
     display:flex;
@@ -128,8 +128,17 @@ a:hover{color:var(--accent-light);}
     gap:8px;
     min-height:400px;
 }
-.cm-wrap{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.04);}
-.CodeMirror{height:calc(100vh - 240px);background: rgba(2,6,23,0.7); color:#e8f1ff; font-size:13px;}
+.cm-wrap{
+    border-radius:12px;
+    overflow:hidden;
+    border:1px solid rgba(255,255,255,0.04);
+}
+.CodeMirror{
+    height:calc(100vh - 300px);
+    background: rgba(2,6,23,0.7);
+    color:#e8f1ff;
+    font-size:14px;
+}
 
 /* Buttons */
 .btn{
@@ -142,7 +151,7 @@ a:hover{color:var(--accent-light);}
     display:inline-flex;
     align-items:center;
     gap:6px;
-    transition:all .15s ease;
+    transition: all .15s ease;
 }
 .btn:hover{color:#fff;transform:translateY(-2px);background:var(--glass-hover);}
 .btn-primary{
@@ -152,6 +161,8 @@ a:hover{color:var(--accent-light);}
     font-weight:700;
     border:none;
 }
+
+/* Console */
 .console{
     margin-top:6px;
     background: rgba(0,0,0,0.5);
@@ -168,27 +179,30 @@ footer{
     text-align:center;
     color:var(--muted);
     font-size:14px;
-    padding:12px 0 4px 0;
+    padding:12px 0 6px 0;
+}
+footer .note{
+    color:#c7d7ff;
+    font-weight:600;
 }
-footer .note{color:#c7d7ff;font-weight:600;}
 
 /* Responsive */
-@media (max-width:900px){
+@media(max-width:900px){
     .app{flex-direction:column;}
     .sidebar{width:100%;height:auto;order:2;}
     .editor-area{order:1;}
     .CodeMirror{height:300px;}
 }
-@media (max-width:480px){
+@media(max-width:480px){
     body{padding:6px;}
-    .brand{font-size:16px;}
+    .brand{font-size:20px;}
     .btn{padding:5px 8px;font-size:13px;}
     .btn-primary{padding:8px 10px;font-size:14px;}
 }
 </style>
 </head>
 <body>
-<header class="sidebar-header">
+<header>
     <div class="brand"><i class="fa-solid fa-rocket"></i> JavaRunner</div>
 </header>
 
@@ -238,10 +252,14 @@ const editor = CodeMirror(document.getElementById('editor'),{
     indentUnit:4,
     autoCloseBrackets:true,
     matchBrackets:true,
-    value:"class Main {\n    public static void main(String[] args) {\n        System.out.println(\"Hello Ragini!\");\n    }\n}"
+    value:`class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello Ragini Didi!");
+    }
+}`
 });
 
-// Resize editor for mobile
+// Resize editor dynamically
 function resizeEditor(){
     const wrap=document.querySelector('.CodeMirror');
     if(!wrap) return;
@@ -252,7 +270,7 @@ function resizeEditor(){
 window.addEventListener('resize',resizeEditor);
 setTimeout(resizeEditor,200);
 
-// ---------- Local storage ----------
+// ---------- Local storage & file management ----------
 let files=JSON.parse(localStorage.getItem('javaRunner_files')||'{}');
 let active=localStorage.getItem('javaRunner_active')||null;
 const fileListEl=document.getElementById('fileList');
@@ -281,9 +299,65 @@ function renderFiles(filter=''){
     });
 }
 
+// File actions
 function newFile(){
     let name=prompt('Filename (end with .java)','Main.java');
     if(!name) return;if(!name.endsWith('.java')){alert('Filename must end with .java');return;}
     if(files[name]){alert('File exists');return;}
     const classname=name.replace('.java','').replace(/[^A-Za-z0-9_]/g,'')||'Main';
-    files[name]=`class ${classname} {\n    public static void main(String[] args) {\
+    files[name]=`class ${classname} {\n    public static void main(String[] args) {\n        System.out.println("Hello Ragini Didi!");\n    }\n}`;
+    saveToStorage();
+    setActive(name);
+}
+
+function openFile(name){setActive(name);}
+function deleteFile(name){if(confirm(`Delete file ${name}?`)){delete files[name]; if(active===name) active=null; saveToStorage(); setActive(active);}}
+function saveFile(){if(!active){alert('No active file'); return;} files[active]=editor.getValue(); saveToStorage(); consoleEl.innerText='Saved successfully!';}
+function downloadFile(){if(!active){alert('No active file'); 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 formatCode(){const value=editor.getValue(); editor.setValue(value.split('\n').map(l=>l.trimStart()).join('\n'));}
+function cutText(){editor.execCommand('cut');}
+function copyText(){editor.execCommand('copy');}
+function pasteText(){editor.execCommand('paste');}
+
+// Run code (connect to backend /run API)
+async function runCode(){
+    if(!active){alert('No active file'); return;}
+    consoleEl.innerText='Running...';
+    const code=editor.getValue();
+    try{
+        const res=await fetch('/run', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({code})});
+        const data=await res.json();
+        consoleEl.innerText=data.output||data.error||'No output';
+    }catch(e){consoleEl.innerText='Error running code: '+e.message;}
+}
+
+// Search files
+document.getElementById('searchFile').addEventListener('input',e=>renderFiles(e.target.value));
+
+// Button events
+document.getElementById('newBtn').addEventListener('click',newFile);
+document.getElementById('saveBtn').addEventListener('click',saveFile);
+document.getElementById('downloadBtn').addEventListener('click',downloadFile);
+document.getElementById('formatBtn').addEventListener('click',formatCode);
+document.getElementById('cutBtn').addEventListener('click',cutText);
+document.getElementById('copyBtn').addEventListener('click',copyText);
+document.getElementById('pasteBtn').addEventListener('click',pasteText);
+document.getElementById('runBtn').addEventListener('click',runCode);
+
+// Import files
+const fileInput=document.getElementById('fileInput');
+document.getElementById('importBtn').addEventListener('click',()=>fileInput.click());
+fileInput.addEventListener('change',e=>{
+    const file=e.target.files[0];
+    if(!file) return;
+    const reader=new FileReader();
+    reader.onload=()=>{files[file.name]=reader.result; saveToStorage(); setActive(file.name);}
+    reader.readAsText(file);
+});
+
+// Initialize
+setActive(active);
+renderFiles();
+</script>
+</body>
+</html>