<style>
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #166088;
            --accent-color: #4fc3f7;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --success-color: #28a745;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       }
        
        .container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 20px;
        }
        
        .website-address {
            font-size: 1.2rem;
            margin-bottom: 1rem;
            color: var(--secondary-color);
            font-weight: bold;
        }
        
        .card {
            background: white;
            border-radius: 8px;
            padding: 2rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }
        
        h1 {
            margin-bottom: 1rem;
        }
        
        p {
            margin-bottom: 1.5rem;
        }
        
        .btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            text-decoration: none;
            margin-right: 1rem;
            margin-bottom: 1rem;
        }
        
        .btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background-color: var(--light-color);
            color: var(--dark-color);
            border: 1px solid #ddd;
        }
        
        .btn-secondary:hover {
            background-color: #e9ecef;
        }
        
        .btn-success {
            background-color: var(--success-color);
        }
        
        .btn-success:hover {
            background-color: #218838;
        }
        
        .notification-status {
            margin-top: 1.5rem;
            padding: 1rem;
            border-radius: 4px;
            background-color: #f8f9fa;
            border-left: 4px solid var(--accent-color);
        }
        
@media (max-width: 600px) {
            .btn {
                display: block;
                width: 100%;
                margin-bottom: 1rem;
            }
        }
    </style>

----------------------------------------------------------------

    <div class="container">
        <div class="card">
            <h2>Stay Updated!</h2>
            <p>Subscribe to our push notifications to receive the latest news and updates directly to your device, even when you're not on our website.</p>
            
            <button id="subscribeBtn" class="btn btn-success">Subscribe to Notifications</button>
            <button id="unsubscribeBtn" class="btn btn-secondary">Unsubscribe</button>
                        <button id="testBtn" style="font-size: 0px;opacity: 0%;"></button>
            <div id="status" class="notification-status">
                
            </div>
        </div>
    </div>
------------------------------------------------------------
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const subscribeBtn = document.getElementById('subscribeBtn');
            const testBtn = document.getElementById('testBtn');
            const unsubscribeBtn = document.getElementById('unsubscribeBtn');
            const statusElement = document.getElementById('status');
            
            // Check notification permission status
            function updateNotificationStatus() {
                if (!('Notification' in window)) {
                    statusElement.textContent = 'Notification status: Not supported in this browser';
                    return;
                }
                
                if (Notification.permission === 'granted') {
                    statusElement.textContent = 'Notification status: Subscribed ✅';
                    subscribeBtn.style.display = 'none';
                    unsubscribeBtn.style.display = 'inline-block';
                } else if (Notification.permission === 'denied') {
                    statusElement.textContent = 'Notification status: Blocked ❌ (please enable in browser settings)';
                    subscribeBtn.style.display = 'none';
                } else {
                    statusElement.textContent = 'Notification status: Not subscribed yet';
                    subscribeBtn.style.display = 'inline-block';
                    unsubscribeBtn.style.display = 'none';
                }
            }
            
            // Request permission for notifications
            function requestNotificationPermission() {
                if (!('Notification' in window)) {
                    alert('This browser does not support desktop notifications');
                    return;
                }
                
                Notification.requestPermission().then(function(permission) {
                    updateNotificationStatus();
                    
                    if (permission === 'granted') {
                        showNotification('Thanks for subscribing!', {
                            body: 'You will now receive updates from our website.',
                            icon: 'https://cdn-icons-png.flaticon.com/512/1791/1791961.png'
                        });
                        
                        // In a real app, you would register with a push service here
                        console.log('User subscribed to notifications');
                    }
                });
            }
            
            // Show a notification
            function showNotification(title, options) {
                if ('Notification' in window && Notification.permission === 'granted') {
                    new Notification(title, options);
                } else {
                    alert('Please enable notifications first');
                }
            }
            
            // Unsubscribe from notifications
            function unsubscribeFromNotifications() {
                // In a real app, you would unregister from push service here
                statusElement.textContent = 'Notification status: Unsubscribed';
                subscribeBtn.style.display = 'inline-block';
                unsubscribeBtn.style.display = 'none';
                console.log('User unsubscribed from notifications');
            }
            
            // Event listeners
            subscribeBtn.addEventListener('click', requestNotificationPermission);
            
            testBtn.addEventListener('click', function() {
                showNotification('Test Notification', {
                    body: 'This is a test notification from NotifyMe',
                    icon: 'https://cdn-icons-png.flaticon.com/512/1791/1791961.png',
                    vibrate: [200, 100, 200]
                });
            });
            
            unsubscribeBtn.addEventListener('click', unsubscribeFromNotifications);
            
            // Initial status check
            updateNotificationStatus();
            
            // Register service worker if supported
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register('sw.js')
                    .then(registration => {
                        console.log('ServiceWorker registration successful');
                    })
                    .catch(err => {
                        console.log('ServiceWorker registration failed: ', err);
                    });
            }
        });
    </script>