Techy350

 <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;
        }
        .container0 {
            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;
        }      
        .card0 {
            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;
        }        
        .btn0 {
            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;
        }        
        .btn0: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;
            }
        }
        #pk {
               display: block;
               text-align: right;
               font-size: 10px;
               color:#519ae8
            }
        a {
               display: block;
               text-decoration: none;
               color:#519ae8
            }
    </style>
    <div class="container">
        <div class="card0">
            <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="btn0 btn-success"><b>Subscribe</b> </button>
            <button id="unsubscribeBtn" class="btn0 btn-secondary"><b>Unsubscribe</b></button>
                        <button id="testBtn" style="font-size: 0px;opacity: 0%;"></button>
            <div id="status" class="notification-status">              
            </div><br>
            <footer id="pk"><a href="https://2xnotify.blogspot.com" id="PK">Create by P. Sarkar & Made by India</a></footer>
        </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>