`public/offline.html`

236 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Offline - Omega Watch Price History</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #0C1E3C 0%, #1a2a4a 100%);
            color: #fff;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            max-width: 600px;
            text-align: center;
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .icon {
            width: 120px;
            height: 120px;
            margin: 0 auto 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.05);
                opacity: 0.8;
            }
        }

        .icon svg {
            width: 60px;
            height: 60px;
            stroke: #C41E3A;
            fill: none;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            font-weight: 700;
        }

        p {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.8);
        }

        .features {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 30px;
            margin: 30px 0;
            text-align: left;
        }

        .features h2 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: #C41E3A;
        }

        .feature-list {
            list-style: none;
        }

        .feature-list li {
            padding: 12px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .feature-list li:last-child {
            border-bottom: none;
        }

        .check-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .check-icon svg {
            width: 100%;
            height: 100%;
            fill: #4ade80;
        }

        .retry-button {
            display: inline-block;
            background: #C41E3A;
            color: white;
            padding: 15px 40px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }

        .retry-button:hover {
            background: #a01828;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(196, 30, 58, 0.3);
        }

        @media (max-width: 640px) {
            h1 {
                font-size: 2rem;
            }

            p {
                font-size: 1rem;
            }

            .icon {
                width: 100px;
                height: 100px;
            }

            .icon svg {
                width: 50px;
                height: 50px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="icon">
            <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"></path>
            </svg>
        </div>

        <h1>You're Offline</h1>
        <p>
            No internet connection detected. Don't worry - you can still browse cached watch data!
        </p>

        <div class="features">
            <h2>Available Offline:</h2>
            <ul class="feature-list">
                <li>
                    <div class="check-icon">
                        <svg viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <span>Browse previously viewed watches</span>
                </li>
                <li>
                    <div class="check-icon">
                        <svg viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <span>View cached price history charts</span>
                </li>
                <li>
                    <div class="check-icon">
                        <svg viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <span>Access your favorites and watchlist</span>
                </li>
                <li>
                    <div class="check-icon">
                        <svg viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <span>Compare watch specifications</span>
                </li>
            </ul>
        </div>

        <button onclick="location.href='/'" class="retry-button">
            Return to App
        </button>

        <p style="margin-top: 30px; font-size: 0.9rem; opacity: 0.6;">
            Changes will sync automatically when you're back online
        </p>
    </div>

    <script>
        // Auto-redirect when back online
        window.addEventListener('online', () => {
            location.href = '/';
        });
    </script>
</body>
</html>