-
-
Save BigWubsy/bb8ee54d174bbf64922031d3176437ba to your computer and use it in GitHub Desktop.
OBS Studio: A HTML page for showing current date and time in the video
This file contains 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"> | |
| <title>A simple clock</title> | |
| </head> | |
| <style> | |
| @font-face { | |
| font-family: 'Horizon'; | |
| src: url('Futura Condensed Extra Bold Oblique.otf') format('truetype'); | |
| } | |
| #output { | |
| position: relative; | |
| display: inline-block; | |
| font-family: Horizon; | |
| font-size: 40px; | |
| text-align: center; | |
| color: white; | |
| padding: 20px 40px; | |
| margin-left: 20px; /* Adds a gap only to the left side of the box */ | |
| } | |
| #output::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(203, 48, 125, 1); /* Same background color */ | |
| transform: skew(-15deg); /* Skew applied only to the box */ | |
| z-index: -1; /* Places the skewed box behind the text */ | |
| } | |
| #output * { | |
| transform: none; /* Prevents skewing of the inner text */ | |
| } | |
| </style> | |
| <body translate="no" > | |
| <div id="output" | |
| style= "display: inline-block; | |
| font-family: Horizon; | |
| font-size: 60px; | |
| text-align: center; | |
| color: white; | |
| padding: 10px;"> | |
| </div> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script> | |
| <script> | |
| // https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript | |
| var urlParams; | |
| (function () { | |
| var match, | |
| pl = /\+/g, // Regex for replacing addition symbol with a space | |
| search = /([^&=]+)=?([^&]*)/g, | |
| decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); }, | |
| query = window.location.search.substring(1); | |
| urlParams = {}; | |
| while (match = search.exec(query)) | |
| urlParams[decode(match[1])] = decode(match[2]); | |
| })(); | |
| var output = document.getElementById("output"); | |
| if (urlParams["style"]) output.setAttribute("style", urlParams["style"]); | |
| if (urlParams["bodyStyle"]) document.body.setAttribute("style", urlParams["bodyStyle"]); | |
| var c; | |
| setInterval( | |
| c = function() { | |
| output.innerText = moment().format(urlParams["format"] || 'DD MMM YYYY, hh:mm:ss A'); | |
| }, 1000); | |
| c(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a 'Forza Horizon' style time and date overlay. The 'Futura Condensed Extra Bold Oblique' font was used.