`;
}
function renderFlip(now) {
const h24 = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
const ampm = h24 >= 12 ? 'PM' : 'AM';
const h = h24 % 12 || 12;
const digits = String(h).padStart(2,' ') + String(m).padStart(2,'0') + String(s).padStart(2,'0');
let html = '
';
// Hours
html += flipCard(digits[0], 0);
html += flipCard(digits[1], 1);
html += ':';
// Minutes
html += flipCard(digits[2], 2);
html += flipCard(digits[3], 3);
html += ':';
// Seconds
html += flipCard(digits[4], 4);
html += flipCard(digits[5], 5);
html += `${ampm}`;
html += '
';
html += `
${dateStr(now)}
`;
render.innerHTML = html;
// Trigger flip animation on changed digits
if (prevFlipDigits) {
for (let i = 0; i < 6; i++) {
if (digits[i] !== prevFlipDigits[i]) {
const card = render.querySelector(`.flip-card[data-idx="${i}"]`);
if (card) card.classList.add('flipping');
}
}
}
prevFlipDigits = digits;
}
function flipCard(digit, idx) {
const d = digit === ' ' ? '' : digit;
return `
${d}
${d}
`;
}
function renderBinary(now) {
const h24 = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
const h = h24 % 12 || 12;
const ampm = h24 >= 12 ? 'PM' : 'AM';
// 6 columns: H tens, H ones, M tens, M ones, S tens, S ones
const cols = [
Math.floor(h / 10), h % 10,
Math.floor(m / 10), m % 10,
Math.floor(s / 10), s % 10
];
let html = '
';
// Labels
html += '
HHMMSS
';
// 4 rows for bits 8,4,2,1
for (let bit = 3; bit >= 0; bit--) {
html += '
';
for (let col = 0; col < 6; col++) {
const on = (cols[col] >> bit) & 1;
html += ``;
}
html += '
';
}
// Value row
html += '
';
for (let col = 0; col < 6; col++) {
html += `${cols[col]}`;
}
html += '
';
html += `
${ampm}
`;
html += '
';
html += `
${dateStr(now)}
`;
render.innerHTML = html;
}
function renderAnalog(now, useRoman) {
const h = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
const size = 120;
const cx = size / 2, cy = size / 2;
// Angles
const sAngle = (s / 60) * 360 - 90;
const mAngle = ((m + s / 60) / 60) * 360 - 90;
const hAngle = (((h % 12) + m / 60) / 12) * 360 - 90;
// Number labels
let labels = '';
for (let i = 1; i <= 12; i++) {
const angle = (i / 12) * 2 * Math.PI - Math.PI / 2;
const r = 47;
const x = cx + r * Math.cos(angle);
const y = cy + r * Math.sin(angle);
const label = useRoman ? ROMAN[i % 12] : i;
const fs = useRoman ? '7' : '9';
labels += `${label}`;
}
// Tick marks
let ticks = '';
for (let i = 0; i < 60; i++) {
const angle = (i / 60) * 2 * Math.PI - Math.PI / 2;
const outer = 56;
const inner = i % 5 === 0 ? 52 : 54;
const x1 = cx + inner * Math.cos(angle);
const y1 = cy + inner * Math.sin(angle);
const x2 = cx + outer * Math.cos(angle);
const y2 = cy + outer * Math.sin(angle);
const w = i % 5 === 0 ? 1.5 : 0.5;
ticks += ``;
}
const svg = ``;
const ampm = now.getHours() >= 12 ? 'PM' : 'AM';
render.innerHTML = `