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

add simple editor UI and backend

Browse Source
This commit is contained in:
Anthony Donlon
2025-11-20 07:24:19 +08:00
parent f6b2947ec5
commit 4c6571d2f8
10 changed files with 1193 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

783
editor/resources/index.html Normal file
View File

@@ -0,0 +1,783 @@
<!-- SPDX-License-Identifier: MIT -->
<!--
!!!
!!! Note: This file is vibely generated, and could be very hard to maintain.
!!!
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Cloudflare Error Page Editor</title>
<script src="https://cdn.jsdelivr.net/npm/ejs@3.1.10/ejs.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script>
(async function () {
/*
Editor logic
- initialConfig: provided default config (from your JSON)
- render(): placeholder that generates HTML and writes to iframe.srcdoc
- inputs call render() on change
- "Open in new tab" opens the rendered HTML in a new window using a blob URL
*/
let template;
let postponeRendering = false;
fetch('template.ejs')
.then(response => {
if (!response.ok) {
alert('failed to fetch template');
}
return response.text(); // Returns a Promise
})
.then(templateContent => {
template = ejs.compile(templateContent)
if (postponeRendering) {
render()
}
})
const initialConfig = {
"html_title": "cloudflare.com | 500: Internal server error",
"title": "Internal server error",
"error_code": 500,
"more_information": {
"hidden": false,
"text": "cloudflare.com",
"link": "https://youtube.com/watch?v=dQw4w9WgXcQ"
},
"browser_status": {
"status": "ok",
"location": "You",
"name": "Browser",
"status_text": "Working"
},
"cloudflare_status": {
"status": "error",
"location": "Cloud",
"name": "Cloudflare",
"status_text": "Not Working"
},
"host_status": {
"status": "ok",
"location": "The Site",
"name": "Host",
"status_text": "Working"
},
"error_source": "host",
"what_happened": "There is an internal server error on Cloudflare's network.",
"what_can_i_do": "Please try again in a few minutes.",
"perf_sec_by": {
"text": "Cloudflare",
"link": "https://youtube.com/watch?v=dQw4w9WgXcQ"
}
};
// Demo presets (content brief — replace or expand as needed)
const PRESETS = {
"default": structuredClone(initialConfig),
"empty": {
"error_code": 500,
},
"catastrophic": {
"title": "Catastrophic infrastructure failure",
"error_code": 500,
"more_information": {
"text": "cloudflare.com",
"link": "https://youtube.com/watch?v=dQw4w9WgXcQ"
},
"browser_status": {
"status": "error",
"status_text": "Out of Memory"
},
"cloudflare_status": {
"status": "error",
"location": "Everywhere",
"status_text": "Not Working"
},
"host_status": {
"status": "error",
"location": "example.com",
"status_text": "On Fire"
},
"error_source": "cloudflare",
"what_happened": "There is a catastrophic failure.",
"what_can_i_do": "Please try again in a few years.",
"perf_sec_by": {
"text": "Cloudflare",
"link": "https://youtube.com/watch?v=dQw4w9WgXcQ"
}
},
"working": {
"title": "Web server is working",
"error_code": 200,
"more_information": {
"hidden": true
},
"browser_status": {
"status": "ok",
"status_text": "Seems Working"
},
"cloudflare_status": {
"status": "ok",
"status_text": "Often Working"
},
"host_status": {
"status": "ok",
"location": "example.com",
"status_text": "Just Working"
},
"error_source": "host",
"what_happened": "This site is still working. And it looks great.",
"what_can_i_do": "Visit the site before it crashes someday."
},
};
/* Utilities */
function $(id) { return document.getElementById(id); }
/* Fill form from config */
function loadConfig(cfg) {
$('html_title').value = cfg.html_title ?? '';
$('title').value = cfg.title ?? '';
$('error_code').value = cfg.error_code ?? '';
$('more_hidden').checked = !!(cfg.more_information && cfg.more_information.hidden);
$('more_text').value = cfg.more_information?.text ?? '';
$('more_link').value = cfg.more_information?.link ?? '';
$('browser_status').value = cfg.browser_status?.status ?? 'ok';
$('browser_location').value = cfg.browser_status?.location ?? '';
$('browser_name').value = cfg.browser_status?.name ?? '';
$('browser_status_text').value = cfg.browser_status?.status_text ?? '';
$('cloudflare_status').value = cfg.cloudflare_status?.status ?? 'ok';
$('cloudflare_location').value = cfg.cloudflare_status?.location ?? '';
$('cloudflare_name').value = cfg.cloudflare_status?.name ?? '';
$('cloudflare_status_text').value = cfg.cloudflare_status?.status_text ?? '';
$('host_status').value = cfg.host_status?.status ?? 'ok';
$('host_location').value = cfg.host_status?.location ?? '';
$('host_name').value = cfg.host_status?.name ?? '';
$('host_status_text').value = cfg.host_status?.status_text ?? '';
if (cfg.error_source === 'browser') $('err_browser').checked = true;
else if (cfg.error_source === 'cloudflare') $('err_cloudflare').checked = true;
else $('err_host').checked = true;
$('what_happened').value = cfg.what_happened ?? '';
$('what_can_i_do').value = cfg.what_can_i_do ?? '';
$('perf_text').value = cfg.perf_sec_by?.text ?? '';
$('perf_link').value = cfg.perf_sec_by?.link ?? '';
}
/* Read config from form inputs */
function readConfig() {
return {
html_title: $('html_title').value,
title: $('title').value,
error_code: Number($('error_code').value) || 0,
more_information: {
hidden: !!$('more_hidden').checked,
text: $('more_text').value,
link: $('more_link').value
},
browser_status: {
status: $('browser_status').value,
location: $('browser_location').value,
name: $('browser_name').value,
status_text: $('browser_status_text').value
},
cloudflare_status: {
status: $('cloudflare_status').value,
location: $('cloudflare_location').value,
name: $('cloudflare_name').value,
status_text: $('cloudflare_status_text').value
},
host_status: {
status: $('host_status').value,
location: $('host_location').value,
name: $('host_name').value,
status_text: $('host_status_text').value
},
error_source: (document.querySelector('input[name="error_source"]:checked') || { value: 'host' }).value,
what_happened: $('what_happened').value,
what_can_i_do: $('what_can_i_do').value,
perf_sec_by: {
text: $('perf_text').value,
link: $('perf_link').value
}
};
}
function formatUtcTimestamp() {
const d = new Date();
const year = d.getUTCFullYear();
const month = String(d.getUTCMonth() + 1).padStart(2, "0");
const day = String(d.getUTCDate()).padStart(2, "0");
const hours = String(d.getUTCHours()).padStart(2, "0");
const minutes = String(d.getUTCMinutes()).padStart(2, "0");
const seconds = String(d.getUTCSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} UTC`;
}
function renderEjs(params, use_cdn = true) {
return template({
params: params,
resources_use_cdn: use_cdn
})
}
/* Basic render: build HTML string from config and put into iframe.srcdoc */
function render() {
const cfg = readConfig();
window.lastCfg = cfg
if (!template) {
postponeRendering = true
return
}
cfg.time = formatUtcTimestamp()
cfg.ray_id = '0123456789abcdef'
cfg.client_ip = '1.1.1.1'
let pageHtml = renderEjs(cfg)
// Write into iframe
const iframe = $('previewFrame');
iframe.srcdoc = pageHtml;
// store last rendered HTML for "open in new tab"
lastRenderedHtml = pageHtml;
updateStatusBlockStyles();
}
/* Open in new tab: create blob and open */
let lastRenderedHtml = '';
function openInNewTab() {
if (!lastRenderedHtml) render();
const blob = new Blob([lastRenderedHtml], { type: 'text/html' });
const url = URL.createObjectURL(blob);
window.open(url, '_blank', 'noopener');
// revoke after some time to avoid memory leak
setTimeout(() => URL.revokeObjectURL(url), 15_000);
}
function createShareableLink() {
$('shareLink').value = ''
fetch('../s/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'parameters': window.lastCfg
})
})
.then(response => {
if (!response.ok) {
alert('failed to create link');
}
return response.json();
})
.then(result => {
if (result.status != 'ok') {
alert('failed to create link');
return
}
$('shareLink').value = result.url
})
}
function exportJSON() {
let content = JSON.stringify(lastCfg)
const file = new File([content], 'cloudflare-error-page-params.json', {
type: 'text/plain',
})
const link = document.createElement('a')
const url = URL.createObjectURL(file)
link.href = url
link.download = file.name
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
}
/* Wire up events */
document.addEventListener('DOMContentLoaded', () => {
// initialize form values from initialConfig
loadConfig(initialConfig);
render();
// On preset change, load preset and render
$('presetSelect').addEventListener('change', e => {
const p = e.target.value;
if (PRESETS[p]) loadConfig(PRESETS[p]);
render();
});
// Render / Open button handlers
// $('btnRender').addEventListener('click', e => { e.preventDefault(); render(); });
$('btnOpen').addEventListener('click', e => { e.preventDefault(); openInNewTab(); });
$('btnShare').addEventListener('click', e => { e.preventDefault(); createShareableLink() });
$('btnExport').addEventListener('click', e => { e.preventDefault(); exportJSON() });
$('btnCopyLink').addEventListener('click', () => {
const field = $('shareLink');
field.select();
field.setSelectionRange(0, field.value.length);
navigator.clipboard.writeText(field.value).then(() => {
// No notification required unless you want one
});
});
// Input change -> render
const inputs = document.querySelectorAll('#editorForm input, #editorForm textarea, #editorForm select');
inputs.forEach(inp => {
inp.addEventListener('input', debounce(() => {
// Update status block color classes for quick visual feedback in the editor
render();
}, 250));
// for radio change events (error_source)
if (inp.type === 'radio') inp.addEventListener('change', () => { render(); });
});
});
/* Update status block colors based on selected status and error_source */
function updateStatusBlockStyles() {
const browserOk = $('browser_status').value === 'ok';
const cfOk = $('cloudflare_status').value === 'ok';
const hostOk = $('host_status').value === 'ok';
setBlockClass('block_browser', browserOk ? 'status-ok' : 'status-error');
setBlockClass('block_cloudflare', cfOk ? 'status-ok' : 'status-error');
setBlockClass('block_host', hostOk ? 'status-ok' : 'status-error');
}
function setBlockClass(id, cls) {
const el = $(id);
if (!el) return;
el.classList.remove('status-ok', 'status-error');
el.classList.add(cls);
}
/* Simple debounce */
function debounce(fn, wait) {
let t;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn(...args), wait);
};
}
})()
</script>
<style>
/* Layout: editor + preview */
.app {
display: flex;
flex-direction: column;
gap: 1rem;
height: 100vh;
padding: 0.8rem;
}
/* On md and up, arrange horizontally: editor left, preview right */
@media (min-width: 768px) {
.app {
flex-direction: row;
align-items: stretch;
}
.editor {
flex: 0 0;
min-width: 380px;
overflow-y: auto;
}
.preview {
flex: 1 1 48%;
/* max-width: 48%; */
display: flex;
flex-direction: column;
}
}
/* On small screens use stacked layout: editor then iframe */
.editor {
background: #fff;
border: 1px solid #e3e6ea;
border-radius: .5rem;
padding: 0.8rem;
}
.preview {
background: #fff;
border: 1px solid #e3e6ea;
border-radius: .5rem;
padding: 0.8rem;
min-height: 100%;
}
/* Compact form: label and control same row */
.form-row {
display: flex;
gap: .3rem;
align-items: center;
margin-bottom: .6rem;
}
.form-row>label {
min-width: 6rem;
max-width: 12rem;
margin-bottom: 0;
font-weight: 600;
}
.form-row>.control {
flex: 1;
}
/* Status block styling */
.status-block {
border: 1px solid #cfeadd;
border-radius: .375rem;
padding: .75rem;
margin-bottom: .5rem;
}
.status-ok {
background: #e9f7ef;
border: 1px solid #cfeadd;
}
.status-error {
background: #fff5f5;
border: 1px solid #f3c2c2;
}
/* Iframe styling */
iframe.preview-frame {
width: 100%;
height: 100%;
border: 1px solid #ddd;
flex: 1 1 auto;
min-height: 360px;
border-radius: .375rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
/* Controls toolbar */
.toolbar {
display: flex;
gap: .5rem;
align-items: center;
justify-content: space-between;
margin-bottom: .75rem;
}
/* Compact textarea resizing */
textarea.compact {
min-height: 80px;
resize: vertical;
}
</style>
</head>
<body class="bg-light">
<div class="container-fluid h-100">
<div class="app">
<!-- Editor column -->
<div class="editor">
<h5 class="form-row">Cloudflare Error Page Editor</h5>
<hr>
<div class="form-row mb-3">
<label for="presetSelect">Preset:</label>
<select id="presetSelect" class="form-select form-select-sm">
<option value="default">Default</option>
<option value="empty">Empty</option>
<option value="catastrophic">Catastrophic failure</option>
<option value="working">Server working</option>
</select>
</div>
<form id="editorForm" class="needs-validation" novalidate>
<!-- Basic properties -->
<div class="mb-3">
<!-- <h6 class="mb-2">Page</h6> -->
<div class="form-row">
<label for="html_title">HTML Title</label>
<div class="control">
<input id="html_title" class="form-control form-control-sm"
placeholder="cloudflare.com | 500: Internal server error" />
</div>
</div>
<div class="form-row">
<label for="title">Title</label>
<div class="control">
<input id="title" class="form-control form-control-sm" placeholder="Internal server error" />
</div>
</div>
<div class="form-row">
<label for="error_code">Error Code</label>
<div class="control">
<input id="error_code" type="number" class="form-control form-control-sm" />
</div>
</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>
<!-- Status blocks -->
<div class="mb-3">
<h6 class="mb-2">Status</h6>
<!-- Browser -->
<div id="block_browser" class="status-block status-ok">
<div class="d-flex justify-content-between align-items-start mb-2">
<strong>Browser</strong>
<div>
<input class="form-check-input" type="radio" name="error_source" id="err_browser" value="browser" />
<label for="err_browser" class="ms-1 small">Error here</label>
</div>
</div>
<div class="form-row">
<label for="browser_status">Status</label>
<div class="control">
<select id="browser_status" class="form-select form-select-sm">
<option value="ok">Ok</option>
<option value="error">Error</option>
</select>
</div>
</div>
<div class="form-row">
<label for="browser_location">Location</label>
<div class="control">
<input id="browser_location" class="form-control form-control-sm" placeholder="Browser" />
</div>
</div>
<div class="form-row">
<label for="browser_name">Name</label>
<div class="control">
<input id="browser_name" class="form-control form-control-sm" placeholder="You" />
</div>
</div>
<div class="form-row">
<label for="browser_status_text">Status text</label>
<div class="control">
<input id="browser_status_text" class="form-control form-control-sm" />
</div>
</div>
</div>
<!-- Cloudflare -->
<div id="block_cloudflare" class="status-block status-error">
<div class="d-flex justify-content-between align-items-start mb-2">
<strong>Cloudflare</strong>
<div>
<input class="form-check-input" type="radio" name="error_source" id="err_cloudflare"
value="cloudflare" />
<label for="err_cloudflare" class="ms-1 small">Error here</label>
</div>
</div>
<div class="form-row">
<label for="cloudflare_status">Status</label>
<div class="control">
<select id="cloudflare_status" class="form-select form-select-sm">
<option value="ok">Ok</option>
<option value="error">Error</option>
</select>
</div>
</div>
<div class="form-row">
<label for="cloudflare_location">Location</label>
<div class="control">
<input id="cloudflare_location" class="form-control form-control-sm" placeholder="Cloud" />
</div>
</div>
<div class="form-row">
<label for="cloudflare_name">Name</label>
<div class="control">
<input id="cloudflare_name" class="form-control form-control-sm" placeholder="Cloudflare" />
</div>
</div>
<div class="form-row">
<label for="cloudflare_status_text">Status text</label>
<div class="control">
<input id="cloudflare_status_text" class="form-control form-control-sm" />
</div>
</div>
</div>
<!-- Host -->
<div id="block_host" class="status-block status-ok">
<div class="d-flex justify-content-between align-items-start mb-2">
<strong>Host</strong>
<div>
<input class="form-check-input" type="radio" name="error_source" id="err_host" value="host" />
<label for="err_host" class="ms-1 small">Error here</label>
</div>
</div>
<div class="form-row">
<label for="host_status">Status</label>
<div class="control">
<select id="host_status" class="form-select form-select-sm">
<option value="ok">Ok</option>
<option value="error">Error</option>
</select>
</div>
</div>
<div class="form-row">
<label for="host_location">Location</label>
<div class="control">
<input id="host_location" class="form-control form-control-sm" placeholder="The site" />
</div>
</div>
<div class="form-row">
<label for="host_name">Name</label>
<div class="control">
<input id="host_name" class="form-control form-control-sm" placeholder="Host" />
</div>
</div>
<div class="form-row">
<label for="host_status_text">Status text</label>
<div class="control">
<input id="host_status_text" class="form-control form-control-sm" />
</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.
"></textarea>
</div>
<!-- </div> -->
<!-- <div class=""> -->
<label for="what_can_i_do" class="fw-semibold mt-2">What can I do?</label>
<div class="control">
<textarea id="what_can_i_do" class="form-control compact"
placeholder="Please try again in a few minutes."></textarea>
</div>
<hr>
<h6 class="form-row">Performance & security by ...</h6>
<div class="form-row">
<label for="perf_text">Text</label>
<div class="control">
<input id="perf_text" class="form-control form-control-sm" placeholder="Cloudflare" />
</div>
</div>
<div class="form-row">
<label for="perf_link">Link</label>
<div class="control">
<input id="perf_link" class="form-control form-control-sm" placeholder="https://www.cloudflare.com/" />
</div>
</div>
<!-- </div> -->
<div class="d-flex gap-2 mt-2 mb-2">
<!-- <button id="btnRender" class="btn btn-sm btn-primary">Render</button> -->
<button id="btnOpen" class="btn btn-sm btn-primary">Preview in new tab</button>
<button id="btnExport" class="btn btn-sm btn-primary">Export JSON</button>
</div>
<button id="btnShare" class="btn btn-sm btn-primary">Create shareable link</button>
<div class="mt-2">
<div class="input-group input-group-sm">
<input id="shareLink" class="form-control" readonly />
<button id="btnCopyLink" class="btn btn-outline-secondary" type="button">Copy</button>
</div>
</div>
<div class="fw-semibold mt-2 text-center">&gt;&gt; Star this project on
<a href="https://github.com/donlon/cloudflare-error-page" target="_blank">Github</a> ⭐
</div>
<div class="mt-2" style="font-size: 0.9em;">You can also embed the error page into your own website. See
<a href="https://github.com/donlon/cloudflare-error-page#quickstart" target="_blank">Quickstart</a> in the
homepage.
</div>
</form>
</div>
<!-- Preview column -->
<div class="preview">
<div class="d-flex justify-content-between align-items-center mb-1">
<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>
</div>
</div>
</div>
<!-- JS: Bootstrap bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

118
editor/resources/template.ejs Normal file
View File

@@ -0,0 +1,118 @@
<%
let resources_cdn = resources_use_cdn ? 'https://cloudflare.com' : '';
%>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en-US"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
<head>
<%
let error_code = params.error_code || 500;
let title = params.title || 'Internal server error';
let html_title_output = params.html_title || (error_code + ': ' + title);
%>
<title><%= html_title_output %></title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" id="cf_styles-css" href="<%= resources_cdn %>/cdn-cgi/styles/main.css" />
</head>
<body>
<div id="cf-wrapper">
<div id="cf-error-details" class="p-0">
<header class="mx-auto pt-10 lg:pt-6 lg:px-8 w-240 lg:w-full mb-8">
<h1 class="inline-block sm:block sm:mb-2 font-light text-60 lg:text-4xl text-black-dark leading-tight mr-2">
<span class="inline-block"><%= title %></span>
<span class="code-label">Error code <%= error_code %></span>
</h1>
<% let more_info = params.more_information || {}; %>
<% if (!more_info.hidden) { %>
<div>
Visit <a href="<%= more_info.link || 'https://www.cloudflare.com/' %>" target="_blank" rel="noopener noreferrer"><%= more_info.text || 'cloudflare.com' %></a> for more information.
</div>
<% } %>
<div class="<%= more_info.hidden ? '' : 'mt-3' %>"><%= params.time %></div>
</header>
<div class="my-8 bg-gradient-gray">
<div class="w-240 lg:w-full mx-auto">
<div class="clearfix md:px-8">
<% for (let item_id of ['browser', 'cloudflare', 'host']) { %>
<%
let icon, default_location, default_name, text_color, status_text;
if (item_id === 'browser') {
icon = 'browser';
default_location = 'You';
default_name = 'Browser';
} else if (item_id === 'cloudflare') {
icon = 'cloud';
default_location = 'San Francisco';
default_name = 'Cloudflare';
} else {
icon = 'server';
default_location = 'example.com';
default_name = 'Host';
}
let item = params[item_id + '_status'] || {};
let status = item.status || 'ok';
if (item.status_text_color) {
text_color = item.status_text_color;
} else if (status === 'ok') {
text_color = '#9bca3e'; // text-green-success
} else if (status === 'error') {
text_color = '#bd2426'; // text-red-error
}
status_text = item.status_text || (status === 'ok' ? 'Working' : 'Not Working');
%>
<div id="cf-<%= item_id %>-status" class="<% if (params.error_source === item_id) { %>cf-error-source<% } %> relative w-1/3 md:w-full py-15 md:p-0 md:py-8 md:text-left md:border-solid md:border-0 md:border-b md:border-gray-400 overflow-hidden float-left md:float-none text-center">
<div class="relative mb-10 md:m-0">
<span class="cf-icon-<%= icon %> block md:hidden h-20 bg-center bg-no-repeat"></span>
<span class="cf-icon-<%= status %> w-12 h-12 absolute left-1/2 md:left-auto md:right-0 md:top-0 -ml-6 -bottom-4"></span>
</div>
<span class="md:block w-full truncate"><%= item.location || default_location %></span>
<h3 class="md:inline-block mt-3 md:mt-0 text-2xl text-gray-600 font-light leading-1.3"><%= item.name || default_name %></h3>
<span class="leading-1.3 text-2xl" style="color: <%= text_color %>"><%= status_text %></span>
</div>
<% } %>
</div>
</div>
</div>
<div class="w-240 lg:w-full mx-auto mb-8 lg:px-8">
<div class="clearfix">
<div class="w-1/2 md:w-full float-left pr-6 md:pb-10 md:pr-0 leading-relaxed">
<h2 class="text-3xl font-normal leading-1.3 mb-4">What happened?</h2>
<%= (params.what_happened || 'There is an internal server error on Cloudflare\'s network.') %>
</div>
<div class="w-1/2 md:w-full float-left leading-relaxed">
<h2 class="text-3xl font-normal leading-1.3 mb-4">What can I do?</h2>
<%= (params.what_can_i_do || 'Please try again in a few minutes.') %>
</div>
</div>
</div>
<div class="cf-error-footer cf-wrapper w-240 lg:w-full py-10 sm:py-4 sm:px-8 mx-auto text-center sm:text-left border-solid border-0 border-t border-gray-300">
<p class="text-13">
<span class="cf-footer-item sm:block sm:mb-1">Cloudflare Ray ID: <strong class="font-semibold"><%= params.ray_id %></strong></span>
<span class="cf-footer-separator sm:hidden">&bull;</span>
<span id="cf-footer-item-ip" class="cf-footer-item hidden sm:block sm:mb-1">
Your IP:
<button type="button" id="cf-footer-ip-reveal" class="cf-footer-ip-reveal-btn">Click to reveal</button>
<span class="hidden" id="cf-footer-ip"><%= params.client_ip || '1.1.1.1' %></span>
<span class="cf-footer-separator sm:hidden">&bull;</span>
</span>
<% let perf_sec_by = params.perf_sec_by || {}; %>
<span class="cf-footer-item sm:block sm:mb-1"><span>Performance &amp; security by</span> <a rel="noopener noreferrer" href="<%= perf_sec_by.link || 'https://www.cloudflare.com/' %>" id="brand_link" target="_blank"><%= perf_sec_by.text || 'Cloudflare' %></a></span>
</p>
</div><!-- /.error-footer -->
</div>
</div>
<script>(function(){function d(){var b=a.getElementById("cf-footer-item-ip"),c=a.getElementById("cf-footer-ip-reveal");b&&"classList"in b&&(b.classList.remove("hidden"),c.addEventListener("click",function(){c.classList.add("hidden");a.getElementById("cf-footer-ip").classList.remove("hidden")}))}var a=document;document.addEventListener&&a.addEventListener("DOMContentLoaded",d)})();</script>
</body>
</html>