EncodeTheCode/clock_html5.htm

## clock_html5.htm
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analog Clock</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }

        .clock {
            width: 300px;
            height: 300px;
            border: 20px solid #333;
            border-radius: 50%;
            position: relative;
            padding: 20px;
            background: white;
        }

        .face {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .hand {
            width: 50%;
            height: 6px;
            background: #333;
            position: absolute;
            top: 50%;
            transform-origin: 100%;
            transform: rotate(90deg);
            transition: transform 0.05s ease-in-out;
        }

        .hour-hand {
            height: 8px;
            background: #000;
        }

        .minute-hand {
            height: 6px;
            background: #666;
        }

        .second-hand {
            height: 2px;
            background: red;
        }

        .number {
            position: absolute;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 1.5em;
        }

        .number1 { top: 15px; left: 215px; }
        .number2 { top: 50px; left: 245px; }
        .number3 { top: 135px; left: 270px; }
        .number4 { top: 220px; left: 245px; }
        .number5 { top: 255px; left: 215px; }
        .number6 { top: 270px; left: 135px; }
        .number7 { top: 255px; left: 55px; }
        .number8 { top: 220px; left: 25px; }
        .number9 { top: 135px; left: 0px; }
        .number10 { top: 50px; left: 25px; }
        .number11 { top: 15px; left: 55px; }
        .number12 { top: 0px; left: 135px; }
    </style>
</head>
<body>
    <div class="clock">
        <div class="face">
            <div class="hand hour-hand"></div>
            <div class="hand minute-hand"></div>
            <div class="hand second-hand"></div>
            <div class="number number1">1</div>
            <div class="number number2">2</div>
            <div class="number number3">3</div>
            <div class="number number4">4</div>
            <div class="number number5">5</div>
            <div class="number number6">6</div>
            <div class="number number7">7</div>
            <div class="number number8">8</div>
            <div class="number number9">9</div>
            <div class="number number10">10</div>
            <div class="number number11">11</div>
            <div class="number number12">12</div>
        </div>
    </div>
    <script>
        function updateClock() {
            const now = new Date();
            const seconds = now.getSeconds();
            const minutes = now.getMinutes();
            const hours = now.getHours();

            const secondDegrees = ((seconds / 60) * 360) + 90;
            const minuteDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
            const hourDegrees = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90;

            document.querySelector('.second-hand').style.transform = `rotate(${secondDegrees}deg)`;
            document.querySelector('.minute-hand').style.transform = `rotate(${minuteDegrees}deg)`;
            document.querySelector('.hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
        }

        setInterval(updateClock, 1000);
        updateClock(); // Initial call to set the clock immediately
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Analog Clock</title>
	<style>
	body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #f0f0f0;
	margin: 0;
	}

	.clock {
	width: 300px;
	height: 300px;
	border: 20px solid #333;
	border-radius: 50%;
	position: relative;
	padding: 20px;
	background: white;
	}

	.face {
	position: relative;
	width: 100%;
	height: 100%;
	}

	.hand {
	width: 50%;
	height: 6px;
	background: #333;
	position: absolute;
	top: 50%;
	transform-origin: 100%;
	transform: rotate(90deg);
	transition: transform 0.05s ease-in-out;
	}

	.hour-hand {
	height: 8px;
	background: #000;
	}

	.minute-hand {
	height: 6px;
	background: #666;
	}

	.second-hand {
	height: 2px;
	background: red;
	}

	.number {
	position: absolute;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 1.5em;
	}

	.number1 { top: 15px; left: 215px; }
	.number2 { top: 50px; left: 245px; }
	.number3 { top: 135px; left: 270px; }
	.number4 { top: 220px; left: 245px; }
	.number5 { top: 255px; left: 215px; }
	.number6 { top: 270px; left: 135px; }
	.number7 { top: 255px; left: 55px; }
	.number8 { top: 220px; left: 25px; }
	.number9 { top: 135px; left: 0px; }
	.number10 { top: 50px; left: 25px; }
	.number11 { top: 15px; left: 55px; }
	.number12 { top: 0px; left: 135px; }
	</style>
	</head>
	<body>
	<div class="clock">
	<div class="face">
	<div class="hand hour-hand"></div>
	<div class="hand minute-hand"></div>
	<div class="hand second-hand"></div>
	<div class="number number1">1</div>
	<div class="number number2">2</div>
	<div class="number number3">3</div>
	<div class="number number4">4</div>
	<div class="number number5">5</div>
	<div class="number number6">6</div>
	<div class="number number7">7</div>
	<div class="number number8">8</div>
	<div class="number number9">9</div>
	<div class="number number10">10</div>
	<div class="number number11">11</div>
	<div class="number number12">12</div>
	</div>
	</div>
	<script>
	function updateClock() {
	const now = new Date();
	const seconds = now.getSeconds();
	const minutes = now.getMinutes();
	const hours = now.getHours();

	const secondDegrees = ((seconds / 60) * 360) + 90;
	const minuteDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
	const hourDegrees = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90;

	document.querySelector('.second-hand').style.transform = `rotate(${secondDegrees}deg)`;
	document.querySelector('.minute-hand').style.transform = `rotate(${minuteDegrees}deg)`;
	document.querySelector('.hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
	}

	setInterval(updateClock, 1000);
	updateClock(); // Initial call to set the clock immediately
	</script>
	</body>
	</html>