LLM-test/test/clock/package/script.js

// Analog Clock JavaScript
class AnalogClock {
    constructor() {
        this.hourHand = document.getElementById('hour-hand');
        this.minuteHand = document.getElementById('minute-hand');
        this.secondHand = document.getElementById('second-hand');
        
        // Initialize clock
        this.updateClock();
        
        // Update every second
        setInterval(() => {
            this.updateClock();
        }, 1000);
    }
    
    updateClock() {
        const now = new Date();
        
        // Get current time components
        const hours = now.getHours() % 12; // Convert to 12-hour format
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();
        
        // Calculate rotation angles
        const hourAngle = (hours * 30) + (minutes * 0.5); // 30 degrees per hour + minute adjustment
        const minuteAngle = (minutes * 6) + (seconds * 0.1); // 6 degrees per minute + second adjustment
        const secondAngle = seconds * 6; // 6 degrees per second
        
        // Apply rotations to hands
        this.hourHand.style.transform = `translateX(-50%) rotate(${hourAngle}deg)`;
        this.minuteHand.style.transform = `translateX(-50%) rotate(${minuteAngle}deg)`;
        this.secondHand.style.transform = `translateX(-50%) rotate(${secondAngle}deg)`;
        
        // Store current rotation for smooth animation
        this.hourHand.style.setProperty('--current-rotation', `${hourAngle}deg`);
        this.minuteHand.style.setProperty('--current-rotation', `${minuteAngle}deg`);
        this.secondHand.style.setProperty('--current-rotation', `${secondAngle}deg`);
    }
    
    // Method to handle window resize for better responsiveness
    handleResize() {
        const clock = document.querySelector('.clock');
        const container = document.querySelector('.clock-container');
        
        // Ensure clock stays centered and properly sized
        const containerRect = container.getBoundingClientRect();
        const maxSize = Math.min(containerRect.width - 40, containerRect.height - 40);
        const clockSize = Math.max(250, Math.min(400, maxSize));
        
        clock.style.width = `${clockSize}px`;
        clock.style.height = `${clockSize}px`;
    }
}

// Initialize clock when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    const clock = new AnalogClock();
    
    // Handle window resize for responsiveness
    let resizeTimeout;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => {
            clock.handleResize();
        }, 100);
    });
    
    // Initial resize adjustment
    clock.handleResize();
});

// Optional: Add smooth animation for second hand
document.addEventListener('DOMContentLoaded', () => {
    const secondHand = document.getElementById('second-hand');
    
    // Enhanced smooth animation for second hand
    const enhanceSecondHandAnimation = () => {
        const now = new Date();
        const milliseconds = now.getMilliseconds();
        const currentSeconds = now.getSeconds();
        const fractionalSeconds = currentSeconds + (milliseconds / 1000);
        
        const smoothSecondAngle = fractionalSeconds * 6; // 6 degrees per second
        
        // Use CSS transform for smoother animation
        secondHand.style.transition = `transform 0.1s cubic-bezier(0.4, 0.0, 0.2, 1)`;
        secondHand.style.transform = `translateX(-50%) rotate(${smoothSecondAngle}deg)`;
        
        requestAnimationFrame(enhanceSecondHandAnimation);
    };
    
    // Start smooth animation
    requestAnimationFrame(enhanceSecondHandAnimation);
});