Skip to content

Commit

Permalink
style: root error page
Browse files Browse the repository at this point in the history
  • Loading branch information
deansallinen committed Mar 6, 2025
1 parent 334d636 commit 9453a2e
Showing 1 changed file with 125 additions and 4 deletions.
129 changes: 125 additions & 4 deletions src/error.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,134 @@
<!doctype html>
<html lang="en">
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, interactive-widget=resizes-content"
/>
<meta name="color-scheme" content="dark" />
<link rel="icon" href="/favicon.ico" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="Unicove" />
<style>
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/inter/web-latin/Inter-Regular-subset.woff2?v=4.0') format('woff2');
}

@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/inter/web-latin/Inter-Medium-subset.woff2?v=4.0') format('woff2');
}

@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/inter/web-latin/Inter-Bold-subset.woff2?v=4.0') format('woff2');
}

:root {
--bg-color: #1b1f24;
--text-color: #a1a1aa;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Inter', sans-serif;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#status {
-webkit-text-stroke: 2px var(--text-color);
color: var(--bg-color);
font-size: 15rem;
font-weight: bold;
margin-top: 13vh;
}

#message {
color: white;
font-weight: bold;
margin-block: 0;
}

#description {
max-width: 60ch;
text-wrap: balance;
margin-block: 1.5rem;
line-height: 1.5rem;
display: none;
}

#button {
text-decoration: none;
color: #04314d;
background-color: #00b5ff;
font-weight: 500;
padding-block: 1rem;
padding-inline: 3rem;
border-radius: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
gap: 0.25rem;
margin-top: 1.5rem;
}

.lucide-arrow-left {
width: 1rem;
height: 1rem;
}
</style>
<title>%sveltekit.error.message%</title>
</head>

<body>
<h1>Error in root layout</h1>
<p>Status: %sveltekit.status%</p>
<p>Message: %sveltekit.error.message%</p>
<span id="status">%sveltekit.status%</span>
<h1 id="message">%sveltekit.error.message%</h1>
<p id="description"></p>
<a id="button" href="/">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-left"
>
<path d="m12 19-7-7 7-7" />
<path d="M19 12H5" />
</svg>
<span> Back to Unicove </span>
</a>
</body>

<script>
const description = document.getElementById('description');
const status = document.getElementById('status');

if (status.innerText === '404') {
description.style.display = 'block';
description.innerText =
"Sorry, we couldn't find the page you're looking for. The page might have been moved, deleted, or never existed in the first place.";
}
</script>
</html>

0 comments on commit 9453a2e

Please sign in to comment.