The AI discussion thread

Page 46 - Seeking answers? Join the AnandTech community: where nearly half-a-million members share solutions and discuss the latest tech.
Toggle sidebar Toggle sidebar

biostud

Lifer
Feb 27, 2003
19,486
6,550
136
Not there yet...

I wanted Co-Pilot to make a simple watch with both minutes in 5 minutes interval and hours showing, so I could train with my daughters. This is what it gave me:

 
Reactions: Saylick
I

igor_kavinski

Lifer
Jul 27, 2020
24,243
16,896
146
Thank you so much. You made me try out Gemini. It had the same problem.

BUT, then I tried 2.5 experimental version and it gave me almost working code.

Told it to fix a few mistakes and voila!

An actual WORKING clock in HTML/CSS/JS, showing the current time!




Code: 
<!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>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* Custom styles for the clock */
        body {
            font-family: 'Inter', sans-serif; /* Apply Inter font */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f4f8; /* Light background */
        }
        .clock {
            width: 300px; /* Size of the clock */
            height: 300px;
            border-radius: 50%; /* Make it circular */
            background-color: #ffffff; /* White background */
            position: relative;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05); /* Soft shadow */
        }
        .clock-face {
            position: relative;
            width: 100%;
            height: 100%;
        }
        /* Center dot */
        .center-dot {
            width: 12px;
            height: 12px;
            background-color: #1e293b; /* Darker center dot */
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 11; /* Above hands */
        }
        /* Base styles for hands */
        .hand {
            width: 50%;
            height: 4px; /* Default thickness */
            background-color: #1e293b; /* Dark color for hands */
            position: absolute;
            top: 50%;
            left: 0; /* Start from the left edge */
            transform-origin: 100% 50%; /* Rotate around the right end (center of clock) */
            transform: translateY(-50%) rotate(90deg); /* Initial position (pointing up) */
            border-radius: 2px; /* Rounded ends */
            z-index: 10;
            transition: transform 0.1s cubic-bezier(0.4, 2.3, 0.6, 1); /* Smooth tick effect */
        }
        /* Specific hand styles */
        .hour-hand {
            width: 35%; /* Shorter */
            height: 6px; /* Thicker */
            left: 15%; /* Adjust left position to center rotation point */
            background-color: #334155; /* Slightly lighter than dot/minute */
        }
        .minute-hand {
            width: 45%; /* Medium length */
            height: 4px;
            left: 5%; /* Adjust left position */
            background-color: #475569;
        }
        .second-hand {
            width: 48%; /* Longest */
            height: 2px; /* Thinnest */
            background-color: #ef4444; /* Red color for seconds */
            left: 2%; /* Adjust left position */
            z-index: 11; /* Above other hands */
        }
        /* Style for numbers */
        .number {
            position: absolute;
            width: 30px; /* Container for number */
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-weight: bold;
            color: #334155;
            /* Prevent text selection */
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        .hour-number {
            font-size: 1.25rem; /* Larger font size for hours */
        }
        .minute-number {
            font-size: 0.7rem; /* Smaller font size for minutes */
            color: #64748b; /* Lighter color for minutes */
        }
    </style>
</head>
<body class="bg-gray-100">

    <div class="clock">
        <div class="clock-face">
            <div class="hand hour-hand" data-hour-hand></div>
            <div class="hand minute-hand" data-minute-hand></div>
            <div class="hand second-hand" data-second-hand></div>
            <div class="center-dot"></div>
            </div> </div>

    <script>
        // Get references to the hand elements
        const hourHand = document.querySelector('[data-hour-hand]');
        const minuteHand = document.querySelector('[data-minute-hand]');
        const secondHand = document.querySelector('[data-second-hand]');
        const clockFace = document.querySelector('.clock-face');

        // Function to set the clock hands
        function setClock() {
            const currentDate = new Date(); // Get current date and time
            const secondsRatio = currentDate.getSeconds() / 60;
            const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
            const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;

            // Rotate hands based on time ratios
            setRotation(secondHand, secondsRatio);
            setRotation(minuteHand, minutesRatio);
            setRotation(hourHand, hoursRatio);
        }

        // Function to apply rotation transform
        function setRotation(element, rotationRatio) {
            // Add 90 degrees because the initial CSS position is horizontal (pointing right)
            // but we want 0 degrees to be pointing up (12 o'clock)
            element.style.transform = `translateY(-50%) rotate(${rotationRatio * 360 + 90}deg)`;
        }

        // Function to create and position numbers
        function createNumbers() {
            const clockElement = document.querySelector('.clock');
            // Clear existing numbers if any (e.g., on resize if implemented)
            clockFace.querySelectorAll('.number').forEach(num => num.remove());

            const radius = clockElement.offsetWidth / 2; // Calculate radius dynamically
            const center = radius; // Center coordinate is same as radius

            // Check if radius is valid before proceeding
            if (radius <= 0) {
                console.error("Clock radius calculation failed. Ensure .clock element has dimensions.");
                return; // Stop if radius isn't calculated correctly
            }


            // Add Hour Numbers (1 to 12)
            const hourRadius = radius * 0.75; // Radius for hour numbers
            for (let i = 1; i <= 12; i++) {
                const angle = (i / 12) * 2 * Math.PI - Math.PI / 2; // Calculate angle (adjusting for 12 at top)
                const x = center + hourRadius * Math.cos(angle);
                const y = center + hourRadius * Math.sin(angle);

                const numberDiv = document.createElement('div');
                numberDiv.classList.add('number', 'hour-number');
                // Center the number div on its calculated position
                numberDiv.style.left = `calc(${x}px - 15px)`; // Adjust position based on number div size (30px / 2)
                numberDiv.style.top = `calc(${y}px - 15px)`;
                numberDiv.textContent = i;
                clockFace.appendChild(numberDiv);
            }

            // Add Minute Numbers (0, 5, 10, ..., 55)
            const minuteRadius = radius * 0.92; // Radius for minute numbers (closer to edge)
            for (let i = 0; i < 60; i += 5) {
                 const angle = (i / 60) * 2 * Math.PI - Math.PI / 2; // Calculate angle
                 const x = center + minuteRadius * Math.cos(angle);
                 const y = center + minuteRadius * Math.sin(angle);

                 const numberDiv = document.createElement('div');
                 numberDiv.classList.add('number', 'minute-number');
                 // Center the number div on its calculated position
                 numberDiv.style.left = `calc(${x}px - 15px)`; // Adjust position
                 numberDiv.style.top = `calc(${y}px - 15px)`;
                 // Display '00' for the 0 minute mark, otherwise display the minute value
                 numberDiv.textContent = i === 0 ? '00' : i;
                 clockFace.appendChild(numberDiv);
            }
        }

        // Ensure numbers are created after the DOM is fully loaded and sized
        window.addEventListener('DOMContentLoaded', (event) => {
            // Delay slightly to ensure layout is complete for offsetWidth calculation
            setTimeout(() => {
                createNumbers(); // Create the numbers
                setClock();      // Set hands to current time immediately

                // Update the clock every second
                setInterval(setClock, 1000);

                // Optional: Recalculate numbers on window resize for responsiveness
                // window.addEventListener('resize', createNumbers);
            }, 0); // Timeout 0 pushes execution after current rendering cycle
        });

    </script>

</body>
</html>

Paste the code in a text file, rename extension from txt to htm and magic!
 
Reactions: Ken g6, biostud and Kaido
I

igor_kavinski

Lifer
Jul 27, 2020
24,243
16,896
146
Digital display added!

Code: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analog Clock with Digital Display</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
    <style>
        /* Custom styles for the clock */
        body {
            font-family: 'Inter', sans-serif; /* Apply Inter font */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f4f8; /* Light background */
        }
        .clock {
            width: 300px; /* Size of the clock */
            height: 300px;
            border-radius: 50%; /* Make it circular */
            background-color: #ffffff; /* White background */
            position: relative;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05); /* Soft shadow */
        }
        .clock-face {
            position: relative;
            width: 100%;
            height: 100%;
        }
        /* Center dot */
        .center-dot {
            width: 12px;
            height: 12px;
            background-color: #1e293b; /* Darker center dot */
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 11; /* Above hands and digital display */
        }
        /* Base styles for hands */
        .hand {
            width: 50%;
            height: 4px; /* Default thickness */
            background-color: #1e293b; /* Dark color for hands */
            position: absolute;
            top: 50%;
            left: 0; /* Start from the left edge */
            transform-origin: 100% 50%; /* Rotate around the right end (center of clock) */
            transform: translateY(-50%) rotate(90deg); /* Initial position (pointing up) */
            border-radius: 2px; /* Rounded ends */
            z-index: 10; /* Below center dot, above digital */
            transition: transform 0.1s cubic-bezier(0.4, 2.3, 0.6, 1); /* Smooth tick effect */
        }
        /* Specific hand styles */
        .hour-hand {
            width: 35%; /* Shorter */
            height: 6px; /* Thicker */
            left: 15%; /* Adjust left position to center rotation point */
            background-color: #334155; /* Slightly lighter than dot/minute */
        }
        .minute-hand {
            width: 45%; /* Medium length */
            height: 4px;
            left: 5%; /* Adjust left position */
            background-color: #475569;
        }
        .second-hand {
            width: 48%; /* Longest */
            height: 2px; /* Thinnest */
            background-color: #ef4444; /* Red color for seconds */
            left: 2%; /* Adjust left position */
            z-index: 10; /* Keep same z-index as other hands */
        }
        /* Style for numbers */
        .number {
            position: absolute;
            width: 30px; /* Container for number */
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-weight: bold;
            color: #334155;
            /* Prevent text selection */
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        .hour-number {
            font-size: 1.25rem; /* Larger font size for hours */
        }
        .minute-number {
            font-size: 0.7rem; /* Smaller font size for minutes */
            color: #64748b; /* Lighter color for minutes */
        }
        /* Style for Digital Time Display */
        .digital-time {
            position: absolute;
            bottom: 35%; /* Position below the center */
            left: 50%;
            transform: translateX(-50%);
            background-color: #000000; /* Black background */
            color: #34d399; /* Emerald green text (Tailwind emerald-400) */
            font-family: 'Roboto Mono', monospace; /* Monospaced font */
            padding: 4px 8px; /* Padding inside the rectangle */
            border-radius: 4px; /* Rounded corners */
            font-size: 0.9rem; /* Font size for digital time */
            z-index: 9; /* Below hands and center dot */
            letter-spacing: 1px; /* Spacing between characters */
            box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Subtle shadow */
        }
    </style>
</head>
<body class="bg-gray-100">

    <div class="clock">
        <div class="clock-face">
            <div class="hand hour-hand" data-hour-hand></div>
            <div class="hand minute-hand" data-minute-hand></div>
            <div class="hand second-hand" data-second-hand></div>
            <div class="center-dot"></div>
            <div class="digital-time" data-digital-time>00:00:00</div>
            </div>
    </div>

    <script>
        // Get references to the elements
        const hourHand = document.querySelector('[data-hour-hand]');
        const minuteHand = document.querySelector('[data-minute-hand]');
        const secondHand = document.querySelector('[data-second-hand]');
        const clockFace = document.querySelector('.clock-face');
        const digitalTimeDisplay = document.querySelector('[data-digital-time]'); // Get digital display element

        // Function to set the clock hands and digital display
        function setClock() {
            const currentDate = new Date(); // Get current date and time

            // Analog calculations
            const seconds = currentDate.getSeconds();
            const minutes = currentDate.getMinutes();
            const hours = currentDate.getHours();
            const secondsRatio = seconds / 60;
            const minutesRatio = (secondsRatio + minutes) / 60;
            const hoursRatio = (minutesRatio + hours) / 12;

            // Rotate analog hands
            setRotation(secondHand, secondsRatio);
            setRotation(minuteHand, minutesRatio);
            setRotation(hourHand, hoursRatio);

            // Digital display update
            // Format H, M, S to always have two digits (e.g., 01, 09)
            const formattedHours = String(hours).padStart(2, '0');
            const formattedMinutes = String(minutes).padStart(2, '0');
            const formattedSeconds = String(seconds).padStart(2, '0');

            // Update the text content of the digital display
            digitalTimeDisplay.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
        }

        // Function to apply rotation transform to analog hands
        function setRotation(element, rotationRatio) {
            element.style.transform = `translateY(-50%) rotate(${rotationRatio * 360 + 90}deg)`;
        }

        // Function to create and position analog numbers
        function createNumbers() {
            const clockElement = document.querySelector('.clock');
            clockFace.querySelectorAll('.number').forEach(num => num.remove()); // Clear existing numbers

            const radius = clockElement.offsetWidth / 2;
            const center = radius;

            if (radius <= 0) {
                console.error("Clock radius calculation failed.");
                return;
            }

            // Add Hour Numbers (1 to 12)
            const hourRadius = radius * 0.75;
            for (let i = 1; i <= 12; i++) {
                const angle = (i / 12) * 2 * Math.PI - Math.PI / 2;
                const x = center + hourRadius * Math.cos(angle);
                const y = center + hourRadius * Math.sin(angle);
                const numberDiv = document.createElement('div');
                numberDiv.classList.add('number', 'hour-number');
                numberDiv.style.left = `calc(${x}px - 15px)`;
                numberDiv.style.top = `calc(${y}px - 15px)`;
                numberDiv.textContent = i;
                clockFace.appendChild(numberDiv);
            }

            // Add Minute Numbers (0, 5, ..., 55)
            const minuteRadius = radius * 0.92;
            for (let i = 0; i < 60; i += 5) {
                 const angle = (i / 60) * 2 * Math.PI - Math.PI / 2;
                 const x = center + minuteRadius * Math.cos(angle);
                 const y = center + minuteRadius * Math.sin(angle);
                 const numberDiv = document.createElement('div');
                 numberDiv.classList.add('number', 'minute-number');
                 numberDiv.style.left = `calc(${x}px - 15px)`;
                 numberDiv.style.top = `calc(${y}px - 15px)`;
                 numberDiv.textContent = i === 0 ? '00' : i;
                 clockFace.appendChild(numberDiv);
            }
        }

        // Initial setup on DOM load
        window.addEventListener('DOMContentLoaded', (event) => {
            setTimeout(() => { // Ensure layout is stable
                createNumbers();
                setClock(); // Set initial time for both analog and digital

                // Update the clock every second
                setInterval(setClock, 1000);

                // Optional: Recalculate numbers on resize
                // window.addEventListener('resize', createNumbers);
            }, 0);
        });

    </script>

</body>
</html>



And free tier limit reached. No more free code for 24 hours
 
Reactions: biostud and ArrogantHair

Kaido

Elite Member & Kitchen Overlord
Feb 14, 2004
50,055
6,339
136
igor_kavinski said:
Thank you so much. You made me try out Gemini. It had the same problem.

BUT, then I tried 2.5 experimental version and it gave me almost working code.

Told it to fix a few mistakes and voila!

An actual WORKING clock in HTML/CSS/JS, showing the current time!


View attachment 123281

Code: 
<!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>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* Custom styles for the clock */
        body {
            font-family: 'Inter', sans-serif; /* Apply Inter font */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f4f8; /* Light background */
        }
        .clock {
            width: 300px; /* Size of the clock */
            height: 300px;
            border-radius: 50%; /* Make it circular */
            background-color: #ffffff; /* White background */
            position: relative;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05); /* Soft shadow */
        }
        .clock-face {
            position: relative;
            width: 100%;
            height: 100%;
        }
        /* Center dot */
        .center-dot {
            width: 12px;
            height: 12px;
            background-color: #1e293b; /* Darker center dot */
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 11; /* Above hands */
        }
        /* Base styles for hands */
        .hand {
            width: 50%;
            height: 4px; /* Default thickness */
            background-color: #1e293b; /* Dark color for hands */
            position: absolute;
            top: 50%;
            left: 0; /* Start from the left edge */
            transform-origin: 100% 50%; /* Rotate around the right end (center of clock) */
            transform: translateY(-50%) rotate(90deg); /* Initial position (pointing up) */
            border-radius: 2px; /* Rounded ends */
            z-index: 10;
            transition: transform 0.1s cubic-bezier(0.4, 2.3, 0.6, 1); /* Smooth tick effect */
        }
        /* Specific hand styles */
        .hour-hand {
            width: 35%; /* Shorter */
            height: 6px; /* Thicker */
            left: 15%; /* Adjust left position to center rotation point */
            background-color: #334155; /* Slightly lighter than dot/minute */
        }
        .minute-hand {
            width: 45%; /* Medium length */
            height: 4px;
            left: 5%; /* Adjust left position */
            background-color: #475569;
        }
        .second-hand {
            width: 48%; /* Longest */
            height: 2px; /* Thinnest */
            background-color: #ef4444; /* Red color for seconds */
            left: 2%; /* Adjust left position */
            z-index: 11; /* Above other hands */
        }
        /* Style for numbers */
        .number {
            position: absolute;
            width: 30px; /* Container for number */
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-weight: bold;
            color: #334155;
            /* Prevent text selection */
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        .hour-number {
            font-size: 1.25rem; /* Larger font size for hours */
        }
        .minute-number {
            font-size: 0.7rem; /* Smaller font size for minutes */
            color: #64748b; /* Lighter color for minutes */
        }
    </style>
</head>
<body class="bg-gray-100">

    <div class="clock">
        <div class="clock-face">
            <div class="hand hour-hand" data-hour-hand></div>
            <div class="hand minute-hand" data-minute-hand></div>
            <div class="hand second-hand" data-second-hand></div>
            <div class="center-dot"></div>
            </div> </div>

    <script>
        // Get references to the hand elements
        const hourHand = document.querySelector('[data-hour-hand]');
        const minuteHand = document.querySelector('[data-minute-hand]');
        const secondHand = document.querySelector('[data-second-hand]');
        const clockFace = document.querySelector('.clock-face');

        // Function to set the clock hands
        function setClock() {
            const currentDate = new Date(); // Get current date and time
            const secondsRatio = currentDate.getSeconds() / 60;
            const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
            const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;

            // Rotate hands based on time ratios
            setRotation(secondHand, secondsRatio);
            setRotation(minuteHand, minutesRatio);
            setRotation(hourHand, hoursRatio);
        }

        // Function to apply rotation transform
        function setRotation(element, rotationRatio) {
            // Add 90 degrees because the initial CSS position is horizontal (pointing right)
            // but we want 0 degrees to be pointing up (12 o'clock)
            element.style.transform = `translateY(-50%) rotate(${rotationRatio * 360 + 90}deg)`;
        }

        // Function to create and position numbers
        function createNumbers() {
            const clockElement = document.querySelector('.clock');
            // Clear existing numbers if any (e.g., on resize if implemented)
            clockFace.querySelectorAll('.number').forEach(num => num.remove());

            const radius = clockElement.offsetWidth / 2; // Calculate radius dynamically
            const center = radius; // Center coordinate is same as radius

            // Check if radius is valid before proceeding
            if (radius <= 0) {
                console.error("Clock radius calculation failed. Ensure .clock element has dimensions.");
                return; // Stop if radius isn't calculated correctly
            }


            // Add Hour Numbers (1 to 12)
            const hourRadius = radius * 0.75; // Radius for hour numbers
            for (let i = 1; i <= 12; i++) {
                const angle = (i / 12) * 2 * Math.PI - Math.PI / 2; // Calculate angle (adjusting for 12 at top)
                const x = center + hourRadius * Math.cos(angle);
                const y = center + hourRadius * Math.sin(angle);

                const numberDiv = document.createElement('div');
                numberDiv.classList.add('number', 'hour-number');
                // Center the number div on its calculated position
                numberDiv.style.left = `calc(${x}px - 15px)`; // Adjust position based on number div size (30px / 2)
                numberDiv.style.top = `calc(${y}px - 15px)`;
                numberDiv.textContent = i;
                clockFace.appendChild(numberDiv);
            }

            // Add Minute Numbers (0, 5, 10, ..., 55)
            const minuteRadius = radius * 0.92; // Radius for minute numbers (closer to edge)
            for (let i = 0; i < 60; i += 5) {
                 const angle = (i / 60) * 2 * Math.PI - Math.PI / 2; // Calculate angle
                 const x = center + minuteRadius * Math.cos(angle);
                 const y = center + minuteRadius * Math.sin(angle);

                 const numberDiv = document.createElement('div');
                 numberDiv.classList.add('number', 'minute-number');
                 // Center the number div on its calculated position
                 numberDiv.style.left = `calc(${x}px - 15px)`; // Adjust position
                 numberDiv.style.top = `calc(${y}px - 15px)`;
                 // Display '00' for the 0 minute mark, otherwise display the minute value
                 numberDiv.textContent = i === 0 ? '00' : i;
                 clockFace.appendChild(numberDiv);
            }
        }

        // Ensure numbers are created after the DOM is fully loaded and sized
        window.addEventListener('DOMContentLoaded', (event) => {
            // Delay slightly to ensure layout is complete for offsetWidth calculation
            setTimeout(() => {
                createNumbers(); // Create the numbers
                setClock();      // Set hands to current time immediately

                // Update the clock every second
                setInterval(setClock, 1000);

                // Optional: Recalculate numbers on window resize for responsiveness
                // window.addEventListener('resize', createNumbers);
            }, 0); // Timeout 0 pushes execution after current rendering cycle
        });

    </script>

</body>
</html>

Paste the code in a text file, rename extension from txt to htm and magic!
Click to expand...

That would have been a whole-semester project for me back in college LOL
 
Reactions: Ken g6 and igor_kavinski
M

MS_AT

Senior member
Jul 15, 2024
611
1,260
96
igor_kavinski said:
And free tier limit reached. No more free code for 24 hours
Click to expand...
Play with newest Qwen (I used Qwen_Qwen3-30B-A3B-Q6_K.gguf locally, it's MOE so kind of fast)

it generated this, needing one prompt for initial generation and one to fix mistakes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Analog Watch</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f0f0f0;
}
canvas {
border: 2px solid #333;
background: white;
}
</style>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>

<script>
const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d');

function drawClock() {
const cx = canvas.width / 2;
const cy = canvas.height / 2;
const radius = 150;

// Draw the clock face
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();

// Set text color to black
ctx.fillStyle = 'black';
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// Draw hour numbers (1-12)
for (let i = 1; i <= 12; i++) {
const angle = Math.PI / 2 - i * Math.PI / 6; // 30 degrees per hour
const x = cx + Math.cos(angle) * radius * 0.85;
const y = cy - Math.sin(angle) * radius * 0.85;
ctx.fillText(i, x, y);
}

// Draw small second numbers (every 5 seconds)
ctx.font = '12px Arial';
for (let i = 5; i <= 60; i += 5) {
const angle = Math.PI / 2 - i * Math.PI / 30; // 6 degrees per second
const x = cx + Math.cos(angle) * radius * 0.95;
const y = cy - Math.sin(angle) * radius * 0.95;
ctx.fillText(i, x, y);
}

// Draw hands
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

// Hour hand
const hourAngle = Math.PI / 2 - (hours % 12) * Math.PI / 6 - minutes * Math.PI / 360;
const hourLength = radius * 0.5;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(cx + Math.cos(hourAngle) * hourLength, cy - Math.sin(hourAngle) * hourLength);
ctx.strokeStyle = 'black';
ctx.lineWidth = 6;
ctx.stroke();

// Minute hand
const minuteAngle = Math.PI / 2 - minutes * Math.PI / 30 - seconds * Math.PI / 1800;
const minuteLength = radius * 0.75;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(cx + Math.cos(minuteAngle) * minuteLength, cy - Math.sin(minuteAngle) * minuteLength);
ctx.strokeStyle = 'black';
ctx.lineWidth = 4;
ctx.stroke();

// Second hand
const secondAngle = Math.PI / 2 - seconds * Math.PI / 30;
const secondLength = radius * 0.9;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(cx + Math.cos(secondAngle) * secondLength, cy - Math.sin(secondAngle) * secondLength);
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.stroke();

// Draw center dot
ctx.beginPath();
ctx.arc(cx, cy, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}

// Update the clock every second
setInterval(drawClock, 1000);
drawClock(); // Initial draw
</script>
</body>
</html>
Click to expand...
Click to expand...
 
Reactions: igor_kavinski
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom
sale-70-410-exam    | Exam-200-125-pdf    | we-sale-70-410-exam    | hot-sale-70-410-exam    | Latest-exam-700-603-Dumps    | Dumps-98-363-exams-date    | Certs-200-125-date    | Dumps-300-075-exams-date    | hot-sale-book-C8010-726-book    | Hot-Sale-200-310-Exam    | Exam-Description-200-310-dumps?    | hot-sale-book-200-125-book    | Latest-Updated-300-209-Exam    | Dumps-210-260-exams-date    | Download-200-125-Exam-PDF    | Exam-Description-300-101-dumps    | Certs-300-101-date    | Hot-Sale-300-075-Exam    | Latest-exam-200-125-Dumps    | Exam-Description-200-125-dumps    | Latest-Updated-300-075-Exam    | hot-sale-book-210-260-book    | Dumps-200-901-exams-date    | Certs-200-901-date    | Latest-exam-1Z0-062-Dumps    | Hot-Sale-1Z0-062-Exam    | Certs-CSSLP-date    | 100%-Pass-70-383-Exams    | Latest-JN0-360-real-exam-questions    | 100%-Pass-4A0-100-Real-Exam-Questions    | Dumps-300-135-exams-date    | Passed-200-105-Tech-Exams    | Latest-Updated-200-310-Exam    | Download-300-070-Exam-PDF    | Hot-Sale-JN0-360-Exam    | 100%-Pass-JN0-360-Exams    | 100%-Pass-JN0-360-Real-Exam-Questions    | Dumps-JN0-360-exams-date    | Exam-Description-1Z0-876-dumps    | Latest-exam-1Z0-876-Dumps    | Dumps-HPE0-Y53-exams-date    | 2017-Latest-HPE0-Y53-Exam    | 100%-Pass-HPE0-Y53-Real-Exam-Questions    | Pass-4A0-100-Exam    | Latest-4A0-100-Questions    | Dumps-98-365-exams-date    | 2017-Latest-98-365-Exam    | 100%-Pass-VCS-254-Exams    | 2017-Latest-VCS-273-Exam    | Dumps-200-355-exams-date    | 2017-Latest-300-320-Exam    | Pass-300-101-Exam    | 100%-Pass-300-115-Exams    |
http://www.portvapes.co.uk/    | http://www.portvapes.co.uk/    |