Okkkkk

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Birthday E-Card</title>
<style>
/* Full-screen container for centering elements */
body, html {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
font-family: Arial, sans-serif;
}
/* Clock styling */
#clock {
position: relative;
width: 200px;
height: 200px;
border: 8px solid #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #222;
margin-top: 50px;
opacity: 0;
animation: fadeIn 2s forwards; /* Fade in animation */
}
#hour, #minute, #second {

position: absolute;
background-color: #fff;
transform-origin: bottom;
transition: transform 0.5s ease-in-out;
}
#hour {
width: 4px;
height: 50px;
background-color: #ffdd00;
}
#minute {
width: 2px;
height: 70px;
background-color: #00ffdd;
}
#second {
width: 1px;
height: 80px;
background-color: #ff0044;
}
/* Fade in effect for clock */
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Calendar styling */
#calendar {
display: none; /* Hidden initially, shown after clock animation */
width: 500px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
text-align: center;
font-size: 18px;
color: #333;
position: relative;
}
/* Calendar month title */

#calendar .month {
font-size: 24px;
margin-bottom: 20px;
font-weight: bold;
}
/* Calendar Weekday Styling */

.weekdays {
display: flex;
justify-content: space-between;
font-weight: bold;
margin-bottom: 10px;
}
.weekdays div {
width: 50px;
}
/* Calendar Day Styling */

.day {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
margin: 5px;
font-size: 18px;
border-radius: 50%;
color: #333;
position: relative;
transition: all 0.3s ease;
}
.crossed {
color: red;
font-size: 20px;
position: absolute;
top: 5px;
left: 5px;
color: red;
font-weight: bold;
}
.crossed::after {
content: 'X';
font-size: 24px;
color: red;
}
/* Crown styling */
.crown {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
border: 4px solid gold;
border-radius: 50%;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%,
21% 91%, 32% 57%, 2% 35%, 39% 35%);
display: none;
animation: crownOutline 2s forwards;
}
@keyframes crownOutline {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* Styling the calendar days */

.crown-day {
background-color: #ffdd00;
color: #fff;
}
.day:hover {
background-color: #e0e0e0;
cursor: pointer;
}
</style>
</head>
<body>

<div id="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>


<div id="calendar">
<div class="month">November 2024</div>


<div class="weekdays">
<div>Sun</div>
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
</div>


<div class="calendar-days">

<div class="day"></div>


<div class="day crossed">1</div>
<div class="day crown-day" id="nov7">7</div>
<div class="day">8</div>
</div>
</div>
<script>
// Clock Animation
function animateClock() {
const hourHand = document.getElementById("hour");
const minuteHand = document.getElementById("minute");
const secondHand = document.getElementById("second");
// Initialize clock to 11:59:50 PM

let hourDeg = 330; // 11 hours on a 12-hour clock face
let minuteDeg = 354; // 59 minutes
let secondDeg = 300; // 50 seconds
// Update the positions of clock hands every 500ms to simulate ticking

const interval = setInterval(() => {
// Update second hand
secondDeg += 6;
if (secondDeg === 360) {
secondDeg = 0;
minuteDeg += 6; // Advance the minute hand
}
// Update minute hand

if (minuteDeg === 360) {
minuteDeg = 0;
hourDeg += 30; // Advance the hour hand
}
// Update hour hand

if (hourDeg === 360) {
clearInterval(interval); // Stop the clock at midnight
setTimeout(showCalendar, 1000); // Start calendar animation
after 1 sec
}
// Apply rotation to the hands

hourHand.style.transform = `rotate(${hourDeg}deg)`;
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
secondHand.style.transform = `rotate(${secondDeg}deg)`;
}, 500);
}
// Call the clock animation

animateClock();
// Show the calendar animation after clock animation ends

function showCalendar() {
document.getElementById("clock").style.display = "none"; // Hide the
clock
const calendar = document.getElementById("calendar");

calendar.style.display = "block"; // Show the calendar
}
</script>
</body>
</html>

Okkkkk

Uploaded by

Copyright:

Available Formats

Okkkkk

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Okkkkk

Uploaded by

Copyright:

Available Formats

<!

#hour, #minute, #second {

/* Calendar month title */

/* Calendar Weekday Styling */

/* Calendar Day Styling */

/* Styling the calendar days */

// Initialize clock to 11:59:50 PM

// Update the positions of clock hands every 500ms to simulate ticking

// Update minute hand

// Update hour hand

// Apply rotation to the hands

// Call the clock animation

// Show the calendar animation after clock animation ends

const calendar = document.getElementById("calendar");

You might also like