Commit: 4617f76

Commit Details

SHA	`4617f76246bf039920879ae5497436d31494ed7c`
Tree	`e78bcb155880b8c167af124554a6db724c41264e`
Author	<f69e50@finnacloud.com> 1766442953 +0300
Committer	<f69e50@finnacloud.com> 1766442953 +0300
Message	rename branch from main to master oops
GPG Signature	-----BEGIN PGP SIGNATURE----- iQJSBAABCAA8FiEEWJb139mJI+vZ81KkoAIVSUsXI0oFAmlJx8keHHNvcGhpYS5l cmFzbGFuQGZpbm5hY2xvdWQuY29tAAoJEKACFUlLFyNK2BQP/3EfkXtKsmQoqa4E e9jdO5BKWUnHwF31PdpxExXwoogkZg2hSjSc0jB9htAKSbQspx+Pst7f9yj2Gf2u ENGTEQHqqVeLEve2IPc1YJ+F+yedI3NE2PCZJ0+rh1/S14vQTT0kWMSqs6d8Te4K x4hiTNNjfWidOXQ1vHMXl9iUnevmnko8XqNe3aBZ3JUSRLhhCvehsiPwSjfKGqB8 Sm9i1Y/HaTizFfl4WG5f6MppDgzV2I7Bm/c6K1oDIviO/Wken5vk4TXgLUWDfHJ5 d9m9gh4N9unX4Ivf5G22JVRzxPgox0Y0yFQwpj4IqQ9LzjT2Vz2s+hXoV6HZkfUW BCLc/6oRmImcSflxOgV/TGaZrvysQ0pz32H8lyLoOI1QAS3o4u1icPFjfHlc5298 zpjGAqPjlVEx4Sjghrow4pb7sb/OyFihTwfjxlLgVfR4tXfb/l5rRt2f9vsm1HJB qc9F/Qqc6xpb9ECyYZtuuCMToS0MRNkqy2KifrvOaKi2EznhcJu2VcLmjQJookFY meevIkRenUvjwbs+aoDOa76HmycWkw1NtTtE9M+NSZ9SCBOD+Gp1rqO66z758bUQ NmISh50GPDiZw5AKDrtsygWRZumLbrWHBleHm935V5O3gYkEKo9kb40Zf2sDsvlS /wXQCTVz3XuSby3pyaMGgd3ol6gk =YOD1 -----END PGP SIGNATURE----- ✓ Verified

File: src/main/resources/templates/502.html

