Blogs & Insights - ScInnovHub<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&display=swap');\n\n body {\n font-family: 'Poppins', 'Segoe UI', sans-serif;\n margin: 0;\n padding: 0;\n background-color: #F3F4F6;\n color: #333;\n line-height: 1.6;\n }\n\n .hero {\n background: linear-gradient(135deg, #233991, #2596be);\n color: white;\n text-align: center;\n padding: 100px 20px;\n animation: slideIn 1s ease-out;\n }\n\n @keyframes slideIn {\n from { opacity: 0; transform: translateY(-50px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .hero h1 {\n font-size: 3rem;\n margin: 0;\n position: relative;\n }\n\n .hero h1::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 3px;\n background: #FACC15;\n animation: underlineGrow 1s ease-out;\n }\n\n @keyframes underlineGrow {\n from { width: 0; }\n to { width: 100px; }\n }\n\n .hero p {\n font-size: 1.2rem;\n margin: 10px 0 0;\n }\n\n .hero .tagline {\n font-size: 1rem;\n margin-top: 20px;\n opacity: 0.9;\n }\n\n .filters {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin: 40px 0;\n }\n\n .filters button {\n background: #2596be;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n transition: background 0.3s, transform 0.3s;\n }\n\n .filters button:hover {\n background: #233991;\n transform: translateY(-3px);\n }\n\n .posts {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 30px;\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n\n .post-card {\n background: white;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: transform 0.3s, box-shadow 0.3s;\n opacity: 0;\n animation: fadeInUp 0.5s forwards;\n }\n\n .post-card:nth-child(1) { animation-delay: 0.1s; }\n .post-card:nth-child(2) { animation-delay: 0.2s; }\n .post-card:nth-child(3) { animation-delay: 0.3s; }\n .post-card:nth-child(4) { animation-delay: 0.4s; }\n .post-card:nth-child(5) { animation-delay: 0.5s; }\n .post-card:nth-child(6) { animation-delay: 0.6s; }\n\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .post-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n }\n\n .post-card img {\n width: 100%;\n height: 200px;\n object-fit: cover;\n }\n\n .post-card .content {\n padding: 20px;\n }\n\n .post-card h2 {\n font-size: 1.5rem;\n margin: 0 0 10px;\n color: #233991;\n }\n\n .post-card .date {\n font-size: 0.9rem;\n color: #666;\n margin: 0 0 10px;\n }\n\n .post-card .excerpt {\n font-size: 1rem;\n color: #555;\n margin: 0 0 15px;\n }\n\n .post-card .read-more {\n display: inline-block;\n background: #2596be;\n color: white;\n padding: 10px 20px;\n border-radius: 5px;\n text-decoration: none;\n transition: background 0.3s;\n }\n\n .post-card .read-more:hover {\n background: #233991;\n }\n\n .pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n margin: 40px 0;\n }\n\n .pagination button {\n background: #233991;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n transition: background 0.3s, transform 0.3s;\n }\n\n .pagination button:hover {\n background: #2596be;\n transform: translateY(-3px);\n }\n\n .pagination button.disabled {\n background: #ccc;\n cursor: not-allowed;\n transform: none;\n }\n\n .pagination span {\n font-size: 1rem;\n color: #333;\n }\n\n #loader {\n text-align: center;\n font-size: 1.2rem;\n color: #2596be;\n margin: 40px 0;\n animation: pulse 1.5s infinite;\n }\n\n @keyframes pulse {\n 0% { opacity: 1; }\n 50% { opacity: 0.5; }\n 100% { opacity: 1; }\n }\n\n @media (max-width: 1024px) {\n .posts {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n\n @media (max-width: 600px) {\n .posts {\n grid-template-columns: 1fr;\n max-width: 500px;\n }\n\n .hero {\n padding: 60px 20px;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"hero\">\n <h1>\u0645\u0642\u0627\u0644\u0627\u062a \u0648\u0623\u0641\u0643\u0627\u0631<\/h1>\n <p>\u0627\u0633\u062a\u0643\u0634\u0641 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0648\u062c\u0647\u0627\u062a \u0641\u064a \u0645\u062c\u0627\u0644\u0627\u062a \u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627 \u0648\u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u0648\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631<\/p>\n <p class=\"tagline\">\u0646\u064f\u0645\u0643\u0651\u0646 \u0627\u0644\u0639\u0642\u0648\u0644 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u0645\u0639\u0631\u0641\u0629 \u0648\u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631.<\/p>\n <\/section>\n\n <div class=\"filters\">\n <button>\u0627\u0644\u0628\u062d\u062b \u0627\u0644\u0639\u0644\u0645\u0649<\/button>\n <button>\u0627\u0644\u062a\u0639\u0644\u064a\u0645<\/button>\n <button>\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631<\/button>\n <\/div>\n\n <div id=\"loader\">Loading posts...<\/div>\n <div class=\"posts\" id=\"posts-container\"><\/div>\n\n <div class=\"pagination\">\n <button id=\"prev\" class=\"disabled\">Previous<\/button>\n <span id=\"page-info\">Page 1 of 1<\/span>\n <button id=\"next\">Next<\/button>\n <\/div>\n\n <script>\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n let currentPage = 1;\n let totalPages = 1;\n const perPage = 6;\n\n function formatDate(dateStr) {\n const date = new Date(dateStr);\n const month = months[date.getMonth()];\n const year = date.getFullYear();\n return `${month} ${year}`;\n }\n\n function stripHtml(html) {\n const tmp = document.createElement('div');\n tmp.innerHTML = html;\n return tmp.textContent || tmp.innerText || '';\n }\n\n async function fetchPosts(page) {\n const loader = document.getElementById('loader');\n const container = document.getElementById('posts-container');\n loader.style.display = 'block';\n container.innerHTML = '';\n\n try {\n const res = await fetch(`https:\/\/scinnovhub.com\/wp-json\/wp\/v2\/posts?per_page=${perPage}&page=${page}&_embed`);\n if (!res.ok) {\n throw new Error('Failed to fetch posts');\n }\n totalPages = parseInt(res.headers.get('X-WP-TotalPages')) || 1;\n const posts = await res.json();\n\n posts.forEach((post, index) => {\n const card = document.createElement('div');\n card.classList.add('post-card');\n card.style.animationDelay = `${index * 0.1}s`;\n\n let imgHtml = '';\n if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0].source_url) {\n imgHtml = `<img decoding=\"async\" src=\"${post._embedded['wp:featuredmedia'][0].source_url}\" alt=\"${post.title.rendered}\">`;\n }\n\n const excerpt = stripHtml(post.excerpt.rendered).trim().substring(0, 100) + '...';\n\n card.innerHTML = `\n ${imgHtml}\n <div class=\"content\">\n <h2>${post.title.rendered}<\/h2>\n <p class=\"date\">${formatDate(post.date)}<\/p>\n <p class=\"excerpt\">${excerpt}<\/p>\n <a href=\"${post.link}\" class=\"read-more\">Read More<\/a>\n <\/div>\n `;\n container.appendChild(card);\n });\n\n updatePagination();\n } catch (err) {\n container.innerHTML = '<p style=\"text-align: center; color: red;\">Error loading posts. Please try again later.<\/p>';\n } finally {\n loader.style.display = 'none';\n }\n }\n\n function updatePagination() {\n const prevBtn = document.getElementById('prev');\n const nextBtn = document.getElementById('next');\n const pageInfo = document.getElementById('page-info');\n\n pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;\n\n if (currentPage <= 1) {\n prevBtn.classList.add('disabled');\n } else {\n prevBtn.classList.remove('disabled');\n }\n\n if (currentPage >= totalPages) {\n nextBtn.classList.add('disabled');\n } else {\n nextBtn.classList.remove('disabled');\n }\n }\n\n document.getElementById('prev').addEventListener('click', () => {\n if (currentPage > 1) {\n currentPage--;\n fetchPosts(currentPage);\n }\n });\n\n document.getElementById('next').addEventListener('click', () => {\n if (currentPage < totalPages) {\n currentPage++;\n fetchPosts(currentPage);\n }\n });\n\n \/\/ Initial fetch\n fetchPosts(currentPage);\n <\/script>\n<\/body>\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>","protected":false},"excerpt":{"rendered":"<p>Blogs & Insights – ScInnovHub Blog & Insights Explore the latest trends in technology, education, and innovation.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_tutorstarter_page_metadata":[],"footnotes":""},"class_list":["post-800","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/pages\/800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/comments?post=800"}],"version-history":[{"count":0,"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/pages\/800\/revisions"}],"wp:attachment":[{"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/media?parent=800"}],"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\n\n\n \n \n Blogs & Insights - ScInnovHub<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&display=swap');\n\n body {\n font-family: 'Poppins', 'Segoe UI', sans-serif;\n margin: 0;\n padding: 0;\n background-color: #F3F4F6;\n color: #333;\n line-height: 1.6;\n }\n\n .hero {\n background: linear-gradient(135deg, #233991, #2596be);\n color: white;\n text-align: center;\n padding: 100px 20px;\n animation: slideIn 1s ease-out;\n }\n\n @keyframes slideIn {\n from { opacity: 0; transform: translateY(-50px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .hero h1 {\n font-size: 3rem;\n margin: 0;\n position: relative;\n }\n\n .hero h1::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 3px;\n background: #FACC15;\n animation: underlineGrow 1s ease-out;\n }\n\n @keyframes underlineGrow {\n from { width: 0; }\n to { width: 100px; }\n }\n\n .hero p {\n font-size: 1.2rem;\n margin: 10px 0 0;\n }\n\n .hero .tagline {\n font-size: 1rem;\n margin-top: 20px;\n opacity: 0.9;\n }\n\n .filters {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin: 40px 0;\n }\n\n .filters button {\n background: #2596be;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n transition: background 0.3s, transform 0.3s;\n }\n\n .filters button:hover {\n background: #233991;\n transform: translateY(-3px);\n }\n\n .posts {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 30px;\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n\n .post-card {\n background: white;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: transform 0.3s, box-shadow 0.3s;\n opacity: 0;\n animation: fadeInUp 0.5s forwards;\n }\n\n .post-card:nth-child(1) { animation-delay: 0.1s; }\n .post-card:nth-child(2) { animation-delay: 0.2s; }\n .post-card:nth-child(3) { animation-delay: 0.3s; }\n .post-card:nth-child(4) { animation-delay: 0.4s; }\n .post-card:nth-child(5) { animation-delay: 0.5s; }\n .post-card:nth-child(6) { animation-delay: 0.6s; }\n\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .post-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n }\n\n .post-card img {\n width: 100%;\n height: 200px;\n object-fit: cover;\n }\n\n .post-card .content {\n padding: 20px;\n }\n\n .post-card h2 {\n font-size: 1.5rem;\n margin: 0 0 10px;\n color: #233991;\n }\n\n .post-card .date {\n font-size: 0.9rem;\n color: #666;\n margin: 0 0 10px;\n }\n\n .post-card .excerpt {\n font-size: 1rem;\n color: #555;\n margin: 0 0 15px;\n }\n\n .post-card .read-more {\n display: inline-block;\n background: #2596be;\n color: white;\n padding: 10px 20px;\n border-radius: 5px;\n text-decoration: none;\n transition: background 0.3s;\n }\n\n .post-card .read-more:hover {\n background: #233991;\n }\n\n .pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n margin: 40px 0;\n }\n\n .pagination button {\n background: #233991;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n transition: background 0.3s, transform 0.3s;\n }\n\n .pagination button:hover {\n background: #2596be;\n transform: translateY(-3px);\n }\n\n .pagination button.disabled {\n background: #ccc;\n cursor: not-allowed;\n transform: none;\n }\n\n .pagination span {\n font-size: 1rem;\n color: #333;\n }\n\n #loader {\n text-align: center;\n font-size: 1.2rem;\n color: #2596be;\n margin: 40px 0;\n animation: pulse 1.5s infinite;\n }\n\n @keyframes pulse {\n 0% { opacity: 1; }\n 50% { opacity: 0.5; }\n 100% { opacity: 1; }\n }\n\n @media (max-width: 1024px) {\n .posts {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n\n @media (max-width: 600px) {\n .posts {\n grid-template-columns: 1fr;\n max-width: 500px;\n }\n\n .hero {\n padding: 60px 20px;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"hero\">\n <h1>\u0645\u0642\u0627\u0644\u0627\u062a \u0648\u0623\u0641\u0643\u0627\u0631<\/h1>\n <p>\u0627\u0633\u062a\u0643\u0634\u0641 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0648\u062c\u0647\u0627\u062a \u0641\u064a \u0645\u062c\u0627\u0644\u0627\u062a \u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627 \u0648\u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u0648\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631<\/p>\n <p class=\"tagline\">\u0646\u064f\u0645\u0643\u0651\u0646 \u0627\u0644\u0639\u0642\u0648\u0644 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u0645\u0639\u0631\u0641\u0629 \u0648\u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631.<\/p>\n <\/section>\n\n <div class=\"filters\">\n <button>\u0627\u0644\u0628\u062d\u062b \u0627\u0644\u0639\u0644\u0645\u0649<\/button>\n <button>\u0627\u0644\u062a\u0639\u0644\u064a\u0645<\/button>\n <button>\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631<\/button>\n <\/div>\n\n <div id=\"loader\">Loading posts...<\/div>\n <div class=\"posts\" id=\"posts-container\"><\/div>\n\n <div class=\"pagination\">\n <button id=\"prev\" class=\"disabled\">Previous<\/button>\n <span id=\"page-info\">Page 1 of 1<\/span>\n <button id=\"next\">Next<\/button>\n <\/div>\n\n <script>\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n let currentPage = 1;\n let totalPages = 1;\n const perPage = 6;\n\n function formatDate(dateStr) {\n const date = new Date(dateStr);\n const month = months[date.getMonth()];\n const year = date.getFullYear();\n return `${month} ${year}`;\n }\n\n function stripHtml(html) {\n const tmp = document.createElement('div');\n tmp.innerHTML = html;\n return tmp.textContent || tmp.innerText || '';\n }\n\n async function fetchPosts(page) {\n const loader = document.getElementById('loader');\n const container = document.getElementById('posts-container');\n loader.style.display = 'block';\n container.innerHTML = '';\n\n try {\n const res = await fetch(`https:\/\/scinnovhub.com\/wp-json\/wp\/v2\/posts?per_page=${perPage}&page=${page}&_embed`);\n if (!res.ok) {\n throw new Error('Failed to fetch posts');\n }\n totalPages = parseInt(res.headers.get('X-WP-TotalPages')) || 1;\n const posts = await res.json();\n\n posts.forEach((post, index) => {\n const card = document.createElement('div');\n card.classList.add('post-card');\n card.style.animationDelay = `${index * 0.1}s`;\n\n let imgHtml = '';\n if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0].source_url) {\n imgHtml = `<img decoding=\"async\" src=\"${post._embedded['wp:featuredmedia'][0].source_url}\" alt=\"${post.title.rendered}\">`;\n }\n\n const excerpt = stripHtml(post.excerpt.rendered).trim().substring(0, 100) + '...';\n\n card.innerHTML = `\n ${imgHtml}\n <div class=\"content\">\n <h2>${post.title.rendered}<\/h2>\n <p class=\"date\">${formatDate(post.date)}<\/p>\n <p class=\"excerpt\">${excerpt}<\/p>\n <a href=\"${post.link}\" class=\"read-more\">Read More<\/a>\n <\/div>\n `;\n container.appendChild(card);\n });\n\n updatePagination();\n } catch (err) {\n container.innerHTML = '<p style=\"text-align: center; color: red;\">Error loading posts. Please try again later.<\/p>';\n } finally {\n loader.style.display = 'none';\n }\n }\n\n function updatePagination() {\n const prevBtn = document.getElementById('prev');\n const nextBtn = document.getElementById('next');\n const pageInfo = document.getElementById('page-info');\n\n pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;\n\n if (currentPage <= 1) {\n prevBtn.classList.add('disabled');\n } else {\n prevBtn.classList.remove('disabled');\n }\n\n if (currentPage >= totalPages) {\n nextBtn.classList.add('disabled');\n } else {\n nextBtn.classList.remove('disabled');\n }\n }\n\n document.getElementById('prev').addEventListener('click', () => {\n if (currentPage > 1) {\n currentPage--;\n fetchPosts(currentPage);\n }\n });\n\n document.getElementById('next').addEventListener('click', () => {\n if (currentPage < totalPages) {\n currentPage++;\n fetchPosts(currentPage);\n }\n });\n\n \/\/ Initial fetch\n fetchPosts(currentPage);\n <\/script>\n<\/body>\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>","protected":false},"excerpt":{"rendered":"<p>Blogs & Insights – ScInnovHub Blog & Insights Explore the latest trends in technology, education, and innovation.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_tutorstarter_page_metadata":[],"footnotes":""},"class_list":["post-800","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/pages\/800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/comments?post=800"}],"version-history":[{"count":0,"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/pages\/800\/revisions"}],"wp:attachment":[{"href":"https:\/\/scinnovhub.com\/ar\/wp-json\/wp\/v2\/media?parent=800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}