Skip to content

Commit 88e7c39

Browse files
harylharyl
authored
ErrorPage 500: Make the upgrade page multilingual and more like professional
1 parent 439a420 commit 88e7c39

File tree

1 file changed

+271
-48
lines changed

1 file changed

+271
-48
lines changed

‎upgrade.html‎

Lines changed: 271 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,277 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
<!-- ::CLOUDFLARE_ERROR_500S_BOX:: -->
43
<head>
5-
<title>Software Update Maintenance</title>
6-
<meta charset="utf-8"/>
7-
<meta name="description" content/>
8-
<meta name="HandheldFriendly" content="True"/>
9-
<meta name="viewport" content="width=device-width, initial-scale=1"/>
10-
<meta name="robots" content="noindex">
11-
12-
<style>
13-
a:hover,
14-
body{color:#333}a,a:hover{text-decoration:none}h1{font-size:50px}body{text-align:center;padding:80px;font:20px Helvetica,sans-serif}article{display:block;text-align:left;width:80%;margin:0 auto}a{color:#dc8100}</style>
15-
<meta http-equiv="set-cookie" content="cf_use_ob=0; expires=Tue, 08-Aug-17 20:21:35 GMT; path=/">
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Nexxchange GolfSuite - Upgrade in Progress</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
background: url('https://cloud003.nexxchange.com/nl574/static/images/logon_screen_4.jpg') no-repeat center center fixed;
17+
background-size: cover;
18+
min-height: 100vh;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
padding: 2rem 1rem;
23+
position: relative;
24+
}
25+
26+
body::before {
27+
content: '';
28+
position: fixed;
29+
top: 0;
30+
left: 0;
31+
right: 0;
32+
bottom: 0;
33+
background: rgba(0, 0, 0, 0.5);
34+
z-index: 0;
35+
}
36+
37+
.container {
38+
background: rgba(255, 255, 255, 0.95);
39+
max-width: 900px;
40+
width: 100%;
41+
padding: 3rem 2rem;
42+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
43+
border-radius: 4px;
44+
position: relative;
45+
z-index: 1;
46+
}
47+
48+
.header {
49+
text-align: center;
50+
margin-bottom: 2.5rem;
51+
padding-bottom: 2rem;
52+
border-bottom: 1px solid #e9ecef;
53+
}
54+
55+
.logo {
56+
font-size: 3rem;
57+
margin-bottom: 1rem;
58+
}
59+
60+
h1 {
61+
font-size: 2rem;
62+
color: #2c3e50;
63+
margin-bottom: 0.5rem;
64+
font-weight: 600;
65+
}
66+
67+
.subtitle {
68+
font-size: 1.1rem;
69+
color: #6c757d;
70+
font-weight: 400;
71+
}
72+
73+
.progress-section {
74+
text-align: center;
75+
margin: 2rem 0;
76+
padding: 2rem 0;
77+
}
78+
79+
.progress-bar {
80+
width: 100%;
81+
height: 4px;
82+
background: #e9ecef;
83+
border-radius: 2px;
84+
overflow: hidden;
85+
margin-bottom: 1rem;
86+
}
87+
88+
.progress-fill {
89+
height: 100%;
90+
background: #28a745;
91+
animation: progress 2s ease-in-out infinite;
92+
width: 60%;
93+
}
94+
95+
@keyframes progress {
96+
0%, 100% { width: 50%; }
97+
50% { width: 80%; }
98+
}
99+
100+
.spinner {
101+
display: inline-block;
102+
width: 40px;
103+
height: 40px;
104+
border: 4px solid #e9ecef;
105+
border-top-color: #28a745;
106+
border-radius: 50%;
107+
animation: spin 1s linear infinite;
108+
margin: 1rem 0;
109+
}
110+
111+
@keyframes spin {
112+
to { transform: rotate(360deg); }
113+
}
114+
115+
.languages {
116+
margin-top: 2rem;
117+
display: flex;
118+
flex-wrap: wrap;
119+
gap: 2rem;
120+
}
121+
122+
.language-block {
123+
flex: 0 0 calc(50% - 1rem);
124+
margin-bottom: 0;
125+
padding-bottom: 0;
126+
border-bottom: none;
127+
}
128+
129+
.lang-header {
130+
display: flex;
131+
align-items: center;
132+
margin-bottom: 0.75rem;
133+
}
134+
135+
.flag {
136+
font-size: 1.5rem;
137+
margin-right: 0.5rem;
138+
}
139+
140+
.lang-name {
141+
font-size: 1.1rem;
142+
font-weight: 600;
143+
color: #2c3e50;
144+
}
145+
146+
.lang-message {
147+
font-size: 0.95rem;
148+
color: #495057;
149+
line-height: 1.6;
150+
margin-left: 2.25rem;
151+
}
152+
153+
.footer {
154+
text-align: center;
155+
margin-top: 3rem;
156+
padding-top: 2rem;
157+
border-top: 1px solid #e9ecef;
158+
}
159+
160+
.team-name {
161+
font-size: 0.9rem;
162+
color: #6c757d;
163+
font-style: italic;
164+
}
165+
166+
.team-name strong {
167+
color: #28a745;
168+
font-style: normal;
169+
}
170+
171+
@media (max-width: 768px) {
172+
.container {
173+
padding: 2rem 1.5rem;
174+
}
175+
176+
h1 {
177+
font-size: 1.5rem;
178+
}
179+
180+
.subtitle {
181+
font-size: 1rem;
182+
}
183+
184+
.languages {
185+
flex-direction: column;
186+
gap: 1.5rem;
187+
}
188+
189+
.language-block {
190+
flex: 0 0 100%;
191+
padding-bottom: 1.5rem;
192+
border-bottom: 1px solid #e9ecef;
193+
}
194+
195+
196+
}
197+
</style>
198+
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> -->
16199
</head>
17-
<body><div id="cf_alert_div" style="margin: 0;padding: 0;position: relative;top: 0;left: 0;display: block; z-index: 1000">
18-
<div style="margin: 0px;padding: 10px;border-bottom: 1px solid #a5a5a5;background: #f0f0f0;font-weight: normal;text-align: left;">
19-
<table width="100%">
20-
<tr>
21-
<td valign="top">
22-
<a href="#" onclick="document.cookie='cf_use_ob=0;path=/';window.location.reload();return false;" style="margin: 0 20px 0 0;padding: 10px 0 0 20px;text-decoration: none;font: 12px Helvetica,Arial,sans-serif;color: #eff7e8;font-weight: bold;text-align: left;position: relative;display: inline-block;height: 38px;background: url(/cdn-cgi/images/retry.png) no-repeat 0 0;overflow: visible;font-size: 14px;line-height: 1.2em;text-shadow: #437b0a 0 1px 0;white-space: nowrap;">
23-
<span style="margin: 0;padding: 0;position: absolute;top: 0;left: 100%;width: 20px;height: 38px;background: url(/cdn-cgi/images/retry.png) no-repeat 100% -38px;"></span>
24-
</a>
25-
<noscript style="margin: 10px 0 10px 0;padding: 0;font: 12px Helvetica,Arial,sans-serif;color: #404040;display: block;">(Enable Javascript first.)</noscript>
26-
</td>
27-
<td valign="middle" style="margin: 0;padding: 0;">
28-
<p style="margin: 0 0 0 20px;padding: 0;font: 12px Helvetica,Arial,sans-serif;color: #404040;">This page is currently not available. We are working in the background
29-
<span id="caption" style="margin: 0;padding: 0;color: #a5a5a5;">Always Online&trade; is powered by
30-
<a href="https://www.cloudflare.com/5xx-error-landing?utm_source=ao_banner" target="_blank" style="margin: 0;padding: 0;text-decoration: underline;font: 12px Helvetica,Arial,sans-serif;color: #007ed9;font-weight: normal;text-align: left;">Cloudflare</a> |
31-
<a href="javascript:void(null);" onclick="document.getElementById('cf_alert_div').style.display='none';" style="margin: 0;padding: 0;text-decoration: underline;font: 12px Helvetica,Arial,sans-serif;color: #007ed9;font-weight: normal;text-align: left;">Hide this Alert</a>
32-
</span>
33-
</p>
34-
</td>
35-
</tr>
36-
</table>
200+
<body>
201+
<div class="container">
202+
<div class="header">
203+
<div class="logo">⛳</div>
204+
<h1>Nexxchange Golf Suite</h1>
205+
</div>
206+
207+
<div class="progress-section">
208+
<p class="subtitle">Upgrade in Progress</p>
209+
<div class="spinner"></div>
210+
</div>
211+
212+
<div class="languages">
213+
<!-- German -->
214+
<!-- English -->
215+
<div class="language-block">
216+
<div class="lang-header">
217+
<span class="flag">🇬🇧</span>
218+
<span class="lang-name">English</span>
219+
</div>
220+
<p class="lang-message">
221+
We're currently upgrading GolfSuite to make it even better for you. Our team is working hard to deliver an enhanced experience. Sorry for the inconvenience. We'll be back online shortly!
222+
</p>
223+
</div>
224+
225+
<div class="language-block">
226+
<div class="lang-header">
227+
<span class="flag">🇩🇪</span>
228+
<span class="lang-name">Deutsch</span>
229+
</div>
230+
<p class="lang-message">
231+
Wir machen gerade ein Update und verbessern GolfSuite für Sie. Unser Team arbeitet hart daran, Ihnen ein noch besseres Erlebnis zu bieten. Entschuldigen Sie bitte die Unterbrechung. Wir sind bald wieder zurück!
232+
</p>
233+
</div>
234+
235+
<!-- Dutch -->
236+
<div class="language-block">
237+
<div class="lang-header">
238+
<span class="flag">🇳🇱</span>
239+
<span class="lang-name">Nederlands</span>
240+
</div>
241+
<p class="lang-message">
242+
We zijn momenteel bezig met een update om GolfSuite voor u te verbeteren. Ons team werkt hard om u een nog betere ervaring te bieden. Excuses voor het ongemak. We zijn binnenkort weer terug!
243+
</p>
244+
</div>
245+
246+
<!-- French -->
247+
<div class="language-block">
248+
<div class="lang-header">
249+
<span class="flag">🇫🇷</span>
250+
<span class="lang-name">Français</span>
251+
</div>
252+
<p class="lang-message">
253+
Nous effectuons actuellement une mise à jour pour améliorer GolfSuite. Notre équipe travaille activement pour vous offrir une expérience encore meilleure. Veuillez nous excuser pour la gêne occasionnée. Nous serons de retour bientôt!
254+
</p>
255+
</div>
256+
257+
<!-- Italian -->
258+
<div class="language-block">
259+
<div class="lang-header">
260+
<span class="flag">🇮🇹</span>
261+
<span class="lang-name">Italiano</span>
262+
</div>
263+
<p class="lang-message">
264+
Stiamo attualmente aggiornando GolfSuite per migliorare la vostra esperienza. Il nostro team sta lavorando duramente per offrirvi un servizio ancora migliore. Ci scusiamo per il disagio. Torneremo online a breve!
265+
</p>
266+
</div>
267+
268+
</div>
269+
270+
<div class="footer">
271+
<span class="team-name">— <strong>The Nexxchange Team</strong></span>
272+
<span class="team-name"><a href="https://www.nexxchange.com/legalNotice">Impressum</a></span>
273+
</div>
37274
</div>
38-
</div>
39-
<article>
40-
<h1>Wir machen gerade ein Update ...</h1>
41-
<h4>Wir sind bald wieder zurück!</h4>
42-
<div>
43-
<p>Entschuldigen Sie bitte die Unterbrechung.</p>
44-
<p>&mdash; Das Nexxchange Team</p>
45-
</div>
46-
<h2>Update in progress ...</h2>
47-
<h3>We&rsquo;ll be back soon!</h3>
48-
<div>
49-
<p>Sorry for the inconvenience but we are updating your service!</p>
50-
<p>&mdash; The Nexxchange Team</p>
51-
</div>
52-
</article>
275+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
53276
</body>
54277
</html>

0 commit comments

Comments
 (0)