{"id":2011,"date":"2025-08-30T07:53:47","date_gmt":"2025-08-30T07:53:47","guid":{"rendered":"https:\/\/tarfus.org\/?page_id=2011"},"modified":"2025-11-08T00:34:39","modified_gmt":"2025-11-08T00:34:39","slug":"prayers-timings","status":"publish","type":"page","link":"https:\/\/tarfus.org\/en\/prayers-timings\/","title":{"rendered":"Prayers Timings"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2011\" class=\"elementor elementor-2011\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-774c263 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"774c263\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-da52f91\" data-id=\"da52f91\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26caab1 e-con-full elementor-hidden-desktop e-flex e-con e-parent\" data-id=\"26caab1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-1178e3d e-con-full e-flex e-con e-child\" data-id=\"1178e3d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2bb6263 elementor-widget elementor-widget-image\" data-id=\"2bb6263\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/tarfus.org\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"600\" height=\"240\" src=\"https:\/\/tarfus.org\/wp-content\/uploads\/2025\/08\/f72f2060-8ca4-485a-a8eb-ea4f1b9df10b_removalai_preview.png\" class=\"attachment-large size-large wp-image-2161\" alt=\"\" srcset=\"https:\/\/tarfus.org\/wp-content\/uploads\/2025\/08\/f72f2060-8ca4-485a-a8eb-ea4f1b9df10b_removalai_preview.png 600w, https:\/\/tarfus.org\/wp-content\/uploads\/2025\/08\/f72f2060-8ca4-485a-a8eb-ea4f1b9df10b_removalai_preview-300x120.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-892f056 elementor-widget elementor-widget-heading\" data-id=\"892f056\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Gelenekten Gelece\u011fe\u2026<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ab06761 e-con-full e-flex e-con e-child\" data-id=\"ab06761\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d23b27e elementor-align-right elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"d23b27e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/tarfus.org\/tr\/prayers-timings\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">namaz vakitleri<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4ba59e6 e-con-full e-flex e-con e-child\" data-id=\"4ba59e6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8807262 elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"8807262\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<a class=\"elementor-icon\" href=\"#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjQwMDciLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D\">\n\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-bars\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z\"><\/path><\/svg>\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-8ce9a2e e-flex e-con-boxed e-con e-parent\" data-id=\"8ce9a2e\" 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-51cadd5 elementor-widget elementor-widget-html\" data-id=\"51cadd5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Islamic Prayer Times Widget<\/title>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Amiri:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap');\r\n\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: 'Roboto', sans-serif;\r\n            background-color: #f5f5f5;\r\n            color: #333;\r\n        }\r\n\r\n        \/* Main Widget Styles *\/\r\n        :root {\r\n            --primary-color: #FECC5B;\r\n            --primary-light: #ffdb7a;\r\n            --primary-dark: #e6b84f;\r\n            --secondary-color: #DE4444;\r\n            --accent-color: #fff2d1;\r\n            --text-on-primary: #2c3e50;\r\n            --shadow-color: rgba(254, 204, 91, 0.2);\r\n        }\r\n        \r\n        .prayer-widget {\r\n            max-width: 900px;\r\n            margin: 10px auto;\r\n            background-color: #fff;\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n            box-shadow: 0 5px 25px var(--shadow-color);\r\n            border: 1px solid #e0e0e0;\r\n        }\r\n\r\n        \/* Header Styles with Islamic Pattern *\/\r\n        .widget-header {\r\n            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));\r\n            color: var(--text-on-primary);\r\n            text-align: center;\r\n            padding: 20px 15px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            background-image: url('https:\/\/www.transparenttextures.com\/patterns\/arabesque.png');\r\n        }\r\n\r\n        .widget-header::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background-color: rgba(254, 204, 91, 0.9);\r\n            z-index: 1;\r\n        }\r\n\r\n        .header-content {\r\n            position: relative;\r\n            z-index: 2;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        .header-info {\r\n            text-align: center;\r\n        }\r\n\r\n        .date-display {\r\n            font-size: 16px;\r\n            margin-bottom: 3px;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .location-display {\r\n            font-size: 14px;\r\n            opacity: 0.9;\r\n            font-weight: 300;\r\n        }\r\n\r\n        \/* Current Day Prayer Times *\/\r\n        .current-day {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            padding: 12px 15px;\r\n            background-color: #f8f9fa;\r\n            position: relative;\r\n            border-bottom: 1px solid #e0e0e0;\r\n        }\r\n\r\n        .current-time {\r\n            font-size: 24px;\r\n            font-weight: 700;\r\n            margin-bottom: 6px;\r\n            color: var(--primary-color);\r\n        }\r\n\r\n        .prayer-clock-container {\r\n            position: relative;\r\n            margin-bottom: 10px;\r\n            width: 120px;\r\n            height: 120px;\r\n        }\r\n\r\n        .prayer-clock {\r\n            width: 100px;\r\n            height: 100px;\r\n            border-radius: 50%;\r\n            background-color: #fff;\r\n            border: 2px solid var(--secondary-color);\r\n            position: relative;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            box-shadow: 0 4px 15px rgba(222, 68, 68, 0.2);\r\n            margin: 10px auto 0;\r\n        }\r\n\r\n        .next-prayer-label {\r\n            position: absolute;\r\n            top: -10px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            background: linear-gradient(135deg, var(--secondary-color), #c73e3e);\r\n            color: white;\r\n            padding: 5px 15px;\r\n            border-radius: 20px;\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            white-space: nowrap;\r\n            z-index: 5;\r\n            box-shadow: 0 3px 10px rgba(222, 68, 68, 0.3);\r\n        }\r\n\r\n        #next-prayer-countdown {\r\n            font-size: 16px;\r\n            font-weight: 700;\r\n            color: var(--secondary-color);\r\n        }\r\n\r\n        \/* Prayer Times Grid *\/\r\n        .prayer-info {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 8px;\r\n            width: 100%;\r\n            margin-top: 6px;\r\n        }\r\n\r\n        .prayer-column {\r\n            background-color: #fff;\r\n            border-radius: 8px;\r\n            padding: 10px 8px;\r\n            text-align: center;\r\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n            border: 1px solid #e0e0e0;\r\n            transition: transform 0.2s, box-shadow 0.2s;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .prayer-column:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 5px 15px var(--shadow-color);\r\n            background-color: var(--accent-color);\r\n        }\r\n\r\n        .prayer-icon {\r\n            display: none;\r\n        }\r\n\r\n        .prayer-name {\r\n            font-weight: 500;\r\n            margin-bottom: 2px;\r\n            color: #666;\r\n            font-size: 16px;\r\n            order: 3;\r\n        }\r\n\r\n        .prayer-time {\r\n            font-size: 18px;\r\n            font-weight: 500;\r\n            color: var(--primary-color);\r\n            margin-bottom: 4px;\r\n            order: 2;\r\n        }\r\n\r\n        .iqamah-time {\r\n            font-size: 18px;\r\n            color: var(--secondary-color);\r\n            font-weight: 700;\r\n            background-color: rgba(222, 68, 68, 0.1);\r\n            padding: 6px 12px;\r\n            border-radius: 8px;\r\n            border: 2px solid rgba(222, 68, 68, 0.3);\r\n            margin-bottom: 6px;\r\n            order: 1;\r\n        }\r\n\r\n        \/* Desktop-specific styling for sunrise prayer column *\/\r\n        @media (min-width: 481px) {\r\n            .prayer-column[data-prayer=\"sunrise\"] .prayer-name {\r\n                font-size: 20px;\r\n                font-weight: 600;\r\n            }\r\n            \r\n            .prayer-column[data-prayer=\"sunrise\"] .prayer-time {\r\n                font-size: 24px;\r\n                font-weight: 700;\r\n                margin-bottom: 8px;\r\n            }\r\n        }\r\n\r\n        .next-prayer {\r\n            background-color: var(--accent-color);\r\n            border: 2px solid var(--secondary-color);\r\n        }\r\n\r\n        .next-prayer .prayer-name {\r\n            color: var(--secondary-color);\r\n            font-weight: 600;\r\n        }\r\n\r\n        .next-prayer .prayer-time {\r\n            color: var(--secondary-color);\r\n        }\r\n\r\n        \/* Tab Navigation *\/\r\n        .tab-navigation {\r\n            display: flex;\r\n            background-color: #f8f9fa;\r\n            border-bottom: 1px solid #e0e0e0;\r\n        }\r\n\r\n        .tab-button {\r\n            flex: 1;\r\n            padding: 15px;\r\n            text-align: center;\r\n            background-color: transparent;\r\n            border: none;\r\n            cursor: pointer;\r\n            font-weight: 500;\r\n            color: #555;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .tab-button::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 0;\r\n            height: 3px;\r\n            background-color: var(--secondary-color);\r\n            transition: width 0.3s ease;\r\n        }\r\n\r\n        .tab-button.active {\r\n            color: var(--secondary-color);\r\n            font-weight: 700;\r\n            background-color: rgba(222, 68, 68, 0.05);\r\n        }\r\n\r\n        .tab-button.active::after {\r\n            width: 80%;\r\n            background-color: var(--secondary-color);\r\n        }\r\n\r\n        .tab-button:hover::after {\r\n            width: 40%;\r\n        }\r\n\r\n        .tab-button:hover {\r\n            color: var(--secondary-color);\r\n            background-color: rgba(222, 68, 68, 0.03);\r\n        }\r\n\r\n        \/* Tab Content *\/\r\n        .tab-content {\r\n            display: none;\r\n            padding: 20px;\r\n        }\r\n\r\n        .tab-content.active {\r\n            display: block;\r\n        }\r\n\r\n        \/* Prayer Times Table *\/\r\n        .prayer-table {\r\n            width: 100%;\r\n            border-collapse: collapse;\r\n            margin-top: 10px;\r\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n            border-radius: 8px;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .prayer-table th, .prayer-table td {\r\n            padding: 12px 8px;\r\n            text-align: center;\r\n        }\r\n\r\n        .prayer-table th {\r\n            background: linear-gradient(135deg, var(--secondary-color), #c73e3e);\r\n            color: white;\r\n            font-weight: 500;\r\n            text-transform: uppercase;\r\n            font-size: 14px;\r\n        }\r\n\r\n        .prayer-table tr:nth-child(even) {\r\n            background-color: #f8f9fa;\r\n        }\r\n\r\n        .prayer-table tr:hover {\r\n            background-color: var(--accent-color);\r\n        }\r\n\r\n        .prayer-table td {\r\n            border-bottom: 1px solid #e0e0e0;\r\n        }\r\n\r\n        \/* Responsive Design *\/\r\n        \/* Add this CSS for the small Iqamah times in tables *\/\r\n        .iqamah-time-small {\r\n            font-size: 13px;\r\n            color: var(--primary-dark);\r\n            font-weight: 700;\r\n            display: block;\r\n            margin-top: 2px;\r\n            background-color: rgba(254, 204, 91, 0.15);\r\n            padding: 2px 6px;\r\n            border-radius: 4px;\r\n            border: 1px solid rgba(254, 204, 91, 0.3);\r\n        }\r\n        \r\n        \/* Improve responsive design for tablets and mobile *\/\r\n        @media (max-width: 768px) {\r\n            .prayer-widget {\r\n                margin: 5px;\r\n            }\r\n            \r\n            .widget-header {\r\n                padding: 15px 10px;\r\n            }\r\n            \r\n            .current-day {\r\n                padding: 8px 10px;\r\n            }\r\n            \r\n            .current-time {\r\n                font-size: 20px;\r\n                margin-bottom: 4px;\r\n            }\r\n            \r\n            .prayer-clock-container {\r\n                margin-bottom: 8px;\r\n                width: 100px;\r\n                height: 100px;\r\n            }\r\n            \r\n            .prayer-clock {\r\n                width: 80px;\r\n                height: 80px;\r\n            }\r\n            \r\n            #next-prayer-countdown {\r\n                font-size: 14px;\r\n            }\r\n            \r\n            .prayer-info {\r\n                gap: 6px;\r\n                margin-top: 4px;\r\n            }\r\n            \r\n            .prayer-column {\r\n                padding: 6px 4px;\r\n            }\r\n            \r\n            .iqamah-time {\r\n                font-size: 16px;\r\n                padding: 4px 8px;\r\n                margin-bottom: 4px;\r\n            }\r\n            \r\n            .prayer-time {\r\n                font-size: 12px;\r\n                margin-bottom: 2px;\r\n            }\r\n            \r\n            .prayer-name {\r\n                font-size: 10px;\r\n                margin-bottom: 1px;\r\n            }\r\n            \r\n            .prayer-icon {\r\n                width: 28px;\r\n                height: 28px;\r\n                font-size: 14px;\r\n                margin-bottom: 4px;\r\n            }\r\n        \r\n            .prayer-table th, .prayer-table td {\r\n                padding: 6px 3px;\r\n                font-size: 11px;\r\n            }\r\n            \r\n            \/* Make tables scrollable horizontally on tablets *\/\r\n            .tab-content {\r\n                overflow-x: auto;\r\n                padding: 15px 10px;\r\n            }\r\n            \r\n            .prayer-table {\r\n                min-width: 500px;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 480px) {\r\n            .prayer-widget {\r\n                margin: 5px;\r\n            }\r\n            \r\n            .widget-header {\r\n                padding: 15px 10px;\r\n            }\r\n            \r\n            .date-display {\r\n                font-size: 16px;\r\n                margin-bottom: 4px;\r\n            }\r\n            \r\n            .location-display {\r\n                font-size: 14px;\r\n            }\r\n            \r\n            .current-day {\r\n                padding: 10px 10px;\r\n            }\r\n            \r\n            .current-time {\r\n                font-size: 22px;\r\n                margin-bottom: 4px;\r\n                z-index: 10;\r\n                position: relative;\r\n            }\r\n            \r\n            .prayer-clock-container {\r\n                margin-bottom: 6px;\r\n                width: 90px;\r\n                height: 90px;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n            }\r\n            \r\n            .prayer-clock {\r\n                width: 80px;\r\n                height: 80px;\r\n            }\r\n            \r\n            #next-prayer-countdown {\r\n                font-size: 12px;\r\n                font-weight: 700;\r\n            }\r\n            \r\n            .next-prayer-label {\r\n                font-size: 10px;\r\n                padding: 3px 8px;\r\n                top: -8px;\r\n                border-radius: 12px;\r\n            }\r\n            \r\n            \/* Mobile bar layout for prayer times *\/\r\n            .prayer-info {\r\n                display: flex;\r\n                flex-direction: column;\r\n                gap: 6px;\r\n                margin-top: 8px;\r\n            }\r\n            \r\n            .prayer-column {\r\n                display: flex;\r\n                flex-direction: row;\r\n                align-items: center;\r\n                justify-content: space-between;\r\n                padding: 10px 12px;\r\n                background: rgba(255, 255, 255, 0.9);\r\n                border-radius: 8px;\r\n                border: 2px solid rgba(254, 204, 91, 0.3);\r\n                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);\r\n                min-height: 50px;\r\n            }\r\n            \r\n            .prayer-name {\r\n                font-size: 18px; \/* Increased from 16px *\/\r\n                font-weight: 600;\r\n                color: #333;\r\n                margin: 0;\r\n                order: 1;\r\n                flex: 1;\r\n                text-align: left;\r\n            }\r\n            \r\n            .prayer-time {\r\n                font-size: 16px;\r\n                font-weight: 600;\r\n                color: var(--secondary-color);\r\n                margin: 0;\r\n                order: 2;\r\n                flex: 0 0 auto;\r\n                margin-right: 12px;\r\n            }\r\n            \r\n            .iqamah-time {\r\n                font-size: 16px;\r\n                font-weight: 700;\r\n                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\r\n                color: white;\r\n                padding: 8px 12px;\r\n                border-radius: 8px;\r\n                margin: 0;\r\n                order: 3;\r\n                flex: 0 0 auto;\r\n                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\r\n            }\r\n            \r\n            .prayer-icon {\r\n                display: none;\r\n            }\r\n            \r\n            \/* Show tab navigation on mobile with desktop styling *\/\r\n            .tab-navigation {\r\n                display: flex;\r\n                background-color: #f8f9fa;\r\n                border-bottom: 1px solid #e0e0e0;\r\n            }\r\n            \r\n            \/* Tab content behavior - only show active tab *\/\r\n            .tab-content {\r\n                display: none;\r\n                padding: 15px 10px;\r\n                border-top: 1px solid #e0e0e0;\r\n            }\r\n            \r\n            .tab-content.active {\r\n                display: block;\r\n            }\r\n            \r\n            \/* Mobile-friendly tab button styling *\/\r\n            .tab-button {\r\n                flex: 1;\r\n                padding: 18px 12px;\r\n                text-align: center;\r\n                background-color: transparent;\r\n                border: none;\r\n                cursor: pointer;\r\n                font-weight: 500;\r\n                color: #555;\r\n                transition: all 0.3s ease;\r\n                position: relative;\r\n                overflow: hidden;\r\n                font-size: 14px;\r\n                min-height: 50px;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n            }\r\n            \r\n            .tab-button::after {\r\n                content: '';\r\n                position: absolute;\r\n                bottom: 0;\r\n                left: 50%;\r\n                transform: translateX(-50%);\r\n                width: 0;\r\n                height: 3px;\r\n                background-color: var(--secondary-color);\r\n                transition: width 0.3s ease;\r\n            }\r\n            \r\n            .tab-button.active {\r\n                color: var(--secondary-color);\r\n                font-weight: 700;\r\n                background-color: rgba(222, 68, 68, 0.05);\r\n            }\r\n            \r\n            .tab-button.active::after {\r\n                width: 80%;\r\n                background-color: var(--secondary-color);\r\n            }\r\n            \r\n            .tab-button:hover::after {\r\n                width: 40%;\r\n            }\r\n            \r\n            .tab-button:hover {\r\n                color: var(--secondary-color);\r\n                background-color: rgba(222, 68, 68, 0.03);\r\n            }\r\n            \r\n            \/* Remove section titles since we now have proper navigation - no longer needed *\/\r\n            \r\n            \/* Mobile-friendly table styling with expanded columns *\/\r\n            .prayer-table {\r\n                width: 100%;\r\n                border-collapse: collapse;\r\n                font-size: 14px;\r\n                background: white;\r\n                border-radius: 8px;\r\n                overflow: hidden;\r\n                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n                min-width: 700px; \/* Ensure minimum width for better column spacing *\/\r\n            }\r\n            \r\n            .prayer-table th {\r\n                 background: linear-gradient(135deg, var(--secondary-color), #c73e3e);\r\n                 color: white;\r\n                 font-weight: 500;\r\n                 padding: 12px 8px;\r\n                 font-size: 13px;\r\n                 text-align: center;\r\n                 border-bottom: 2px solid #c73e3e;\r\n                 text-transform: uppercase;\r\n                 white-space: nowrap;\r\n             }\r\n            \r\n            .prayer-table td {\r\n                padding: 12px 8px;\r\n                text-align: center;\r\n                border-bottom: 1px solid #f0f0f0;\r\n                font-size: 13px;\r\n                font-weight: 500;\r\n                white-space: nowrap;\r\n            }\r\n            \r\n            \/* Specific column widths for better spacing *\/\r\n            .prayer-table th:first-child,\r\n            .prayer-table td:first-child {\r\n                width: 120px;\r\n                min-width: 120px;\r\n            }\r\n            \r\n            .prayer-table th:not(:first-child),\r\n            .prayer-table td:not(:first-child) {\r\n                width: 90px;\r\n                min-width: 90px;\r\n            }\r\n            \r\n            .prayer-table tr:nth-child(even) {\r\n                background-color: #f8f9fa;\r\n            }\r\n            \r\n            .prayer-table tr:hover {\r\n                background-color: var(--accent-color);\r\n            }\r\n            \r\n            \/* Make tables horizontally scrollable if needed *\/\r\n            .tab-content {\r\n                overflow-x: auto;\r\n            }\r\n            \r\n            .prayer-table {\r\n                min-width: 100%;\r\n            }\r\n            \r\n            \/* Highlight current day in tables *\/\r\n            .prayer-table .current-day-row {\r\n                background-color: var(--accent-color) !important;\r\n                border-left: 4px solid var(--secondary-color);\r\n            }\r\n            \r\n            .prayer-table .current-day-row td {\r\n                font-weight: 600;\r\n                color: var(--secondary-color);\r\n            }\r\n            \r\n            \/* Reduce overall widget padding on mobile *\/\r\n            .prayer-widget {\r\n                border-radius: 8px;\r\n            }\r\n            \r\n            \/* Optimize header spacing *\/\r\n            .widget-header {\r\n                padding: 12px 10px;\r\n            }\r\n            \r\n            .date-display {\r\n                font-size: 15px;\r\n                margin-bottom: 3px;\r\n            }\r\n            \r\n            \/* Better utilize vertical space *\/\r\n            .current-day {\r\n                padding: 12px 10px;\r\n            }\r\n            \r\n            .prayer-clock-container {\r\n                margin-bottom: 12px;\r\n            }\r\n        }\r\n\r\n        \/* Islamic Decorative Elements *\/\r\n        .islamic-decoration {\r\n            position: absolute;\r\n            width: 40px;\r\n            height: 40px;\r\n            opacity: 0.2;\r\n        }\r\n\r\n        .decoration-1 {\r\n            top: 20px;\r\n            left: 20px;\r\n            background-image: url('https:\/\/www.transparenttextures.com\/patterns\/arabesque.png');\r\n            transform: rotate(45deg);\r\n        }\r\n\r\n        .decoration-2 {\r\n            bottom: 20px;\r\n            right: 20px;\r\n            background-image: url('https:\/\/www.transparenttextures.com\/patterns\/arabesque.png');\r\n            transform: rotate(-45deg);\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"prayer-widget\">\r\n        <!-- Widget Header -->\r\n        <div class=\"widget-header\">\r\n            <div class=\"header-content\">\r\n                <div class=\"header-info\">\r\n                    <div class=\"date-display\" id=\"current-date\">Loading date...<\/div>\r\n                    <div class=\"location-display\" id=\"location\">Loading location...<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Current Day Prayer Times -->\r\n        <div class=\"current-day\">\r\n            <div class=\"current-time\" id=\"current-time\">00:00:00<\/div>\r\n            <div class=\"prayer-clock-container\">\r\n                <div class=\"next-prayer-label\">Next Prayer In<\/div>\r\n                <div class=\"prayer-clock\">\r\n                    <div id=\"next-prayer-countdown\">--:--:--<\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"prayer-info\" id=\"prayer-info\">\r\n                <!-- Prayer times will be populated by JavaScript -->\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Tab Navigation -->\r\n        <div class=\"tab-navigation\">\r\n            <button class=\"tab-button active\" onclick=\"openTab('weekly')\">Weekly Prayer Times<\/button>\r\n            <button class=\"tab-button\" onclick=\"openTab('monthly')\">Monthly Prayer Times<\/button>\r\n        <\/div>\r\n\r\n        <!-- Weekly Tab Content -->\r\n        <div id=\"weekly\" class=\"tab-content active\">\r\n            <table class=\"prayer-table\" id=\"weekly-table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>Date<\/th>\r\n                        <th>Fajr<\/th>\r\n                        <th>Sunrise<\/th>\r\n                        <th>Dhuhr<\/th>\r\n                        <th>Asr<\/th>\r\n                        <th>Maghrib<\/th>\r\n                        <th>Isha<\/th>\r\n                    <\/tr>\r\n                <\/thead>\r\n                <tbody>\r\n                    <!-- Weekly prayer times will be populated by JavaScript -->\r\n                <\/tbody>\r\n            <\/table>\r\n        <\/div>\r\n\r\n        <!-- Monthly Tab Content -->\r\n        <div id=\"monthly\" class=\"tab-content\">\r\n            <table class=\"prayer-table\" id=\"monthly-table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>Date<\/th>\r\n                        <th>Fajr<\/th>\r\n                        <th>Sunrise<\/th>\r\n                        <th>Dhuhr<\/th>\r\n                        <th>Asr<\/th>\r\n                        <th>Maghrib<\/th>\r\n                        <th>Isha<\/th>\r\n                    <\/tr>\r\n                <\/thead>\r\n                <tbody>\r\n                    <!-- Monthly prayer times will be populated by JavaScript -->\r\n                <\/tbody>\r\n            <\/table>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Prayer times data (will be loaded from JSON)\r\n        let prayerTimesData = [];\r\n\r\n        \/\/ Function to convert decimal time to HH:MM format\r\n        function decimalToTime(decimal) {\r\n            const totalMinutes = Math.round(decimal * 24 * 60);\r\n            const hours = Math.floor(totalMinutes \/ 60);\r\n            const minutes = totalMinutes % 60;\r\n            return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;\r\n        }\r\n\r\n        \/\/ Function to convert Excel date serial number to JavaScript Date\r\n        function excelDateToJSDate(serial) {\r\n            \/\/ Excel date serial starts from January 1, 1900\r\n            \/\/ JavaScript Date starts from January 1, 1970\r\n            \/\/ Excel incorrectly treats 1900 as a leap year, so we need to adjust\r\n            const excelEpoch = new Date(1899, 11, 30); \/\/ December 30, 1899\r\n            return new Date(excelEpoch.getTime() + (serial * 24 * 60 * 60 * 1000));\r\n        }\r\n\r\n        \/\/ Function to load prayer times data\r\n        async function loadPrayerTimesData() {\r\n            try {\r\n                \/\/ Load the local JSON file\r\n                const response = await fetch('https:\/\/tarfus.org\/wp-content\/uploads\/2025\/09\/excel-to-json.json');\r\n                const rawData = await response.json();\r\n                \r\n                \/\/ Convert the raw data to proper format\r\n                prayerTimesData = rawData.map(item => {\r\n                    const jsDate = excelDateToJSDate(item.DATE);\r\n                    return {\r\n                        COUNTRY: 'USA',\r\n                        STATE: item.STATE,\r\n                        CITY: item.CITY,\r\n                        DATE: jsDate.toLocaleDateString('en-US'),\r\n                        FAJR: decimalToTime(item.FAJR),\r\n                        'FAJR IQAMAH': decimalToTime(item['FAJR IQAMAH']),\r\n                        SUNRISE: decimalToTime(item.SUNRISE),\r\n                        DHUHR: decimalToTime(item.DHUHR),\r\n                        'DHUHR IQAMAH': decimalToTime(item['DHUHR IQAMAH']),\r\n                        ASR: decimalToTime(item.ASR),\r\n                        'ASR IQAMAH': decimalToTime(item['ASR IQAMAH']),\r\n                        MAGHRIB: decimalToTime(item.MAGHRIB),\r\n                        'MAGHRIB IQAMAH': decimalToTime(item['MAGHRIB IQAMAH']),\r\n                        ISHA: decimalToTime(item.ISHA),\r\n                        'ISHA IQAMAH': decimalToTime(item['ISHA IQAMAH'])\r\n                    };\r\n                });\r\n                \r\n                initializeWidget();\r\n            } catch (error) {\r\n                console.error('Error loading prayer times data:', error);\r\n                \/\/ For demo purposes, use sample data if fetch fails\r\n                useSampleData();\r\n            }\r\n        }\r\n\r\n        \/\/ Function to use sample data for demonstration\r\n        function useSampleData() {\r\n            \/\/ This is just a small sample of the data structure\r\n            prayerTimesData = [\r\n                {\r\n                    \"COUNTRY\": \"USA\",\r\n                    \"STATE\": \"MARYLAND\",\r\n                    \"CITY\": \"LANHAM\",\r\n                    \"DATE\": \"8\/20\/2025\",\r\n                    \"FAJR\": \"4:48\",\r\n                    \"FAJR IQAMAH\": \"5:18\",\r\n                    \"SUNRISE\": \"6:18\",\r\n                    \"DHUHR\": \"13:16\",\r\n                    \"DHUHR IQAMAH\": \"13:31\",\r\n                    \"ASR\": \"17:01\",\r\n                    \"ASR IQAMAH\": \"17:16\",\r\n                    \"MAGHRIB\": \"20:03\",\r\n                    \"MAGHRIB IQAMAH\": \"20:13\",\r\n                    \"ISHA\": \"21:22\",\r\n                    \"ISHA IQAMAH\": \"21:37\"\r\n                },\r\n                {\r\n                    \"COUNTRY\": \"USA\",\r\n                    \"STATE\": \"MARYLAND\",\r\n                    \"CITY\": \"LANHAM\",\r\n                    \"DATE\": \"8\/21\/2025\",\r\n                    \"FAJR\": \"4:49\",\r\n                    \"FAJR IQAMAH\": \"5:19\",\r\n                    \"SUNRISE\": \"6:19\",\r\n                    \"DHUHR\": \"13:16\",\r\n                    \"DHUHR IQAMAH\": \"13:31\",\r\n                    \"ASR\": \"17:00\",\r\n                    \"ASR IQAMAH\": \"17:15\",\r\n                    \"MAGHRIB\": \"20:02\",\r\n                    \"MAGHRIB IQAMAH\": \"20:12\",\r\n                    \"ISHA\": \"21:20\",\r\n                    \"ISHA IQAMAH\": \"21:35\"\r\n                }\r\n                \/\/ Add more sample data as needed\r\n            ];\r\n            initializeWidget();\r\n        }\r\n\r\n        \/\/ Function to initialize the widget\r\n        function initializeWidget() {\r\n            updateDateTime();\r\n            updateLocation();\r\n            updateCurrentDayPrayers();\r\n            populateWeeklyTable();\r\n            populateMonthlyTable();\r\n            \r\n            \/\/ Update the time every second\r\n            setInterval(updateDateTime, 1000);\r\n            \/\/ Update prayer times display every minute\r\n            setInterval(updateCurrentDayPrayers, 60000);\r\n        }\r\n\r\n        \/\/ Function to update date and time display\r\n        function updateDateTime() {\r\n            const now = new Date();\r\n            document.getElementById('current-date').textContent = now.toLocaleDateString('en-US', { \r\n                weekday: 'long', \r\n                year: 'numeric', \r\n                month: 'long', \r\n                day: 'numeric' \r\n            });\r\n            document.getElementById('current-time').textContent = now.toLocaleTimeString('en-US', {\r\n                hour: '2-digit',\r\n                minute: '2-digit',\r\n                second: '2-digit'\r\n            });\r\n            updateNextPrayerCountdown();\r\n        }\r\n\r\n        \/\/ Function to update location display\r\n        function updateLocation() {\r\n            if (prayerTimesData.length > 0) {\r\n                const data = prayerTimesData[0];\r\n                document.getElementById('location').textContent = `${data.CITY}, ${data.STATE}, ${data.COUNTRY}`;\r\n            }\r\n        }\r\n\r\n        \/\/ Function to find today's prayer times\r\n        function getTodayPrayerTimes() {\r\n            const today = new Date();\r\n            const todayString = today.toLocaleDateString('en-US');\r\n            \r\n            \/\/ Try to find exact match for today\r\n            let todayData = prayerTimesData.find(item => {\r\n                return item.DATE === todayString;\r\n            });\r\n            \r\n            \/\/ If not found, use the first entry as fallback\r\n            if (!todayData && prayerTimesData.length > 0) {\r\n                todayData = prayerTimesData[0];\r\n                console.log('Using fallback data for date:', todayString, 'Available dates:', prayerTimesData.slice(0, 5).map(item => item.DATE));\r\n            }\r\n            \r\n            return todayData;\r\n        }\r\n\r\n        \/\/ Function to update current day prayer times\r\n        \/\/ Also update the updateCurrentDayPrayers function to exclude Sunrise from next prayer calculation\r\n        function updateCurrentDayPrayers() {\r\n            const todayData = getTodayPrayerTimes();\r\n            if (!todayData) return;\r\n            \r\n            const prayerInfo = document.getElementById('prayer-info');\r\n            prayerInfo.innerHTML = '';\r\n            \r\n            \/\/ Define prayer names, their corresponding keys, and icons\r\n            const prayers = [\r\n                { name: 'Fajr', key: 'FAJR', iqamahKey: 'FAJR IQAMAH', icon: 'fas fa-sun', isPrayer: true },\r\n                { name: 'Sunrise', key: 'SUNRISE', iqamahKey: null, icon: 'fas fa-cloud-sun', isPrayer: false },\r\n                { name: 'Dhuhr', key: 'DHUHR', iqamahKey: 'DHUHR IQAMAH', icon: 'fas fa-sun', isPrayer: true },\r\n                { name: 'Asr', key: 'ASR', iqamahKey: 'ASR IQAMAH', icon: 'fas fa-cloud-sun', isPrayer: true },\r\n                { name: 'Maghrib', key: 'MAGHRIB', iqamahKey: 'MAGHRIB IQAMAH', icon: 'fas fa-moon', isPrayer: true },\r\n                { name: 'Isha', key: 'ISHA', iqamahKey: 'ISHA IQAMAH', icon: 'fas fa-star', isPrayer: true }\r\n            ];\r\n            \r\n            \/\/ Get the current time for comparison\r\n            const now = new Date();\r\n            const currentHour = now.getHours();\r\n            const currentMinute = now.getMinutes();\r\n            \r\n            \/\/ Find the next prayer (excluding Sunrise)\r\n            let nextPrayerIndex = -1;\r\n            for (let i = 0; i < prayers.length; i++) {\r\n                \/\/ Skip Sunrise when determining next prayer\r\n                if (!prayers[i].isPrayer) continue;\r\n                \r\n                const prayerTime = todayData[prayers[i].key];\r\n                const [prayerHour, prayerMinute] = prayerTime.split(':').map(Number);\r\n                \r\n                if (prayerHour > currentHour || (prayerHour === currentHour && prayerMinute > currentMinute)) {\r\n                    nextPrayerIndex = i;\r\n                    break;\r\n                }\r\n            }\r\n            \r\n            \/\/ If no next prayer found today, the next prayer is tomorrow's Fajr\r\n            if (nextPrayerIndex === -1) nextPrayerIndex = 0;\r\n            \r\n            \/\/ Create prayer time columns\r\n            prayers.forEach((prayer, index) => {\r\n                \/\/ Rest of the function remains the same\r\n                const column = document.createElement('div');\r\n                column.className = 'prayer-column';\r\n                \r\n                \/\/ Add data attribute for sunrise to enable special styling\r\n                if (prayer.name === 'Sunrise') {\r\n                    column.setAttribute('data-prayer', 'sunrise');\r\n                }\r\n                \r\n                \/\/ Add icon\r\n                const iconElement = document.createElement('div');\r\n                iconElement.className = 'prayer-icon';\r\n                iconElement.innerHTML = `<i class=\"${prayer.icon}\"><\/i>`;\r\n                \r\n                const nameElement = document.createElement('div');\r\n                nameElement.className = 'prayer-name';\r\n                nameElement.textContent = prayer.name;\r\n                \r\n                const timeElement = document.createElement('div');\r\n                timeElement.className = 'prayer-time';\r\n                timeElement.textContent = todayData[prayer.key];\r\n                \r\n                \/\/ Add Iqamah time if available\r\n                if (prayer.iqamahKey && todayData[prayer.iqamahKey]) {\r\n                    const iqamahElement = document.createElement('div');\r\n                    iqamahElement.className = 'iqamah-time';\r\n                    iqamahElement.textContent = `Iqamah: ${todayData[prayer.iqamahKey]}`;\r\n                    column.appendChild(iqamahElement);\r\n                }\r\n                \r\n                \/\/ Highlight the next prayer\r\n                if (index === nextPrayerIndex) {\r\n                    column.classList.add('next-prayer');\r\n                    nameElement.textContent = `${prayer.name} (Next)`;\r\n                }\r\n                \r\n                column.appendChild(iconElement);\r\n                column.appendChild(nameElement);\r\n                column.appendChild(timeElement);\r\n                prayerInfo.appendChild(column);\r\n            });\r\n        }\r\n\r\n        \/\/ Function to update the countdown to next prayer\r\n        \/\/ In the updateNextPrayerCountdown function, modify the prayers array to exclude Sunrise\r\n        function updateNextPrayerCountdown() {\r\n            const todayData = getTodayPrayerTimes();\r\n            if (!todayData) return;\r\n            \r\n            const now = new Date();\r\n            const currentHour = now.getHours();\r\n            const currentMinute = now.getMinutes();\r\n            const currentSecond = now.getSeconds();\r\n            \r\n            \/\/ Define prayer times - REMOVED SUNRISE from this list\r\n            const prayers = [\r\n                { name: 'Fajr', time: todayData.FAJR },\r\n                { name: 'Dhuhr', time: todayData.DHUHR },\r\n                { name: 'Asr', time: todayData.ASR },\r\n                { name: 'Maghrib', time: todayData.MAGHRIB },\r\n                { name: 'Isha', time: todayData.ISHA }\r\n            ];\r\n            \r\n            \/\/ Find the next prayer\r\n            let nextPrayer = null;\r\n            for (const prayer of prayers) {\r\n                const [prayerHour, prayerMinute] = prayer.time.split(':').map(Number);\r\n                \r\n                if (prayerHour > currentHour || (prayerHour === currentHour && prayerMinute > currentMinute)) {\r\n                    nextPrayer = {\r\n                        name: prayer.name,\r\n                        hour: prayerHour,\r\n                        minute: prayerMinute\r\n                    };\r\n                    break;\r\n                }\r\n            }\r\n            \r\n            \/\/ If no next prayer found today, the next prayer is tomorrow's Fajr\r\n            if (!nextPrayer) {\r\n                nextPrayer = {\r\n                    name: 'Fajr (Tomorrow)',\r\n                    hour: parseInt(prayers[0].time.split(':')[0]),\r\n                    minute: parseInt(prayers[0].time.split(':')[1]),\r\n                    tomorrow: true\r\n                };\r\n            }\r\n            \r\n            \/\/ Calculate time difference\r\n            let diffHours, diffMinutes, diffSeconds;\r\n            \r\n            if (nextPrayer.tomorrow) {\r\n                \/\/ Calculate time until tomorrow's Fajr\r\n                diffHours = 23 - currentHour + nextPrayer.hour;\r\n                diffMinutes = 59 - currentMinute + nextPrayer.minute;\r\n                if (diffMinutes >= 60) {\r\n                    diffHours++;\r\n                    diffMinutes -= 60;\r\n                }\r\n                diffSeconds = 59 - currentSecond;\r\n            } else {\r\n                \/\/ Calculate time until today's next prayer\r\n                diffHours = nextPrayer.hour - currentHour;\r\n                diffMinutes = nextPrayer.minute - currentMinute;\r\n                if (diffMinutes < 0) {\r\n                    diffHours--;\r\n                    diffMinutes += 60;\r\n                }\r\n                diffSeconds = 59 - currentSecond;\r\n            }\r\n            \r\n            \/\/ Format the countdown\r\n            const countdownText = `${String(diffHours).padStart(2, '0')}:${String(diffMinutes).padStart(2, '0')}:${String(diffSeconds).padStart(2, '0')}`;\r\n            document.getElementById('next-prayer-countdown').textContent = countdownText;\r\n        }\r\n\r\n        \/\/ Function to populate weekly prayer times table\r\n        \/\/ Update the populateWeeklyTable function to include Iqamah times\r\n        function populateWeeklyTable() {\r\n            const weeklyTable = document.getElementById('weekly-table').getElementsByTagName('tbody')[0];\r\n            weeklyTable.innerHTML = '';\r\n            \r\n            \/\/ Get current date\r\n            const today = new Date();\r\n            \r\n            \/\/ Find prayer times for the current week (7 days)\r\n            let weeklyData = [];\r\n            let daysToShow = 7;\r\n            \r\n            for (let i = 0; i < prayerTimesData.length && weeklyData.length < daysToShow; i++) {\r\n                const itemDate = new Date(prayerTimesData[i].DATE);\r\n                const diffTime = Math.abs(today - itemDate);\r\n                const diffDays = Math.ceil(diffTime \/ (1000 * 60 * 60 * 24));\r\n                \r\n                \/\/ Include dates within the next 7 days\r\n                if (itemDate >= today || diffDays <= 1) {\r\n                    weeklyData.push(prayerTimesData[i]);\r\n                }\r\n            }\r\n            \r\n            \/\/ If we don't have enough data, just use what we have\r\n            if (weeklyData.length === 0 && prayerTimesData.length > 0) {\r\n                weeklyData = prayerTimesData.slice(0, daysToShow);\r\n            }\r\n            \r\n            \/\/ Populate the table\r\n            weeklyData.forEach(day => {\r\n                const row = weeklyTable.insertRow();\r\n                \r\n                \/\/ Format the date\r\n                const dateObj = new Date(day.DATE);\r\n                const formattedDate = dateObj.toLocaleDateString('en-US', { \r\n                    weekday: 'short', \r\n                    month: 'short', \r\n                    day: 'numeric' \r\n                });\r\n                \r\n                \/\/ Add cells\r\n                row.insertCell(0).textContent = formattedDate;\r\n                \r\n                \/\/ Add Fajr with Iqamah\r\n                const fajrCell = row.insertCell(1);\r\n                fajrCell.innerHTML = `${day.FAJR}<br><span class=\"iqamah-time-small\">Iqamah: ${day['FAJR IQAMAH']}<\/span>`;\r\n                \r\n                \/\/ Add Sunrise (no Iqamah)\r\n                row.insertCell(2).textContent = day.SUNRISE;\r\n                \r\n                \/\/ Add Dhuhr with Iqamah\r\n                const dhuhrCell = row.insertCell(3);\r\n                dhuhrCell.innerHTML = `${day.DHUHR}<br><span class=\"iqamah-time-small\">Iqamah: ${day['DHUHR IQAMAH']}<\/span>`;\r\n                \r\n                \/\/ Add Asr with Iqamah\r\n                const asrCell = row.insertCell(4);\r\n                asrCell.innerHTML = `${day.ASR}<br><span class=\"iqamah-time-small\">Iqamah: ${day['ASR IQAMAH']}<\/span>`;\r\n                \r\n                \/\/ Add Maghrib with Iqamah\r\n                const maghribCell = row.insertCell(5);\r\n                maghribCell.innerHTML = `${day.MAGHRIB}<br><span class=\"iqamah-time-small\">Iqamah: ${day['MAGHRIB IQAMAH']}<\/span>`;\r\n                \r\n                \/\/ Add Isha with Iqamah\r\n                const ishaCell = row.insertCell(6);\r\n                ishaCell.innerHTML = `${day.ISHA}<br><span class=\"iqamah-time-small\">Iqamah: ${day['ISHA IQAMAH']}<\/span>`;\r\n            });\r\n        }\r\n\r\n        \/\/ Function to populate monthly prayer times table\r\n        \/\/ Update the populateMonthlyTable function to include Iqamah times (similar to weekly)\r\n        function populateMonthlyTable() {\r\n            const monthlyTable = document.getElementById('monthly-table').getElementsByTagName('tbody')[0];\r\n            monthlyTable.innerHTML = '';\r\n            \r\n            \/\/ Get current date\r\n            const today = new Date();\r\n            const currentMonth = today.getMonth() + 1;\r\n            const currentYear = today.getFullYear();\r\n            \r\n            \/\/ Find prayer times for the current month\r\n            const monthlyData = prayerTimesData.filter(item => {\r\n                const itemDate = new Date(item.DATE);\r\n                return itemDate.getMonth() + 1 === currentMonth && itemDate.getFullYear() === currentYear;\r\n            });\r\n            \r\n            \/\/ If no data for current month, use the first 30 days of data\r\n            const dataToShow = monthlyData.length > 0 ? monthlyData : prayerTimesData.slice(0, 30);\r\n            \r\n            \/\/ Populate the table\r\n            dataToShow.forEach(day => {\r\n                const row = monthlyTable.insertRow();\r\n                \r\n                \/\/ Format the date\r\n                const dateObj = new Date(day.DATE);\r\n                const formattedDate = dateObj.toLocaleDateString('en-US', { \r\n                    weekday: 'short', \r\n                    month: 'short', \r\n                    day: 'numeric' \r\n                });\r\n                \r\n                \/\/ Add cells\r\n                row.insertCell(0).textContent = formattedDate;\r\n                \r\n                \/\/ Add Fajr with Iqamah\r\n                const fajrCell = row.insertCell(1);\r\n                fajrCell.innerHTML = `${day.FAJR}<br><span class=\"iqamah-time-small\">Iqamah: ${day['FAJR IQAMAH']}<\/span>`;\r\n                \r\n                \/\/ Add Sunrise (no Iqamah)\r\n                row.insertCell(2).textContent = day.SUNRISE;\r\n                \r\n                \/\/ Add Dhuhr with Iqamah\r\n                const dhuhrCell = row.insertCell(3);\r\n                dhuhrCell.innerHTML = `${day.DHUHR}<br><span class=\"iqamah-time-small\">Iqamah: ${day['DHUHR IQAMAH']}<\/span>`;\r\n                \r\n                \/\/ Add Asr with Iqamah\r\n                const asrCell = row.insertCell(4);\r\n                asrCell.innerHTML = `${day.ASR}<br><span class=\"iqamah-time-small\">Iqamah: ${day['ASR IQAMAH']}<\/span>`;\r\n                \r\n                \/\/ Add Maghrib with Iqamah\r\n                const maghribCell = row.insertCell(5);\r\n                maghribCell.innerHTML = `${day.MAGHRIB}<br><span class=\"iqamah-time-small\">Iqamah: ${day['MAGHRIB IQAMAH']}<\/span>`;\r\n                \r\n                \/\/ Add Isha with Iqamah\r\n                const ishaCell = row.insertCell(6);\r\n                ishaCell.innerHTML = `${day.ISHA}<br><span class=\"iqamah-time-small\">Iqamah: ${day['ISHA IQAMAH']}<\/span>`;\r\n            });\r\n        }\r\n\r\n        \/\/ Function to switch between tabs\r\n        function openTab(tabName) {\r\n            \/\/ Hide all tab contents\r\n            const tabContents = document.getElementsByClassName('tab-content');\r\n            for (let i = 0; i < tabContents.length; i++) {\r\n                tabContents[i].classList.remove('active');\r\n            }\r\n            \r\n            \/\/ Remove active class from all tab buttons\r\n            const tabButtons = document.getElementsByClassName('tab-button');\r\n            for (let i = 0; i < tabButtons.length; i++) {\r\n                tabButtons[i].classList.remove('active');\r\n            }\r\n            \r\n            \/\/ Show the selected tab content and mark its button as active\r\n            document.getElementById(tabName).classList.add('active');\r\n            event.currentTarget.classList.add('active');\r\n        }\r\n\r\n        \/\/ Load prayer times data when the page loads\r\n        document.addEventListener('DOMContentLoaded', loadPrayerTimesData);\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\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>Gelenekten Gelece\u011fe\u2026 namaz vakitleri Islamic Prayer Times Widget Loading date&#8230; Loading location&#8230; 00:00:00 Next Prayer In &#8211;:&#8211;:&#8211; Weekly Prayer Times Monthly Prayer Times Date Fajr Sunrise Dhuhr Asr Maghrib Isha Date Fajr Sunrise Dhuhr Asr Maghrib Isha<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"footnotes":""},"class_list":["post-2011","page","type-page","status-publish","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/pages\/2011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/comments?post=2011"}],"version-history":[{"count":91,"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/pages\/2011\/revisions"}],"predecessor-version":[{"id":5449,"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/pages\/2011\/revisions\/5449"}],"wp:attachment":[{"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/media?parent=2011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}