← Back to commit | View | Raw | History | Compare

      
      <!DOCTYPE html>
    
      <html lang="en">
    
      <head>
    
        <meta charset="UTF-8" />
    
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    
        <title>502 · Bad Gateway</title>
    
        <style>
    
          :root {
    
            --bg: #0b0f14;
    
            --card: #111827;
    
            --accent: #38bdf8;
    
            --muted: #94a3b8;
    
            --text: #e5e7eb;
    
            --danger: #ef4444;
    
            --success: #10b981;
    
          }
    
          * { box-sizing: border-box; margin: 0; padding: 0; }
    
          body {
    
            margin: 0;
    
            min-height: 100vh;
    
            display: grid;
    
            place-items: center;
    
            background:
    
              radial-gradient(1200px 600px at 10% -10%, #0ea5e955, transparent 40%),
    
              radial-gradient(800px 400px at 90% 10%, #22d3ee33, transparent 45%),
    
              var(--bg);
    
            color: var(--text);
    
            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    
            padding: 20px;
    
          }
    
          .card {
    
            width: min(740px, 100%);
    
            background: linear-gradient(180deg, #0f172a, var(--card));
    
            border: 1px solid #1f2937;
    
            border-radius: 16px;
    
            padding: 36px 40px 40px;
    
            box-shadow:
    
              0 20px 40px rgba(0,0,0,.45),
    
              inset 0 1px 0 rgba(255,255,255,.04);
    
          }
    
          .status {
    
            display: inline-flex;
    
            align-items: center;
    
            gap: 10px;
    
            padding: 7px 14px;
    
            border-radius: 999px;
    
            background: rgba(239,68,68,.12);
    
            color: var(--danger);
    
            font-weight: 600;
    
            font-size: 0.9rem;
    
            letter-spacing: .02em;
    
            margin-bottom: 20px;
    
          }
    
          .status::before {
    
            content: "";
    
            width: 10px;
    
            height: 10px;
    
            border-radius: 50%;
    
            background: var(--danger);
    
            box-shadow: 0 0 12px var(--danger);
    
            animation: blink 2s infinite ease-in-out;
    
          }
    
          @keyframes blink {
    
            0%, 100% { opacity: 1; }
    
            50% { opacity: 0.3; }
    
          }
    
          h1 {
    
            font-size: clamp(2.2rem, 4vw, 3rem);
    
            margin: 8px 0 14px;
    
            line-height: 1.1;
    
            font-weight: 700;
    
          }
    
          p {
    
            color: var(--muted);
    
            font-size: 1.05rem;
    
            line-height: 1.65;
    
            margin: 0 0 24px;
    
          }
    
          .info-box {
    
            background: rgba(56,189,248,.08);
    
            border: 1px solid rgba(56,189,248,.2);
    
            border-radius: 12px;
    
            padding: 18px 22px;
    
            margin-bottom: 28px;
    
            display: flex;
    
            align-items: start;
    
            gap: 14px;
    
          }
    
          .info-box svg {
    
            color: var(--accent);
    
            flex-shrink: 0;
    
            margin-top: 2px;
    
          }
    
          .info-box-content {
    
            font-size: 0.92rem;
    
            line-height: 1.6;
    
            color: #cbd5f5;
    
          }
    
          .info-box-content strong {
    
            display: block;
    
            margin-bottom: 6px;
    
            color: var(--accent);
    
            font-size: 0.95rem;
    
          }
    
          .details {
    
            display: grid;
    
            grid-template-columns: 1fr 1fr;
    
            gap: 16px 28px;
    
            margin: 24px 0 32px;
    
            padding: 20px 22px;
    
            border-radius: 12px;
    
            background: rgba(15,23,42,.6);
    
            border: 1px solid #1f2937;
    
            font-size: .95rem;
    
          }
    
          .details strong {
    
            color: #cbd5f5;
    
            display: block;
    
            margin-bottom: 6px;
    
            font-size: 0.88rem;
    
            text-transform: uppercase;
    
            letter-spacing: 0.03em;
    
          }
    
          .details span {
    
            color: var(--muted);
    
            display: flex;
    
            align-items: center;
    
            gap: 6px;
    
          }
    
          .actions {
    
            display: flex;
    
            flex-wrap: wrap;
    
            gap: 12px;
    
            margin-bottom: 8px;
    
          }
    
          .btn {
    
            appearance: none;
    
            border: 1px solid #1f2937;
    
            border-radius: 10px;
    
            padding: 12px 20px;
    
            font-weight: 600;
    
            font-size: 0.95rem;
    
            background: #020617;
    
            color: var(--text);
    
            cursor: pointer;
    
            display: inline-flex;
    
            align-items: center;
    
            justify-content: center;
    
            gap: 8px;
    
            height: 44px;
    
            min-width: 120px;
    
          }
    
          .btn.primary {
    
            background: #0ea5e9;
    
            border-color: #0ea5e9;
    
            color: #020617;
    
          }
    
          .btn svg {
    
            width: 16px;
    
            height: 16px;
    
          }
    
          footer {
    
            margin-top: 28px;
    
            padding-top: 24px;
    
            border-top: 1px solid #1f2937;
    
            display: flex;
    
            flex-direction: column;
    
            gap: 16px;
    
          }
    
          .help-section {
    
            display: flex;
    
            flex-wrap: wrap;
    
            align-items: center;
    
            gap: 20px;
    
            justify-content: space-between;
    
          }
    
          .help-section > span {
    
            color: var(--muted);
    
            font-size: 0.9rem;
    
          }
    
          .help-links {
    
            display: flex;
    
            flex-wrap: wrap;
    
            gap: 18px;
    
            align-items: center;
    
          }
    
          .help-links a {
    
            display: flex;
    
            align-items: center;
    
            gap: 7px;
    
            color: var(--accent);
    
            text-decoration: none;
    
            font-size: 0.9rem;
    
            font-weight: 500;
    
          }
    
          .help-links svg {
    
            width: 16px;
    
            height: 16px;
    
          }
    
          .error-info {
    
            display: flex;
    
            justify-content: space-between;
    
            align-items: center;
    
            flex-wrap: wrap;
    
            gap: 12px;
    
          }
    
          .error-info span {
    
            font-size: 0.82rem;
    
            color: #64748b;
    
          }
    
          .error-code {
    
            font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    
            font-size: 0.82rem;
    
            padding: 5px 10px;
    
            background: rgba(15,23,42,.9);
    
            border: 1px solid #1f2937;
    
            border-radius: 6px;
    
            color: var(--accent);
    
            font-weight: 600;
    
          }
    
          .powered {
    
            margin-top: 28px;
    
            display: flex;
    
            flex-direction: column;
    
            gap: 12px;
    
          }
    
          .powered-line {
    
            height: 1px;
    
            background: linear-gradient(
    
              90deg,
    
              transparent,
    
              rgba(148,163,184,.25),
    
              transparent
    
            );
    
          }
    
          .powered-by {
    
            display: flex;
    
            align-items: center;
    
            justify-content: center;
    
            gap: 8px;
    
            font-size: .75rem;
    
            color: #64748b;
    
          }
    
          .powered-by strong {
    
            color: #cbd5f5;
    
            font-weight: 700;
    
          }
    
          .powered-by a {
    
            color: #cbd5f5;
    
            text-decoration: none;
    
            font-weight: 700;
    
          }
    
          @media (max-width: 640px) {
    
            body {
    
              padding: 12px;
    
            }
    
            .card {
    
              padding: 24px 20px 28px;
    
              border-radius: 12px;
    
            }
    
            .status {
    
              font-size: 0.8rem;
    
              padding: 6px 12px;
    
              gap: 8px;
    
              margin-bottom: 16px;
    
            }
    
            .status::before {
    
              width: 8px;
    
              height: 8px;
    
            }
    
            h1 {
    
              font-size: clamp(1.6rem, 7vw, 2.2rem);
    
              margin: 6px 0 12px;
    
            }
    
            p {
    
              font-size: 0.95rem;
    
              margin: 0 0 20px;
    
            }
    
            .info-box {
    
              padding: 14px 16px;
    
              margin-bottom: 20px;
    
              gap: 12px;
    
            }
    
            .info-box svg {
    
              width: 18px;
    
              height: 18px;
    
            }
    
            .info-box-content {
    
              font-size: 0.85rem;
    
            }
    
            .info-box-content strong {
    
              font-size: 0.88rem;
    
              margin-bottom: 4px;
    
            }
    
            .details {
    
              grid-template-columns: 1fr;
    
              gap: 14px;
    
              margin: 20px 0 24px;
    
              padding: 16px;
    
              font-size: 0.88rem;
    
            }
    
            .details strong {
    
              font-size: 0.8rem;
    
              margin-bottom: 5px;
    
            }
    
            .details span {
    
              font-size: 0.85rem;
    
            }
    
            .actions {
    
              flex-direction: column;
    
              gap: 10px;
    
              margin-bottom: 0;
    
            }
    
            .btn {
    
              width: 100%;
    
              justify-content: center;
    
              padding: 12px 16px;
    
              font-size: 0.9rem;
    
            }
    
            footer {
    
              margin-top: 24px;
    
              padding-top: 20px;
    
              gap: 14px;
    
            }
    
            .help-section {
    
              flex-direction: column;
    
              align-items: flex-start;
    
              gap: 12px;
    
            }
    
            .help-section > span {
    
              font-size: 0.85rem;
    
            }
    
            .help-links {
    
              width: 100%;
    
              flex-direction: column;
    
              align-items: flex-start;
    
              gap: 10px;
    
            }
    
            .help-links a {
    
              font-size: 0.85rem;
    
            }
    
            .error-info {
    
              flex-direction: column;
    
              align-items: flex-start;
    
              gap: 10px;
    
            }
    
            .error-info span {
    
              font-size: 0.78rem;
    
            }
    
            .error-code {
    
              font-size: 0.75rem;
    
              padding: 4px 8px;
    
            }
    
            .powered {
    
              margin-top: 20px;
    
              gap: 10px;
    
            }
    
            .powered-by {
    
              font-size: 0.7rem;
    
              gap: 6px;
    
            }
    
          }
    
          @media (max-width: 375px) {
    
            body {
    
              padding: 8px;
    
            }
    
            .card {
    
              padding: 20px 16px 24px;
    
            }
    
            h1 {
    
              font-size: 1.5rem;
    
            }
    
            p {
    
              font-size: 0.9rem;
    
            }
    
            .info-box {
    
              padding: 12px 14px;
    
            }
    
            .info-box-content {
    
              font-size: 0.82rem;
    
            }
    
            .details {
    
              padding: 14px;
    
              gap: 12px;
    
            }
    
            .btn {
    
              font-size: 0.85rem;
    
              height: 42px;
    
            }
    
          }
    
        </style>
    
      </head>
    
      <body>
    
        <main class="card">
    
          <div class="status">502 · Bad Gateway</div>
    
          <h1>Service Temporarily Unavailable</h1>
    
          <p>The upstream server didn't respond in time. Don't worry—this is usually temporary and resolves within seconds.</p>
    
          <div class="info-box">
    
            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    
            </svg>
    
            <div class="info-box-content">
    
              <strong>What happened?</strong>
    
              Our edge network is online, but the origin server didn't respond within the timeout window. This can occur during high traffic, deployments, or temporary network issues.
    
            </div>
    
          </div>
    
          <section class="details">
    
            <div><strong>Edge Network</strong><br><span style="color: var(--success);"><svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" style="vertical-align: middle; margin-right: 6px;"><circle cx="5" cy="5" r="5"/></svg>Online</span></div>
    
            <div><strong>Origin Server</strong><br><span style="color: var(--danger);"><svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" style="vertical-align: middle; margin-right: 6px;"><circle cx="5" cy="5" r="5"/></svg>Timeout</span></div>
    
            <div><strong>Request ID</strong><br><span style="font-family: monospace; font-size: 0.85rem;"><!--# echo var="request_id" --></span></div>
    
            <div><strong>Timestamp</strong><br><span style="font-size: 0.85rem;"><!--# echo var="time_iso8601" --></span></div>
    
          </section>
    
          <div class="actions">
    
            <button class="btn primary" onclick="location.reload()">
    
              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
    
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
    
              </svg>
    
              Retry
    
            </button>
    
            <button class="btn" onclick="history.back()">
    
              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
    
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
    
              </svg>
    
              Go Back
    
            </button>
    
          </div>
    
          <footer>
    
            <div class="help-section">
    
              <span>Having trouble? We're here to help</span>
    
              <div class="help-links">
    
                <a href="https://status.finnacloud.com" target="_blank" rel="noopener">
    
                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
    
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    
                  </svg>
    
                  System Status
    
                </a>
    
                <a href="mailto:noc@finnacloud.com">
    
                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
    
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
    
                  </svg>
    
                  Contact NOC
    
                </a>
    
              </div>
    
            </div>
    
            <div class="error-info">
    
              <span><svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" style="vertical-align: middle; margin-right: 6px;"><circle cx="4" cy="4" r="4"/></svg>This error has been automatically logged and is being investigated</span>
    
              <span class="error-code">ERR_BAD_GATEWAY</span>
    
            </div>
    
          </footer>
    
          <div class="powered">
    
            <div class="powered-line"></div>
    
            <div class="powered-by">
    
              <span>Powered by <a href="https://finnacloud.com"><strong>FinnaCloud</strong></a></span>
    
            </div>
    
          </div>
    
        </main>
    
      </body>
    
      </html>

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8" />
5	<meta name="viewport" content="width=device-width, initial-scale=1" />
6	<title>502 · Bad Gateway</title>
7	<style>
8	:root {
9	--bg: #0b0f14;
10	--card: #111827;
11	--accent: #38bdf8;
12	--muted: #94a3b8;
13	--text: #e5e7eb;
14	--danger: #ef4444;
15	--success: #10b981;
16	}
17
18	* { box-sizing: border-box; margin: 0; padding: 0; }
19
20	body {
21	margin: 0;
22	min-height: 100vh;
23	display: grid;
24	place-items: center;
25	background:
26	radial-gradient(1200px 600px at 10% -10%, #0ea5e955, transparent 40%),
27	radial-gradient(800px 400px at 90% 10%, #22d3ee33, transparent 45%),
28	var(--bg);
29	color: var(--text);
30	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
31	padding: 20px;
32	}
33
34	.card {
35	width: min(740px, 100%);
36	background: linear-gradient(180deg, #0f172a, var(--card));
37	border: 1px solid #1f2937;
38	border-radius: 16px;
39	padding: 36px 40px 40px;
40	box-shadow:
41	0 20px 40px rgba(0,0,0,.45),
42	inset 0 1px 0 rgba(255,255,255,.04);
43	}
44
45	.status {
46	display: inline-flex;
47	align-items: center;
48	gap: 10px;
49	padding: 7px 14px;
50	border-radius: 999px;
51	background: rgba(239,68,68,.12);
52	color: var(--danger);
53	font-weight: 600;
54	font-size: 0.9rem;
55	letter-spacing: .02em;
56	margin-bottom: 20px;
57	}
58
59	.status::before {
60	content: "";
61	width: 10px;
62	height: 10px;
63	border-radius: 50%;
64	background: var(--danger);
65	box-shadow: 0 0 12px var(--danger);
66	animation: blink 2s infinite ease-in-out;
67	}
68
69	@keyframes blink {
70	0%, 100% { opacity: 1; }
71	50% { opacity: 0.3; }
72	}
73
74	h1 {
75	font-size: clamp(2.2rem, 4vw, 3rem);
76	margin: 8px 0 14px;
77	line-height: 1.1;
78	font-weight: 700;
79	}
80
81	p {
82	color: var(--muted);
83	font-size: 1.05rem;
84	line-height: 1.65;
85	margin: 0 0 24px;
86	}
87
88	.info-box {
89	background: rgba(56,189,248,.08);
90	border: 1px solid rgba(56,189,248,.2);
91	border-radius: 12px;
92	padding: 18px 22px;
93	margin-bottom: 28px;
94	display: flex;
95	align-items: start;
96	gap: 14px;
97	}
98
99	.info-box svg {
100	color: var(--accent);
101	flex-shrink: 0;
102	margin-top: 2px;
103	}
104
105	.info-box-content {
106	font-size: 0.92rem;
107	line-height: 1.6;
108	color: #cbd5f5;
109	}
110
111	.info-box-content strong {
112	display: block;
113	margin-bottom: 6px;
114	color: var(--accent);
115	font-size: 0.95rem;
116	}
117
118	.details {
119	display: grid;
120	grid-template-columns: 1fr 1fr;
121	gap: 16px 28px;
122	margin: 24px 0 32px;
123	padding: 20px 22px;
124	border-radius: 12px;
125	background: rgba(15,23,42,.6);
126	border: 1px solid #1f2937;
127	font-size: .95rem;
128	}
129
130	.details strong {
131	color: #cbd5f5;
132	display: block;
133	margin-bottom: 6px;
134	font-size: 0.88rem;
135	text-transform: uppercase;
136	letter-spacing: 0.03em;
137	}
138
139	.details span {
140	color: var(--muted);
141	display: flex;
142	align-items: center;
143	gap: 6px;
144	}
145
146	.actions {
147	display: flex;
148	flex-wrap: wrap;
149	gap: 12px;
150	margin-bottom: 8px;
151	}
152
153	.btn {
154	appearance: none;
155	border: 1px solid #1f2937;
156	border-radius: 10px;
157	padding: 12px 20px;
158	font-weight: 600;
159	font-size: 0.95rem;
160	background: #020617;
161	color: var(--text);
162	cursor: pointer;
163	display: inline-flex;
164	align-items: center;
165	justify-content: center;
166	gap: 8px;
167	height: 44px;
168	min-width: 120px;
169	}
170
171	.btn.primary {
172	background: #0ea5e9;
173	border-color: #0ea5e9;
174	color: #020617;
175	}
176
177	.btn svg {
178	width: 16px;
179	height: 16px;
180	}
181
182	footer {
183	margin-top: 28px;
184	padding-top: 24px;
185	border-top: 1px solid #1f2937;
186	display: flex;
187	flex-direction: column;
188	gap: 16px;
189	}
190
191	.help-section {
192	display: flex;
193	flex-wrap: wrap;
194	align-items: center;
195	gap: 20px;
196	justify-content: space-between;
197	}
198
199	.help-section > span {
200	color: var(--muted);
201	font-size: 0.9rem;
202	}
203
204	.help-links {
205	display: flex;
206	flex-wrap: wrap;
207	gap: 18px;
208	align-items: center;
209	}
210
211	.help-links a {
212	display: flex;
213	align-items: center;
214	gap: 7px;
215	color: var(--accent);
216	text-decoration: none;
217	font-size: 0.9rem;
218	font-weight: 500;
219	}
220
221	.help-links svg {
222	width: 16px;
223	height: 16px;
224	}
225
226	.error-info {
227	display: flex;
228	justify-content: space-between;
229	align-items: center;
230	flex-wrap: wrap;
231	gap: 12px;
232	}
233
234	.error-info span {
235	font-size: 0.82rem;
236	color: #64748b;
237	}
238
239	.error-code {
240	font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
241	font-size: 0.82rem;
242	padding: 5px 10px;
243	background: rgba(15,23,42,.9);
244	border: 1px solid #1f2937;
245	border-radius: 6px;
246	color: var(--accent);
247	font-weight: 600;
248	}
249
250	.powered {
251	margin-top: 28px;
252	display: flex;
253	flex-direction: column;
254	gap: 12px;
255	}
256
257	.powered-line {
258	height: 1px;
259	background: linear-gradient(
260	90deg,
261	transparent,
262	rgba(148,163,184,.25),
263	transparent
264	);
265	}
266
267	.powered-by {
268	display: flex;
269	align-items: center;
270	justify-content: center;
271	gap: 8px;
272	font-size: .75rem;
273	color: #64748b;
274	}
275
276	.powered-by strong {
277	color: #cbd5f5;
278	font-weight: 700;
279	}
280
281	.powered-by a {
282	color: #cbd5f5;
283	text-decoration: none;
284	font-weight: 700;
285	}
286
287	@media (max-width: 640px) {
288	body {
289	padding: 12px;
290	}
291
292	.card {
293	padding: 24px 20px 28px;
294	border-radius: 12px;
295	}
296
297	.status {
298	font-size: 0.8rem;
299	padding: 6px 12px;
300	gap: 8px;
301	margin-bottom: 16px;
302	}
303
304	.status::before {
305	width: 8px;
306	height: 8px;
307	}
308
309	h1 {
310	font-size: clamp(1.6rem, 7vw, 2.2rem);
311	margin: 6px 0 12px;
312	}
313
314	p {
315	font-size: 0.95rem;
316	margin: 0 0 20px;
317	}
318
319	.info-box {
320	padding: 14px 16px;
321	margin-bottom: 20px;
322	gap: 12px;
323	}
324
325	.info-box svg {
326	width: 18px;
327	height: 18px;
328	}
329
330	.info-box-content {
331	font-size: 0.85rem;
332	}
333
334	.info-box-content strong {
335	font-size: 0.88rem;
336	margin-bottom: 4px;
337	}
338
339	.details {
340	grid-template-columns: 1fr;
341	gap: 14px;
342	margin: 20px 0 24px;
343	padding: 16px;
344	font-size: 0.88rem;
345	}
346
347	.details strong {
348	font-size: 0.8rem;
349	margin-bottom: 5px;
350	}
351
352	.details span {
353	font-size: 0.85rem;
354	}
355
356	.actions {
357	flex-direction: column;
358	gap: 10px;
359	margin-bottom: 0;
360	}
361
362	.btn {
363	width: 100%;
364	justify-content: center;
365	padding: 12px 16px;
366	font-size: 0.9rem;
367	}
368
369	footer {
370	margin-top: 24px;
371	padding-top: 20px;
372	gap: 14px;
373	}
374
375	.help-section {
376	flex-direction: column;
377	align-items: flex-start;
378	gap: 12px;
379	}
380
381	.help-section > span {
382	font-size: 0.85rem;
383	}
384
385	.help-links {
386	width: 100%;
387	flex-direction: column;
388	align-items: flex-start;
389	gap: 10px;
390	}
391
392	.help-links a {
393	font-size: 0.85rem;
394	}
395
396	.error-info {
397	flex-direction: column;
398	align-items: flex-start;
399	gap: 10px;
400	}
401
402	.error-info span {
403	font-size: 0.78rem;
404	}
405
406	.error-code {
407	font-size: 0.75rem;
408	padding: 4px 8px;
409	}
410
411	.powered {
412	margin-top: 20px;
413	gap: 10px;
414	}
415
416	.powered-by {
417	font-size: 0.7rem;
418	gap: 6px;
419	}
420	}
421
422	@media (max-width: 375px) {
423	body {
424	padding: 8px;
425	}
426
427	.card {
428	padding: 20px 16px 24px;
429	}
430
431	h1 {
432	font-size: 1.5rem;
433	}
434
435	p {
436	font-size: 0.9rem;
437	}
438
439	.info-box {
440	padding: 12px 14px;
441	}
442
443	.info-box-content {
444	font-size: 0.82rem;
445	}
446
447	.details {
448	padding: 14px;
449	gap: 12px;
450	}
451
452	.btn {
453	font-size: 0.85rem;
454	height: 42px;
455	}
456	}
457	</style>
458	</head>
459	<body>
460	<main class="card">
461	<div class="status">502 · Bad Gateway</div>
462
463	<h1>Service Temporarily Unavailable</h1>
464
465	<p>The upstream server didn't respond in time. Don't worry—this is usually temporary and resolves within seconds.</p>
466
467	<div class="info-box">
468	<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
469	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
470	</svg>
471	<div class="info-box-content">
472	<strong>What happened?</strong>
473	Our edge network is online, but the origin server didn't respond within the timeout window. This can occur during high traffic, deployments, or temporary network issues.
474	</div>
475	</div>
476
477	<section class="details">
478	<div><strong>Edge Network</strong><br><span style="color: var(--success);"><svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" style="vertical-align: middle; margin-right: 6px;"><circle cx="5" cy="5" r="5"/></svg>Online</span></div>
479	<div><strong>Origin Server</strong><br><span style="color: var(--danger);"><svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" style="vertical-align: middle; margin-right: 6px;"><circle cx="5" cy="5" r="5"/></svg>Timeout</span></div>
480	<div><strong>Request ID</strong><br><span style="font-family: monospace; font-size: 0.85rem;"><!--# echo var="request_id" --></span></div>
481	<div><strong>Timestamp</strong><br><span style="font-size: 0.85rem;"><!--# echo var="time_iso8601" --></span></div>
482	</section>
483
484	<div class="actions">
485	<button class="btn primary" onclick="location.reload()">
486	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
487	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
488	</svg>
489	Retry
490	</button>
491	<button class="btn" onclick="history.back()">
492	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
493	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
494	</svg>
495	Go Back
496	</button>
497	</div>
498
499	<footer>
500	<div class="help-section">
501	<span>Having trouble? We're here to help</span>
502	<div class="help-links">
503	<a href="https://status.finnacloud.com" target="_blank" rel="noopener">
504	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
505	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
506	</svg>
507	System Status
508	</a>
509	<a href="mailto:noc@finnacloud.com">
510	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
511	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
512	</svg>
513	Contact NOC
514	</a>
515	</div>
516	</div>
517	<div class="error-info">
518	<span><svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" style="vertical-align: middle; margin-right: 6px;"><circle cx="4" cy="4" r="4"/></svg>This error has been automatically logged and is being investigated</span>
519	<span class="error-code">ERR_BAD_GATEWAY</span>
520	</div>
521	</footer>
522
523	<div class="powered">
524	<div class="powered-line"></div>
525	<div class="powered-by">
526	<span>Powered by <a href="https://finnacloud.com"><strong>FinnaCloud</strong></a></span>
527	</div>
528	</div>
529	</main>
530	</body>
531	</html>
532

backend

Commit: 4617f76

Commit Details

File: src/main/resources/templates/502.html