{"id":16751,"date":"2026-04-17T22:00:16","date_gmt":"2026-04-17T19:00:16","guid":{"rendered":"https:\/\/arzaq.org.sa\/?page_id=16751"},"modified":"2026-04-17T22:00:21","modified_gmt":"2026-04-17T19:00:21","slug":"%d9%84%d9%88%d8%ad%d8%a9-%d9%85%d8%a4%d8%b4%d8%b1%d8%a7%d8%aa-%d8%a7%d9%84%d8%b9%d8%b7%d8%a7%d8%a1-%d9%84%d8%ac%d9%85%d8%b9%d9%8a%d8%a9-%d8%a3%d8%b1%d8%b2%d8%a7%d9%82","status":"publish","type":"page","link":"https:\/\/arzaq.org.sa\/?page_id=16751","title":{"rendered":"\u0644\u0648\u062d\u0629 \u0645\u0624\u0634\u0631\u0627\u062a \u0627\u0644\u0639\u0637\u0627\u0621 \u0644\u062c\u0645\u0639\u064a\u0629 \u0623\u0631\u0632\u0627\u0642"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\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.4.0\/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 { --primary: #27ae60; --dark: #1e272e; --accent: #f1c40f; --bg: #f4f7f6; }\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 #loader { text-align: center; padding: 100px; }\r\n .spinner { width: 60px; height: 60px; border: 6px solid #ddd; border-top-color: var(--primary); border-radius: 50%; animation: spin 1s infinite linear; margin: auto; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n .header-main { background: linear-gradient(135deg, #1e272e 0%, #27ae60 100%); color: white; padding: clamp(30px, 5vw, 50px); border-radius: 25px; text-align: center; box-shadow: 0 15px 35px rgba(39, 174, 96, 0.2); margin-bottom: 30px; }\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); }\r\n .eco-box { background: white; border-radius: 24px; padding: clamp(25px, 5vw, 45px); border-right: 15px solid var(--accent); display: flex; justify-content: space-between; align-items: center; margin-bottom: 35px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); min-height: 200px; }\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(--primary); font-weight: 800; background: #eef9f1; padding: 8px 22px; border-radius: 12px; display: inline-block; }\r\n .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 40px; }\r\n .card { background: white; padding: 30px; border-radius: 22px; text-align: center; box-shadow: 0 8px 15px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.05); transition: 0.3s ease; }\r\n .card:hover { transform: translateY(-10px); }\r\n .card i { font-size: 3rem; color: var(--primary); margin-bottom: 20px; }\r\n .year-val { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 900; color: var(--dark); display: block; line-height: 1.2; }\r\n .month-label { font-size: 1rem; color: #fff; background: var(--primary); padding: 6px 16px; border-radius: 10px; display: inline-block; margin-top: 15px; font-weight: 700; }\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 <\/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);\">\u062c\u0627\u0631\u064a \u062c\u0644\u0628 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0628\u062f\u0642\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-sack-dollar fa-5x\" style=\"color: var(--accent); opacity: 0.2;\"><\/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;\"><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 mapping = [\r\n { label: \"\u0627\u0644\u0635\u062d\u0648\u0646\", idx: 3, icon: 'fa-plate-wheat' },\r\n { label: \"\u0627\u0644\u0648\u062c\u0628\u0627\u062a\", idx: 4, icon: 'fa-utensils' },\r\n { label: \"\u0631\u0633\u0648\u0645 \u0627\u0644\u062e\u062f\u0645\u0629\", idx: 5, icon: 'fa-receipt' },\r\n { label: \"\u0643\u0641\u0627\u0631\u0627\u062a \u064a\u0645\u064a\u0646\", idx: 7, icon: 'fa-hand-holding-heart' },\r\n { label: \"\u0633\u0642\u064a\u0627 \u0627\u0644\u0645\u0627\u0621\", idx: 8, icon: 'fa-faucet-drip' },\r\n { label: \"\u0648\u062c\u0628\u0627\u062a \u0625\u0641\u0637\u0627\u0631\", idx: 9, icon: 'fa-moon' },\r\n { label: \"\u0643\u0631\u062a\u0648\u0646 \u062e\u0636\u0627\u0631\", idx: 10, icon: 'fa-apple-whole' },\r\n { label: \"\u0627\u0644\u0623\u0633\u0631 \u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f\u0629\", idx: 11, icon: 'fa-users' },\r\n { label: \"\u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0627\u062a\", idx: 13, icon: 'fa-star' }\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 data = res.data.filter(r => r.length > 5);\r\n \r\n \/\/ --- \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0647\u0646\u0627 \u0644\u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 ---\r\n \/\/ \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0637\u0644\u0628\u0643\u060c \u0639\u0643\u0633\u0646\u0627 \u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0635\u0641\u0648\u0641 \u0644\u064a\u062a\u0646\u0627\u0633\u0628 \u0645\u0639 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646\r\n let yearlyData = data[data.length - 2]; \/\/ \u0627\u0644\u0622\u0646 \u064a\u0623\u062e\u0630 \u0627\u0644\u0635\u0641 \u0642\u0628\u0644 \u0627\u0644\u0623\u062e\u064a\u0631 \u0644\u0644\u0633\u0646\u0629\r\n let monthlyData = data[data.length - 1]; \/\/ \u0627\u0644\u0622\u0646 \u064a\u0623\u062e\u0630 \u0627\u0644\u0635\u0641 \u0627\u0644\u0623\u062e\u064a\u0631 \u0644\u0644\u0634\u0647\u0631\r\n \/\/ ---------------------------------\r\n\r\n renderUI(yearlyData, monthlyData);\r\n }\r\n });\r\n\r\n function renderUI(y, m) {\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 data: mapping.map(i => cleanNum(y[i.idx])),\r\n backgroundColor: '#27ae60cc',\r\n borderRadius: 12\r\n }]\r\n },\r\n options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }\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 \u062c\u0627\u0631\u064a \u062c\u0644\u0628 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0628\u062f\u0642\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":3,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16751\/revisions"}],"predecessor-version":[{"id":16755,"href":"https:\/\/arzaq.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/16751\/revisions\/16755"}],"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}]}}