<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lucid HTML Editor + Persistence</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; background: #eceff1; color: #37474f; }
.full-width { grid-column: 1 / span 2; }
.box { background: white; border: 1px solid #cfd8dc; padding: 15px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
textarea { width: 100%; height: 250px; font-family: 'Cascadia Code', 'Courier New', monospace; margin-top: 10px; border: 1px solid #b0bec5; border-radius: 4px; padding: 10px; box-sizing: border-box; }
.preview { border: 2px dashed #b0bec5; min-height: 200px; overflow: auto; padding: 15px; background: #fafafa; border-radius: 4px; }
.controls { display: flex; align-items: center; gap: 10px; }
button { padding: 10px 16px; cursor: pointer; background: #455a64; color: white; border: none; border-radius: 4px; font-weight: bold; transition: background 0.2s; }
button:hover { background: #263238; }
.status { font-size: 0.9em; color: #546e7a; font-style: italic; }
code { background: #f1f1f1; padding: 2px 6px; border-radius: 3px; color: #d32f2f; cursor: pointer; }
</style>
</head>
<body>
<div class="box full-width controls">
<button id="btnOpen">Open Existing File</button>
<button id="btnSaveAs" style="background: #00796b;">Create New File</button>
<span id="fileName" class="status">Status: Ghostly (Not linked to disk)</span>
</div>
<div class="box">
<h3>1. Suggestions</h3>
<p>Click to copy (manually):</p>
<code><b>bold</b></code><br><br>
<code><i>italic</i></code><br><br>
<code><u>underline</u></code><br><br>
<code><h1>Title</h1></code>
</div>
<div class="box">
<h3>2. Input (HTML Source)</h3>
<textarea id="txtInput" placeholder="Start typing... changes sync immediately to disk."></textarea>
</div>
<div class="box full-width">
<h3>3. Output (Rendered)</h3>
<div id="divOutput" class="preview"></div>
</div>
<script>
let fileHandle;
const btnOpen = document.getElementById('btnOpen');
const btnSaveAs = document.getElementById('btnSaveAs');
const txtInput = document.getElementById('txtInput');
const divOutput = document.getElementById('divOutput');
const fileNameDisp = document.getElementById('fileName');
// Helper to save data to the current fileHandle
async function writeToDisk() {
if (!fileHandle) return;
try {
const writable = await fileHandle.createWritable();
await writable.write(txtInput.value);
await writable.close();
} catch (e) {
console.error("Save failed. Permission likely revoked.", e);
}
}
// 1. Open and Read Existing File
btnOpen.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
txtInput.value = await file.text();
divOutput.innerHTML = txtInput.value;
fileNameDisp.textContent = `Syncing with: ${file.name}`;
});
// 2. Create and Save New File
btnSaveAs.addEventListener('click', async () => {
fileHandle = await window.showSaveFilePicker({
suggestedName: 'my-web-page.html',
types: [{ description: 'HTML Files', accept: {'text/html': ['.html']} }]
});
await writeToDisk();
fileNameDisp.textContent = `Syncing with: (New File)`;
});
// 3. Immediate Update (The Live Sync)
txtInput.addEventListener('input', () => {
divOutput.innerHTML = txtInput.value;
writeToDisk();
});
</script>
</body>
</html>