MilenBunCard/views/card.ejs

<!DOCTYPE html>
<html lang="<%= langData.lang %>">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1024">
    <meta property="og:title" content="<%= langData.title %>" />
    <meta property="og:description" content="<%= langData.description %>" />
    <meta property="og:image" content="/previews/card.png" />
    <meta property="og:url" content="/card/<%= langData.lang %>" />
    <meta property="og:type" content="website" />
    <title>
        <%= langData.title %>
    </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/card.css">


</head>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

<body>
    <!-- Language Switcher -->
    <div class="language-switcher">
        <a href="/card/en">English</a> |
        <a href="/card/de">Deutsch</a>
    </div>

    <!-- Menu Button and Menu -->
    <header>
        <button class="menu-btn" id="menu-btn" onclick="toggleMenu()">Menu</button>
        <nav id="menu" class="retractable-menu">
            <ul>
                <li><a href="/card/<%= langData.lang %>">
                        <%= langData.menu_card %>
                    </a></li>
                
		<li><a href="/guestbook/<%= langData.lang %>">
                        <%= langData.menu_guestbook %>
                    </a></li>


                <li><a href="/countdown/<%= langData.lang %>">
                        <%= langData.menu_countdown %>
                    </a></li>

                <!-- Add more menu items as needed -->
            </ul>
        </nav>
    </header>

    <script>
        function toggleMenu() {
            const menu = document.getElementById('menu');
            menu.classList.toggle('open');
        }
    </script>
<div class="hover-hint"> <%= langData.hover_hint %> </div>
    <div class="invitation-card">
        <div class="card-inner">
            <!-- Front of the card -->
            <div class="card-front">
                <img src="/images/card_front.png" alt="Front of Invitation" class="card-image">
                <div class="title-text">
                    <h1>
                        <u style="text-decoration-color: rgba(249, 104, 14, 0.671); text-decoration-thickness: 2px">Save the Date</u>
                    </h1>

                </div>
            </div>
            <!-- Back of the card -->
            <div class="card-back">
                <img src="/images/card_back.png" alt="Back of Invitation" class="card-image">
                <div class="card-text custom-text-align">
                    <p>
                        <%= langData.front_invation_1 %>
                    </p>
                    <p>
                        <%= langData.front_invation_2 %>
                    </p>
                    <p>
                        <%= langData.front_invation_3 %>
                    </p>
                    <br>
                    <h2>
                        <%= langData.back_info %>
                    </h2>
                    <br>
                    <p>
                        <%= langData.back_style %>
                    </p>
                    <p>
                        <%= langData.back_rules %>
                    </p>
                    <br>
                    <p>
                        <%= langData.back_afterword %>
                    </p>
                    <p>
                        <%= langData.back_signed %>
                    </p>
                    <br><br>


                </div>
            </div>
        </div>
    </div>
    <script>
        // <h2>
        //                 <p>
        //                     <%= langData.back_countdown %>
        //                         <div id="countdown"></div>
        //                 </p>
        //             </h2>
        // // Convert the Unix timestamp (seconds) to milliseconds
        // const targetDate = new Date(1727528400 * 1000);

        // function updateCountdown() {
        //     const now = new Date();
        //     const timeDifference = targetDate - now;

        //     if (timeDifference <= 0) {
        //         document.getElementById('countdown').innerHTML = 'Time\'s up!';
        //         clearInterval(countdownInterval);  // Stop the interval when the countdown reaches 0
        //         return;
        //     }

        //     const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
        //     const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        //     const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
        //     const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

        //     document.getElementById('countdown').innerHTML =
        //         days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        // }

        // // Update the countdown every second
        // const countdownInterval = setInterval(updateCountdown, 1000);
        // updateCountdown();  // Initial call to set the countdown immediately

        document.querySelector('.invitation-card').addEventListener('mouseenter', () => {
            var duration = 1 * 1000;
            var animationEnd = Date.now() + duration;
            var skew = 1;

            function randomInRange(min, max) {
                return Math.random() * (max - min) + min;
            }

            (function frame() {
                var timeLeft = animationEnd - Date.now();
                var ticks = Math.max(200, 500 * (timeLeft / duration));
                skew = Math.max(0.8, skew - 0.001);

                confetti({
                    particleCount: 1,
                    startVelocity: 0,
                    ticks: ticks,
                    origin: {
                        x: Math.random(),
                        // since particles fall down, skew start toward the top
                        y: (Math.random() * skew) - 0.2
                    },
                    colors: ['#da7ff0'],
                    shapes: ['circle'],
                    gravity: randomInRange(0.4, 0.6),
                    scalar: randomInRange(0.4, 2),
                    drift: randomInRange(-0.4, 1)
                });

                if (timeLeft > 0) {
                    requestAnimationFrame(frame);
                }
            }());
        });

document.addEventListener('DOMContentLoaded', function() {
    const card = document.querySelector('.invitation-card');
    const hoverHint = document.querySelector('.hover-hint');

    let hoverTimeout;

    function showHint() {
        hoverHint.style.opacity = '1';
    }

    function hideHint() {
        hoverHint.style.opacity = '0';
    }

    // Show the hover hint after 5 seconds
    hoverTimeout = setTimeout(showHint, 5000);

    // On hover, flip the card and hide the hover hint
    card.addEventListener('mouseenter', function() {
        hideHint();
        clearTimeout(hoverTimeout);
        card.classList.add('flipped');
    });

    // On mouse leave, flip the card back and reset hint timer
    card.addEventListener('mouseleave', function() {
        card.classList.remove('flipped');
        hoverTimeout = setTimeout(showHint, 5000);
    });
});


    </script>
</body>


</html>