{"id":56,"date":"2025-05-14T20:05:41","date_gmt":"2025-05-14T20:05:41","guid":{"rendered":"https:\/\/digitaltelawah.org.sa\/?page_id=56"},"modified":"2025-06-09T16:29:27","modified_gmt":"2025-06-09T16:29:27","slug":"%d9%85%d9%83%d8%aa%d8%a8%d8%a9-%d8%a7%d9%84%d9%81%d9%8a%d8%af%d9%8a%d9%88","status":"publish","type":"page","link":"https:\/\/digitaltelawah.org.sa\/?page_id=56","title":{"rendered":"\u0645\u0643\u062a\u0628\u0629 \u0627\u0644\u0641\u064a\u062f\u064a\u0648"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0645\u0643\u062a\u0628\u0629 \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0627\u0644\u062c\u0645\u0639\u064a\u0629<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Define color palette and font *\/\r\n :root {\r\n --primary-dark-blue: #01474F; \/* From #01474F *\/\r\n --accent-green: #ABD58D; \/* From #ABD58D *\/\r\n --dark-text: #111111; \/* From #111111 *\/\r\n --light-bg: #FAFAFA; \/* From #FAFAFA *\/\r\n --white: #ffffff;\r\n --border-color: #e0e0e0;\r\n --font-family: 'Cairo', sans-serif;\r\n --box-shadow-light: rgba(0, 0, 0, 0.04);\r\n --box-shadow-hover: rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n body {\r\n font-family: var(--font-family);\r\n margin: 0;\r\n background-color: var(--light-bg);\r\n color: var(--dark-text);\r\n line-height: 1.6;\r\n direction: rtl; \/* Ensure RTL for all text *\/\r\n padding: 20px; \/* Add some padding around the edges *\/\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 40px auto;\r\n background: var(--white);\r\n padding: 30px 40px; \/* Slightly more horizontal padding *\/\r\n border-radius: 12px; \/* More rounded corners for modern look *\/\r\n box-shadow: 0 8px 25px var(--box-shadow-light); \/* Softer, larger shadow *\/\r\n }\r\n\r\n .header-section {\r\n text-align: center;\r\n margin-bottom: 50px; \/* More space below header *\/\r\n }\r\n\r\n .header-section h1 {\r\n color: var(--primary-dark-blue);\r\n font-weight: 700;\r\n font-size: 3.2em; \/* Larger main title *\/\r\n margin-bottom: 10px; \/* Closer to subtitle *\/\r\n position: relative;\r\n display: inline-block; \/* To center the ::after element correctly *\/\r\n padding-bottom: 20px; \/* Space for the underline *\/\r\n }\r\n\r\n .header-section h1::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 120px; \/* Wider accent line *\/\r\n height: 6px; \/* Thicker accent line *\/\r\n background-color: var(--accent-green); \/* Use accent color *\/\r\n border-radius: 3px;\r\n }\r\n\r\n .header-section h2 {\r\n color: #555; \/* Softer color for subtitle *\/\r\n font-weight: 400; \/* Lighter weight for subtitle *\/\r\n font-size: 1.6em; \/* Appropriate size for subtitle *\/\r\n margin-top: 0;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* Video Gallery specific styles *\/\r\n .video-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); \/* Flexible columns for videos *\/\r\n gap: 30px; \/* Space between video cards *\/\r\n }\r\n\r\n .video-card {\r\n background-color: var(--white);\r\n border: 1px solid var(--border-color);\r\n border-radius: 12px;\r\n box-shadow: 0 6px 18px var(--box-shadow-light);\r\n transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;\r\n overflow: hidden; \/* Ensures rounded corners for video thumbnail *\/\r\n display: flex;\r\n flex-direction: column;\r\n text-align: right; \/* RTL alignment *\/\r\n cursor: pointer; \/* Indicate clickable *\/\r\n position: relative; \/* For play icon positioning *\/\r\n text-decoration: none; \/* Remove underline from link *\/\r\n color: inherit; \/* Inherit text color *\/\r\n }\r\n\r\n .video-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 12px 30px var(--box-shadow-hover);\r\n }\r\n\r\n .video-thumbnail {\r\n position: relative;\r\n width: 100%;\r\n padding-bottom: 56.25%; \/* 16:9 Aspect Ratio (height \/ width * 100) *\/\r\n background-color: #000; \/* Fallback background for missing thumbnail *\/\r\n overflow: hidden;\r\n border-bottom: 1px solid var(--border-color); \/* Separator *\/\r\n }\r\n\r\n .video-thumbnail img {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover; \/* Ensures image covers area without distortion *\/\r\n display: block;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .video-card:hover .video-thumbnail img {\r\n transform: scale(1.05); \/* Slight zoom on hover *\/\r\n }\r\n\r\n .play-icon {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 60px; \/* Size of the play icon *\/\r\n height: 60px;\r\n background-color: rgba(1, 71, 79, 0.8); \/* Primary dark blue with transparency *\/\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 2.5em;\r\n color: var(--white);\r\n pointer-events: none; \/* Allows click to pass through to the link *\/\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .video-card:hover .play-icon {\r\n background-color: var(--accent-green); \/* Accent color on hover *\/\r\n }\r\n\r\n \/* Basic triangle play icon *\/\r\n .play-icon::before {\r\n content: \"\u25b6\"; \/* Unicode play triangle *\/\r\n transform: translateX(5%); \/* Adjust for triangle optical centering *\/\r\n }\r\n\r\n\r\n .video-info {\r\n padding: 20px;\r\n }\r\n\r\n .video-info h3 {\r\n color: var(--primary-dark-blue);\r\n font-weight: 700;\r\n font-size: 1.4em;\r\n margin-top: 0;\r\n margin-bottom: 10px;\r\n line-height: 1.3;\r\n }\r\n\r\n .video-info p {\r\n font-size: 0.95em;\r\n line-height: 1.6;\r\n color: #555;\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* Responsive adjustments *\/\r\n @media (max-width: 992px) {\r\n .container {\r\n margin: 30px auto;\r\n padding: 25px 30px;\r\n }\r\n .header-section h1 {\r\n font-size: 2.8em;\r\n }\r\n .header-section h2 {\r\n font-size: 1.4em;\r\n }\r\n .video-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n gap: 25px;\r\n }\r\n .play-icon {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 2em;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n body {\r\n padding: 15px;\r\n }\r\n .container {\r\n margin: 20px auto;\r\n padding: 20px 25px;\r\n border-radius: 10px;\r\n }\r\n .header-section {\r\n margin-bottom: 40px;\r\n }\r\n .header-section h1 {\r\n font-size: 2.2em;\r\n padding-bottom: 15px;\r\n }\r\n .header-section h1::after {\r\n width: 90px;\r\n height: 5px;\r\n }\r\n .header-section h2 {\r\n font-size: 1.2em;\r\n }\r\n .video-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n gap: 20px;\r\n }\r\n .play-icon {\r\n width: 45px;\r\n height: 45px;\r\n font-size: 1.8em;\r\n }\r\n .video-info {\r\n padding: 15px;\r\n }\r\n .video-info h3 {\r\n font-size: 1.2em;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n padding: 15px 20px;\r\n }\r\n .video-grid {\r\n grid-template-columns: 1fr; \/* Single column on very small screens *\/\r\n gap: 20px;\r\n }\r\n .play-icon {\r\n width: 50px; \/* Keep decent size on single column *\/\r\n height: 50px;\r\n font-size: 2em;\r\n }\r\n .header-section h1 {\r\n font-size: 1.8em;\r\n padding-bottom: 10px;\r\n }\r\n .header-section h1::after {\r\n width: 70px;\r\n height: 4px;\r\n }\r\n .header-section h2 {\r\n font-size: 1em;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header-section\">\r\n <h1>\u0645\u0643\u062a\u0628\u0629 \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0627\u0644\u062c\u0645\u0639\u064a\u0629<\/h1>\r\n <h2>\u0627\u0643\u062a\u0634\u0641 \u0631\u062d\u0644\u062a\u0646\u0627 \u0648\u0625\u0646\u062c\u0627\u0632\u0627\u062a\u0646\u0627 \u0641\u064a \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0645\u0624\u062b\u0631\u0629<\/h2>\r\n <\/div>\r\n\r\n <div class=\"video-grid\" id=\"video-container\">\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Sample video data (\u064a\u0631\u062c\u0649 \u0627\u0633\u062a\u0628\u062f\u0627\u0644 'YOUR_THUMBNAIL_URL_HERE' \u0648 'YOUR_VIDEO_URL_HERE' \u0628\u0631\u0648\u0627\u0628\u0637 \u0641\u0639\u0644\u064a\u0629)\r\n const videos = [\r\n {\r\n thumbnail: \"https:\/\/via.placeholder.com\/640x360?text=\u0641\u064a\u062f\u064a\u0648+1\", \/\/ \u0635\u0648\u0631\u0629 \u0645\u0635\u063a\u0631\u0629 \u0645\u0624\u0642\u062a\u0629\r\n title: \"\u0645\u0642\u062f\u0645\u0629 \u0639\u0646 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0648\u0631\u0633\u0627\u0644\u062a\u0647\u0627\",\r\n description: \"\u062a\u0639\u0631\u0641 \u0639\u0644\u0649 \u0631\u0624\u064a\u0629 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0648\u0623\u0647\u062f\u0627\u0641\u0647\u0627 \u0627\u0644\u0646\u0628\u064a\u0644\u0629 \u0641\u064a \u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639.\",\r\n url: \"#\" \/\/ \u0631\u0627\u0628\u0637 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u0641\u0639\u0644\u064a (\u0645\u062b\u0644\u0627\u064b\u060c \u0631\u0627\u0628\u0637 \u064a\u0648\u062a\u064a\u0648\u0628)\r\n },\r\n {\r\n thumbnail: \"https:\/\/via.placeholder.com\/640x360?text=\u0641\u064a\u062f\u064a\u0648+2\",\r\n title: \"\u062d\u0635\u0627\u062f \u0639\u0627\u0645 \u0645\u0646 \u0627\u0644\u0639\u0637\u0627\u0621 \u0648\u0627\u0644\u0625\u0646\u062c\u0627\u0632\",\r\n description: \"\u0645\u0644\u062e\u0635 \u0644\u0623\u0628\u0631\u0632 \u0645\u0634\u0627\u0631\u064a\u0639\u0646\u0627 \u0648\u0625\u0646\u062c\u0627\u0632\u0627\u062a\u0646\u0627 \u062e\u0644\u0627\u0644 \u0627\u0644\u0639\u0627\u0645 \u0627\u0644\u0645\u0627\u0636\u064a.\",\r\n url: \"#\"\r\n },\r\n {\r\n thumbnail: \"https:\/\/via.placeholder.com\/640x360?text=\u0641\u064a\u062f\u064a\u0648+3\",\r\n title: \"\u0634\u0643\u0631 \u0648\u062a\u0642\u062f\u064a\u0631 \u0644\u0634\u0631\u0643\u0627\u0621 \u0627\u0644\u0646\u062c\u0627\u062d\",\r\n description: \"\u0641\u064a\u062f\u064a\u0648 \u062e\u0627\u0635 \u0644\u0634\u0643\u0631 \u0627\u0644\u062f\u0627\u0639\u0645\u064a\u0646 \u0648\u0627\u0644\u0645\u062a\u0637\u0648\u0639\u064a\u0646 \u0627\u0644\u0630\u064a\u0646 \u064a\u0633\u0627\u0647\u0645\u0648\u0646 \u0641\u064a \u0645\u0633\u064a\u0631\u062a\u0646\u0627.\",\r\n url: \"#\"\r\n },\r\n {\r\n thumbnail: \"https:\/\/via.placeholder.com\/640x360?text=\u0641\u064a\u062f\u064a\u0648+4\",\r\n title: \"\u0642\u0635\u0635 \u0645\u0644\u0647\u0645\u0629 \u0645\u0646 \u0642\u0644\u0628 \u0627\u0644\u0645\u062c\u062a\u0645\u0639\",\r\n description: \"\u0634\u0627\u0647\u062f \u0643\u064a\u0641 \u0623\u062d\u062f\u062b\u062a \u0628\u0631\u0627\u0645\u062c \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0641\u0631\u0642\u064b\u0627 \u062d\u0642\u064a\u0642\u064a\u064b\u0627 \u0641\u064a \u062d\u064a\u0627\u0629 \u0627\u0644\u0623\u0641\u0631\u0627\u062f.\",\r\n url: \"#\"\r\n },\r\n {\r\n thumbnail: \"https:\/\/via.placeholder.com\/640x360?text=\u0641\u064a\u062f\u064a\u0648+5\",\r\n title: \"\u062f\u0639\u0648\u0629 \u0644\u0644\u0645\u0634\u0627\u0631\u0643\u0629: \u0643\u0646 \u062c\u0632\u0621\u064b\u0627 \u0645\u0646 \u0627\u0644\u062a\u063a\u064a\u064a\u0631\",\r\n description: \"\u0646\u062f\u0627\u0621 \u0644\u0644\u0645\u062a\u0637\u0648\u0639\u064a\u0646 \u0648\u0627\u0644\u062f\u0627\u0639\u0645\u064a\u0646 \u0644\u0644\u0627\u0646\u0636\u0645\u0627\u0645 \u0625\u0644\u0649 \u062c\u0647\u0648\u062f\u0646\u0627 \u0627\u0644\u062e\u064a\u0631\u064a\u0629.\",\r\n url: \"#\"\r\n },\r\n {\r\n thumbnail: \"https:\/\/via.placeholder.com\/640x360?text=\u0641\u064a\u062f\u064a\u0648+6\",\r\n title: \"\u0641\u0639\u0627\u0644\u064a\u0627\u062a \u0648\u0623\u0646\u0634\u0637\u0629 \u0642\u0627\u062f\u0645\u0629\",\r\n description: \"\u0644\u0645\u062d\u0629 \u0639\u0646 \u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a \u0648\u0627\u0644\u0623\u0646\u0634\u0637\u0629 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u062e\u0637\u0637 \u0644\u0647\u0627 \u0627\u0644\u062c\u0645\u0639\u064a\u0629.\",\r\n url: \"#\"\r\n }\r\n \/\/ \u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0647\u0646\u0627\r\n ];\r\n\r\n const videoContainer = document.getElementById('video-container');\r\n\r\n function displayVideos(videosToDisplay) {\r\n videoContainer.innerHTML = ''; \/\/ Clear previous videos\r\n\r\n if (videosToDisplay.length === 0) {\r\n videoContainer.innerHTML = '<p style=\"text-align: center; width: 100%; color: #666; padding: 30px; font-size: 1.1em; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 2px 8px var(--box-shadow-light);\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0644\u0639\u0631\u0636\u0647\u0627 \u062d\u0627\u0644\u064a\u064b\u0627.<\/p>';\r\n return;\r\n }\r\n\r\n videosToDisplay.forEach(video => {\r\n const videoCard = document.createElement('a'); \/\/ Use 'a' tag for clickable card\r\n videoCard.classList.add('video-card');\r\n videoCard.href = video.url; \/\/ Set the video URL\r\n videoCard.target = \"_blank\"; \/\/ Open in new tab\r\n\r\n videoCard.innerHTML = `\r\n <div class=\"video-thumbnail\">\r\n <img decoding=\"async\" src=\"${video.thumbnail}\" alt=\"${video.title} Thumbnail\">\r\n <div class=\"play-icon\"><\/div>\r\n <\/div>\r\n <div class=\"video-info\">\r\n <h3>${video.title}<\/h3>\r\n <p>${video.description}<\/p>\r\n <\/div>\r\n `;\r\n videoContainer.appendChild(videoCard);\r\n });\r\n }\r\n\r\n \/\/ Initial display of all videos\r\n document.addEventListener('DOMContentLoaded', () => {\r\n displayVideos(videos);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b6a2f5f e-flex e-con-boxed e-con e-parent\" data-id=\"1b6a2f5f\" 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-36a8ac3d elementor-button-success elementor-align-right elementor-widget elementor-widget-button\" data-id=\"36a8ac3d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"sticky":"bottom","sticky_on":["desktop","tablet","mobile"],"sticky_offset":0,"sticky_effects_offset":0,"sticky_anchor_link_offset":0}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/digitaltelawah.org.sa\/?page_id=48\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-heart\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u062a\u0628\u0631\u0639 \u0627\u0644\u0627\u0646<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0645\u0643\u062a\u0628\u0629 \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0645\u0643\u062a\u0628\u0629 \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0643\u062a\u0634\u0641 \u0631\u062d\u0644\u062a\u0646\u0627 \u0648\u0625\u0646\u062c\u0627\u0632\u0627\u062a\u0646\u0627 \u0641\u064a \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0645\u0624\u062b\u0631\u0629 \u062a\u0628\u0631\u0639 \u0627\u0644\u0627\u0646<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"footnotes":""},"class_list":["post-56","page","type-page","status-publish","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=56"}],"version-history":[{"count":19,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/56\/revisions"}],"predecessor-version":[{"id":887,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/56\/revisions\/887"}],"wp:attachment":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}