Repo-Mirror/cloudflare-error-page
9
0
Fork 0
mirror of https://github.com/donlon/cloudflare-error-page.git synced 2025-12-19 14:59:28 +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": {
"status": "ok",
"location": "example.com",
"status_text": "Just Working"
"status_text": "Almost Working"
},
"error_source": "host",
"what_happened": "This site is still working. And it looks great.",
@@ -383,13 +383,16 @@
})()
</script>
<style>
body {
zoom: 90%;
}
/* Layout: editor + preview */
.app {
display: flex;
flex-direction: column;
gap: 1rem;
height: 100vh;
padding: 0.8rem;
/* padding: 0.8rem; */
}
/* On md and up, arrange horizontally: editor left, preview right */
@@ -425,7 +428,7 @@
background: #fff;
border: 1px solid #e3e6ea;
border-radius: .5rem;
padding: 0.8rem;
padding: 0.8rem 0;
min-height: 100%;
}
@@ -513,6 +516,8 @@
</select>
</div>
<hr>
<form id="editorForm" class="needs-validation" novalidate>
<!-- Basic properties -->
<div class="mb-3">
@@ -541,35 +546,7 @@
</div>
</div>
<!-- More information -->
<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>
<hr>
<!-- Status blocks -->
<div class="mb-3">
@@ -610,7 +587,7 @@
</div>
<div class="form-row">
<label for="browser_status_text">Status text</label>
<label for="browser_status_text">Status Text</label>
<div class="control">
<input id="browser_status_text" class="form-control form-control-sm" />
</div>
@@ -653,7 +630,7 @@
</div>
<div class="form-row">
<label for="cloudflare_status_text">Status text</label>
<label for="cloudflare_status_text">Status Text</label>
<div class="control">
<input id="cloudflare_status_text" class="form-control form-control-sm" />
</div>
@@ -695,7 +672,7 @@
</div>
<div class="form-row">
<label for="host_status_text">Status text</label>
<label for="host_status_text">Status Text</label>
<div class="control">
<input id="host_status_text" class="form-control form-control-sm" />
</div>
@@ -703,6 +680,35 @@
</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>
<div class="control">
<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 -->
<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>
<div class="text-muted small">Preview updates automatically on change</div>
</div>
<iframe id="previewFrame" class="preview-frame" sandbox="allow-same-origin allow-popups allow-forms"></iframe>