Add a live preview pane to Gateway Defaults for the themed page and Custom HTML (v0.11.91)
This commit is contained in:
marvin
@@ -47,8 +47,34 @@ function renderDefaultSettings() {
|
||||
if (!document.querySelector("#default-site-help")) { const help = document.createElement("p"); help.id = "default-site-help"; help.className = "muted"; help.textContent = "The Default Site handles unknown HTTP hostnames. HTTPS requests still require a matching host and certificate."; form.prepend(help); }
|
||||
for (const key of ["mode","title","message","redirectUrl","redirectCode","customHtml"]) if (form.elements[key] && value[key] !== undefined) form.elements[key].value = value[key];
|
||||
form.elements.preservePath.checked = value.preservePath !== false;
|
||||
renderDefaultSitePreview();
|
||||
}
|
||||
|
||||
// Keep this HTML template in sync with the themed-page literal inside renderDefaultSiteHtml()
|
||||
// in src/server.js -- duplicated here so the live preview below renders instantly, without a
|
||||
// round trip to the server, on every keystroke. If the server template ever changes, this must
|
||||
// be updated to match or the preview will silently drift from what visitors actually see.
|
||||
function defaultSiteThemedHtml(title, message) {
|
||||
const safeTitle = extendedEscape(title);
|
||||
const safeMessage = extendedEscape(message);
|
||||
return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="dark light"><title>${safeTitle}</title><style>:root{color-scheme:dark light;--bg:#08101d;--card:#101a2b;--line:#25344c;--text:#eef4ff;--muted:#95a4ba;--green:#62e6a7}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 0,#163829 0,transparent 42%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}.card{width:min(620px,100%);padding:44px;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--card) 94%,transparent);box-shadow:0 28px 80px #0006}.mark{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:#17352a;color:var(--green);font-weight:900}.eyebrow{margin:28px 0 10px;color:var(--green);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}h1{margin:0;font-size:clamp(34px,7vw,56px);letter-spacing:-.05em;line-height:1.02}p{color:var(--muted);font-size:17px;line-height:1.65;margin:20px 0 0}.foot{padding-top:28px;margin-top:30px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}@media(prefers-color-scheme:light){:root{--bg:#f3f6fa;--card:#fff;--line:#d6dfeb;--text:#132033;--muted:#637188;--green:#138a5b}}</style></head><body><main class="card"><div class="mark">SG</div><div class="eyebrow">Site Gateway</div><h1>${safeTitle}</h1><p>${safeMessage}</p><div class="foot">Host. Proxy. Secure.</div></main></body></html>`;
|
||||
}
|
||||
|
||||
function renderDefaultSitePreview() {
|
||||
const form = document.querySelector("#default-site-form"), frame = document.querySelector("#default-site-preview-frame"), note = document.querySelector("#default-site-preview-note");
|
||||
if (!form || !frame || !note) return;
|
||||
const mode = form.elements.mode.value;
|
||||
if (mode === "abort") { frame.closest(".default-site-preview-frame-wrap").classList.add("hidden"); note.classList.remove("hidden"); note.textContent = "No page is shown for this mode \u2014 the connection is closed immediately."; return; }
|
||||
if (mode === "redirect") { frame.closest(".default-site-preview-frame-wrap").classList.add("hidden"); note.classList.remove("hidden"); const destination = form.elements.redirectUrl.value.trim(); note.textContent = destination ? `No page is shown for this mode \u2014 visitors are redirected to ${destination}.` : "No page is shown for this mode \u2014 enter a redirect destination above."; return; }
|
||||
frame.closest(".default-site-preview-frame-wrap").classList.remove("hidden"); note.classList.add("hidden");
|
||||
if (mode === "custom") { frame.srcdoc = form.elements.customHtml.value || "<p style=\"font:14px sans-serif;color:#95a4ba;padding:20px\">Enter Custom HTML above to preview it here.</p>"; return; }
|
||||
const title = form.elements.title.value || (mode === "welcome" ? "Gateway ready" : "Route not found");
|
||||
const message = form.elements.message.value || "The gateway is responding, but this address has not been configured.";
|
||||
frame.srcdoc = defaultSiteThemedHtml(title, message);
|
||||
}
|
||||
document.querySelector("#default-site-form")?.addEventListener("input", renderDefaultSitePreview);
|
||||
document.querySelector("#default-site-form")?.addEventListener("change", renderDefaultSitePreview);
|
||||
|
||||
function renderHealthSettings() {
|
||||
if (!state.settings) return; const form = document.querySelector("#health-settings-form"), value = state.settings.certificateHealth || {};
|
||||
for (const key of ["warningDays","criticalDays","staleMinutes"]) if (value[key] !== undefined) form.elements[key].value = value[key];
|
||||
|
||||
+14
-5
File diff suppressed because one or more lines are too long
@@ -52,7 +52,7 @@ main{padding-top:24px}.utility-bar{display:flex;align-items:center;justify-conte
|
||||
@media(max-width:600px){.icon-results{grid-template-columns:repeat(3,minmax(0,1fr))}.icon-picker .dialog-actions{flex-wrap:wrap}.icon-picker .dialog-actions button:first-child{width:100%}}
|
||||
|
||||
/* Administration, documentation, redirects, and progressive disclosure */
|
||||
.aside-utilities{margin-top:auto;padding:16px 0 14px;border-top:1px solid var(--line);display:grid;gap:4px}.aside-utilities button{width:100%;border:0;border-radius:10px;padding:11px 12px;text-align:left;background:transparent;color:var(--muted);cursor:pointer}.aside-utilities button:hover,.aside-utilities button.nav-active{background:var(--panel2);color:var(--text)}.aside-footer{margin-top:0}.admin-tabs{display:flex;gap:7px;margin-bottom:22px;padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:auto}.admin-tabs button{width:auto;white-space:nowrap;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.admin-tabs .tab-active{background:var(--panel2);color:var(--text)}.settings-panel{max-width:980px}.settings-panel>h2{margin:0 0 6px}.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.settings-form>label:has(textarea),.settings-form>.dialog-actions,.settings-form>.error{grid-column:1/-1}.settings-form.compact-grid{grid-template-columns:repeat(4,1fr)}.settings-form.compact-grid .check-control,.settings-form.compact-grid .dialog-actions{grid-column:auto}textarea{display:block;width:100%;min-height:110px;margin-top:7px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#0b1525;color:var(--text);font:inherit;resize:vertical;outline:none}textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(98,230,167,.1)}.code-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;min-height:150px}.callout{display:flex;gap:10px;margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-size:.78rem}.callout span{color:var(--muted)}.row-actions{display:flex!important;grid-auto-flow:column!important;justify-content:end;gap:7px}.row-actions .button{padding:8px 10px;font-size:.7rem;text-decoration:none}.backup-row{grid-template-columns:auto minmax(220px,1.5fr) 1fr .7fr auto}.padded{padding:22px}.redirect-card .site-icon{background:#163c35;color:var(--green)}.redirect-card .card-footer{gap:12px}.redirect-card .button{padding:7px 9px;font-size:.68rem}.chip{padding:5px 8px;border-radius:999px;background:var(--panel2);color:var(--muted);font-size:.68rem}details{margin-top:18px;border:1px solid var(--line);border-radius:12px;background:rgba(8,16,29,.28)}summary{padding:14px 16px;color:var(--text);font-weight:750;cursor:pointer}.details-body{padding:0 16px 16px;border-top:1px solid var(--line)}.subform{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:12px}.docs{display:grid;grid-template-columns:260px 1fr;gap:24px}.doc-search{position:sticky;top:20px;align-self:start;margin:0}.docs-content{display:grid;gap:14px}.docs article{padding:25px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.docs article h2{margin:0 0 10px}.docs article p,.docs article li{color:var(--muted);line-height:1.65}.docs article code{color:var(--green)}:root[data-theme="light"] textarea{background:#fff}:root[data-theme="light"] details{background:#f6f9fc}
|
||||
.aside-utilities{margin-top:auto;padding:16px 0 14px;border-top:1px solid var(--line);display:grid;gap:4px}.aside-utilities button{width:100%;border:0;border-radius:10px;padding:11px 12px;text-align:left;background:transparent;color:var(--muted);cursor:pointer}.aside-utilities button:hover,.aside-utilities button.nav-active{background:var(--panel2);color:var(--text)}.aside-footer{margin-top:0}.admin-tabs{display:flex;gap:7px;margin-bottom:22px;padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:auto}.admin-tabs button{width:auto;white-space:nowrap;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.admin-tabs .tab-active{background:var(--panel2);color:var(--text)}.settings-panel{max-width:980px}.settings-panel-wide{max-width:1280px}.default-site-layout{display:grid;grid-template-columns:1fr minmax(280px,380px);gap:24px;align-items:start}.default-site-preview{margin-top:22px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);position:sticky;top:20px}.default-site-preview .eyebrow{margin:0}.default-site-preview small{display:block;margin-top:10px;color:var(--muted)}.default-site-preview-frame-wrap{margin-top:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#08101d;aspect-ratio:4/3}.default-site-preview-frame-wrap iframe{width:100%;height:100%;border:0;background:#08101d;display:block}@media(max-width:860px){.default-site-layout{grid-template-columns:1fr}.default-site-preview{position:static}}.settings-panel>h2{margin:0 0 6px}.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.settings-form>label:has(textarea),.settings-form>.dialog-actions,.settings-form>.error{grid-column:1/-1}.settings-form.compact-grid{grid-template-columns:repeat(4,1fr)}.settings-form.compact-grid .check-control,.settings-form.compact-grid .dialog-actions{grid-column:auto}textarea{display:block;width:100%;min-height:110px;margin-top:7px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#0b1525;color:var(--text);font:inherit;resize:vertical;outline:none}textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(98,230,167,.1)}.code-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;min-height:150px}.callout{display:flex;gap:10px;margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-size:.78rem}.callout span{color:var(--muted)}.row-actions{display:flex!important;grid-auto-flow:column!important;justify-content:end;gap:7px}.row-actions .button{padding:8px 10px;font-size:.7rem;text-decoration:none}.backup-row{grid-template-columns:auto minmax(220px,1.5fr) 1fr .7fr auto}.padded{padding:22px}.redirect-card .site-icon{background:#163c35;color:var(--green)}.redirect-card .card-footer{gap:12px}.redirect-card .button{padding:7px 9px;font-size:.68rem}.chip{padding:5px 8px;border-radius:999px;background:var(--panel2);color:var(--muted);font-size:.68rem}details{margin-top:18px;border:1px solid var(--line);border-radius:12px;background:rgba(8,16,29,.28)}summary{padding:14px 16px;color:var(--text);font-weight:750;cursor:pointer}.details-body{padding:0 16px 16px;border-top:1px solid var(--line)}.subform{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:12px}.docs{display:grid;grid-template-columns:260px 1fr;gap:24px}.doc-search{position:sticky;top:20px;align-self:start;margin:0}.docs-content{display:grid;gap:14px}.docs article{padding:25px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.docs article h2{margin:0 0 10px}.docs article p,.docs article li{color:var(--muted);line-height:1.65}.docs article code{color:var(--green)}:root[data-theme="light"] textarea{background:#fff}:root[data-theme="light"] details{background:#f6f9fc}
|
||||
@media(max-width:900px){.settings-form.compact-grid{grid-template-columns:1fr 1fr}.settings-form .form-grid{grid-template-columns:1fr 1fr}.backup-row{grid-template-columns:auto 1fr}.backup-row>div{grid-column:2}.row-actions{justify-content:start}.docs{grid-template-columns:1fr}.doc-search{position:static}}@media(max-width:600px){.settings-form,.settings-form.compact-grid{grid-template-columns:1fr}.settings-form .form-grid{grid-template-columns:1fr}.settings-form>*{grid-column:1!important}.admin-tabs{margin-left:-5px;margin-right:-5px}}
|
||||
#custom-certificate-fields,.custom-certificate-fields{display:none;margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:12px}.custom-certificate-visible{display:block!important}
|
||||
dialog{max-height:calc(100vh - 28px);overflow:auto}
|
||||
|
||||
Reference in New Issue
Block a user