funnyclocks.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <title>Funny Clocks</title>
</head>


<body style="background-color:black; overflow-x: hidden;">

    <div class="title">
        <form>
            <button class="button-85" formaction="https://blobinaticuber.github.io/">Back to main page</button>
        </form>
        <!-- <form action="\index.md">
            <input class="button-85" type="submit" value="Back to main page" />
        </form> -->

        <h1>FUNNY CLOCKS</h1>
        <iframe
            src="https://free.timeanddate.com/clock/i9n7c2i7/n1093/szw110/szh110/hoc222/hbw6/cf100/hgr0/hcw2/hcd88/fan2/fas20/fdi70/mqc000/mqs3/mql13/mqw4/mqd94/mhc000/mhs3/mhl13/mhw4/mhd94/mmc000/mml5/mmw1/mmd94/hwm2/hhs2/hhb18/hms2/hml80/hmb18/hmr7/hscf09/hss1/hsl90/hsr5"
            frameborder="0" width="110" height="110"></iframe>

    </div>


    <p>This website shows a bunch of clocks in silly formats for fun :p</p>

    <p>24 Hour Time: <span id="24hours"></span>:<span id="24min"></span>:<span id="24sec"></span></p>

    <p>12 Hour Time: <span id="12hours"></span>:<span id="12min"></span>:<span id="12sec"></span> <span id="ampm"></span></p>

    <p>Total seconds since midnight: <span id="totalSec"></span></p>

    <p>Metric Time: <span id="metHour"></span>:<span id="metMin"></span>:<span id="metSec"></span></p>

    <p>Binary Time: <span id="bin1"></span> <span id="bin2"></span> <span id="bin3"> </span> <span id="bin4"></span>
    </p>

    <p>Hex time: <span id="hex"></span></p>

    <style>
        .title {
            width: 100%;
            margin: 0 auto;
            padding: 20px;
            justify-content: space-evenly;
            display: flex;
            align-items: center;
        }

        .button-85 {
            padding: 0.6em 2em;
            border: none;
            outline: none;
            color: rgb(255, 255, 255);
            background: #111;
            cursor: pointer;
            position: relative;
            z-index: 0;
            border-radius: 10px;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }


        .button-85:before {
            content: "";
            background: linear-gradient(45deg,
                    #ff0000,
                    #ff7300,
                    #fffb00,
                    #48ff00,
                    #00ffd5,
                    #002bff,
                    #7a00ff,
                    #ff00c8,
                    #ff0000);
            position: absolute;
            top: -2px;
            left: -2px;
            background-size: 400%;
            z-index: -1;
            filter: blur(5px);
            -webkit-filter: blur(5px);
            width: calc(100% + 4px);
            height: calc(100% + 4px);
            animation: glowing-button-85 20s linear infinite;
            transition: opacity 0.3s ease-in-out;
            border-radius: 10px;
        }

        @keyframes glowing-button-85 {
            0% {
                background-position: 0 0;
            }

            50% {
                background-position: 400% 0;
            }

            100% {
                background-position: 0 0;
            }
        }

        .button-85:after {
            z-index: -1;
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: #222;
            left: 0;
            top: 0;
            border-radius: 10px;
        }
    </style>

</body>

<script>


    function updateTime() {
        let d = new Date();
        let hours = d.getHours();
        let minutes = d.getMinutes();
        let seconds = d.getSeconds();
        let milliseconds = d.getMilliseconds();

        // 24 hour stuff
        document.getElementById("24hours").innerHTML = hours < 10 ? "0" + hours.toString() : hours;
        document.getElementById("24min").innerHTML = minutes < 10 ? "0" + minutes.toString() : minutes;
        document.getElementById("24sec").innerHTML = seconds < 10 ? "0" + seconds.toString() : seconds;
        // 12 hour stuff
        document.getElementById("12hours").innerHTML = hours > 12 ? hours - 12 : hours;
        document.getElementById("12min").innerHTML = minutes < 10 ? "0" + minutes.toString() : minutes;
        document.getElementById("12sec").innerHTML = seconds < 10 ? "0" + seconds.toString() : seconds;
        document.getElementById("ampm").innerHTML = hours > 12 ? "PM" : "AM";
        // millisecond stuff
        let ImperialMillisecondsFromMidnight = hours * 60 * 60 * 1000 + minutes * 60 * 1000 + seconds * 1000 + milliseconds;
        document.getElementById("totalSec").innerHTML = parseInt(ImperialMillisecondsFromMidnight / 1000);
        let MetricMillisecondsFromMidnight = ImperialMillisecondsFromMidnight * (100000 / 86400);
        // document.getElementById("metricSec").innerHTML = parseInt(MetricMillisecondsFromMidnight / 1000);


        let metricSecondFromMidnight = Math.trunc(MetricMillisecondsFromMidnight / 1000);
        let metricHour = Math.trunc(metricSecondFromMidnight / 10000);
        let metricMinute = Math.trunc((metricSecondFromMidnight - metricHour * 10000) / 100);
        let metricSecond = metricSecondFromMidnight - metricHour * 10000 - metricMinute * 100;

        document.getElementById("metHour").innerHTML = metricHour;
        document.getElementById("metMin").innerHTML = metricMinute < 10 ? "0" + metricMinute.toString() : metricMinute;
        document.getElementById("metSec").innerHTML = metricSecond < 10 ? "0" + metricSecond.toString() : metricSecond;

        let binarySecondFromMidnight = ImperialMillisecondsFromMidnight * (65536 / 86400) / 1000;
        document.getElementById("bin1").innerHTML = (truncateString(DecimalToBinary(binarySecondFromMidnight)));

        let hexSecondFromMidnight = binarySecondFromMidnight.toString(16);
        document.getElementById("hex").innerHTML = (truncateString(hexSecondFromMidnight.toUpperCase()));
    }

    setInterval(updateTime, 100);

    function DecimalToBinary(d) {
        return d.toString(2);
    }

    function truncateString(str) {
        let array = str.split(".");
        return array[0];
    }


</script>


</html>