Animated Clock Base<\/title>\r\n <style>\r\n .clock-container {\r\n background: #18191b;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n width: 100%;\r\n min-height: 400px;\r\n }\r\n #clock-canvas {\r\n background: transparent;\r\n display: block;\r\n box-shadow: 0 0 40px #000a;\r\n border-radius: 50%;\r\n width: 100%;\r\n height: auto;\r\n max-width: 400px;\r\n aspect-ratio: 1 \/ 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"clock-container\">\r\n <canvas id=\"clock-canvas\"><\/canvas>\r\n <\/div>\r\n \r\n <img decoding=\"async\" id=\"clock-logo\" src=\"https:\/\/fatirinfotech.com\/\/wp-content\/uploads\/2025\/06\/logo-mascost-White.webp\" style=\"display:none;\" alt=\"Logo\">\r\n <script>\r\n const canvas = document.getElementById('clock-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let size, dpr, center, ring1Radius, ring2Radius;\r\n function resizeCanvas() {\r\n dpr = window.devicePixelRatio || 1;\r\n \/\/ Use the smaller of width\/height for a square clock\r\n const rect = canvas.getBoundingClientRect();\r\n size = Math.min(rect.width, rect.height);\r\n \/\/ fallback for first load\r\n if (!size || size === 0) size = Math.min(window.innerWidth, window.innerHeight, 400);\r\n canvas.width = size * dpr;\r\n canvas.height = size * dpr;\r\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n center = size \/ 2;\r\n ring1Radius = size * 0.35;\r\n ring2Radius = size * 0.275;\r\n }\r\n resizeCanvas();\r\n window.addEventListener('resize', () => {\r\n resizeCanvas();\r\n });\r\n const hand1Color = '#fff'; \/\/ White (hour hand, short)\r\n const hand2Color = '#fff'; \/\/ White (minute hand, long)\r\n\r\n \/\/ Animation state\r\n const SLOW_TRAIL = 0.05; \/\/ 5% of full trail\r\n const FAST_TRAIL = 1.0; \/\/ 100% of full trail\r\n const SLOW_SPEED = Math.PI \/ 6 \/ 2; \/\/ radians\/sec (hour hand)\r\n const FAST_SPEED_MIN = Math.PI * 2 * 2; \/\/ 2 full rotations\/sec (minute hand)\r\n const FAST_SPEED_HOUR = FAST_SPEED_MIN * 0.75; \/\/ 75% of minute hand speed\r\n const MINUTE_MULT = 1; \/\/ Minute hand is orange, faster\r\n const HOUR_MULT = 1; \/\/ Hour hand is blue, slower\r\n const SLOW_PHASE = 0;\r\n const ACCEL_PHASE = 1;\r\n const FAST_PHASE = 2;\r\n const DECEL_PHASE = 3;\r\n let phase = SLOW_PHASE;\r\n let phaseTime = 0;\r\n let hand1Angle = -Math.PI \/ 2; \/\/ blue, hour hand (short)\r\n let hand2Angle = -Math.PI \/ 2; \/\/ orange, minute hand (long)\r\n let trailFrac = SLOW_TRAIL;\r\n let targetTrailFrac = SLOW_TRAIL;\r\n let hand1Speed = SLOW_SPEED; \/\/ hour hand (blue)\r\n let hand2Speed = SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR); \/\/ minute hand (orange)\r\n let targetHand1Speed = SLOW_SPEED;\r\n let targetHand2Speed = SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR);\r\n \/\/ Phase durations (seconds)\r\n const SLOW_DURATION = 1.8; \/\/ covers 30-40% of ring\r\n const ACCEL_DURATION = 0.7;\r\n const FAST_DURATION = 2.0; \/\/ 2 full rotations\r\n const DECEL_DURATION = 0.7;\r\n \/\/ For smooth interpolation\r\n function lerp(a, b, t) { return a + (b - a) * t; }\r\n function easeInOut(t) { return t < 0.5 ? 2*t*t : 1-(-2*t+2)*(2*t-2)\/2; }\r\n\r\n function updatePhase(dt) {\r\n phaseTime += dt;\r\n if (phase === SLOW_PHASE && phaseTime > SLOW_DURATION) {\r\n phase = ACCEL_PHASE; phaseTime = 0;\r\n targetHand1Speed = FAST_SPEED_HOUR;\r\n targetHand2Speed = FAST_SPEED_MIN;\r\n targetTrailFrac = FAST_TRAIL;\r\n } else if (phase === ACCEL_PHASE && phaseTime > ACCEL_DURATION) {\r\n phase = FAST_PHASE; phaseTime = 0;\r\n hand1Speed = FAST_SPEED_HOUR;\r\n hand2Speed = FAST_SPEED_MIN;\r\n targetHand1Speed = FAST_SPEED_HOUR;\r\n targetHand2Speed = FAST_SPEED_MIN;\r\n targetTrailFrac = FAST_TRAIL;\r\n } else if (phase === FAST_PHASE && phaseTime > FAST_DURATION) {\r\n phase = DECEL_PHASE; phaseTime = 0;\r\n targetHand1Speed = SLOW_SPEED;\r\n targetHand2Speed = SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR);\r\n targetTrailFrac = SLOW_TRAIL;\r\n } else if (phase === DECEL_PHASE && phaseTime > DECEL_DURATION) {\r\n phase = SLOW_PHASE; phaseTime = 0;\r\n hand1Speed = SLOW_SPEED;\r\n hand2Speed = SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR);\r\n targetHand1Speed = SLOW_SPEED;\r\n targetHand2Speed = SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR);\r\n targetTrailFrac = SLOW_TRAIL;\r\n }\r\n }\r\n\r\n let lastTime = performance.now();\r\n function animate(now) {\r\n const dt = Math.min((now - lastTime) \/ 1000, 0.05);\r\n lastTime = now;\r\n updatePhase(dt);\r\n \/\/ On resize, update canvas size and radii\r\n resizeCanvas();\r\n \/\/ Animation logic for hand speeds and trail length\r\n if (phase === ACCEL_PHASE) {\r\n const progress = Math.max(0, Math.min(1, phaseTime \/ ACCEL_DURATION));\r\n hand1Speed = lerp(SLOW_SPEED, FAST_SPEED_HOUR, progress);\r\n hand2Speed = lerp(SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR), FAST_SPEED_MIN, progress);\r\n \/\/ Trail only starts growing after 50% progress\r\n if (progress < 0.5) {\r\n trailFrac = SLOW_TRAIL;\r\n } else if (progress < 0.85) {\r\n \/\/ Map [0.5, 0.85] to [SLOW_TRAIL, 0.4 * (FAST_TRAIL - SLOW_TRAIL) + SLOW_TRAIL]\r\n const t = (progress - 0.5) \/ 0.35;\r\n const midTrail = 0.4 * (FAST_TRAIL - SLOW_TRAIL) + SLOW_TRAIL;\r\n trailFrac = lerp(SLOW_TRAIL, midTrail, t);\r\n } else {\r\n \/\/ Map [0.85, 1] to [midTrail, FAST_TRAIL]\r\n const t = (progress - 0.85) \/ 0.15;\r\n const midTrail = 0.4 * (FAST_TRAIL - SLOW_TRAIL) + SLOW_TRAIL;\r\n trailFrac = lerp(midTrail, FAST_TRAIL, t);\r\n }\r\n } else if (phase === DECEL_PHASE) {\r\n const progress = Math.max(0, Math.min(1, phaseTime \/ DECEL_DURATION));\r\n hand1Speed = lerp(FAST_SPEED_HOUR, SLOW_SPEED, progress);\r\n hand2Speed = lerp(FAST_SPEED_MIN, SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR), progress);\r\n trailFrac = lerp(FAST_TRAIL, SLOW_TRAIL, progress);\r\n } else {\r\n \/\/ Smoothly interpolate speeds\r\n hand1Speed = lerp(hand1Speed, targetHand1Speed, 0.08);\r\n hand2Speed = lerp(hand2Speed, targetHand2Speed, 0.08);\r\n trailFrac = lerp(trailFrac, targetTrailFrac, 0.08);\r\n }\r\n \/\/ Update hand angles\r\n hand1Angle += hand1Speed * dt; \/\/ hour hand (blue, short)\r\n hand2Angle += hand2Speed * dt; \/\/ minute hand (orange, long)\r\n \/\/ Keep angles in [0, 2PI]\r\n hand1Angle = (hand1Angle + Math.PI * 2) % (Math.PI * 2);\r\n hand2Angle = (hand2Angle + Math.PI * 2) % (Math.PI * 2);\r\n drawClock();\r\n requestAnimationFrame(animate);\r\n }\r\n\r\n function drawClock() {\r\n ctx.clearRect(0, 0, size, size);\r\n \r\n \/\/ ===== CLOCK BORDER SETTINGS =====\r\n \/\/ Total border width in pixels (change this value to adjust border thickness)\r\n const borderWidth = 20;\r\n \r\n \/\/ Border color gradient stops (change these RGB values to adjust colors)\r\n \/\/ Dark grey for outer edge\r\n const outerDarkGrey = 'rgb(35, 35, 35)';\r\n \/\/ Lighter grey for middle\r\n const middleGrey = 'rgb(65, 65, 65)';\r\n \/\/ Dark grey for inner edge\r\n const innerDarkGrey = 'rgb(40, 40, 40)';\r\n \r\n \/\/ Inner shadow settings (for depth effect)\r\n const innerShadowWidth = 15; \/\/ Width of the inner shadow\r\n const innerShadowColor = 'rgba(0, 0, 0, 0.6)'; \/\/ Shadow color\r\n \/\/ ===== END BORDER SETTINGS =====\r\n \r\n \/\/ Calculate radii\r\n const outerBorderRadius = center - 2; \/\/ Outer edge of border\r\n const innerBorderRadius = outerBorderRadius - borderWidth; \/\/ Inner edge of border\r\n const innerShadowRadius = innerBorderRadius - innerShadowWidth; \/\/ Inner shadow edge\r\n \r\n \/\/ Draw clock border with smooth gradient\r\n if (innerBorderRadius > 0) {\r\n const borderGradient = ctx.createRadialGradient(center, center, innerBorderRadius, center, center, outerBorderRadius);\r\n \r\n \/\/ Create smooth gradient from inner to outer\r\n borderGradient.addColorStop(0, innerDarkGrey);\r\n borderGradient.addColorStop(0.3, middleGrey);\r\n borderGradient.addColorStop(0.7, middleGrey);\r\n borderGradient.addColorStop(1, outerDarkGrey);\r\n \r\n ctx.save();\r\n ctx.strokeStyle = borderGradient;\r\n ctx.lineWidth = borderWidth;\r\n ctx.beginPath();\r\n ctx.arc(center, center, (outerBorderRadius + innerBorderRadius) \/ 2, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.restore();\r\n }\r\n \r\n \/\/ Draw inner shadow for depth effect\r\n if (innerShadowRadius > 0) {\r\n const shadowGradient = ctx.createRadialGradient(center, center, innerShadowRadius, center, center, innerBorderRadius);\r\n \r\n \/\/ Smooth shadow gradient from transparent to dark\r\n shadowGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');\r\n shadowGradient.addColorStop(0.5, 'rgba(0, 0, 0, 0.2)');\r\n shadowGradient.addColorStop(0.8, 'rgba(0, 0, 0, 0.4)');\r\n shadowGradient.addColorStop(1, innerShadowColor);\r\n \r\n ctx.save();\r\n ctx.strokeStyle = shadowGradient;\r\n ctx.lineWidth = innerShadowWidth * 2;\r\n ctx.beginPath();\r\n ctx.arc(center, center, innerBorderRadius - innerShadowWidth \/ 2, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.restore();\r\n }\r\n \r\n \/\/ Draw hour markings\r\n ctx.save();\r\n ctx.strokeStyle = '#444';\r\n ctx.lineWidth = 2;\r\n for (let i = 0; i < 12; i++) {\r\n const angle = (i \/ 12) * 2 * Math.PI - Math.PI \/ 2;\r\n const outer = ring1Radius + 10;\r\n const inner = ring1Radius - 10;\r\n ctx.beginPath();\r\n ctx.moveTo(center + Math.cos(angle) * inner, center + Math.sin(angle) * inner);\r\n ctx.lineTo(center + Math.cos(angle) * outer, center + Math.sin(angle) * outer);\r\n ctx.stroke();\r\n }\r\n ctx.restore();\r\n \/\/ Draw numbers\r\n ctx.save();\r\n ctx.fillStyle = '#fff';\r\n ctx.font = `${size * 0.025}px Orbitron`;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n for (let i = 1; i <= 12; i++) {\r\n const angle = (i \/ 12) * 2 * Math.PI - Math.PI \/ 2;\r\n const numRadius = ring1Radius + 23;\r\n const x = center + Math.cos(angle) * numRadius;\r\n const y = center + Math.sin(angle) * numRadius;\r\n ctx.fillText(i.toString(), x, y);\r\n }\r\n ctx.restore();\r\n \/\/ Draw rings\r\n ctx.save();\r\n ctx.strokeStyle = '#222';\r\n ctx.lineWidth = 3;\r\n ctx.beginPath();\r\n ctx.arc(center, center, ring1Radius, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.beginPath();\r\n ctx.arc(center, center, ring2Radius, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.restore();\r\n \/\/ Draw illuminated trail for hand 1 (hour, white, short)\r\n const trail1Start = hand1Angle - 0.01;\r\n const trail1End = hand1Angle - trailFrac * 2 * Math.PI;\r\n const grad1 = ctx.createLinearGradient(\r\n center + Math.cos(trail1Start) * ring1Radius,\r\n center + Math.sin(trail1Start) * ring1Radius,\r\n center + Math.cos(trail1End) * ring1Radius,\r\n center + Math.sin(trail1End) * ring1Radius\r\n );\r\n grad1.addColorStop(0, 'rgba(255,255,255,1)');\r\n grad1.addColorStop(0.7, 'rgba(255,255,255,1)');\r\n grad1.addColorStop(1, 'rgba(255,255,255,0)');\r\n ctx.save();\r\n ctx.strokeStyle = grad1;\r\n ctx.lineWidth = 3;\r\n ctx.lineCap = 'round';\r\n ctx.shadowColor = 'rgba(255,255,255,1)';\r\n ctx.shadowBlur = 1500;\r\n ctx.beginPath();\r\n ctx.arc(center, center, ring1Radius, trail1Start, trail1End, true);\r\n ctx.stroke();\r\n ctx.restore();\r\n \/\/ Draw illuminated trail for hand 2 (minute, white, long)\r\n const trail2Start = hand2Angle - 0.01;\r\n const trail2End = hand2Angle - trailFrac * 2 * Math.PI;\r\n const grad2 = ctx.createLinearGradient(\r\n center + Math.cos(trail2Start) * ring2Radius,\r\n center + Math.sin(trail2Start) * ring2Radius,\r\n center + Math.cos(trail2End) * ring2Radius,\r\n center + Math.sin(trail2End) * ring2Radius\r\n );\r\n grad2.addColorStop(0, 'rgba(255,255,255,1)');\r\n grad2.addColorStop(0.7, 'rgba(255,255,255,1)');\r\n grad2.addColorStop(1, 'rgba(255,255,255,0)');\r\n ctx.save();\r\n ctx.strokeStyle = grad2;\r\n ctx.lineWidth = 3;\r\n ctx.lineCap = 'round';\r\n ctx.shadowColor = 'rgba(255,255,255,1)';\r\n ctx.shadowBlur = 1500;\r\n ctx.beginPath();\r\n ctx.arc(center, center, ring2Radius, trail2Start, trail2End, true);\r\n ctx.stroke();\r\n ctx.restore();\r\n \/\/ Draw hand 1 (hour, white, short)\r\n ctx.save();\r\n ctx.strokeStyle = hand1Color;\r\n ctx.lineWidth = 5;\r\n ctx.lineCap = 'round';\r\n ctx.beginPath();\r\n ctx.moveTo(center, center);\r\n ctx.lineTo(center + Math.cos(hand1Angle) * ring1Radius, center + Math.sin(hand1Angle) * ring1Radius);\r\n ctx.stroke();\r\n ctx.restore();\r\n \/\/ Draw glowing tip for hand 1\r\n const hand1TipX = center + Math.cos(hand1Angle) * ring1Radius;\r\n const hand1TipY = center + Math.sin(hand1Angle) * ring1Radius;\r\n const hand1Gradient = ctx.createRadialGradient(hand1TipX, hand1TipY, 0, hand1TipX, hand1TipY, size * 0.85);\r\n hand1Gradient.addColorStop(0, 'rgba(255, 255, 255, 0.30)');\r\n hand1Gradient.addColorStop(0.15, 'rgba(255, 255, 255, 0.25)');\r\n hand1Gradient.addColorStop(0.25, 'rgba(255, 255, 255, 0.15)');\r\n hand1Gradient.addColorStop(0.35, 'rgba(255, 255, 255, 0.10)');\r\n hand1Gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.04)');\r\n hand1Gradient.addColorStop(0.65, 'rgba(255, 255, 255, 0.03)');\r\n hand1Gradient.addColorStop(0.8, 'rgba(255, 255, 255, 0.02)');\r\n hand1Gradient.addColorStop(0.92, 'rgba(255, 255, 255, 0.01)');\r\n hand1Gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');\r\n ctx.save();\r\n ctx.fillStyle = hand1Gradient;\r\n ctx.beginPath();\r\n ctx.arc(hand1TipX, hand1TipY, size * 0.85, 0, 2 * Math.PI);\r\n ctx.fill();\r\n ctx.restore();\r\n \/\/ Draw hand 2 (minute, white, long)\r\n ctx.save();\r\n ctx.strokeStyle = hand2Color;\r\n ctx.lineWidth = 5;\r\n ctx.lineCap = 'round';\r\n ctx.beginPath();\r\n ctx.moveTo(center, center);\r\n ctx.lineTo(center + Math.cos(hand2Angle) * ring2Radius, center + Math.sin(hand2Angle) * ring2Radius);\r\n ctx.stroke();\r\n ctx.restore();\r\n \/\/ Draw glowing tip for hand 2\r\n const hand2TipX = center + Math.cos(hand2Angle) * ring2Radius;\r\n const hand2TipY = center + Math.sin(hand2Angle) * ring2Radius;\r\n const hand2Gradient = ctx.createRadialGradient(hand2TipX, hand2TipY, 0, hand2TipX, hand2TipY, size * 0.95);\r\n hand2Gradient.addColorStop(0, 'rgba(255, 255, 255, 0.20)');\r\n hand2Gradient.addColorStop(0.15, 'rgba(255, 255, 255, 0.10)');\r\n hand2Gradient.addColorStop(0.25, 'rgba(255, 255, 255, 0.05)');\r\n hand2Gradient.addColorStop(0.35, 'rgba(255, 255, 255, 0.04)');\r\n hand2Gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.03)');\r\n hand2Gradient.addColorStop(0.65, 'rgba(255, 255, 255, 0.02)');\r\n hand2Gradient.addColorStop(0.8, 'rgba(255, 255, 255, 0.01)');\r\n hand2Gradient.addColorStop(0.92, 'rgba(255, 255, 255, 0.005)');\r\n hand2Gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');\r\n ctx.save();\r\n ctx.fillStyle = hand2Gradient;\r\n ctx.beginPath();\r\n ctx.arc(hand2TipX, hand2TipY, size * 0.95, 0, 2 * Math.PI);\r\n ctx.fill();\r\n ctx.restore();\r\n \/\/ Draw center dot\r\n ctx.save();\r\n ctx.fillStyle = '#222';\r\n ctx.beginPath();\r\n ctx.arc(center, center, 10, 0, 2 * Math.PI);\r\n ctx.fill();\r\n ctx.restore();\r\n \/\/ Draw logo in the center (after drawing the center dot)\r\n const logoImg = document.getElementById('clock-logo');\r\n if (logoImg.complete && logoImg.naturalWidth > 0) {\r\n ctx.save();\r\n ctx.globalAlpha = 1;\r\n \/\/ Always draw as a square, using the smaller of width\/height\r\n const logoSize = size * 0.13;\r\n const aspect = logoImg.naturalWidth \/ logoImg.naturalHeight;\r\n let drawW = logoSize;\r\n let drawH = logoSize;\r\n if (aspect > 1) {\r\n \/\/ Wider than tall\r\n drawH = logoSize \/ aspect;\r\n } else if (aspect < 1) {\r\n \/\/ Taller than wide\r\n drawW = logoSize * aspect;\r\n }\r\n ctx.drawImage(\r\n logoImg,\r\n center - drawW \/ 2,\r\n center - drawH \/ 2,\r\n drawW,\r\n drawH\r\n );\r\n ctx.restore();\r\n }\r\n }\r\n\r\n requestAnimationFrame(animate);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Animated Clock Base<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"off","ocean_display_header":"off","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"off","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","footnotes":""},"class_list":["post-1103","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/pages\/1103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/comments?post=1103"}],"version-history":[{"count":0,"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/pages\/1103\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/media?parent=1103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Animated Clock Base<\/title>\r\n <style>\r\n .clock-container {\r\n background: #18191b;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n width: 100%;\r\n min-height: 400px;\r\n }\r\n #clock-canvas {\r\n background: transparent;\r\n display: block;\r\n box-shadow: 0 0 40px #000a;\r\n border-radius: 50%;\r\n width: 100%;\r\n height: auto;\r\n max-width: 400px;\r\n aspect-ratio: 1 \/ 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"clock-container\">\r\n <canvas id=\"clock-canvas\"><\/canvas>\r\n <\/div>\r\n \r\n <img decoding=\"async\" id=\"clock-logo\" src=\"https:\/\/fatirinfotech.com\/\/wp-content\/uploads\/2025\/06\/logo-mascost-White.webp\" style=\"display:none;\" alt=\"Logo\">\r\n <script>\r\n const canvas = document.getElementById('clock-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let size, dpr, center, ring1Radius, ring2Radius;\r\n function resizeCanvas() {\r\n dpr = window.devicePixelRatio || 1;\r\n \/\/ Use the smaller of width\/height for a square clock\r\n const rect = canvas.getBoundingClientRect();\r\n size = Math.min(rect.width, rect.height);\r\n \/\/ fallback for first load\r\n if (!size || size === 0) size = Math.min(window.innerWidth, window.innerHeight, 400);\r\n canvas.width = size * dpr;\r\n canvas.height = size * dpr;\r\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n center = size \/ 2;\r\n ring1Radius = size * 0.35;\r\n ring2Radius = size * 0.275;\r\n }\r\n resizeCanvas();\r\n window.addEventListener('resize', () => {\r\n resizeCanvas();\r\n });\r\n const hand1Color = '#fff'; \/\/ White (hour hand, short)\r\n const hand2Color = '#fff'; \/\/ White (minute hand, long)\r\n\r\n \/\/ Animation state\r\n const SLOW_TRAIL = 0.05; \/\/ 5% of full trail\r\n const FAST_TRAIL = 1.0; \/\/ 100% of full trail\r\n const SLOW_SPEED = Math.PI \/ 6 \/ 2; \/\/ radians\/sec (hour hand)\r\n const FAST_SPEED_MIN = Math.PI * 2 * 2; \/\/ 2 full rotations\/sec (minute hand)\r\n const FAST_SPEED_HOUR = FAST_SPEED_MIN * 0.75; \/\/ 75% of minute hand speed\r\n const MINUTE_MULT = 1; \/\/ Minute hand is orange, faster\r\n const HOUR_MULT = 1; \/\/ Hour hand is blue, slower\r\n const SLOW_PHASE = 0;\r\n const ACCEL_PHASE = 1;\r\n const FAST_PHASE = 2;\r\n const DECEL_PHASE = 3;\r\n let phase = SLOW_PHASE;\r\n let phaseTime = 0;\r\n let hand1Angle = -Math.PI \/ 2; \/\/ blue, hour hand (short)\r\n let hand2Angle = -Math.PI \/ 2; \/\/ orange, minute hand (long)\r\n let trailFrac = SLOW_TRAIL;\r\n let targetTrailFrac = SLOW_TRAIL;\r\n let hand1Speed = SLOW_SPEED; \/\/ hour hand (blue)\r\n let hand2Speed = SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR); \/\/ minute hand (orange)\r\n let targetHand1Speed = SLOW_SPEED;\r\n let targetHand2Speed = SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR);\r\n \/\/ Phase durations (seconds)\r\n const SLOW_DURATION = 1.8; \/\/ covers 30-40% of ring\r\n const ACCEL_DURATION = 0.7;\r\n const FAST_DURATION = 2.0; \/\/ 2 full rotations\r\n const DECEL_DURATION = 0.7;\r\n \/\/ For smooth interpolation\r\n function lerp(a, b, t) { return a + (b - a) * t; }\r\n function easeInOut(t) { return t < 0.5 ? 2*t*t : 1-(-2*t+2)*(2*t-2)\/2; }\r\n\r\n function updatePhase(dt) {\r\n phaseTime += dt;\r\n if (phase === SLOW_PHASE && phaseTime > SLOW_DURATION) {\r\n phase = ACCEL_PHASE; phaseTime = 0;\r\n targetHand1Speed = FAST_SPEED_HOUR;\r\n targetHand2Speed = FAST_SPEED_MIN;\r\n targetTrailFrac = FAST_TRAIL;\r\n } else if (phase === ACCEL_PHASE && phaseTime > ACCEL_DURATION) {\r\n phase = FAST_PHASE; phaseTime = 0;\r\n hand1Speed = FAST_SPEED_HOUR;\r\n hand2Speed = FAST_SPEED_MIN;\r\n targetHand1Speed = FAST_SPEED_HOUR;\r\n targetHand2Speed = FAST_SPEED_MIN;\r\n targetTrailFrac = FAST_TRAIL;\r\n } else if (phase === FAST_PHASE && phaseTime > FAST_DURATION) {\r\n phase = DECEL_PHASE; phaseTime = 0;\r\n targetHand1Speed = SLOW_SPEED;\r\n targetHand2Speed = SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR);\r\n targetTrailFrac = SLOW_TRAIL;\r\n } else if (phase === DECEL_PHASE && phaseTime > DECEL_DURATION) {\r\n phase = SLOW_PHASE; phaseTime = 0;\r\n hand1Speed = SLOW_SPEED;\r\n hand2Speed = SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR);\r\n targetHand1Speed = SLOW_SPEED;\r\n targetHand2Speed = SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR);\r\n targetTrailFrac = SLOW_TRAIL;\r\n }\r\n }\r\n\r\n let lastTime = performance.now();\r\n function animate(now) {\r\n const dt = Math.min((now - lastTime) \/ 1000, 0.05);\r\n lastTime = now;\r\n updatePhase(dt);\r\n \/\/ On resize, update canvas size and radii\r\n resizeCanvas();\r\n \/\/ Animation logic for hand speeds and trail length\r\n if (phase === ACCEL_PHASE) {\r\n const progress = Math.max(0, Math.min(1, phaseTime \/ ACCEL_DURATION));\r\n hand1Speed = lerp(SLOW_SPEED, FAST_SPEED_HOUR, progress);\r\n hand2Speed = lerp(SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR), FAST_SPEED_MIN, progress);\r\n \/\/ Trail only starts growing after 50% progress\r\n if (progress < 0.5) {\r\n trailFrac = SLOW_TRAIL;\r\n } else if (progress < 0.85) {\r\n \/\/ Map [0.5, 0.85] to [SLOW_TRAIL, 0.4 * (FAST_TRAIL - SLOW_TRAIL) + SLOW_TRAIL]\r\n const t = (progress - 0.5) \/ 0.35;\r\n const midTrail = 0.4 * (FAST_TRAIL - SLOW_TRAIL) + SLOW_TRAIL;\r\n trailFrac = lerp(SLOW_TRAIL, midTrail, t);\r\n } else {\r\n \/\/ Map [0.85, 1] to [midTrail, FAST_TRAIL]\r\n const t = (progress - 0.85) \/ 0.15;\r\n const midTrail = 0.4 * (FAST_TRAIL - SLOW_TRAIL) + SLOW_TRAIL;\r\n trailFrac = lerp(midTrail, FAST_TRAIL, t);\r\n }\r\n } else if (phase === DECEL_PHASE) {\r\n const progress = Math.max(0, Math.min(1, phaseTime \/ DECEL_DURATION));\r\n hand1Speed = lerp(FAST_SPEED_HOUR, SLOW_SPEED, progress);\r\n hand2Speed = lerp(FAST_SPEED_MIN, SLOW_SPEED * (FAST_SPEED_MIN \/ FAST_SPEED_HOUR), progress);\r\n trailFrac = lerp(FAST_TRAIL, SLOW_TRAIL, progress);\r\n } else {\r\n \/\/ Smoothly interpolate speeds\r\n hand1Speed = lerp(hand1Speed, targetHand1Speed, 0.08);\r\n hand2Speed = lerp(hand2Speed, targetHand2Speed, 0.08);\r\n trailFrac = lerp(trailFrac, targetTrailFrac, 0.08);\r\n }\r\n \/\/ Update hand angles\r\n hand1Angle += hand1Speed * dt; \/\/ hour hand (blue, short)\r\n hand2Angle += hand2Speed * dt; \/\/ minute hand (orange, long)\r\n \/\/ Keep angles in [0, 2PI]\r\n hand1Angle = (hand1Angle + Math.PI * 2) % (Math.PI * 2);\r\n hand2Angle = (hand2Angle + Math.PI * 2) % (Math.PI * 2);\r\n drawClock();\r\n requestAnimationFrame(animate);\r\n }\r\n\r\n function drawClock() {\r\n ctx.clearRect(0, 0, size, size);\r\n \r\n \/\/ ===== CLOCK BORDER SETTINGS =====\r\n \/\/ Total border width in pixels (change this value to adjust border thickness)\r\n const borderWidth = 20;\r\n \r\n \/\/ Border color gradient stops (change these RGB values to adjust colors)\r\n \/\/ Dark grey for outer edge\r\n const outerDarkGrey = 'rgb(35, 35, 35)';\r\n \/\/ Lighter grey for middle\r\n const middleGrey = 'rgb(65, 65, 65)';\r\n \/\/ Dark grey for inner edge\r\n const innerDarkGrey = 'rgb(40, 40, 40)';\r\n \r\n \/\/ Inner shadow settings (for depth effect)\r\n const innerShadowWidth = 15; \/\/ Width of the inner shadow\r\n const innerShadowColor = 'rgba(0, 0, 0, 0.6)'; \/\/ Shadow color\r\n \/\/ ===== END BORDER SETTINGS =====\r\n \r\n \/\/ Calculate radii\r\n const outerBorderRadius = center - 2; \/\/ Outer edge of border\r\n const innerBorderRadius = outerBorderRadius - borderWidth; \/\/ Inner edge of border\r\n const innerShadowRadius = innerBorderRadius - innerShadowWidth; \/\/ Inner shadow edge\r\n \r\n \/\/ Draw clock border with smooth gradient\r\n if (innerBorderRadius > 0) {\r\n const borderGradient = ctx.createRadialGradient(center, center, innerBorderRadius, center, center, outerBorderRadius);\r\n \r\n \/\/ Create smooth gradient from inner to outer\r\n borderGradient.addColorStop(0, innerDarkGrey);\r\n borderGradient.addColorStop(0.3, middleGrey);\r\n borderGradient.addColorStop(0.7, middleGrey);\r\n borderGradient.addColorStop(1, outerDarkGrey);\r\n \r\n ctx.save();\r\n ctx.strokeStyle = borderGradient;\r\n ctx.lineWidth = borderWidth;\r\n ctx.beginPath();\r\n ctx.arc(center, center, (outerBorderRadius + innerBorderRadius) \/ 2, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.restore();\r\n }\r\n \r\n \/\/ Draw inner shadow for depth effect\r\n if (innerShadowRadius > 0) {\r\n const shadowGradient = ctx.createRadialGradient(center, center, innerShadowRadius, center, center, innerBorderRadius);\r\n \r\n \/\/ Smooth shadow gradient from transparent to dark\r\n shadowGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');\r\n shadowGradient.addColorStop(0.5, 'rgba(0, 0, 0, 0.2)');\r\n shadowGradient.addColorStop(0.8, 'rgba(0, 0, 0, 0.4)');\r\n shadowGradient.addColorStop(1, innerShadowColor);\r\n \r\n ctx.save();\r\n ctx.strokeStyle = shadowGradient;\r\n ctx.lineWidth = innerShadowWidth * 2;\r\n ctx.beginPath();\r\n ctx.arc(center, center, innerBorderRadius - innerShadowWidth \/ 2, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.restore();\r\n }\r\n \r\n \/\/ Draw hour markings\r\n ctx.save();\r\n ctx.strokeStyle = '#444';\r\n ctx.lineWidth = 2;\r\n for (let i = 0; i < 12; i++) {\r\n const angle = (i \/ 12) * 2 * Math.PI - Math.PI \/ 2;\r\n const outer = ring1Radius + 10;\r\n const inner = ring1Radius - 10;\r\n ctx.beginPath();\r\n ctx.moveTo(center + Math.cos(angle) * inner, center + Math.sin(angle) * inner);\r\n ctx.lineTo(center + Math.cos(angle) * outer, center + Math.sin(angle) * outer);\r\n ctx.stroke();\r\n }\r\n ctx.restore();\r\n \/\/ Draw numbers\r\n ctx.save();\r\n ctx.fillStyle = '#fff';\r\n ctx.font = `${size * 0.025}px Orbitron`;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n for (let i = 1; i <= 12; i++) {\r\n const angle = (i \/ 12) * 2 * Math.PI - Math.PI \/ 2;\r\n const numRadius = ring1Radius + 23;\r\n const x = center + Math.cos(angle) * numRadius;\r\n const y = center + Math.sin(angle) * numRadius;\r\n ctx.fillText(i.toString(), x, y);\r\n }\r\n ctx.restore();\r\n \/\/ Draw rings\r\n ctx.save();\r\n ctx.strokeStyle = '#222';\r\n ctx.lineWidth = 3;\r\n ctx.beginPath();\r\n ctx.arc(center, center, ring1Radius, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.beginPath();\r\n ctx.arc(center, center, ring2Radius, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.restore();\r\n \/\/ Draw illuminated trail for hand 1 (hour, white, short)\r\n const trail1Start = hand1Angle - 0.01;\r\n const trail1End = hand1Angle - trailFrac * 2 * Math.PI;\r\n const grad1 = ctx.createLinearGradient(\r\n center + Math.cos(trail1Start) * ring1Radius,\r\n center + Math.sin(trail1Start) * ring1Radius,\r\n center + Math.cos(trail1End) * ring1Radius,\r\n center + Math.sin(trail1End) * ring1Radius\r\n );\r\n grad1.addColorStop(0, 'rgba(255,255,255,1)');\r\n grad1.addColorStop(0.7, 'rgba(255,255,255,1)');\r\n grad1.addColorStop(1, 'rgba(255,255,255,0)');\r\n ctx.save();\r\n ctx.strokeStyle = grad1;\r\n ctx.lineWidth = 3;\r\n ctx.lineCap = 'round';\r\n ctx.shadowColor = 'rgba(255,255,255,1)';\r\n ctx.shadowBlur = 1500;\r\n ctx.beginPath();\r\n ctx.arc(center, center, ring1Radius, trail1Start, trail1End, true);\r\n ctx.stroke();\r\n ctx.restore();\r\n \/\/ Draw illuminated trail for hand 2 (minute, white, long)\r\n const trail2Start = hand2Angle - 0.01;\r\n const trail2End = hand2Angle - trailFrac * 2 * Math.PI;\r\n const grad2 = ctx.createLinearGradient(\r\n center + Math.cos(trail2Start) * ring2Radius,\r\n center + Math.sin(trail2Start) * ring2Radius,\r\n center + Math.cos(trail2End) * ring2Radius,\r\n center + Math.sin(trail2End) * ring2Radius\r\n );\r\n grad2.addColorStop(0, 'rgba(255,255,255,1)');\r\n grad2.addColorStop(0.7, 'rgba(255,255,255,1)');\r\n grad2.addColorStop(1, 'rgba(255,255,255,0)');\r\n ctx.save();\r\n ctx.strokeStyle = grad2;\r\n ctx.lineWidth = 3;\r\n ctx.lineCap = 'round';\r\n ctx.shadowColor = 'rgba(255,255,255,1)';\r\n ctx.shadowBlur = 1500;\r\n ctx.beginPath();\r\n ctx.arc(center, center, ring2Radius, trail2Start, trail2End, true);\r\n ctx.stroke();\r\n ctx.restore();\r\n \/\/ Draw hand 1 (hour, white, short)\r\n ctx.save();\r\n ctx.strokeStyle = hand1Color;\r\n ctx.lineWidth = 5;\r\n ctx.lineCap = 'round';\r\n ctx.beginPath();\r\n ctx.moveTo(center, center);\r\n ctx.lineTo(center + Math.cos(hand1Angle) * ring1Radius, center + Math.sin(hand1Angle) * ring1Radius);\r\n ctx.stroke();\r\n ctx.restore();\r\n \/\/ Draw glowing tip for hand 1\r\n const hand1TipX = center + Math.cos(hand1Angle) * ring1Radius;\r\n const hand1TipY = center + Math.sin(hand1Angle) * ring1Radius;\r\n const hand1Gradient = ctx.createRadialGradient(hand1TipX, hand1TipY, 0, hand1TipX, hand1TipY, size * 0.85);\r\n hand1Gradient.addColorStop(0, 'rgba(255, 255, 255, 0.30)');\r\n hand1Gradient.addColorStop(0.15, 'rgba(255, 255, 255, 0.25)');\r\n hand1Gradient.addColorStop(0.25, 'rgba(255, 255, 255, 0.15)');\r\n hand1Gradient.addColorStop(0.35, 'rgba(255, 255, 255, 0.10)');\r\n hand1Gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.04)');\r\n hand1Gradient.addColorStop(0.65, 'rgba(255, 255, 255, 0.03)');\r\n hand1Gradient.addColorStop(0.8, 'rgba(255, 255, 255, 0.02)');\r\n hand1Gradient.addColorStop(0.92, 'rgba(255, 255, 255, 0.01)');\r\n hand1Gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');\r\n ctx.save();\r\n ctx.fillStyle = hand1Gradient;\r\n ctx.beginPath();\r\n ctx.arc(hand1TipX, hand1TipY, size * 0.85, 0, 2 * Math.PI);\r\n ctx.fill();\r\n ctx.restore();\r\n \/\/ Draw hand 2 (minute, white, long)\r\n ctx.save();\r\n ctx.strokeStyle = hand2Color;\r\n ctx.lineWidth = 5;\r\n ctx.lineCap = 'round';\r\n ctx.beginPath();\r\n ctx.moveTo(center, center);\r\n ctx.lineTo(center + Math.cos(hand2Angle) * ring2Radius, center + Math.sin(hand2Angle) * ring2Radius);\r\n ctx.stroke();\r\n ctx.restore();\r\n \/\/ Draw glowing tip for hand 2\r\n const hand2TipX = center + Math.cos(hand2Angle) * ring2Radius;\r\n const hand2TipY = center + Math.sin(hand2Angle) * ring2Radius;\r\n const hand2Gradient = ctx.createRadialGradient(hand2TipX, hand2TipY, 0, hand2TipX, hand2TipY, size * 0.95);\r\n hand2Gradient.addColorStop(0, 'rgba(255, 255, 255, 0.20)');\r\n hand2Gradient.addColorStop(0.15, 'rgba(255, 255, 255, 0.10)');\r\n hand2Gradient.addColorStop(0.25, 'rgba(255, 255, 255, 0.05)');\r\n hand2Gradient.addColorStop(0.35, 'rgba(255, 255, 255, 0.04)');\r\n hand2Gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.03)');\r\n hand2Gradient.addColorStop(0.65, 'rgba(255, 255, 255, 0.02)');\r\n hand2Gradient.addColorStop(0.8, 'rgba(255, 255, 255, 0.01)');\r\n hand2Gradient.addColorStop(0.92, 'rgba(255, 255, 255, 0.005)');\r\n hand2Gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');\r\n ctx.save();\r\n ctx.fillStyle = hand2Gradient;\r\n ctx.beginPath();\r\n ctx.arc(hand2TipX, hand2TipY, size * 0.95, 0, 2 * Math.PI);\r\n ctx.fill();\r\n ctx.restore();\r\n \/\/ Draw center dot\r\n ctx.save();\r\n ctx.fillStyle = '#222';\r\n ctx.beginPath();\r\n ctx.arc(center, center, 10, 0, 2 * Math.PI);\r\n ctx.fill();\r\n ctx.restore();\r\n \/\/ Draw logo in the center (after drawing the center dot)\r\n const logoImg = document.getElementById('clock-logo');\r\n if (logoImg.complete && logoImg.naturalWidth > 0) {\r\n ctx.save();\r\n ctx.globalAlpha = 1;\r\n \/\/ Always draw as a square, using the smaller of width\/height\r\n const logoSize = size * 0.13;\r\n const aspect = logoImg.naturalWidth \/ logoImg.naturalHeight;\r\n let drawW = logoSize;\r\n let drawH = logoSize;\r\n if (aspect > 1) {\r\n \/\/ Wider than tall\r\n drawH = logoSize \/ aspect;\r\n } else if (aspect < 1) {\r\n \/\/ Taller than wide\r\n drawW = logoSize * aspect;\r\n }\r\n ctx.drawImage(\r\n logoImg,\r\n center - drawW \/ 2,\r\n center - drawH \/ 2,\r\n drawW,\r\n drawH\r\n );\r\n ctx.restore();\r\n }\r\n }\r\n\r\n requestAnimationFrame(animate);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Animated Clock Base<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"off","ocean_display_header":"off","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"off","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","footnotes":""},"class_list":["post-1103","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/pages\/1103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/comments?post=1103"}],"version-history":[{"count":0,"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/pages\/1103\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatirinfotech.com\/index.php\/wp-json\/wp\/v2\/media?parent=1103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}