npm - xypriss - Versions diffs - 9.10.13 → 9.10.14 - Mend

xypriss 9.10.13 → 9.10.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/dist/cjs/src/server/handlers/templates/notFoundTemplate.js CHANGED Viewed

@@ -1,653 +1,398 @@
 'use strict';
 function notFoundTemplate(d) {
-    const html = `<!DOCTYPE html>
-<html lang="en" class="${d.themeClass}">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>${d.title}</title>
-        <link rel="icon" href="${d.faviconUrl}" type="image/x-icon" />
-        <style>
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-            /* Détection automatique du thème via CSS */
-            @media (prefers-color-scheme: dark) {
-                html.auto {
-                    color-scheme: dark;
-                }
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto {
-                    color-scheme: light;
-                }
-            }
-            body {
-                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-                min-height: 100vh;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                padding: 1rem;
-                background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%);
-                transition: background 0.3s ease;
-            }
-            /* Mode sombre */
-            html.dark body,
-            html.auto body {
-                background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #020617 100%);
-            }
-            /* Mode clair spécifique */
-            html.light body {
-                background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%);
-            }
-            /* Override auto en mode clair */
-            @media (prefers-color-scheme: light) {
-                html.auto body {
-                    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%);
-                }
-            }
-            .container {
-                width: 100%;
-                max-width: 28rem;
-                animation: fadeInUp 0.8s ease-out forwards;
-            }
-            .card {
-                background: rgba(255, 255, 255, 0.95);
-                border-radius: 1rem;
-                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-                padding: 3rem 2rem;
-                text-align: center;
-                width: 100%;
-                transform: scale(1);
-                transition: all 0.3s ease;
-                border: 1px solid rgba(203, 213, 225, 0.3);
-            }
-            /* Mode sombre - Card avec effet glow */
-            html.dark .card,
-            html.auto .card {
-                background: rgba(15, 23, 42, 0.95);
-                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
-                            0 0 40px rgba(59, 130, 246, 0.15);
-                border: 1px solid rgba(59, 130, 246, 0.2);
-            }
-            /* Mode clair spécifique pour la card */
-            html.light .card {
-                background: rgba(255, 255, 255, 0.95);
-                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-                border: 1px solid rgba(203, 213, 225, 0.3);
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .card {
-                    background: rgba(255, 255, 255, 0.95);
-                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-                    border: 1px solid rgba(203, 213, 225, 0.3);
-                }
-            }
-            .card:hover {
-                transform: scale(1.02);
-                box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
-            }
-            html.dark .card:hover,
-            html.auto .card:hover {
-                transform: scale(1.02);
-                box-shadow: 0 25px 60px -12px rgba(59, 130, 246, 0.3),
-                            0 0 60px rgba(59, 130, 246, 0.25);
-                border: 1px solid rgba(59, 130, 246, 0.4);
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .card:hover {
-                    transform: scale(1.02);
-                    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
-                }
-            }
-            .branding-container {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-bottom: 3rem;
-            }
-            .branding {
-                display: flex;
-                align-items: center;
-                gap: 0.75rem;
-            }
-            .logo {
-                width: 2.5rem;
-                height: 2.5rem;
-                border-radius: 0.5rem;
-                background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 50%, #9333ea 100%);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
-                animation: pulse-glow 2s ease-in-out infinite;
-            }
-            html.dark .logo,
-            html.auto .logo {
-                box-shadow: 0 10px 20px rgba(59, 130, 246, 0.4),
-                            0 0 30px rgba(59, 130, 246, 0.2);
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .logo {
-                    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
-                }
-            }
-            .logo-text {
-                color: white;
-                font-weight: bold;
-                font-size: 1.25rem;
-            }
-            .brand-name {
-                font-size: 1.875rem;
-                font-weight: bold;
-                overflow: hidden;
-                border-right: 3px solid #22d3ee;
-                white-space: nowrap;
-                animation: typing 2s steps(7, end) forwards, blink 0.75s step-end infinite;
-                animation-delay: 0.5s;
-                width: 0;
-            }
-            .brand-gradient {
-                background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 33%, #f9a8d4 66%, #fbbf24 100%);
-                background-size: 200% 200%;
-                background-clip: text;
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                animation: rainbow 3s ease infinite;
-            }
-            .error-number {
-                animation: float 3s ease-in-out infinite;
-                margin-bottom: 1.5rem;
-            }
-            .error-number h1 {
-                font-size: 6rem;
-                font-weight: bold;
-                background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #f9a8d4 100%);
-                background-clip: text;
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04));
-            }
-            html.dark .error-number h1,
-            html.auto .error-number h1 {
-                filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.4));
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .error-number h1 {
-                    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04));
-                }
-            }
-            .title {
-                font-size: 1.875rem;
-                font-weight: bold;
-                color: #1e293b;
-                margin-bottom: 1rem;
-                animation: fadeInUp 0.8s ease-out forwards;
-                animation-delay: 0.1s;
-                opacity: 0;
-            }
-            html.dark .title,
-            html.auto .title {
-                color: #f1f5f9;
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .title {
-                    color: #1e293b;
-                }
-            }
-            .description {
-                color: #475569;
-                margin-bottom: 0.5rem;
-                animation: fadeInUp 0.8s ease-out forwards;
-                animation-delay: 0.2s;
-                opacity: 0;
-            }
-            html.dark .description,
-            html.auto .description {
-                color: #94a3b8;
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .description {
-                    color: #475569;
-                }
-            }
-            .method {
-                color: #3b82f6;
-                font-weight: 600;
-            }
-            html.dark .method,
-            html.auto .method {
-                color: #60a5fa;
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .method {
-                    color: #3b82f6;
-                }
-            }
-            .path {
-                color: #ec4899;
-                font-weight: 600;
-                word-break: break-all;
-            }
-            html.dark .path,
-            html.auto .path {
-                color: #f9a8d4;
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .path {
-                    color: #ec4899;
-                }
-            }
-            .subdescription {
-                color: #64748b;
-                font-size: 0.875rem;
-                margin-bottom: 2rem;
-                animation: fadeInUp 0.8s ease-out forwards;
-                animation-delay: 0.3s;
-                opacity: 0;
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .subdescription {
-                    color: #64748b;
-                }
-            }
-            .app-name {
-                color: #475569;
-                font-weight: 500;
-            }
-            html.dark .app-name,
-            html.auto .app-name {
-                color: #94a3b8;
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .app-name {
-                    color: #475569;
-                }
-            }
-            .button {
-                display: inline-block;
-                background: linear-gradient(90deg, #3b82f6 0%, #9333ea 100%);
-                color: white;
-                font-weight: 600;
-                padding: 0.75rem 2rem;
-                border-radius: 0.5rem;
-                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-                transform: scale(1);
-                transition: all 0.3s ease;
-                text-decoration: none;
-                cursor: pointer;
-                border: none;
-                animation: fadeInUp 0.8s ease-out forwards;
-                animation-delay: 0.3s;
-                opacity: 0;
-            }
-            .button:hover {
-                background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
-                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-                transform: scale(1.05);
-            }
-            html.dark .button:hover,
-            html.auto .button:hover {
-                box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.3),
-                            0 0 20px rgba(59, 130, 246, 0.2);
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .button:hover {
-                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-                }
-            }
-            .button:active {
-                transform: scale(0.95);
-            }
-            .contact {
-                margin-top: 1.5rem;
-                animation: fadeInUp 0.8s ease-out forwards;
-                animation-delay: 0.3s;
-                opacity: 0;
-            }
-            .contact-text {
-                color: #64748b;
-                font-size: 0.875rem;
-            }
-            .contact-link {
-                color: #3b82f6;
-                transition: color 0.2s ease;
-                text-decoration: none;
-            }
-            html.dark .contact-link,
-            html.auto .contact-link {
-                color: #60a5fa;
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .contact-link {
-                    color: #3b82f6;
-                }
-            }
-            .contact-link:hover {
-                color: #2563eb;
-            }
-            html.dark .contact-link:hover,
-            html.auto .contact-link:hover {
-                color: #93c5fd;
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .contact-link:hover {
-                    color: #2563eb;
-                }
-            }
-            .footer {
-                margin-top: 1.5rem;
-            }
-            .footer-text {
-                color: #64748b;
-                font-size: 0.875rem;
-            }
-            html.dark .footer-text,
-            html.auto .footer-text {
-                color: #94a3b8;
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .footer-text {
-                    color: #64748b;
-                }
-            }
-            .footer-link {
-                color: #3b82f6;
-                font-weight: 600;
-                word-break: break-all;
-                transition: color 0.2s ease;
-                text-decoration: none;
-            }
-            html.dark .footer-link,
-            html.auto .footer-link {
-                color: #60a5fa;
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .footer-link {
-                    color: #3b82f6;
-                }
-            }
-            .footer-link:hover {
-                color: #8b5cf6;
-            }
-            html.dark .footer-link:hover,
-            html.auto .footer-link:hover {
-                color: #a78bfa;
-            }
-            @media (prefers-color-scheme: light) {
-                html.auto .footer-link:hover {
-                    color: #8b5cf6;
-                }
-            }
-            .decorative {
-                margin-top: 1.5rem;
-                display: flex;
-                justify-content: center;
-                gap: 0.5rem;
-            }
-            .dot {
-                width: 0.5rem;
-                height: 0.5rem;
-                border-radius: 50%;
-                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-            }
-            .dot-red {
-                background: #ef4444;
-            }
-            .dot-blue {
-                background: #3b82f6;
-                animation-delay: 0.1s;
-            }
-            .dot-green {
-                background: #10b981;
-                animation-delay: 0.2s;
-            }
-            @keyframes float {
-                0%, 100% {
-                    transform: translateY(0px);
-                }
-                50% {
-                    transform: translateY(-20px);
-                }
-            }
-            @keyframes fadeInUp {
-                from {
-                    opacity: 0;
-                    transform: translateY(30px);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
-            @keyframes pulse-glow {
-                0%, 100% {
-                    box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
-                }
-                50% {
-                    box-shadow: 0 0 40px rgba(96, 165, 250, 0.6);
-                }
-            }
-            @keyframes typing {
-                from {
-                    width: 0;
-                }
-                to {
-                    width: 100%;
-                }
-            }
-            @keyframes blink {
-                50% {
-                    border-color: transparent;
-                }
-            }
-            @keyframes rainbow {
-                0% {
-                    background-position: 0% 50%;
-                }
-                50% {
-                    background-position: 100% 50%;
-                }
-                100% {
-                    background-position: 0% 50%;
-                }
-            }
-            @keyframes pulse {
-                0%, 100% {
-                    opacity: 1;
-                }
-                50% {
-                    opacity: 0.5;
-                }
-            }
-            @media (min-width: 768px) {
-                .card {
-                    padding: 3rem;
-                }
-                .error-number h1 {
-                    font-size: 8rem;
-                }
-                .title {
-                    font-size: 1.875rem;
-                }
-                .brand-name {
-                    font-size: 1.875rem;
-                }
-            }
-            ${d.customCSS}
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <div class="card">
-                <!-- Branding XyPriss -->
-                <div class="branding-container">
-                    <div class="branding">
-                        <div class="logo">
-                            <span class="logo-text">XP</span>
-                        </div>
-                        <h3 class="brand-name">
-                            <span class="brand-gradient">XyPriss</span>
-                        </h3>
-                    </div>
-                </div>
-                <!-- 404 Number with floating animation -->
-                <div class="error-number">
-                    <h1>404</h1>
-                </div>
-                <!-- Title -->
-                <h2 class="title">Page Not Found</h2>
-                <!-- Description -->
-                <p class="description">
-                    ${d.message
-        ? d.message
-        : `Cannot
-                    <span class="method">${d.requestedMethod}</span>
-                    <span class="path">${d.requestedPath}</span>`}
-                </p>
-                ${d.appName
-        ? `<p class="subdescription">
-                    We've searched everywhere, but the page you're looking for
-                    seems to have vanished or been moved from
-                    <span class="method">${d.appName}</span>.
-                </p>`
-        : ""}
-                <!-- Button -->
-                ${d.redirectText && d.redirectTo
-        ? `<a
-                    class="button"
-                    href="${d.redirectTo}"
-                >
-                    ${d.redirectText}
-                </a>`
-        : ""}
-                <!-- Contact section -->
-               ${d.contactEmail
-        ? ` <div class="contact">
-                    <span class="contact-text">
-                        Need help? Contact us at
-                        <a href="mailto:${d.contactEmail}" class="contact-link"
-                            >${d.contactEmail}</a
-                        >
-                    </span>
-                </div>`
-        : ""}
-                <!-- By XyPriss -->
-                <div class="footer">
-                    <small class="footer-text">
-                        By
-                        <a href="https://XyPriss.nehonix.com" class="footer-link"
-                            >XyPriss</a
-                        >
-                    </small>
-                </div>
-                <!-- Decorative elements -->
-                <div class="decorative">
-                    <div class="dot dot-red"></div>
-                    <div class="dot dot-blue"></div>
-                    <div class="dot dot-green"></div>
-                </div>
+    const contactBlock = d.contactEmail
+        ? `
+        <div class="help-card a5">
+          <div style="display:flex;align-items:center;gap:15px;">
+            <div class="help-icon">
+              <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"/>
+                <circle cx="12" cy="12" r="4"/>
+                <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/>
+                <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/>
+                <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/>
+                <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/>
+              </svg>
+            </div>
+            <div>
+              <div style="font-size:15px;font-weight:700;margin-bottom:4px;">Need help?</div>
+              <p class="help-text">
+                If you believe this is a mistake or need assistance,<br>
+                feel free to <a href="mailto:${d.contactEmail}" style="color:var(--blue);text-decoration:none;">contact us</a>.
+              </p>
             </div>
+          </div>
+          <a href="mailto:${d.contactEmail}" class="btn-contact">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
+              <polyline points="22,6 12,13 2,6"/>
+            </svg>
+            Contact us
+          </a>
+        </div>
+        `
+        : "";
+    const messageText = d.message ||
+        `The resource you're looking for might have been removed,<br>renamed, or is temporarily unavailable.`;
+    const redirectUrl = d.redirectTo || "/";
+    const redirectLabel = d.redirectText || "Go to Homepage";
+    const scriptBlock = d.redirectScript
+        ? `<script>${d.redirectScript}</script>`
+        : "";
+    const customCssBlock = d.customCSS ? `<style>${d.customCSS}</style>` : "";
+    const faviconBlock = d.faviconUrl
+        ? `<link rel="icon" href="${d.faviconUrl}" type="image/x-icon" />`
+        : "";
+    const html = `<!DOCTYPE html>
+<html lang="en" data-theme="${d.mode || "system"}">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${d.title || "404 – Page Not Found | " + d.appName}</title>
+  ${faviconBlock}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <style>
+    /* ── Theming Variables ── */
+    :root {
+      --blue:   #1a9fff;
+    }
+    /* Dark theme (default or explicit) */
+    :root[data-theme="dark"], :root[data-theme="system"] {
+      --bg:             #04091a;
+      --text-main:      #fff;
+      --text-dim1:      rgba(255,255,255,0.82);
+      --text-dim2:      rgba(255,255,255,0.52);
+      --text-dim3:      rgba(255,255,255,0.48);
+      --text-dim4:      rgba(255,255,255,0.46);
+      --text-dim5:      rgba(255,255,255,0.4);
+      --text-dim6:      rgba(255,255,255,0.38);
+      --text-dim7:      rgba(255,255,255,0.32);
+      --text-dim8:      rgba(255,255,255,0.3);
+      --border-main:    rgba(30, 120, 220, 0.18);
+      --border-btn:     rgba(255,255,255,0.18);
+      --border-nav:     rgba(255,255,255,0.16);
+      --bg-panther:     url('https://dll.nehonix.com/assets/XyPriss/xp-template-bgimg.png');
+      --grad-before-1:  #04091a;
+      --grad-before-2:  rgba(4,9,26,.85);
+      --grad-before-3:  rgba(4,9,26,.35);
+      --grad-after-2:   rgba(4,9,26,.25);
+      --help-card-bg:   rgba(255,255,255,0.03);
+      --help-card-border: var(--border-main);
+      --btn-contact-text: #fff;
+    }
+    /* Light theme overrides */
+    :root[data-theme="light"] {
+      --bg:             #f5f8fa;
+      --text-main:      #04091a;
+      --text-dim1:      rgba(4,9,26,0.82);
+      --text-dim2:      rgba(4,9,26,0.62);
+      --text-dim3:      rgba(4,9,26,0.48);
+      --text-dim4:      rgba(4,9,26,0.66);
+      --text-dim5:      rgba(4,9,26,0.5);
+      --text-dim6:      rgba(4,9,26,0.38);
+      --text-dim7:      rgba(4,9,26,0.42);
+      --text-dim8:      rgba(4,9,26,0.3);
+      --border-main:    rgba(30, 120, 220, 0.18);
+      --border-btn:     rgba(4,9,26,0.18);
+      --border-nav:     rgba(4,9,26,0.16);
+      --bg-panther:     url('https://dll.nehonix.com/assets/XyPriss/xp-template-bgimg-light.png');
+      --grad-before-1:  #f5f8fa;
+      --grad-before-2:  rgba(245,248,250,.85);
+      --grad-before-3:  rgba(245,248,250,.35);
+      --grad-after-2:   rgba(245,248,250,.25);
+      --help-card-bg:   rgba(0,0,0,0.03);
+      --help-card-border: rgba(0,0,0,0.08);
+      --btn-contact-text: #04091a;
+    }
+    @media (prefers-color-scheme: light) {
+      :root[data-theme="system"] {
+        --bg:             #f5f8fa;
+        --text-main:      #04091a;
+        --text-dim1:      rgba(4,9,26,0.82);
+        --text-dim2:      rgba(4,9,26,0.62);
+        --text-dim3:      rgba(4,9,26,0.48);
+        --text-dim4:      rgba(4,9,26,0.66);
+        --text-dim5:      rgba(4,9,26,0.5);
+        --text-dim6:      rgba(4,9,26,0.38);
+        --text-dim7:      rgba(4,9,26,0.42);
+        --text-dim8:      rgba(4,9,26,0.3);
+        --border-btn:     rgba(4,9,26,0.18);
+        --border-nav:     rgba(4,9,26,0.16);
+        --bg-panther:     url('https://dll.nehonix.com/assets/XyPriss/xp-template-bgimg-light.png');
+        --grad-before-1:  #f5f8fa;
+        --grad-before-2:  rgba(245,248,250,.85);
+        --grad-before-3:  rgba(245,248,250,.35);
+        --grad-after-2:   rgba(245,248,250,.25);
+        --help-card-bg:   rgba(0,0,0,0.03);
+        --help-card-border: rgba(0,0,0,0.08);
+        --btn-contact-text: #04091a;
+      }
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; background: var(--bg); font-family: 'Inter', sans-serif; color: var(--text-main); overflow-x: hidden; }
+    .page { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
+    /* ── Background ── */
+    .bg-panther {
+      position: absolute; top: 0; right: 0;
+      width: 60%; height: 100%;
+      background: var(--bg-panther) center center / cover no-repeat;
+      pointer-events: none; z-index: 0;
+    }
+    .bg-panther::before {
+      content: ''; position: absolute; inset: 0;
+      background: linear-gradient(to right,
+        var(--grad-before-1) 0%,
+        var(--grad-before-2) 25%,
+        var(--grad-before-3) 50%,
+        transparent 70%
+      );
+    }
+    .bg-panther::after {
+      content: ''; position: absolute; inset: 0;
+      background: linear-gradient(to top, var(--grad-before-1) 0%, var(--grad-after-2) 14%, transparent 30%);
+    }
+    .content { position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column; }
+    /* ── Logo (text only) ── */
+    .logo-name {
+      font-family: 'Rajdhani', sans-serif;
+      font-size: 25px; font-weight: 700; letter-spacing: .4px; line-height: 1;
+    }
+    .logo-name .xy { color: var(--blue); }
+    .logo-sub {
+      font-size: 7.5px; letter-spacing: 1.4px; font-weight: 600; margin-top: 3px;
+      color: var(--text-dim6);
+      text-transform: uppercase;
+    }
+    /* ── Nav back button ── */
+    .nav-back {
+      display: inline-flex; align-items: center; gap: 8px;
+      padding: 9px 20px;
+      border: 1px solid var(--border-nav);
+      border-radius: 8px; font-size: 14px; font-weight: 500;
+      color: var(--text-dim1); text-decoration: none; background: transparent;
+      transition: border-color .2s, color .2s;
+    }
+    .nav-back:hover { border-color: var(--blue); color: var(--blue); }
+    /* ── Badge ── */
+    .badge {
+      display: inline-flex; align-items: center; gap: 8px;
+      border: 1px solid rgba(30,120,220,0.38);
+      border-radius: 5px; padding: 5px 13px;
+      font-family: 'Rajdhani', sans-serif;
+      font-size: 11.5px; letter-spacing: 2.8px; font-weight: 600;
+      color: var(--text-dim2);
+      background: rgba(0,120,220,0.05);
+    }
+    /* ── Headlines ── */
+    .h1-white {
+      font-family: 'Rajdhani', sans-serif;
+      font-size: clamp(40px, 4.6vw, 64px);
+      font-weight: 700; line-height: 1.08; color: var(--text-main);
+    }
+    .h1-blue {
+      font-family: 'Rajdhani', sans-serif;
+      font-size: clamp(40px, 4.6vw, 64px);
+      font-weight: 700; line-height: 1.08; font-style: italic;
+      color: var(--blue);
+      text-shadow: 0 0 26px rgba(26,159,255,0.42);
+    }
+    /* ── PATH line — inline after sub-text ── */
+    .path-line {
+      display: flex; align-items: center; gap: 8px;
+      margin-top: 16px;
+      font-size: 14px; color: var(--text-dim3); line-height: 1.7;
+    }
+    .path-token {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 13px; color: rgba(26,159,255,0.88);
+      background: rgba(26,159,255,0.07);
+      border: 1px solid rgba(26,159,255,0.2);
+      border-radius: 5px; padding: 2px 10px;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
+    }
+    .path-icon { color: var(--text-dim8); flex-shrink: 0; }
+    .sub-text { font-size: 14.5px; line-height: 1.7; color: var(--text-dim4); margin-top: 6px; }
+    /* ── Buttons ── */
+    .btn-primary {
+      display: inline-flex; align-items: center; gap: 8px;
+      padding: 12px 24px;
+      background: linear-gradient(135deg, #1a9fff 0%, #005fcc 100%);
+      border: 1px solid rgba(26,159,255,0.32);
+      border-radius: 8px; font-size: 14.5px; font-weight: 600;
+      color: #fff; text-decoration: none;
+      box-shadow: 0 4px 20px rgba(26,159,255,0.26);
+      transition: all .22s ease;
+    }
+    .btn-primary:hover { background: linear-gradient(135deg,#33aaff,#0077ee); box-shadow: 0 6px 28px rgba(26,159,255,0.4); transform: translateY(-1px); }
+    .btn-secondary {
+      display: inline-flex; align-items: center; gap: 8px;
+      padding: 11px 24px;
+      border: 1px solid var(--border-btn);
+      border-radius: 8px; font-size: 14.5px; font-weight: 600;
+      color: var(--text-main); text-decoration: none; background: transparent;
+      transition: all .22s ease;
+    }
+    .btn-secondary:hover { border-color: var(--blue); color: var(--blue); background: rgba(26,159,255,0.05); }
+    /* ── Help card ── */
+    .help-card {
+      background: var(--help-card-bg);
+      border: 1px solid var(--help-card-border);
+      border-radius: 11px; padding: 22px 26px;
+      display: flex; align-items: center; justify-content: space-between; gap: 18px;
+      margin-top: 42px;
+    }
+    .help-icon {
+      width: 46px; height: 46px; border-radius: 50%;
+      border: 1.8px solid var(--blue);
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0; color: var(--blue);
+      box-shadow: 0 0 13px rgba(26,159,255,0.26), inset 0 0 8px rgba(26,159,255,0.07);
+    }
+    .btn-contact {
+      display: inline-flex; align-items: center; gap: 8px;
+      padding: 10px 20px;
+      border: 1px solid rgba(26,159,255,0.3);
+      border-radius: 8px; font-size: 14px; font-weight: 600;
+      color: var(--btn-contact-text); text-decoration: none;
+      background: rgba(26,159,255,0.06);
+      transition: all .2s ease; white-space: nowrap;
+    }
+    .btn-contact:hover { background: rgba(26,159,255,0.14); border-color: var(--blue); }
+    .help-text { font-size:13.5px; color:var(--text-dim4); line-height:1.65; }
+    /* ── Footer ── */
+    .footer { border-top: 1px solid rgba(26,159,255,0.09); }
+    .footer-link { color: var(--blue); text-decoration: none; font-size: 13.5px; font-weight: 500; }
+    .footer-link:hover { text-decoration: underline; }
+    .footer-dim { color: var(--text-dim7); font-size: 13.5px; }
+    .server-chip {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 11.5px; color: var(--text-dim5);
+      background: rgba(26,159,255,0.06);
+      border: 1px solid rgba(26,159,255,0.14);
+      border-radius: 4px; padding: 2px 8px;
+    }
+    /* Animations */
+    @keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
+    @keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
+    .a1 { animation: fadeUp .52s ease both .04s; }
+    .a2 { animation: fadeUp .52s ease both .13s; }
+    .a3 { animation: fadeUp .52s ease both .22s; }
+    .a4 { animation: fadeUp .52s ease both .30s; }
+    .a5 { animation: fadeUp .52s ease both .38s; }
+    .abg { animation: fadeIn .9s ease both; }
+  </style>
+  ${customCssBlock}
+</head>
+<body>
+<div class="page">
+  <div class="bg-panther abg"></div>
+  <div class="content">
+    <!-- NAVBAR -->
+    <nav style="display:flex;align-items:center;justify-content:space-between;padding:22px 46px;">
+      <div>
+        <div class="logo-name"><span class="xy">Xy</span>Priss</div>
+        <div class="logo-sub">Performance · Security · Productivity</div>
+      </div>
+      <a href="/" class="nav-back">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+          <path d="M19 12H5M5 12l7-7M5 12l7 7"/>
+        </svg>
+        Back to home
+      </a>
+    </nav>
+    <!-- MAIN -->
+    <main style="flex:1;display:flex;align-items:center;padding:0 8vw 28px;">
+      <div style="max-width:510px; margin-left: 2vw;">
+        <div class="badge a1">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+          </svg>
+          404 &nbsp;·&nbsp; PAGE NOT FOUND &nbsp;
+        </div>
+        <div style="margin-top:22px;">
+          <div class="h1-white a2" style="word-break: break-all;">
+            Cannot <span class="h1-blue">${d.requestedMethod}</span> <span style="font-family: 'JetBrains Mono', monospace; font-size: 0.7em; color: var(--text-dim1);">${d.requestedPath}</span>
+          </div>
         </div>
-    </body>
-</html>
-`;
+        <div class="a4">
+          <p class="sub-text" style="margin-top: 16px;">
+            ${messageText}
+          </p>
+        </div>
+        <div class="a5" style="display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;">
+          <a href="${redirectUrl}" class="btn-primary">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
+              <polyline points="9 22 9 12 15 12 15 22"/>
+            </svg>
+            ${redirectLabel}
+          </a>
+          <a href="javascript:history.back()" class="btn-secondary">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M5 12h14M12 5l7 7-7 7"/>
+            </svg>
+            Go Back
+          </a>
+        </div>
+        ${contactBlock}
+      </div>
+    </main>
+    <!-- FOOTER -->
+    <footer class="footer" style="padding:17px 46px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;">
+      <span class="server-chip">${d.appName || "XyPriss"}</span>
+      <span class="footer-dim" id="footer-copy"></span>
+      <div style="display:flex;align-items:center;gap:16px;">
+        <a href="https://xypriss.nehonix.com/docs" target="_blank" rel="noopener noreferrer" class="footer-link">Documentation</a>
+        <span class="footer-dim">|</span>
+        <a href="https://github.com/Nehonix-Team/XyPriss" target="_blank" rel="noopener noreferrer" class="footer-link">GitHub</a>
+      </div>
+    </footer>
+  </div>
+</div>
+<script>
+  const year = new Date().getFullYear();
+  const copy = year > 2024
+    ? \`\\u00A9 2024\\u2013\${year} XyPriss. All rights reserved.\`
+    : '\\u00A9 2024 XyPriss. All rights reserved.';
+  document.getElementById('footer-copy').textContent = copy;
+</script>
+${scriptBlock}
+</body>
+</html>`;
     return html;
 }