imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-02-05 03:39:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add error page

Browse Source
This commit is contained in:
Andreas Krühlmann
2026-01-06 11:12:54 +01:00
parent 8cdc85e61e
commit 8e9a8d80c3
2 changed files with 111 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/main/resources/static/css/styles.css
View File

@@ -67,7 +67,8 @@ body {
} }
.channels-body, .channels-body,
.settings-body { .settings-body,
.error-body {
min-height: 100vh; min-height: 100vh;
background: background:
radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.16), transparent 30%), radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.16), transparent 30%),
@@ -86,8 +87,16 @@ body {
gap: 20px; gap: 20px;
} }
.error-shell {
width: min(820px, 100%);
display: flex;
flex-direction: column;
gap: 20px;
}
.channels-header, .channels-header,
.settings-header { .settings-header,
.error-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -103,6 +112,11 @@ body {
justify-content: center; justify-content: center;
} }
.error-main {
display: flex;
justify-content: center;
}
.settings-card { .settings-card {
width: 100%; width: 100%;
background: rgba(11, 18, 32, 0.95); background: rgba(11, 18, 32, 0.95);
@@ -115,6 +129,45 @@ body {
gap: 10px; gap: 10px;
} }
.error-card {
width: 100%;
background: rgba(11, 18, 32, 0.95);
border: 1px solid #1f2937;
border-radius: 16px;
padding: clamp(20px, 3vw, 32px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
gap: 12px;
}
.error-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin-top: 8px;
}
.error-detail {
border: 1px solid #1f2937;
border-radius: 10px;
padding: 10px;
background: rgba(255, 255, 255, 0.02);
}
.detail-label {
color: #94a3b8;
font-size: 13px;
margin: 0 0 4px;
}
.detail-value {
margin: 0;
color: #e2e8f0;
font-weight: 600;
word-break: break-word;
}
.channels-main { .channels-main {
display: flex; display: flex;
justify-content: center; justify-content: center;

56
src/main/resources/templates/error.html Normal file
View File

@@ -0,0 +1,56 @@
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Something went wrong - Imgfloat</title>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body class="error-body">
<div class="error-shell">
<header class="error-header">
<div class="brand">
<img class="brand-mark" alt="brand" src="/img/brand.png" />
<div>
<div class="brand-title">Imgfloat</div>
<div class="brand-subtitle">Twitch overlay manager</div>
</div>
</div>
<div class="status-chip" th:if="${status}">
<span th:text="|Error ${status}|">Error</span>
</div>
</header>
<main class="error-main">
<section class="error-card">
<p class="eyebrow subtle">Something went wrong</p>
<h1>We couldn't complete your request</h1>
<p class="muted">
We're sorry, but we hit a problem while handling your request. Please try again in a moment.
</p>
<div class="error-details">
<div class="error-detail" th:if="${path}">
<p class="detail-label">Requested path</p>
<p class="detail-value" th:text="${path}">/</p>
</div>
<div class="error-detail" th:if="${error}">
<p class="detail-label">Error</p>
<p class="detail-value" th:text="${error}">Unexpected error</p>
</div>
<div class="error-detail" th:if="${message}">
<p class="detail-label">Details</p>
<p class="detail-value" th:text="${message}">Please try again.</p>
</div>
</div>
<div class="cta-row">
<a class="button" href="/">Return home</a>
<a class="button ghost" href="/channels">Browse channels</a>
</div>
</section>
</main>
</div>
<script src="/js/cookie-consent.js"></script>
</body>
</html>