<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}

/* Header Section */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2c3e50;
color: white;
padding: 10px 20px;
}

.calendar {
font-size: 1.2em;
}

.clock {
position: relative;
width: 150px;
height: 150px;
border: 5px solid #ecf0f1;
border-radius: 50%;
background-color: #34495e;
}

.clock::before {
content: '';
position: absolute;
width: 10px;
height: 10px;
background-color: #ecf0f1;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.hand {
position: absolute;
width: 50%;
height: 6px;
background-color: #ecf0f1;
top: 50%;
left: 50%;
transform-origin: 0% 50%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hour-hand {
width: 40%;
height: 8px;
background-color: #bdc3c7;
}

.minute-hand {
width: 45%;
height: 6px;
background-color: #95a5a6;
}

.second-hand {
width: 48%;
height: 2px;
background-color: #e74c3c;
}

/* Login Section */
.login-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

.login-container h2 {
text-align: center;
margin-bottom: 20px;
color: #2c3e50;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
color: #34495e;
}

.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #bdc3c7;
border-radius: 4px;
font-size: 1em;
}

.form-group button {
width: 100%;
padding: 10px;
background-color: #2c3e50;
color: white;
border: none;
border-radius: 4px;
font-size: 1em;
cursor: pointer;
}

.form-group button:hover {
background-color: #34495e;
}
</style>
</head>
<body>

<div class="header">
<div class="calendar" id="calendar"></div>
<div class="clock">
<div class="hand hour-hand" id="hourHand"></div>
<div class="hand minute-hand" id="minuteHand"></div>
<div class="hand second-hand" id="secondHand"></div>
</div>
</div>

<div class="login-container">
<h2>Login</h2>
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter your username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter your password">
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
</div>

const hourHand = document.getElementById('hourHand');
const minuteHand = document.getElementById('minuteHand');
const secondHand = document.getElementById('secondHand');

const hourDeg = (hours % 12) * 30 + (minutes / 2);
const minuteDeg = minutes * 6 + (seconds / 10);
const secondDeg = seconds * 6;

hourHand.style.transform = `rotate(${hourDeg}deg)`;
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
secondHand.style.transform = `rotate(${secondDeg}deg)`;
}

setInterval(updateClock, 1000);

// Calendar Functionality
function updateCalendar() {
const now = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById('calendar').textContent = now.toLocaleDateString(undefined, options);
}

updateCalendar();
setInterval(updateCalendar, 60000); // Update every minute
</script>

</body>
</html>