\u0644\u0648\u062d\u0629 \u0625\u0646\u062c\u0627\u0632\u0627\u062a \u062c\u0645\u0639\u064a\u0629 \u0623\u0631\u0632\u0627\u0642 2026<\/title>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700;800;900&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/PapaParse\/5.3.2\/papaparse.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n\r\n <style>\r\n :root { \r\n --primary: #1a637e; \/* \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0627\u0644\u062c\u062f\u064a\u062f *\/\r\n --secondary: #18a37a; \/* \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0641\u0631\u0639\u064a \u0627\u0644\u062c\u062f\u064a\u062f *\/\r\n --dark: #103a4a; \r\n --accent: #f1c40f; \r\n --bg: #f0f4f7; \r\n }\r\n \r\n body { font-family: 'Tajawal', sans-serif; background: var(--bg); margin: 0; padding: clamp(10px, 3vw, 30px); color: var(--dark); overflow-x: hidden; }\r\n .container { max-width: 1400px; margin: auto; }\r\n \r\n #loader { text-align: center; padding: 100px; }\r\n .spinner { width: 60px; height: 60px; border: 6px solid #ddd; border-top-color: var(--secondary); border-radius: 50%; animation: spin 1s infinite linear; margin: auto; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n \/* \u0627\u0644\u0647\u064a\u062f\u0631 \u0627\u0644\u0645\u0637\u0648\u0631 \u0628\u0627\u0644\u062a\u062f\u0631\u062c \u0627\u0644\u062c\u062f\u064a\u062f *\/\r\n .header-main { \r\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); \r\n padding: clamp(30px, 5vw, 50px); \r\n border-radius: 25px; \r\n text-align: center; \r\n box-shadow: 0 15px 35px rgba(26, 99, 126, 0.25); \r\n margin-bottom: 30px; \r\n }\r\n .header-main h1 { \r\n color: #ffffff !important; \r\n font-size: clamp(1.5rem, 4vw, 2.8rem); \r\n margin: 0; \r\n font-weight: 900;\r\n text-shadow: 0 3px 10px rgba(0,0,0,0.2);\r\n }\r\n\r\n .today-badge { background: var(--accent); color: var(--dark); padding: 10px 25px; border-radius: 50px; font-weight: 800; display: inline-block; margin-top: 20px; font-size: clamp(0.9rem, 2vw, 1.3rem); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }\r\n\r\n \/* \u0635\u0646\u062f\u0648\u0642 \u0627\u0644\u0639\u0627\u0626\u062f \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a *\/\r\n .eco-box { \r\n background: white; \r\n border-radius: 24px; \r\n padding: clamp(25px, 5vw, 45px); \r\n border-right: 15px solid var(--accent); \r\n display: flex; \r\n justify-content: space-between; \r\n align-items: center; \r\n margin-bottom: 35px; \r\n box-shadow: 0 12px 30px rgba(26, 99, 126, 0.08); \r\n min-height: 200px; \r\n }\r\n .eco-val { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 900; color: var(--primary); line-height: 1.4; margin: 10px 0; display: block; }\r\n .eco-sub { color: var(--secondary); font-weight: 800; background: #e8f6f2; padding: 8px 22px; border-radius: 12px; display: inline-block; }\r\n \r\n .pulse-icon { color: var(--accent); opacity: 0.3; animation: iconPulse 2s infinite ease-in-out; }\r\n\r\n \/* \u0627\u0644\u0643\u0631\u0648\u062a \u0648\u0627\u0644\u0634\u0628\u0643\u0629 \u0627\u0644\u0625\u062d\u0635\u0627\u0626\u064a\u0629 *\/\r\n .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 40px; }\r\n .card { \r\n background: white; \r\n padding: 30px; \r\n border-radius: 22px; \r\n text-align: center; \r\n box-shadow: 0 8px 20px rgba(26, 99, 126, 0.04); \r\n border: 1px solid rgba(26, 99, 126, 0.05); \r\n transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); \r\n }\r\n .card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(26, 99, 126, 0.12); border-color: var(--secondary); }\r\n \r\n .card i { \r\n font-size: 3.5rem; \r\n color: var(--secondary); \r\n margin-bottom: 20px; \r\n display: inline-block;\r\n animation: iconFloat 3s infinite ease-in-out;\r\n }\r\n\r\n .year-val { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 900; color: var(--primary); display: block; line-height: 1.2; }\r\n .month-label { font-size: 1rem; color: #fff; background: var(--secondary); padding: 6px 16px; border-radius: 10px; display: inline-block; margin-top: 15px; font-weight: 700; }\r\n\r\n .charts-section { background: white; padding: 30px; border-radius: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-bottom: 50px; }\r\n\r\n \/* \u0627\u0644\u062d\u0631\u0643\u0627\u062a *\/\r\n @keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }\r\n @keyframes iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n <div id=\"loader\">\r\n <div class=\"spinner\"><\/div>\r\n <p style=\"margin-top:20px; font-weight: bold; color: var(--primary);\">\u062a\u062d\u062f\u064a\u062b \u0644\u0648\u062d\u0629 \u0627\u0644\u0625\u0628\u062f\u0627\u0639 \u0628\u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u062c\u062f\u064a\u062f\u0629...<\/p>\r\n <\/div>\r\n\r\n <div id=\"dashboard\" style=\"display:none\">\r\n <header class=\"header-main\">\r\n <h1>\u0644\u0648\u062d\u0629 \u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u062c\u0645\u0639\u064a\u0629 \u0623\u0631\u0632\u0627\u0642 \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/h1>\r\n <div id=\"todayDisplay\" class=\"today-badge\"><\/div>\r\n <\/header>\r\n\r\n <div class=\"eco-box\">\r\n <div>\r\n <span style=\"color:#7f8c8d; font-weight:bold; font-size:1.2rem;\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0639\u0627\u0626\u062f \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a \u0644\u0639\u0627\u0645 2026<\/span>\r\n <div class=\"eco-val\" id=\"ecoYear\">0<\/div>\r\n <div class=\"eco-sub\" id=\"ecoMonthText\">\u0623\u062b\u0631 \u0627\u0644\u0639\u0645\u0644 \u062e\u0644\u0627\u0644 \u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u062d\u0627\u0644\u064a: 0<\/div>\r\n <\/div>\r\n <i class=\"fas fa-hand-holding-dollar fa-6x pulse-icon\"><\/i>\r\n <\/div>\r\n\r\n <div class=\"stats-grid\" id=\"grid\"><\/div>\r\n\r\n <div class=\"charts-section\">\r\n <h3 style=\"margin-top:0; color: var(--primary);\"><i class=\"fas fa-chart-line\"><\/i> \u062a\u062d\u0644\u064a\u0644 \u0645\u0624\u0634\u0631\u0627\u062a \u0627\u0644\u0623\u062f\u0627\u0621 \u0627\u0644\u0633\u0646\u0648\u064a\u0629<\/h3>\r\n <div style=\"height: 450px; position: relative;\"><canvas id=\"barChart\"><\/canvas><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const csvUrl = 'https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTbfrrrBbbvy7j5KuPeBTVvz90ahvSnvXfC2pd04KT4yBzMTb1zRUl657_0akf9WBcdxD7l2wnqufZH\/pub?output=csv';\r\n\r\n const iconDictionary = [\r\n { key: \"\u0635\u062d\u0648\u0646\", icon: \"fa-plate-wheat\" },\r\n { key: \"\u0648\u062c\u0628\u0627\u062a\", icon: \"fa-bowl-food\" },\r\n { key: \"\u0631\u0633\u0648\u0645\", icon: \"fa-receipt\" },\r\n { key: \"\u0643\u0641\u0627\u0631\u0627\u062a\", icon: \"fa-hand-holding-heart\" },\r\n { key: \"\u0645\u0627\u0621\", icon: \"fa-faucet-drip\" },\r\n { key: \"\u0625\u0641\u0637\u0627\u0631\", icon: \"fa-moon\" },\r\n { key: \"\u062e\u0636\u0627\u0631\", icon: \"fa-carrot\" },\r\n { key: \"\u0623\u0633\u0631\", icon: \"fa-house-chimney-heart\" },\r\n { key: \"\u0645\u0646\u0627\u0633\u0628\u0627\u062a\", icon: \"fa-calendar-check\" },\r\n { key: \"\u0643\u0633\u0648\u0629\", icon: \"fa-shirt\" },\r\n { key: \"\u0633\u0644\u0629\", icon: \"fa-basket-shopping\" },\r\n { key: \"\u0639\u0627\u0626\u062f\", icon: \"fa-money-bill-trend-up\" },\r\n { key: \"\u0633\u0627\u0639\u0627\u062a\", icon: \"fa-user-clock\" },\r\n { key: \"\u0645\u062a\u0637\u0648\u0639\u064a\u0646\", icon: \"fa-people-group\" },\r\n { key: \"\u0641\u0631\u0635\", icon: \"fa-hands-helping\" }\r\n ];\r\n\r\n function getIcon(headerText) {\r\n const text = headerText.toLowerCase();\r\n const found = iconDictionary.find(item => text.includes(item.key));\r\n return found ? found.icon : \"fa-circle-check\";\r\n }\r\n\r\n document.getElementById('todayDisplay').innerText = \"\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u064a\u0648\u0645: \" + new Date().toLocaleDateString('ar-SA', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });\r\n\r\n function cleanNum(v) { return parseFloat(v?.toString().replace(\/[^\\d.]\/g, '')) || 0; }\r\n\r\n Papa.parse(csvUrl, {\r\n download: true,\r\n complete: function(res) {\r\n const headers = res.data[0]; \r\n const rows = res.data.filter(r => r.length > 5);\r\n if(rows.length < 2) return;\r\n\r\n let yearlyData = rows[rows.length - 2]; \r\n let monthlyData = rows[rows.length - 1]; \r\n\r\n const dynamicMapping = [];\r\n for(let i = 3; i < headers.length; i++) {\r\n if(i === 6 || i === 12 || !headers[i] || headers[i].trim() === \"\") continue; \r\n dynamicMapping.push({\r\n label: headers[i].trim(),\r\n idx: i,\r\n icon: getIcon(headers[i])\r\n });\r\n }\r\n renderUI(yearlyData, monthlyData, dynamicMapping);\r\n }\r\n });\r\n\r\n function renderUI(y, m, mapping) {\r\n document.getElementById('loader').style.display = 'none';\r\n document.getElementById('dashboard').style.display = 'block';\r\n\r\n document.getElementById('ecoYear').innerText = cleanNum(y[12]).toLocaleString('en-US') + \" \u0631\u064a\u0627\u0644\";\r\n document.getElementById('ecoMonthText').innerText = \"\u0623\u062b\u0631 \u0627\u0644\u0639\u0645\u0644 \u062e\u0644\u0627\u0644 \u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u062d\u0627\u0644\u064a: \" + cleanNum(m[12]).toLocaleString('en-US') + \" \u0631\u064a\u0627\u0644\";\r\n\r\n const grid = document.getElementById('grid');\r\n grid.innerHTML = '';\r\n\r\n mapping.forEach(item => {\r\n grid.innerHTML += `\r\n <div class=\"card\">\r\n <i class=\"fas ${item.icon}\"><\/i>\r\n <h3 style=\"color:#7f8c8d; font-size:1.1rem; margin-bottom:10px;\">\u0625\u062c\u0645\u0627\u0644\u064a ${item.label}<\/h3>\r\n <span class=\"year-val\">${cleanNum(y[item.idx]).toLocaleString('en-US')}<\/span>\r\n <span class=\"month-label\">\u062e\u0644\u0627\u0644 \u0627\u0644\u0634\u0647\u0631: ${cleanNum(m[item.idx]).toLocaleString('en-US')}<\/span>\r\n <\/div>\r\n `;\r\n });\r\n\r\n new Chart(document.getElementById('barChart'), {\r\n type: 'bar',\r\n data: {\r\n labels: mapping.map(i => i.label),\r\n datasets: [{\r\n label: '\u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0633\u0646\u0648\u064a\u0629',\r\n data: mapping.map(i => cleanNum(y[i.idx])),\r\n backgroundColor: '#18a37acc', \/\/ \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0641\u0631\u0639\u064a \u0641\u064a \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\r\n hoverBackgroundColor: '#1a637e',\r\n borderRadius: 12\r\n }]\r\n },\r\n options: { \r\n responsive: true, \r\n maintainAspectRatio: false, \r\n plugins: { legend: { display: false } },\r\n scales: {\r\n x: { ticks: { color: '#1a637e', font: { weight: 'bold' } } },\r\n y: { ticks: { color: '#1a637e' } }\r\n }\r\n }\r\n });\r\n }\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0644\u0648\u062d\u0629 \u0625\u0646\u062c\u0627\u0632\u0627\u062a \u062c\u0645\u0639\u064a\u0629 \u0623\u0631\u0632\u0627\u0642 2026 \u062a\u062d\u062f\u064a\u062b \u0644\u0648\u062d\u0629 \u0627\u0644\u0625\u0628\u062f\u0627\u0639 \u0628\u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u062c\u062f\u064a\u062f\u0629… \u0644\u0648\u062d\u0629 \u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u062c\u0645\u0639\u064a\u0629 \u0623\u0631\u0632\u0627\u0642 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0639\u0627\u0626\u062f \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a \u0644\u0639\u0627\u0645 2026 0 \u0623\u062b\u0631 \u0627\u0644\u0639\u0645\u0644 \u062e\u0644\u0627\u0644 \u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u062d\u0627\u0644\u064a: 0 \u062a\u062d\u0644\u064a\u0644 \u0645\u0624\u0634\u0631\u0627\u062a \u0627\u0644\u0623\u062f\u0627\u0621 \u0627\u0644\u0633\u0646\u0648\u064a\u0629<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16751","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16751"}],"version-history":[{"count":60,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16751\/revisions"}],"predecessor-version":[{"id":16829,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16751\/revisions\/16829"}],"wp:attachment":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0644\u0648\u062d\u0629 \u0625\u0646\u062c\u0627\u0632\u0627\u062a \u062c\u0645\u0639\u064a\u0629 \u0623\u0631\u0632\u0627\u0642 2026<\/title>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700;800;900&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/PapaParse\/5.3.2\/papaparse.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n\r\n <style>\r\n :root { \r\n --primary: #1a637e; \/* \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0627\u0644\u062c\u062f\u064a\u062f *\/\r\n --secondary: #18a37a; \/* \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0641\u0631\u0639\u064a \u0627\u0644\u062c\u062f\u064a\u062f *\/\r\n --dark: #103a4a; \r\n --accent: #f1c40f; \r\n --bg: #f0f4f7; \r\n }\r\n \r\n body { font-family: 'Tajawal', sans-serif; background: var(--bg); margin: 0; padding: clamp(10px, 3vw, 30px); color: var(--dark); overflow-x: hidden; }\r\n .container { max-width: 1400px; margin: auto; }\r\n \r\n #loader { text-align: center; padding: 100px; }\r\n .spinner { width: 60px; height: 60px; border: 6px solid #ddd; border-top-color: var(--secondary); border-radius: 50%; animation: spin 1s infinite linear; margin: auto; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n \/* \u0627\u0644\u0647\u064a\u062f\u0631 \u0627\u0644\u0645\u0637\u0648\u0631 \u0628\u0627\u0644\u062a\u062f\u0631\u062c \u0627\u0644\u062c\u062f\u064a\u062f *\/\r\n .header-main { \r\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); \r\n padding: clamp(30px, 5vw, 50px); \r\n border-radius: 25px; \r\n text-align: center; \r\n box-shadow: 0 15px 35px rgba(26, 99, 126, 0.25); \r\n margin-bottom: 30px; \r\n }\r\n .header-main h1 { \r\n color: #ffffff !important; \r\n font-size: clamp(1.5rem, 4vw, 2.8rem); \r\n margin: 0; \r\n font-weight: 900;\r\n text-shadow: 0 3px 10px rgba(0,0,0,0.2);\r\n }\r\n\r\n .today-badge { background: var(--accent); color: var(--dark); padding: 10px 25px; border-radius: 50px; font-weight: 800; display: inline-block; margin-top: 20px; font-size: clamp(0.9rem, 2vw, 1.3rem); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }\r\n\r\n \/* \u0635\u0646\u062f\u0648\u0642 \u0627\u0644\u0639\u0627\u0626\u062f \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a *\/\r\n .eco-box { \r\n background: white; \r\n border-radius: 24px; \r\n padding: clamp(25px, 5vw, 45px); \r\n border-right: 15px solid var(--accent); \r\n display: flex; \r\n justify-content: space-between; \r\n align-items: center; \r\n margin-bottom: 35px; \r\n box-shadow: 0 12px 30px rgba(26, 99, 126, 0.08); \r\n min-height: 200px; \r\n }\r\n .eco-val { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 900; color: var(--primary); line-height: 1.4; margin: 10px 0; display: block; }\r\n .eco-sub { color: var(--secondary); font-weight: 800; background: #e8f6f2; padding: 8px 22px; border-radius: 12px; display: inline-block; }\r\n \r\n .pulse-icon { color: var(--accent); opacity: 0.3; animation: iconPulse 2s infinite ease-in-out; }\r\n\r\n \/* \u0627\u0644\u0643\u0631\u0648\u062a \u0648\u0627\u0644\u0634\u0628\u0643\u0629 \u0627\u0644\u0625\u062d\u0635\u0627\u0626\u064a\u0629 *\/\r\n .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 40px; }\r\n .card { \r\n background: white; \r\n padding: 30px; \r\n border-radius: 22px; \r\n text-align: center; \r\n box-shadow: 0 8px 20px rgba(26, 99, 126, 0.04); \r\n border: 1px solid rgba(26, 99, 126, 0.05); \r\n transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); \r\n }\r\n .card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(26, 99, 126, 0.12); border-color: var(--secondary); }\r\n \r\n .card i { \r\n font-size: 3.5rem; \r\n color: var(--secondary); \r\n margin-bottom: 20px; \r\n display: inline-block;\r\n animation: iconFloat 3s infinite ease-in-out;\r\n }\r\n\r\n .year-val { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 900; color: var(--primary); display: block; line-height: 1.2; }\r\n .month-label { font-size: 1rem; color: #fff; background: var(--secondary); padding: 6px 16px; border-radius: 10px; display: inline-block; margin-top: 15px; font-weight: 700; }\r\n\r\n .charts-section { background: white; padding: 30px; border-radius: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-bottom: 50px; }\r\n\r\n \/* \u0627\u0644\u062d\u0631\u0643\u0627\u062a *\/\r\n @keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }\r\n @keyframes iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n <div id=\"loader\">\r\n <div class=\"spinner\"><\/div>\r\n <p style=\"margin-top:20px; font-weight: bold; color: var(--primary);\">\u062a\u062d\u062f\u064a\u062b \u0644\u0648\u062d\u0629 \u0627\u0644\u0625\u0628\u062f\u0627\u0639 \u0628\u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u062c\u062f\u064a\u062f\u0629...<\/p>\r\n <\/div>\r\n\r\n <div id=\"dashboard\" style=\"display:none\">\r\n <header class=\"header-main\">\r\n <h1>\u0644\u0648\u062d\u0629 \u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u062c\u0645\u0639\u064a\u0629 \u0623\u0631\u0632\u0627\u0642 \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/h1>\r\n <div id=\"todayDisplay\" class=\"today-badge\"><\/div>\r\n <\/header>\r\n\r\n <div class=\"eco-box\">\r\n <div>\r\n <span style=\"color:#7f8c8d; font-weight:bold; font-size:1.2rem;\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0639\u0627\u0626\u062f \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a \u0644\u0639\u0627\u0645 2026<\/span>\r\n <div class=\"eco-val\" id=\"ecoYear\">0<\/div>\r\n <div class=\"eco-sub\" id=\"ecoMonthText\">\u0623\u062b\u0631 \u0627\u0644\u0639\u0645\u0644 \u062e\u0644\u0627\u0644 \u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u062d\u0627\u0644\u064a: 0<\/div>\r\n <\/div>\r\n <i class=\"fas fa-hand-holding-dollar fa-6x pulse-icon\"><\/i>\r\n <\/div>\r\n\r\n <div class=\"stats-grid\" id=\"grid\"><\/div>\r\n\r\n <div class=\"charts-section\">\r\n <h3 style=\"margin-top:0; color: var(--primary);\"><i class=\"fas fa-chart-line\"><\/i> \u062a\u062d\u0644\u064a\u0644 \u0645\u0624\u0634\u0631\u0627\u062a \u0627\u0644\u0623\u062f\u0627\u0621 \u0627\u0644\u0633\u0646\u0648\u064a\u0629<\/h3>\r\n <div style=\"height: 450px; position: relative;\"><canvas id=\"barChart\"><\/canvas><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const csvUrl = 'https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTbfrrrBbbvy7j5KuPeBTVvz90ahvSnvXfC2pd04KT4yBzMTb1zRUl657_0akf9WBcdxD7l2wnqufZH\/pub?output=csv';\r\n\r\n const iconDictionary = [\r\n { key: \"\u0635\u062d\u0648\u0646\", icon: \"fa-plate-wheat\" },\r\n { key: \"\u0648\u062c\u0628\u0627\u062a\", icon: \"fa-bowl-food\" },\r\n { key: \"\u0631\u0633\u0648\u0645\", icon: \"fa-receipt\" },\r\n { key: \"\u0643\u0641\u0627\u0631\u0627\u062a\", icon: \"fa-hand-holding-heart\" },\r\n { key: \"\u0645\u0627\u0621\", icon: \"fa-faucet-drip\" },\r\n { key: \"\u0625\u0641\u0637\u0627\u0631\", icon: \"fa-moon\" },\r\n { key: \"\u062e\u0636\u0627\u0631\", icon: \"fa-carrot\" },\r\n { key: \"\u0623\u0633\u0631\", icon: \"fa-house-chimney-heart\" },\r\n { key: \"\u0645\u0646\u0627\u0633\u0628\u0627\u062a\", icon: \"fa-calendar-check\" },\r\n { key: \"\u0643\u0633\u0648\u0629\", icon: \"fa-shirt\" },\r\n { key: \"\u0633\u0644\u0629\", icon: \"fa-basket-shopping\" },\r\n { key: \"\u0639\u0627\u0626\u062f\", icon: \"fa-money-bill-trend-up\" },\r\n { key: \"\u0633\u0627\u0639\u0627\u062a\", icon: \"fa-user-clock\" },\r\n { key: \"\u0645\u062a\u0637\u0648\u0639\u064a\u0646\", icon: \"fa-people-group\" },\r\n { key: \"\u0641\u0631\u0635\", icon: \"fa-hands-helping\" }\r\n ];\r\n\r\n function getIcon(headerText) {\r\n const text = headerText.toLowerCase();\r\n const found = iconDictionary.find(item => text.includes(item.key));\r\n return found ? found.icon : \"fa-circle-check\";\r\n }\r\n\r\n document.getElementById('todayDisplay').innerText = \"\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u064a\u0648\u0645: \" + new Date().toLocaleDateString('ar-SA', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });\r\n\r\n function cleanNum(v) { return parseFloat(v?.toString().replace(\/[^\\d.]\/g, '')) || 0; }\r\n\r\n Papa.parse(csvUrl, {\r\n download: true,\r\n complete: function(res) {\r\n const headers = res.data[0]; \r\n const rows = res.data.filter(r => r.length > 5);\r\n if(rows.length < 2) return;\r\n\r\n let yearlyData = rows[rows.length - 2]; \r\n let monthlyData = rows[rows.length - 1]; \r\n\r\n const dynamicMapping = [];\r\n for(let i = 3; i < headers.length; i++) {\r\n if(i === 6 || i === 12 || !headers[i] || headers[i].trim() === \"\") continue; \r\n dynamicMapping.push({\r\n label: headers[i].trim(),\r\n idx: i,\r\n icon: getIcon(headers[i])\r\n });\r\n }\r\n renderUI(yearlyData, monthlyData, dynamicMapping);\r\n }\r\n });\r\n\r\n function renderUI(y, m, mapping) {\r\n document.getElementById('loader').style.display = 'none';\r\n document.getElementById('dashboard').style.display = 'block';\r\n\r\n document.getElementById('ecoYear').innerText = cleanNum(y[12]).toLocaleString('en-US') + \" \u0631\u064a\u0627\u0644\";\r\n document.getElementById('ecoMonthText').innerText = \"\u0623\u062b\u0631 \u0627\u0644\u0639\u0645\u0644 \u062e\u0644\u0627\u0644 \u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u062d\u0627\u0644\u064a: \" + cleanNum(m[12]).toLocaleString('en-US') + \" \u0631\u064a\u0627\u0644\";\r\n\r\n const grid = document.getElementById('grid');\r\n grid.innerHTML = '';\r\n\r\n mapping.forEach(item => {\r\n grid.innerHTML += `\r\n <div class=\"card\">\r\n <i class=\"fas ${item.icon}\"><\/i>\r\n <h3 style=\"color:#7f8c8d; font-size:1.1rem; margin-bottom:10px;\">\u0625\u062c\u0645\u0627\u0644\u064a ${item.label}<\/h3>\r\n <span class=\"year-val\">${cleanNum(y[item.idx]).toLocaleString('en-US')}<\/span>\r\n <span class=\"month-label\">\u062e\u0644\u0627\u0644 \u0627\u0644\u0634\u0647\u0631: ${cleanNum(m[item.idx]).toLocaleString('en-US')}<\/span>\r\n <\/div>\r\n `;\r\n });\r\n\r\n new Chart(document.getElementById('barChart'), {\r\n type: 'bar',\r\n data: {\r\n labels: mapping.map(i => i.label),\r\n datasets: [{\r\n label: '\u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0633\u0646\u0648\u064a\u0629',\r\n data: mapping.map(i => cleanNum(y[i.idx])),\r\n backgroundColor: '#18a37acc', \/\/ \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0641\u0631\u0639\u064a \u0641\u064a \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\r\n hoverBackgroundColor: '#1a637e',\r\n borderRadius: 12\r\n }]\r\n },\r\n options: { \r\n responsive: true, \r\n maintainAspectRatio: false, \r\n plugins: { legend: { display: false } },\r\n scales: {\r\n x: { ticks: { color: '#1a637e', font: { weight: 'bold' } } },\r\n y: { ticks: { color: '#1a637e' } }\r\n }\r\n }\r\n });\r\n }\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0644\u0648\u062d\u0629 \u0625\u0646\u062c\u0627\u0632\u0627\u062a \u062c\u0645\u0639\u064a\u0629 \u0623\u0631\u0632\u0627\u0642 2026 \u062a\u062d\u062f\u064a\u062b \u0644\u0648\u062d\u0629 \u0627\u0644\u0625\u0628\u062f\u0627\u0639 \u0628\u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u062c\u062f\u064a\u062f\u0629… \u0644\u0648\u062d\u0629 \u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u062c\u0645\u0639\u064a\u0629 \u0623\u0631\u0632\u0627\u0642 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0639\u0627\u0626\u062f \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a \u0644\u0639\u0627\u0645 2026 0 \u0623\u062b\u0631 \u0627\u0644\u0639\u0645\u0644 \u062e\u0644\u0627\u0644 \u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u062d\u0627\u0644\u064a: 0 \u062a\u062d\u0644\u064a\u0644 \u0645\u0624\u0634\u0631\u0627\u062a \u0627\u0644\u0623\u062f\u0627\u0621 \u0627\u0644\u0633\u0646\u0648\u064a\u0629<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16751","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16751"}],"version-history":[{"count":60,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16751\/revisions"}],"predecessor-version":[{"id":16829,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16751\/revisions\/16829"}],"wp:attachment":[{"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}