Jam Trading Analog<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <style>\n * { box-sizing: border-box; }\n body {\n margin: 0;\n padding: 4px;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Arial, sans-serif;\n background: #020617; \/* samakan warna background dengan app-mu *\/\n color: #e5e7eb;\n }\n\n \/* Deret jam \u2013 kanan ke kiri *\/\n .row {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n align-items: stretch;\n gap: 4px;\n width: 100%;\n height: 100%;\n }\n\n .clock-card {\n background: #020617;\n border-radius: 10px;\n padding: 4px;\n border: 1px solid #1f2937;\n text-align: center;\n flex: 1 1 0;\n min-width: 0;\n }\n\n .city-name {\n font-size: 10px;\n margin-bottom: 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .clock-wrapper {\n position: relative;\n width: 100%;\n aspect-ratio: 1 \/ 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .clock-container {\n position: relative;\n width: 80%;\n height: 80%;\n margin: 0 auto;\n border-radius: 50%;\n border: 2px solid #4b5563;\n display: flex;\n align-items: center;\n justify-content: center;\n background: radial-gradient(circle, #111827 40%, #020617 100%);\n }\n\n .center-dot {\n position: absolute;\n width: 5%;\n height: 5%;\n border-radius: 50%;\n background: #e5e7eb;\n z-index: 5;\n }\n\n .hand {\n position: absolute;\n bottom: 50%;\n left: 50%;\n transform-origin: bottom center;\n transform: translateX(-50%) rotate(0deg);\n }\n\n .hand.hour {\n width: 3%;\n height: 28%;\n background: #e5e7eb;\n border-radius: 999px;\n }\n\n .hand.minute {\n width: 2.5%;\n height: 36%;\n background: #22c55e;\n border-radius: 999px;\n }\n\n .hand.second {\n width: 2%;\n height: 40%;\n background: #ef4444;\n border-radius: 999px;\n }\n\n .digital {\n margin-top: 2px;\n font-size: 9px;\n color: #9ca3af;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"row\">\n \n <div class=\"clock-card\">\n <div class=\"city-name\">New York<\/div>\n <div class=\"clock-wrapper\">\n <div class=\"clock-container\" data-offset=\"-12\">\n <div class=\"hand hour\"><\/div>\n <div class=\"hand minute\"><\/div>\n <div class=\"hand second\"><\/div>\n <div class=\"center-dot\"><\/div>\n <\/div>\n <\/div>\n <div class=\"digital\"><\/div>\n <\/div>\n\n \n <div class=\"clock-card\">\n <div class=\"city-name\">London<\/div>\n <div class=\"clock-wrapper\">\n <div class=\"clock-container\" data-offset=\"-7\">\n <div class=\"hand hour\"><\/div>\n <div class=\"hand minute\"><\/div>\n <div class=\"hand second\"><\/div>\n <div class=\"center-dot\"><\/div>\n <\/div>\n <\/div>\n <div class=\"digital\"><\/div>\n <\/div>\n\n \n <div class=\"clock-card\">\n <div class=\"city-name\">Tokyo<\/div>\n <div class=\"clock-wrapper\">\n <div class=\"clock-container\" data-offset=\"+2\">\n <div class=\"hand hour\"><\/div>\n <div class=\"hand minute\"><\/div>\n <div class=\"hand second\"><\/div>\n <div class=\"center-dot\"><\/div>\n <\/div>\n <\/div>\n <div class=\"digital\"><\/div>\n <\/div>\n\n \n <div class=\"clock-card\">\n <div class=\"city-name\">Sydney<\/div>\n <div class=\"clock-wrapper\">\n <div class=\"clock-container\" data-offset=\"+3\">\n <div class=\"hand hour\"><\/div>\n <div class=\"hand minute\"><\/div>\n <div class=\"hand second\"><\/div>\n <div class=\"center-dot\"><\/div>\n <\/div>\n <\/div>\n <div class=\"digital\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n function pad(n) {\n return n < 10 ? \"0\" + n : n;\n }\n\n function updateClocks() {\n const nowLocal = new Date(); \/\/ waktu HP\n\n const containers = document.querySelectorAll(\".clock-container\");\n containers.forEach(function (container) {\n const offsetStr = container.getAttribute(\"data-offset\") || \"0\";\n const offset = parseInt(offsetStr, 10) || 0;\n\n const localMillis = nowLocal.getTime();\n const timeWithOffset = new Date(localMillis + offset * 60 * 60 * 1000);\n\n const h = timeWithOffset.getHours();\n const m = timeWithOffset.getMinutes();\n const s = timeWithOffset.getSeconds();\n\n const secDeg = (s \/ 60) * 360;\n const minDeg = (m \/ 60) * 360 + (s \/ 60) * 6;\n const hourDeg = ((h % 12) \/ 12) * 360 + (m \/ 60) * 30;\n\n const hourHand = container.querySelector(\".hand.hour\");\n const minuteHand = container.querySelector(\".hand.minute\");\n const secondHand = container.querySelector(\".hand.second\");\n\n if (hourHand) {\n hourHand.style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;\n }\n if (minuteHand) {\n minuteHand.style.transform = `translateX(-50%) rotate(${minDeg}deg)`;\n }\n if (secondHand) {\n secondHand.style.transform = `translateX(-50%) rotate(${secDeg}deg)`;\n }\n\n const digital = container.parentElement.parentElement.parentElement.querySelector(\".digital\");\n if (digital) {\n digital.textContent = pad(h) + \":\" + pad(m) + \":\" + pad(s);\n }\n });\n }\n\n updateClocks();\n setInterval(updateClocks, 1000);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jam Trading Analog New York London Tokyo Sydney<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-122","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/pages\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":7,"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/pages\/122\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/pages\/122\/revisions\/132"}],"wp:attachment":[{"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/media?parent=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":122,"date":"2025-11-26T14:32:10","date_gmt":"2025-11-26T14:32:10","guid":{"rendered":"https:\/\/dapuralgojo.com\/fx\/?page_id=122"},"modified":"2025-11-26T14:53:36","modified_gmt":"2025-11-26T14:53:36","slug":"122-2","status":"publish","type":"page","link":"https:\/\/dapuralgojo.com\/fx\/122-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n Jam Trading Analog<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <style>\n * { box-sizing: border-box; }\n body {\n margin: 0;\n padding: 4px;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Arial, sans-serif;\n background: #020617; \/* samakan warna background dengan app-mu *\/\n color: #e5e7eb;\n }\n\n \/* Deret jam \u2013 kanan ke kiri *\/\n .row {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n align-items: stretch;\n gap: 4px;\n width: 100%;\n height: 100%;\n }\n\n .clock-card {\n background: #020617;\n border-radius: 10px;\n padding: 4px;\n border: 1px solid #1f2937;\n text-align: center;\n flex: 1 1 0;\n min-width: 0;\n }\n\n .city-name {\n font-size: 10px;\n margin-bottom: 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .clock-wrapper {\n position: relative;\n width: 100%;\n aspect-ratio: 1 \/ 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .clock-container {\n position: relative;\n width: 80%;\n height: 80%;\n margin: 0 auto;\n border-radius: 50%;\n border: 2px solid #4b5563;\n display: flex;\n align-items: center;\n justify-content: center;\n background: radial-gradient(circle, #111827 40%, #020617 100%);\n }\n\n .center-dot {\n position: absolute;\n width: 5%;\n height: 5%;\n border-radius: 50%;\n background: #e5e7eb;\n z-index: 5;\n }\n\n .hand {\n position: absolute;\n bottom: 50%;\n left: 50%;\n transform-origin: bottom center;\n transform: translateX(-50%) rotate(0deg);\n }\n\n .hand.hour {\n width: 3%;\n height: 28%;\n background: #e5e7eb;\n border-radius: 999px;\n }\n\n .hand.minute {\n width: 2.5%;\n height: 36%;\n background: #22c55e;\n border-radius: 999px;\n }\n\n .hand.second {\n width: 2%;\n height: 40%;\n background: #ef4444;\n border-radius: 999px;\n }\n\n .digital {\n margin-top: 2px;\n font-size: 9px;\n color: #9ca3af;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"row\">\n \n <div class=\"clock-card\">\n <div class=\"city-name\">New York<\/div>\n <div class=\"clock-wrapper\">\n <div class=\"clock-container\" data-offset=\"-12\">\n <div class=\"hand hour\"><\/div>\n <div class=\"hand minute\"><\/div>\n <div class=\"hand second\"><\/div>\n <div class=\"center-dot\"><\/div>\n <\/div>\n <\/div>\n <div class=\"digital\"><\/div>\n <\/div>\n\n \n <div class=\"clock-card\">\n <div class=\"city-name\">London<\/div>\n <div class=\"clock-wrapper\">\n <div class=\"clock-container\" data-offset=\"-7\">\n <div class=\"hand hour\"><\/div>\n <div class=\"hand minute\"><\/div>\n <div class=\"hand second\"><\/div>\n <div class=\"center-dot\"><\/div>\n <\/div>\n <\/div>\n <div class=\"digital\"><\/div>\n <\/div>\n\n \n <div class=\"clock-card\">\n <div class=\"city-name\">Tokyo<\/div>\n <div class=\"clock-wrapper\">\n <div class=\"clock-container\" data-offset=\"+2\">\n <div class=\"hand hour\"><\/div>\n <div class=\"hand minute\"><\/div>\n <div class=\"hand second\"><\/div>\n <div class=\"center-dot\"><\/div>\n <\/div>\n <\/div>\n <div class=\"digital\"><\/div>\n <\/div>\n\n \n <div class=\"clock-card\">\n <div class=\"city-name\">Sydney<\/div>\n <div class=\"clock-wrapper\">\n <div class=\"clock-container\" data-offset=\"+3\">\n <div class=\"hand hour\"><\/div>\n <div class=\"hand minute\"><\/div>\n <div class=\"hand second\"><\/div>\n <div class=\"center-dot\"><\/div>\n <\/div>\n <\/div>\n <div class=\"digital\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n function pad(n) {\n return n < 10 ? \"0\" + n : n;\n }\n\n function updateClocks() {\n const nowLocal = new Date(); \/\/ waktu HP\n\n const containers = document.querySelectorAll(\".clock-container\");\n containers.forEach(function (container) {\n const offsetStr = container.getAttribute(\"data-offset\") || \"0\";\n const offset = parseInt(offsetStr, 10) || 0;\n\n const localMillis = nowLocal.getTime();\n const timeWithOffset = new Date(localMillis + offset * 60 * 60 * 1000);\n\n const h = timeWithOffset.getHours();\n const m = timeWithOffset.getMinutes();\n const s = timeWithOffset.getSeconds();\n\n const secDeg = (s \/ 60) * 360;\n const minDeg = (m \/ 60) * 360 + (s \/ 60) * 6;\n const hourDeg = ((h % 12) \/ 12) * 360 + (m \/ 60) * 30;\n\n const hourHand = container.querySelector(\".hand.hour\");\n const minuteHand = container.querySelector(\".hand.minute\");\n const secondHand = container.querySelector(\".hand.second\");\n\n if (hourHand) {\n hourHand.style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;\n }\n if (minuteHand) {\n minuteHand.style.transform = `translateX(-50%) rotate(${minDeg}deg)`;\n }\n if (secondHand) {\n secondHand.style.transform = `translateX(-50%) rotate(${secDeg}deg)`;\n }\n\n const digital = container.parentElement.parentElement.parentElement.querySelector(\".digital\");\n if (digital) {\n digital.textContent = pad(h) + \":\" + pad(m) + \":\" + pad(s);\n }\n });\n }\n\n updateClocks();\n setInterval(updateClocks, 1000);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jam Trading Analog New York London Tokyo Sydney<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-122","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/pages\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":7,"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/pages\/122\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/pages\/122\/revisions\/132"}],"wp:attachment":[{"href":"https:\/\/dapuralgojo.com\/fx\/wp-json\/wp\/v2\/media?parent=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}