{"id":703,"date":"2026-04-22T05:05:22","date_gmt":"2026-04-22T05:05:22","guid":{"rendered":"https:\/\/cutdrama.com\/?page_id=703"},"modified":"2026-04-22T16:53:50","modified_gmt":"2026-04-22T16:53:50","slug":"clock","status":"publish","type":"page","link":"https:\/\/cutdrama.com\/ar\/clock\/","title":{"rendered":"clock"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"703\" class=\"elementor elementor-703\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3755930 e-flex e-con-boxed e-con e-parent\" data-id=\"3755930\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5577371 elementor-widget elementor-widget-html\" data-id=\"5577371\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"cutdrama-clock-wrap\" id=\"cutdramaClockWrap\">\r\n  <div class=\"cutdrama-controls\">\r\n    <button class=\"cutdrama-control-btn\" id=\"cutdramaMirrorBtn\" title=\"Toggle Mirror\" aria-label=\"Toggle Mirror\">\r\n      <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path d=\"M4 6h7v12H4z\" \/>\r\n        <path d=\"M20 6h-7v12h7z\" \/>\r\n        <path d=\"M12 4v16\" \/>\r\n      <\/svg>\r\n    <\/button>\r\n\r\n    <button class=\"cutdrama-control-btn\" id=\"cutdramaFullscreenBtn\" title=\"Toggle Fullscreen\" aria-label=\"Toggle Fullscreen\">\r\n      <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path d=\"M8 3H3v5\" \/>\r\n        <path d=\"M16 3h5v5\" \/>\r\n        <path d=\"M21 16v5h-5\" \/>\r\n        <path d=\"M3 16v5h5\" \/>\r\n      <\/svg>\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <div class=\"cutdrama-mirror-layer\" id=\"cutdramaMirrorLayer\">\r\n    <div class=\"cutdrama-clock\">\r\n      <div class=\"cutdrama-time-row\">\r\n        <div class=\"cutdrama-time\" id=\"cutdramaTime\">00:00:00<\/div>\r\n        <div class=\"cutdrama-ampm\" id=\"cutdramaAmPm\">AM<\/div>\r\n      <\/div>\r\n      <div class=\"cutdrama-date\" id=\"cutdramaDate\">Loading...<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"cutdrama-credit\">Made by Cutdrama - Rafat Alsayyed<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .cutdrama-clock-wrap {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 420px;\r\n    background: #000;\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #fff;\r\n    font-family: Arial, sans-serif;\r\n    border-radius: 0;\r\n  }\r\n\r\n  .cutdrama-mirror-layer {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: relative;\r\n  }\r\n\r\n  .cutdrama-mirror-layer.cutdrama-mirrored {\r\n    transform: scaleX(-1);\r\n  }\r\n\r\n  .cutdrama-clock {\r\n    text-align: center;\r\n    user-select: none;\r\n    width: 100%;\r\n    padding: 30px 20px 60px;\r\n  }\r\n\r\n  .cutdrama-time-row {\r\n    display: flex;\r\n    align-items: baseline;\r\n    justify-content: center;\r\n    gap: 18px;\r\n    flex-wrap: nowrap;\r\n  }\r\n\r\n  .cutdrama-time,\r\n  .cutdrama-ampm {\r\n    font-size: clamp(48px, 11vw, 180px);\r\n    font-weight: 700;\r\n    line-height: 1;\r\n  }\r\n\r\n  .cutdrama-time {\r\n    letter-spacing: 0.04em;\r\n  }\r\n\r\n  .cutdrama-ampm {\r\n    opacity: 0.95;\r\n  }\r\n\r\n  .cutdrama-date {\r\n    margin-top: 26px;\r\n    font-size: clamp(18px, 2.4vw, 42px);\r\n    opacity: 0.88;\r\n    line-height: 1.3;\r\n  }\r\n\r\n  .cutdrama-controls {\r\n    position: absolute;\r\n    top: 18px;\r\n    right: 18px;\r\n    display: flex;\r\n    gap: 10px;\r\n    z-index: 10;\r\n  }\r\n\r\n  .cutdrama-control-btn {\r\n    width: 54px;\r\n    height: 54px;\r\n    border: 0;\r\n    border-radius: 14px;\r\n    background: rgba(255,255,255,0.10);\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    backdrop-filter: blur(6px);\r\n    -webkit-backdrop-filter: blur(6px);\r\n    transition: transform 0.2s ease, background 0.2s ease;\r\n  }\r\n\r\n  .cutdrama-control-btn:hover {\r\n    background: rgba(255,255,255,0.18);\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  .cutdrama-control-btn svg {\r\n    width: 24px;\r\n    height: 24px;\r\n    fill: none;\r\n    stroke: #fff;\r\n    stroke-width: 2.2;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n  }\r\n\r\n  .cutdrama-credit {\r\n    position: absolute;\r\n    bottom: 14px;\r\n    left: 0;\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 13px;\r\n    opacity: 0.6;\r\n    padding: 0 10px;\r\n    line-height: 1.2;\r\n  }\r\n\r\n  .cutdrama-clock-wrap:fullscreen {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    min-height: 100vh;\r\n    border-radius: 0;\r\n  }\r\n\r\n  .cutdrama-clock-wrap:fullscreen .cutdrama-time,\r\n  .cutdrama-clock-wrap:fullscreen .cutdrama-ampm {\r\n    font-size: clamp(70px, 13vw, 240px);\r\n  }\r\n\r\n  .cutdrama-clock-wrap:fullscreen .cutdrama-date {\r\n    font-size: clamp(22px, 3vw, 54px);\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .cutdrama-time-row {\r\n      gap: 10px;\r\n    }\r\n\r\n    .cutdrama-time,\r\n    .cutdrama-ampm {\r\n      font-size: clamp(32px, 10vw, 72px);\r\n    }\r\n\r\n    .cutdrama-control-btn {\r\n      width: 46px;\r\n      height: 46px;\r\n    }\r\n\r\n    .cutdrama-control-btn svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function () {\r\n    const wrap = document.getElementById('cutdramaClockWrap');\r\n    const mirrorLayer = document.getElementById('cutdramaMirrorLayer');\r\n    const timeEl = document.getElementById('cutdramaTime');\r\n    const ampmEl = document.getElementById('cutdramaAmPm');\r\n    const dateEl = document.getElementById('cutdramaDate');\r\n    const fullscreenBtn = document.getElementById('cutdramaFullscreenBtn');\r\n    const mirrorBtn = document.getElementById('cutdramaMirrorBtn');\r\n\r\n    function updateClock() {\r\n      const now = new Date();\r\n\r\n      let hours = now.getHours();\r\n      const minutes = String(now.getMinutes()).padStart(2, '0');\r\n      const seconds = String(now.getSeconds()).padStart(2, '0');\r\n      const ampm = hours >= 12 ? 'PM' : 'AM';\r\n\r\n      hours = hours % 12;\r\n      hours = hours === 0 ? 12 : hours;\r\n\r\n      const hoursStr = String(hours).padStart(2, '0');\r\n\r\n      timeEl.textContent = `${hoursStr}:${minutes}:${seconds}`;\r\n      ampmEl.textContent = ampm;\r\n\r\n      dateEl.textContent = now.toLocaleDateString([], {\r\n        weekday: 'long',\r\n        year: 'numeric',\r\n        month: 'long',\r\n        day: 'numeric'\r\n      });\r\n    }\r\n\r\n    function toggleMirror() {\r\n      mirrorLayer.classList.toggle('cutdrama-mirrored');\r\n    }\r\n\r\n    async function toggleFullscreen() {\r\n      try {\r\n        if (!document.fullscreenElement) {\r\n          await wrap.requestFullscreen();\r\n        } else {\r\n          await document.exitFullscreen();\r\n        }\r\n      } catch (e) {\r\n        console.error(e);\r\n      }\r\n    }\r\n\r\n    mirrorBtn.addEventListener('click', toggleMirror);\r\n    fullscreenBtn.addEventListener('click', toggleFullscreen);\r\n\r\n    updateClock();\r\n    setInterval(updateClock, 1000);\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>00:00:00 AM Loading&#8230; Made by Cutdrama &#8211; Rafat Alsayyed<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-703","page","type-page","status-publish","hentry","entry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false},"uagb_author_info":{"display_name":"rafatalsed93@gmail.com","author_link":"https:\/\/cutdrama.com\/ar\/author\/rafatalsed93gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"00:00:00 AM Loading&#8230; Made by Cutdrama &#8211; Rafat Alsayyed","_links":{"self":[{"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/pages\/703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/comments?post=703"}],"version-history":[{"count":22,"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/pages\/703\/revisions"}],"predecessor-version":[{"id":728,"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/pages\/703\/revisions\/728"}],"wp:attachment":[{"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/media?parent=703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}