HTA Clock

<!DOCTYPE html>
<html>
<head>
    <title>Clock Widget</title>
    <HTA:APPLICATION
        APPLICATIONNAME="Clock Widget"
        BORDER = "thick"
        INNERBORDER = "no"
        CAPTION="no"
        SHOWINTASKBAR="yes"
        SINGLEINSTANCE="yes"
        SYSMENU="no"
        WINDOWSTATE="normal"
        SCROLL="no"
        MAXIMIZEBUTTON="no"
        MINIMIZEBUTTON="no"
    >
    <style>
        html, body {
            height: 100%; /* Ensure both HTML and body take full height */
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #titleBar {
            background-color: #FFF;
            color: black;
            font-size: 14px;
            padding: 0px 6px; 8px 6px; /* Adjusted padding */
            cursor: move;
            user-select: none; /* Prevent text selection */
            height: 24px; /* Fixed height for title bar */
        }
        #titleCaption {
            float: left; /* Title floats to the left */
            padding: 4px 0px 0px 0px;
        }
        #closeButton {
            background-color: #f44336; /* Red background for close button */
            border: none;
            color: white;
            cursor: pointer;
            font-size: 10px; /* Smaller font size */
            float: right; /* Button floats to the right */
            padding: 4px 6px; 4px 6px; /* Increased padding for button */
            margin: 0px 0px 0px 0px;
        }
        #closeButton:hover {
            background-color: #c62828; /* Darker red on hover */
        }
        #clockContainer {
            background-color: black;
            color: lime;
            text-align: center;
            font-size: 24px;
            padding: 10px;
            height: 100%; /* Set height to 100% */
            box-sizing: border-box; /* Include padding in height calculation */
        }
    </style>
    <script language="JScript">
        function pad(number) {
            return (number < 10 ? "0" : "") + number;
        }

        function updateClock() {
            var now = new Date();
            var hours = pad(now.getHours());
            var minutes = pad(now.getMinutes());
            var seconds = pad(now.getSeconds());
            document.getElementById("clock").innerText = hours + ":" + minutes + ":" + seconds;
        }

        function startClock() {
            updateClock();
            setInterval(updateClock, 1000); // Update every second
        }

        function setPosition() {
            window.moveTo(screen.width - 200, screen.height - 150); // Position in bottom-right corner
            window.resizeTo(180, 100); // Set window size
        }

        // Drag functionality
        var offsetX, offsetY;

        function startDrag(e) {
            offsetX = window.event.clientX;
            offsetY = window.event.clientY;
            document.onmousemove = dragWindow;
            document.onmouseup = stopDrag;

            // Disable text selection during dragging
            document.body.style.userSelect = "none";
        }

        function dragWindow(e) {
            window.moveBy(window.event.clientX - offsetX, window.event.clientY - offsetY);
        }

        function stopDrag() {
            document.onmousemove = null;
            document.onmouseup = null;

            // Re-enable text selection after dragging
            document.body.style.userSelect = "";
        }

        // Close the application
        function closeApp() {
            window.close();
        }
    </script>
</head>
<body onload="startClock(); setPosition();">
    <div id="titleBar" onmousedown="startDrag(event)">
        <div id="titleCaption">Clock Widget</div>
        <button id="closeButton" onclick="closeApp()">X</button>
    </div>
    <div id="clockContainer">
        <div id="clock">00:00:00</div>
    </div>
</body>
</html>