\u0627\u0644\u0641\u0636\u064a\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628: \u062a\u062d\u0644\u064a\u0644 \u0648\u062a\u0648\u0642\u0639\u0627\u062a<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n \n \n <script src=\"https:\/\/cdn.plot.ly\/plotly-2.27.0.min.js\"><\/script>\n\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;600;700;900&display=swap\" rel=\"stylesheet\">\n\n <style>\n body {\n font-family: 'Cairo', sans-serif;\n background-color: #F0F4F8; \/* Light Blue-Grey Background *\/\n color: #102A43;\n }\n\n \/* Custom Scrollbar *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n ::-webkit-scrollbar-thumb {\n background: #334E68;\n border-radius: 4px;\n }\n\n \/* Chart Container Rules (Strict Adherence) *\/\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 650px; \/* Max width constraint *\/\n margin-left: auto;\n margin-right: auto;\n height: 350px; \/* Base height *\/\n max-height: 400px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n @media (max-width: 768px) {\n .chart-container {\n height: 300px;\n }\n }\n\n \/* Material Design Cards *\/\n .card {\n background: white;\n border-radius: 12px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: transform 0.2s, box-shadow 0.2s;\n }\n .card:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n\n \/* Palette Classes *\/\n .text-brand-primary { color: #005694; } \/* Deep Blue *\/\n .bg-brand-primary { background-color: #005694; }\n .text-brand-accent { color: #FFB300; } \/* Amber *\/\n .bg-brand-accent { background-color: #FFB300; }\n .text-brand-success { color: #007E33; } \/* Green *\/\n .text-brand-danger { color: #CC0000; } \/* Red *\/\n\n \/* Gradient Text *\/\n .gradient-text {\n background: linear-gradient(45deg, #005694, #00A8E8);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n <\/style>\n \n \n<\/head>\n<body class=\"antialiased\">\n\n \n <header class=\"bg-gradient-to-r from-[#005694] to-[#003c69] text-white py-12 shadow-lg mb-8\">\n <div class=\"container mx-auto px-4 text-center\">\n <h1 class=\"text-4xl md:text-6xl font-black mb-4 leading-tight\">\u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628<\/h1>\n <p class=\"text-xl md:text-2xl font-light opacity-90 max-w-3xl mx-auto\">\n \u0628\u064a\u0646 \u062a\u062d\u062f\u064a\u0627\u062a \u0627\u0644\u062a\u063a\u064a\u0631 \u0627\u0644\u0645\u0646\u0627\u062e\u064a \u0648\u0641\u0631\u0635 \u0625\u0646\u0639\u0627\u0634 \u0627\u0644\u0641\u0631\u0634\u0629 \u0627\u0644\u0645\u0627\u0626\u064a\u0629: \u062a\u062d\u0644\u064a\u0644 \u0634\u0627\u0645\u0644 \u0644\u0644\u0648\u0636\u0639 \u0627\u0644\u0631\u0627\u0647\u0646 \u0648\u0627\u0644\u062a\u0648\u0642\u0639\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629\n <\/p>\n <div class=\"mt-8 flex justify-center gap-4 text-sm font-semibold\">\n <span class=\"bg-white\/20 backdrop-blur-md px-4 py-2 rounded-full\">\ud83c\udf27\ufe0f \u062a\u0633\u0627\u0642\u0637\u0627\u062a \u0642\u064a\u0627\u0633\u064a\u0629<\/span>\n <span class=\"bg-white\/20 backdrop-blur-md px-4 py-2 rounded-full\">\ud83c\udf0a \u0645\u0644\u0621 \u0627\u0644\u0633\u062f\u0648\u062f<\/span>\n <span class=\"bg-white\/20 backdrop-blur-md px-4 py-2 rounded-full\">\ud83d\ude9c \u062a\u062d\u062f\u064a\u0627\u062a \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629<\/span>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"container mx-auto px-4 pb-12\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8\">\n\n \n <div class=\"lg:col-span-12 card p-8 border-r-8 border-[#005694]\">\n <h2 class=\"text-3xl font-bold mb-4 text-brand-primary\">\u0633\u064a\u0627\u0642 \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0645\u0646\u0627\u062e\u064a<\/h2>\n <p class=\"text-gray-700 text-lg leading-relaxed mb-4\">\n \u0634\u0647\u062f \u0627\u0644\u0645\u063a\u0631\u0628 \u0641\u064a \u0627\u0644\u0622\u0648\u0646\u0629 \u0627\u0644\u0623\u062e\u064a\u0631\u0629\u060c \u0648\u062e\u0627\u0635\u0629 \u0641\u064a \u0634\u062a\u0646\u0628\u0631 2024\u060c \u0638\u0648\u0627\u0647\u0631 \u0645\u0646\u0627\u062e\u064a\u0629 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629 \u062a\u0645\u062b\u0644\u062a \u0641\u064a \u0647\u0637\u0648\u0644 \u0623\u0645\u0637\u0627\u0631 \u0637\u0648\u0641\u0627\u0646\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u062c\u0646\u0648\u0628\u064a\u0629 \u0627\u0644\u0634\u0631\u0642\u064a\u0629 (\u0637\u0627\u0637\u0627\u060c \u0648\u0631\u0632\u0627\u0632\u0627\u062a\u060c \u0627\u0644\u0631\u0627\u0634\u064a\u062f\u064a\u0629). \u0647\u0630\u0647 \u0627\u0644\u0638\u0648\u0627\u0647\u0631 \u0644\u064a\u0633\u062a \u0645\u0639\u0632\u0648\u0644\u0629\u060c \u0628\u0644 \u062a\u0639\u0643\u0633 \u062a\u062d\u0648\u0644\u0627\u064b \u0641\u064a \u0645\u0648\u0642\u0639 “\u0627\u0644\u062c\u0628\u0647\u0629 \u0627\u0644\u0645\u062f\u0627\u0631\u064a\u0629” (ITCZ)\u060c \u0645\u0645\u0627 \u064a\u062f\u0641\u0639 \u0628\u0643\u062a\u0644 \u0647\u0648\u0627\u0626\u064a\u0629 \u0631\u0637\u0628\u0629 \u0646\u062d\u0648 \u0645\u0646\u0627\u0637\u0642 \u0635\u062d\u0631\u0627\u0648\u064a\u0629 \u062c\u0627\u0641\u0629 \u0639\u0627\u062f\u0629\u064b. \u0647\u0630\u0627 \u0627\u0644\u062a\u0642\u0631\u064a\u0631 \u064a\u062d\u0644\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0644\u0641\u0647\u0645 \u0627\u0644\u0623\u0633\u0628\u0627\u0628 \u0648\u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633\u0627\u062a.\n <\/p>\n <\/div>\n\n \n <div class=\"lg:col-span-5 card p-6\">\n <div class=\"flex items-center mb-4\">\n <span class=\"text-3xl ml-3\">\ud83c\udf29\ufe0f<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">\u0645\u0635\u0641\u0648\u0641\u0629 \u0627\u0644\u0623\u0633\u0628\u0627\u0628 \u0648\u0627\u0644\u0639\u0648\u0627\u0645\u0644<\/h3>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6\">\n \u062a\u062a\u0636\u0627\u0641\u0631 \u0639\u062f\u0629 \u0639\u0648\u0627\u0645\u0644 \u0644\u062a\u0634\u0643\u064a\u0644 \u062e\u0637\u0648\u0631\u0629 \u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a. \u064a\u0648\u0636\u062d \u0647\u0630\u0627 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u0645\u0633\u0627\u0647\u0645\u0629 \u0627\u0644\u0639\u0648\u0627\u0645\u0644 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0641\u064a \u062a\u0641\u0627\u0642\u0645 \u0627\u0644\u0648\u0636\u0639\u060c \u062d\u064a\u062b \u064a\u0644\u0639\u0628 \u0627\u0644\u062a\u063a\u064a\u0631 \u0627\u0644\u0645\u0646\u0627\u062e\u064a \u0648\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u062f\u0648\u0631 \u0627\u0644\u0623\u0643\u0628\u0631.\n <\/p>\n \n <div class=\"chart-container\">\n <canvas id=\"causesRadarChart\"><\/canvas>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-7 card p-6\">\n <div class=\"flex items-center mb-4\">\n <span class=\"text-3xl ml-3\">\ud83d\udcca<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">\u062a\u0633\u0627\u0642\u0637\u0627\u062a \u0642\u064a\u0627\u0633\u064a\u0629 \u0641\u064a 24 \u0633\u0627\u0639\u0629<\/h3>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6\">\n \u0645\u0642\u0627\u0631\u0646\u0629 \u0643\u0645\u064a\u0629 \u0627\u0644\u0623\u0645\u0637\u0627\u0631 \u0627\u0644\u0645\u0633\u062c\u0644\u0629 \u0641\u064a \u064a\u0648\u0645 \u0648\u0627\u062d\u062f \u062e\u0644\u0627\u0644 \u0641\u064a\u0636\u0627\u0646\u0627\u062a \u0627\u0644\u062c\u0646\u0648\u0628 \u0627\u0644\u0634\u0631\u0642\u064a (\u0634\u062a\u0646\u0628\u0631 2024) \u0645\u0639 \u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0633\u0646\u0648\u064a \u0627\u0644\u0645\u0639\u062a\u0627\u062f. \u0646\u0644\u0627\u062d\u0638 \u0623\u0646 \u0628\u0639\u0636 \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u062a\u0644\u0642\u062a \u0645\u0627 \u064a\u0639\u0627\u062f\u0644 \u0633\u0646\u0629 \u0643\u0627\u0645\u0644\u0629 \u0645\u0646 \u0627\u0644\u0623\u0645\u0637\u0627\u0631 \u0641\u064a \u064a\u0648\u0645\u064a\u0646.\n <\/p>\n \n <div class=\"chart-container\">\n <canvas id=\"rainfallBarChart\"><\/canvas>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-4 card p-6 bg-gradient-to-br from-[#005694] to-[#004a80] text-white text-center\">\n <h4 class=\"text-lg opacity-80 mb-2\">\u0627\u0644\u0648\u0627\u0631\u062f\u0627\u062a \u0627\u0644\u0645\u0627\u0626\u064a\u0629 \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629<\/h4>\n <p class=\"text-5xl font-black mb-2\">263<\/p>\n <p class=\"text-xl\">\u0645\u0644\u064a\u0648\u0646 \u0645\u062a\u0631 \u0645\u0643\u0639\u0628<\/p>\n <div class=\"mt-4 text-sm opacity-75 border-t border-white\/20 pt-4\">\n \u0641\u064a \u0638\u0631\u0641 3 \u0623\u064a\u0627\u0645 \u0641\u0642\u0637 (\u062d\u0648\u0636 \u062f\u0631\u0639\u0629-\u0648\u0627\u062f \u0646\u0648\u0646)\n <\/div>\n <\/div>\n\n <div class=\"lg:col-span-4 card p-6 bg-white text-center border border-gray-100\">\n <h4 class=\"text-lg text-gray-500 mb-2\">\u0627\u0644\u0645\u0646\u0627\u0632\u0644 \u0627\u0644\u0645\u062a\u0636\u0631\u0631\u0629<\/h4>\n <p class=\"text-5xl font-black text-brand-danger mb-2\">1000+<\/p>\n <p class=\"text-xl text-gray-700\">\u0645\u0646\u0632\u0644 \u0627\u0646\u0647\u0627\u0631 \u062c\u0632\u0626\u064a\u0627\u064b \u0623\u0648 \u0643\u0644\u064a\u0627\u064b<\/p>\n <div class=\"mt-4 text-sm text-gray-400 border-t border-gray-100 pt-4\">\n \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0627\u0644\u0623\u0643\u0628\u0631 \u0641\u064a \u0625\u0642\u0644\u064a\u0645 \u0637\u0627\u0637\u0627\n <\/div>\n <\/div>\n\n <div class=\"lg:col-span-4 card p-6 bg-white text-center border border-gray-100\">\n <h4 class=\"text-lg text-gray-500 mb-2\">\u0646\u0633\u0628\u0629 \u0645\u0644\u0621 \u0633\u062f \u0627\u0644\u0645\u0646\u0635\u0648\u0631 \u0627\u0644\u0630\u0647\u0628\u064a<\/h4>\n <p class=\"text-5xl font-black text-brand-success mb-2\">+45%<\/p>\n <p class=\"text-xl text-gray-700\">\u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u0644\u062d\u0648\u0638<\/p>\n <div class=\"mt-4 text-sm text-gray-400 border-t border-gray-100 pt-4\">\n \u0628\u0639\u062f \u0623\u0646 \u0643\u0627\u0646 \u0634\u0628\u0647 \u062c\u0627\u0641 \u0644\u0633\u0646\u0648\u0627\u062a\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-8 card p-6\">\n <div class=\"flex items-center mb-4\">\n <span class=\"text-3xl ml-3\">\ud83d\udca7<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">\u0627\u0646\u062a\u0639\u0627\u0634\u0629 \u0627\u0644\u0633\u062f\u0648\u062f \u0627\u0644\u0643\u0628\u0631\u0649<\/h3>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6\">\n \u0631\u063a\u0645 \u0627\u0644\u062e\u0633\u0627\u0626\u0631\u060c \u0634\u0643\u0644\u062a \u0627\u0644\u0633\u064a\u0648\u0644 \u0641\u0631\u0635\u0629 \u0630\u0647\u0628\u064a\u0629 \u0644\u0625\u0646\u0639\u0627\u0634 \u0627\u0644\u0645\u062e\u0632\u0648\u0646 \u0627\u0644\u0645\u0627\u0626\u064a. \u064a\u0638\u0647\u0631 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u062a\u0637\u0648\u0631 \u062d\u0642\u064a\u0646\u0629 \u0627\u0644\u0633\u062f\u0648\u062f \u0627\u0644\u0643\u0628\u0631\u0649 \u0641\u064a \u0627\u0644\u062c\u0646\u0648\u0628 \u0627\u0644\u0634\u0631\u0642\u064a \u0642\u0628\u0644 \u0648\u0628\u0639\u062f \u0627\u0644\u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0645\u0646\u0627\u062e\u064a\u0629.\n <\/p>\n <div class=\"chart-container\">\n <canvas id=\"damsLineChart\"><\/canvas>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-4 card p-6\">\n <div class=\"flex items-center mb-4\">\n <span class=\"text-3xl ml-3\">\ud83c\udfda\ufe0f<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">\u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u062e\u0633\u0627\u0626\u0631 \u0648\u0627\u0644\u0623\u0636\u0631\u0627\u0631<\/h3>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6\">\n \u0627\u0644\u0646\u0633\u0628 \u0627\u0644\u0645\u0626\u0648\u064a\u0629 \u0627\u0644\u062a\u0642\u0631\u064a\u0628\u064a\u0629 \u0644\u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0623\u0636\u0631\u0627\u0631 \u0627\u0644\u0645\u0627\u062f\u064a\u0629 \u062d\u0633\u0628 \u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a \u0627\u0644\u0645\u062a\u0623\u062b\u0631\u0629.\n <\/p>\n <div class=\"chart-container\">\n <canvas id=\"impactDonutChart\"><\/canvas>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-12 card p-6\">\n <div class=\"flex items-center mb-4\">\n <span class=\"text-3xl ml-3\">\ud83d\udd2e<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">\u0627\u0644\u062a\u0648\u0642\u0639\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629 \u0648\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0627\u0644\u062a\u0643\u064a\u0641 (2025-2030)<\/h3>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6 max-w-4xl\">\n \u064a\u062a\u062c\u0647 \u0627\u0644\u0645\u063a\u0631\u0628 \u0646\u062d\u0648 \u062a\u063a\u064a\u064a\u0631 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u062a\u0647 \u0645\u0646 \u0631\u062f \u0627\u0644\u0641\u0639\u0644 \u0625\u0644\u0649 \u0627\u0644\u0627\u0633\u062a\u0628\u0627\u0642. \u064a\u0648\u0636\u062d \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u0623\u062f\u0646\u0627\u0647 \u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0627\u0633\u062a\u062b\u0645\u0627\u0631\u0627\u062a \u0627\u0644\u0645\u062e\u0637\u0637 \u0644\u0647\u0627 \u0644\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0635\u0645\u0648\u062f \u0623\u0645\u0627\u0645 \u0627\u0644\u0643\u0648\u0627\u0631\u062b\u060c \u0645\u0639 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0627\u0644\u0645\u062a\u0632\u0627\u064a\u062f \u0639\u0644\u0649 “\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0625\u0646\u0630\u0627\u0631 \u0627\u0644\u0645\u0628\u0643\u0631” \u0648\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629 \u0627\u0644\u0635\u063a\u064a\u0631\u0629 (\u0627\u0644\u0639\u062a\u0628\u0627\u062a \u0648\u0627\u0644\u0633\u062f\u0648\u062f \u0627\u0644\u062a\u0644\u064a\u0629).\n <\/p>\n \n <div id=\"futurePlotlyChart\" class=\"chart-container\" style=\"height: 400px; max-height: 400px;\"><\/div>\n <div class=\"mt-4 text-xs text-gray-500 text-center\">\n * \u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u062a\u0642\u062f\u064a\u0631\u064a\u0629 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u062a\u0648\u062c\u0647\u0627\u062a \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0644\u0642\u0637\u0627\u0639 \u0627\u0644\u0645\u0627\u0621 \u0648\u0627\u0644\u062a\u062c\u0647\u064a\u0632\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-12 mt-4\">\n <h3 class=\"text-2xl font-bold mb-6 text-center text-brand-primary\">\u062f\u0648\u0631\u0629 \u062a\u062f\u0628\u064a\u0631 \u0645\u062e\u0627\u0637\u0631 \u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-4\">\n <div class=\"bg-white p-4 rounded-lg shadow border-t-4 border-gray-400 text-center\">\n <div class=\"text-4xl mb-2\">\ud83d\udd0e<\/div>\n <h4 class=\"font-bold mb-2\">1. \u0627\u0644\u0631\u0635\u062f \u0648\u0627\u0644\u064a\u0642\u0638\u0629<\/h4>\n <p class=\"text-sm text-gray-600\">\u062a\u062d\u0633\u064a\u0646 \u0646\u0634\u0631\u0627\u062a \u0627\u0644\u0623\u0631\u0635\u0627\u062f \u0627\u0644\u062c\u0648\u064a\u0629 \u0627\u0644\u0625\u0646\u0630\u0627\u0631\u064a\u0629 \u0648\u062a\u0639\u0645\u064a\u0645\u0647\u0627 \u0645\u062d\u0644\u064a\u0627\u064b.<\/p>\n <\/div>\n <div class=\"bg-white p-4 rounded-lg shadow border-t-4 border-yellow-400 text-center\">\n <div class=\"text-4xl mb-2\">\ud83d\udea7<\/div>\n <h4 class=\"font-bold mb-2\">2. \u0627\u0644\u0648\u0642\u0627\u064a\u0629<\/h4>\n <p class=\"text-sm text-gray-600\">\u0628\u0646\u0627\u0621 \u0627\u0644\u0633\u062f\u0648\u062f \u0627\u0644\u062a\u0644\u064a\u0629\u060c \u062a\u0646\u0642\u064a\u0629 \u0627\u0644\u0648\u062f\u064a\u0627\u0646\u060c \u0648\u0645\u0646\u0639 \u0627\u0644\u0628\u0646\u0627\u0621 \u0641\u064a \u0645\u062c\u0627\u0631\u064a \u0627\u0644\u0645\u064a\u0627\u0647.<\/p>\n <\/div>\n <div class=\"bg-white p-4 rounded-lg shadow border-t-4 border-red-500 text-center\">\n <div class=\"text-4xl mb-2\">\ud83d\udea8<\/div>\n <h4 class=\"font-bold mb-2\">3. \u0627\u0644\u062a\u062f\u062e\u0644<\/h4>\n <p class=\"text-sm text-gray-600\">\u0633\u0631\u0639\u0629 \u0641\u0643 \u0627\u0644\u0639\u0632\u0644\u0629 \u0639\u0646 \u0627\u0644\u062f\u0648\u0627\u0648\u064a\u0631 \u0627\u0644\u0645\u062a\u0636\u0631\u0631\u0629 \u0648\u0625\u0635\u0644\u0627\u062d \u0627\u0644\u0634\u0628\u0643\u0627\u062a.<\/p>\n <\/div>\n <div class=\"bg-white p-4 rounded-lg shadow border-t-4 border-green-500 text-center\">\n <div class=\"text-4xl mb-2\">\ud83c\udf31<\/div>\n <h4 class=\"font-bold mb-2\">4. \u0627\u0644\u062a\u0643\u064a\u0641<\/h4>\n <p class=\"text-sm text-gray-600\">\u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0644\u062a\u062a\u062d\u0645\u0644 \u0627\u0644\u0638\u0648\u0627\u0647\u0631 \u0627\u0644\u0642\u0635\u0648\u0649 (Resilience).<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/main>\n\n <footer class=\"bg-[#102A43] text-white py-8 mt-12 text-center\">\n <p class=\"opacity-75\">\u062a\u0645 \u0625\u0646\u0634\u0627\u0621 \u0647\u0630\u0627 “\u0627\u0644\u0625\u0646\u0641\u0648\u063a\u0631\u0627\u0641\u064a\u0643” \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0644\u062a\u0648\u0636\u064a\u062d \u062f\u064a\u0646\u0627\u0645\u064a\u0627\u062a \u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628.<\/p>\n <p class=\"text-sm mt-2 opacity-50\">\u0644\u0627 \u064a\u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 SVG \u0623\u0648 Mermaid JS. \u062c\u0645\u064a\u0639 \u0627\u0644\u0631\u0633\u0648\u0645\u0627\u062a \u0645\u0628\u0646\u064a\u0629 \u0628\u0648\u0627\u0633\u0637\u0629 Canvas.<\/p>\n <\/footer>\n\n \n <script>\n \/\/ --- UTILITY: Label Wrapping Logic (>16 chars) ---\n function wrapLabel(str, maxLen = 16) {\n if (str.length <= maxLen) return str;\n const words = str.split(' ');\n const lines = [];\n let currentLine = words[0];\n\n for (let i = 1; i < words.length; i++) {\n if (currentLine.length + 1 + words[i].length <= maxLen) {\n currentLine += ' ' + words[i];\n } else {\n lines.push(currentLine);\n currentLine = words[i];\n }\n }\n lines.push(currentLine);\n return lines;\n }\n\n \/\/ --- UTILITY: Tooltip Callback for Multiline ---\n const commonTooltipOptions = {\n callbacks: {\n title: function(tooltipItems) {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n } else {\n return label;\n }\n }\n }\n };\n\n \/\/ --- CHART 1: CAUSES (Radar) ---\n const ctxCauses = document.getElementById('causesRadarChart').getContext('2d');\n const causesLabels = [\n '\u0627\u0644\u062a\u063a\u064a\u0631 \u0627\u0644\u0645\u0646\u0627\u062e\u064a (Extreme Weather)', \n '\u0627\u0644\u062a\u0648\u0633\u0639 \u0627\u0644\u0639\u0645\u0631\u0627\u0646\u064a (Urbanization)', \n '\u0637\u0628\u064a\u0639\u0629 \u0627\u0644\u062a\u0631\u0628\u0629 \u0648\u0627\u0644\u0648\u062f\u064a\u0627\u0646 (Geography)', \n '\u0647\u0634\u0627\u0634\u0629 \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 (Infrastructure)', \n '\u063a\u064a\u0627\u0628 \u0642\u0646\u0648\u0627\u062a \u0627\u0644\u062a\u0635\u0631\u064a\u0641 (Drainage)'\n ].map(l => wrapLabel(l));\n\n new Chart(ctxCauses, {\n type: 'radar',\n data: {\n labels: causesLabels,\n datasets: [{\n label: '\u062f\u0631\u062c\u0629 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 (1-10)',\n data: [9, 7, 8, 6, 7],\n fill: true,\n backgroundColor: 'rgba(0, 86, 148, 0.2)',\n borderColor: '#005694',\n pointBackgroundColor: '#FFB300',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: '#005694'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: { display: true },\n suggestedMin: 0,\n suggestedMax: 10,\n grid: { color: 'rgba(0,0,0,0.05)' },\n pointLabels: {\n font: { family: 'Cairo', size: 11 }\n }\n }\n },\n plugins: {\n tooltip: commonTooltipOptions,\n legend: { display: false }\n }\n }\n });\n\n \/\/ --- CHART 2: RAINFALL (Bar) ---\n const ctxRain = document.getElementById('rainfallBarChart').getContext('2d');\n const rainLabels = ['\u0637\u0627\u0637\u0627 (Tata)', '\u0627\u0644\u0631\u0627\u0634\u064a\u062f\u064a\u0629 (Errachidia)', '\u0648\u0631\u0632\u0627\u0632\u0627\u062a (Ouarzazate)', '\u062a\u0632\u0646\u064a\u062a (Tiznit)'].map(l => wrapLabel(l));\n\n new Chart(ctxRain, {\n type: 'bar',\n data: {\n labels: rainLabels,\n datasets: [\n {\n label: '\u0627\u0644\u062a\u0633\u0627\u0642\u0637\u0627\u062a \u0627\u0644\u0645\u0633\u062c\u0644\u0629 (\u0645\u0644\u0645)',\n data: [110, 85, 90, 70],\n backgroundColor: '#005694',\n borderRadius: 6\n },\n {\n label: '\u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0633\u0646\u0648\u064a \u0627\u0644\u0645\u0639\u062a\u0627\u062f',\n data: [150, 130, 160, 200], \/\/ Approximate annual averages\n backgroundColor: '#E0E0E0',\n borderRadius: 6\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: { \n beginAtZero: true,\n grid: { color: '#f0f0f0' },\n title: { display: true, text: '\u0645\u064a\u0644\u064a\u0645\u062a\u0631 (mm)' }\n },\n x: {\n grid: { display: false }\n }\n },\n plugins: {\n tooltip: commonTooltipOptions,\n legend: { position: 'top', align: 'end' }\n }\n }\n });\n\n \/\/ --- CHART 3: DAMS (Line) ---\n const ctxDams = document.getElementById('damsLineChart').getContext('2d');\n \/\/ Simulated dates for Sept 2024 flood event\n const damDates = ['1 \u0634\u062a\u0646\u0628\u0631', '5 \u0634\u062a\u0646\u0628\u0631', '10 \u0634\u062a\u0646\u0628\u0631', '15 \u0634\u062a\u0646\u0628\u0631', '20 \u0634\u062a\u0646\u0628\u0631', '25 \u0634\u062a\u0646\u0628\u0631'].map(l => wrapLabel(l));\n\n new Chart(ctxDams, {\n type: 'line',\n data: {\n labels: damDates,\n datasets: [\n {\n label: '\u0633\u062f \u0627\u0644\u0645\u0646\u0635\u0648\u0631 \u0627\u0644\u0630\u0647\u0628\u064a',\n data: [12, 12, 14, 35, 42, 45], \/\/ Rapid increase\n borderColor: '#005694',\n backgroundColor: 'rgba(0, 86, 148, 0.1)',\n fill: true,\n tension: 0.4\n },\n {\n label: '\u0633\u062f \u064a\u0648\u0633\u0641 \u0628\u0646 \u062a\u0627\u0634\u0641\u064a\u0646',\n data: [18, 18, 19, 24, 26, 27], \/\/ Moderate increase\n borderColor: '#FFB300',\n backgroundColor: 'rgba(255, 179, 0, 0)',\n borderDash: [5, 5],\n tension: 0.4\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n title: { display: true, text: '\u0646\u0633\u0628\u0629 \u0627\u0644\u0645\u0644\u0621 (%)' }\n }\n },\n plugins: {\n tooltip: commonTooltipOptions\n }\n }\n });\n\n \/\/ --- CHART 4: IMPACT (Donut) ---\n const ctxImpact = document.getElementById('impactDonutChart').getContext('2d');\n const impactLabels = [\n '\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0637\u0631\u0642\u064a\u0629 (Roads)', \n '\u0627\u0644\u0645\u0646\u0627\u0632\u0644 \u0648\u0627\u0644\u0645\u0628\u0627\u0646\u064a (Housing)', \n '\u0627\u0644\u0642\u0637\u0627\u0639 \u0627\u0644\u0641\u0644\u0627\u062d\u064a (Agriculture)', \n '\u0634\u0628\u0643\u0627\u062a \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0648\u0627\u0644\u0645\u0627\u0621 (Utilities)'\n ].map(l => wrapLabel(l));\n\n new Chart(ctxImpact, {\n type: 'doughnut',\n data: {\n labels: impactLabels,\n datasets: [{\n data: [35, 25, 30, 10],\n backgroundColor: [\n '#005694', \/\/ Blue (Roads)\n '#D32F2F', \/\/ Red (Housing)\n '#388E3C', \/\/ Green (Agri)\n '#FFB300' \/\/ Amber (Util)\n ],\n borderWidth: 0\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n tooltip: commonTooltipOptions,\n legend: { position: 'bottom' }\n }\n }\n });\n\n \/\/ --- CHART 5: FUTURE OUTLOOK (Plotly Stacked Area) ---\n \/\/ Using Plotly to satisfy requirements and show advanced config\n \n const years = [2025, 2026, 2027, 2028, 2029, 2030];\n \n \/\/ Data for different investment types (Arbitrary units\/Budget index)\n const trace1 = {\n x: years,\n y: [20, 25, 30, 35, 40, 45],\n name: '\u0627\u0644\u0633\u062f\u0648\u062f \u0627\u0644\u062a\u0644\u064a\u0629 \u0648\u0627\u0644\u062d\u0648\u0627\u062c\u0632 (Dams)',\n type: 'scatter',\n mode: 'lines',\n stackgroup: 'one',\n line: {color: '#005694'}\n };\n\n const trace2 = {\n x: years,\n y: [5, 10, 15, 25, 30, 35],\n name: '\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0625\u0646\u0630\u0627\u0631 \u0627\u0644\u0645\u0628\u0643\u0631 (Early Warning)',\n type: 'scatter',\n mode: 'lines',\n stackgroup: 'one',\n line: {color: '#FFB300'}\n };\n\n const trace3 = {\n x: years,\n y: [10, 12, 15, 18, 20, 22],\n name: '\u0625\u0639\u0627\u062f\u0629 \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0648\u062f\u064a\u0627\u0646 (Urban Planning)',\n type: 'scatter',\n mode: 'lines',\n stackgroup: 'one',\n line: {color: '#388E3C'}\n };\n\n const layoutPlotly = {\n font: {family: 'Cairo'},\n margin: {l: 40, r: 20, t: 30, b: 40},\n showlegend: true,\n legend: {orientation: \"h\", y: -0.2},\n xaxis: {\n title: '\u0627\u0644\u0633\u0646\u0629',\n showgrid: false\n },\n yaxis: {\n title: '\u062d\u062c\u0645 \u0627\u0644\u0627\u0633\u062a\u062b\u0645\u0627\u0631 (\u0645\u0624\u0634\u0631)',\n showgrid: true,\n gridcolor: '#f0f0f0'\n },\n paper_bgcolor: 'rgba(0,0,0,0)',\n plot_bgcolor: 'rgba(0,0,0,0)'\n };\n\n const configPlotly = {\n responsive: true,\n displayModeBar: false \/\/ Clean look\n };\n\n Plotly.newPlot('futurePlotlyChart', [trace1, trace2, trace3], layoutPlotly, configPlotly);\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>\u0627\u0644\u0641\u0636\u064a\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628: \u062a\u062d\u0644\u064a\u0644 \u0648\u062a\u0648\u0642\u0639\u0627\u062a \u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628 \u0628\u064a\u0646 \u062a\u062d\u062f\u064a\u0627\u062a \u0627\u0644\u062a\u063a\u064a\u0631 \u0627\u0644\u0645\u0646\u0627\u062e\u064a \u0648\u0641\u0631\u0635 \u0625\u0646\u0639\u0627\u0634 \u0627\u0644\u0641\u0631\u0634\u0629 \u0627\u0644\u0645\u0627\u0626\u064a\u0629: \u062a\u062d\u0644\u064a\u0644 \u0634\u0627\u0645\u0644 \u0644\u0644\u0648\u0636\u0639 \u0627\u0644\u0631\u0627\u0647\u0646 \u0648\u0627\u0644\u062a\u0648\u0642\u0639\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629 \ud83c\udf27\ufe0f \u062a\u0633\u0627\u0642\u0637\u0627\u062a \u0642\u064a\u0627\u0633\u064a\u0629 \ud83c\udf0a \u0645\u0644\u0621 \u0627\u0644\u0633\u062f\u0648\u062f \ud83d\ude9c \u062a\u062d\u062f\u064a\u0627\u062a \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0633\u064a\u0627\u0642 \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0645\u0646\u0627\u062e\u064a \u0634\u0647\u062f \u0627\u0644\u0645\u063a\u0631\u0628 \u0641\u064a \u0627\u0644\u0622\u0648\u0646\u0629 \u0627\u0644\u0623\u062e\u064a\u0631\u0629\u060c \u0648\u062e\u0627\u0635\u0629 \u0641\u064a \u0634\u062a\u0646\u0628\u0631 2024\u060c \u0638\u0648\u0627\u0647\u0631 \u0645\u0646\u0627\u062e\u064a\u0629 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629 <a class=\"mh-excerpt-more\" href=\"https:\/\/www.gil24.com\/360\/%d8%a7%d9%84%d9%81%d9%8a%d8%b6%d8%a7%d9%86%d8%a7%d8%aa-%d8%a8%d8%a7%d9%84%d9%85%d8%ba%d8%b1%d8%a8\/\" title=\"\u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628\">[…]<\/a><\/p>\n<\/div>","protected":false},"author":2,"featured_media":68278,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":[],"rop_publish_now_history":[],"rop_publish_now_status":"pending","footnotes":""},"categories":[225,710,244],"tags":[],"class_list":["post-68277","post","type-post","status-publish","format-standard","has-post-thumbnail","category-225","category-710","category-sante-environnement-climat"],"_links":{"self":[{"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/posts\/68277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/comments?post=68277"}],"version-history":[{"count":3,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/posts\/68277\/revisions"}],"predecessor-version":[{"id":68283,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/posts\/68277\/revisions\/68283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/media\/68278"}],"wp:attachment":[{"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/media?parent=68277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/categories?post=68277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/tags?post=68277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":68277,"date":"2026-02-09T00:48:00","date_gmt":"2026-02-08T23:48:00","guid":{"rendered":"https:\/\/www.gil24.com\/360\/?p=68277"},"modified":"2026-02-09T00:51:58","modified_gmt":"2026-02-08T23:51:58","slug":"%d8%a7%d9%84%d9%81%d9%8a%d8%b6%d8%a7%d9%86%d8%a7%d8%aa-%d8%a8%d8%a7%d9%84%d9%85%d8%ba%d8%b1%d8%a8","status":"publish","type":"post","link":"https:\/\/www.gil24.com\/360\/%d8%a7%d9%84%d9%81%d9%8a%d8%b6%d8%a7%d9%86%d8%a7%d8%aa-%d8%a8%d8%a7%d9%84%d9%85%d8%ba%d8%b1%d8%a8\/","title":{"rendered":"\u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628"},"content":{"rendered":"\n\n\n\n \n \n \u0627\u0644\u0641\u0636\u064a\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628: \u062a\u062d\u0644\u064a\u0644 \u0648\u062a\u0648\u0642\u0639\u0627\u062a<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n \n \n <script src=\"https:\/\/cdn.plot.ly\/plotly-2.27.0.min.js\"><\/script>\n\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;600;700;900&display=swap\" rel=\"stylesheet\">\n\n <style>\n body {\n font-family: 'Cairo', sans-serif;\n background-color: #F0F4F8; \/* Light Blue-Grey Background *\/\n color: #102A43;\n }\n\n \/* Custom Scrollbar *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n ::-webkit-scrollbar-thumb {\n background: #334E68;\n border-radius: 4px;\n }\n\n \/* Chart Container Rules (Strict Adherence) *\/\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 650px; \/* Max width constraint *\/\n margin-left: auto;\n margin-right: auto;\n height: 350px; \/* Base height *\/\n max-height: 400px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n @media (max-width: 768px) {\n .chart-container {\n height: 300px;\n }\n }\n\n \/* Material Design Cards *\/\n .card {\n background: white;\n border-radius: 12px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: transform 0.2s, box-shadow 0.2s;\n }\n .card:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n\n \/* Palette Classes *\/\n .text-brand-primary { color: #005694; } \/* Deep Blue *\/\n .bg-brand-primary { background-color: #005694; }\n .text-brand-accent { color: #FFB300; } \/* Amber *\/\n .bg-brand-accent { background-color: #FFB300; }\n .text-brand-success { color: #007E33; } \/* Green *\/\n .text-brand-danger { color: #CC0000; } \/* Red *\/\n\n \/* Gradient Text *\/\n .gradient-text {\n background: linear-gradient(45deg, #005694, #00A8E8);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n <\/style>\n \n \n<\/head>\n<body class=\"antialiased\">\n\n \n <header class=\"bg-gradient-to-r from-[#005694] to-[#003c69] text-white py-12 shadow-lg mb-8\">\n <div class=\"container mx-auto px-4 text-center\">\n <h1 class=\"text-4xl md:text-6xl font-black mb-4 leading-tight\">\u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628<\/h1>\n <p class=\"text-xl md:text-2xl font-light opacity-90 max-w-3xl mx-auto\">\n \u0628\u064a\u0646 \u062a\u062d\u062f\u064a\u0627\u062a \u0627\u0644\u062a\u063a\u064a\u0631 \u0627\u0644\u0645\u0646\u0627\u062e\u064a \u0648\u0641\u0631\u0635 \u0625\u0646\u0639\u0627\u0634 \u0627\u0644\u0641\u0631\u0634\u0629 \u0627\u0644\u0645\u0627\u0626\u064a\u0629: \u062a\u062d\u0644\u064a\u0644 \u0634\u0627\u0645\u0644 \u0644\u0644\u0648\u0636\u0639 \u0627\u0644\u0631\u0627\u0647\u0646 \u0648\u0627\u0644\u062a\u0648\u0642\u0639\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629\n <\/p>\n <div class=\"mt-8 flex justify-center gap-4 text-sm font-semibold\">\n <span class=\"bg-white\/20 backdrop-blur-md px-4 py-2 rounded-full\">\ud83c\udf27\ufe0f \u062a\u0633\u0627\u0642\u0637\u0627\u062a \u0642\u064a\u0627\u0633\u064a\u0629<\/span>\n <span class=\"bg-white\/20 backdrop-blur-md px-4 py-2 rounded-full\">\ud83c\udf0a \u0645\u0644\u0621 \u0627\u0644\u0633\u062f\u0648\u062f<\/span>\n <span class=\"bg-white\/20 backdrop-blur-md px-4 py-2 rounded-full\">\ud83d\ude9c \u062a\u062d\u062f\u064a\u0627\u062a \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629<\/span>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"container mx-auto px-4 pb-12\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8\">\n\n \n <div class=\"lg:col-span-12 card p-8 border-r-8 border-[#005694]\">\n <h2 class=\"text-3xl font-bold mb-4 text-brand-primary\">\u0633\u064a\u0627\u0642 \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0645\u0646\u0627\u062e\u064a<\/h2>\n <p class=\"text-gray-700 text-lg leading-relaxed mb-4\">\n \u0634\u0647\u062f \u0627\u0644\u0645\u063a\u0631\u0628 \u0641\u064a \u0627\u0644\u0622\u0648\u0646\u0629 \u0627\u0644\u0623\u062e\u064a\u0631\u0629\u060c \u0648\u062e\u0627\u0635\u0629 \u0641\u064a \u0634\u062a\u0646\u0628\u0631 2024\u060c \u0638\u0648\u0627\u0647\u0631 \u0645\u0646\u0627\u062e\u064a\u0629 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629 \u062a\u0645\u062b\u0644\u062a \u0641\u064a \u0647\u0637\u0648\u0644 \u0623\u0645\u0637\u0627\u0631 \u0637\u0648\u0641\u0627\u0646\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u062c\u0646\u0648\u0628\u064a\u0629 \u0627\u0644\u0634\u0631\u0642\u064a\u0629 (\u0637\u0627\u0637\u0627\u060c \u0648\u0631\u0632\u0627\u0632\u0627\u062a\u060c \u0627\u0644\u0631\u0627\u0634\u064a\u062f\u064a\u0629). \u0647\u0630\u0647 \u0627\u0644\u0638\u0648\u0627\u0647\u0631 \u0644\u064a\u0633\u062a \u0645\u0639\u0632\u0648\u0644\u0629\u060c \u0628\u0644 \u062a\u0639\u0643\u0633 \u062a\u062d\u0648\u0644\u0627\u064b \u0641\u064a \u0645\u0648\u0642\u0639 “\u0627\u0644\u062c\u0628\u0647\u0629 \u0627\u0644\u0645\u062f\u0627\u0631\u064a\u0629” (ITCZ)\u060c \u0645\u0645\u0627 \u064a\u062f\u0641\u0639 \u0628\u0643\u062a\u0644 \u0647\u0648\u0627\u0626\u064a\u0629 \u0631\u0637\u0628\u0629 \u0646\u062d\u0648 \u0645\u0646\u0627\u0637\u0642 \u0635\u062d\u0631\u0627\u0648\u064a\u0629 \u062c\u0627\u0641\u0629 \u0639\u0627\u062f\u0629\u064b. \u0647\u0630\u0627 \u0627\u0644\u062a\u0642\u0631\u064a\u0631 \u064a\u062d\u0644\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0644\u0641\u0647\u0645 \u0627\u0644\u0623\u0633\u0628\u0627\u0628 \u0648\u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633\u0627\u062a.\n <\/p>\n <\/div>\n\n \n <div class=\"lg:col-span-5 card p-6\">\n <div class=\"flex items-center mb-4\">\n <span class=\"text-3xl ml-3\">\ud83c\udf29\ufe0f<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">\u0645\u0635\u0641\u0648\u0641\u0629 \u0627\u0644\u0623\u0633\u0628\u0627\u0628 \u0648\u0627\u0644\u0639\u0648\u0627\u0645\u0644<\/h3>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6\">\n \u062a\u062a\u0636\u0627\u0641\u0631 \u0639\u062f\u0629 \u0639\u0648\u0627\u0645\u0644 \u0644\u062a\u0634\u0643\u064a\u0644 \u062e\u0637\u0648\u0631\u0629 \u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a. \u064a\u0648\u0636\u062d \u0647\u0630\u0627 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u0645\u0633\u0627\u0647\u0645\u0629 \u0627\u0644\u0639\u0648\u0627\u0645\u0644 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0641\u064a \u062a\u0641\u0627\u0642\u0645 \u0627\u0644\u0648\u0636\u0639\u060c \u062d\u064a\u062b \u064a\u0644\u0639\u0628 \u0627\u0644\u062a\u063a\u064a\u0631 \u0627\u0644\u0645\u0646\u0627\u062e\u064a \u0648\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u062f\u0648\u0631 \u0627\u0644\u0623\u0643\u0628\u0631.\n <\/p>\n \n <div class=\"chart-container\">\n <canvas id=\"causesRadarChart\"><\/canvas>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-7 card p-6\">\n <div class=\"flex items-center mb-4\">\n <span class=\"text-3xl ml-3\">\ud83d\udcca<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">\u062a\u0633\u0627\u0642\u0637\u0627\u062a \u0642\u064a\u0627\u0633\u064a\u0629 \u0641\u064a 24 \u0633\u0627\u0639\u0629<\/h3>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6\">\n \u0645\u0642\u0627\u0631\u0646\u0629 \u0643\u0645\u064a\u0629 \u0627\u0644\u0623\u0645\u0637\u0627\u0631 \u0627\u0644\u0645\u0633\u062c\u0644\u0629 \u0641\u064a \u064a\u0648\u0645 \u0648\u0627\u062d\u062f \u062e\u0644\u0627\u0644 \u0641\u064a\u0636\u0627\u0646\u0627\u062a \u0627\u0644\u062c\u0646\u0648\u0628 \u0627\u0644\u0634\u0631\u0642\u064a (\u0634\u062a\u0646\u0628\u0631 2024) \u0645\u0639 \u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0633\u0646\u0648\u064a \u0627\u0644\u0645\u0639\u062a\u0627\u062f. \u0646\u0644\u0627\u062d\u0638 \u0623\u0646 \u0628\u0639\u0636 \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u062a\u0644\u0642\u062a \u0645\u0627 \u064a\u0639\u0627\u062f\u0644 \u0633\u0646\u0629 \u0643\u0627\u0645\u0644\u0629 \u0645\u0646 \u0627\u0644\u0623\u0645\u0637\u0627\u0631 \u0641\u064a \u064a\u0648\u0645\u064a\u0646.\n <\/p>\n \n <div class=\"chart-container\">\n <canvas id=\"rainfallBarChart\"><\/canvas>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-4 card p-6 bg-gradient-to-br from-[#005694] to-[#004a80] text-white text-center\">\n <h4 class=\"text-lg opacity-80 mb-2\">\u0627\u0644\u0648\u0627\u0631\u062f\u0627\u062a \u0627\u0644\u0645\u0627\u0626\u064a\u0629 \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629<\/h4>\n <p class=\"text-5xl font-black mb-2\">263<\/p>\n <p class=\"text-xl\">\u0645\u0644\u064a\u0648\u0646 \u0645\u062a\u0631 \u0645\u0643\u0639\u0628<\/p>\n <div class=\"mt-4 text-sm opacity-75 border-t border-white\/20 pt-4\">\n \u0641\u064a \u0638\u0631\u0641 3 \u0623\u064a\u0627\u0645 \u0641\u0642\u0637 (\u062d\u0648\u0636 \u062f\u0631\u0639\u0629-\u0648\u0627\u062f \u0646\u0648\u0646)\n <\/div>\n <\/div>\n\n <div class=\"lg:col-span-4 card p-6 bg-white text-center border border-gray-100\">\n <h4 class=\"text-lg text-gray-500 mb-2\">\u0627\u0644\u0645\u0646\u0627\u0632\u0644 \u0627\u0644\u0645\u062a\u0636\u0631\u0631\u0629<\/h4>\n <p class=\"text-5xl font-black text-brand-danger mb-2\">1000+<\/p>\n <p class=\"text-xl text-gray-700\">\u0645\u0646\u0632\u0644 \u0627\u0646\u0647\u0627\u0631 \u062c\u0632\u0626\u064a\u0627\u064b \u0623\u0648 \u0643\u0644\u064a\u0627\u064b<\/p>\n <div class=\"mt-4 text-sm text-gray-400 border-t border-gray-100 pt-4\">\n \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0627\u0644\u0623\u0643\u0628\u0631 \u0641\u064a \u0625\u0642\u0644\u064a\u0645 \u0637\u0627\u0637\u0627\n <\/div>\n <\/div>\n\n <div class=\"lg:col-span-4 card p-6 bg-white text-center border border-gray-100\">\n <h4 class=\"text-lg text-gray-500 mb-2\">\u0646\u0633\u0628\u0629 \u0645\u0644\u0621 \u0633\u062f \u0627\u0644\u0645\u0646\u0635\u0648\u0631 \u0627\u0644\u0630\u0647\u0628\u064a<\/h4>\n <p class=\"text-5xl font-black text-brand-success mb-2\">+45%<\/p>\n <p class=\"text-xl text-gray-700\">\u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u0644\u062d\u0648\u0638<\/p>\n <div class=\"mt-4 text-sm text-gray-400 border-t border-gray-100 pt-4\">\n \u0628\u0639\u062f \u0623\u0646 \u0643\u0627\u0646 \u0634\u0628\u0647 \u062c\u0627\u0641 \u0644\u0633\u0646\u0648\u0627\u062a\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-8 card p-6\">\n <div class=\"flex items-center mb-4\">\n <span class=\"text-3xl ml-3\">\ud83d\udca7<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">\u0627\u0646\u062a\u0639\u0627\u0634\u0629 \u0627\u0644\u0633\u062f\u0648\u062f \u0627\u0644\u0643\u0628\u0631\u0649<\/h3>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6\">\n \u0631\u063a\u0645 \u0627\u0644\u062e\u0633\u0627\u0626\u0631\u060c \u0634\u0643\u0644\u062a \u0627\u0644\u0633\u064a\u0648\u0644 \u0641\u0631\u0635\u0629 \u0630\u0647\u0628\u064a\u0629 \u0644\u0625\u0646\u0639\u0627\u0634 \u0627\u0644\u0645\u062e\u0632\u0648\u0646 \u0627\u0644\u0645\u0627\u0626\u064a. \u064a\u0638\u0647\u0631 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u062a\u0637\u0648\u0631 \u062d\u0642\u064a\u0646\u0629 \u0627\u0644\u0633\u062f\u0648\u062f \u0627\u0644\u0643\u0628\u0631\u0649 \u0641\u064a \u0627\u0644\u062c\u0646\u0648\u0628 \u0627\u0644\u0634\u0631\u0642\u064a \u0642\u0628\u0644 \u0648\u0628\u0639\u062f \u0627\u0644\u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0645\u0646\u0627\u062e\u064a\u0629.\n <\/p>\n <div class=\"chart-container\">\n <canvas id=\"damsLineChart\"><\/canvas>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-4 card p-6\">\n <div class=\"flex items-center mb-4\">\n <span class=\"text-3xl ml-3\">\ud83c\udfda\ufe0f<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">\u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u062e\u0633\u0627\u0626\u0631 \u0648\u0627\u0644\u0623\u0636\u0631\u0627\u0631<\/h3>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6\">\n \u0627\u0644\u0646\u0633\u0628 \u0627\u0644\u0645\u0626\u0648\u064a\u0629 \u0627\u0644\u062a\u0642\u0631\u064a\u0628\u064a\u0629 \u0644\u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0623\u0636\u0631\u0627\u0631 \u0627\u0644\u0645\u0627\u062f\u064a\u0629 \u062d\u0633\u0628 \u0627\u0644\u0642\u0637\u0627\u0639\u0627\u062a \u0627\u0644\u0645\u062a\u0623\u062b\u0631\u0629.\n <\/p>\n <div class=\"chart-container\">\n <canvas id=\"impactDonutChart\"><\/canvas>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-12 card p-6\">\n <div class=\"flex items-center mb-4\">\n <span class=\"text-3xl ml-3\">\ud83d\udd2e<\/span>\n <h3 class=\"text-xl font-bold text-gray-800\">\u0627\u0644\u062a\u0648\u0642\u0639\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629 \u0648\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0627\u0644\u062a\u0643\u064a\u0641 (2025-2030)<\/h3>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6 max-w-4xl\">\n \u064a\u062a\u062c\u0647 \u0627\u0644\u0645\u063a\u0631\u0628 \u0646\u062d\u0648 \u062a\u063a\u064a\u064a\u0631 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u062a\u0647 \u0645\u0646 \u0631\u062f \u0627\u0644\u0641\u0639\u0644 \u0625\u0644\u0649 \u0627\u0644\u0627\u0633\u062a\u0628\u0627\u0642. \u064a\u0648\u0636\u062d \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u0623\u062f\u0646\u0627\u0647 \u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0627\u0633\u062a\u062b\u0645\u0627\u0631\u0627\u062a \u0627\u0644\u0645\u062e\u0637\u0637 \u0644\u0647\u0627 \u0644\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0635\u0645\u0648\u062f \u0623\u0645\u0627\u0645 \u0627\u0644\u0643\u0648\u0627\u0631\u062b\u060c \u0645\u0639 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0627\u0644\u0645\u062a\u0632\u0627\u064a\u062f \u0639\u0644\u0649 “\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0625\u0646\u0630\u0627\u0631 \u0627\u0644\u0645\u0628\u0643\u0631” \u0648\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629 \u0627\u0644\u0635\u063a\u064a\u0631\u0629 (\u0627\u0644\u0639\u062a\u0628\u0627\u062a \u0648\u0627\u0644\u0633\u062f\u0648\u062f \u0627\u0644\u062a\u0644\u064a\u0629).\n <\/p>\n \n <div id=\"futurePlotlyChart\" class=\"chart-container\" style=\"height: 400px; max-height: 400px;\"><\/div>\n <div class=\"mt-4 text-xs text-gray-500 text-center\">\n * \u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u062a\u0642\u062f\u064a\u0631\u064a\u0629 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u062a\u0648\u062c\u0647\u0627\u062a \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0644\u0642\u0637\u0627\u0639 \u0627\u0644\u0645\u0627\u0621 \u0648\u0627\u0644\u062a\u062c\u0647\u064a\u0632\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-12 mt-4\">\n <h3 class=\"text-2xl font-bold mb-6 text-center text-brand-primary\">\u062f\u0648\u0631\u0629 \u062a\u062f\u0628\u064a\u0631 \u0645\u062e\u0627\u0637\u0631 \u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-4\">\n <div class=\"bg-white p-4 rounded-lg shadow border-t-4 border-gray-400 text-center\">\n <div class=\"text-4xl mb-2\">\ud83d\udd0e<\/div>\n <h4 class=\"font-bold mb-2\">1. \u0627\u0644\u0631\u0635\u062f \u0648\u0627\u0644\u064a\u0642\u0638\u0629<\/h4>\n <p class=\"text-sm text-gray-600\">\u062a\u062d\u0633\u064a\u0646 \u0646\u0634\u0631\u0627\u062a \u0627\u0644\u0623\u0631\u0635\u0627\u062f \u0627\u0644\u062c\u0648\u064a\u0629 \u0627\u0644\u0625\u0646\u0630\u0627\u0631\u064a\u0629 \u0648\u062a\u0639\u0645\u064a\u0645\u0647\u0627 \u0645\u062d\u0644\u064a\u0627\u064b.<\/p>\n <\/div>\n <div class=\"bg-white p-4 rounded-lg shadow border-t-4 border-yellow-400 text-center\">\n <div class=\"text-4xl mb-2\">\ud83d\udea7<\/div>\n <h4 class=\"font-bold mb-2\">2. \u0627\u0644\u0648\u0642\u0627\u064a\u0629<\/h4>\n <p class=\"text-sm text-gray-600\">\u0628\u0646\u0627\u0621 \u0627\u0644\u0633\u062f\u0648\u062f \u0627\u0644\u062a\u0644\u064a\u0629\u060c \u062a\u0646\u0642\u064a\u0629 \u0627\u0644\u0648\u062f\u064a\u0627\u0646\u060c \u0648\u0645\u0646\u0639 \u0627\u0644\u0628\u0646\u0627\u0621 \u0641\u064a \u0645\u062c\u0627\u0631\u064a \u0627\u0644\u0645\u064a\u0627\u0647.<\/p>\n <\/div>\n <div class=\"bg-white p-4 rounded-lg shadow border-t-4 border-red-500 text-center\">\n <div class=\"text-4xl mb-2\">\ud83d\udea8<\/div>\n <h4 class=\"font-bold mb-2\">3. \u0627\u0644\u062a\u062f\u062e\u0644<\/h4>\n <p class=\"text-sm text-gray-600\">\u0633\u0631\u0639\u0629 \u0641\u0643 \u0627\u0644\u0639\u0632\u0644\u0629 \u0639\u0646 \u0627\u0644\u062f\u0648\u0627\u0648\u064a\u0631 \u0627\u0644\u0645\u062a\u0636\u0631\u0631\u0629 \u0648\u0625\u0635\u0644\u0627\u062d \u0627\u0644\u0634\u0628\u0643\u0627\u062a.<\/p>\n <\/div>\n <div class=\"bg-white p-4 rounded-lg shadow border-t-4 border-green-500 text-center\">\n <div class=\"text-4xl mb-2\">\ud83c\udf31<\/div>\n <h4 class=\"font-bold mb-2\">4. \u0627\u0644\u062a\u0643\u064a\u0641<\/h4>\n <p class=\"text-sm text-gray-600\">\u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0644\u062a\u062a\u062d\u0645\u0644 \u0627\u0644\u0638\u0648\u0627\u0647\u0631 \u0627\u0644\u0642\u0635\u0648\u0649 (Resilience).<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/main>\n\n <footer class=\"bg-[#102A43] text-white py-8 mt-12 text-center\">\n <p class=\"opacity-75\">\u062a\u0645 \u0625\u0646\u0634\u0627\u0621 \u0647\u0630\u0627 “\u0627\u0644\u0625\u0646\u0641\u0648\u063a\u0631\u0627\u0641\u064a\u0643” \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0644\u062a\u0648\u0636\u064a\u062d \u062f\u064a\u0646\u0627\u0645\u064a\u0627\u062a \u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628.<\/p>\n <p class=\"text-sm mt-2 opacity-50\">\u0644\u0627 \u064a\u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 SVG \u0623\u0648 Mermaid JS. \u062c\u0645\u064a\u0639 \u0627\u0644\u0631\u0633\u0648\u0645\u0627\u062a \u0645\u0628\u0646\u064a\u0629 \u0628\u0648\u0627\u0633\u0637\u0629 Canvas.<\/p>\n <\/footer>\n\n \n <script>\n \/\/ --- UTILITY: Label Wrapping Logic (>16 chars) ---\n function wrapLabel(str, maxLen = 16) {\n if (str.length <= maxLen) return str;\n const words = str.split(' ');\n const lines = [];\n let currentLine = words[0];\n\n for (let i = 1; i < words.length; i++) {\n if (currentLine.length + 1 + words[i].length <= maxLen) {\n currentLine += ' ' + words[i];\n } else {\n lines.push(currentLine);\n currentLine = words[i];\n }\n }\n lines.push(currentLine);\n return lines;\n }\n\n \/\/ --- UTILITY: Tooltip Callback for Multiline ---\n const commonTooltipOptions = {\n callbacks: {\n title: function(tooltipItems) {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n } else {\n return label;\n }\n }\n }\n };\n\n \/\/ --- CHART 1: CAUSES (Radar) ---\n const ctxCauses = document.getElementById('causesRadarChart').getContext('2d');\n const causesLabels = [\n '\u0627\u0644\u062a\u063a\u064a\u0631 \u0627\u0644\u0645\u0646\u0627\u062e\u064a (Extreme Weather)', \n '\u0627\u0644\u062a\u0648\u0633\u0639 \u0627\u0644\u0639\u0645\u0631\u0627\u0646\u064a (Urbanization)', \n '\u0637\u0628\u064a\u0639\u0629 \u0627\u0644\u062a\u0631\u0628\u0629 \u0648\u0627\u0644\u0648\u062f\u064a\u0627\u0646 (Geography)', \n '\u0647\u0634\u0627\u0634\u0629 \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 (Infrastructure)', \n '\u063a\u064a\u0627\u0628 \u0642\u0646\u0648\u0627\u062a \u0627\u0644\u062a\u0635\u0631\u064a\u0641 (Drainage)'\n ].map(l => wrapLabel(l));\n\n new Chart(ctxCauses, {\n type: 'radar',\n data: {\n labels: causesLabels,\n datasets: [{\n label: '\u062f\u0631\u062c\u0629 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 (1-10)',\n data: [9, 7, 8, 6, 7],\n fill: true,\n backgroundColor: 'rgba(0, 86, 148, 0.2)',\n borderColor: '#005694',\n pointBackgroundColor: '#FFB300',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: '#005694'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: { display: true },\n suggestedMin: 0,\n suggestedMax: 10,\n grid: { color: 'rgba(0,0,0,0.05)' },\n pointLabels: {\n font: { family: 'Cairo', size: 11 }\n }\n }\n },\n plugins: {\n tooltip: commonTooltipOptions,\n legend: { display: false }\n }\n }\n });\n\n \/\/ --- CHART 2: RAINFALL (Bar) ---\n const ctxRain = document.getElementById('rainfallBarChart').getContext('2d');\n const rainLabels = ['\u0637\u0627\u0637\u0627 (Tata)', '\u0627\u0644\u0631\u0627\u0634\u064a\u062f\u064a\u0629 (Errachidia)', '\u0648\u0631\u0632\u0627\u0632\u0627\u062a (Ouarzazate)', '\u062a\u0632\u0646\u064a\u062a (Tiznit)'].map(l => wrapLabel(l));\n\n new Chart(ctxRain, {\n type: 'bar',\n data: {\n labels: rainLabels,\n datasets: [\n {\n label: '\u0627\u0644\u062a\u0633\u0627\u0642\u0637\u0627\u062a \u0627\u0644\u0645\u0633\u062c\u0644\u0629 (\u0645\u0644\u0645)',\n data: [110, 85, 90, 70],\n backgroundColor: '#005694',\n borderRadius: 6\n },\n {\n label: '\u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0633\u0646\u0648\u064a \u0627\u0644\u0645\u0639\u062a\u0627\u062f',\n data: [150, 130, 160, 200], \/\/ Approximate annual averages\n backgroundColor: '#E0E0E0',\n borderRadius: 6\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: { \n beginAtZero: true,\n grid: { color: '#f0f0f0' },\n title: { display: true, text: '\u0645\u064a\u0644\u064a\u0645\u062a\u0631 (mm)' }\n },\n x: {\n grid: { display: false }\n }\n },\n plugins: {\n tooltip: commonTooltipOptions,\n legend: { position: 'top', align: 'end' }\n }\n }\n });\n\n \/\/ --- CHART 3: DAMS (Line) ---\n const ctxDams = document.getElementById('damsLineChart').getContext('2d');\n \/\/ Simulated dates for Sept 2024 flood event\n const damDates = ['1 \u0634\u062a\u0646\u0628\u0631', '5 \u0634\u062a\u0646\u0628\u0631', '10 \u0634\u062a\u0646\u0628\u0631', '15 \u0634\u062a\u0646\u0628\u0631', '20 \u0634\u062a\u0646\u0628\u0631', '25 \u0634\u062a\u0646\u0628\u0631'].map(l => wrapLabel(l));\n\n new Chart(ctxDams, {\n type: 'line',\n data: {\n labels: damDates,\n datasets: [\n {\n label: '\u0633\u062f \u0627\u0644\u0645\u0646\u0635\u0648\u0631 \u0627\u0644\u0630\u0647\u0628\u064a',\n data: [12, 12, 14, 35, 42, 45], \/\/ Rapid increase\n borderColor: '#005694',\n backgroundColor: 'rgba(0, 86, 148, 0.1)',\n fill: true,\n tension: 0.4\n },\n {\n label: '\u0633\u062f \u064a\u0648\u0633\u0641 \u0628\u0646 \u062a\u0627\u0634\u0641\u064a\u0646',\n data: [18, 18, 19, 24, 26, 27], \/\/ Moderate increase\n borderColor: '#FFB300',\n backgroundColor: 'rgba(255, 179, 0, 0)',\n borderDash: [5, 5],\n tension: 0.4\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n title: { display: true, text: '\u0646\u0633\u0628\u0629 \u0627\u0644\u0645\u0644\u0621 (%)' }\n }\n },\n plugins: {\n tooltip: commonTooltipOptions\n }\n }\n });\n\n \/\/ --- CHART 4: IMPACT (Donut) ---\n const ctxImpact = document.getElementById('impactDonutChart').getContext('2d');\n const impactLabels = [\n '\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0637\u0631\u0642\u064a\u0629 (Roads)', \n '\u0627\u0644\u0645\u0646\u0627\u0632\u0644 \u0648\u0627\u0644\u0645\u0628\u0627\u0646\u064a (Housing)', \n '\u0627\u0644\u0642\u0637\u0627\u0639 \u0627\u0644\u0641\u0644\u0627\u062d\u064a (Agriculture)', \n '\u0634\u0628\u0643\u0627\u062a \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0648\u0627\u0644\u0645\u0627\u0621 (Utilities)'\n ].map(l => wrapLabel(l));\n\n new Chart(ctxImpact, {\n type: 'doughnut',\n data: {\n labels: impactLabels,\n datasets: [{\n data: [35, 25, 30, 10],\n backgroundColor: [\n '#005694', \/\/ Blue (Roads)\n '#D32F2F', \/\/ Red (Housing)\n '#388E3C', \/\/ Green (Agri)\n '#FFB300' \/\/ Amber (Util)\n ],\n borderWidth: 0\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n tooltip: commonTooltipOptions,\n legend: { position: 'bottom' }\n }\n }\n });\n\n \/\/ --- CHART 5: FUTURE OUTLOOK (Plotly Stacked Area) ---\n \/\/ Using Plotly to satisfy requirements and show advanced config\n \n const years = [2025, 2026, 2027, 2028, 2029, 2030];\n \n \/\/ Data for different investment types (Arbitrary units\/Budget index)\n const trace1 = {\n x: years,\n y: [20, 25, 30, 35, 40, 45],\n name: '\u0627\u0644\u0633\u062f\u0648\u062f \u0627\u0644\u062a\u0644\u064a\u0629 \u0648\u0627\u0644\u062d\u0648\u0627\u062c\u0632 (Dams)',\n type: 'scatter',\n mode: 'lines',\n stackgroup: 'one',\n line: {color: '#005694'}\n };\n\n const trace2 = {\n x: years,\n y: [5, 10, 15, 25, 30, 35],\n name: '\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0625\u0646\u0630\u0627\u0631 \u0627\u0644\u0645\u0628\u0643\u0631 (Early Warning)',\n type: 'scatter',\n mode: 'lines',\n stackgroup: 'one',\n line: {color: '#FFB300'}\n };\n\n const trace3 = {\n x: years,\n y: [10, 12, 15, 18, 20, 22],\n name: '\u0625\u0639\u0627\u062f\u0629 \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0648\u062f\u064a\u0627\u0646 (Urban Planning)',\n type: 'scatter',\n mode: 'lines',\n stackgroup: 'one',\n line: {color: '#388E3C'}\n };\n\n const layoutPlotly = {\n font: {family: 'Cairo'},\n margin: {l: 40, r: 20, t: 30, b: 40},\n showlegend: true,\n legend: {orientation: \"h\", y: -0.2},\n xaxis: {\n title: '\u0627\u0644\u0633\u0646\u0629',\n showgrid: false\n },\n yaxis: {\n title: '\u062d\u062c\u0645 \u0627\u0644\u0627\u0633\u062a\u062b\u0645\u0627\u0631 (\u0645\u0624\u0634\u0631)',\n showgrid: true,\n gridcolor: '#f0f0f0'\n },\n paper_bgcolor: 'rgba(0,0,0,0)',\n plot_bgcolor: 'rgba(0,0,0,0)'\n };\n\n const configPlotly = {\n responsive: true,\n displayModeBar: false \/\/ Clean look\n };\n\n Plotly.newPlot('futurePlotlyChart', [trace1, trace2, trace3], layoutPlotly, configPlotly);\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>\u0627\u0644\u0641\u0636\u064a\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628: \u062a\u062d\u0644\u064a\u0644 \u0648\u062a\u0648\u0642\u0639\u0627\u062a \u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628 \u0628\u064a\u0646 \u062a\u062d\u062f\u064a\u0627\u062a \u0627\u0644\u062a\u063a\u064a\u0631 \u0627\u0644\u0645\u0646\u0627\u062e\u064a \u0648\u0641\u0631\u0635 \u0625\u0646\u0639\u0627\u0634 \u0627\u0644\u0641\u0631\u0634\u0629 \u0627\u0644\u0645\u0627\u0626\u064a\u0629: \u062a\u062d\u0644\u064a\u0644 \u0634\u0627\u0645\u0644 \u0644\u0644\u0648\u0636\u0639 \u0627\u0644\u0631\u0627\u0647\u0646 \u0648\u0627\u0644\u062a\u0648\u0642\u0639\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629 \ud83c\udf27\ufe0f \u062a\u0633\u0627\u0642\u0637\u0627\u062a \u0642\u064a\u0627\u0633\u064a\u0629 \ud83c\udf0a \u0645\u0644\u0621 \u0627\u0644\u0633\u062f\u0648\u062f \ud83d\ude9c \u062a\u062d\u062f\u064a\u0627\u062a \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0633\u064a\u0627\u0642 \u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0645\u0646\u0627\u062e\u064a \u0634\u0647\u062f \u0627\u0644\u0645\u063a\u0631\u0628 \u0641\u064a \u0627\u0644\u0622\u0648\u0646\u0629 \u0627\u0644\u0623\u062e\u064a\u0631\u0629\u060c \u0648\u062e\u0627\u0635\u0629 \u0641\u064a \u0634\u062a\u0646\u0628\u0631 2024\u060c \u0638\u0648\u0627\u0647\u0631 \u0645\u0646\u0627\u062e\u064a\u0629 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629 <a class=\"mh-excerpt-more\" href=\"https:\/\/www.gil24.com\/360\/%d8%a7%d9%84%d9%81%d9%8a%d8%b6%d8%a7%d9%86%d8%a7%d8%aa-%d8%a8%d8%a7%d9%84%d9%85%d8%ba%d8%b1%d8%a8\/\" title=\"\u0627\u0644\u0641\u064a\u0636\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0645\u063a\u0631\u0628\">[…]<\/a><\/p>\n<\/div>","protected":false},"author":2,"featured_media":68278,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":[],"rop_publish_now_history":[],"rop_publish_now_status":"pending","footnotes":""},"categories":[225,710,244],"tags":[],"class_list":["post-68277","post","type-post","status-publish","format-standard","has-post-thumbnail","category-225","category-710","category-sante-environnement-climat"],"_links":{"self":[{"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/posts\/68277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/comments?post=68277"}],"version-history":[{"count":3,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/posts\/68277\/revisions"}],"predecessor-version":[{"id":68283,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/posts\/68277\/revisions\/68283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/media\/68278"}],"wp:attachment":[{"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/media?parent=68277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/categories?post=68277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gil24.com\/360\/wp-json\/wp\/v2\/tags?post=68277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}