diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index 9fc536555a..0a5cc0e0dc 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -102,29 +102,169 @@ document.head.appendChild(style); } - // eslint-disable-next-line no-inner-declarations + async function addStyle(styleText) { + let css = document.createElement('style'); + css.appendChild(document.createTextNode(styleText)); + document.head.appendChild(css); + } + function renderError(code, details) { let errorsElement = document.getElementById('errors'); + if (!errorsElement) { document.documentElement.innerHTML = ` -

⚠ An error has occurred. ⚠

-

If the problem persists, please contact the administrator. You may also try the following options:

- -
+ + + + + +

An error has occurred!

+ +

Don't worry, it's (probably) not your fault.

+

If the problem persists after refreshing, please contact your instance's administrator.
You may also try the following options:

+ + + +
+ + + +
+ + + +
`; - errorsElement = document.getElementById('errors'); } - const detailsElement = document.createElement('details'); - detailsElement.innerHTML = `ERROR CODE: ${code}${JSON.stringify(details)}`; - + detailsElement.innerHTML = ` +
+ + ERROR CODE: ${code} + + ${JSON.stringify(details)}`; errorsElement.appendChild(detailsElement); + addStyle(` + * { + font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; + } + + #misskey_app, + #splash { + display: none !important; + } + + body, + html { + background-color: #222; + color: #dfddcc; + justify-content: center; + margin: auto; + padding: 10px; + text-align: center; + } + + button { + border-radius: 999px; + padding: 0px 12px 0px 12px; + border: none; + cursor: pointer; + margin-bottom: 12px; + } + + .button-big { + background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0)); + line-height: 50px; + } + + .button-big:hover { + background: rgb(153, 204, 0); + } + + .button-small { + background: #444; + line-height: 40px; + } + + .button-small:hover { + background: #555; + } + + .button-label-big { + color: #222; + font-weight: bold; + font-size: 20px; + padding: 12px; + } + + .button-label-small { + color: rgb(153, 204, 0); + font-size: 16px; + padding: 12px; + } + + a { + color: rgb(134, 179, 0); + text-decoration: none; + } + + p, + li { + font-size: 16px; + } + + .dont-worry, + #msg { + font-size: 18px; + } + + .icon-warning { + color: #dec340; + height: 4rem; + padding-top: 2rem; + } + + h1 { + font-size: 32px; + } + + code { + font-family: Fira, FiraCode, monospace; + } + + details { + background: #333; + margin-bottom: 2rem; + padding: 0.5rem 1rem; + width: 40rem; + border-radius: 10px; + justify-content: center; + margin: auto; + } + + summary { + cursor: pointer; + } + + summary > * { + display: inline; + } + + @media screen and (max-width: 500px) { + details { + width: 50%; + } + `) } // eslint-disable-next-line no-inner-declarations