Dante Gallery Popup

<style>

    .social-popup-overlay {

        display: none;

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.7);

        z-index: 9999;

        animation: fadeIn 0.3s ease-in;

    }

    .social-popup-overlay.active {

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .social-popup {

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

        border-radius: 20px;

        padding: 40px 30px;

        max-width: 450px;

        width: 90%;

        position: relative;

        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

        animation: slideUp 0.4s ease-out;

        text-align: center;

    }

    .close-popup {

        position: absolute;

        top: 15px;

        right: 15px;

        background: rgba(255, 255, 255, 0.2);

        border: none;

        color: white;

        font-size: 24px;

        width: 35px;

        height: 35px;

        border-radius: 50%;

        cursor: pointer;

        transition: all 0.3s ease;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .close-popup:hover {

        background: rgba(255, 255, 255, 0.3);

        transform: rotate(90deg);

    }

    .popup-icon { font-size: 60px; margin-bottom: 15px; }

    .popup-title {

        color: white;

        font-size: 28px;

        font-weight: bold;

        margin-bottom: 15px;

    }

    .popup-description {

        color: rgba(255, 255, 255, 0.9);

        font-size: 16px;

        margin-bottom: 30px;

        line-height: 1.6;

    }

    .social-buttons {

        display: flex;

        flex-direction: column;

        gap: 15px;

    }

    .social-btn {

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 15px 25px;

        border-radius: 50px;

        text-decoration: none;

        font-weight: bold;

        font-size: 16px;

        transition: all 0.3s ease;

        border: none;

        cursor: pointer;

        gap: 10px;

    }

    .gallery-btn {

        background: #4285F4;

        color: white !important;

        font-size: 18px;

        padding: 18px 30px;

    }

    .gallery-btn:hover {

        background: #2a6dd9;

        transform: translateY(-2px);

        box-shadow: 0 5px 20px rgba(66, 133, 244, 0.5);

        color: white !important;

        text-decoration: none;

    }

    .later-btn {

        background: rgba(255, 255, 255, 0.2);

        color: white;

    }

    .later-btn:hover { background: rgba(255, 255, 255, 0.3); }

    @keyframes fadeIn {

        from { opacity: 0; }

        to { opacity: 1; }

    }

    @keyframes slideUp {

        from { opacity: 0; transform: translateY(50px); }

        to { opacity: 1; transform: translateY(0); }

    }

    @media (max-width: 480px) {

        .social-popup { padding: 30px 20px; }

        .popup-title { font-size: 22px; }

    }

</style>

<div class="social-popup-overlay" id="socialPopup">

    <div class="social-popup">

        <button class="close-popup" onclick="closeSocialPopup()">×</button>

        <div class="popup-icon">🐾</div>

        <h2 class="popup-title">Meet Dante!</h2>

        <p class="popup-description">

            Check out Dante The Black Golden Doodle's photo gallery — 

            new adventures added all the time!

        </p>

        <div class="social-buttons">

            <a href="https://dantetbgdoodle.com/dante-gallery/"

               class="social-btn gallery-btn">

                📸 View Dante's Photo Gallery

            </a>

            <button class="social-btn later-btn"

                    onclick="closeSocialPopup()">

                Maybe Later

            </button>

        </div>

    </div>

</div>

<script>

    (function() {

        const POPUP_DELAY = 2000;

        const DAYS_UNTIL_RESHOW = 7;

        function shouldShowSocialPopup() {

            const lastShown = localStorage.getItem('socialPopupLastShown');

            if (!lastShown) return true;

            const daysSinceShown = (Date.now() - parseInt(lastShown)) / (1000 * 60 * 60 * 24);

            return daysSinceShown >= DAYS_UNTIL_RESHOW;

        }

        function showSocialPopup() {

            if (shouldShowSocialPopup()) {

                setTimeout(function() {

                    document.getElementById('socialPopup').classList.add('active');

                    localStorage.setItem('socialPopupLastShown', Date.now().toString());

                }, POPUP_DELAY);

            }

        }

        window.closeSocialPopup = function() {

            document.getElementById('socialPopup').classList.remove('active');

        }

        document.getElementById('socialPopup').addEventListener('click', function(e) {

            if (e.target === this) closeSocialPopup();

        });

        document.addEventListener('keydown', function(e) {

            if (e.key === 'Escape') closeSocialPopup();

        });

        if (document.readyState === 'loading') {

            document.addEventListener('DOMContentLoaded', showSocialPopup);

        } else {

            showSocialPopup();

        }

    })();

</script>