Repo-Mirror/cloudflare-error-page
9
0
Fork 0
mirror of https://github.com/donlon/cloudflare-error-page.git synced 2025-12-20 15:29:29 +00:00
Code Issues Releases Activity

editor: update editor UI

Browse Source
This commit is contained in:
Anthony Donlon
2025-11-20 08:36:01 +08:00
parent f43bcc89be
commit acd4396651
1 changed files with 42 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
editor/resources/index.html
View File

@@ -131,7 +131,7 @@
"host_status": { "host_status": {
"status": "ok", "status": "ok",
"location": "example.com", "location": "example.com",
"status_text": "Just Working" "status_text": "Almost Working"
}, },
"error_source": "host", "error_source": "host",
"what_happened": "This site is still working. And it looks great.", "what_happened": "This site is still working. And it looks great.",
@@ -383,13 +383,16 @@
})() })()
</script> </script>
<style> <style>
body {
zoom: 90%;
}
/* Layout: editor + preview */ /* Layout: editor + preview */
.app { .app {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
height: 100vh; height: 100vh;
padding: 0.8rem; /* padding: 0.8rem; */
} }
/* On md and up, arrange horizontally: editor left, preview right */ /* On md and up, arrange horizontally: editor left, preview right */
@@ -425,7 +428,7 @@
background: #fff; background: #fff;
border: 1px solid #e3e6ea; border: 1px solid #e3e6ea;
border-radius: .5rem; border-radius: .5rem;
padding: 0.8rem; padding: 0.8rem 0;
min-height: 100%; min-height: 100%;
} }
@@ -513,6 +516,8 @@
</select> </select>
</div> </div>
<hr>
<form id="editorForm" class="needs-validation" novalidate> <form id="editorForm" class="needs-validation" novalidate>
<!-- Basic properties --> <!-- Basic properties -->
<div class="mb-3"> <div class="mb-3">
@@ -541,35 +546,7 @@
</div> </div>
</div> </div>
<!-- More information --> <hr>
<div class="mt-3 mb-3">
<h6 class="mb-2">Visit ... for more information</h6>
<div class="status-block">
<div class="form-row">
<label>Hidden</label>
<div class="control d-flex align-items-center gap-2">
<input id="more_hidden" class="form-check-input" type="checkbox" />
<!-- <small class="text-muted">If checked, the "visit ..." line is hidden</small> -->
</div>
</div>
<div class="form-row">
<label for="more_text">Text</label>
<div class="control">
<input id="more_text" class="form-control form-control-sm" placeholder="cloudflare.com" />
</div>
</div>
<div class="form-row">
<label for="more_link">Link</label>
<div class="control">
<input id="more_link" class="form-control form-control-sm"
placeholder="https://www.cloudflare.com/" />
</div>
</div>
</div>
</div>
<!-- Status blocks --> <!-- Status blocks -->
<div class="mb-3"> <div class="mb-3">
@@ -610,7 +587,7 @@
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="browser_status_text">Status text</label> <label for="browser_status_text">Status Text</label>
<div class="control"> <div class="control">
<input id="browser_status_text" class="form-control form-control-sm" /> <input id="browser_status_text" class="form-control form-control-sm" />
</div> </div>
@@ -653,7 +630,7 @@
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="cloudflare_status_text">Status text</label> <label for="cloudflare_status_text">Status Text</label>
<div class="control"> <div class="control">
<input id="cloudflare_status_text" class="form-control form-control-sm" /> <input id="cloudflare_status_text" class="form-control form-control-sm" />
</div> </div>
@@ -695,7 +672,7 @@
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="host_status_text">Status text</label> <label for="host_status_text">Status Text</label>
<div class="control"> <div class="control">
<input id="host_status_text" class="form-control form-control-sm" /> <input id="host_status_text" class="form-control form-control-sm" />
</div> </div>
@@ -703,6 +680,35 @@
</div> </div>
</div> </div>
<div class="mt-3 mb-3">
<h6 class="mb-2">Visit ... for more information</h6>
<div class="status-block">
<div class="form-row">
<label>Hidden</label>
<div class="control d-flex align-items-center gap-2">
<input id="more_hidden" class="form-check-input" type="checkbox" />
<!-- <small class="text-muted">If checked, the "visit ..." line is hidden</small> -->
</div>
</div>
<div class="form-row">
<label for="more_text">Text</label>
<div class="control">
<input id="more_text" class="form-control form-control-sm" placeholder="cloudflare.com" />
</div>
</div>
<div class="form-row">
<label for="more_link">Link</label>
<div class="control">
<input id="more_link" class="form-control form-control-sm"
placeholder="https://www.cloudflare.com/" />
</div>
</div>
</div>
</div>
<label for="what_happened" class="fw-semibold">What happened?</label> <label for="what_happened" class="fw-semibold">What happened?</label>
<div class="control"> <div class="control">
<textarea id="what_happened" class="form-control compact" placeholder="There is an internal server error on Cloudflare's network. <textarea id="what_happened" class="form-control compact" placeholder="There is an internal server error on Cloudflare's network.
@@ -764,9 +770,8 @@
<!-- Preview column --> <!-- Preview column -->
<div class="preview"> <div class="preview">
<div class="d-flex justify-content-between align-items-center mb-1"> <div class="d-flex justify-content-between align-items-center mb-1" style="padding: 0 0.8em;">
<h6><strong>Preview</strong></h6> <h6><strong>Preview</strong></h6>
<div class="text-muted small">Preview updates automatically on change</div>
</div> </div>
<iframe id="previewFrame" class="preview-frame" sandbox="allow-same-origin allow-popups allow-forms"></iframe> <iframe id="previewFrame" class="preview-frame" sandbox="allow-same-origin allow-popups allow-forms"></iframe>