agnes_convite - marksdev220/marks GitHub Wiki

<title>Convite Chá de Fraldas - Agnes</title> <script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto max-w-3xl p-4 sm:p-8">

    <header class="text-center my-10 sm:my-16">
        <!-- Title section for the invitation -->
        <h2 class="text-2xl sm:text-3xl text-[#E1A0A0] fade-in fade-in-delay-0 font-playfair-display">Você está convidado para o</h2>
        <h1 class="text-5xl sm:text-7xl font-bold my-4 text-shadow fade-in fade-in-delay-1 font-playfair-display">Chá da Agnes</h1>
        <p class="text-lg sm:text-xl max-w-xl mx-auto fade-in fade-in-delay-2">Com muita alegria, esperamos você para celebrar a doce chegada da nossa pequena!</p>
    </header>

    <main>
        <!-- Countdown section to show time remaining until the event -->
        <section id="countdown-section" class="my-12 sm:my-16 text-center fade-in fade-in-delay-3">
            <h3 class="text-2xl font-bold mb-6 font-playfair-display">Contagem Regressiva</h3>
            <div id="countdown" class="grid grid-cols-4 gap-2 sm:gap-4 max-w-md mx-auto">
                <!-- Countdown box for Days -->
                <div class="countdown-box p-4 rounded-lg shadow-md fade-in fade-in-delay-4">
                    <span id="days" class="text-3xl sm:text-4xl font-bold"></span>
                    <span class="text-sm sm:text-base">Dias</span>
                </div>
                <!-- Countdown box for Hours -->
                <div class="countdown-box p-4 rounded-lg shadow-md fade-in fade-in-delay-5">
                    <span id="hours" class="text-3xl sm:text-4xl font-bold"></span>
                    <span class="text-sm sm:text-base">Horas</span>
                </div>
                <!-- Countdown box for Minutes -->
                <div class="countdown-box p-4 rounded-lg shadow-md fade-in fade-in-delay-6">
                    <span id="minutes" class="text-3xl sm:text-4xl font-bold"></span>
                    <span class="text-sm sm:text-base">Minutos</span>
                </div>
                <!-- Countdown box for Seconds -->
                <div class="countdown-box p-4 rounded-lg shadow-md fade-in fade-in-delay-7">
                    <span id="seconds" class="text-3xl sm:text-4xl font-bold"></span>
                    <span class="text-sm sm:text-base">Segundos</span>
                </div>
            </div>
        </section>
        
        <!-- Event information section: Date, Time, Location -->
        <section id="info" class="my-12 sm:my-16 p-6 sm:p-8 bg-[#FDECEC] rounded-xl shadow-lg fade-in fade-in-delay-8">
            <div class="space-y-6">
                <!-- Date detail -->
                <div class="flex items-center space-x-4">
                    <div class="icon-container p-3 rounded-full">
                        <span class="text-2xl">🗓️</span>
                    </div>
                    <div>
                        <p class="font-bold text-lg">Data</p>
                        <p>Segunda-feira, 30 de Junho de 2025</p>
                    </div>
                </div>
                <!-- Time detail -->
                <div class="flex items-center space-x-4">
                    <div class="icon-container p-3 rounded-full">
                        <span class="text-2xl">🕗</span>
                    </div>
                    <div>
                        <p class="font-bold text-lg">Horário</p>
                        <p>20:00</p>
                    </div>
                </div>
                <!-- Location detail with a link to Google Maps -->
                <div class="flex items-start space-x-4">
                    <div class="icon-container p-3 rounded-full">
                        <span class="text-2xl">📍</span>
                    </div>
                    <div>
                        <p class="font-bold text-lg">Local</p>
                        <p>Churrascaria Nativas Grill Brasília Esplanada</p>
                        <a href="https://www.google.com/maps/search/?api=1&query=SCEN+Clube+Almirante+Alexandrino+-+Asa+Norte,+Brasília+-+DF,+70800-110" target="_blank" class="inline-block mt-2 text-[#C77878] font-semibold hover:underline">Ver no mapa →</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Action buttons section: Gift Suggestion and RSVP -->
        <section id="actions" class="my-12 sm:my-16 grid sm:grid-cols-2 gap-6 fade-in fade-in-delay-9">
            <!-- Gift suggestion box -->
            <div class="bg-white p-6 rounded-xl shadow-lg text-center border border-[#FDECEC]">
                <h3 class="font-bold text-xl mb-3 font-playfair-display">Sugestão de Presente</h3>
                <p class="mb-4">Seu carinho é o maior presente! Se desejar, pode nos ajudar a montar o enxoval da Agnes com um pacotinho de fraldas.</p>
                <div class="inline-flex bg-[#FDECEC] text-[#C77878] font-bold py-2 px-4 rounded-full">
                    <span class="text-base">Tamanho P, M ou G</span>
                </div>
            </div>
            <!-- RSVP button to WhatsApp -->
            <div class="bg-white p-6 rounded-xl shadow-lg text-center border border-[#FDECEC] flex flex-col justify-between">
                <div>
                    <h3 class="font-bold text-xl mb-3 font-playfair-display">Confirme sua Presença</h3>
                    <p class="mb-4">Por favor, nos avise se você poderá comparecer para organizarmos tudo com carinho.</p>
                </div>
                <a href="https://wa.me/5561999999999?text=Ol%C3%A1%2C+eu+confirmo+minha+presen%C3%A7a+no+Ch%C3%A1+da+Agnes!" target="_blank" class="w-full bg-[#E1A0A0] text-white font-bold py-3 px-6 rounded-full hover:bg-[#D48F8F] transition duration-300 transform hover:scale-105 shadow-lg">
                    Confirmar Presença no WhatsApp
                </a>
            </div>
        </section>
    </main>

    <footer class="text-center my-10 sm:my-16 text-[#888] text-sm fade-in fade-in-delay-10">
        <!-- Footer section with a thank you message -->
        <p>Mal podemos esperar para compartilhar este momento especial com você!</p>
        <p class="mt-2 text-[#E1A0A0] font-bold">Com carinho, A família de Agnes.</p>
    </footer>

