PK #CO 1878867803/UT 4]]8]]ux PK #COǼ 1878867803/index.cssUT 3]]3]]ux body, html { padding: 0; margin: 0; } body { background-color: rgb(22, 22, 22); font-family: '微軟正黑體'; display: flex; width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } #text { color: rgb(200, 200, 200); font-size: 100px; font-weight: bolder; display: flex; flex-direction: column; justify-content: center; align-items: center; } #text>div { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 20px; } .parts { display: flex; flex-direction: row; align-items: center; width: 530px; justify-content: center; } .parts>div { display: block; } .mask { display: block; width: 100%; border-width: 1px; border-style: solid; box-sizing: border-box; } .mask>.p { width: 100%; height: 100%; transition: max-width 1s linear; } #time .mask { height: 10px; margin-top: 5px; } .mask.d { border-color: rgb(200, 200, 200); } .mask.d>.p { background-color: rgb(200, 200, 200); } .mask.m { border-color: rgb(35, 160, 52); } .mask.m>.p { background-color: rgb(35, 160, 52); } .mask.h { border-color: rgb(44, 128, 161); } .mask.h>.p { background-color: rgb(44, 128, 161); } @keyframes ms { 0% { max-width: 0%; } 100% { max-width: 100%; } } .mask.s { border-color: rgb(168, 57, 57); } .mask.s>.p { background-color: rgb(168, 57, 57); animation: ms 1s linear infinite; }PK #COݹ 1878867803/index.jsUT 3]]3]]ux ((doc) => { function createTextSetter(selector) { const elem = doc.querySelector(selector); let text; return newText => { if (newText !== text) { text = newText; elem.textContent = newText; return true; } return false; }; } doc.addEventListener('DOMContentLoaded', () => { const setters = { y: createTextSetter('#dy'), M: createTextSetter('#dm'), d: createTextSetter('#dd'), h: createTextSetter('#th'), m: createTextSetter('#tm'), s: createTextSetter('#ts'), } const timeMask = { d: doc.querySelector('#time>.mask.d>.p'), h: doc.querySelector('#time>.mask.h>.p'), m: doc.querySelector('#time>.mask.m>.p') }; const updateText = () => { const now = new Date(); setters.y(now.getFullYear()); setters.M((now.getMonth() + 1).toFixed().padStart(2, '0')); setters.d(now.getDate().toFixed().padStart(2, '0')); setters.h(now.getHours().toFixed().padStart(2, '0')); setters.m(now.getMinutes().toFixed().padStart(2, '0')); if (setters.s(now.getSeconds().toFixed().padStart(2, '0'))) { timeMask.d.style.maxWidth = `${((now.getSeconds() + (60 * now.getMinutes()) + (3600 * now.getHours())) / 86400) * 100}%`; timeMask.h.style.maxWidth = `${((now.getSeconds() + (60 * now.getMinutes())) / 3600) * 100}%`; timeMask.m.style.maxWidth = `${(now.getSeconds() / 60) * 100}%`; } }; setInterval(updateText, 1000); updateText(); }); })(document);PK #CO}O 1878867803/project.jsonUT 3]]3]]ux { "contentrating" : "Everyone", "description" : "simple clock", "file" : "inedx.html", "general" : { "properties" : { "schemecolor" : { "order" : 0, "text" : "ui_browse_properties_scheme_color", "type" : "color", "value" : "0 0 0" } } }, "preview" : "preview.jpg", "tags" : [ "Technology" ], "title" : "The Clock", "type" : "web", "visibility" : "public", "workshopid" : "1878867803" }PK #COZhF" " 1878867803/inedx.htmlUT 4]]4]]ux