154 lines
4.3 KiB
HTML
154 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Offline - UK Data Services</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Roboto Slab', 'Lato', sans-serif;
|
|
line-height: 1.6;
|
|
color: #444;
|
|
background: #f8f9fa;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.offline-container {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
padding: 60px 40px;
|
|
text-align: center;
|
|
max-width: 500px;
|
|
width: 100%;
|
|
}
|
|
|
|
.offline-icon {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0 auto 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f0f0f0;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.offline-icon svg {
|
|
width: 60px;
|
|
height: 60px;
|
|
fill: #666;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
color: #1a1a1a;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.1rem;
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 14px 28px;
|
|
background: #179e83;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
border: none;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #11725e;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.offline-info {
|
|
margin-top: 40px;
|
|
padding-top: 40px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.offline-info h2 {
|
|
font-size: 1.2rem;
|
|
color: #444;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.offline-info ul {
|
|
list-style: none;
|
|
text-align: left;
|
|
max-width: 300px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.offline-info li {
|
|
padding: 8px 0;
|
|
color: #666;
|
|
}
|
|
|
|
.offline-info li:before {
|
|
content: "✓ ";
|
|
color: #179e83;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="offline-container">
|
|
<div class="offline-icon">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46C10.21 6.23 11.08 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<h1>You're Offline</h1>
|
|
<p>It looks like you've lost your internet connection. Please check your connection and try again.</p>
|
|
|
|
<button class="btn" onclick="window.location.reload()">Try Again</button>
|
|
|
|
<div class="offline-info">
|
|
<h2>Available Offline</h2>
|
|
<ul>
|
|
<li>Previously viewed pages</li>
|
|
<li>Cached resources</li>
|
|
<li>Form data saved locally</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Check connection status
|
|
window.addEventListener('online', () => {
|
|
window.location.reload();
|
|
});
|
|
|
|
// Retry button
|
|
document.querySelector('.btn').addEventListener('click', () => {
|
|
if (navigator.onLine) {
|
|
window.location.href = '/';
|
|
} else {
|
|
alert('Still offline. Please check your internet connection.');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |