/* Define, load, and specify the custom font we use for the ticket
* date, time, and service name. */
@font-face {
- font-family: "CharmBypass Ticket Text";
+ font-family: "CharmBypass Regular";
src:
- url("data:font/woff2;base64,@TICKETFONT@") format("woff2")
+ url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
}
#servicename, #tickettime, #ticketdate {
- font-family: "CharmBypass Ticket Text" !important;
+ font-family: "CharmBypass Regular";
}
+ @font-face {
+ font-family: "CharmBypass Bold";
+ src:
+ url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
+ }
+
+ #serviceletter {
+ font-family: "CharmBypass Bold";
+ }
+
+ /************************/
+ /* Scrolling animations */
+ /************************/
+
+ /* Bus */
+ @keyframes busroll {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(100%);
+ }
+ }
+
+ #bus {
+ animation: busroll 23s linear infinite;
+ }
+
+
+ /* Tram */
+ @keyframes tramroll {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(100%);
+ }
+ }
+
+ #tram {
+ animation: tramroll 17s linear infinite;
+ }
+
+
+ /* Tram */
+ @keyframes trainroll {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(100%);
+ }
+ }
+
+ #train {
+ animation: trainroll 11s linear infinite;
+ }
+
+
+ /* Clouds */
+ @keyframes cloudsfloat {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #clouds {
+ animation: cloudsfloat 40s linear infinite;
+ }
+
+ @keyframes cloudscopyfloat {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #cloudscopy {
+ animation: cloudscopyfloat 40s linear infinite;
+ }
+
+
+ /* Trees */
+ @keyframes treespass {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #trees {
+ /* The trees move a little faster than the clouds */
+ animation: treespass 30s linear infinite;
+ }
+
+ @keyframes treescopypass {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #treescopy {
+ /* The trees move a little faster than the clouds */
+ animation: treescopypass 30s linear infinite;
+ }
+
+
+ /* City skyline */
+ @keyframes cityscroll {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #city {
+ /* The city moves faster than the clouds but slower
+ * than the trees */
+ animation: cityscroll 35s linear infinite;
+ }
+
+ @keyframes citycopyscroll {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #citycopy {
+ /* The city moves faster than the clouds but slower
+ * than the trees */
+ animation: citycopyscroll 35s linear infinite;
+ }
</style>
</head>
tt = document.getElementById("tickettime");
tt.firstChild.textContent = date.toLocaleTimeString();
- td = document.getElementById("ticketdate");
+ const td = document.getElementById("ticketdate");
const dateopts = {
day: "2-digit",
month: "2-digit",