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>