Simple iframe clock via Free Clocks for Your Website
Posted by jpluimers on 2021/08/11
Using [WayBack] Free Clocks for Your Website, I created this clock for a 1920×1080 web dashboard which is a web page hosted on [WayBack] raw.githack.com with an iframe hosted at www.timeanddate.com
I know that is a risk, but that is OK for now: that site has existed for a very long time and probably will last a while.
There is a truckload of options you can use, despite the clock being simple. Luckily the [WayBack] FAQ: Free Clocks for Your Website explains these options.
This is the gist of the above “this clock” page:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <meta name="robots" content="noindex, nofollow"> | |
| <meta name="googlebot" content="noindex, nofollow"> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; /* override browser setting for body `margin: 8px;` */ | |
| overflow: hidden; /* remove scroll bars; does not work for iframes */ | |
| } | |
| .box { | |
| float: left; | |
| width: 100vw; /* Firefox/Chrome outside Mac OS X: force viewport-width */ | |
| overflow: hidden; /* remove scroll bars; does not work for iframes */ | |
| background-color: azure; | |
| } | |
| iframe { | |
| border-width: 0; /* override browser setting for iframe `border-width: 2px; */ | |
| height: 100vh; | |
| width: 50vw; | |
| } | |
| .clock_iframe { | |
| float: right; | |
| height: 30vh; | |
| width: 16vw; | |
| } | |
| </style> | |
| <title>Clock in frame</title> | |
| </head> | |
| <body> | |
| <div class="box"> | |
| <iframe class="clock_iframe" src="https://freesecure.timeanddate.com/clock/i6xvy9ve/n16/szw300/szh300/hoc000/cf100/hgr0/fiv0/fas34/fdi74/mqv0/mhc000/mhs3/mhl20/mhw1/mhd84/mmv0/hhs1/hms1/hsc000/hss1" frameborder="0" width="300" height="300"> | |
| <!– https://www.timeanddate.com/clocks/free.html –> | |
| </iframe> | |
| </div | |
| </body> | |
| </html> |
–jeroen
The Wiert Corner - irregular stream of stuff 
Leave a comment