f0ster · August 5, 2025 03:32
diff --git a/clock.html b/clock.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Binary Clock</title>
    <style>
        body {
            background-color: #1a1a1a;
            /* Center the main wrapper on the page */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        /* The main container, now stacks the H, M, S rows vertically */
        #wrapper {
            display: flex;
            flex-direction: column;
            gap: 50px; /* Vertical space between the H, M, S rows */
            width: 80%; /* Control how far the dots spread out */
        }

        /* Styling for each row (hours, mins, secs) */
        .dot-row {
            display: flex;
            /* Lays out dots horizontally, with the '1's dot on the far right */
            flex-direction: row-reverse;
            justify-content: center; /* Evenly space the dots in the row */
            gap: 25px; /* Space between individual dots */
        }

        /* The style for each individual dot (the 'OFF' state) */
        .dot {
            width: 50px;
            height: 50px;
            background-color: #444;
            border-radius: 50%;
            transition: background-color 0.2s, transform 0.2s;
        }

        /* The style for a dot when it's 'ON' */
        .dot.on {
            background-color: #00ffff; /* A solid, bright cyan */
            box-shadow: 0 0 15px #00ffff77;
            transform: scale(1.05);
        }
    </style>
 </head>
 <body>

    <div id="wrapper">
        <div id="hours" class="dot-row">
            <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>

        <div id="mins" class="dot-row">
            <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>

        <div id="secs" class="dot-row">
            <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>
    </div>

 <script>
    // No changes were needed for the JavaScript logic.
    // It is independent of the visual layout.
    document.addEventListener('DOMContentLoaded', () => {

        const hourDots = document.querySelectorAll('#hours .dot');
        const minDots = document.querySelectorAll('#mins .dot');
        const secDots = document.querySelectorAll('#secs .dot');

        function updateColumn(dots, value) {
            for (let i = 0; i < dots.length; i++) {
                const bitValue = Math.pow(2, i);
                if ((value & bitValue) !== 0) {
                    dots[i].classList.add('on');
                } else {
                    dots[i].classList.remove('on');
                }
            }
        }

        function tick() {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            updateColumn(hourDots, hours);
            updateColumn(minDots, minutes);
            updateColumn(secDots, seconds);
        }

        tick();
        setInterval(tick, 1000);
    });
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Horizontal Binary Clock</title>
	<style>
	body {
	background-color: #1a1a1a;
	/* Center the main wrapper on the page */
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	overflow: hidden;
	}

	/* The main container, now stacks the H, M, S rows vertically */
	#wrapper {
	display: flex;
	flex-direction: column;
	gap: 50px; /* Vertical space between the H, M, S rows */
	width: 80%; /* Control how far the dots spread out */
	}

	/* Styling for each row (hours, mins, secs) */
	.dot-row {
	display: flex;
	/* Lays out dots horizontally, with the '1's dot on the far right */
	flex-direction: row-reverse;
	justify-content: center; /* Evenly space the dots in the row */
	gap: 25px; /* Space between individual dots */
	}

	/* The style for each individual dot (the 'OFF' state) */
	.dot {
	width: 50px;
	height: 50px;
	background-color: #444;
	border-radius: 50%;
	transition: background-color 0.2s, transform 0.2s;
	}

	/* The style for a dot when it's 'ON' */
	.dot.on {
	background-color: #00ffff; /* A solid, bright cyan */
	box-shadow: 0 0 15px #00ffff77;
	transform: scale(1.05);
	}
	</style>
	</head>
	<body>

	<div id="wrapper">
	<div id="hours" class="dot-row">
	<div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>

	<div id="mins" class="dot-row">
	<div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>

	<div id="secs" class="dot-row">
	<div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>
	</div>

	<script>
	// No changes were needed for the JavaScript logic.
	// It is independent of the visual layout.
	document.addEventListener('DOMContentLoaded', () => {

	const hourDots = document.querySelectorAll('#hours .dot');
	const minDots = document.querySelectorAll('#mins .dot');
	const secDots = document.querySelectorAll('#secs .dot');

	function updateColumn(dots, value) {
	for (let i = 0; i < dots.length; i++) {
	const bitValue = Math.pow(2, i);
	if ((value & bitValue) !== 0) {
	dots[i].classList.add('on');
	} else {
	dots[i].classList.remove('on');
	}
	}
	}

	function tick() {
	const now = new Date();
	const hours = now.getHours();
	const minutes = now.getMinutes();
	const seconds = now.getSeconds();

	updateColumn(hourDots, hours);
	updateColumn(minDots, minutes);
	updateColumn(secDots, seconds);
	}

	tick();
	setInterval(tick, 1000);
	});
	</script>

	</body>
	</html>