Birthday Maker Name Tool
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(to right, #ffecd2, #fcb69f);
color: #333;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 40px 20px;
text-align: center;
flex: 1;
}
h1 {
font-family: 'Pacifico', cursive;
font-size: 2.8em;
color: #e91e63;
}
p {
margin-bottom: 20px;
font-size: 1.1em;
}
.input-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-bottom: 30px;
}
.input-box input, .input-box button {
padding: 12px 18px;
font-size: 1em;
width: 90%;
max-width: 350px;
border-radius: 25px;
border: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.input-box button {
background-color: #ff4081;
color: white;
cursor: pointer;
transition: 0.3s;
}
.input-box button:hover {
background-color: #d81b60;
}
.birthday-card {
margin: 0 auto;
background: #fff3e0;
border-radius: 20px;
padding: 30px;
max-width: 400px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
position: relative;
animation: fadeIn 1s ease;
}
.birthday-card h2 {
color: #ff4081;
font-size: 1.8em;
}
.birthday-card p {
margin-top: 10px;
font-size: 1em;
color: #333;
}
.birthday-card i {
font-size: 40px;
color: #ff6f61;
margin-top: 15px;
}
.birthday-card button {
margin-top: 20px;
padding: 10px 20px;
background: #7b1fa2;
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 0.9em;
}
footer {
text-align: center;
padding: 15px;
background-color: #f8bbd0;
font-size: 0.9em;
color: #333;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
function makeBirthdayCard() {
const name = document.getElementById("name").value.trim();
const dob = document.getElementById("dob").value;
const card = document.getElementById("card");
const cardName = document.getElementById("card-name");
const cardDate = document.getElementById("card-date");
if (!name || !dob) {
alert("Please enter both your name and birthday.");
return;
}
const date = new Date(dob);
const formatted = date.toLocaleDateString('en-GB', {
day: 'numeric', month: 'long'
});
cardName.textContent = name;
cardDate.textContent = formatted;
card.style.display = "block";
}
function downloadCard() {
const card = document.getElementById("card");
html2canvas(card).then(canvas => {
const link = document.createElement("a");
link.download = "birthday_card.png";
link.href = canvas.toDataURL();
link.click();
});
}
