This is very nice! I was fumbling with capturing a clock website and cropping away the ads and everything, but then I needed to crop, and every reboot I needed to reload the clock site, and then I couldn't change the font and the display, and I messed around with a Chromakey filter to make it transparent... It was a whole mess.
Luckily I found this! Simple but very, very effective.
Now, I have little experience with HTML and CSS, but in case it helps anyone else: with the help of ChatGPT, I changed it to point to a local font file (I have a retro C64 style scene going on). Just put the referred font file in the same dir as the html.
<style>
@font-face {
font-family: myFont;
src: url('C64_Pro_Mono-STYLE.ttf');
}
#output {
display: inline-block;
font-family: myFont;
font-size: 50px;
text-align: right;
color: lightgray;
border-radius: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.75);
}
</style>
</head>
<body translate="no" >
<div id="output"></div>
(...)
