55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
import { t, i18n } from '../../i18n.js'
|
|
|
|
class PageNotFound extends HTMLElement {
|
|
connectedCallback() {
|
|
this._unsubs = []
|
|
this.render()
|
|
this._unsubs.push(i18n.subscribe(() => this.render()))
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this._unsubs.forEach(fn => fn())
|
|
this._unsubs = []
|
|
}
|
|
|
|
render() {
|
|
this.innerHTML = /* html */`
|
|
<div class="not-found">
|
|
<div class="not-found-icon">404</div>
|
|
<h1 data-i18n="notFound.title">${t('notFound.title')}</h1>
|
|
<p data-i18n="notFound.message">${t('notFound.message')}</p>
|
|
<a href="#/" class="btn btn-primary btn-lg">
|
|
<span data-i18n="notFound.backHome">${t('notFound.backHome')}</span>
|
|
</a>
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
customElements.define('page-not-found', PageNotFound)
|
|
|
|
const style = document.createElement('style')
|
|
style.textContent = /* css */`
|
|
page-not-found .not-found {
|
|
text-align: center;
|
|
padding: var(--space-3xl) 0;
|
|
}
|
|
|
|
page-not-found .not-found-icon {
|
|
font-size: 6rem;
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-text-muted);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
page-not-found h1 {
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
page-not-found p {
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|