<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Micro HTML Editor</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50vh 50vh;
gap: 10px;
padding: 20px;
background-color: #f4f7f6;
margin: 0;
}
.section {
background: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
}
h2 { margin-top: 0; font-size: 1rem; color: #555; text-transform: uppercase; letter-spacing: 1px; }
/* The Input Box */
textarea {
flex-grow: 1;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
font-family: 'Courier New', Courier, monospace;
resize: none;
outline: none;
}
/* The Resulting HTML Document */
#documentPreview {
flex-grow: 1;
border: 1px solid #eee;
padding: 10px;
overflow-y: auto;
background: #fff;
}
/* The Visualization Area (Raw Code) */
#codeVisualizer {
grid-column: span 2;
background: #2d2d2d;
color: #ae81ff;
padding: 15px;
margin: 0;
border-radius: 8px;
overflow-y: auto;
font-family: 'Courier New', Courier, monospace;
white-space: pre-wrap;
}
.stabilizer-tag {
color: #66d9ef;
font-weight: bold;
}
</style>
</head>
<body>
<div class="section" style="grid-column: span 2;">
<h2>Useful HTML Tags (The Library of Potentials)</h2>
<textarea id="suggestionBox" readonly style="background-color: #f9f9f9; color: #333;">
<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>
<mark>Highlighted Text</mark>
<span style="color: red;">Text in Red</span>
<span style="color: blue;">Text in Blue</span>
<span style="color: green;">Text in Green</span>
<span style="font-family: Arial; font-size: 12pt;">Text in Arial 12pt</span>
<span style="font-family: 'Courier New'; font-size: 10pt;">Text in Courier 10pt</span>
<span style="font-family: Georgia; font-size: 16pt;">Elegant Georgia 16pt</span>
<hr> <blockquote>This is a blockquote for citations.</blockquote>
<p style="text-align: center;">Centered Paragraph</p>
</textarea>
</div>
<div class="section">
<h2>Input</h2>
<textarea id="htmlInput" placeholder="Enter HTML here... e.g., <p>Hello World</p>"></textarea>
</div>
<div class="section">
<h2>HTML Document</h2>
<div id="documentPreview"></div>
</div>
<div class="section" style="grid-column: span 2;">
<h2>JS Visualization</h2>
<pre id="codeVisualizer">Waiting for input...</pre>
</div>
<script>
const input = document.getElementById('htmlInput');
const preview = document.getElementById('documentPreview');
const visualizer = document.getElementById('codeVisualizer');
input.addEventListener('input', () => {
const content = input.value;
// 1. Manifesting the HTML reality
preview.innerHTML = content;
// 2. Visualizing the structure
// We use a small regex to highlight tags for that "lucid" feel
if (content.length > 0) {
const highlighted = content
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/(<\/?[a-z1-6]+>)/gi, '<span class="stabilizer-tag">$1</span>');
visualizer.innerHTML = highlighted;
} else {
visualizer.textContent = "Waiting for input...";
}
});
</script>
</body>
</html>