Cloudtop - Claud3.5Sonnetで生成

Claude3.5Sonnetでプログラムを生成

<!DOCTYPE html>

<head>

<title>アナログ時計</title>

<style>

.clock {

width: 98px;

height: 98px;

border: 3.5px solid #B08968;

border-radius: 50%;

position: relative;

background: #ffffff;

margin-left: 7px;

}

.hand {

position: absolute;

transform-origin: bottom center;

background: #333;

z-index: 2; /* 針を日付の前面に配置 */

}

.hour {

width: 2.8px;

height: 24.5px;

top: 24.5px;

left: 47.6px;

}

.minute {

width: 2.1px;

height: 35px;

top: 14px;

left: 48.3px;

}

.second {

width: 0.7px;

height: 39.9px;

top: 9.1px;

left: 49px;

background: #f00;

}

.center {

width: 5.6px;

height: 5.6px;

background: #333;

border-radius: 50%;

position: absolute;

top: 46.2px;

left: 46.2px;

z-index: 3; /* 中心点を最前面に配置 */

}

.number {

position: absolute;

font-size: 11px;

font-weight: normal;

font-family: Arial, sans-serif;

color: #333;

width: 14px;

height: 14px;

text-align: center;

line-height: 14px;

}

.date {

position: absolute;

font-size: 10px;

font-weight: bold;

font-family: Arial, sans-serif;

color: #ffffff;

background-color: #000000;

width: 34px;

text-align: center;

bottom: 26px;

left: 32px;

padding: 1px 0;

border-radius: 3px;

z-index: 1; /* 日付を針の背面に配置 */

}

</style>

</head>

<body>

</div>

function updateClock() {

const now = new Date();

const hours = now.getHours() % 12;

const minutes = now.getMinutes();

const seconds = now.getSeconds();

const milliseconds = now.getMilliseconds();

const hourDeg = (hours + minutes / 60) * 30;

const minuteDeg = (minutes + seconds / 60) * 6;

const secondDeg = (seconds + milliseconds / 1000) * 6;

document.querySelector('.hour').style.transform = `rotate(${hourDeg}deg)`;

document.querySelector('.minute').style.transform = `rotate(${minuteDeg}deg)`;

document.querySelector('.second').style.transform = `rotate(${secondDeg}deg)`;

// 日付を更新（月/日の形式）

const month = now.getMonth() + 1;

const date = now.getDate();

document.querySelector('.date').textContent = `${month} / ${date}`;

}

function addNumbers() {

const clock = document.querySelector('.clock');

const radius = 39;

const centerX = 49;

const centerY = 49;

for (let i = 1; i <= 12; i++) {

const number = document.createElement('div');

number.className = 'number';

number.textContent = i;

const angle = (i - 3) * (Math.PI / 6);

const x = centerX + radius * Math.cos(angle);

const y = centerY + radius * Math.sin(angle);

number.style.left = `${x - 7}px`;

number.style.top = `${y - 7}px`;

clock.appendChild(number);

}

setInterval(updateClock, 50);

addNumbers();

</script>

</body>

</html>