diff --git a/index.html b/index.html
index 6bf5ede..1da8c3a 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,14 @@
diff --git a/script.js b/script.js
index e279c14..55f92eb 100644
--- a/script.js
+++ b/script.js
@@ -342,7 +342,19 @@
// ===== Resize =====
window.addEventListener('resize', updateLivePreview);
+ // ===== Mode toggle =====
+ function setMode(mode) {
+ document.body.className = mode === 'preview' ? 'mode-preview' : 'mode-edit';
+ $('btnEdit').classList.toggle('active', mode === 'edit');
+ $('btnPreview').classList.toggle('active', mode === 'preview');
+ requestAnimationFrame(updateLivePreview);
+ }
+
+ $('btnEdit').addEventListener('click', () => setMode('edit'));
+ $('btnPreview').addEventListener('click', () => setMode('preview'));
+
// ===== Init =====
+ setMode('edit');
buildCornerInputs();
updateAll();
})();
\ No newline at end of file
diff --git a/style.css b/style.css
index 22b70e0..0bf1a7c 100644
--- a/style.css
+++ b/style.css
@@ -29,6 +29,10 @@ body {
header {
padding: 16px 24px;
border-bottom: 1px solid var(--border);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
}
header h1 {
font-size: 18px;
@@ -41,6 +45,37 @@ header p {
margin-top: 4px;
}
+.header-left {
+ min-width: 0;
+}
+
+.mode-toggle {
+ display: flex;
+ gap: 0;
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ overflow: hidden;
+ flex-shrink: 0;
+}
+
+.mode-btn {
+ padding: 6px 18px;
+ border: none;
+ background: var(--panel);
+ color: #8b949e;
+ font-size: 13px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background 0.15s, color 0.15s;
+}
+.mode-btn:hover {
+ color: var(--text);
+}
+.mode-btn.active {
+ background: var(--accent);
+ color: #fff;
+}
+
main {
display: grid;
grid-template-columns: 1fr 340px;
@@ -281,6 +316,28 @@ main {
font-style: italic;
}
+body.mode-edit .left-col .panel:first-child,
+body.mode-edit .right-col {
+ display: flex;
+}
+body.mode-edit .left-col .panel:last-child {
+ display: none;
+}
+body.mode-preview .left-col .panel:first-child,
+body.mode-preview .right-col {
+ display: none;
+}
+
+body.mode-preview main {
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+}
+body.mode-preview .left-col {
+ max-width: 900px;
+ width: 100%;
+}
+
@media (max-width: 900px) {
main {
grid-template-columns: 1fr;