</div>

<!-- Custom CSS for styling and animations -->
<style>
    /* Import Google Fonts directly in CSS */
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@400;500&display=swap');

    /* Define font families */
    .font-playfair-display {
        font-family: 'Playfair Display', serif;
    }

    .font-montserrat {
        font-family: 'Montserrat', sans-serif;
    }

    /* Styles for the countdown boxes */
    .countdown-box {
        background-color: #FDECEC; /* Soft pink */
        color: #C77878; /* Darker pink for text */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid #E1A0A0;
        border-radius: 12px; /* Rounded corners */
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }

    .countdown-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    /* Styles for the icon containers in info section */
    .icon-container {
        background-color: #E1A0A0; /* Pink background for icons */
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        border-radius: 50%; /* Circular shape */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* Text shadow for the main title */
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Fade-in animation definitions */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Apply fade-in animation with delays */
    .fade-in {
        opacity: 0;
        animation: fadeIn 1s forwards;
    }

    .fade-in-delay-0 { animation-delay: 0s; }
    .fade-in-delay-1 { animation-delay: 0.2s; }
    .fade-in-delay-2 { animation-delay: 0.4s; }
    .fade-in-delay-3 { animation-delay: 0.6s; }
    .fade-in-delay-4 { animation-delay: 0.8s; }
    .fade-in-delay-5 { animation-delay: 1.0s; }
    .fade-in-delay-6 { animation-delay: 1.2s; }
    .fade-in-delay-7 { animation-delay: 1.4s; }
    .fade-in-delay-8 { animation-delay: 1.6s; }
    .fade-in-delay-9 { animation-delay: 1.8s; }
    .fade-in-delay-10 { animation-delay: 2.0s; }
</style>

<!-- JavaScript for the countdown timer -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Set the date of the event (Year, Month (0-11), Day, Hour, Minute, Second)
        const eventDate = new Date('June 30, 2025 20:00:00').getTime();

        // Function to update the countdown
        function updateCountdown() {
            const now = new Date().getTime();
            const distance = eventDate - now;

            // Calculate time components
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the results in the respective elements
            const daysEl = document.getElementById('days');
            const hoursEl = document.getElementById('hours');
            const minutesEl = document.getElementById('minutes');
            const secondsEl = document.getElementById('seconds');

            if (daysEl) daysEl.innerHTML = days;
            if (hoursEl) hoursEl.innerHTML = hours;
            if (minutesEl) minutesEl.innerHTML = minutes;
            if (secondsEl) secondsEl.innerHTML = seconds;

            // If the countdown is over, display a message
            if (distance < 0) {
                clearInterval(countdownInterval);
                const countdownDiv = document.getElementById('countdown');
                if (countdownDiv) {
                    countdownDiv.innerHTML = '<div class="col-span-4 text-center text-xl text-[#C77878] font-bold">O Chá da Agnes já começou!</div>';
                }
            }
        }

        // Update the countdown every 1 second
        const countdownInterval = setInterval(updateCountdown, 1000);

        // Initial call to display the countdown immediately
        updateCountdown();
    });
</script>
⚠️ **GitHub.com Fallback** ⚠️