Copy the html code
Copy the html code
<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>