\u0634\u0631\u0643\u0627\u0621 \u0633\u0646\u062f\u0628\u0627\u062f \u0645\u0646 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645<\/title>\r\n \r\n \r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Changa:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Changa', sans-serif;\r\n background-color: #f0f2f5;\r\n background-image: url('https:\/\/www.transparenttextures.com\/patterns\/subtle-prism.png');\r\n }\r\n .chart-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 800px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n height: 400px;\r\n max-height: 50vh;\r\n }\r\n @media (max-width: 768px) {\r\n .chart-container {\r\n height: 300px;\r\n }\r\n }\r\n .btn-active {\r\n background-color: #070658 !important;\r\n color: white !important;\r\n border-color: #070658 !important;\r\n }\r\n .university-card {\r\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n cursor: pointer;\r\n }\r\n .university-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n }\r\n .modal-overlay {\r\n transition: opacity 0.3s ease;\r\n }\r\n .modal-content {\r\n transition: transform 0.3s ease;\r\n }\r\n .loader {\r\n border: 4px solid #f3f3f3;\r\n border-top: 4px solid #070658;\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n animation: spin 1s linear infinite;\r\n }\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-stone-800\">\r\n\r\n <div class=\"container mx-auto p-4 md:p-8\">\r\n\r\n <header class=\"text-center mb-8 md:mb-12\">\r\n <h1 class=\"text-3xl md:text-5xl font-bold text-[#070658] mb-2\">\u0634\u0631\u0643\u0627\u0621 \u0633\u0646\u062f\u0628\u0627\u062f \u0645\u0646 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a<\/h1>\r\n <p class=\"text-lg md:text-xl text-stone-600 max-w-3xl mx-auto\">\r\n \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0623\u0648\u0644\u0649\r\n <\/p>\r\n <\/header>\r\n\r\n <section id=\"stats\" class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 md:mb-12\">\r\n <div class=\"bg-white\/80 backdrop-blur-sm p-6 rounded-xl shadow-md text-center border border-gray-200\">\r\n <h2 class=\"text-5xl font-bold text-[#070658]\" id=\"total-universities\">0<\/h2>\r\n <p class=\"text-stone-500 text-lg mt-2\">\u062c\u0627\u0645\u0639\u0629 \u0634\u0631\u064a\u0643\u0629<\/p>\r\n <\/div>\r\n <div class=\"bg-white\/80 backdrop-blur-sm p-6 rounded-xl shadow-md text-center border border-gray-200\">\r\n <h2 class=\"text-5xl font-bold text-[#95B451]\" id=\"total-countries\">0<\/h2>\r\n <p class=\"text-stone-500 text-lg mt-2\">\u062f\u0648\u0644\u0629 \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <main class=\"bg-white\/80 backdrop-blur-sm p-4 sm:p-6 md:p-8 rounded-2xl shadow-lg border border-gray-200\">\r\n <div id=\"dashboard-intro\" class=\"mb-8\">\r\n <h3 class=\"text-2xl font-bold text-center mb-4 text-[#070658]\">\u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/h3>\r\n <p class=\"text-center text-stone-600 max-w-4xl mx-auto\">\r\n \u0647\u0630\u0647 \u0627\u0644\u0644\u0648\u062d\u0629 \u062a\u0645\u0646\u062d\u0643 \u0646\u0638\u0631\u0629 \u0634\u0627\u0645\u0644\u0629 \u0639\u0644\u0649 \u062a\u0648\u0632\u064a\u0639 \u0634\u0631\u0643\u0627\u0626\u0646\u0627. \u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u0623\u0648 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0644\u062a\u0635\u0641\u064a\u0629 \u0627\u0644\u0642\u0627\u0626\u0645\u0629. \u0627\u0646\u0642\u0631 \u0639\u0644\u0649 \u0623\u064a \u062c\u0627\u0645\u0639\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0646\u0628\u0630\u0629 \u0633\u0631\u064a\u0639\u0629 \u0639\u0646\u0647\u0627 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a.\r\n <\/p>\r\n <\/div>\r\n\r\n <section id=\"chart-section\" class=\"mb-8\">\r\n <div class=\"chart-container\">\r\n <canvas id=\"universitiesChart\"><\/canvas>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"filters-and-search\">\r\n <div id=\"country-filters\" class=\"flex flex-wrap justify-center gap-2 mb-6\">\r\n <\/div>\r\n <div class=\"relative max-w-lg mx-auto mb-8\">\r\n <input type=\"text\" id=\"search-box\" placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u062c\u0627\u0645\u0639\u0629...\" class=\"w-full p-3 pr-10 border-2 bg-white border-stone-300 rounded-lg focus:ring-2 focus:ring-[#070658] focus:border-[#070658] transition\">\r\n <span class=\"absolute top-1\/2 right-3 -translate-y-1\/2 text-stone-400\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"university-list-section\">\r\n <h3 class=\"text-xl font-bold text-center mb-4\" id=\"list-title\">\u062c\u0645\u064a\u0639 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a<\/h3>\r\n <div id=\"university-list\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4\">\r\n <\/div>\r\n <p id=\"no-results\" class=\"text-center text-stone-500 py-8 hidden\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c \u0645\u0637\u0627\u0628\u0642\u0629 \u0644\u0628\u062d\u062b\u0643.<\/p>\r\n <\/section>\r\n <\/main>\r\n \r\n <section id=\"gemini-suggester\" class=\"my-12\">\r\n <div class=\"bg-white\/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-200\">\r\n <h3 class=\"text-2xl font-bold text-center mb-4 text-[#070658]\">\u2728 \u0627\u0642\u062a\u0631\u062d \u0644\u064a \u0648\u062c\u0647\u0629 \u062f\u0631\u0627\u0633\u064a\u0629<\/h3>\r\n <p class=\"text-center text-stone-600 max-w-2xl mx-auto mb-6\">\u0623\u062e\u0628\u0631\u0646\u0627 \u0628\u0645\u062c\u0627\u0644 \u0627\u0647\u062a\u0645\u0627\u0645\u0643\u060c \u0648\u0633\u064a\u0642\u0648\u0645 \u0645\u0633\u062a\u0634\u0627\u0631\u0646\u0627 \u0627\u0644\u0630\u0643\u064a \u0628\u0627\u0642\u062a\u0631\u0627\u062d \u0623\u0641\u0636\u0644 \u0627\u0644\u0648\u062c\u0647\u0627\u062a \u0648\u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u0644\u0643.<\/p>\r\n <div class=\"flex flex-col sm:flex-row gap-2 max-w-lg mx-auto\">\r\n <input type=\"text\" id=\"major-input\" placeholder=\"\u0645\u062b\u0627\u0644: \u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0643\u0645\u0628\u064a\u0648\u062a\u0631\u060c \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0623\u0639\u0645\u0627\u0644...\" class=\"w-full p-3 border-2 bg-white border-stone-300 rounded-lg focus:ring-2 focus:ring-[#070658] focus:border-[#070658] transition\">\r\n <button id=\"suggestion-btn\" class=\"bg-[#95B451] text-white font-bold py-3 px-6 rounded-lg hover:bg-[#829e47] transition-colors flex items-center justify-center\">\r\n <span>\u0627\u0639\u062b\u0631 \u0639\u0644\u0649 \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a<\/span>\r\n <\/button>\r\n <\/div>\r\n <div id=\"suggestions-result\" class=\"mt-6\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer class=\"text-center mt-12\">\r\n <p class=\"text-stone-600 bg-white\/50 px-4 py-2 rounded-full inline-block\">© 2025 \u0634\u0631\u0643\u0629 \u0633\u0646\u062f\u0628\u0627\u062f. \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629.<\/p>\r\n <\/footer>\r\n\r\n <\/div>\r\n \r\n \r\n <div id=\"university-modal\" class=\"modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden opacity-0\">\r\n <div class=\"modal-content bg-white rounded-lg shadow-2xl w-full max-w-2xl p-6 transform scale-95\">\r\n <div class=\"flex justify-between items-center border-b pb-3 mb-4\">\r\n <h3 id=\"modal-title\" class=\"text-2xl font-bold text-[#070658]\"><\/h3>\r\n <button id=\"modal-close-btn\" class=\"text-gray-500 hover:text-gray-800\">×<\/button>\r\n <\/div>\r\n <div id=\"modal-body\" class=\"text-right\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <script>\r\n const universityData = {\r\n \"\u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0645\u062a\u062d\u062f\u0629\": [\"University of Manchester\", \"University of Birmingham\", \"University of Leeds\", \"University of Liverpool\", \"University of Exeter\", \"The University of Edinburgh\", \"University of Bristol\", \"Newcastle University\", \"University of Bath\", \"University of Ulster\", \"Coventry University\", \"Keele University\", \"Lancaster University\", \"University of Surrey\", \"University of Kent\", \"Northumbria University Newcastle\", \"The University of Nottingham\", \"Queen Mary University of London\", \"Bournemouth University\", \"University of York\", \"Cardiff University\", \"University of Sheffield\", \"University of Southampton\", \"University of Glasgow\", \"University College London\", \"University of East Anglia\", \"The Manchester Metropolitan University\", \"University of Stirling\", \"City St George's, University of London\", \"Queen's University Belfast\", \"Nottingham Trent University\", \"University of Brighton\", \"University of Essex\", \"University of Westminster\", \"Aston University\", \"Loughborough University\", \"University of Hull\", \"University of Central Lancashire\", \"University of Sunderland\", \"University of Durham\", \"Kingston University London\", \"Liverpool John Moores University\", \"University of Aberdeen\", \"Leeds Beckett University\", \"Royal Holloway, University of London\", \"University of Strathclyde\", \"University of Sussex\", \"University of Reading\", \"Solent University\", \"University of the Arts London\"],\r\n \"\u0627\u0644\u0648\u0644\u0627\u064a\u0627\u062a \u0627\u0644\u0645\u062a\u062d\u062f\u0629\": [\"Arizona State University\", \"Colorado State University\", \"University of Arizona\", \"University of Massachusetts Amherst\", \"Johns Hopkins University\", \"Rutgers University\u2013New Brunswick\", \"Oregon State University\", \"Southeast Missouri State University\", \"University of Wisconsin-Stout\", \"University of Central Missouri\", \"South Dakota State University\", \"California State University Fullerton\", \"University of Wisconsin\u2013Oshkosh\", \"Drew University\", \"George Mason University\", \"Illinois State University\", \"Texas State University - San Marcos\", \"University of Alabama at Birmingham\", \"University of Oklahoma - Norman Campus\", \"Saint Louis University\", \"Adelphi University\", \"Auburn University\", \"Auburn University at Montgomery\", \"Baylor University\", \"Rochester Institute of Technology\", \"California State University Long Beach\", \"California State University, San Bernardino\", \"California State University San Marcos\", \"Carroll University\", \"Cleveland State University\", \"Long Island University Brooklyn\", \"DePaul University\", \"Suffolk University\", \"East Tennessee State University\", \"Duquesne University\", \"Embry-Riddle Aeronautical University - Daytona Beach\", \"California Lutheran University\", \"California State University - Fresno\", \"California State University - Northridge\", \"California State University, Sacramento\", \"Hawaii Pacific University\", \"Iowa State University\", \"Indiana State University\", \"Jacksonville State University\", \"Middle Tennessee State University\", \"Pace University\", \"Rowan University\", \"San Diego State University\", \"San Francisco State University\", \"San Jose State University\"],\r\n \"\u0643\u0646\u062f\u0627\": [\"University of Alberta\", \"Capilano University\", \"University of Windsor\", \"University of Victoria\", \"University of New Brunswick\", \"Lakehead University\", \"University of Saskatchewan\", \"Kwantlen Polytechnic University\", \"University of The Fraser Valley\", \"Wilfrid Laurier University\", \"The University of Regina\", \"Thompson Rivers University\", \"Fairleigh Dickinson University - Vancouver\", \"Toronto Metropolitan University\", \"Vancouver Island University\", \"Saint Marys University\", \"Algonquin College\", \"Seneca College\", \"Humber College\", \"Sheridan College\"],\r\n \"\u0623\u0633\u062a\u0631\u0627\u0644\u064a\u0627\": [\"University of Tasmania\", \"University of Adelaide\", \"James Cook University\", \"La Trobe University\", \"Western Sydney University\", \"The Royal Melbourne Institute of Technology (RMIT University)\", \"Swinburne University of Technology\", \"Deakin University\", \"Griffith University\", \"Torrens University Australia\", \"Curtin University\", \"The University of New South Wales\", \"University of South Australia\", \"The University of New England\", \"Murdoch University\", \"Bond University\", \"The University of Queensland\", \"University of Wollongong\", \"Southern Cross University\", \"Macquarie University\"],\r\n \"\u0627\u0644\u0635\u064a\u0646\": [\"Nanjing University of Aeronautics and Astronautics\", \"Tsinghua University\", \"Huazhong University Of Science And Technology\", \"Huazhong Agricultural University\", \"Harbin Institute of Technology\", \"Wuhan University\", \"Wuhan University Of Technology\", \"Tongji University\", \"Shanghai Jiao tong University\", \"The Chinese University of Hong Kong (CUHK)\", \"Peking University\", \"Fudan University\"],\r\n \"\u0625\u0633\u0628\u0627\u0646\u064a\u0627\": [\"Universitat Aut\u00f2noma de Barcelona\", \"Universidad de Granada\", \"University Complutense of Madrid\", \"University of Barcelona\", \"Universidad de M\u00e1laga\", \"University Polytechnic of Valencia\", \"University of Valencia\", \"Universidad de Salamanca\", \"University Pompeu Fabra\", \"Universidad de Alicante\"],\r\n \"\u0633\u0648\u064a\u0633\u0631\u0627\": [\"C\u00e9sar Ritz Colleges Switzerland\", \"Culinary Arts Academy\", \"Swiss Hotel Management School\", \"HTMi Hotel and Tourism Management Institute Switzerland\", \"The Glion Institute of Higher Education\"],\r\n \"\u0643\u0648\u0631\u064a\u0627 \u0627\u0644\u062c\u0646\u0648\u0628\u064a\u0629\": [\"Sung Kyun Kwan University\", \"Sejong University\", \"Kyung Hee University\", \"Sookmyung womens University\"],\r\n \"\u0623\u0644\u0645\u0627\u0646\u064a\u0627\": [\"Macromedia University of Applied Sciences\", \"SRH University\", \"EBS University of Business and Law\"],\r\n \"\u0647\u0648\u0644\u0646\u062f\u0627\": [\"The University of Amsterdam\", \"University of Twente\", \"Radboud University Nijmegen\", \"Tio University of Applied Sciences\"],\r\n \"\u0641\u0631\u0646\u0633\u0627\": [\"INSEAD (France)\", \"SKEMA Business School\", \"Istituto Marangoni Milano\", \"Universit\u00e9 de Cergy-Pontoise\", \"EMLYON Business School\"],\r\n \"\u0625\u064a\u0637\u0627\u0644\u064a\u0627\": [\"Domus academy Milano\"]\r\n };\r\n\r\n const apiKey = \"\"; \/\/ Leave this as-is\r\n const apiUrl = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;\r\n\r\n let currentFilter = 'all';\r\n let chartInstance = null;\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n setupStats();\r\n setupFilters();\r\n renderUniversityList();\r\n setupChart();\r\n setupSearch();\r\n setupModal();\r\n setupSuggestionFeature();\r\n });\r\n \r\n async function callGeminiAPI(payload, retries = 3, delay = 1000) {\r\n for (let i = 0; i < retries; i++) {\r\n try {\r\n const response = await fetch(apiUrl, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(payload)\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error(`HTTP error! status: ${response.status}`);\r\n }\r\n return await response.json();\r\n } catch (error) {\r\n if (i === retries - 1) throw error;\r\n await new Promise(res => setTimeout(res, delay * Math.pow(2, i)));\r\n }\r\n }\r\n }\r\n\r\n function animateValue(obj, start, end, duration) {\r\n let startTimestamp = null;\r\n const step = (timestamp) => {\r\n if (!startTimestamp) startTimestamp = timestamp;\r\n const progress = Math.min((timestamp - startTimestamp) \/ duration, 1);\r\n obj.innerHTML = Math.floor(progress * (end - start) + start).toLocaleString('ar-EG');\r\n if (progress < 1) {\r\n window.requestAnimationFrame(step);\r\n }\r\n };\r\n window.requestAnimationFrame(step);\r\n }\r\n\r\n function setupStats() {\r\n const totalUniversities = Object.values(universityData).reduce((sum, list) => sum + list.length, 0);\r\n const totalCountries = Object.keys(universityData).length;\r\n\r\n animateValue(document.getElementById('total-universities'), 0, totalUniversities, 1500);\r\n animateValue(document.getElementById('total-countries'), 0, totalCountries, 1500);\r\n }\r\n\r\n function setupFilters() {\r\n const filtersContainer = document.getElementById('country-filters');\r\n const countries = ['all', ...Object.keys(universityData)];\r\n countries.forEach(country => {\r\n const button = document.createElement('button');\r\n button.textContent = country === 'all' ? '\u062c\u0645\u064a\u0639 \u0627\u0644\u062f\u0648\u0644' : country;\r\n button.dataset.country = country;\r\n button.className = 'px-4 py-2 border-2 bg-white border-stone-300 rounded-lg font-semibold transition hover:bg-[#070658] hover:text-white hover:border-[#070658]';\r\n if (country === 'all') {\r\n button.classList.add('btn-active');\r\n }\r\n button.addEventListener('click', () => {\r\n currentFilter = country;\r\n updateActiveButton();\r\n renderUniversityList();\r\n updateChartSelection();\r\n });\r\n filtersContainer.appendChild(button);\r\n });\r\n }\r\n \r\n function updateActiveButton() {\r\n document.querySelectorAll('#country-filters button').forEach(btn => {\r\n if (btn.dataset.country === currentFilter) {\r\n btn.classList.add('btn-active');\r\n } else {\r\n btn.classList.remove('btn-active');\r\n }\r\n });\r\n }\r\n \r\n function getCountryForUniversity(universityName) {\r\n for (const country in universityData) {\r\n if (universityData[country].includes(universityName)) {\r\n return country;\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n function renderUniversityList() {\r\n const listContainer = document.getElementById('university-list');\r\n const listTitle = document.getElementById('list-title');\r\n const noResults = document.getElementById('no-results');\r\n const searchTerm = document.getElementById('search-box').value.toLowerCase();\r\n \r\n listContainer.innerHTML = '';\r\n \r\n let universitiesToShow = [];\r\n if (currentFilter === 'all') {\r\n listTitle.textContent = '\u062c\u0645\u064a\u0639 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u0627\u0644\u0634\u0631\u064a\u0643\u0629';\r\n universitiesToShow = Object.entries(universityData).flatMap(([country, unis]) => unis.map(uni => ({ name: uni, country })));\r\n } else {\r\n listTitle.textContent = `\u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u0641\u064a ${currentFilter}`;\r\n universitiesToShow = (universityData[currentFilter] || []).map(uni => ({ name: uni, country: currentFilter }));\r\n }\r\n\r\n const filteredBySearch = universitiesToShow.filter(uni => uni.name.toLowerCase().includes(searchTerm));\r\n\r\n if (filteredBySearch.length === 0) {\r\n noResults.style.display = 'block';\r\n } else {\r\n noResults.style.display = 'none';\r\n }\r\n\r\n filteredBySearch.forEach(uniObj => {\r\n const card = document.createElement('div');\r\n card.className = 'university-card bg-white\/90 p-4 rounded-lg border border-stone-200 text-center';\r\n card.dataset.universityName = uniObj.name;\r\n card.dataset.countryName = uniObj.country;\r\n card.innerHTML = `<h4 class=\"font-semibold text-stone-700\">${uniObj.name}<\/h4>`;\r\n card.addEventListener('click', () => showUniversityModal(uniObj.name, uniObj.country));\r\n listContainer.appendChild(card);\r\n });\r\n }\r\n\r\n function setupChart() {\r\n const ctx = document.getElementById('universitiesChart').getContext('2d');\r\n const countries = Object.keys(universityData);\r\n const counts = countries.map(country => universityData[country].length);\r\n \r\n const inactiveColor = 'rgba(149, 180, 81, 0.7)';\r\n const inactiveBorderColor = 'rgba(149, 180, 81, 1)';\r\n\r\n chartInstance = new Chart(ctx, {\r\n type: 'bar',\r\n data: {\r\n labels: countries,\r\n datasets: [{\r\n label: '\u0639\u062f\u062f \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a',\r\n data: counts,\r\n backgroundColor: countries.map(() => inactiveColor),\r\n borderColor: countries.map(() => inactiveBorderColor),\r\n borderWidth: 1.5,\r\n borderRadius: 4,\r\n }]\r\n },\r\n options: {\r\n indexAxis: 'y',\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n x: { beginAtZero: true, ticks: { color: '#333', font: { family: \"'Changa', sans-serif\"}}, grid: { color: '#e7e5e4' }},\r\n y: { ticks: { color: '#333', font: { family: \"'Changa', sans-serif\", size: 12 }}, grid: { display: false }}\r\n },\r\n plugins: {\r\n legend: { display: false },\r\n tooltip: { backgroundColor: '#070658', bodyFont: { family: \"'Changa', sans-serif\" }, titleFont: { family: \"'Changa', sans-serif\" }}\r\n },\r\n onClick: (event, elements) => {\r\n if (elements.length > 0) {\r\n const countryIndex = elements[0].index;\r\n const country = chartInstance.data.labels[countryIndex];\r\n currentFilter = country;\r\n updateActiveButton();\r\n renderUniversityList();\r\n updateChartSelection();\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n function updateChartSelection() {\r\n if (!chartInstance) return;\r\n const countries = chartInstance.data.labels;\r\n const activeColor = 'rgba(7, 6, 88, 0.9)';\r\n const inactiveColor = 'rgba(149, 180, 81, 0.7)';\r\n const activeBorder = 'rgba(7, 6, 88, 1)';\r\n const inactiveBorder = 'rgba(149, 180, 81, 1)';\r\n \r\n chartInstance.data.datasets[0].backgroundColor = countries.map(c => c === currentFilter ? activeColor : inactiveColor);\r\n chartInstance.data.datasets[0].borderColor = countries.map(c => c === currentFilter ? activeBorder : inactiveBorder);\r\n chartInstance.update();\r\n }\r\n\r\n function setupSearch() {\r\n document.getElementById('search-box').addEventListener('input', renderUniversityList);\r\n }\r\n \r\n \/\/ --- Gemini Features ---\r\n\r\n function setupModal() {\r\n const modal = document.getElementById('university-modal');\r\n const closeBtn = document.getElementById('modal-close-btn');\r\n \r\n const closeModal = () => {\r\n modal.classList.add('opacity-0');\r\n modal.querySelector('.modal-content').classList.add('scale-95');\r\n setTimeout(() => modal.classList.add('hidden'), 300);\r\n };\r\n\r\n closeBtn.addEventListener('click', closeModal);\r\n modal.addEventListener('click', (e) => {\r\n if (e.target === modal) closeModal();\r\n });\r\n }\r\n\r\n function showUniversityModal(universityName, countryName) {\r\n const modal = document.getElementById('university-modal');\r\n const modalTitle = document.getElementById('modal-title');\r\n const modalBody = document.getElementById('modal-body');\r\n\r\n modalTitle.textContent = universityName;\r\n modalBody.innerHTML = `\r\n <p class=\"mb-4 text-gray-600\">\u0627\u0644\u062f\u0648\u0644\u0629: ${countryName}<\/p>\r\n <div id=\"gemini-snapshot-result\" class=\"p-4 bg-gray-50 rounded-lg min-h-[100px] flex items-center justify-center\">\r\n <button id=\"generate-snapshot-btn\" class=\"bg-[#070658] text-white font-bold py-2 px-5 rounded-lg hover:bg-[#95B451] transition-colors\">\r\n \u2728 \u062a\u0648\u0644\u064a\u062f \u0646\u0628\u0630\u0629 \u0633\u0631\u064a\u0639\u0629\r\n <\/button>\r\n <\/div>\r\n `;\r\n\r\n modal.classList.remove('hidden');\r\n setTimeout(() => {\r\n modal.classList.remove('opacity-0');\r\n modal.querySelector('.modal-content').classList.remove('scale-95');\r\n }, 10);\r\n\r\n document.getElementById('generate-snapshot-btn').addEventListener('click', () => fetchUniversitySnapshot(universityName, countryName));\r\n }\r\n\r\n async function fetchUniversitySnapshot(universityName, countryName) {\r\n const resultDiv = document.getElementById('gemini-snapshot-result');\r\n resultDiv.innerHTML = '<div class=\"loader\"><\/div>';\r\n\r\n const prompt = `For a prospective international student, provide a brief, encouraging, and informative snapshot about \"${universityName}\" in \"${countryName}\". Highlight its key strengths, popular fields of study, and campus life in 2-4 sentences. The response must be in Arabic.`;\r\n \r\n const payload = { contents: [{ role: \"user\", parts: [{ text: prompt }] }] };\r\n\r\n try {\r\n const result = await callGeminiAPI(payload);\r\n const text = result.candidates[0].content.parts[0].text;\r\n resultDiv.innerHTML = `<p class=\"text-right\">${text}<\/p>`;\r\n } catch (error) {\r\n resultDiv.innerHTML = '<p class=\"text-red-500\">\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0646\u0628\u0630\u0629. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.<\/p>';\r\n }\r\n }\r\n \r\n function setupSuggestionFeature() {\r\n document.getElementById('suggestion-btn').addEventListener('click', fetchStudySuggestions);\r\n }\r\n\r\n async function fetchStudySuggestions() {\r\n const majorInput = document.getElementById('major-input');\r\n const resultDiv = document.getElementById('suggestions-result');\r\n const major = majorInput.value.trim();\r\n\r\n if (!major) {\r\n resultDiv.innerHTML = '<p class=\"text-center text-red-500\">\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0645\u062c\u0627\u0644 \u062f\u0631\u0627\u0633\u064a.<\/p>';\r\n return;\r\n }\r\n\r\n resultDiv.innerHTML = '<div class=\"flex justify-center\"><div class=\"loader\"><\/div><\/div>';\r\n \r\n const prompt = `Based on the provided list of countries and their universities, act as an expert academic advisor. For the field of study: \"${major}\", suggest the top 3 countries from the list that are renowned for this field. For each country, recommend one top university from its list. Provide the output in JSON format. The JSON should be an array of objects, where each object has 'country', 'university', and a 'reason' (in Arabic, max 30 words, explaining why this choice is excellent for the specified field). Here is the university data: ${JSON.stringify(universityData)}`;\r\n\r\n const payload = {\r\n contents: [{ role: \"user\", parts: [{ text: prompt }] }],\r\n generationConfig: {\r\n responseMimeType: \"application\/json\",\r\n responseSchema: {\r\n type: \"ARRAY\",\r\n items: {\r\n type: \"OBJECT\",\r\n properties: {\r\n \"country\": { \"type\": \"STRING\" },\r\n \"university\": { \"type\": \"STRING\" },\r\n \"reason\": { \"type\": \"STRING\" }\r\n },\r\n required: [\"country\", \"university\", \"reason\"]\r\n }\r\n }\r\n }\r\n };\r\n\r\n try {\r\n const result = await callGeminiAPI(payload);\r\n const suggestions = JSON.parse(result.candidates[0].content.parts[0].text);\r\n displaySuggestions(suggestions);\r\n } catch (error) {\r\n resultDiv.innerHTML = '<p class=\"text-center text-red-500\">\u0639\u0630\u0631\u0627\u064b\u060c \u0644\u0645 \u0646\u062a\u0645\u0643\u0646 \u0645\u0646 \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0627\u0642\u062a\u0631\u0627\u062d\u0627\u062a. \u062d\u0627\u0648\u0644 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0635\u0637\u0644\u062d \u0628\u062d\u062b \u0645\u062e\u062a\u0644\u0641.<\/p>';\r\n }\r\n }\r\n \r\n function displaySuggestions(suggestions) {\r\n const resultDiv = document.getElementById('suggestions-result');\r\n if (!suggestions || suggestions.length === 0) {\r\n resultDiv.innerHTML = '<p class=\"text-center text-red-500\">\u0639\u0630\u0631\u0627\u064b\u060c \u0644\u0645 \u064a\u062a\u0645 \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0627\u0642\u062a\u0631\u0627\u062d\u0627\u062a.<\/p>';\r\n return;\r\n }\r\n\r\n resultDiv.innerHTML = `\r\n <h4 class=\"text-lg font-bold text-center mb-4 text-[#070658]\">\u0623\u0641\u0636\u0644 \u0627\u0644\u0627\u0642\u062a\u0631\u0627\u062d\u0627\u062a \u0644\u0643:<\/h4>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n ${suggestions.map(item => `\r\n <div class=\"bg-white p-4 rounded-lg border border-gray-200 shadow-sm\">\r\n <h5 class=\"font-bold text-[#070658]\">${item.university}<\/h5>\r\n <p class=\"text-sm text-gray-500 mb-2\">${item.country}<\/p>\r\n <p class=\"text-sm text-gray-700\">${item.reason}<\/p>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n `;\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\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>\u0634\u0631\u0643\u0627\u0621 \u0633\u0646\u062f\u0628\u0627\u062f \u0645\u0646 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645 \u0634\u0631\u0643\u0627\u0621 \u0633\u0646\u062f\u0628\u0627\u062f \u0645\u0646 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 0 \u062c\u0627\u0645\u0639\u0629 \u0634\u0631\u064a\u0643\u0629 0 \u062f\u0648\u0644\u0629 \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645 \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0647\u0630\u0647 \u0627\u0644\u0644\u0648\u062d\u0629 \u062a\u0645\u0646\u062d\u0643 \u0646\u0638\u0631\u0629 \u0634\u0627\u0645\u0644\u0629 \u0639\u0644\u0649 \u062a\u0648\u0632\u064a\u0639 \u0634\u0631\u0643\u0627\u0626\u0646\u0627. \u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u0623\u0648 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0644\u062a\u0635\u0641\u064a\u0629 \u0627\u0644\u0642\u0627\u0626\u0645\u0629. \u0627\u0646\u0642\u0631 \u0639\u0644\u0649 \u0623\u064a \u062c\u0627\u0645\u0639\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0646\u0628\u0630\u0629 \u0633\u0631\u064a\u0639\u0629 \u0639\u0646\u0647\u0627 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a. \u062c\u0645\u064a\u0639 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u0644\u0627 \u062a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c \u0645\u0637\u0627\u0628\u0642\u0629 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-13001","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/pages\/13001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/comments?post=13001"}],"version-history":[{"count":15,"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/pages\/13001\/revisions"}],"predecessor-version":[{"id":13016,"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/pages\/13001\/revisions\/13016"}],"wp:attachment":[{"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/media?parent=13001"}],"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 \u0634\u0631\u0643\u0627\u0621 \u0633\u0646\u062f\u0628\u0627\u062f \u0645\u0646 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645<\/title>\r\n \r\n \r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Changa:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Changa', sans-serif;\r\n background-color: #f0f2f5;\r\n background-image: url('https:\/\/www.transparenttextures.com\/patterns\/subtle-prism.png');\r\n }\r\n .chart-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 800px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n height: 400px;\r\n max-height: 50vh;\r\n }\r\n @media (max-width: 768px) {\r\n .chart-container {\r\n height: 300px;\r\n }\r\n }\r\n .btn-active {\r\n background-color: #070658 !important;\r\n color: white !important;\r\n border-color: #070658 !important;\r\n }\r\n .university-card {\r\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n cursor: pointer;\r\n }\r\n .university-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n }\r\n .modal-overlay {\r\n transition: opacity 0.3s ease;\r\n }\r\n .modal-content {\r\n transition: transform 0.3s ease;\r\n }\r\n .loader {\r\n border: 4px solid #f3f3f3;\r\n border-top: 4px solid #070658;\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n animation: spin 1s linear infinite;\r\n }\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-stone-800\">\r\n\r\n <div class=\"container mx-auto p-4 md:p-8\">\r\n\r\n <header class=\"text-center mb-8 md:mb-12\">\r\n <h1 class=\"text-3xl md:text-5xl font-bold text-[#070658] mb-2\">\u0634\u0631\u0643\u0627\u0621 \u0633\u0646\u062f\u0628\u0627\u062f \u0645\u0646 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a<\/h1>\r\n <p class=\"text-lg md:text-xl text-stone-600 max-w-3xl mx-auto\">\r\n \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0623\u0648\u0644\u0649\r\n <\/p>\r\n <\/header>\r\n\r\n <section id=\"stats\" class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 md:mb-12\">\r\n <div class=\"bg-white\/80 backdrop-blur-sm p-6 rounded-xl shadow-md text-center border border-gray-200\">\r\n <h2 class=\"text-5xl font-bold text-[#070658]\" id=\"total-universities\">0<\/h2>\r\n <p class=\"text-stone-500 text-lg mt-2\">\u062c\u0627\u0645\u0639\u0629 \u0634\u0631\u064a\u0643\u0629<\/p>\r\n <\/div>\r\n <div class=\"bg-white\/80 backdrop-blur-sm p-6 rounded-xl shadow-md text-center border border-gray-200\">\r\n <h2 class=\"text-5xl font-bold text-[#95B451]\" id=\"total-countries\">0<\/h2>\r\n <p class=\"text-stone-500 text-lg mt-2\">\u062f\u0648\u0644\u0629 \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <main class=\"bg-white\/80 backdrop-blur-sm p-4 sm:p-6 md:p-8 rounded-2xl shadow-lg border border-gray-200\">\r\n <div id=\"dashboard-intro\" class=\"mb-8\">\r\n <h3 class=\"text-2xl font-bold text-center mb-4 text-[#070658]\">\u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/h3>\r\n <p class=\"text-center text-stone-600 max-w-4xl mx-auto\">\r\n \u0647\u0630\u0647 \u0627\u0644\u0644\u0648\u062d\u0629 \u062a\u0645\u0646\u062d\u0643 \u0646\u0638\u0631\u0629 \u0634\u0627\u0645\u0644\u0629 \u0639\u0644\u0649 \u062a\u0648\u0632\u064a\u0639 \u0634\u0631\u0643\u0627\u0626\u0646\u0627. \u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u0623\u0648 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0644\u062a\u0635\u0641\u064a\u0629 \u0627\u0644\u0642\u0627\u0626\u0645\u0629. \u0627\u0646\u0642\u0631 \u0639\u0644\u0649 \u0623\u064a \u062c\u0627\u0645\u0639\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0646\u0628\u0630\u0629 \u0633\u0631\u064a\u0639\u0629 \u0639\u0646\u0647\u0627 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a.\r\n <\/p>\r\n <\/div>\r\n\r\n <section id=\"chart-section\" class=\"mb-8\">\r\n <div class=\"chart-container\">\r\n <canvas id=\"universitiesChart\"><\/canvas>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"filters-and-search\">\r\n <div id=\"country-filters\" class=\"flex flex-wrap justify-center gap-2 mb-6\">\r\n <\/div>\r\n <div class=\"relative max-w-lg mx-auto mb-8\">\r\n <input type=\"text\" id=\"search-box\" placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u062c\u0627\u0645\u0639\u0629...\" class=\"w-full p-3 pr-10 border-2 bg-white border-stone-300 rounded-lg focus:ring-2 focus:ring-[#070658] focus:border-[#070658] transition\">\r\n <span class=\"absolute top-1\/2 right-3 -translate-y-1\/2 text-stone-400\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"university-list-section\">\r\n <h3 class=\"text-xl font-bold text-center mb-4\" id=\"list-title\">\u062c\u0645\u064a\u0639 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a<\/h3>\r\n <div id=\"university-list\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4\">\r\n <\/div>\r\n <p id=\"no-results\" class=\"text-center text-stone-500 py-8 hidden\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c \u0645\u0637\u0627\u0628\u0642\u0629 \u0644\u0628\u062d\u062b\u0643.<\/p>\r\n <\/section>\r\n <\/main>\r\n \r\n <section id=\"gemini-suggester\" class=\"my-12\">\r\n <div class=\"bg-white\/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-200\">\r\n <h3 class=\"text-2xl font-bold text-center mb-4 text-[#070658]\">\u2728 \u0627\u0642\u062a\u0631\u062d \u0644\u064a \u0648\u062c\u0647\u0629 \u062f\u0631\u0627\u0633\u064a\u0629<\/h3>\r\n <p class=\"text-center text-stone-600 max-w-2xl mx-auto mb-6\">\u0623\u062e\u0628\u0631\u0646\u0627 \u0628\u0645\u062c\u0627\u0644 \u0627\u0647\u062a\u0645\u0627\u0645\u0643\u060c \u0648\u0633\u064a\u0642\u0648\u0645 \u0645\u0633\u062a\u0634\u0627\u0631\u0646\u0627 \u0627\u0644\u0630\u0643\u064a \u0628\u0627\u0642\u062a\u0631\u0627\u062d \u0623\u0641\u0636\u0644 \u0627\u0644\u0648\u062c\u0647\u0627\u062a \u0648\u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u0644\u0643.<\/p>\r\n <div class=\"flex flex-col sm:flex-row gap-2 max-w-lg mx-auto\">\r\n <input type=\"text\" id=\"major-input\" placeholder=\"\u0645\u062b\u0627\u0644: \u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0643\u0645\u0628\u064a\u0648\u062a\u0631\u060c \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0623\u0639\u0645\u0627\u0644...\" class=\"w-full p-3 border-2 bg-white border-stone-300 rounded-lg focus:ring-2 focus:ring-[#070658] focus:border-[#070658] transition\">\r\n <button id=\"suggestion-btn\" class=\"bg-[#95B451] text-white font-bold py-3 px-6 rounded-lg hover:bg-[#829e47] transition-colors flex items-center justify-center\">\r\n <span>\u0627\u0639\u062b\u0631 \u0639\u0644\u0649 \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a<\/span>\r\n <\/button>\r\n <\/div>\r\n <div id=\"suggestions-result\" class=\"mt-6\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer class=\"text-center mt-12\">\r\n <p class=\"text-stone-600 bg-white\/50 px-4 py-2 rounded-full inline-block\">© 2025 \u0634\u0631\u0643\u0629 \u0633\u0646\u062f\u0628\u0627\u062f. \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629.<\/p>\r\n <\/footer>\r\n\r\n <\/div>\r\n \r\n \r\n <div id=\"university-modal\" class=\"modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden opacity-0\">\r\n <div class=\"modal-content bg-white rounded-lg shadow-2xl w-full max-w-2xl p-6 transform scale-95\">\r\n <div class=\"flex justify-between items-center border-b pb-3 mb-4\">\r\n <h3 id=\"modal-title\" class=\"text-2xl font-bold text-[#070658]\"><\/h3>\r\n <button id=\"modal-close-btn\" class=\"text-gray-500 hover:text-gray-800\">×<\/button>\r\n <\/div>\r\n <div id=\"modal-body\" class=\"text-right\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <script>\r\n const universityData = {\r\n \"\u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0645\u062a\u062d\u062f\u0629\": [\"University of Manchester\", \"University of Birmingham\", \"University of Leeds\", \"University of Liverpool\", \"University of Exeter\", \"The University of Edinburgh\", \"University of Bristol\", \"Newcastle University\", \"University of Bath\", \"University of Ulster\", \"Coventry University\", \"Keele University\", \"Lancaster University\", \"University of Surrey\", \"University of Kent\", \"Northumbria University Newcastle\", \"The University of Nottingham\", \"Queen Mary University of London\", \"Bournemouth University\", \"University of York\", \"Cardiff University\", \"University of Sheffield\", \"University of Southampton\", \"University of Glasgow\", \"University College London\", \"University of East Anglia\", \"The Manchester Metropolitan University\", \"University of Stirling\", \"City St George's, University of London\", \"Queen's University Belfast\", \"Nottingham Trent University\", \"University of Brighton\", \"University of Essex\", \"University of Westminster\", \"Aston University\", \"Loughborough University\", \"University of Hull\", \"University of Central Lancashire\", \"University of Sunderland\", \"University of Durham\", \"Kingston University London\", \"Liverpool John Moores University\", \"University of Aberdeen\", \"Leeds Beckett University\", \"Royal Holloway, University of London\", \"University of Strathclyde\", \"University of Sussex\", \"University of Reading\", \"Solent University\", \"University of the Arts London\"],\r\n \"\u0627\u0644\u0648\u0644\u0627\u064a\u0627\u062a \u0627\u0644\u0645\u062a\u062d\u062f\u0629\": [\"Arizona State University\", \"Colorado State University\", \"University of Arizona\", \"University of Massachusetts Amherst\", \"Johns Hopkins University\", \"Rutgers University\u2013New Brunswick\", \"Oregon State University\", \"Southeast Missouri State University\", \"University of Wisconsin-Stout\", \"University of Central Missouri\", \"South Dakota State University\", \"California State University Fullerton\", \"University of Wisconsin\u2013Oshkosh\", \"Drew University\", \"George Mason University\", \"Illinois State University\", \"Texas State University - San Marcos\", \"University of Alabama at Birmingham\", \"University of Oklahoma - Norman Campus\", \"Saint Louis University\", \"Adelphi University\", \"Auburn University\", \"Auburn University at Montgomery\", \"Baylor University\", \"Rochester Institute of Technology\", \"California State University Long Beach\", \"California State University, San Bernardino\", \"California State University San Marcos\", \"Carroll University\", \"Cleveland State University\", \"Long Island University Brooklyn\", \"DePaul University\", \"Suffolk University\", \"East Tennessee State University\", \"Duquesne University\", \"Embry-Riddle Aeronautical University - Daytona Beach\", \"California Lutheran University\", \"California State University - Fresno\", \"California State University - Northridge\", \"California State University, Sacramento\", \"Hawaii Pacific University\", \"Iowa State University\", \"Indiana State University\", \"Jacksonville State University\", \"Middle Tennessee State University\", \"Pace University\", \"Rowan University\", \"San Diego State University\", \"San Francisco State University\", \"San Jose State University\"],\r\n \"\u0643\u0646\u062f\u0627\": [\"University of Alberta\", \"Capilano University\", \"University of Windsor\", \"University of Victoria\", \"University of New Brunswick\", \"Lakehead University\", \"University of Saskatchewan\", \"Kwantlen Polytechnic University\", \"University of The Fraser Valley\", \"Wilfrid Laurier University\", \"The University of Regina\", \"Thompson Rivers University\", \"Fairleigh Dickinson University - Vancouver\", \"Toronto Metropolitan University\", \"Vancouver Island University\", \"Saint Marys University\", \"Algonquin College\", \"Seneca College\", \"Humber College\", \"Sheridan College\"],\r\n \"\u0623\u0633\u062a\u0631\u0627\u0644\u064a\u0627\": [\"University of Tasmania\", \"University of Adelaide\", \"James Cook University\", \"La Trobe University\", \"Western Sydney University\", \"The Royal Melbourne Institute of Technology (RMIT University)\", \"Swinburne University of Technology\", \"Deakin University\", \"Griffith University\", \"Torrens University Australia\", \"Curtin University\", \"The University of New South Wales\", \"University of South Australia\", \"The University of New England\", \"Murdoch University\", \"Bond University\", \"The University of Queensland\", \"University of Wollongong\", \"Southern Cross University\", \"Macquarie University\"],\r\n \"\u0627\u0644\u0635\u064a\u0646\": [\"Nanjing University of Aeronautics and Astronautics\", \"Tsinghua University\", \"Huazhong University Of Science And Technology\", \"Huazhong Agricultural University\", \"Harbin Institute of Technology\", \"Wuhan University\", \"Wuhan University Of Technology\", \"Tongji University\", \"Shanghai Jiao tong University\", \"The Chinese University of Hong Kong (CUHK)\", \"Peking University\", \"Fudan University\"],\r\n \"\u0625\u0633\u0628\u0627\u0646\u064a\u0627\": [\"Universitat Aut\u00f2noma de Barcelona\", \"Universidad de Granada\", \"University Complutense of Madrid\", \"University of Barcelona\", \"Universidad de M\u00e1laga\", \"University Polytechnic of Valencia\", \"University of Valencia\", \"Universidad de Salamanca\", \"University Pompeu Fabra\", \"Universidad de Alicante\"],\r\n \"\u0633\u0648\u064a\u0633\u0631\u0627\": [\"C\u00e9sar Ritz Colleges Switzerland\", \"Culinary Arts Academy\", \"Swiss Hotel Management School\", \"HTMi Hotel and Tourism Management Institute Switzerland\", \"The Glion Institute of Higher Education\"],\r\n \"\u0643\u0648\u0631\u064a\u0627 \u0627\u0644\u062c\u0646\u0648\u0628\u064a\u0629\": [\"Sung Kyun Kwan University\", \"Sejong University\", \"Kyung Hee University\", \"Sookmyung womens University\"],\r\n \"\u0623\u0644\u0645\u0627\u0646\u064a\u0627\": [\"Macromedia University of Applied Sciences\", \"SRH University\", \"EBS University of Business and Law\"],\r\n \"\u0647\u0648\u0644\u0646\u062f\u0627\": [\"The University of Amsterdam\", \"University of Twente\", \"Radboud University Nijmegen\", \"Tio University of Applied Sciences\"],\r\n \"\u0641\u0631\u0646\u0633\u0627\": [\"INSEAD (France)\", \"SKEMA Business School\", \"Istituto Marangoni Milano\", \"Universit\u00e9 de Cergy-Pontoise\", \"EMLYON Business School\"],\r\n \"\u0625\u064a\u0637\u0627\u0644\u064a\u0627\": [\"Domus academy Milano\"]\r\n };\r\n\r\n const apiKey = \"\"; \/\/ Leave this as-is\r\n const apiUrl = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;\r\n\r\n let currentFilter = 'all';\r\n let chartInstance = null;\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n setupStats();\r\n setupFilters();\r\n renderUniversityList();\r\n setupChart();\r\n setupSearch();\r\n setupModal();\r\n setupSuggestionFeature();\r\n });\r\n \r\n async function callGeminiAPI(payload, retries = 3, delay = 1000) {\r\n for (let i = 0; i < retries; i++) {\r\n try {\r\n const response = await fetch(apiUrl, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(payload)\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error(`HTTP error! status: ${response.status}`);\r\n }\r\n return await response.json();\r\n } catch (error) {\r\n if (i === retries - 1) throw error;\r\n await new Promise(res => setTimeout(res, delay * Math.pow(2, i)));\r\n }\r\n }\r\n }\r\n\r\n function animateValue(obj, start, end, duration) {\r\n let startTimestamp = null;\r\n const step = (timestamp) => {\r\n if (!startTimestamp) startTimestamp = timestamp;\r\n const progress = Math.min((timestamp - startTimestamp) \/ duration, 1);\r\n obj.innerHTML = Math.floor(progress * (end - start) + start).toLocaleString('ar-EG');\r\n if (progress < 1) {\r\n window.requestAnimationFrame(step);\r\n }\r\n };\r\n window.requestAnimationFrame(step);\r\n }\r\n\r\n function setupStats() {\r\n const totalUniversities = Object.values(universityData).reduce((sum, list) => sum + list.length, 0);\r\n const totalCountries = Object.keys(universityData).length;\r\n\r\n animateValue(document.getElementById('total-universities'), 0, totalUniversities, 1500);\r\n animateValue(document.getElementById('total-countries'), 0, totalCountries, 1500);\r\n }\r\n\r\n function setupFilters() {\r\n const filtersContainer = document.getElementById('country-filters');\r\n const countries = ['all', ...Object.keys(universityData)];\r\n countries.forEach(country => {\r\n const button = document.createElement('button');\r\n button.textContent = country === 'all' ? '\u062c\u0645\u064a\u0639 \u0627\u0644\u062f\u0648\u0644' : country;\r\n button.dataset.country = country;\r\n button.className = 'px-4 py-2 border-2 bg-white border-stone-300 rounded-lg font-semibold transition hover:bg-[#070658] hover:text-white hover:border-[#070658]';\r\n if (country === 'all') {\r\n button.classList.add('btn-active');\r\n }\r\n button.addEventListener('click', () => {\r\n currentFilter = country;\r\n updateActiveButton();\r\n renderUniversityList();\r\n updateChartSelection();\r\n });\r\n filtersContainer.appendChild(button);\r\n });\r\n }\r\n \r\n function updateActiveButton() {\r\n document.querySelectorAll('#country-filters button').forEach(btn => {\r\n if (btn.dataset.country === currentFilter) {\r\n btn.classList.add('btn-active');\r\n } else {\r\n btn.classList.remove('btn-active');\r\n }\r\n });\r\n }\r\n \r\n function getCountryForUniversity(universityName) {\r\n for (const country in universityData) {\r\n if (universityData[country].includes(universityName)) {\r\n return country;\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n function renderUniversityList() {\r\n const listContainer = document.getElementById('university-list');\r\n const listTitle = document.getElementById('list-title');\r\n const noResults = document.getElementById('no-results');\r\n const searchTerm = document.getElementById('search-box').value.toLowerCase();\r\n \r\n listContainer.innerHTML = '';\r\n \r\n let universitiesToShow = [];\r\n if (currentFilter === 'all') {\r\n listTitle.textContent = '\u062c\u0645\u064a\u0639 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u0627\u0644\u0634\u0631\u064a\u0643\u0629';\r\n universitiesToShow = Object.entries(universityData).flatMap(([country, unis]) => unis.map(uni => ({ name: uni, country })));\r\n } else {\r\n listTitle.textContent = `\u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u0641\u064a ${currentFilter}`;\r\n universitiesToShow = (universityData[currentFilter] || []).map(uni => ({ name: uni, country: currentFilter }));\r\n }\r\n\r\n const filteredBySearch = universitiesToShow.filter(uni => uni.name.toLowerCase().includes(searchTerm));\r\n\r\n if (filteredBySearch.length === 0) {\r\n noResults.style.display = 'block';\r\n } else {\r\n noResults.style.display = 'none';\r\n }\r\n\r\n filteredBySearch.forEach(uniObj => {\r\n const card = document.createElement('div');\r\n card.className = 'university-card bg-white\/90 p-4 rounded-lg border border-stone-200 text-center';\r\n card.dataset.universityName = uniObj.name;\r\n card.dataset.countryName = uniObj.country;\r\n card.innerHTML = `<h4 class=\"font-semibold text-stone-700\">${uniObj.name}<\/h4>`;\r\n card.addEventListener('click', () => showUniversityModal(uniObj.name, uniObj.country));\r\n listContainer.appendChild(card);\r\n });\r\n }\r\n\r\n function setupChart() {\r\n const ctx = document.getElementById('universitiesChart').getContext('2d');\r\n const countries = Object.keys(universityData);\r\n const counts = countries.map(country => universityData[country].length);\r\n \r\n const inactiveColor = 'rgba(149, 180, 81, 0.7)';\r\n const inactiveBorderColor = 'rgba(149, 180, 81, 1)';\r\n\r\n chartInstance = new Chart(ctx, {\r\n type: 'bar',\r\n data: {\r\n labels: countries,\r\n datasets: [{\r\n label: '\u0639\u062f\u062f \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a',\r\n data: counts,\r\n backgroundColor: countries.map(() => inactiveColor),\r\n borderColor: countries.map(() => inactiveBorderColor),\r\n borderWidth: 1.5,\r\n borderRadius: 4,\r\n }]\r\n },\r\n options: {\r\n indexAxis: 'y',\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n x: { beginAtZero: true, ticks: { color: '#333', font: { family: \"'Changa', sans-serif\"}}, grid: { color: '#e7e5e4' }},\r\n y: { ticks: { color: '#333', font: { family: \"'Changa', sans-serif\", size: 12 }}, grid: { display: false }}\r\n },\r\n plugins: {\r\n legend: { display: false },\r\n tooltip: { backgroundColor: '#070658', bodyFont: { family: \"'Changa', sans-serif\" }, titleFont: { family: \"'Changa', sans-serif\" }}\r\n },\r\n onClick: (event, elements) => {\r\n if (elements.length > 0) {\r\n const countryIndex = elements[0].index;\r\n const country = chartInstance.data.labels[countryIndex];\r\n currentFilter = country;\r\n updateActiveButton();\r\n renderUniversityList();\r\n updateChartSelection();\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n function updateChartSelection() {\r\n if (!chartInstance) return;\r\n const countries = chartInstance.data.labels;\r\n const activeColor = 'rgba(7, 6, 88, 0.9)';\r\n const inactiveColor = 'rgba(149, 180, 81, 0.7)';\r\n const activeBorder = 'rgba(7, 6, 88, 1)';\r\n const inactiveBorder = 'rgba(149, 180, 81, 1)';\r\n \r\n chartInstance.data.datasets[0].backgroundColor = countries.map(c => c === currentFilter ? activeColor : inactiveColor);\r\n chartInstance.data.datasets[0].borderColor = countries.map(c => c === currentFilter ? activeBorder : inactiveBorder);\r\n chartInstance.update();\r\n }\r\n\r\n function setupSearch() {\r\n document.getElementById('search-box').addEventListener('input', renderUniversityList);\r\n }\r\n \r\n \/\/ --- Gemini Features ---\r\n\r\n function setupModal() {\r\n const modal = document.getElementById('university-modal');\r\n const closeBtn = document.getElementById('modal-close-btn');\r\n \r\n const closeModal = () => {\r\n modal.classList.add('opacity-0');\r\n modal.querySelector('.modal-content').classList.add('scale-95');\r\n setTimeout(() => modal.classList.add('hidden'), 300);\r\n };\r\n\r\n closeBtn.addEventListener('click', closeModal);\r\n modal.addEventListener('click', (e) => {\r\n if (e.target === modal) closeModal();\r\n });\r\n }\r\n\r\n function showUniversityModal(universityName, countryName) {\r\n const modal = document.getElementById('university-modal');\r\n const modalTitle = document.getElementById('modal-title');\r\n const modalBody = document.getElementById('modal-body');\r\n\r\n modalTitle.textContent = universityName;\r\n modalBody.innerHTML = `\r\n <p class=\"mb-4 text-gray-600\">\u0627\u0644\u062f\u0648\u0644\u0629: ${countryName}<\/p>\r\n <div id=\"gemini-snapshot-result\" class=\"p-4 bg-gray-50 rounded-lg min-h-[100px] flex items-center justify-center\">\r\n <button id=\"generate-snapshot-btn\" class=\"bg-[#070658] text-white font-bold py-2 px-5 rounded-lg hover:bg-[#95B451] transition-colors\">\r\n \u2728 \u062a\u0648\u0644\u064a\u062f \u0646\u0628\u0630\u0629 \u0633\u0631\u064a\u0639\u0629\r\n <\/button>\r\n <\/div>\r\n `;\r\n\r\n modal.classList.remove('hidden');\r\n setTimeout(() => {\r\n modal.classList.remove('opacity-0');\r\n modal.querySelector('.modal-content').classList.remove('scale-95');\r\n }, 10);\r\n\r\n document.getElementById('generate-snapshot-btn').addEventListener('click', () => fetchUniversitySnapshot(universityName, countryName));\r\n }\r\n\r\n async function fetchUniversitySnapshot(universityName, countryName) {\r\n const resultDiv = document.getElementById('gemini-snapshot-result');\r\n resultDiv.innerHTML = '<div class=\"loader\"><\/div>';\r\n\r\n const prompt = `For a prospective international student, provide a brief, encouraging, and informative snapshot about \"${universityName}\" in \"${countryName}\". Highlight its key strengths, popular fields of study, and campus life in 2-4 sentences. The response must be in Arabic.`;\r\n \r\n const payload = { contents: [{ role: \"user\", parts: [{ text: prompt }] }] };\r\n\r\n try {\r\n const result = await callGeminiAPI(payload);\r\n const text = result.candidates[0].content.parts[0].text;\r\n resultDiv.innerHTML = `<p class=\"text-right\">${text}<\/p>`;\r\n } catch (error) {\r\n resultDiv.innerHTML = '<p class=\"text-red-500\">\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0646\u0628\u0630\u0629. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.<\/p>';\r\n }\r\n }\r\n \r\n function setupSuggestionFeature() {\r\n document.getElementById('suggestion-btn').addEventListener('click', fetchStudySuggestions);\r\n }\r\n\r\n async function fetchStudySuggestions() {\r\n const majorInput = document.getElementById('major-input');\r\n const resultDiv = document.getElementById('suggestions-result');\r\n const major = majorInput.value.trim();\r\n\r\n if (!major) {\r\n resultDiv.innerHTML = '<p class=\"text-center text-red-500\">\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0645\u062c\u0627\u0644 \u062f\u0631\u0627\u0633\u064a.<\/p>';\r\n return;\r\n }\r\n\r\n resultDiv.innerHTML = '<div class=\"flex justify-center\"><div class=\"loader\"><\/div><\/div>';\r\n \r\n const prompt = `Based on the provided list of countries and their universities, act as an expert academic advisor. For the field of study: \"${major}\", suggest the top 3 countries from the list that are renowned for this field. For each country, recommend one top university from its list. Provide the output in JSON format. The JSON should be an array of objects, where each object has 'country', 'university', and a 'reason' (in Arabic, max 30 words, explaining why this choice is excellent for the specified field). Here is the university data: ${JSON.stringify(universityData)}`;\r\n\r\n const payload = {\r\n contents: [{ role: \"user\", parts: [{ text: prompt }] }],\r\n generationConfig: {\r\n responseMimeType: \"application\/json\",\r\n responseSchema: {\r\n type: \"ARRAY\",\r\n items: {\r\n type: \"OBJECT\",\r\n properties: {\r\n \"country\": { \"type\": \"STRING\" },\r\n \"university\": { \"type\": \"STRING\" },\r\n \"reason\": { \"type\": \"STRING\" }\r\n },\r\n required: [\"country\", \"university\", \"reason\"]\r\n }\r\n }\r\n }\r\n };\r\n\r\n try {\r\n const result = await callGeminiAPI(payload);\r\n const suggestions = JSON.parse(result.candidates[0].content.parts[0].text);\r\n displaySuggestions(suggestions);\r\n } catch (error) {\r\n resultDiv.innerHTML = '<p class=\"text-center text-red-500\">\u0639\u0630\u0631\u0627\u064b\u060c \u0644\u0645 \u0646\u062a\u0645\u0643\u0646 \u0645\u0646 \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0627\u0642\u062a\u0631\u0627\u062d\u0627\u062a. \u062d\u0627\u0648\u0644 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0635\u0637\u0644\u062d \u0628\u062d\u062b \u0645\u062e\u062a\u0644\u0641.<\/p>';\r\n }\r\n }\r\n \r\n function displaySuggestions(suggestions) {\r\n const resultDiv = document.getElementById('suggestions-result');\r\n if (!suggestions || suggestions.length === 0) {\r\n resultDiv.innerHTML = '<p class=\"text-center text-red-500\">\u0639\u0630\u0631\u0627\u064b\u060c \u0644\u0645 \u064a\u062a\u0645 \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0627\u0642\u062a\u0631\u0627\u062d\u0627\u062a.<\/p>';\r\n return;\r\n }\r\n\r\n resultDiv.innerHTML = `\r\n <h4 class=\"text-lg font-bold text-center mb-4 text-[#070658]\">\u0623\u0641\u0636\u0644 \u0627\u0644\u0627\u0642\u062a\u0631\u0627\u062d\u0627\u062a \u0644\u0643:<\/h4>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n ${suggestions.map(item => `\r\n <div class=\"bg-white p-4 rounded-lg border border-gray-200 shadow-sm\">\r\n <h5 class=\"font-bold text-[#070658]\">${item.university}<\/h5>\r\n <p class=\"text-sm text-gray-500 mb-2\">${item.country}<\/p>\r\n <p class=\"text-sm text-gray-700\">${item.reason}<\/p>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n `;\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\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>\u0634\u0631\u0643\u0627\u0621 \u0633\u0646\u062f\u0628\u0627\u062f \u0645\u0646 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645 \u0634\u0631\u0643\u0627\u0621 \u0633\u0646\u062f\u0628\u0627\u062f \u0645\u0646 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 0 \u062c\u0627\u0645\u0639\u0629 \u0634\u0631\u064a\u0643\u0629 0 \u062f\u0648\u0644\u0629 \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645 \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0647\u0630\u0647 \u0627\u0644\u0644\u0648\u062d\u0629 \u062a\u0645\u0646\u062d\u0643 \u0646\u0638\u0631\u0629 \u0634\u0627\u0645\u0644\u0629 \u0639\u0644\u0649 \u062a\u0648\u0632\u064a\u0639 \u0634\u0631\u0643\u0627\u0626\u0646\u0627. \u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u0623\u0648 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0644\u062a\u0635\u0641\u064a\u0629 \u0627\u0644\u0642\u0627\u0626\u0645\u0629. \u0627\u0646\u0642\u0631 \u0639\u0644\u0649 \u0623\u064a \u062c\u0627\u0645\u0639\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0646\u0628\u0630\u0629 \u0633\u0631\u064a\u0639\u0629 \u0639\u0646\u0647\u0627 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a. \u062c\u0645\u064a\u0639 \u0627\u0644\u062c\u0627\u0645\u0639\u0627\u062a \u0644\u0627 \u062a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c \u0645\u0637\u0627\u0628\u0642\u0629 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-13001","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/pages\/13001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/comments?post=13001"}],"version-history":[{"count":15,"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/pages\/13001\/revisions"}],"predecessor-version":[{"id":13016,"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/pages\/13001\/revisions\/13016"}],"wp:attachment":[{"href":"https:\/\/sindibad-sa.com\/ar\/wp-json\/wp\/v2\/media?parent=13001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}