|
|
| Line 31: |
Line 31: |
| document.head.appendChild(script); | | document.head.appendChild(script); |
| }); | | }); |
|
| |
| (function () {
| |
| 'use strict';
| |
|
| |
| var STORAGE_KEY = 'parvejBirthdayPopupClosed';
| |
| var ONE_HOUR = 60 * 60 * 1000;
| |
| var TARGET_DATE = '08-23';
| |
| var PHOTO_URL = 'https://synchchaos.com/wp-content/uploads/2023/10/parvej.png';
| |
|
| |
| function isBirthdayToday() {
| |
| var d = new Date();
| |
| var mm = String(d.getMonth() + 1).padStart(2, '0');
| |
| var dd = String(d.getDate()).padStart(2, '0');
| |
| return (mm + '-' + dd) === TARGET_DATE;
| |
| }
| |
|
| |
| function shouldShowPopup() {
| |
| var closedAt = localStorage.getItem(STORAGE_KEY);
| |
| if (!closedAt) return true;
| |
| return Date.now() - parseInt(closedAt, 10) >= ONE_HOUR;
| |
| }
| |
|
| |
| function closePopup(popup) {
| |
| popup.classList.add('pb-birthday-hide');
| |
| setTimeout(function () {
| |
| if (popup.parentNode) {
| |
| popup.parentNode.removeChild(popup);
| |
| }
| |
| }, 300);
| |
| localStorage.setItem(STORAGE_KEY, Date.now().toString());
| |
| }
| |
|
| |
| function el(tag, opts) {
| |
| var node = document.createElement(tag);
| |
| opts = opts || {};
| |
| if (opts.className) node.className = opts.className;
| |
| if (opts.text) node.textContent = opts.text;
| |
| if (opts.html) node.innerHTML = opts.html; // used only for the trusted static emoji string
| |
| if (opts.attrs) {
| |
| for (var key in opts.attrs) {
| |
| if (Object.prototype.hasOwnProperty.call(opts.attrs, key)) {
| |
| node.setAttribute(key, opts.attrs[key]);
| |
| }
| |
| }
| |
| }
| |
| return node;
| |
| }
| |
|
| |
| function buildPopup() {
| |
| var popup = el('div', { attrs: { id: 'parvej-birthday-popup' } });
| |
|
| |
| var overlay = el('div', { className: 'pb-birthday-overlay' });
| |
|
| |
| var card = el('div', { className: 'pb-birthday-card' });
| |
|
| |
| var closeBtn = el('button', {
| |
| className: 'pb-birthday-close',
| |
| text: '\u00D7',
| |
| attrs: {
| |
| type: 'button',
| |
| 'aria-label': 'Close birthday message',
| |
| title: 'Close'
| |
| }
| |
| });
| |
| closeBtn.addEventListener('click', function () {
| |
| closePopup(popup);
| |
| });
| |
|
| |
| var photo = el('img', {
| |
| className: 'pb-birthday-photo',
| |
| attrs: {
| |
| src: PHOTO_URL,
| |
| alt: 'Parvej Husen Talukder'
| |
| }
| |
| });
| |
|
| |
| var title = el('div', {
| |
| className: 'pb-birthday-title',
| |
| text: 'Happy Birthday!'
| |
| });
| |
|
| |
| var name = el('div', {
| |
| className: 'pb-birthday-name',
| |
| text: 'Parvej Husen Talukder'
| |
| });
| |
|
| |
| var message = el('div', { className: 'pb-birthday-message' });
| |
| message.appendChild(document.createTextNode('WikiGenius wishes its '));
| |
| var strong = el('strong', { text: 'Co-Founder, Poet & Internet Entrepreneur' });
| |
| message.appendChild(strong);
| |
| message.appendChild(document.createTextNode(' a very happy birthday!'));
| |
|
| |
| var subtitle = el('div', {
| |
| className: 'pb-birthday-subtitle',
| |
| text: 'May his creativity, words, and vision continue to inspire people around the world.'
| |
| });
| |
|
| |
| var cake = el('div', {
| |
| className: 'pb-birthday-cake',
| |
| text: '\uD83C\uDF89 \uD83C\uDF82 \uD83C\uDF89'
| |
| });
| |
|
| |
| card.appendChild(closeBtn);
| |
| card.appendChild(photo);
| |
| card.appendChild(title);
| |
| card.appendChild(name);
| |
| card.appendChild(message);
| |
| card.appendChild(subtitle);
| |
| card.appendChild(cake);
| |
|
| |
| popup.appendChild(overlay);
| |
| popup.appendChild(card);
| |
|
| |
| return popup;
| |
| }
| |
|
| |
| function injectStyles() {
| |
| if (document.getElementById('pb-birthday-styles')) return;
| |
|
| |
| var style = document.createElement('style');
| |
| style.id = 'pb-birthday-styles';
| |
| style.textContent =
| |
| '#parvej-birthday-popup {' +
| |
| 'position: fixed; inset: 0; z-index: 99999;' +
| |
| 'display: flex; align-items: center; justify-content: center;' +
| |
| 'animation: pbBirthdayFadeIn .35s ease;' +
| |
| '}' +
| |
| '.pb-birthday-overlay {' +
| |
| 'position: absolute; inset: 0;' +
| |
| 'background: rgba(0,0,0,.68); backdrop-filter: blur(5px);' +
| |
| '}' +
| |
| '.pb-birthday-card {' +
| |
| 'position: relative; z-index: 2;' +
| |
| 'width: min(440px, calc(100vw - 32px));' +
| |
| 'padding: 38px 30px 32px; text-align: center;' +
| |
| 'border-radius: 24px;' +
| |
| 'background: linear-gradient(145deg, #ffffff, #fff8ec);' +
| |
| 'box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 8px 30px rgba(0,0,0,.18);' +
| |
| 'border: 1px solid rgba(255,193,7,.35);' +
| |
| '}' +
| |
| '.pb-birthday-close {' +
| |
| 'position: absolute; top: 12px; right: 14px;' +
| |
| 'width: 34px; height: 34px; border: 0; border-radius: 50%;' +
| |
| 'background: rgba(0,0,0,.07); color: #555;' +
| |
| 'font-size: 25px; line-height: 30px; cursor: pointer;' +
| |
| 'transition: .2s ease;' +
| |
| '}' +
| |
| '.pb-birthday-close:hover { background: rgba(0,0,0,.14); transform: rotate(90deg); }' +
| |
| '.pb-birthday-photo {' +
| |
| 'width: 96px; height: 96px; border-radius: 50%;' +
| |
| 'object-fit: cover; border: 3px solid #ffc107;' +
| |
| 'box-shadow: 0 4px 16px rgba(0,0,0,.15);' +
| |
| 'margin-bottom: 14px; display: block; margin-left: auto; margin-right: auto;' +
| |
| '}' +
| |
| '.pb-birthday-title { font-size: 28px; font-weight: 800; color: #d97706; margin-bottom: 5px; }' +
| |
| '.pb-birthday-name { font-size: 20px; font-weight: 700; color: #222; margin-bottom: 18px; }' +
| |
| '.pb-birthday-message { font-size: 16px; line-height: 1.7; color: #444; margin-bottom: 12px; }' +
| |
| '.pb-birthday-message strong { color: #b45309; }' +
| |
| '.pb-birthday-subtitle { font-size: 14px; line-height: 1.6; color: #777; }' +
| |
| '.pb-birthday-cake { margin-top: 20px; font-size: 25px; letter-spacing: 8px; }' +
| |
| '.pb-birthday-hide { animation: pbBirthdayFadeOut .3s ease forwards; }' +
| |
| '@keyframes pbBirthdayFadeIn { from { opacity: 0; } to { opacity: 1; } }' +
| |
| '@keyframes pbBirthdayFadeOut { from { opacity: 1; } to { opacity: 0; } }' +
| |
| '@media (max-width: 480px) {' +
| |
| '.pb-birthday-card { padding: 32px 22px 28px; border-radius: 20px; }' +
| |
| '.pb-birthday-photo { width: 80px; height: 80px; }' +
| |
| '.pb-birthday-title { font-size: 24px; }' +
| |
| '.pb-birthday-name { font-size: 17px; }' +
| |
| '}';
| |
|
| |
| document.head.appendChild(style);
| |
| }
| |
|
| |
| function init() {
| |
| if (!isBirthdayToday()) return;
| |
| if (!shouldShowPopup()) return;
| |
|
| |
| injectStyles();
| |
| var popup = buildPopup();
| |
| document.body.appendChild(popup);
| |
| }
| |
|
| |
| if (document.readyState === 'loading') {
| |
| document.addEventListener('DOMContentLoaded', init);
| |
| } else {
| |
| init();
| |
| }
| |
| })();
| |
