AVALWEB Logo<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', 'Arial', sans-serif;\r\n }\r\n \r\n body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n padding: 20px;\r\n }\r\n \r\n .logo-container {\r\n text-align: center;\r\n padding: 40px;\r\n background-color: white;\r\n border-radius: 20px;\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\r\n transition: all 0.4s ease;\r\n border: 1px solid rgba(0, 0, 0, 0.05);\r\n max-width: 800px;\r\n width: 100%;\r\n }\r\n \r\n .logo-container:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .main-logo {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin-bottom: 30px;\r\n padding: 20px 0;\r\n position: relative;\r\n }\r\n \r\n \/* --- ADDED: style for the image --- *\/\r\n .logo-img {\r\n max-width: 140px; \/* \u0627\u0646\u062f\u0627\u0632\u0647 \u062a\u0635\u0648\u06cc\u0631 *\/\r\n width: 25%;\r\n height: auto;\r\n margin-left: 18px; \/* \u062f\u0631 \u062d\u0627\u0644\u062a RTL \u062a\u0635\u0648\u06cc\u0631 \u0633\u0645\u062a \u0686\u067e \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f *\/\r\n border-radius: 12px;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.08);\r\n flex-shrink: 0;\r\n }\r\n \/* --- end added --- *\/\r\n\r\n .logo-text {\r\n font-size: 5.5rem;\r\n font-weight: 900;\r\n letter-spacing: 2px;\r\n line-height: 1;\r\n text-transform: uppercase;\r\n display: inline-flex;\r\n flex-direction: row-reverse; \/* \u0627\u06cc\u0646 \u062e\u0637 \u0631\u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645 *\/\r\n }\r\n \r\n \/* \u062d\u0631\u0641 A \u0645\u062a\u062d\u0631\u06a9 - \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u0633\u0645\u062a \u0686\u067e \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f *\/\r\n .animated-A {\r\n display: inline-block;\r\n color: #ffd438;\r\n position: relative;\r\n animation: pulseGlow 2s infinite alternate ease-in-out;\r\n text-shadow: 0 0 20px rgba(255, 212, 56, 0.5);\r\n transform-origin: center;\r\n order: 1; \/* \u0627\u06cc\u0646 \u062e\u0637 \u0631\u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645 *\/\r\n }\r\n \r\n @keyframes pulseGlow {\r\n 0% {\r\n transform: scale(1) rotate(0deg);\r\n color: #ffd438;\r\n text-shadow: 0 0 15px rgba(255, 212, 56, 0.7);\r\n }\r\n 50% {\r\n transform: scale(1.1) rotate(5deg);\r\n color: #ffed4e;\r\n text-shadow: 0 0 25px rgba(255, 212, 56, 0.9);\r\n }\r\n 100% {\r\n transform: scale(1) rotate(0deg);\r\n color: #ffd438;\r\n text-shadow: 0 0 15px rgba(255, 212, 56, 0.7);\r\n }\r\n }\r\n \r\n .animated-A::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 8px;\r\n background: linear-gradient(90deg, #ffd438, #6ba74f);\r\n bottom: -10px;\r\n left: 0;\r\n border-radius: 4px;\r\n opacity: 0.8;\r\n animation: underlinePulse 2s infinite alternate;\r\n }\r\n \r\n @keyframes underlinePulse {\r\n 0% {\r\n width: 100%;\r\n opacity: 0.8;\r\n }\r\n 100% {\r\n width: 80%;\r\n opacity: 1;\r\n }\r\n }\r\n \r\n \/* \u0628\u0642\u06cc\u0647 \u062d\u0631\u0648\u0641 - \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u0646\u062f *\/\r\n .static-text {\r\n color: #6ba74f;\r\n display: inline-block;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n order: 2; \/* \u0627\u06cc\u0646 \u062e\u0637 \u0631\u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645 *\/\r\n }\r\n \r\n .logo-container:hover .static-text {\r\n color: #5a9640;\r\n text-shadow: 0 5px 15px rgba(107, 167, 79, 0.3);\r\n }\r\n \r\n .static-text::after {\r\n content: '';\r\n position: absolute;\r\n width: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #6ba74f, #ffd438);\r\n bottom: -8px;\r\n right: 0; \/* \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0632 left \u0628\u0647 right *\/\r\n border-radius: 2px;\r\n transition: width 0.5s ease;\r\n }\r\n \r\n .logo-container:hover .static-text::after {\r\n width: 100%;\r\n }\r\n \r\n \/* \u0628\u062e\u0634 \u062f\u0648\u0645: GO ONLINE *\/\r\n .go-online {\r\n font-size: 2.2rem;\r\n font-weight: 700;\r\n color: #333;\r\n margin-top: 10px;\r\n letter-spacing: 3px;\r\n position: relative;\r\n display: inline-block;\r\n padding: 10px 25px;\r\n border-radius: 50px;\r\n background: linear-gradient(90deg, rgba(107, 167, 79, 0.1), rgba(255, 212, 56, 0.1));\r\n transition: all 0.4s ease;\r\n }\r\n \r\n .go-online:hover {\r\n background: linear-gradient(90deg, rgba(107, 167, 79, 0.2), rgba(255, 212, 56, 0.2));\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\r\n letter-spacing: 5px;\r\n }\r\n \r\n .go-online span:nth-child(1) {\r\n color: #6ba74f;\r\n font-weight: 800;\r\n }\r\n \r\n .go-online span:nth-child(2) {\r\n color: #333;\r\n }\r\n \r\n .go-online span:nth-child(3) {\r\n color: #ffd438;\r\n font-weight: 800;\r\n }\r\n \r\n \/* \u0631\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\r\n @media (max-width: 768px) {\r\n .logo-text {\r\n font-size: 4rem;\r\n }\r\n \r\n .go-online {\r\n font-size: 1.8rem;\r\n }\r\n\r\n \/* responsive adjustment for the image *\/\r\n .logo-img { max-width: 110px; margin-left: 12px; }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .logo-text {\r\n font-size: 3rem;\r\n }\r\n \r\n .go-online {\r\n font-size: 1.5rem;\r\n letter-spacing: 2px;\r\n }\r\n \r\n .logo-container {\r\n padding: 25px 20px;\r\n }\r\n\r\n .logo-img { display:none; } \/* \u062f\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0646\u0627\u0631 \u0645\u062a\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0641\u0636\u0627 \u0631\u0627 \u062a\u0646\u06af \u06a9\u0646\u062f -> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u062e\u0637 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f \u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u062a\u0635\u0648\u06cc\u0631 \u0647\u0645 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f *\/\r\n }\r\n \r\n \/* \u0627\u0641\u06a9\u062a \u0646\u0648\u0631 *\/\r\n .light-effect {\r\n position: absolute;\r\n width: 200px;\r\n height: 200px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255, 212, 56, 0.2) 0%, rgba(255, 212, 56, 0) 70%);\r\n top: -50px;\r\n right: -50px; \/* \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0632 left \u0628\u0647 right *\/\r\n z-index: -1;\r\n animation: moveLight 10s infinite alternate ease-in-out;\r\n }\r\n \r\n @keyframes moveLight {\r\n 0% {\r\n transform: translate(0, 0);\r\n }\r\n 100% {\r\n transform: translate(-100px, 100px); \/* \u062a\u063a\u06cc\u06cc\u0631 \u062c\u0647\u062a \u062d\u0631\u06a9\u062a *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"logo-container\">\r\n <div class=\"light-effect\"><\/div>\r\n \r\n <div class=\"main-logo\">\r\n \r\n <img decoding=\"async\" class=\"logo-img\" src=\"\/mnt\/data\/9869d007-d6ae-4999-a22d-5c717bb61675.png\" alt=\"Avalweb image\">\r\n \r\n\r\n <div class=\"logo-text\">\r\n <span class=\"animated-A\">A<\/span>\r\n <span class=\"static-text\">VALWEB<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"go-online\">\r\n <span>GO<\/span>\r\n <span> <\/span>\r\n <span>ONLINE<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc\r\n const animatedA = document.querySelector('.animated-A');\r\n const staticText = document.querySelector('.static-text');\r\n const goOnline = document.querySelector('.go-online');\r\n \r\n \/\/ \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u0647\u0627\u0648\u0631 \u0628\u0631\u0627\u06cc \u062d\u0631\u0641 A\r\n animatedA.addEventListener('mouseenter', function() {\r\n this.style.animationPlayState = 'paused';\r\n this.style.transform = 'scale(1.2) rotate(10deg)';\r\n this.style.color = '#ffed4e';\r\n this.style.textShadow = '0 0 30px rgba(255, 212, 56, 1)';\r\n });\r\n \r\n animatedA.addEventListener('mouseleave', function() {\r\n this.style.animationPlayState = 'running';\r\n this.style.transform = 'scale(1) rotate(0deg)';\r\n this.style.color = '#ffd438';\r\n this.style.textShadow = '0 0 20px rgba(255, 212, 56, 0.5)';\r\n });\r\n \r\n \/\/ \u0627\u0641\u06a9\u062a \u062a\u0627\u06cc\u067e \u0628\u0631\u0627\u06cc GO ONLINE\r\n const goOnlineText = goOnline.textContent;\r\n goOnline.innerHTML = '';\r\n \r\n let i = 0;\r\n function typeWriter() {\r\n if (i < goOnlineText.length) {\r\n const span = document.createElement('span');\r\n span.textContent = goOnlineText.charAt(i);\r\n \r\n if (goOnlineText.charAt(i) === 'G' || goOnlineText.charAt(i) === 'O') {\r\n span.style.color = '#6ba74f';\r\n span.style.fontWeight = '800';\r\n } else if (goOnlineText.charAt(i) === 'N' || goOnlineText.charAt(i) === 'L' || goOnlineText.charAt(i) === 'I' || goOnlineText.charAt(i) === 'E') {\r\n span.style.color = '#ffd438';\r\n span.style.fontWeight = '800';\r\n } else {\r\n span.style.color = '#333';\r\n }\r\n \r\n goOnline.appendChild(span);\r\n i++;\r\n setTimeout(typeWriter, 100);\r\n }\r\n }\r\n \r\n \/\/ \u0627\u062c\u0631\u0627\u06cc \u0627\u0641\u06a9\u062a \u062a\u0627\u06cc\u067e \u067e\u0633 \u0627\u0632 \u0644\u0648\u062f \u0635\u0641\u062d\u0647\r\n window.addEventListener('load', function() {\r\n setTimeout(typeWriter, 500);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-11ff72d e-flex e-con-boxed e-con e-parent\" data-id=\"11ff72d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ff2b760 elementor-widget elementor-widget-html\" data-id=\"ff2b760\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fa\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>\u0648\u0628\u0644\u0627\u06af \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/gh\/rastikerdar\/vazir-font@v30.1.0\/dist\/font-face.css\">\r\n <style>\r\n \/* Reset \u0648 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0627\u0648\u0644\u06cc\u0647 *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: #333;\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n .container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 30px;\r\n margin-top: 20px;\r\n }\r\n \r\n \/* \u0647\u062f\u0631 \u0628\u062e\u0634 \u0648\u0628\u0644\u0627\u06af *\/\r\n .blog-header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n padding: 20px;\r\n background: linear-gradient(135deg, #6ba74f 0%, #ffd438 100%);\r\n border-radius: 15px;\r\n color: white;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .blog-header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\"><path d=\"M0,0 L100,0 L100,100 Z\" fill=\"rgba(255,255,255,0.1)\"\/><\/svg>');\r\n background-size: cover;\r\n }\r\n \r\n .blog-header h1 {\r\n font-size: 2.8rem;\r\n margin-bottom: 10px;\r\n position: relative;\r\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n .blog-header p {\r\n font-size: 1.2rem;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n \r\n \/* \u0628\u062e\u0634 \u0627\u0635\u0644\u06cc \u0645\u062d\u062a\u0648\u0627 *\/\r\n .main-content {\r\n flex: 3;\r\n min-width: 300px;\r\n }\r\n \r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627\u06cc \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af *\/\r\n .blog-post {\r\n background-color: white;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n margin-bottom: 30px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n position: relative;\r\n transform: translateY(0);\r\n }\r\n \r\n .blog-post:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .blog-post::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n width: 100%;\r\n height: 5px;\r\n background: linear-gradient(90deg, #ffd438, #6ba74f);\r\n transition: height 0.3s ease;\r\n }\r\n \r\n .blog-post:hover::after {\r\n height: 8px;\r\n }\r\n \r\n .post-image {\r\n width: 100%;\r\n height: 250px;\r\n object-fit: cover;\r\n transition: transform 0.7s ease;\r\n }\r\n \r\n .blog-post:hover .post-image {\r\n transform: scale(1.05);\r\n }\r\n \r\n .post-content {\r\n padding: 25px;\r\n }\r\n \r\n .post-meta {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 15px;\r\n font-size: 0.9rem;\r\n color: #666;\r\n }\r\n \r\n .post-category {\r\n background-color: #6ba74f;\r\n color: white;\r\n padding: 5px 12px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n font-weight: bold;\r\n }\r\n \r\n .post-date {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n }\r\n \r\n .post-title {\r\n color: #2c3e50;\r\n font-size: 1.6rem;\r\n margin-bottom: 15px;\r\n transition: color 0.3s ease;\r\n }\r\n \r\n .blog-post:hover .post-title {\r\n color: #6ba74f;\r\n }\r\n \r\n .post-excerpt {\r\n color: #555;\r\n margin-bottom: 20px;\r\n line-height: 1.8;\r\n }\r\n \r\n .read-more {\r\n display: inline-block;\r\n background: linear-gradient(to right, #ffd438, #f7c600);\r\n color: #333;\r\n padding: 10px 25px;\r\n border-radius: 30px;\r\n text-decoration: none;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 10px rgba(255, 212, 56, 0.3);\r\n }\r\n \r\n .read-more:hover {\r\n background: linear-gradient(to right, #6ba74f, #5a9640);\r\n color: white;\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 15px rgba(107, 167, 79, 0.4);\r\n }\r\n \r\n \/* \u0633\u0627\u06cc\u062f\u0628\u0627\u0631 \u0648 \u0648\u06cc\u062c\u062a\u200c\u0647\u0627 *\/\r\n .sidebar {\r\n flex: 1;\r\n min-width: 300px;\r\n }\r\n \r\n .widget {\r\n background-color: white;\r\n border-radius: 12px;\r\n padding: 25px;\r\n margin-bottom: 30px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\r\n border-top: 5px solid #6ba74f;\r\n }\r\n \r\n .widget-title {\r\n color: #2c3e50;\r\n font-size: 1.4rem;\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid #eee;\r\n position: relative;\r\n }\r\n \r\n .widget-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -2px;\r\n right: 0;\r\n width: 80px;\r\n height: 2px;\r\n background-color: #ffd438;\r\n }\r\n \r\n \/* \u0648\u06cc\u062c\u062a \u062c\u0633\u062a\u062c\u0648 - \u0637\u0631\u0627\u062d\u06cc \u062c\u062f\u06cc\u062f \u0648 \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647 *\/\r\n .search-form {\r\n display: flex;\r\n margin-top: 15px;\r\n position: relative;\r\n }\r\n \r\n .search-input {\r\n flex: 1;\r\n padding: 14px 50px 14px 15px;\r\n border: 2px solid #eaeaea;\r\n border-radius: 30px;\r\n font-size: 1rem;\r\n transition: all 0.3s ease;\r\n font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n text-align: right;\r\n direction: rtl;\r\n background-color: #f9f9f9;\r\n box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);\r\n }\r\n \r\n .search-input:focus {\r\n outline: none;\r\n border-color: #6ba74f;\r\n background-color: white;\r\n box-shadow: 0 0 0 3px rgba(107, 167, 79, 0.1), inset 0 2px 5px rgba(0, 0, 0, 0.05);\r\n }\r\n \r\n .search-button {\r\n position: absolute;\r\n left: 8px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: linear-gradient(135deg, #ffd438, #f7c600);\r\n color: #333;\r\n border: none;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 3px 8px rgba(255, 212, 56, 0.3);\r\n }\r\n \r\n .search-button:hover {\r\n background: linear-gradient(135deg, #6ba74f, #5a9640);\r\n color: white;\r\n transform: translateY(-50%) scale(1.1);\r\n box-shadow: 0 5px 12px rgba(107, 167, 79, 0.4);\r\n }\r\n \r\n \/* \u0628\u0631\u0627\u06cc \u062d\u0644 \u0645\u0634\u06a9\u0644 placeholder \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 *\/\r\n .search-input::placeholder {\r\n font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n color: #999;\r\n opacity: 1;\r\n text-align: right;\r\n direction: rtl;\r\n }\r\n \r\n \/* \u0648\u06cc\u062c\u062a \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627 *\/\r\n .categories-list {\r\n list-style: none;\r\n }\r\n \r\n .categories-list li {\r\n padding: 12px 0;\r\n border-bottom: 1px dashed #eee;\r\n transition: padding-right 0.3s ease;\r\n }\r\n \r\n .categories-list li:last-child {\r\n border-bottom: none;\r\n }\r\n \r\n .categories-list li:hover {\r\n padding-right: 10px;\r\n }\r\n \r\n .categories-list a {\r\n color: #555;\r\n text-decoration: none;\r\n display: flex;\r\n justify-content: space-between;\r\n transition: color 0.3s ease;\r\n }\r\n \r\n .categories-list a:hover {\r\n color: #6ba74f;\r\n }\r\n \r\n .category-count {\r\n background-color: #ffd438;\r\n color: #333;\r\n padding: 2px 10px;\r\n border-radius: 12px;\r\n font-size: 0.8rem;\r\n font-weight: bold;\r\n }\r\n \r\n \/* \u0648\u06cc\u062c\u062a \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 *\/\r\n .recent-posts {\r\n list-style: none;\r\n }\r\n \r\n .recent-post {\r\n display: flex;\r\n align-items: center;\r\n padding: 15px 0;\r\n border-bottom: 1px dashed #eee;\r\n }\r\n \r\n .recent-post:last-child {\r\n border-bottom: none;\r\n }\r\n \r\n .recent-post img {\r\n width: 70px;\r\n height: 70px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n margin-left: 15px;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .recent-post:hover img {\r\n transform: scale(1.1);\r\n }\r\n \r\n .recent-post-content h4 {\r\n font-size: 1rem;\r\n margin-bottom: 5px;\r\n transition: color 0.3s ease;\r\n }\r\n \r\n .recent-post:hover h4 {\r\n color: #6ba74f;\r\n }\r\n \r\n .recent-post-date {\r\n font-size: 0.85rem;\r\n color: #888;\r\n }\r\n \r\n \/* \u0648\u06cc\u062c\u062a \u062a\u06af\u200c\u0647\u0627 *\/\r\n .tags-cloud {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n }\r\n \r\n .tag {\r\n background-color: #f1f8e9;\r\n color: #5a9640;\r\n padding: 8px 15px;\r\n border-radius: 20px;\r\n font-size: 0.9rem;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .tag:hover {\r\n background-color: #6ba74f;\r\n color: white;\r\n transform: translateY(-3px);\r\n }\r\n \r\n \/* \u067e\u06cc\u0646\u0648\u0634\u062a \u0648 \u067e\u0627\u06af\u0631\u062f *\/\r\n .blog-footer {\r\n text-align: center;\r\n margin-top: 50px;\r\n padding-top: 30px;\r\n border-top: 1px solid #eee;\r\n color: #777;\r\n }\r\n \r\n .pagination {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: 40px;\r\n }\r\n \r\n .page-number {\r\n display: inline-block;\r\n width: 45px;\r\n height: 45px;\r\n line-height: 45px;\r\n text-align: center;\r\n background-color: white;\r\n color: #555;\r\n border-radius: 50%;\r\n text-decoration: none;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\r\n }\r\n \r\n .page-number:hover, .page-number.active {\r\n background-color: #6ba74f;\r\n color: white;\r\n transform: translateY(-5px);\r\n }\r\n \r\n \/* \u0627\u0641\u06a9\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u0645\u0648\u0633 *\/\r\n .scroll-hint {\r\n text-align: center;\r\n margin: 30px 0;\r\n color: #888;\r\n font-size: 0.9rem;\r\n }\r\n \r\n .mouse {\r\n width: 30px;\r\n height: 50px;\r\n border: 2px solid #6ba74f;\r\n border-radius: 20px;\r\n position: relative;\r\n margin: 0 auto 10px;\r\n }\r\n \r\n .wheel {\r\n width: 4px;\r\n height: 10px;\r\n background-color: #ffd438;\r\n border-radius: 2px;\r\n position: absolute;\r\n top: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n animation: scrollAnimation 1.5s infinite;\r\n }\r\n \r\n @keyframes scrollAnimation {\r\n 0% { top: 10px; opacity: 1; }\r\n 100% { top: 30px; opacity: 0; }\r\n }\r\n \r\n \/* \u0631\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\r\n @media (max-width: 992px) {\r\n .container {\r\n flex-direction: column;\r\n }\r\n \r\n .sidebar {\r\n order: -1;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .blog-header h1 {\r\n font-size: 2.2rem;\r\n }\r\n \r\n .post-meta {\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n }\r\n \r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u062f\u06a9\u0645\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u0644\u0627\u06af *\/\r\n .view-blog-btn {\r\n display: inline-block;\r\n background: linear-gradient(to right, #6ba74f, #5a9640);\r\n color: white;\r\n padding: 12px 30px;\r\n border-radius: 30px;\r\n text-decoration: none;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n margin-top: 10px;\r\n box-shadow: 0 4px 10px rgba(107, 167, 79, 0.3);\r\n }\r\n \r\n .view-blog-btn:hover {\r\n background: linear-gradient(to right, #ffd438, #f7c600);\r\n color: #333;\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 15px rgba(255, 212, 56, 0.4);\r\n }\r\n \r\n .action-buttons {\r\n display: flex;\r\n gap: 15px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0648\u06cc\u0698\u0647 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0647 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc *\/\r\n .ai-category {\r\n font-family: 'Vazir', sans-serif;\r\n font-weight: bold;\r\n }\r\n \r\n .ai-category .category-count {\r\n background-color: #2196f3;\r\n color: white;\r\n }\r\n \r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u062c\u0633\u062a\u062c\u0648 *\/\r\n .search-suggestions {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n background: white;\r\n border-radius: 0 0 15px 15px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n z-index: 100;\r\n display: none;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n }\r\n \r\n .search-suggestion-item {\r\n padding: 10px 15px;\r\n border-bottom: 1px solid #eee;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n text-align: right;\r\n }\r\n \r\n .search-suggestion-item:hover {\r\n background-color: #f8f9fa;\r\n color: #6ba74f;\r\n }\r\n \r\n .search-suggestion-item:last-child {\r\n border-bottom: none;\r\n }\r\n \r\n \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062a\u0627\u06cc\u067e \u0628\u0631\u0627\u06cc placeholder *\/\r\n @keyframes typing {\r\n 0% { content: \"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628...\"; }\r\n 25% { content: \"\u0648\u0631\u062f\u067e\u0631\u0633...\"; }\r\n 50% { content: \"\u0633\u0626\u0648...\"; }\r\n 75% { content: \"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc...\"; }\r\n 100% { content: \"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc...\"; }\r\n }\r\n \r\n .search-input.animated::placeholder {\r\n animation: typing 10s infinite;\r\n }\r\n \r\n \/* \u067e\u0627\u067e\u200c\u0622\u067e \u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u0644\u0627\u06af *\/\r\n .blog-modal-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.8);\r\n z-index: 2000;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n }\r\n \r\n .blog-modal {\r\n background: white;\r\n border-radius: 15px;\r\n max-width: 900px;\r\n width: 100%;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);\r\n animation: modalFadeIn 0.4s ease;\r\n }\r\n \r\n @keyframes modalFadeIn {\r\n from { opacity: 0; transform: translateY(-30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n .modal-header {\r\n background: linear-gradient(135deg, #6ba74f 0%, #ffd438 100%);\r\n padding: 25px;\r\n color: white;\r\n border-radius: 15px 15px 0 0;\r\n position: relative;\r\n }\r\n \r\n .modal-header h2 {\r\n margin: 0;\r\n font-size: 1.8rem;\r\n }\r\n \r\n .modal-close {\r\n position: absolute;\r\n top: 20px;\r\n left: 20px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: none;\r\n color: white;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .modal-close:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: rotate(90deg);\r\n }\r\n \r\n .modal-content {\r\n padding: 30px;\r\n line-height: 1.8;\r\n color: #333;\r\n }\r\n \r\n .modal-content h3 {\r\n color: #6ba74f;\r\n margin: 25px 0 15px;\r\n font-size: 1.5rem;\r\n }\r\n \r\n .modal-content p {\r\n margin-bottom: 20px;\r\n }\r\n \r\n .modal-image {\r\n width: 100%;\r\n height: 300px;\r\n object-fit: cover;\r\n border-radius: 10px;\r\n margin: 20px 0;\r\n }\r\n \r\n .modal-meta {\r\n display: flex;\r\n justify-content: space-between;\r\n margin: 20px 0;\r\n padding: 15px;\r\n background: #f8f9fa;\r\n border-radius: 10px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <header class=\"blog-header\">\r\n <h1><i class=\"fas fa-blog\"><\/i> \u0648\u0628\u0644\u0627\u06af \u062a\u062e\u0635\u0635\u06cc<\/h1>\r\n <p>\u0622\u062e\u0631\u06cc\u0646 \u0645\u0642\u0627\u0644\u0627\u062a\u060c \u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0637\u0627\u0644\u0628 \u0622\u0645\u0648\u0632\u0634\u06cc \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u060c \u062a\u0648\u0633\u0639\u0647 \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631 \u0648 \u0641\u0646\u0627\u0648\u0631\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a<\/p>\r\n <\/header>\r\n \r\n \r\n <div class=\"scroll-hint\">\r\n <div class=\"mouse\">\r\n <div class=\"wheel\"><\/div>\r\n <\/div>\r\n <p>\u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0637\u0627\u0644\u0628 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646\u06cc\u062f<\/p>\r\n <\/div>\r\n \r\n <div class=\"container\">\r\n \r\n <main class=\"main-content\" id=\"blog-posts-container\">\r\n \r\n <\/main>\r\n \r\n \r\n <aside class=\"sidebar\">\r\n \r\n <div class=\"widget\">\r\n <h3 class=\"widget-title\">\u062c\u0633\u062a\u062c\u0648 \u062f\u0631 \u0648\u0628\u0644\u0627\u06af<\/h3>\r\n <form class=\"search-form\" id=\"search-form\">\r\n <input type=\"text\" class=\"search-input animated\" placeholder=\"\u0645\u0648\u0636\u0648\u0639 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u06cc\u062f...\" id=\"search-input\">\r\n <button type=\"submit\" class=\"search-button\" id=\"search-button\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/button>\r\n <div class=\"search-suggestions\" id=\"search-suggestions\">\r\n \r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n \r\n \r\n <div class=\"widget\">\r\n <h3 class=\"widget-title\">\u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627<\/h3>\r\n <ul class=\"categories-list\">\r\n <li><a href=\"https:\/\/seo.avalweb.site\/\" target=\"_blank\" class=\"ai-category\" rel=\"noopener\">\u062a\u0648\u0644\u06cc\u062f \u0645\u0642\u0627\u0644\u0647 \u0628\u0627 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc <span class=\"category-count\">\u062c\u062f\u06cc\u062f<\/span><\/a><\/li>\r\n <li><a href=\"https:\/\/www.avalweb.site\/services\/shop-maker\" target=\"_blank\" rel=\"noopener\">\u0637\u0631\u0627\u062d\u06cc \u0648\u0628 <span class=\"category-count\">\u06f1\u06f2<\/span><\/a><\/li>\r\n <li><a href=\"#\">\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc <span class=\"category-count\">\u06f1\u06f8<\/span><\/a><\/li>\r\n <li><a href=\"https:\/\/www.avalweb.site\/services\/website-builder\" target=\"_blank\" rel=\"noopener\">\u0648\u0631\u062f\u067e\u0631\u0633 <span class=\"category-count\">\u06f9<\/span><\/a><\/li>\r\n <li><a href=\"#\">\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc <span class=\"category-count\">\u06f7<\/span><\/a><\/li>\r\n <li><a href=\"https:\/\/www.avalweb.site\/services\/seo\" target=\"_blank\" rel=\"noopener\">\u0633\u0626\u0648 <span class=\"category-count\">\u06f1\u06f1<\/span><\/a><\/li>\r\n <li><a href=\"#\">\u0641\u0646\u0627\u0648\u0631\u06cc <span class=\"category-count\">\u06f1\u06f5<\/span><\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n \r\n <div class=\"widget\">\r\n <h3 class=\"widget-title\">\u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u0627\u062e\u06cc\u0631<\/h3>\r\n <ul class=\"recent-posts\">\r\n <li class=\"recent-post\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80\" alt=\"\u067e\u0633\u062a \u0627\u062e\u06cc\u0631 \u06f1\">\r\n <div class=\"recent-post-content\">\r\n <h4>\u0645\u0639\u0631\u0641\u06cc \u0628\u0647\u062a\u0631\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc UI\/UX \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f4<\/h4>\r\n <div class=\"recent-post-date\">\u06f1\u06f2 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"recent-post\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80\" alt=\"\u067e\u0633\u062a \u0627\u062e\u06cc\u0631 \u06f2\">\r\n <div class=\"recent-post-content\">\r\n <h4>\u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0645\u0644 Git \u0648 GitHub \u0628\u0631\u0627\u06cc \u062a\u06cc\u0645\u200c\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647<\/h4>\r\n <div class=\"recent-post-date\">\u06f8 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"recent-post\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80\" alt=\"\u067e\u0633\u062a \u0627\u062e\u06cc\u0631 \u06f3\">\r\n <div class=\"recent-post-content\">\r\n <h4>\u0631\u0627\u0647\u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a\u06cc \u0636\u0631\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0648\u0631\u062f\u067e\u0631\u0633\u06cc<\/h4>\r\n <div class=\"recent-post-date\">\u06f3 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/div>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n \r\n <div class=\"widget\">\r\n <h3 class=\"widget-title\">\u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627\u06cc \u067e\u0631\u0637\u0631\u0641\u062f\u0627\u0631<\/h3>\r\n <div class=\"tags-cloud\">\r\n <a href=\"https:\/\/www.avalweb.site\/services\/shop-maker\" target=\"_blank\" class=\"tag\" rel=\"noopener\">\u0637\u0631\u0627\u062d\u06cc \u0648\u0628<\/a>\r\n <a href=\"#\" class=\"tag\">\u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627<\/a>\r\n <a href=\"#\" class=\"tag\">JavaScript<\/a>\r\n <a href=\"#\" class=\"tag\">CSS3<\/a>\r\n <a href=\"#\" class=\"tag\">HTML5<\/a>\r\n <a href=\"#\" class=\"tag\">\u0648\u0631\u062f\u067e\u0631\u0633<\/a>\r\n <a href=\"#\" class=\"tag\">UI\/UX<\/a>\r\n <a href=\"https:\/\/www.avalweb.site\/services\/seo\" target=\"_blank\" class=\"tag\" rel=\"noopener\">\u0633\u0626\u0648<\/a>\r\n <a href=\"#\" class=\"tag\">\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"widget\">\r\n <h3 class=\"widget-title\">\u0639\u0636\u0648\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647<\/h3>\r\n <p>\u0628\u0627 \u0639\u0636\u0648\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647\u060c \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u0645\u0637\u0627\u0644\u0628 \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f.<\/p>\r\n <form id=\"newsletter-form\" style=\"margin-top: 15px;\">\r\n <input type=\"email\" class=\"search-input\" placeholder=\"\u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" style=\"border-radius: 30px; width: 100%; margin-bottom: 10px;\">\r\n <button type=\"submit\" class=\"read-more\" style=\"width: 100%; text-align: center;\">\u0639\u0636\u0648\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/aside>\r\n <\/div>\r\n \r\n \r\n <div class=\"pagination\" id=\"pagination-container\">\r\n \r\n <\/div>\r\n \r\n \r\n <footer class=\"blog-footer\">\r\n <p>\u00a9 \u06f1\u06f4\u06f0\u06f3 - \u06a9\u0644\u06cc\u0647 \u062d\u0642\u0648\u0642 \u0628\u0631\u0627\u06cc <a href=\"https:\/\/www.avalweb.site\/\" target=\"_blank\" style=\"color: #6ba74f; text-decoration: none; font-weight: bold;\" rel=\"noopener\">\u0627\u0648\u0644 \u0648\u0628<\/a> \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a. \u0637\u0631\u0627\u062d\u06cc \u0648 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627 \u0639\u0644\u0627\u0642\u0647<\/p>\r\n <div style=\"margin-top: 15px;\">\r\n <a href=\"https:\/\/www.instagram.com\/avalweb.site?igsh=MWswenhhbnhyNWprcA==\" target=\"_blank\" style=\"color: #6ba74f; margin: 0 10px; font-size: 1.5rem;\" rel=\"noopener\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n <a href=\"https:\/\/t.me\/Avalweb\" target=\"_blank\" style=\"color: #6ba74f; margin: 0 10px; font-size: 1.5rem;\"><i class=\"fab fa-telegram\"><\/i><\/a>\r\n <a href=\"https:\/\/www.linkedin.com\/company\/avalweb\/\" target=\"_blank\" style=\"color: #6ba74f; margin: 0 10px; font-size: 1.5rem;\" rel=\"noopener\"><i class=\"fab fa-linkedin\"><\/i><\/a>\r\n <a href=\"https:\/\/wa.me\/\" target=\"_blank\" style=\"color: #6ba74f; margin: 0 10px; font-size: 1.5rem;\" rel=\"noopener\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <div class=\"blog-modal-overlay\" id=\"blog-modal\">\r\n <div class=\"blog-modal\">\r\n <div class=\"modal-header\">\r\n <button class=\"modal-close\" id=\"modal-close\">\u00d7<\/button>\r\n <h2 id=\"modal-title\">\u0639\u0646\u0648\u0627\u0646 \u0645\u0642\u0627\u0644\u0647<\/h2>\r\n <\/div>\r\n <div class=\"modal-content\" id=\"modal-content\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af\r\n const blogPosts = [\r\n {\r\n id: 1,\r\n image: \"https:\/\/images.unsplash.com\/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628\",\r\n date: \"\u06f1\u06f5 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f4\",\r\n excerpt: \"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0628\u0631\u0631\u0633\u06cc \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u06cc\u0645 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0648\u0628\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u062a\u0645\u0627\u0645 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627 \u0628\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06a9\u0644 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0631\u0627 \u0645\u0631\u0648\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\",\r\n fullContent: `\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\" alt=\"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0645\u062f\u0631\u0646\" class=\"modal-image\">\r\n <div class=\"modal-meta\">\r\n <span class=\"post-category\">\u0637\u0631\u0627\u062d\u06cc \u0648\u0628<\/span>\r\n <span class=\"post-date\"><i class=\"far fa-calendar-alt\"><\/i> \u06f1\u06f5 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/span>\r\n <\/div>\r\n <h3>\u0645\u0642\u062f\u0645\u0647<\/h3>\r\n <p>\u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 (Responsive Web Design) \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0633\u0627\u0644\u200c\u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u0628\u0647 \u06cc\u06a9\u06cc \u0627\u0632 \u0636\u0631\u0648\u0631\u06cc\u200c\u062a\u0631\u06cc\u0646 \u0627\u0644\u0632\u0627\u0645\u0627\u062a \u0628\u0631\u0627\u06cc \u0647\u0631 \u0648\u0628\u0633\u0627\u06cc\u062a \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\r\n \r\n <h3>\u0627\u0635\u0648\u0644 \u0637\u0631\u0627\u062d\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627<\/h3>\r\n <p>\u0637\u0631\u0627\u062d\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0628\u0631 \u0633\u0647 \u0627\u0635\u0644 \u0627\u0633\u0627\u0633\u06cc \u0627\u0633\u062a\u0648\u0627\u0631 \u0627\u0633\u062a:<\/p>\r\n <p>1. <strong>\u06af\u0631\u06cc\u062f\u0647\u0627\u06cc \u0633\u06cc\u0627\u0644<\/strong>: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0633\u0628\u06cc \u0645\u0627\u0646\u0646\u062f \u062f\u0631\u0635\u062f \u0628\u0647 \u062c\u0627\u06cc \u067e\u06cc\u06a9\u0633\u0644<\/p>\r\n <p>2. <strong>\u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631<\/strong>: \u062a\u0635\u0627\u0648\u06cc\u0631\u06cc \u06a9\u0647 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f<\/p>\r\n <p>3. <strong>\u0645\u062f\u06cc\u0627 \u06a9\u0648\u0626\u0631\u06cc\u200c\u0647\u0627<\/strong>: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS Media Queries \u0628\u0631\u0627\u06cc \u0627\u0639\u0645\u0627\u0644 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647<\/p>\r\n \r\n <h3>\u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/h3>\r\n <p>\u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f4\u060c \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0645\u0627\u0646\u0646\u062f Container Queries \u0648 CSS Grid Level 2 \u0628\u0647 \u0637\u0631\u0627\u062d\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u06a9\u0646\u062a\u0631\u0644 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0631 \u0631\u0648\u06cc \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f.<\/p>\r\n \r\n <h3>\u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc<\/h3>\r\n <p>\u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0646\u0647 \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628\u060c \u0628\u0644\u06a9\u0647 \u06cc\u06a9 \u0636\u0631\u0648\u0631\u062a \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0627\u0645\u0631\u0648\u0632 \u0627\u0633\u062a. \u0628\u0627 \u0631\u0639\u0627\u06cc\u062a \u0627\u0635\u0648\u0644 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647\u200c\u0627\u06cc \u062f\u0631 \u062a\u0645\u0627\u0645 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f.<\/p>\r\n `\r\n },\r\n {\r\n id: 2,\r\n image: \"https:\/\/images.unsplash.com\/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\",\r\n date: \"\u06f1\u06f0 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648\u0628: \u0627\u0632 \u0635\u0641\u0631 \u062a\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc\",\r\n excerpt: \"\u0628\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0627\u0647\u0645\u06cc\u062a \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u060c \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0645\u0639\u0631\u0641\u06cc \u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u0627\u06cc\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u0648 \u0646\u062d\u0648\u0647 \u0627\u062f\u063a\u0627\u0645 \u0622\u0646 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u06cc\u0645.\",\r\n fullContent: `\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\" alt=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\" class=\"modal-image\">\r\n <div class=\"modal-meta\">\r\n <span class=\"post-category\">\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc<\/span>\r\n <span class=\"post-date\"><i class=\"far fa-calendar-alt\"><\/i> \u06f1\u06f0 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/span>\r\n <\/div>\r\n <h3>\u0645\u0642\u062f\u0645\u0647<\/h3>\r\n <p>\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 (Machine Learning) \u06cc\u06a9\u06cc \u0627\u0632 \u062c\u0630\u0627\u0628\u200c\u062a\u0631\u06cc\u0646 \u062d\u0648\u0632\u0647\u200c\u0647\u0627\u06cc \u0641\u0646\u0627\u0648\u0631\u06cc \u062f\u0631 \u0633\u0627\u0644\u200c\u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0628\u0631\u0631\u0633\u06cc \u0646\u062d\u0648\u0647 \u0627\u062f\u063a\u0627\u0645 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u06cc\u0645.<\/p>\r\n \r\n <h3>\u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u0627\u06cc\u0647<\/h3>\r\n <p>\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc\u06cc \u0627\u0634\u0627\u0631\u0647 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u0646\u062f \u0648 \u0628\u062f\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0635\u0631\u06cc\u062d\u060c \u062a\u0635\u0645\u06cc\u0645\u200c\u06af\u06cc\u0631\u06cc \u06a9\u0646\u0646\u062f.<\/p>\r\n \r\n <h3>\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc JavaScript<\/h3>\r\n <p>\u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u062f\u0644\u200c\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f TensorFlow.js \u0648 Brain.js \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\r\n \r\n <h3>\u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc<\/h3>\r\n <p>\u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u062f\u0631 \u0648\u0628 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0647 \u062a\u0634\u062e\u06cc\u0635 \u062a\u0635\u0648\u06cc\u0631\u060c \u067e\u0631\u062f\u0627\u0632\u0634 \u0632\u0628\u0627\u0646 \u0637\u0628\u06cc\u0639\u06cc\u060c \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u062a\u0648\u0635\u06cc\u0647\u200c\u06af\u0631 \u0648 \u067e\u06cc\u0634\u200c\u0628\u06cc\u0646\u06cc \u0631\u0641\u062a\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0634\u0627\u0631\u0647 \u06a9\u0631\u062f.<\/p>\r\n `\r\n },\r\n {\r\n id: 3,\r\n image: \"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1115&q=80\",\r\n category: \"\u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647\",\r\n date: \"\u06f5 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u0628\u0633\u0627\u06cc\u062a: \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0633\u0631\u06cc\u0639\u200c\u062a\u0631\",\r\n excerpt: \"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u06f1\u06f5 \u062a\u06a9\u0646\u06cc\u06a9 \u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0627\u0632 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u0641\u0634\u0631\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc lazy loading.\",\r\n fullContent: `\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1115&q=80\" alt=\"\u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647\" class=\"modal-image\">\r\n <div class=\"modal-meta\">\r\n <span class=\"post-category\">\u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647<\/span>\r\n <span class=\"post-date\"><i class=\"far fa-calendar-alt\"><\/i> \u06f5 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/span>\r\n <\/div>\r\n <h3>\u0627\u0647\u0645\u06cc\u062a \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc<\/h3>\r\n <p>\u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a \u062a\u0623\u062b\u06cc\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645\u06cc \u0628\u0631 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc\u060c \u0646\u0631\u062e \u062a\u0628\u062f\u06cc\u0644 \u0648 \u0633\u0626\u0648 \u062f\u0627\u0631\u062f. \u0637\u0628\u0642 \u062a\u062d\u0642\u06cc\u0642\u0627\u062a\u060c \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u067e\u0633 \u0627\u0632 \u06f3 \u062b\u0627\u0646\u06cc\u0647 \u0645\u0646\u062a\u0638\u0631 \u0645\u0627\u0646\u062f\u0646 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647\u060c \u0633\u0627\u06cc\u062a \u0631\u0627 \u062a\u0631\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\r\n \r\n <h3>\u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc<\/h3>\r\n <p>1. \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0631\u0645\u062a\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0645\u0627\u0646\u0646\u062f WebP<\/p>\r\n <p>2. \u0641\u0634\u0631\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u0648 JavaScript<\/p>\r\n <p>3. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0634 \u0645\u0631\u0648\u0631\u06af\u0631<\/p>\r\n <p>4. \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc lazy loading \u0628\u0631\u0627\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631<\/p>\r\n <p>5. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CDN \u0628\u0631\u0627\u06cc \u062a\u062d\u0648\u06cc\u0644 \u0645\u062d\u062a\u0648\u0627<\/p>\r\n \r\n <h3>\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc<\/h3>\r\n <p>\u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc \u0633\u0631\u0639\u062a \u0648\u0628\u0633\u0627\u06cc\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Google PageSpeed Insights\u060c GTmetrix \u0648 WebPageTest \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\r\n `\r\n },\r\n {\r\n id: 4,\r\n image: \"https:\/\/images.unsplash.com\/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80\",\r\n category: \"\u0648\u0631\u062f\u067e\u0631\u0633\",\r\n date: \"\u06f1 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u06f1\u06f0 \u0627\u0641\u0632\u0648\u0646\u0647 \u0636\u0631\u0648\u0631\u06cc \u0648\u0631\u062f\u067e\u0631\u0633 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0633\u0627\u06cc\u062a \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f4\",\r\n excerpt: \"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u06f1\u06f0 \u0627\u0641\u0632\u0648\u0646\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648 \u0636\u0631\u0648\u0631\u06cc \u0648\u0631\u062f\u067e\u0631\u0633 \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0647\u0631 \u0633\u0627\u06cc\u062a\u06cc \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0627\u0645\u0646\u06cc\u062a \u0628\u0647 \u0622\u0646\u200c\u0647\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0627\u0641\u0632\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u0648\u0631\u062f\u067e\u0631\u0633...\"\r\n },\r\n {\r\n id: 5,\r\n image: \"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0633\u0626\u0648\",\r\n date: \"\u06f2\u06f8 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0626\u0648 \u0628\u0631\u0627\u06cc \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648: \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644\",\r\n excerpt: \"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0627\u06cc\u062a \u0628\u0631\u0627\u06cc \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u060c \u0627\u0632 \u062a\u062d\u0642\u06cc\u0642 \u06a9\u0644\u0645\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u062a\u0627 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u062d\u062a\u0648\u0627 \u0648 \u0644\u06cc\u0646\u06a9\u200c\u0633\u0627\u0632\u06cc \u062f\u0627\u062e\u0644\u06cc.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0633\u0626\u0648...\"\r\n },\r\n {\r\n id: 6,\r\n image: \"https:\/\/images.unsplash.com\/photo-1555949963-aa79dcee981c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc\",\r\n date: \"\u06f2\u06f5 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0627\u0635\u0648\u0644 \u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI) \u0628\u0631\u0627\u06cc \u062a\u0627\u0632\u0647\u200c\u06a9\u0627\u0631\u0627\u0646\",\r\n excerpt: \"\u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0633\u0627\u06cc\u062a\u200c\u0647\u0627 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 UI\/UX...\"\r\n },\r\n {\r\n id: 7,\r\n image: \"https:\/\/images.unsplash.com\/photo-1516116216624-53e697fedbea?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0641\u0646\u0627\u0648\u0631\u06cc\",\r\n date: \"\u06f2\u06f0 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628: \u0627\u0632 WebAssembly \u062a\u0627 PWA\",\r\n excerpt: \"\u0645\u0631\u0648\u0631\u06cc \u0628\u0631 \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u06a9\u0647 \u0622\u06cc\u0646\u062f\u0647 \u0627\u06cc\u0646 \u0635\u0646\u0639\u062a \u0631\u0627 \u0634\u06a9\u0644 \u062e\u0648\u0627\u0647\u0646\u062f \u062f\u0627\u062f \u0648 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f...\"\r\n },\r\n {\r\n id: 8,\r\n image: \"https:\/\/images.unsplash.com\/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\",\r\n date: \"\u06f1\u06f5 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0622\u0645\u0648\u0632\u0634 React.js \u0627\u0632 \u067e\u0627\u06cc\u0647 \u062a\u0627 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\",\r\n excerpt: \"\u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0645\u0639 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 React.js \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0648 \u0645\u062f\u0631\u0646 \u0628\u0627 \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u0648 \u067e\u0631\u0648\u0698\u0647\u200c\u0645\u062d\u0648\u0631.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 React.js...\"\r\n },\r\n {\r\n id: 9,\r\n image: \"https:\/\/images.unsplash.com\/photo-1522542550221-31fd19575a2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628\",\r\n date: \"\u06f1\u06f0 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc CSS \u062c\u0630\u0627\u0628 \u0628\u062f\u0648\u0646 JavaScript\",\r\n excerpt: \"\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0632\u06cc\u0628\u0627 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u062a\u0646\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS \u0648 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc JavaScript.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc CSS...\"\r\n }\r\n ];\r\n\r\n \/\/ \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u062c\u06cc\u0646\u06cc\u0634\u0646\r\n const postsPerPage = 3;\r\n let currentPage = 1;\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062e\u0627\u0635\r\n function displayPosts(page) {\r\n const container = document.getElementById('blog-posts-container');\r\n container.innerHTML = '';\r\n \r\n const startIndex = (page - 1) * postsPerPage;\r\n const endIndex = startIndex + postsPerPage;\r\n const postsToShow = blogPosts.slice(startIndex, endIndex);\r\n \r\n postsToShow.forEach(post => {\r\n const postElement = document.createElement('article');\r\n postElement.className = 'blog-post';\r\n postElement.innerHTML = `\r\n <img decoding=\"async\" src=\"${post.image}\" alt=\"${post.title}\" class=\"post-image\">\r\n <div class=\"post-content\">\r\n <div class=\"post-meta\">\r\n <span class=\"post-category\">${post.category}<\/span>\r\n <span class=\"post-date\"><i class=\"far fa-calendar-alt\"><\/i> ${post.date}<\/span>\r\n <\/div>\r\n <h2 class=\"post-title\">${post.title}<\/h2>\r\n <p class=\"post-excerpt\">${post.excerpt}<\/p>\r\n <div class=\"action-buttons\">\r\n <a href=\"#\" class=\"read-more\">\u0627\u062f\u0627\u0645\u0647 \u0645\u0637\u0644\u0628 <i class=\"fas fa-arrow-left\"><\/i><\/a>\r\n <a href=\"#\" class=\"view-blog-btn\" data-post-id=\"${post.id}\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u0644\u0627\u06af <i class=\"fas fa-eye\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n `;\r\n container.appendChild(postElement);\r\n });\r\n \r\n \/\/ \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc hover \u0628\u0647 \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\r\n addHoverEffects();\r\n \r\n \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0628\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u0644\u0627\u06af\r\n document.querySelectorAll('.view-blog-btn').forEach(button => {\r\n button.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const postId = parseInt(this.getAttribute('data-post-id'));\r\n openBlogModal(postId);\r\n });\r\n });\r\n }\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0645\u0648\u062f\u0627\u0644 \u0648\u0628\u0644\u0627\u06af\r\n function openBlogModal(postId) {\r\n const post = blogPosts.find(p => p.id === postId);\r\n if (!post) return;\r\n \r\n document.getElementById('modal-title').textContent = post.title;\r\n document.getElementById('modal-content').innerHTML = post.fullContent;\r\n \r\n const modal = document.getElementById('blog-modal');\r\n modal.style.display = 'flex';\r\n document.body.style.overflow = 'hidden'; \/\/ \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u0633\u06a9\u0631\u0648\u0644 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647\r\n }\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0633\u062a\u0646 \u0645\u0648\u062f\u0627\u0644 \u0648\u0628\u0644\u0627\u06af\r\n function closeBlogModal() {\r\n const modal = document.getElementById('blog-modal');\r\n modal.style.display = 'none';\r\n document.body.style.overflow = 'auto'; \/\/ \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u0627\u0633\u06a9\u0631\u0648\u0644\r\n }\r\n\r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0633\u062a\u0646 \u0645\u0648\u062f\u0627\u0644\r\n document.getElementById('modal-close').addEventListener('click', closeBlogModal);\r\n document.getElementById('blog-modal').addEventListener('click', function(e) {\r\n if (e.target === this) {\r\n closeBlogModal();\r\n }\r\n });\r\n\r\n \/\/ \u0628\u0633\u062a\u0646 \u0645\u0648\u062f\u0627\u0644 \u0628\u0627 \u06a9\u0644\u06cc\u062f Escape\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') {\r\n closeBlogModal();\r\n }\r\n });\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u067e\u06cc\u062c\u06cc\u0646\u06cc\u0634\u0646\r\n function setupPagination() {\r\n const totalPages = Math.ceil(blogPosts.length \/ postsPerPage);\r\n const container = document.getElementById('pagination-container');\r\n container.innerHTML = '';\r\n \r\n \/\/ \u0627\u06cc\u062c\u0627\u062f \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0635\u0641\u062d\u0647\r\n for (let i = 1; i <= totalPages; i++) {\r\n const pageElement = document.createElement('a');\r\n pageElement.href = '#';\r\n pageElement.className = 'page-number';\r\n if (i === currentPage) {\r\n pageElement.classList.add('active');\r\n }\r\n pageElement.textContent = i;\r\n pageElement.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n currentPage = i;\r\n displayPosts(currentPage);\r\n updatePagination();\r\n \/\/ \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u0647 \u0628\u0627\u0644\u0627\r\n window.scrollTo({\r\n top: document.querySelector('.main-content').offsetTop - 100,\r\n behavior: 'smooth'\r\n });\r\n });\r\n container.appendChild(pageElement);\r\n }\r\n }\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u067e\u06cc\u062c\u06cc\u0646\u06cc\u0634\u0646\r\n function updatePagination() {\r\n const pageNumbers = document.querySelectorAll('.page-number');\r\n pageNumbers.forEach((page, index) => {\r\n if (index + 1 === currentPage) {\r\n page.classList.add('active');\r\n } else {\r\n page.classList.remove('active');\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc hover\r\n function addHoverEffects() {\r\n document.querySelectorAll('.blog-post').forEach(post => {\r\n post.addEventListener('mouseenter', function() {\r\n this.style.transform = 'translateY(-10px)';\r\n });\r\n \r\n post.addEventListener('mouseleave', function() {\r\n this.style.transform = 'translateY(0)';\r\n });\r\n });\r\n }\r\n\r\n \/\/ \u062c\u0633\u062a\u062c\u0648\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\r\n const searchInput = document.getElementById('search-input');\r\n const searchButton = document.getElementById('search-button');\r\n const searchForm = document.getElementById('search-form');\r\n const searchSuggestions = document.getElementById('search-suggestions');\r\n \r\n \/\/ \u06a9\u0644\u0645\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u062c\u0633\u062a\u062c\u0648\r\n const searchKeywords = [\r\n \"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628\", \"\u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627\", \"JavaScript\", \"CSS3\", \"HTML5\",\r\n \"\u0648\u0631\u062f\u067e\u0631\u0633\", \"UI\/UX\", \"\u0633\u0626\u0648\", \"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\", \"React.js\",\r\n \"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\", \"\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646\", \"\u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647\", \"\u0627\u0645\u0646\u06cc\u062a\",\r\n \"\u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc\", \"\u062a\u0648\u0633\u0639\u0647 \u0648\u0628\", \"\u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f\", \"\u0628\u06a9\u200c\u0627\u0646\u062f\"\r\n ];\r\n \r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f focus \u0631\u0648\u06cc \u0641\u06cc\u0644\u062f \u062c\u0633\u062a\u062c\u0648\r\n searchInput.addEventListener('focus', function() {\r\n showSearchSuggestions();\r\n this.parentElement.style.zIndex = '1000';\r\n });\r\n \r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f blur \u0631\u0648\u06cc \u0641\u06cc\u0644\u062f \u062c\u0633\u062a\u062c\u0648\r\n searchInput.addEventListener('blur', function() {\r\n setTimeout(() => {\r\n hideSearchSuggestions();\r\n this.parentElement.style.zIndex = '1';\r\n }, 200);\r\n });\r\n \r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u0627\u06cc\u067e \u062f\u0631 \u0641\u06cc\u0644\u062f \u062c\u0633\u062a\u062c\u0648\r\n searchInput.addEventListener('input', function() {\r\n const searchTerm = this.value.trim();\r\n if (searchTerm.length > 0) {\r\n updateSearchSuggestions(searchTerm);\r\n } else {\r\n showAllSuggestions();\r\n }\r\n });\r\n \r\n \/\/ \u062a\u0627\u0628\u0639 \u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u062c\u0633\u062a\u062c\u0648\r\n function showSearchSuggestions() {\r\n searchSuggestions.style.display = 'block';\r\n showAllSuggestions();\r\n }\r\n \r\n \/\/ \u062a\u0627\u0628\u0639 \u067e\u0646\u0647\u0627\u0646 \u06a9\u0631\u062f\u0646 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u062c\u0633\u062a\u062c\u0648\r\n function hideSearchSuggestions() {\r\n searchSuggestions.style.display = 'none';\r\n }\r\n \r\n \/\/ \u062a\u0627\u0628\u0639 \u0646\u0645\u0627\u06cc\u0634 \u0647\u0645\u0647 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a\r\n function showAllSuggestions() {\r\n searchSuggestions.innerHTML = '';\r\n searchKeywords.forEach(keyword => {\r\n const suggestionItem = document.createElement('div');\r\n suggestionItem.className = 'search-suggestion-item';\r\n suggestionItem.textContent = keyword;\r\n suggestionItem.addEventListener('click', function() {\r\n searchInput.value = this.textContent;\r\n performSearch(this.textContent);\r\n hideSearchSuggestions();\r\n });\r\n searchSuggestions.appendChild(suggestionItem);\r\n });\r\n }\r\n \r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u062c\u0633\u062a\u062c\u0648\r\n function updateSearchSuggestions(searchTerm) {\r\n searchSuggestions.innerHTML = '';\r\n const filteredKeywords = searchKeywords.filter(keyword => \r\n keyword.includes(searchTerm)\r\n );\r\n \r\n if (filteredKeywords.length > 0) {\r\n filteredKeywords.forEach(keyword => {\r\n const suggestionItem = document.createElement('div');\r\n suggestionItem.className = 'search-suggestion-item';\r\n \r\n \/\/ \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a \u06a9\u0631\u062f\u0646 \u0628\u062e\u0634 \u062a\u0637\u0628\u06cc\u0642\r\n const regex = new RegExp(`(${searchTerm})`, 'gi');\r\n const highlightedText = keyword.replace(regex, '<span style=\"color: #6ba74f; font-weight: bold;\">$1<\/span>');\r\n suggestionItem.innerHTML = highlightedText;\r\n \r\n suggestionItem.addEventListener('click', function() {\r\n searchInput.value = keyword;\r\n performSearch(keyword);\r\n hideSearchSuggestions();\r\n });\r\n searchSuggestions.appendChild(suggestionItem);\r\n });\r\n } else {\r\n const noResultItem = document.createElement('div');\r\n noResultItem.className = 'search-suggestion-item';\r\n noResultItem.textContent = '\u0646\u062a\u06cc\u062c\u0647\u200c\u0627\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f';\r\n noResultItem.style.color = '#999';\r\n noResultItem.style.cursor = 'default';\r\n searchSuggestions.appendChild(noResultItem);\r\n }\r\n }\r\n \r\n \/\/ \u062a\u0627\u0628\u0639 \u0627\u062c\u0631\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\r\n function performSearch(query) {\r\n if (query.trim() === '') {\r\n alert('\u0644\u0637\u0641\u0627\u064b \u0639\u0628\u0627\u0631\u062a \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f');\r\n searchInput.focus();\r\n return;\r\n }\r\n \r\n \/\/ \u062f\u0631 \u062d\u0627\u0644\u062a \u0648\u0627\u0642\u0639\u06cc\u060c \u0627\u06cc\u0646\u062c\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0628\u0647 \u0633\u0631\u0648\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f\r\n \/\/ \u0641\u0639\u0644\u0627\u064b \u0641\u0642\u0637 \u06cc\u06a9 \u067e\u06cc\u0627\u0645 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645\r\n const searchResults = blogPosts.filter(post => \r\n post.title.includes(query) || \r\n post.category.includes(query) ||\r\n post.excerpt.includes(query)\r\n );\r\n \r\n if (searchResults.length > 0) {\r\n alert(`\u062c\u0633\u062a\u062c\u0648 \u0628\u0631\u0627\u06cc \"${query}\"\\n\\n\u062a\u0639\u062f\u0627\u062f \u0646\u062a\u0627\u06cc\u062c: ${searchResults.length}\\n\\n(\u062f\u0631 \u0646\u0633\u062e\u0647 \u0648\u0627\u0642\u0639\u06cc\u060c \u0646\u062a\u0627\u06cc\u062c \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f)`);\r\n } else {\r\n alert(`\u0646\u062a\u06cc\u062c\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \"${query}\" \u06cc\u0627\u0641\u062a \u0646\u0634\u062f`);\r\n }\r\n }\r\n \r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645 \u062c\u0633\u062a\u062c\u0648\r\n searchForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const query = searchInput.value.trim();\r\n performSearch(query);\r\n });\r\n \r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u062c\u0633\u062a\u062c\u0648\r\n searchButton.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const query = searchInput.value.trim();\r\n performSearch(query);\r\n });\r\n\r\n \/\/ \u0639\u0636\u0648\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647\r\n document.getElementById('newsletter-form').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const emailInput = this.querySelector('input[type=\"email\"]');\r\n if (emailInput.value.trim() === '') {\r\n alert('\u0644\u0637\u0641\u0627\u064b \u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f');\r\n emailInput.focus();\r\n } else if (!isValidEmail(emailInput.value)) {\r\n alert('\u0644\u0637\u0641\u0627\u064b \u06cc\u06a9 \u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u0645\u0639\u062a\u0628\u0631 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f');\r\n emailInput.focus();\r\n } else {\r\n alert(`\u0627\u06cc\u0645\u06cc\u0644 ${emailInput.value} \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647 \u062b\u0628\u062a \u0634\u062f`);\r\n emailInput.value = '';\r\n }\r\n });\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0627\u06cc\u0645\u06cc\u0644\r\n function isValidEmail(email) {\r\n const re = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n return re.test(email);\r\n }\r\n\r\n \/\/ \u0627\u0633\u06a9\u0631\u0648\u0644 \u0646\u0631\u0645 \u0628\u0631\u0627\u06cc \u0644\u06cc\u0646\u06a9\u200c\u0647\u0627\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n \r\n const targetId = this.getAttribute('href');\r\n if (targetId === '#') return;\r\n \r\n const targetElement = document.querySelector(targetId);\r\n if (targetElement) {\r\n window.scrollTo({\r\n top: targetElement.offsetTop - 100,\r\n behavior: 'smooth'\r\n });\r\n }\r\n });\r\n });\r\n\r\n \/\/ \u0627\u0641\u06a9\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u0631\u0627\u06cc \u0647\u062f\u0631\r\n window.addEventListener('scroll', function() {\r\n const header = document.querySelector('.blog-header');\r\n const scrollPosition = window.scrollY;\r\n \r\n if (scrollPosition > 100) {\r\n header.style.opacity = '0.95';\r\n header.style.transform = 'translateY(-5px)';\r\n } else {\r\n header.style.opacity = '1';\r\n header.style.transform = 'translateY(0)';\r\n }\r\n });\r\n\r\n \/\/ \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u0627\u0641\u06a9\u062a\r\n const images = document.querySelectorAll('img');\r\n images.forEach(img => {\r\n img.addEventListener('load', function() {\r\n this.style.opacity = '1';\r\n });\r\n \r\n \/\/ \u062a\u0646\u0638\u06cc\u0645 opacity \u0627\u0648\u0644\u06cc\u0647 \u0628\u0631\u0627\u06cc \u0627\u0641\u06a9\u062a \u0644\u0648\u062f\r\n img.style.opacity = '0';\r\n img.style.transition = 'opacity 0.5s ease';\r\n });\r\n\r\n \/\/ \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647\r\n document.addEventListener('DOMContentLoaded', function() {\r\n displayPosts(currentPage);\r\n setupPagination();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AVALWEB Logo A VALWEB GO ONLINE \u0648\u0628\u0644\u0627\u06af \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u062a\u062e\u0635\u0635\u06cc \u0622\u062e\u0631\u06cc\u0646 \u0645\u0642\u0627\u0644\u0627\u062a\u060c \u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0637\u0627\u0644\u0628 \u0622\u0645\u0648\u0632\u0634\u06cc \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u060c \u062a\u0648\u0633\u0639\u0647 \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631 \u0648 \u0641\u0646\u0627\u0648\u0631\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0637\u0627\u0644\u0628 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646\u06cc\u062f \u062c\u0633\u062a\u062c\u0648 \u062f\u0631 \u0648\u0628\u0644\u0627\u06af \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627 \u062a\u0648\u0644\u06cc\u062f \u0645\u0642\u0627\u0644\u0647 \u0628\u0627 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062c\u062f\u06cc\u062f \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u06f1\u06f2 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u06f1\u06f8 \u0648\u0631\u062f\u067e\u0631\u0633 \u06f9 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u06f7 \u0633\u0626\u0648 \u06f1\u06f1 \u0641\u0646\u0627\u0648\u0631\u06cc \u06f1\u06f5 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":10,"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":58,"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/58"}],"wp:attachment":[{"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"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 AVALWEB Logo<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', 'Arial', sans-serif;\r\n }\r\n \r\n body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n padding: 20px;\r\n }\r\n \r\n .logo-container {\r\n text-align: center;\r\n padding: 40px;\r\n background-color: white;\r\n border-radius: 20px;\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\r\n transition: all 0.4s ease;\r\n border: 1px solid rgba(0, 0, 0, 0.05);\r\n max-width: 800px;\r\n width: 100%;\r\n }\r\n \r\n .logo-container:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .main-logo {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin-bottom: 30px;\r\n padding: 20px 0;\r\n position: relative;\r\n }\r\n \r\n \/* --- ADDED: style for the image --- *\/\r\n .logo-img {\r\n max-width: 140px; \/* \u0627\u0646\u062f\u0627\u0632\u0647 \u062a\u0635\u0648\u06cc\u0631 *\/\r\n width: 25%;\r\n height: auto;\r\n margin-left: 18px; \/* \u062f\u0631 \u062d\u0627\u0644\u062a RTL \u062a\u0635\u0648\u06cc\u0631 \u0633\u0645\u062a \u0686\u067e \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f *\/\r\n border-radius: 12px;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.08);\r\n flex-shrink: 0;\r\n }\r\n \/* --- end added --- *\/\r\n\r\n .logo-text {\r\n font-size: 5.5rem;\r\n font-weight: 900;\r\n letter-spacing: 2px;\r\n line-height: 1;\r\n text-transform: uppercase;\r\n display: inline-flex;\r\n flex-direction: row-reverse; \/* \u0627\u06cc\u0646 \u062e\u0637 \u0631\u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645 *\/\r\n }\r\n \r\n \/* \u062d\u0631\u0641 A \u0645\u062a\u062d\u0631\u06a9 - \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u0633\u0645\u062a \u0686\u067e \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f *\/\r\n .animated-A {\r\n display: inline-block;\r\n color: #ffd438;\r\n position: relative;\r\n animation: pulseGlow 2s infinite alternate ease-in-out;\r\n text-shadow: 0 0 20px rgba(255, 212, 56, 0.5);\r\n transform-origin: center;\r\n order: 1; \/* \u0627\u06cc\u0646 \u062e\u0637 \u0631\u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645 *\/\r\n }\r\n \r\n @keyframes pulseGlow {\r\n 0% {\r\n transform: scale(1) rotate(0deg);\r\n color: #ffd438;\r\n text-shadow: 0 0 15px rgba(255, 212, 56, 0.7);\r\n }\r\n 50% {\r\n transform: scale(1.1) rotate(5deg);\r\n color: #ffed4e;\r\n text-shadow: 0 0 25px rgba(255, 212, 56, 0.9);\r\n }\r\n 100% {\r\n transform: scale(1) rotate(0deg);\r\n color: #ffd438;\r\n text-shadow: 0 0 15px rgba(255, 212, 56, 0.7);\r\n }\r\n }\r\n \r\n .animated-A::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 8px;\r\n background: linear-gradient(90deg, #ffd438, #6ba74f);\r\n bottom: -10px;\r\n left: 0;\r\n border-radius: 4px;\r\n opacity: 0.8;\r\n animation: underlinePulse 2s infinite alternate;\r\n }\r\n \r\n @keyframes underlinePulse {\r\n 0% {\r\n width: 100%;\r\n opacity: 0.8;\r\n }\r\n 100% {\r\n width: 80%;\r\n opacity: 1;\r\n }\r\n }\r\n \r\n \/* \u0628\u0642\u06cc\u0647 \u062d\u0631\u0648\u0641 - \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u0646\u062f *\/\r\n .static-text {\r\n color: #6ba74f;\r\n display: inline-block;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n order: 2; \/* \u0627\u06cc\u0646 \u062e\u0637 \u0631\u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645 *\/\r\n }\r\n \r\n .logo-container:hover .static-text {\r\n color: #5a9640;\r\n text-shadow: 0 5px 15px rgba(107, 167, 79, 0.3);\r\n }\r\n \r\n .static-text::after {\r\n content: '';\r\n position: absolute;\r\n width: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #6ba74f, #ffd438);\r\n bottom: -8px;\r\n right: 0; \/* \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0632 left \u0628\u0647 right *\/\r\n border-radius: 2px;\r\n transition: width 0.5s ease;\r\n }\r\n \r\n .logo-container:hover .static-text::after {\r\n width: 100%;\r\n }\r\n \r\n \/* \u0628\u062e\u0634 \u062f\u0648\u0645: GO ONLINE *\/\r\n .go-online {\r\n font-size: 2.2rem;\r\n font-weight: 700;\r\n color: #333;\r\n margin-top: 10px;\r\n letter-spacing: 3px;\r\n position: relative;\r\n display: inline-block;\r\n padding: 10px 25px;\r\n border-radius: 50px;\r\n background: linear-gradient(90deg, rgba(107, 167, 79, 0.1), rgba(255, 212, 56, 0.1));\r\n transition: all 0.4s ease;\r\n }\r\n \r\n .go-online:hover {\r\n background: linear-gradient(90deg, rgba(107, 167, 79, 0.2), rgba(255, 212, 56, 0.2));\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\r\n letter-spacing: 5px;\r\n }\r\n \r\n .go-online span:nth-child(1) {\r\n color: #6ba74f;\r\n font-weight: 800;\r\n }\r\n \r\n .go-online span:nth-child(2) {\r\n color: #333;\r\n }\r\n \r\n .go-online span:nth-child(3) {\r\n color: #ffd438;\r\n font-weight: 800;\r\n }\r\n \r\n \/* \u0631\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\r\n @media (max-width: 768px) {\r\n .logo-text {\r\n font-size: 4rem;\r\n }\r\n \r\n .go-online {\r\n font-size: 1.8rem;\r\n }\r\n\r\n \/* responsive adjustment for the image *\/\r\n .logo-img { max-width: 110px; margin-left: 12px; }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .logo-text {\r\n font-size: 3rem;\r\n }\r\n \r\n .go-online {\r\n font-size: 1.5rem;\r\n letter-spacing: 2px;\r\n }\r\n \r\n .logo-container {\r\n padding: 25px 20px;\r\n }\r\n\r\n .logo-img { display:none; } \/* \u062f\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0646\u0627\u0631 \u0645\u062a\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0641\u0636\u0627 \u0631\u0627 \u062a\u0646\u06af \u06a9\u0646\u062f -> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u062e\u0637 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f \u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u062a\u0635\u0648\u06cc\u0631 \u0647\u0645 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f *\/\r\n }\r\n \r\n \/* \u0627\u0641\u06a9\u062a \u0646\u0648\u0631 *\/\r\n .light-effect {\r\n position: absolute;\r\n width: 200px;\r\n height: 200px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255, 212, 56, 0.2) 0%, rgba(255, 212, 56, 0) 70%);\r\n top: -50px;\r\n right: -50px; \/* \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0632 left \u0628\u0647 right *\/\r\n z-index: -1;\r\n animation: moveLight 10s infinite alternate ease-in-out;\r\n }\r\n \r\n @keyframes moveLight {\r\n 0% {\r\n transform: translate(0, 0);\r\n }\r\n 100% {\r\n transform: translate(-100px, 100px); \/* \u062a\u063a\u06cc\u06cc\u0631 \u062c\u0647\u062a \u062d\u0631\u06a9\u062a *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"logo-container\">\r\n <div class=\"light-effect\"><\/div>\r\n \r\n <div class=\"main-logo\">\r\n \r\n <img decoding=\"async\" class=\"logo-img\" src=\"\/mnt\/data\/9869d007-d6ae-4999-a22d-5c717bb61675.png\" alt=\"Avalweb image\">\r\n \r\n\r\n <div class=\"logo-text\">\r\n <span class=\"animated-A\">A<\/span>\r\n <span class=\"static-text\">VALWEB<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"go-online\">\r\n <span>GO<\/span>\r\n <span> <\/span>\r\n <span>ONLINE<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc\r\n const animatedA = document.querySelector('.animated-A');\r\n const staticText = document.querySelector('.static-text');\r\n const goOnline = document.querySelector('.go-online');\r\n \r\n \/\/ \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u0647\u0627\u0648\u0631 \u0628\u0631\u0627\u06cc \u062d\u0631\u0641 A\r\n animatedA.addEventListener('mouseenter', function() {\r\n this.style.animationPlayState = 'paused';\r\n this.style.transform = 'scale(1.2) rotate(10deg)';\r\n this.style.color = '#ffed4e';\r\n this.style.textShadow = '0 0 30px rgba(255, 212, 56, 1)';\r\n });\r\n \r\n animatedA.addEventListener('mouseleave', function() {\r\n this.style.animationPlayState = 'running';\r\n this.style.transform = 'scale(1) rotate(0deg)';\r\n this.style.color = '#ffd438';\r\n this.style.textShadow = '0 0 20px rgba(255, 212, 56, 0.5)';\r\n });\r\n \r\n \/\/ \u0627\u0641\u06a9\u062a \u062a\u0627\u06cc\u067e \u0628\u0631\u0627\u06cc GO ONLINE\r\n const goOnlineText = goOnline.textContent;\r\n goOnline.innerHTML = '';\r\n \r\n let i = 0;\r\n function typeWriter() {\r\n if (i < goOnlineText.length) {\r\n const span = document.createElement('span');\r\n span.textContent = goOnlineText.charAt(i);\r\n \r\n if (goOnlineText.charAt(i) === 'G' || goOnlineText.charAt(i) === 'O') {\r\n span.style.color = '#6ba74f';\r\n span.style.fontWeight = '800';\r\n } else if (goOnlineText.charAt(i) === 'N' || goOnlineText.charAt(i) === 'L' || goOnlineText.charAt(i) === 'I' || goOnlineText.charAt(i) === 'E') {\r\n span.style.color = '#ffd438';\r\n span.style.fontWeight = '800';\r\n } else {\r\n span.style.color = '#333';\r\n }\r\n \r\n goOnline.appendChild(span);\r\n i++;\r\n setTimeout(typeWriter, 100);\r\n }\r\n }\r\n \r\n \/\/ \u0627\u062c\u0631\u0627\u06cc \u0627\u0641\u06a9\u062a \u062a\u0627\u06cc\u067e \u067e\u0633 \u0627\u0632 \u0644\u0648\u062f \u0635\u0641\u062d\u0647\r\n window.addEventListener('load', function() {\r\n setTimeout(typeWriter, 500);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-11ff72d e-flex e-con-boxed e-con e-parent\" data-id=\"11ff72d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ff2b760 elementor-widget elementor-widget-html\" data-id=\"ff2b760\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fa\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>\u0648\u0628\u0644\u0627\u06af \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/gh\/rastikerdar\/vazir-font@v30.1.0\/dist\/font-face.css\">\r\n <style>\r\n \/* Reset \u0648 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0627\u0648\u0644\u06cc\u0647 *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: #333;\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n .container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 30px;\r\n margin-top: 20px;\r\n }\r\n \r\n \/* \u0647\u062f\u0631 \u0628\u062e\u0634 \u0648\u0628\u0644\u0627\u06af *\/\r\n .blog-header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n padding: 20px;\r\n background: linear-gradient(135deg, #6ba74f 0%, #ffd438 100%);\r\n border-radius: 15px;\r\n color: white;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .blog-header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\"><path d=\"M0,0 L100,0 L100,100 Z\" fill=\"rgba(255,255,255,0.1)\"\/><\/svg>');\r\n background-size: cover;\r\n }\r\n \r\n .blog-header h1 {\r\n font-size: 2.8rem;\r\n margin-bottom: 10px;\r\n position: relative;\r\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n .blog-header p {\r\n font-size: 1.2rem;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n \r\n \/* \u0628\u062e\u0634 \u0627\u0635\u0644\u06cc \u0645\u062d\u062a\u0648\u0627 *\/\r\n .main-content {\r\n flex: 3;\r\n min-width: 300px;\r\n }\r\n \r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627\u06cc \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af *\/\r\n .blog-post {\r\n background-color: white;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n margin-bottom: 30px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n position: relative;\r\n transform: translateY(0);\r\n }\r\n \r\n .blog-post:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .blog-post::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n width: 100%;\r\n height: 5px;\r\n background: linear-gradient(90deg, #ffd438, #6ba74f);\r\n transition: height 0.3s ease;\r\n }\r\n \r\n .blog-post:hover::after {\r\n height: 8px;\r\n }\r\n \r\n .post-image {\r\n width: 100%;\r\n height: 250px;\r\n object-fit: cover;\r\n transition: transform 0.7s ease;\r\n }\r\n \r\n .blog-post:hover .post-image {\r\n transform: scale(1.05);\r\n }\r\n \r\n .post-content {\r\n padding: 25px;\r\n }\r\n \r\n .post-meta {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 15px;\r\n font-size: 0.9rem;\r\n color: #666;\r\n }\r\n \r\n .post-category {\r\n background-color: #6ba74f;\r\n color: white;\r\n padding: 5px 12px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n font-weight: bold;\r\n }\r\n \r\n .post-date {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n }\r\n \r\n .post-title {\r\n color: #2c3e50;\r\n font-size: 1.6rem;\r\n margin-bottom: 15px;\r\n transition: color 0.3s ease;\r\n }\r\n \r\n .blog-post:hover .post-title {\r\n color: #6ba74f;\r\n }\r\n \r\n .post-excerpt {\r\n color: #555;\r\n margin-bottom: 20px;\r\n line-height: 1.8;\r\n }\r\n \r\n .read-more {\r\n display: inline-block;\r\n background: linear-gradient(to right, #ffd438, #f7c600);\r\n color: #333;\r\n padding: 10px 25px;\r\n border-radius: 30px;\r\n text-decoration: none;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 10px rgba(255, 212, 56, 0.3);\r\n }\r\n \r\n .read-more:hover {\r\n background: linear-gradient(to right, #6ba74f, #5a9640);\r\n color: white;\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 15px rgba(107, 167, 79, 0.4);\r\n }\r\n \r\n \/* \u0633\u0627\u06cc\u062f\u0628\u0627\u0631 \u0648 \u0648\u06cc\u062c\u062a\u200c\u0647\u0627 *\/\r\n .sidebar {\r\n flex: 1;\r\n min-width: 300px;\r\n }\r\n \r\n .widget {\r\n background-color: white;\r\n border-radius: 12px;\r\n padding: 25px;\r\n margin-bottom: 30px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\r\n border-top: 5px solid #6ba74f;\r\n }\r\n \r\n .widget-title {\r\n color: #2c3e50;\r\n font-size: 1.4rem;\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid #eee;\r\n position: relative;\r\n }\r\n \r\n .widget-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -2px;\r\n right: 0;\r\n width: 80px;\r\n height: 2px;\r\n background-color: #ffd438;\r\n }\r\n \r\n \/* \u0648\u06cc\u062c\u062a \u062c\u0633\u062a\u062c\u0648 - \u0637\u0631\u0627\u062d\u06cc \u062c\u062f\u06cc\u062f \u0648 \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647 *\/\r\n .search-form {\r\n display: flex;\r\n margin-top: 15px;\r\n position: relative;\r\n }\r\n \r\n .search-input {\r\n flex: 1;\r\n padding: 14px 50px 14px 15px;\r\n border: 2px solid #eaeaea;\r\n border-radius: 30px;\r\n font-size: 1rem;\r\n transition: all 0.3s ease;\r\n font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n text-align: right;\r\n direction: rtl;\r\n background-color: #f9f9f9;\r\n box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);\r\n }\r\n \r\n .search-input:focus {\r\n outline: none;\r\n border-color: #6ba74f;\r\n background-color: white;\r\n box-shadow: 0 0 0 3px rgba(107, 167, 79, 0.1), inset 0 2px 5px rgba(0, 0, 0, 0.05);\r\n }\r\n \r\n .search-button {\r\n position: absolute;\r\n left: 8px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: linear-gradient(135deg, #ffd438, #f7c600);\r\n color: #333;\r\n border: none;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 3px 8px rgba(255, 212, 56, 0.3);\r\n }\r\n \r\n .search-button:hover {\r\n background: linear-gradient(135deg, #6ba74f, #5a9640);\r\n color: white;\r\n transform: translateY(-50%) scale(1.1);\r\n box-shadow: 0 5px 12px rgba(107, 167, 79, 0.4);\r\n }\r\n \r\n \/* \u0628\u0631\u0627\u06cc \u062d\u0644 \u0645\u0634\u06a9\u0644 placeholder \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 *\/\r\n .search-input::placeholder {\r\n font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n color: #999;\r\n opacity: 1;\r\n text-align: right;\r\n direction: rtl;\r\n }\r\n \r\n \/* \u0648\u06cc\u062c\u062a \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627 *\/\r\n .categories-list {\r\n list-style: none;\r\n }\r\n \r\n .categories-list li {\r\n padding: 12px 0;\r\n border-bottom: 1px dashed #eee;\r\n transition: padding-right 0.3s ease;\r\n }\r\n \r\n .categories-list li:last-child {\r\n border-bottom: none;\r\n }\r\n \r\n .categories-list li:hover {\r\n padding-right: 10px;\r\n }\r\n \r\n .categories-list a {\r\n color: #555;\r\n text-decoration: none;\r\n display: flex;\r\n justify-content: space-between;\r\n transition: color 0.3s ease;\r\n }\r\n \r\n .categories-list a:hover {\r\n color: #6ba74f;\r\n }\r\n \r\n .category-count {\r\n background-color: #ffd438;\r\n color: #333;\r\n padding: 2px 10px;\r\n border-radius: 12px;\r\n font-size: 0.8rem;\r\n font-weight: bold;\r\n }\r\n \r\n \/* \u0648\u06cc\u062c\u062a \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 *\/\r\n .recent-posts {\r\n list-style: none;\r\n }\r\n \r\n .recent-post {\r\n display: flex;\r\n align-items: center;\r\n padding: 15px 0;\r\n border-bottom: 1px dashed #eee;\r\n }\r\n \r\n .recent-post:last-child {\r\n border-bottom: none;\r\n }\r\n \r\n .recent-post img {\r\n width: 70px;\r\n height: 70px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n margin-left: 15px;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .recent-post:hover img {\r\n transform: scale(1.1);\r\n }\r\n \r\n .recent-post-content h4 {\r\n font-size: 1rem;\r\n margin-bottom: 5px;\r\n transition: color 0.3s ease;\r\n }\r\n \r\n .recent-post:hover h4 {\r\n color: #6ba74f;\r\n }\r\n \r\n .recent-post-date {\r\n font-size: 0.85rem;\r\n color: #888;\r\n }\r\n \r\n \/* \u0648\u06cc\u062c\u062a \u062a\u06af\u200c\u0647\u0627 *\/\r\n .tags-cloud {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n }\r\n \r\n .tag {\r\n background-color: #f1f8e9;\r\n color: #5a9640;\r\n padding: 8px 15px;\r\n border-radius: 20px;\r\n font-size: 0.9rem;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .tag:hover {\r\n background-color: #6ba74f;\r\n color: white;\r\n transform: translateY(-3px);\r\n }\r\n \r\n \/* \u067e\u06cc\u0646\u0648\u0634\u062a \u0648 \u067e\u0627\u06af\u0631\u062f *\/\r\n .blog-footer {\r\n text-align: center;\r\n margin-top: 50px;\r\n padding-top: 30px;\r\n border-top: 1px solid #eee;\r\n color: #777;\r\n }\r\n \r\n .pagination {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: 40px;\r\n }\r\n \r\n .page-number {\r\n display: inline-block;\r\n width: 45px;\r\n height: 45px;\r\n line-height: 45px;\r\n text-align: center;\r\n background-color: white;\r\n color: #555;\r\n border-radius: 50%;\r\n text-decoration: none;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\r\n }\r\n \r\n .page-number:hover, .page-number.active {\r\n background-color: #6ba74f;\r\n color: white;\r\n transform: translateY(-5px);\r\n }\r\n \r\n \/* \u0627\u0641\u06a9\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u0645\u0648\u0633 *\/\r\n .scroll-hint {\r\n text-align: center;\r\n margin: 30px 0;\r\n color: #888;\r\n font-size: 0.9rem;\r\n }\r\n \r\n .mouse {\r\n width: 30px;\r\n height: 50px;\r\n border: 2px solid #6ba74f;\r\n border-radius: 20px;\r\n position: relative;\r\n margin: 0 auto 10px;\r\n }\r\n \r\n .wheel {\r\n width: 4px;\r\n height: 10px;\r\n background-color: #ffd438;\r\n border-radius: 2px;\r\n position: absolute;\r\n top: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n animation: scrollAnimation 1.5s infinite;\r\n }\r\n \r\n @keyframes scrollAnimation {\r\n 0% { top: 10px; opacity: 1; }\r\n 100% { top: 30px; opacity: 0; }\r\n }\r\n \r\n \/* \u0631\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\r\n @media (max-width: 992px) {\r\n .container {\r\n flex-direction: column;\r\n }\r\n \r\n .sidebar {\r\n order: -1;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .blog-header h1 {\r\n font-size: 2.2rem;\r\n }\r\n \r\n .post-meta {\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n }\r\n \r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u062f\u06a9\u0645\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u0644\u0627\u06af *\/\r\n .view-blog-btn {\r\n display: inline-block;\r\n background: linear-gradient(to right, #6ba74f, #5a9640);\r\n color: white;\r\n padding: 12px 30px;\r\n border-radius: 30px;\r\n text-decoration: none;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n margin-top: 10px;\r\n box-shadow: 0 4px 10px rgba(107, 167, 79, 0.3);\r\n }\r\n \r\n .view-blog-btn:hover {\r\n background: linear-gradient(to right, #ffd438, #f7c600);\r\n color: #333;\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 15px rgba(255, 212, 56, 0.4);\r\n }\r\n \r\n .action-buttons {\r\n display: flex;\r\n gap: 15px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0648\u06cc\u0698\u0647 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0647 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc *\/\r\n .ai-category {\r\n font-family: 'Vazir', sans-serif;\r\n font-weight: bold;\r\n }\r\n \r\n .ai-category .category-count {\r\n background-color: #2196f3;\r\n color: white;\r\n }\r\n \r\n \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u062c\u0633\u062a\u062c\u0648 *\/\r\n .search-suggestions {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n background: white;\r\n border-radius: 0 0 15px 15px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n z-index: 100;\r\n display: none;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n }\r\n \r\n .search-suggestion-item {\r\n padding: 10px 15px;\r\n border-bottom: 1px solid #eee;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n text-align: right;\r\n }\r\n \r\n .search-suggestion-item:hover {\r\n background-color: #f8f9fa;\r\n color: #6ba74f;\r\n }\r\n \r\n .search-suggestion-item:last-child {\r\n border-bottom: none;\r\n }\r\n \r\n \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062a\u0627\u06cc\u067e \u0628\u0631\u0627\u06cc placeholder *\/\r\n @keyframes typing {\r\n 0% { content: \"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628...\"; }\r\n 25% { content: \"\u0648\u0631\u062f\u067e\u0631\u0633...\"; }\r\n 50% { content: \"\u0633\u0626\u0648...\"; }\r\n 75% { content: \"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc...\"; }\r\n 100% { content: \"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc...\"; }\r\n }\r\n \r\n .search-input.animated::placeholder {\r\n animation: typing 10s infinite;\r\n }\r\n \r\n \/* \u067e\u0627\u067e\u200c\u0622\u067e \u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u0644\u0627\u06af *\/\r\n .blog-modal-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.8);\r\n z-index: 2000;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n }\r\n \r\n .blog-modal {\r\n background: white;\r\n border-radius: 15px;\r\n max-width: 900px;\r\n width: 100%;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);\r\n animation: modalFadeIn 0.4s ease;\r\n }\r\n \r\n @keyframes modalFadeIn {\r\n from { opacity: 0; transform: translateY(-30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n .modal-header {\r\n background: linear-gradient(135deg, #6ba74f 0%, #ffd438 100%);\r\n padding: 25px;\r\n color: white;\r\n border-radius: 15px 15px 0 0;\r\n position: relative;\r\n }\r\n \r\n .modal-header h2 {\r\n margin: 0;\r\n font-size: 1.8rem;\r\n }\r\n \r\n .modal-close {\r\n position: absolute;\r\n top: 20px;\r\n left: 20px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: none;\r\n color: white;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .modal-close:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: rotate(90deg);\r\n }\r\n \r\n .modal-content {\r\n padding: 30px;\r\n line-height: 1.8;\r\n color: #333;\r\n }\r\n \r\n .modal-content h3 {\r\n color: #6ba74f;\r\n margin: 25px 0 15px;\r\n font-size: 1.5rem;\r\n }\r\n \r\n .modal-content p {\r\n margin-bottom: 20px;\r\n }\r\n \r\n .modal-image {\r\n width: 100%;\r\n height: 300px;\r\n object-fit: cover;\r\n border-radius: 10px;\r\n margin: 20px 0;\r\n }\r\n \r\n .modal-meta {\r\n display: flex;\r\n justify-content: space-between;\r\n margin: 20px 0;\r\n padding: 15px;\r\n background: #f8f9fa;\r\n border-radius: 10px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <header class=\"blog-header\">\r\n <h1><i class=\"fas fa-blog\"><\/i> \u0648\u0628\u0644\u0627\u06af \u062a\u062e\u0635\u0635\u06cc<\/h1>\r\n <p>\u0622\u062e\u0631\u06cc\u0646 \u0645\u0642\u0627\u0644\u0627\u062a\u060c \u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0637\u0627\u0644\u0628 \u0622\u0645\u0648\u0632\u0634\u06cc \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u060c \u062a\u0648\u0633\u0639\u0647 \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631 \u0648 \u0641\u0646\u0627\u0648\u0631\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a<\/p>\r\n <\/header>\r\n \r\n \r\n <div class=\"scroll-hint\">\r\n <div class=\"mouse\">\r\n <div class=\"wheel\"><\/div>\r\n <\/div>\r\n <p>\u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0637\u0627\u0644\u0628 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646\u06cc\u062f<\/p>\r\n <\/div>\r\n \r\n <div class=\"container\">\r\n \r\n <main class=\"main-content\" id=\"blog-posts-container\">\r\n \r\n <\/main>\r\n \r\n \r\n <aside class=\"sidebar\">\r\n \r\n <div class=\"widget\">\r\n <h3 class=\"widget-title\">\u062c\u0633\u062a\u062c\u0648 \u062f\u0631 \u0648\u0628\u0644\u0627\u06af<\/h3>\r\n <form class=\"search-form\" id=\"search-form\">\r\n <input type=\"text\" class=\"search-input animated\" placeholder=\"\u0645\u0648\u0636\u0648\u0639 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u06cc\u062f...\" id=\"search-input\">\r\n <button type=\"submit\" class=\"search-button\" id=\"search-button\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/button>\r\n <div class=\"search-suggestions\" id=\"search-suggestions\">\r\n \r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n \r\n \r\n <div class=\"widget\">\r\n <h3 class=\"widget-title\">\u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627<\/h3>\r\n <ul class=\"categories-list\">\r\n <li><a href=\"https:\/\/seo.avalweb.site\/\" target=\"_blank\" class=\"ai-category\" rel=\"noopener\">\u062a\u0648\u0644\u06cc\u062f \u0645\u0642\u0627\u0644\u0647 \u0628\u0627 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc <span class=\"category-count\">\u062c\u062f\u06cc\u062f<\/span><\/a><\/li>\r\n <li><a href=\"https:\/\/www.avalweb.site\/services\/shop-maker\" target=\"_blank\" rel=\"noopener\">\u0637\u0631\u0627\u062d\u06cc \u0648\u0628 <span class=\"category-count\">\u06f1\u06f2<\/span><\/a><\/li>\r\n <li><a href=\"#\">\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc <span class=\"category-count\">\u06f1\u06f8<\/span><\/a><\/li>\r\n <li><a href=\"https:\/\/www.avalweb.site\/services\/website-builder\" target=\"_blank\" rel=\"noopener\">\u0648\u0631\u062f\u067e\u0631\u0633 <span class=\"category-count\">\u06f9<\/span><\/a><\/li>\r\n <li><a href=\"#\">\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc <span class=\"category-count\">\u06f7<\/span><\/a><\/li>\r\n <li><a href=\"https:\/\/www.avalweb.site\/services\/seo\" target=\"_blank\" rel=\"noopener\">\u0633\u0626\u0648 <span class=\"category-count\">\u06f1\u06f1<\/span><\/a><\/li>\r\n <li><a href=\"#\">\u0641\u0646\u0627\u0648\u0631\u06cc <span class=\"category-count\">\u06f1\u06f5<\/span><\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n \r\n <div class=\"widget\">\r\n <h3 class=\"widget-title\">\u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u0627\u062e\u06cc\u0631<\/h3>\r\n <ul class=\"recent-posts\">\r\n <li class=\"recent-post\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80\" alt=\"\u067e\u0633\u062a \u0627\u062e\u06cc\u0631 \u06f1\">\r\n <div class=\"recent-post-content\">\r\n <h4>\u0645\u0639\u0631\u0641\u06cc \u0628\u0647\u062a\u0631\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc UI\/UX \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f4<\/h4>\r\n <div class=\"recent-post-date\">\u06f1\u06f2 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"recent-post\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80\" alt=\"\u067e\u0633\u062a \u0627\u062e\u06cc\u0631 \u06f2\">\r\n <div class=\"recent-post-content\">\r\n <h4>\u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0645\u0644 Git \u0648 GitHub \u0628\u0631\u0627\u06cc \u062a\u06cc\u0645\u200c\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647<\/h4>\r\n <div class=\"recent-post-date\">\u06f8 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"recent-post\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80\" alt=\"\u067e\u0633\u062a \u0627\u062e\u06cc\u0631 \u06f3\">\r\n <div class=\"recent-post-content\">\r\n <h4>\u0631\u0627\u0647\u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a\u06cc \u0636\u0631\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0648\u0631\u062f\u067e\u0631\u0633\u06cc<\/h4>\r\n <div class=\"recent-post-date\">\u06f3 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/div>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n \r\n <div class=\"widget\">\r\n <h3 class=\"widget-title\">\u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627\u06cc \u067e\u0631\u0637\u0631\u0641\u062f\u0627\u0631<\/h3>\r\n <div class=\"tags-cloud\">\r\n <a href=\"https:\/\/www.avalweb.site\/services\/shop-maker\" target=\"_blank\" class=\"tag\" rel=\"noopener\">\u0637\u0631\u0627\u062d\u06cc \u0648\u0628<\/a>\r\n <a href=\"#\" class=\"tag\">\u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627<\/a>\r\n <a href=\"#\" class=\"tag\">JavaScript<\/a>\r\n <a href=\"#\" class=\"tag\">CSS3<\/a>\r\n <a href=\"#\" class=\"tag\">HTML5<\/a>\r\n <a href=\"#\" class=\"tag\">\u0648\u0631\u062f\u067e\u0631\u0633<\/a>\r\n <a href=\"#\" class=\"tag\">UI\/UX<\/a>\r\n <a href=\"https:\/\/www.avalweb.site\/services\/seo\" target=\"_blank\" class=\"tag\" rel=\"noopener\">\u0633\u0626\u0648<\/a>\r\n <a href=\"#\" class=\"tag\">\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"widget\">\r\n <h3 class=\"widget-title\">\u0639\u0636\u0648\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647<\/h3>\r\n <p>\u0628\u0627 \u0639\u0636\u0648\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647\u060c \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u0645\u0637\u0627\u0644\u0628 \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f.<\/p>\r\n <form id=\"newsletter-form\" style=\"margin-top: 15px;\">\r\n <input type=\"email\" class=\"search-input\" placeholder=\"\u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" style=\"border-radius: 30px; width: 100%; margin-bottom: 10px;\">\r\n <button type=\"submit\" class=\"read-more\" style=\"width: 100%; text-align: center;\">\u0639\u0636\u0648\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/aside>\r\n <\/div>\r\n \r\n \r\n <div class=\"pagination\" id=\"pagination-container\">\r\n \r\n <\/div>\r\n \r\n \r\n <footer class=\"blog-footer\">\r\n <p>\u00a9 \u06f1\u06f4\u06f0\u06f3 - \u06a9\u0644\u06cc\u0647 \u062d\u0642\u0648\u0642 \u0628\u0631\u0627\u06cc <a href=\"https:\/\/www.avalweb.site\/\" target=\"_blank\" style=\"color: #6ba74f; text-decoration: none; font-weight: bold;\" rel=\"noopener\">\u0627\u0648\u0644 \u0648\u0628<\/a> \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a. \u0637\u0631\u0627\u062d\u06cc \u0648 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627 \u0639\u0644\u0627\u0642\u0647<\/p>\r\n <div style=\"margin-top: 15px;\">\r\n <a href=\"https:\/\/www.instagram.com\/avalweb.site?igsh=MWswenhhbnhyNWprcA==\" target=\"_blank\" style=\"color: #6ba74f; margin: 0 10px; font-size: 1.5rem;\" rel=\"noopener\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n <a href=\"https:\/\/t.me\/Avalweb\" target=\"_blank\" style=\"color: #6ba74f; margin: 0 10px; font-size: 1.5rem;\"><i class=\"fab fa-telegram\"><\/i><\/a>\r\n <a href=\"https:\/\/www.linkedin.com\/company\/avalweb\/\" target=\"_blank\" style=\"color: #6ba74f; margin: 0 10px; font-size: 1.5rem;\" rel=\"noopener\"><i class=\"fab fa-linkedin\"><\/i><\/a>\r\n <a href=\"https:\/\/wa.me\/\" target=\"_blank\" style=\"color: #6ba74f; margin: 0 10px; font-size: 1.5rem;\" rel=\"noopener\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <div class=\"blog-modal-overlay\" id=\"blog-modal\">\r\n <div class=\"blog-modal\">\r\n <div class=\"modal-header\">\r\n <button class=\"modal-close\" id=\"modal-close\">\u00d7<\/button>\r\n <h2 id=\"modal-title\">\u0639\u0646\u0648\u0627\u0646 \u0645\u0642\u0627\u0644\u0647<\/h2>\r\n <\/div>\r\n <div class=\"modal-content\" id=\"modal-content\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af\r\n const blogPosts = [\r\n {\r\n id: 1,\r\n image: \"https:\/\/images.unsplash.com\/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628\",\r\n date: \"\u06f1\u06f5 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f4\",\r\n excerpt: \"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0628\u0631\u0631\u0633\u06cc \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u06cc\u0645 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0648\u0628\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u062a\u0645\u0627\u0645 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627 \u0628\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06a9\u0644 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0631\u0627 \u0645\u0631\u0648\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\",\r\n fullContent: `\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\" alt=\"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0645\u062f\u0631\u0646\" class=\"modal-image\">\r\n <div class=\"modal-meta\">\r\n <span class=\"post-category\">\u0637\u0631\u0627\u062d\u06cc \u0648\u0628<\/span>\r\n <span class=\"post-date\"><i class=\"far fa-calendar-alt\"><\/i> \u06f1\u06f5 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/span>\r\n <\/div>\r\n <h3>\u0645\u0642\u062f\u0645\u0647<\/h3>\r\n <p>\u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 (Responsive Web Design) \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0633\u0627\u0644\u200c\u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u0628\u0647 \u06cc\u06a9\u06cc \u0627\u0632 \u0636\u0631\u0648\u0631\u06cc\u200c\u062a\u0631\u06cc\u0646 \u0627\u0644\u0632\u0627\u0645\u0627\u062a \u0628\u0631\u0627\u06cc \u0647\u0631 \u0648\u0628\u0633\u0627\u06cc\u062a \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\r\n \r\n <h3>\u0627\u0635\u0648\u0644 \u0637\u0631\u0627\u062d\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627<\/h3>\r\n <p>\u0637\u0631\u0627\u062d\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0628\u0631 \u0633\u0647 \u0627\u0635\u0644 \u0627\u0633\u0627\u0633\u06cc \u0627\u0633\u062a\u0648\u0627\u0631 \u0627\u0633\u062a:<\/p>\r\n <p>1. <strong>\u06af\u0631\u06cc\u062f\u0647\u0627\u06cc \u0633\u06cc\u0627\u0644<\/strong>: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0633\u0628\u06cc \u0645\u0627\u0646\u0646\u062f \u062f\u0631\u0635\u062f \u0628\u0647 \u062c\u0627\u06cc \u067e\u06cc\u06a9\u0633\u0644<\/p>\r\n <p>2. <strong>\u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631<\/strong>: \u062a\u0635\u0627\u0648\u06cc\u0631\u06cc \u06a9\u0647 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f<\/p>\r\n <p>3. <strong>\u0645\u062f\u06cc\u0627 \u06a9\u0648\u0626\u0631\u06cc\u200c\u0647\u0627<\/strong>: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS Media Queries \u0628\u0631\u0627\u06cc \u0627\u0639\u0645\u0627\u0644 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647<\/p>\r\n \r\n <h3>\u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/h3>\r\n <p>\u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f4\u060c \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0645\u0627\u0646\u0646\u062f Container Queries \u0648 CSS Grid Level 2 \u0628\u0647 \u0637\u0631\u0627\u062d\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u06a9\u0646\u062a\u0631\u0644 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0631 \u0631\u0648\u06cc \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f.<\/p>\r\n \r\n <h3>\u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc<\/h3>\r\n <p>\u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0646\u0647 \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628\u060c \u0628\u0644\u06a9\u0647 \u06cc\u06a9 \u0636\u0631\u0648\u0631\u062a \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0627\u0645\u0631\u0648\u0632 \u0627\u0633\u062a. \u0628\u0627 \u0631\u0639\u0627\u06cc\u062a \u0627\u0635\u0648\u0644 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647\u200c\u0627\u06cc \u062f\u0631 \u062a\u0645\u0627\u0645 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f.<\/p>\r\n `\r\n },\r\n {\r\n id: 2,\r\n image: \"https:\/\/images.unsplash.com\/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\",\r\n date: \"\u06f1\u06f0 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648\u0628: \u0627\u0632 \u0635\u0641\u0631 \u062a\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc\",\r\n excerpt: \"\u0628\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0627\u0647\u0645\u06cc\u062a \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u060c \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0645\u0639\u0631\u0641\u06cc \u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u0627\u06cc\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u0648 \u0646\u062d\u0648\u0647 \u0627\u062f\u063a\u0627\u0645 \u0622\u0646 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u06cc\u0645.\",\r\n fullContent: `\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\" alt=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\" class=\"modal-image\">\r\n <div class=\"modal-meta\">\r\n <span class=\"post-category\">\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc<\/span>\r\n <span class=\"post-date\"><i class=\"far fa-calendar-alt\"><\/i> \u06f1\u06f0 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/span>\r\n <\/div>\r\n <h3>\u0645\u0642\u062f\u0645\u0647<\/h3>\r\n <p>\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 (Machine Learning) \u06cc\u06a9\u06cc \u0627\u0632 \u062c\u0630\u0627\u0628\u200c\u062a\u0631\u06cc\u0646 \u062d\u0648\u0632\u0647\u200c\u0647\u0627\u06cc \u0641\u0646\u0627\u0648\u0631\u06cc \u062f\u0631 \u0633\u0627\u0644\u200c\u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0628\u0631\u0631\u0633\u06cc \u0646\u062d\u0648\u0647 \u0627\u062f\u063a\u0627\u0645 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u06cc\u0645.<\/p>\r\n \r\n <h3>\u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u0627\u06cc\u0647<\/h3>\r\n <p>\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc\u06cc \u0627\u0634\u0627\u0631\u0647 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u0646\u062f \u0648 \u0628\u062f\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0635\u0631\u06cc\u062d\u060c \u062a\u0635\u0645\u06cc\u0645\u200c\u06af\u06cc\u0631\u06cc \u06a9\u0646\u0646\u062f.<\/p>\r\n \r\n <h3>\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc JavaScript<\/h3>\r\n <p>\u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u062f\u0644\u200c\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f TensorFlow.js \u0648 Brain.js \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\r\n \r\n <h3>\u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc<\/h3>\r\n <p>\u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u062f\u0631 \u0648\u0628 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0647 \u062a\u0634\u062e\u06cc\u0635 \u062a\u0635\u0648\u06cc\u0631\u060c \u067e\u0631\u062f\u0627\u0632\u0634 \u0632\u0628\u0627\u0646 \u0637\u0628\u06cc\u0639\u06cc\u060c \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u062a\u0648\u0635\u06cc\u0647\u200c\u06af\u0631 \u0648 \u067e\u06cc\u0634\u200c\u0628\u06cc\u0646\u06cc \u0631\u0641\u062a\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0634\u0627\u0631\u0647 \u06a9\u0631\u062f.<\/p>\r\n `\r\n },\r\n {\r\n id: 3,\r\n image: \"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1115&q=80\",\r\n category: \"\u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647\",\r\n date: \"\u06f5 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u0628\u0633\u0627\u06cc\u062a: \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0633\u0631\u06cc\u0639\u200c\u062a\u0631\",\r\n excerpt: \"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u06f1\u06f5 \u062a\u06a9\u0646\u06cc\u06a9 \u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0627\u0632 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u0641\u0634\u0631\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc lazy loading.\",\r\n fullContent: `\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1115&q=80\" alt=\"\u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647\" class=\"modal-image\">\r\n <div class=\"modal-meta\">\r\n <span class=\"post-category\">\u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647<\/span>\r\n <span class=\"post-date\"><i class=\"far fa-calendar-alt\"><\/i> \u06f5 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3<\/span>\r\n <\/div>\r\n <h3>\u0627\u0647\u0645\u06cc\u062a \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc<\/h3>\r\n <p>\u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a \u062a\u0623\u062b\u06cc\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645\u06cc \u0628\u0631 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc\u060c \u0646\u0631\u062e \u062a\u0628\u062f\u06cc\u0644 \u0648 \u0633\u0626\u0648 \u062f\u0627\u0631\u062f. \u0637\u0628\u0642 \u062a\u062d\u0642\u06cc\u0642\u0627\u062a\u060c \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u067e\u0633 \u0627\u0632 \u06f3 \u062b\u0627\u0646\u06cc\u0647 \u0645\u0646\u062a\u0638\u0631 \u0645\u0627\u0646\u062f\u0646 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647\u060c \u0633\u0627\u06cc\u062a \u0631\u0627 \u062a\u0631\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\r\n \r\n <h3>\u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc<\/h3>\r\n <p>1. \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0631\u0645\u062a\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0645\u0627\u0646\u0646\u062f WebP<\/p>\r\n <p>2. \u0641\u0634\u0631\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u0648 JavaScript<\/p>\r\n <p>3. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0634 \u0645\u0631\u0648\u0631\u06af\u0631<\/p>\r\n <p>4. \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc lazy loading \u0628\u0631\u0627\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631<\/p>\r\n <p>5. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CDN \u0628\u0631\u0627\u06cc \u062a\u062d\u0648\u06cc\u0644 \u0645\u062d\u062a\u0648\u0627<\/p>\r\n \r\n <h3>\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc<\/h3>\r\n <p>\u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc \u0633\u0631\u0639\u062a \u0648\u0628\u0633\u0627\u06cc\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Google PageSpeed Insights\u060c GTmetrix \u0648 WebPageTest \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\r\n `\r\n },\r\n {\r\n id: 4,\r\n image: \"https:\/\/images.unsplash.com\/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80\",\r\n category: \"\u0648\u0631\u062f\u067e\u0631\u0633\",\r\n date: \"\u06f1 \u0645\u0631\u062f\u0627\u062f \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u06f1\u06f0 \u0627\u0641\u0632\u0648\u0646\u0647 \u0636\u0631\u0648\u0631\u06cc \u0648\u0631\u062f\u067e\u0631\u0633 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0633\u0627\u06cc\u062a \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f4\",\r\n excerpt: \"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u06f1\u06f0 \u0627\u0641\u0632\u0648\u0646\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648 \u0636\u0631\u0648\u0631\u06cc \u0648\u0631\u062f\u067e\u0631\u0633 \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0647\u0631 \u0633\u0627\u06cc\u062a\u06cc \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0627\u0645\u0646\u06cc\u062a \u0628\u0647 \u0622\u0646\u200c\u0647\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0627\u0641\u0632\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u0648\u0631\u062f\u067e\u0631\u0633...\"\r\n },\r\n {\r\n id: 5,\r\n image: \"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0633\u0626\u0648\",\r\n date: \"\u06f2\u06f8 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0626\u0648 \u0628\u0631\u0627\u06cc \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648: \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644\",\r\n excerpt: \"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0627\u06cc\u062a \u0628\u0631\u0627\u06cc \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u060c \u0627\u0632 \u062a\u062d\u0642\u06cc\u0642 \u06a9\u0644\u0645\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u062a\u0627 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u062d\u062a\u0648\u0627 \u0648 \u0644\u06cc\u0646\u06a9\u200c\u0633\u0627\u0632\u06cc \u062f\u0627\u062e\u0644\u06cc.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0633\u0626\u0648...\"\r\n },\r\n {\r\n id: 6,\r\n image: \"https:\/\/images.unsplash.com\/photo-1555949963-aa79dcee981c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc\",\r\n date: \"\u06f2\u06f5 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0627\u0635\u0648\u0644 \u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI) \u0628\u0631\u0627\u06cc \u062a\u0627\u0632\u0647\u200c\u06a9\u0627\u0631\u0627\u0646\",\r\n excerpt: \"\u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0633\u0627\u06cc\u062a\u200c\u0647\u0627 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 UI\/UX...\"\r\n },\r\n {\r\n id: 7,\r\n image: \"https:\/\/images.unsplash.com\/photo-1516116216624-53e697fedbea?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0641\u0646\u0627\u0648\u0631\u06cc\",\r\n date: \"\u06f2\u06f0 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628: \u0627\u0632 WebAssembly \u062a\u0627 PWA\",\r\n excerpt: \"\u0645\u0631\u0648\u0631\u06cc \u0628\u0631 \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u06a9\u0647 \u0622\u06cc\u0646\u062f\u0647 \u0627\u06cc\u0646 \u0635\u0646\u0639\u062a \u0631\u0627 \u0634\u06a9\u0644 \u062e\u0648\u0627\u0647\u0646\u062f \u062f\u0627\u062f \u0648 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f...\"\r\n },\r\n {\r\n id: 8,\r\n image: \"https:\/\/images.unsplash.com\/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\",\r\n date: \"\u06f1\u06f5 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0622\u0645\u0648\u0632\u0634 React.js \u0627\u0632 \u067e\u0627\u06cc\u0647 \u062a\u0627 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\",\r\n excerpt: \"\u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0645\u0639 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 React.js \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0648 \u0645\u062f\u0631\u0646 \u0628\u0627 \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u0648 \u067e\u0631\u0648\u0698\u0647\u200c\u0645\u062d\u0648\u0631.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 React.js...\"\r\n },\r\n {\r\n id: 9,\r\n image: \"https:\/\/images.unsplash.com\/photo-1522542550221-31fd19575a2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80\",\r\n category: \"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628\",\r\n date: \"\u06f1\u06f0 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f3\",\r\n title: \"\u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc CSS \u062c\u0630\u0627\u0628 \u0628\u062f\u0648\u0646 JavaScript\",\r\n excerpt: \"\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0632\u06cc\u0628\u0627 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u062a\u0646\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS \u0648 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc JavaScript.\",\r\n fullContent: \"\u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc CSS...\"\r\n }\r\n ];\r\n\r\n \/\/ \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u062c\u06cc\u0646\u06cc\u0634\u0646\r\n const postsPerPage = 3;\r\n let currentPage = 1;\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062e\u0627\u0635\r\n function displayPosts(page) {\r\n const container = document.getElementById('blog-posts-container');\r\n container.innerHTML = '';\r\n \r\n const startIndex = (page - 1) * postsPerPage;\r\n const endIndex = startIndex + postsPerPage;\r\n const postsToShow = blogPosts.slice(startIndex, endIndex);\r\n \r\n postsToShow.forEach(post => {\r\n const postElement = document.createElement('article');\r\n postElement.className = 'blog-post';\r\n postElement.innerHTML = `\r\n <img decoding=\"async\" src=\"${post.image}\" alt=\"${post.title}\" class=\"post-image\">\r\n <div class=\"post-content\">\r\n <div class=\"post-meta\">\r\n <span class=\"post-category\">${post.category}<\/span>\r\n <span class=\"post-date\"><i class=\"far fa-calendar-alt\"><\/i> ${post.date}<\/span>\r\n <\/div>\r\n <h2 class=\"post-title\">${post.title}<\/h2>\r\n <p class=\"post-excerpt\">${post.excerpt}<\/p>\r\n <div class=\"action-buttons\">\r\n <a href=\"#\" class=\"read-more\">\u0627\u062f\u0627\u0645\u0647 \u0645\u0637\u0644\u0628 <i class=\"fas fa-arrow-left\"><\/i><\/a>\r\n <a href=\"#\" class=\"view-blog-btn\" data-post-id=\"${post.id}\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u0644\u0627\u06af <i class=\"fas fa-eye\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n `;\r\n container.appendChild(postElement);\r\n });\r\n \r\n \/\/ \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc hover \u0628\u0647 \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\r\n addHoverEffects();\r\n \r\n \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0628\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u0644\u0627\u06af\r\n document.querySelectorAll('.view-blog-btn').forEach(button => {\r\n button.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const postId = parseInt(this.getAttribute('data-post-id'));\r\n openBlogModal(postId);\r\n });\r\n });\r\n }\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0645\u0648\u062f\u0627\u0644 \u0648\u0628\u0644\u0627\u06af\r\n function openBlogModal(postId) {\r\n const post = blogPosts.find(p => p.id === postId);\r\n if (!post) return;\r\n \r\n document.getElementById('modal-title').textContent = post.title;\r\n document.getElementById('modal-content').innerHTML = post.fullContent;\r\n \r\n const modal = document.getElementById('blog-modal');\r\n modal.style.display = 'flex';\r\n document.body.style.overflow = 'hidden'; \/\/ \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u0633\u06a9\u0631\u0648\u0644 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647\r\n }\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0633\u062a\u0646 \u0645\u0648\u062f\u0627\u0644 \u0648\u0628\u0644\u0627\u06af\r\n function closeBlogModal() {\r\n const modal = document.getElementById('blog-modal');\r\n modal.style.display = 'none';\r\n document.body.style.overflow = 'auto'; \/\/ \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u0627\u0633\u06a9\u0631\u0648\u0644\r\n }\r\n\r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0633\u062a\u0646 \u0645\u0648\u062f\u0627\u0644\r\n document.getElementById('modal-close').addEventListener('click', closeBlogModal);\r\n document.getElementById('blog-modal').addEventListener('click', function(e) {\r\n if (e.target === this) {\r\n closeBlogModal();\r\n }\r\n });\r\n\r\n \/\/ \u0628\u0633\u062a\u0646 \u0645\u0648\u062f\u0627\u0644 \u0628\u0627 \u06a9\u0644\u06cc\u062f Escape\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') {\r\n closeBlogModal();\r\n }\r\n });\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u067e\u06cc\u062c\u06cc\u0646\u06cc\u0634\u0646\r\n function setupPagination() {\r\n const totalPages = Math.ceil(blogPosts.length \/ postsPerPage);\r\n const container = document.getElementById('pagination-container');\r\n container.innerHTML = '';\r\n \r\n \/\/ \u0627\u06cc\u062c\u0627\u062f \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0635\u0641\u062d\u0647\r\n for (let i = 1; i <= totalPages; i++) {\r\n const pageElement = document.createElement('a');\r\n pageElement.href = '#';\r\n pageElement.className = 'page-number';\r\n if (i === currentPage) {\r\n pageElement.classList.add('active');\r\n }\r\n pageElement.textContent = i;\r\n pageElement.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n currentPage = i;\r\n displayPosts(currentPage);\r\n updatePagination();\r\n \/\/ \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u0647 \u0628\u0627\u0644\u0627\r\n window.scrollTo({\r\n top: document.querySelector('.main-content').offsetTop - 100,\r\n behavior: 'smooth'\r\n });\r\n });\r\n container.appendChild(pageElement);\r\n }\r\n }\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u067e\u06cc\u062c\u06cc\u0646\u06cc\u0634\u0646\r\n function updatePagination() {\r\n const pageNumbers = document.querySelectorAll('.page-number');\r\n pageNumbers.forEach((page, index) => {\r\n if (index + 1 === currentPage) {\r\n page.classList.add('active');\r\n } else {\r\n page.classList.remove('active');\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc hover\r\n function addHoverEffects() {\r\n document.querySelectorAll('.blog-post').forEach(post => {\r\n post.addEventListener('mouseenter', function() {\r\n this.style.transform = 'translateY(-10px)';\r\n });\r\n \r\n post.addEventListener('mouseleave', function() {\r\n this.style.transform = 'translateY(0)';\r\n });\r\n });\r\n }\r\n\r\n \/\/ \u062c\u0633\u062a\u062c\u0648\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\r\n const searchInput = document.getElementById('search-input');\r\n const searchButton = document.getElementById('search-button');\r\n const searchForm = document.getElementById('search-form');\r\n const searchSuggestions = document.getElementById('search-suggestions');\r\n \r\n \/\/ \u06a9\u0644\u0645\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u062c\u0633\u062a\u062c\u0648\r\n const searchKeywords = [\r\n \"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628\", \"\u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627\", \"JavaScript\", \"CSS3\", \"HTML5\",\r\n \"\u0648\u0631\u062f\u067e\u0631\u0633\", \"UI\/UX\", \"\u0633\u0626\u0648\", \"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\", \"React.js\",\r\n \"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\", \"\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646\", \"\u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647\", \"\u0627\u0645\u0646\u06cc\u062a\",\r\n \"\u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc\", \"\u062a\u0648\u0633\u0639\u0647 \u0648\u0628\", \"\u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f\", \"\u0628\u06a9\u200c\u0627\u0646\u062f\"\r\n ];\r\n \r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f focus \u0631\u0648\u06cc \u0641\u06cc\u0644\u062f \u062c\u0633\u062a\u062c\u0648\r\n searchInput.addEventListener('focus', function() {\r\n showSearchSuggestions();\r\n this.parentElement.style.zIndex = '1000';\r\n });\r\n \r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f blur \u0631\u0648\u06cc \u0641\u06cc\u0644\u062f \u062c\u0633\u062a\u062c\u0648\r\n searchInput.addEventListener('blur', function() {\r\n setTimeout(() => {\r\n hideSearchSuggestions();\r\n this.parentElement.style.zIndex = '1';\r\n }, 200);\r\n });\r\n \r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u0627\u06cc\u067e \u062f\u0631 \u0641\u06cc\u0644\u062f \u062c\u0633\u062a\u062c\u0648\r\n searchInput.addEventListener('input', function() {\r\n const searchTerm = this.value.trim();\r\n if (searchTerm.length > 0) {\r\n updateSearchSuggestions(searchTerm);\r\n } else {\r\n showAllSuggestions();\r\n }\r\n });\r\n \r\n \/\/ \u062a\u0627\u0628\u0639 \u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u062c\u0633\u062a\u062c\u0648\r\n function showSearchSuggestions() {\r\n searchSuggestions.style.display = 'block';\r\n showAllSuggestions();\r\n }\r\n \r\n \/\/ \u062a\u0627\u0628\u0639 \u067e\u0646\u0647\u0627\u0646 \u06a9\u0631\u062f\u0646 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u062c\u0633\u062a\u062c\u0648\r\n function hideSearchSuggestions() {\r\n searchSuggestions.style.display = 'none';\r\n }\r\n \r\n \/\/ \u062a\u0627\u0628\u0639 \u0646\u0645\u0627\u06cc\u0634 \u0647\u0645\u0647 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a\r\n function showAllSuggestions() {\r\n searchSuggestions.innerHTML = '';\r\n searchKeywords.forEach(keyword => {\r\n const suggestionItem = document.createElement('div');\r\n suggestionItem.className = 'search-suggestion-item';\r\n suggestionItem.textContent = keyword;\r\n suggestionItem.addEventListener('click', function() {\r\n searchInput.value = this.textContent;\r\n performSearch(this.textContent);\r\n hideSearchSuggestions();\r\n });\r\n searchSuggestions.appendChild(suggestionItem);\r\n });\r\n }\r\n \r\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u062c\u0633\u062a\u062c\u0648\r\n function updateSearchSuggestions(searchTerm) {\r\n searchSuggestions.innerHTML = '';\r\n const filteredKeywords = searchKeywords.filter(keyword => \r\n keyword.includes(searchTerm)\r\n );\r\n \r\n if (filteredKeywords.length > 0) {\r\n filteredKeywords.forEach(keyword => {\r\n const suggestionItem = document.createElement('div');\r\n suggestionItem.className = 'search-suggestion-item';\r\n \r\n \/\/ \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a \u06a9\u0631\u062f\u0646 \u0628\u062e\u0634 \u062a\u0637\u0628\u06cc\u0642\r\n const regex = new RegExp(`(${searchTerm})`, 'gi');\r\n const highlightedText = keyword.replace(regex, '<span style=\"color: #6ba74f; font-weight: bold;\">$1<\/span>');\r\n suggestionItem.innerHTML = highlightedText;\r\n \r\n suggestionItem.addEventListener('click', function() {\r\n searchInput.value = keyword;\r\n performSearch(keyword);\r\n hideSearchSuggestions();\r\n });\r\n searchSuggestions.appendChild(suggestionItem);\r\n });\r\n } else {\r\n const noResultItem = document.createElement('div');\r\n noResultItem.className = 'search-suggestion-item';\r\n noResultItem.textContent = '\u0646\u062a\u06cc\u062c\u0647\u200c\u0627\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f';\r\n noResultItem.style.color = '#999';\r\n noResultItem.style.cursor = 'default';\r\n searchSuggestions.appendChild(noResultItem);\r\n }\r\n }\r\n \r\n \/\/ \u062a\u0627\u0628\u0639 \u0627\u062c\u0631\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\r\n function performSearch(query) {\r\n if (query.trim() === '') {\r\n alert('\u0644\u0637\u0641\u0627\u064b \u0639\u0628\u0627\u0631\u062a \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f');\r\n searchInput.focus();\r\n return;\r\n }\r\n \r\n \/\/ \u062f\u0631 \u062d\u0627\u0644\u062a \u0648\u0627\u0642\u0639\u06cc\u060c \u0627\u06cc\u0646\u062c\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0628\u0647 \u0633\u0631\u0648\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f\r\n \/\/ \u0641\u0639\u0644\u0627\u064b \u0641\u0642\u0637 \u06cc\u06a9 \u067e\u06cc\u0627\u0645 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645\r\n const searchResults = blogPosts.filter(post => \r\n post.title.includes(query) || \r\n post.category.includes(query) ||\r\n post.excerpt.includes(query)\r\n );\r\n \r\n if (searchResults.length > 0) {\r\n alert(`\u062c\u0633\u062a\u062c\u0648 \u0628\u0631\u0627\u06cc \"${query}\"\\n\\n\u062a\u0639\u062f\u0627\u062f \u0646\u062a\u0627\u06cc\u062c: ${searchResults.length}\\n\\n(\u062f\u0631 \u0646\u0633\u062e\u0647 \u0648\u0627\u0642\u0639\u06cc\u060c \u0646\u062a\u0627\u06cc\u062c \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f)`);\r\n } else {\r\n alert(`\u0646\u062a\u06cc\u062c\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \"${query}\" \u06cc\u0627\u0641\u062a \u0646\u0634\u062f`);\r\n }\r\n }\r\n \r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645 \u062c\u0633\u062a\u062c\u0648\r\n searchForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const query = searchInput.value.trim();\r\n performSearch(query);\r\n });\r\n \r\n \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u062c\u0633\u062a\u062c\u0648\r\n searchButton.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const query = searchInput.value.trim();\r\n performSearch(query);\r\n });\r\n\r\n \/\/ \u0639\u0636\u0648\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647\r\n document.getElementById('newsletter-form').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const emailInput = this.querySelector('input[type=\"email\"]');\r\n if (emailInput.value.trim() === '') {\r\n alert('\u0644\u0637\u0641\u0627\u064b \u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f');\r\n emailInput.focus();\r\n } else if (!isValidEmail(emailInput.value)) {\r\n alert('\u0644\u0637\u0641\u0627\u064b \u06cc\u06a9 \u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u0645\u0639\u062a\u0628\u0631 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f');\r\n emailInput.focus();\r\n } else {\r\n alert(`\u0627\u06cc\u0645\u06cc\u0644 ${emailInput.value} \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647 \u062b\u0628\u062a \u0634\u062f`);\r\n emailInput.value = '';\r\n }\r\n });\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0627\u06cc\u0645\u06cc\u0644\r\n function isValidEmail(email) {\r\n const re = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n return re.test(email);\r\n }\r\n\r\n \/\/ \u0627\u0633\u06a9\u0631\u0648\u0644 \u0646\u0631\u0645 \u0628\u0631\u0627\u06cc \u0644\u06cc\u0646\u06a9\u200c\u0647\u0627\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n \r\n const targetId = this.getAttribute('href');\r\n if (targetId === '#') return;\r\n \r\n const targetElement = document.querySelector(targetId);\r\n if (targetElement) {\r\n window.scrollTo({\r\n top: targetElement.offsetTop - 100,\r\n behavior: 'smooth'\r\n });\r\n }\r\n });\r\n });\r\n\r\n \/\/ \u0627\u0641\u06a9\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u0631\u0627\u06cc \u0647\u062f\u0631\r\n window.addEventListener('scroll', function() {\r\n const header = document.querySelector('.blog-header');\r\n const scrollPosition = window.scrollY;\r\n \r\n if (scrollPosition > 100) {\r\n header.style.opacity = '0.95';\r\n header.style.transform = 'translateY(-5px)';\r\n } else {\r\n header.style.opacity = '1';\r\n header.style.transform = 'translateY(0)';\r\n }\r\n });\r\n\r\n \/\/ \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u0627\u0641\u06a9\u062a\r\n const images = document.querySelectorAll('img');\r\n images.forEach(img => {\r\n img.addEventListener('load', function() {\r\n this.style.opacity = '1';\r\n });\r\n \r\n \/\/ \u062a\u0646\u0638\u06cc\u0645 opacity \u0627\u0648\u0644\u06cc\u0647 \u0628\u0631\u0627\u06cc \u0627\u0641\u06a9\u062a \u0644\u0648\u062f\r\n img.style.opacity = '0';\r\n img.style.transition = 'opacity 0.5s ease';\r\n });\r\n\r\n \/\/ \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647\r\n document.addEventListener('DOMContentLoaded', function() {\r\n displayPosts(currentPage);\r\n setupPagination();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AVALWEB Logo A VALWEB GO ONLINE \u0648\u0628\u0644\u0627\u06af \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u062a\u062e\u0635\u0635\u06cc \u0622\u062e\u0631\u06cc\u0646 \u0645\u0642\u0627\u0644\u0627\u062a\u060c \u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0637\u0627\u0644\u0628 \u0622\u0645\u0648\u0632\u0634\u06cc \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u060c \u062a\u0648\u0633\u0639\u0647 \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631 \u0648 \u0641\u0646\u0627\u0648\u0631\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0637\u0627\u0644\u0628 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646\u06cc\u062f \u062c\u0633\u062a\u062c\u0648 \u062f\u0631 \u0648\u0628\u0644\u0627\u06af \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627 \u062a\u0648\u0644\u06cc\u062f \u0645\u0642\u0627\u0644\u0647 \u0628\u0627 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062c\u062f\u06cc\u062f \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u06f1\u06f2 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u06f1\u06f8 \u0648\u0631\u062f\u067e\u0631\u0633 \u06f9 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u06f7 \u0633\u0626\u0648 \u06f1\u06f1 \u0641\u0646\u0627\u0648\u0631\u06cc \u06f1\u06f5 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":10,"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":58,"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/58"}],"wp:attachment":[{"href":"https:\/\/blog.avalweb.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}