{"id":1430,"date":"2023-05-13T10:14:00","date_gmt":"2023-05-13T07:14:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1430"},"modified":"2023-05-14T22:20:18","modified_gmt":"2023-05-14T19:20:18","slug":"typographic-clock","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/1430\/","title":{"rendered":"Typographic Clock"},"content":{"rendered":"\n
\"Typographic<\/figure>
\n

<\/p>\n<\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

\n  <div class="clock">\n    <div class="block" data-num="0"><\/div>\n    <div class="block" data-num="1"><\/div>\n    <div class="block" data-num="2"><\/div>\n    <div class="block" data-num="3"><\/div>\n    <div class="block" data-num="4"><\/div>\n    <div class="block" data-num="5"><\/div>\n    <div class="block" data-num="6"><\/div>\n    <div class="block" data-num="7"><\/div>\n    <div class="block" data-num="8"><\/div>\n    <div class="block" data-num="9"><\/div>\n    <div class="block" data-num="10"><\/div>\n    <div class="block" data-num="11"><\/div>\n    <div class="block" data-num="12"><\/div>\n    <div class="block" data-num="13"><\/div>\n    <div class="block" data-num="14"><\/div>\n    <div class="block" data-num="15"><\/div>\n    <div class="block" data-num="16"><\/div>\n    <div class="block" data-num="17"><\/div>\n    <div class="block" data-num="18"><\/div>\n    <div class="block" data-num="19"><\/div>\n    <div class="block" data-num="20"><\/div>\n    <div class="block" data-num="21"><\/div>\n    <div class="block" data-num="22"><\/div>\n    <div class="block" data-num="23"><\/div>\n    <div class="block" data-num="24"><\/div>\n    <div class="block" data-num="25"><\/div>\n    <div class="block" data-num="26"><\/div>\n    <div class="block" data-num="27"><\/div>\n    <div class="block" data-num="28"><\/div>\n    <div class="block" data-num="29"><\/div>\n    <div class="block" data-num="30"><\/div>\n    <div class="block" data-num="31"><\/div>\n    <div class="block" data-num="32"><\/div>\n    <div class="block" data-num="33"><\/div>\n    <div class="block" data-num="34"><\/div>\n    <div class="block" data-num="35"><\/div>\n    <div class="block" data-num="36"><\/div>\n    <div class="block" data-num="37"><\/div>\n    <div class="block" data-num="38"><\/div>\n    <div class="block" data-num="39"><\/div>\n    <div class="block" data-num="40"><\/div>\n    <div class="block" data-num="41"><\/div>\n    <div class="block" data-num="42"><\/div>\n    <div class="block" data-num="43"><\/div>\n    <div class="block" data-num="44"><\/div>\n    <div class="block" data-num="45"><\/div>\n    <div class="block" data-num="46"><\/div>\n    <div class="block" data-num="47"><\/div>\n    <div class="block" data-num="48"><\/div>\n    <div class="block" data-num="49"><\/div>\n    <div class="block" data-num="50"><\/div>\n    <div class="block" data-num="51"><\/div>\n    <div class="block" data-num="52"><\/div>\n    <div class="block" data-num="53"><\/div>\n    <div class="block" data-num="54"><\/div>\n    <div class="block" data-num="55"><\/div>\n    <div class="block" data-num="56"><\/div>\n    <div class="block" data-num="57"><\/div>\n    <div class="block" data-num="58"><\/div>\n    <div class="block" data-num="59"><\/div>\n    <div class="divider"><\/div>\n  <\/div>\n  <div class="switch-theme">\n    <p>Change theme<\/p>\n    <label class="switch">\n      <input type="checkbox" onchange="changeTheme(event)"\/><span class="slider"><\/span>\n    <\/label>\n  <\/div><\/pre><\/div>\n\n\n\n
body {\n\twidth: 100vw;\n\theight: 100vh;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground: linear-gradient(to bottom right, #0f0f0f, #1a1a1a);\n\ttransition: all 0.4s;\n\tfont-family: "Roboto Mono", monospace;\n\tfont-weight: 300;\n  }\n  \n  .clock {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-flow: column wrap;\n\twidth: 280px;\n\theight: 100px;\n  }\n  \n  .block {\n\twidth: calc(100% \/ 12);\n\theight: 20%;\n\tcolor: #474747;\n\ttransition: 0.4s;\n  }\n  .block:not(:nth-child(n+16)):nth-child(n+11), .block:not(:nth-child(n+46)):nth-child(n+41) {\n\tmargin-right: 10px;\n  }\n  .block:not(:nth-child(n+31)):nth-child(n+26) {\n\tmargin-right: 20px;\n  }\n  .block:before {\n\tcontent: attr(data-num);\n\tposition: relative;\n\tdisplay: block;\n\tfont-size: 16px;\n\twidth: 100%;\n\theight: 100%;\n\tline-height: 20px;\n\ttext-align: center;\n  }\n  .block:nth-child(-n+10):before {\n\tcontent: "0" attr(data-num);\n  }\n  .block.active:before {\n\tcolor: whitesmoke;\n\tfont-weight: 500;\n  }\n  .block.second:before {\n\tcolor: #FF8300;\n  }\n  \n  .divider {\n\tposition: absolute;\n\twidth: 2px;\n\tbackground-color: whitesmoke;\n\theight: 60%;\n\ttop: 20%;\n\tleft: calc(50% + 19px);\n  }\n  \n  body.light-theme {\n\tbackground: #e6e6e6;\n  }\n  body.light-theme .block {\n\toutline: 1px solid #dfdfdf;\n\tcolor: #acacac;\n  }\n  body.light-theme .block.active:before {\n\tcolor: #333;\n  }\n  body.light-theme .block.second {\n\tbackground: #d4d4d4;\n  }\n  body.light-theme .block.second:before {\n\tcolor: #333;\n  }\n  body.light-theme .divider {\n\tbackground: #333;\n  }\n  \n  .switch-theme {\n\tposition: absolute;\n\tbottom: 40px;\n\tright: 40px;\n\tcolor: grey;\n  }\n  \n  .switch {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: 60px;\n\theight: 34px;\n\tmargin-left: 30px;\n  }\n  .switch input {\n\tdisplay: none;\n  }\n  \n  .slider {\n\tposition: absolute;\n\tcursor: pointer;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tbackground-color: #ccc;\n\ttransition: all 0.4s;\n\tborder-radius: 34px;\n  }\n  .slider:before {\n\tposition: absolute;\n\tcontent: "";\n\theight: 26px;\n\twidth: 26px;\n\tleft: 4px;\n\tbottom: 4px;\n\tbackground-color: white;\n\ttransition: 0.4s;\n\tborder-radius: 50%;\n  }\n  \n  input:checked + .slider {\n\tbackground-color: #333;\n  }\n  \n  input:focus + .slider {\n\tbox-shadow: 0 0 1px #2196F3;\n  }\n  \n  input:checked + .slider:before {\n\ttransform: translateX(26px);\n  }<\/pre><\/div>\n\n\n\n
const numbers = [\n\t[1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1], \/\/ 0\n\t[1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1], \/\/ 1\n\t[1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1], \/\/ 2\n\t[1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], \/\/ 3\n\t[1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1], \/\/ 4\n\t[1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], \/\/ 5\n\t[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], \/\/ 6\n\t[1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0], \/\/ 7\n\t[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], \/\/ 8\n\t[1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1]  \/\/ 9\n];\n\nconst blocks = [];\nconst digits = Array.from(document.querySelectorAll('.block'));\n\nfor (let i = 0; i < 4; i++) {\n\tblocks.push(digits.slice( i * 15, i * 15 + 15 ));\n}\n\nconst setNum = (block, num) => {\n\tlet n = numbers[num];\n\tfor (let i = 0; i < block.length; i++) {\n\t\t block[i].classList[ n[i] === 1 ?  'add' : 'remove']('active');\n\t}\n};\n\nconst time = {\n\ts: '',\n\tm: '',\n\th: '',\n\tp: null\n};\n\n\/\/ time loop\nconst animator = () => {\n\tlet d = new Date(),\n\t\t h = d.getHours().toString(),\n\t\t m = d.getMinutes().toString(),\n\t\t s = d.getSeconds().toString();\n\t\n\ts = s.length === 1 ? '0' + s : s;\n\tm = m.length === 1 ? '0' + m : m;\n\th = h.length === 1 ? '0' + h : h;\n\t\n\tif (s !== time.s) {\n\t\tfor (let i = 0; i < digits.length; i++) {\n\t\t\tlet d = digits[i];\n\t\t\tif (i === +s) {\n\t\t\t\td.classList.add('second');\n\t\t\t\tif (time.p !== null)\n\t\t\t\t\tdigits[time.p].classList.remove('second');\n\t\t\t\ttime.p = i;\n\t\t\t\ttime.s = s;\n\t\t\t}\n\t\t}\n\t}\n\t\n\tif (m !== time.m) {\n\t\tsetNum(blocks[2], m[0]);\n\t\tsetNum(blocks[3], m[1]);\n\t\ttime.m = m;\n\t}\n\t\n\tif (h !== time.h) {\n\t\tsetNum(blocks[0], h[0]);\n\t\tsetNum(blocks[1], h[1]);\n\t\ttime.h = h;\n\t}\n \twindow.requestAnimationFrame(animator)\n}\n\n\/\/ init\nwindow.requestAnimationFrame(animator)\n\n\/\/ toggle button\n\nconst body = document.querySelector('body');\nchangeTheme = ev => {\n\tbody.classList.toggle('light-theme');\n};<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1431,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[79],"class_list":["post-1430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other","tag-clock"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1430"}],"version-history":[{"count":2,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1430\/revisions"}],"predecessor-version":[{"id":1441,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1430\/revisions\/1441"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1431"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}