diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index 9fc536555a..124f25f5e8 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -106,15 +106,39 @@ function renderError(code, details) { let errorsElement = document.getElementById('errors'); if (!errorsElement) { + document.getElementsByTagName("head")[0].insertAdjacentHTML( + "beforeend", + ``); 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:

+ + + +
+ + + +
+ + + +
`; @@ -122,8 +146,7 @@ } const detailsElement = document.createElement('details'); - detailsElement.innerHTML = `ERROR CODE: ${code}${JSON.stringify(details)}`; - + detailsElement.innerHTML = `
ERROR CODE: ${code}${JSON.stringify(details)}`; errorsElement.appendChild(detailsElement); } diff --git a/packages/backend/src/server/web/error.css b/packages/backend/src/server/web/error.css new file mode 100644 index 0000000000..9f8f905017 --- /dev/null +++ b/packages/backend/src/server/web/error.css @@ -0,0 +1,98 @@ +* { + font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; +} + +body, +html { + background-color: #222; + color: #dfddcc; + justify-content: center; + margin: auto; + width: 80%; + 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; +} + +h1 { + font-size: 32px; +} + +code { + font-family: Fira, FiraCode, monospace; +} + +details { + background: #333; + margin-bottom: 2rem; + padding: 0.5rem 1rem; + border-radius: 5px; + justify-content: center; + margin: auto; +} + +summary { + cursor: pointer; +} + +summary > * { + display: inline; +} diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug index 5bb156f0f4..32499aa452 100644 --- a/packages/backend/src/server/web/views/base.pug +++ b/packages/backend/src/server/web/views/base.pug @@ -53,7 +53,7 @@ html block meta block og - meta(property='og:title' content= title || 'Misskey') + meta(property='og:title' content= title || 'Misskey') meta(property='og:description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨') meta(property='og:image' content= img) diff --git a/packages/backend/src/server/web/views/flush.pug b/packages/backend/src/server/web/views/flush.pug index ec585a34db..b08f61c73a 100644 --- a/packages/backend/src/server/web/views/flush.pug +++ b/packages/backend/src/server/web/views/flush.pug @@ -1,6 +1,12 @@ doctype html html + head + meta(charset='utf-8') + meta(name='application-name' content='Misskey') + title Flushing Misskey + style + include ../error.css #msg script. const msg = document.getElementById('msg');