wehub-resource-sync
192 lines
7.1 KiB
Plaintext
192 lines
7.1 KiB
Plaintext
<!--
|
||
---------------------------------------------------------------
|
||
docmd : the zero-config documentation engine.
|
||
@website https://docmd.io
|
||
[docmd-source] - Please do not remove this header.
|
||
---------------------------------------------------------------
|
||
-->
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="<%= (locals.activeLocale && locals.activeLocale.id) ? locals.activeLocale.id : 'en' %>"
|
||
<%= (locals.activeLocale && locals.activeLocale.dir && locals.activeLocale.dir !== 'ltr') ? ' dir="' + locals.activeLocale.dir + '"' : '' %>>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<title><%= pageTitle %></title>
|
||
|
||
<!-- Force absolute paths for assets using relativePathToRoot (which we will set to '/') -->
|
||
<%- faviconLinkHtml || '' %>
|
||
|
||
<!-- 1. Core CSS -->
|
||
<link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-main.css?v=<%= buildHash %>">
|
||
|
||
<!-- 2. Highlight.js (Theme aware) -->
|
||
<% const isDarkDefault = defaultMode === 'dark'; %>
|
||
<link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-highlight-light.css?v=<%= buildHash %>" id="hljs-light" <%= isDarkDefault ? 'disabled' : '' %>>
|
||
<link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-highlight-dark.css?v=<%= buildHash %>" id="hljs-dark" <%= isDarkDefault ? '' : 'disabled' %>>
|
||
|
||
<!-- 3. Theme CSS -->
|
||
<% if (theme && theme.name !== 'default') { %>
|
||
<link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-theme-<%= theme.name %>.css?v=<%= buildHash %>">
|
||
<% } %>
|
||
|
||
<!-- 4. Custom CSS -->
|
||
<% (customCssFiles || []).forEach(cssFile => {
|
||
const cleanPath = cssFile.startsWith('/') ? cssFile.substring(1) : cssFile;
|
||
%>
|
||
<link rel="stylesheet" href="<%= relativePathToRoot %><%= cleanPath %>?v=<%= buildHash %>">
|
||
<% }); %>
|
||
|
||
<!-- 5. Theme Init (Dark Mode logic) -->
|
||
<%- themeInitScript %>
|
||
|
||
<style>
|
||
body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 100vh;
|
||
text-align: center;
|
||
padding: 32px 20px;
|
||
background-color: var(--bg-color);
|
||
color: var(--text-color);
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Soft halo behind the card — picks up --link-color / --glow-color from the active theme */
|
||
body::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -20%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 720px;
|
||
height: 720px;
|
||
max-width: 140vw;
|
||
background: radial-gradient(circle at center, var(--glow-color, rgba(6, 138, 213, 0.12)) 0%, transparent 65%);
|
||
filter: blur(20px);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.docmd-404 {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 480px;
|
||
width: 100%;
|
||
padding: 40px 32px;
|
||
border-radius: var(--radius-xl, 12px);
|
||
background-color: var(--bg-color);
|
||
border: 1px solid var(--border-color);
|
||
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
|
||
}
|
||
|
||
.docmd-404__code {
|
||
font-size: 6rem;
|
||
line-height: 1;
|
||
font-weight: 800;
|
||
letter-spacing: -0.04em;
|
||
margin: 0 0 12px;
|
||
color: var(--link-color);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.docmd-404__title {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
margin: 0 0 8px;
|
||
color: var(--text-heading, var(--text-color));
|
||
}
|
||
|
||
.docmd-404__msg {
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
color: var(--text-muted);
|
||
margin: 0 0 28px;
|
||
}
|
||
|
||
.docmd-404__actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.docmd-404__btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 10px 18px;
|
||
border-radius: var(--radius-md, 6px);
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
|
||
}
|
||
|
||
.docmd-404__btn--primary {
|
||
background-color: var(--link-color);
|
||
color: #fff;
|
||
}
|
||
.docmd-404__btn--primary:hover,
|
||
.docmd-404__btn--primary:focus {
|
||
transform: translateY(-1px);
|
||
text-decoration: none;
|
||
color: #fff;
|
||
filter: brightness(0.92);
|
||
}
|
||
|
||
.docmd-404__btn--ghost {
|
||
background-color: transparent;
|
||
color: var(--text-color);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
.docmd-404__btn--ghost:hover,
|
||
.docmd-404__btn--ghost:focus {
|
||
background-color: var(--sidebar-bg);
|
||
text-decoration: none;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Logo switch — matches the existing light/dark convention */
|
||
.error-logo { height: 60px; margin:0 auto 2rem; width: auto; display: block; }
|
||
.error-logo.light { display: var(--display-light, block); }
|
||
.error-logo.dark { display: var(--display-dark, none); }
|
||
@media (prefers-color-scheme: dark) {
|
||
:root[data-theme="system"] .error-logo.light { display: none; }
|
||
:root[data-theme="system"] .error-logo.dark { display: block; }
|
||
}
|
||
:root[data-theme="dark"] .error-logo.light { display: none; }
|
||
:root[data-theme="dark"] .error-logo.dark { display: block; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="docmd-404" role="main" aria-labelledby="docmd-404-title">
|
||
<% if (logo) { %>
|
||
<% if (logo.light) { %>
|
||
<img src="<%= relativePathToRoot %><%= logo.light.replace(/^\//, '') %>" class="error-logo light" alt="<%= logo.alt || siteTitle || 'Logo' %>">
|
||
<% } %>
|
||
<% if (logo.dark) { %>
|
||
<img src="<%= relativePathToRoot %><%= logo.dark.replace(/^\//, '') %>" class="error-logo dark" alt="<%= logo.alt || siteTitle || 'Logo' %>">
|
||
<% } %>
|
||
<% } %>
|
||
|
||
<div class="docmd-404__code" aria-hidden="true"><%= typeof t === 'function' ? t('errorCode404') : '404' %></div>
|
||
<h1 id="docmd-404-title" class="docmd-404__title"><%= title || (typeof t === 'function' ? t('pageNotFound') : 'Page not found') %></h1>
|
||
<p class="docmd-404__msg"><%= content || (typeof t === 'function' ? t('pageNotFoundMsg') : 'The page you’re looking for doesn’t exist or has moved.') %></p>
|
||
<div class="docmd-404__actions">
|
||
<a href="<%= relativePathToRoot %>" class="docmd-404__btn docmd-404__btn--primary">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
|
||
<span><%= typeof t === 'function' ? t('returnHome') : 'Return home' %></span>
|
||
</a>
|
||
<a href="javascript:history.length > 1 ? history.back() : (location.href = '<%= relativePathToRoot %>')" class="docmd-404__btn docmd-404__btn--ghost">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M12 19l-7-7 7-7"></path></svg>
|
||
<span><%= typeof t === 'function' ? t('goBack') : 'Go back' %></span>
|
||
</a>
|
||
</div>
|
||
</main>
|
||
</body>
|
||
</html>
|