<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Access Restricted - Windows Only</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, hsl(0, 0%, 100%) 0%, hsl(210, 40%, 96.1%, 0.2) 50%, hsl(14, 100%, 57%, 0.05) 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .card {
            max-width: 28rem;
            width: 100%;
            background: hsl(0, 0%, 100%);
            border: 1px solid hsl(0, 84.2%, 60.2%, 0.2);
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .card-header {
            padding: 1.5rem 1.5rem 0.5rem 1.5rem;
            text-align: center;
        }

        .image-container {
            position: relative;
            margin: 0 auto 1rem auto;
        }

        .error-image {
            width: 100%;
            height: 8rem;
            object-fit: cover;
            border-radius: 0.5rem;
        }

        .image-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
            border-radius: 0.5rem;
        }

        .header-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .warning-icon {
            width: 1.5rem;
            height: 1.5rem;
            color: hsl(38, 92%, 50%);
        }

        .title {
            font-size: 1.25rem;
            font-weight: 600;
            color: hsl(222.2, 84%, 4.9%);
            margin: 0;
        }

        .description {
            color: hsl(215.4, 16.3%, 46.9%);
            font-size: 0.875rem;
            margin: 0;
        }

        .card-content {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .info-section {
            background: hsl(210, 40%, 96.1%, 0.5);
            border-radius: 0.5rem;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .info-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .info-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: hsl(222.2, 84%, 4.9%);
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            border: 1px solid;
        }

        .badge-mobile {
            background: hsl(142, 76%, 36%, 0.1);
            color: hsl(142, 76%, 36%);
            border-color: hsl(142, 76%, 36%, 0.2);
        }

        .badge-windows {
            background: hsl(221, 83%, 53%, 0.1);
            color: hsl(221, 83%, 53%);
            border-color: hsl(221, 83%, 53%, 0.2);
        }

        .icon-small {
            width: 0.75rem;
            height: 0.75rem;
        }

        .alert-section {
            background: hsl(0, 84.2%, 60.2%, 0.05);
            border: 1px solid hsl(0, 84.2%, 60.2%, 0.2);
            border-radius: 0.5rem;
            padding: 1rem;
        }

        .alert-title {
            font-weight: 500;
            color: hsl(0, 84.2%, 60.2%);
            margin: 0 0 0.5rem 0;
            font-size: 0.875rem;
        }

        .alert-text {
            font-size: 0.875rem;
            color: hsl(215.4, 16.3%, 46.9%);
            margin: 0;
        }

        .instructions-section {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .instructions-title {
            font-size: 0.875rem;
            font-weight: 500;
            color: hsl(222.2, 84%, 4.9%);
            margin: 0;
        }

        .instructions-list {
            list-style: none;
            padding: 0;
            margin: 0 0 0 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .instructions-list li {
            font-size: 0.875rem;
            color: hsl(215.4, 16.3%, 46.9%);
        }

        .button {
            width: 100%;
            padding: 0.5rem 1rem;
            background: transparent;
            border: 1px solid hsl(214.3, 31.8%, 91.4%);
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: hsl(222.2, 84%, 4.9%);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .button:hover {
            background: hsl(210, 40%, 96.1%);
            color: hsl(222.2, 47.4%, 11.2%);
        }

        @media (max-width: 640px) {
            .card {
                margin: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="card-header">
            <div class="image-container">
                <img src="https://parentzone.org.uk/sites/default/files/styles/parent_zone_hero/public/2022-01/zoom%282.35%2C1%29lightBG1.png?itok=-DWuUOHE" alt="Windows compatibility error" class="error-image">
                <div class="image-overlay"></div>
            </div>
            
            <div class="header-title">
                <svg class="warning-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
                <h1 class="title">Access Restricted</h1>
            </div>
            
            <p class="description">
                This application is only compatible with Windows operating systems
            </p>
        </div>

        <div class="card-content">
            <div class="info-section">
                <div class="info-row">
                    <span class="info-label">Detected Device:</span>
                    <div class="badge badge-mobile">
                        <svg class="icon-small" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a1 1 0 001-1V4a1 1 0 00-1-1H8a1 1 0 00-1 1v16a1 1 0 001 1z"></path>
                        </svg>
                        <span id="deviceInfo">Mobile Device</span>
                    </div>
                </div>
                
                <div class="info-row">
                    <span class="info-label">Required Platform:</span>
                    <div class="badge badge-windows">
                        <svg class="icon-small" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                        Windows Only
                    </div>
                </div>
            </div>

            <div class="alert-section">
                <h4 class="alert-title">Why am I seeing this?</h4>
                <p class="alert-text">
                    Corporate Portal requires specific Windows components and desktop features that are not available on mobile devices.
                </p>
            </div>

            <div class="instructions-section">
                <p class="instructions-title">To access this application:</p>
                <ul class="instructions-list">
                    <li>• Use a Windows computer or laptop</li>
                    <li>• Contact IT support if issues persist</li>
                </ul>
            </div>

            <button class="button" onclick="window.history.back()">
                Go Back
            </button>
        </div>
    </div>

    <script>
        // Device detection
        function getDeviceInfo() {
            const ua = navigator.userAgent;
            if (ua.includes('iPhone')) return 'iPhone';
            if (ua.includes('iPad')) return 'iPad';
            if (ua.includes('Android')) return 'Android Device';
            return 'Mobile Device';
        }

        // Update device info on page load
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('deviceInfo').textContent = getDeviceInfo();
        });
    </script>
</body>
</html>