\u06af\u0627\u0644\u0631\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* Reset and Base Styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n \n body {\n background-color: #f5f5f5;\n color: #333;\n line-height: 1.6;\n padding: 20px;\n min-height: 100vh;\n }\n \n \/* Container for WordPress Content Area *\/\n .wp-content-area {\n max-width: 900px; \/* Width matches typical WordPress content area *\/\n margin: 0 auto;\n padding: 20px;\n background: white;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n }\n \n \/* Header *\/\n .content-header {\n text-align: center;\n margin-bottom: 40px;\n padding-bottom: 20px;\n border-bottom: 2px solid #f0f0f0;\n }\n \n .content-header h1 {\n font-size: 2rem;\n color: #2c3e50;\n margin-bottom: 15px;\n }\n \n .content-header p {\n color: #7f8c8d;\n font-size: 1.1rem;\n max-width: 700px;\n margin: 0 auto;\n }\n \n .video-stats {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-top: 25px;\n flex-wrap: wrap;\n }\n \n .stat-item {\n background: #f8f9fa;\n padding: 12px 25px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n gap: 10px;\n border: 1px solid #e9ecef;\n }\n \n .stat-item i {\n color: #3498db;\n font-size: 1.1rem;\n }\n \n \/* Filters *\/\n .filters {\n display: flex;\n gap: 15px;\n margin-bottom: 30px;\n padding: 20px;\n background: #f8f9fa;\n border-radius: 8px;\n flex-wrap: wrap;\n }\n \n .search-box {\n flex: 1;\n min-width: 250px;\n position: relative;\n }\n \n .search-box input {\n width: 100%;\n padding: 12px 45px 12px 20px;\n border: 1px solid #ddd;\n border-radius: 6px;\n font-size: 1rem;\n background: white;\n }\n \n .search-box i {\n position: absolute;\n left: 15px;\n top: 50%;\n transform: translateY(-50%);\n color: #7f8c8d;\n }\n \n .sort-select {\n padding: 12px 20px;\n border: 1px solid #ddd;\n border-radius: 6px;\n background: white;\n font-size: 1rem;\n min-width: 200px;\n }\n \n \/* Gallery Grid - Compact for 900px width *\/\n .video-gallery {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 40px;\n }\n \n .video-card {\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\n transition: all 0.3s ease;\n border: 1px solid #eee;\n }\n \n .video-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n border-color: #3498db;\n }\n \n .video-thumbnail {\n position: relative;\n height: 160px;\n overflow: hidden;\n background: linear-gradient(45deg, #2c3e50, #4a6491);\n }\n \n .video-thumbnail img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n }\n \n .video-card:hover .video-thumbnail img {\n transform: scale(1.05);\n }\n \n .play-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(52, 152, 219, 0.9);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n \n .video-card:hover .play-overlay {\n opacity: 1;\n }\n \n .play-icon {\n width: 50px;\n height: 50px;\n background: white;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #3498db;\n font-size: 1.2rem;\n }\n \n .video-info {\n padding: 15px;\n }\n \n .video-title {\n font-size: 1rem;\n font-weight: 600;\n color: #2c3e50;\n margin-bottom: 8px;\n height: 50px;\n overflow: hidden;\n line-height: 1.4;\n }\n \n .video-meta {\n display: flex;\n justify-content: space-between;\n color: #7f8c8d;\n font-size: 0.85rem;\n padding-top: 12px;\n border-top: 1px solid #eee;\n }\n \n .video-number {\n display: flex;\n align-items: center;\n gap: 5px;\n }\n \n .video-duration {\n display: flex;\n align-items: center;\n gap: 5px;\n }\n \n \/* Pagination *\/\n .pagination {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 30px;\n }\n \n .page-btn {\n padding: 10px 18px;\n background: white;\n border: 1px solid #ddd;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 0.95rem;\n }\n \n .page-btn:hover {\n background: #f8f9fa;\n border-color: #3498db;\n }\n \n .page-btn.active {\n background: #3498db;\n color: white;\n border-color: #3498db;\n }\n \n \/* Modal *\/\n .video-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.9);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n }\n \n .video-modal.active {\n opacity: 1;\n visibility: visible;\n }\n \n .modal-content {\n width: 90%;\n max-width: 800px;\n background: white;\n border-radius: 12px;\n overflow: hidden;\n position: relative;\n }\n \n .modal-header {\n padding: 20px 25px;\n background: #2c3e50;\n color: white;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .modal-title {\n font-size: 1.3rem;\n font-weight: 500;\n }\n \n .close-modal {\n background: none;\n border: none;\n color: white;\n font-size: 1.5rem;\n cursor: pointer;\n }\n \n .modal-body {\n padding: 25px;\n }\n \n .modal-video {\n width: 100%;\n max-height: 450px;\n border-radius: 8px;\n background: #000;\n }\n \n .modal-actions {\n display: flex;\n gap: 15px;\n margin-top: 20px;\n justify-content: center;\n }\n \n .modal-btn {\n padding: 12px 25px;\n background: #3498db;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.95rem;\n text-decoration: none;\n transition: background 0.3s ease;\n }\n \n .modal-btn:hover {\n background: #2980b9;\n }\n \n \/* Footer *\/\n .content-footer {\n text-align: center;\n padding: 25px 0;\n color: #7f8c8d;\n font-size: 0.9rem;\n border-top: 1px solid #eee;\n margin-top: 30px;\n }\n \n \/* Responsive Design *\/\n @media (max-width: 920px) {\n .wp-content-area {\n padding: 15px;\n margin: 0 10px;\n }\n \n .video-gallery {\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 15px;\n }\n \n .content-header h1 {\n font-size: 1.8rem;\n }\n }\n \n @media (max-width: 768px) {\n .video-gallery {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .filters {\n flex-direction: column;\n }\n \n .search-box, .sort-select {\n min-width: 100%;\n }\n \n .content-header h1 {\n font-size: 1.6rem;\n }\n \n .video-stats {\n gap: 10px;\n }\n \n .stat-item {\n padding: 10px 20px;\n font-size: 0.9rem;\n }\n }\n \n @media (max-width: 576px) {\n .video-gallery {\n grid-template-columns: 1fr;\n }\n \n .video-title {\n height: auto;\n min-height: 50px;\n }\n \n .modal-actions {\n flex-direction: column;\n }\n \n .modal-btn {\n width: 100%;\n justify-content: center;\n }\n \n body {\n padding: 10px;\n }\n }\n \n @media (max-width: 480px) {\n .content-header h1 {\n font-size: 1.4rem;\n }\n \n .video-stats {\n flex-direction: column;\n align-items: center;\n }\n \n .stat-item {\n width: 100%;\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wp-content-area\">\n <header class=\"content-header\">\n <h1><i class=\"fas fa-play-circle\"><\/i> \u06af\u0627\u0644\u0631\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631<\/h1>\n <p>\u0645\u062c\u0645\u0648\u0639\u0647 \u06a9\u0627\u0645\u0644 \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u062f\u0648\u0631\u0647 \u0628\u0627\u0648\u0631 – \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0633\u0627\u0646 \u0648 \u067e\u062e\u0634 \u0622\u0646\u0644\u0627\u06cc\u0646<\/p>\n \n <div class=\"video-stats\">\n <div class=\"stat-item\">\n <i class=\"fas fa-film\"><\/i>\n <span>\u062a\u0639\u062f\u0627\u062f \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627: <strong id=\"videoCount\">\u06f1\u06f8<\/strong><\/span>\n <\/div>\n <div class=\"stat-item\">\n <i class=\"fas fa-clock\"><\/i>\n <span>\u0645\u062f\u062a \u06a9\u0644: <strong>\u06f4\u066b\u06f5 \u0633\u0627\u0639\u062a<\/strong><\/span>\n <\/div>\n <div class=\"stat-item\">\n <i class=\"fas fa-download\"><\/i>\n <span>\u062d\u062c\u0645 \u06a9\u0644: <strong>\u06f3\u06f5\u06f0 \u0645\u06af\u0627\u0628\u0627\u06cc\u062a<\/strong><\/span>\n <\/div>\n <\/div>\n <\/header>\n \n <div class=\"filters\">\n <div class=\"search-box\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u062c\u0633\u062a\u062c\u0648\u06cc \u0648\u06cc\u062f\u06cc\u0648...\">\n <i class=\"fas fa-search\"><\/i>\n <\/div>\n \n <select class=\"sort-select\" id=\"sortSelect\">\n <option value=\"default\">\u062a\u0631\u062a\u06cc\u0628 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636<\/option>\n <option value=\"asc\">\u0634\u0645\u0627\u0631\u0647 \u0635\u0639\u0648\u062f\u06cc<\/option>\n <option value=\"desc\">\u0634\u0645\u0627\u0631\u0647 \u0646\u0632\u0648\u0644\u06cc<\/option>\n <\/select>\n <\/div>\n \n <div class=\"video-gallery\" id=\"videoGallery\">\n \n <\/div>\n \n <div class=\"pagination\" id=\"pagination\">\n \n <\/div>\n \n <footer class=\"content-footer\">\n <p>\u0633\u06cc\u0633\u062a\u0645 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0628\u0627\u0648\u0631 © 2024<\/p>\n <p>\u062a\u0645\u0627\u0645\u06cc \u062d\u0642\u0648\u0642 \u0628\u0631\u0627\u06cc \u0645\u062c\u0645\u0648\u0639\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a<\/p>\n <\/footer>\n <\/div>\n \n \n <div class=\"video-modal\" id=\"videoModal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h3 class=\"modal-title\" id=\"modalTitle\">\u0639\u0646\u0648\u0627\u0646 \u0648\u06cc\u062f\u06cc\u0648<\/h3>\n <button class=\"close-modal\" id=\"closeModal\">\n <i class=\"fas fa-times\"><\/i>\n <\/button>\n <\/div>\n <div class=\"modal-body\">\n <video controls class=\"modal-video\" id=\"modalVideo\">\n \u0645\u0631\u0648\u0631\u06af\u0631 \u0634\u0645\u0627 \u0627\u0632 \u062a\u06af \u0648\u06cc\u062f\u06cc\u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f\n <\/video>\n <div class=\"modal-actions\">\n <a href=\"#\" class=\"modal-btn\" id=\"externalLink\" target=\"_blank\">\n <i class=\"fas fa-external-link-alt\"><\/i> \u0645\u0634\u0627\u0647\u062f\u0647 \u062f\u0631 \u0635\u0641\u062d\u0647 \u062c\u062f\u06cc\u062f\n <\/a>\n <a href=\"#\" class=\"modal-btn\" id=\"downloadLink\" download>\n <i class=\"fas fa-download\"><\/i> \u062f\u0627\u0646\u0644\u0648\u062f \u0648\u06cc\u062f\u06cc\u0648\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\n const videoData = [\n { id: 1, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f1: \u0645\u0642\u062f\u0645\u0627\u062a\", number: \"\u0628\u0627\u0648\u0631\u06f1\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar1.mp4\", duration: \"15:30\", size: \"15MB\" },\n { id: 2, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f2: \u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u0627\u06cc\u0647\", number: \"\u0628\u0627\u0648\u0631\u06f2\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar2.mp4\", duration: \"18:45\", size: \"18MB\" },\n { id: 3, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f3: \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647\", number: \"\u0628\u0627\u0648\u0631\u06f3\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar3.mp4\", duration: \"16:20\", size: \"16MB\" },\n { id: 4, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4: \u06a9\u0627\u0631\u0628\u0631\u062f \u0639\u0645\u0644\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f4\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar4.mp4\", duration: \"17:10\", size: \"17MB\" },\n { id: 5, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f3\u06f6: \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u06f1\", number: \"\u0628\u0627\u0648\u0631\u06f3\u06f6\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar36.mp4\", duration: \"22:15\", size: \"22MB\" },\n { id: 6, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f3\u06f7: \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u06f2\", number: \"\u0628\u0627\u0648\u0631\u06f3\u06f7\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar37.mp4\", duration: \"21:30\", size: \"21MB\" },\n { id: 7, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f3\u06f8: \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\", number: \"\u0628\u0627\u0648\u0631\u06f3\u06f8\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/Bavar38.mp4\", duration: \"23:45\", size: \"23MB\" },\n { id: 8, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f3\u06f9: \u062a\u0645\u0631\u06cc\u0646 \u0639\u0645\u0644\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f3\u06f9\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar39.mp4\", duration: \"20:20\", size: \"20MB\" },\n { id: 9, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4\u06f0: \u067e\u0631\u0648\u0698\u0647 \u0646\u0647\u0627\u06cc\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f4\u06f0\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar40.mp4\", duration: \"19:10\", size: \"19MB\" },\n { id: 10, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4\u06f1: \u0646\u06a9\u0627\u062a \u062a\u06a9\u0645\u06cc\u0644\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f4\u06f1\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar41.mp4\", duration: \"24:25\", size: \"24MB\" },\n { id: 11, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4\u06f2: \u0631\u0641\u0639 \u0627\u0634\u06a9\u0627\u0644\", number: \"\u0628\u0627\u0648\u0631\u06f4\u06f2\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar42.mp4\", duration: \"21:15\", size: \"21MB\" },\n { id: 12, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4\u06f3: \u062c\u0645\u0639\u200c\u0628\u0646\u062f\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f4\u06f3\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar43.mp4\", duration: \"22:40\", size: \"22MB\" },\n { id: 13, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4\u06f4: \u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f4\u06f4\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar44.mp4\", duration: \"23:30\", size: \"23MB\" }\n ];\n\n \/\/ \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc DOM\n const videoGallery = document.getElementById('videoGallery');\n const videoModal = document.getElementById('videoModal');\n const modalVideo = document.getElementById('modalVideo');\n const modalTitle = document.getElementById('modalTitle');\n const externalLink = document.getElementById('externalLink');\n const downloadLink = document.getElementById('downloadLink');\n const closeModalBtn = document.getElementById('closeModal');\n const videoCount = document.getElementById('videoCount');\n const searchInput = document.getElementById('searchInput');\n const sortSelect = document.getElementById('sortSelect');\n const pagination = document.getElementById('pagination');\n\n \/\/ \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc\n let currentPage = 1;\n const videosPerPage = 9;\n let filteredVideos = [...videoData];\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0631\u062a \u0648\u06cc\u062f\u06cc\u0648\n function createVideoCard(video) {\n const card = document.createElement('div');\n card.className = 'video-card';\n card.setAttribute('data-id', video.id);\n \n \/\/ \u062a\u0635\u0648\u06cc\u0631 thumbnail\n const thumbnailUrl = `https:\/\/picsum.photos\/seed\/video${video.id}\/400\/250`;\n \n card.innerHTML = `\n <div class=\"video-thumbnail\">\n <img decoding=\"async\" src=\"${thumbnailUrl}\" alt=\"${video.title}\">\n <div class=\"play-overlay\">\n <div class=\"play-icon\">\n <i class=\"fas fa-play\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"video-info\">\n <h3 class=\"video-title\">${video.title}<\/h3>\n <div class=\"video-meta\">\n <div class=\"video-number\">\n <i class=\"fas fa-hashtag\"><\/i> ${video.number}\n <\/div>\n <div class=\"video-duration\">\n <i class=\"fas fa-clock\"><\/i> ${video.duration}\n <\/div>\n <\/div>\n <\/div>\n `;\n \n \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 event listener\n card.addEventListener('click', () => openVideoModal(video.id));\n \n return card;\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06af\u0627\u0644\u0631\u06cc\n function displayGallery(videos = filteredVideos, page = 1) {\n videoGallery.innerHTML = '';\n \n \/\/ \u0645\u062d\u0627\u0633\u0628\u0647 \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u062c\u0627\u0631\u06cc\n const startIndex = (page - 1) * videosPerPage;\n const endIndex = startIndex + videosPerPage;\n const videosToShow = videos.slice(startIndex, endIndex);\n \n if (videosToShow.length === 0) {\n videoGallery.innerHTML = `\n <div style=\"grid-column: 1 \/ -1; text-align: center; padding: 50px; background: #f8f9fa; border-radius: 10px;\">\n <i class=\"fas fa-video-slash\" style=\"font-size: 2.5rem; color: #7f8c8d; margin-bottom: 15px;\"><\/i>\n <h3 style=\"color: #2c3e50; margin-bottom: 10px;\">\u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f<\/h3>\n <p style=\"color: #7f8c8d;\">\u0644\u0637\u0641\u0627\u064b \u0639\u0628\u0627\u0631\u062a \u062c\u0633\u062a\u062c\u0648\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<\/p>\n <\/div>\n `;\n return;\n }\n \n videosToShow.forEach(video => {\n const card = createVideoCard(video);\n videoGallery.appendChild(card);\n });\n \n \/\/ \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0634\u0645\u0627\u0631\u0646\u062f\u0647\n videoCount.textContent = videos.length;\n \n \/\/ \u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc\n createPagination(videos.length, page);\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc\n function createPagination(totalVideos, currentPage) {\n pagination.innerHTML = '';\n const totalPages = Math.ceil(totalVideos \/ videosPerPage);\n \n if (totalPages <= 1) return;\n \n \/\/ \u062f\u06a9\u0645\u0647 \u0642\u0628\u0644\u06cc\n if (currentPage > 1) {\n const prevBtn = document.createElement('button');\n prevBtn.className = 'page-btn';\n prevBtn.innerHTML = '<i class=\"fas fa-chevron-right\"><\/i> \u0642\u0628\u0644\u06cc';\n prevBtn.addEventListener('click', () => {\n displayGallery(filteredVideos, currentPage - 1);\n });\n pagination.appendChild(prevBtn);\n }\n \n \/\/ \u0634\u0645\u0627\u0631\u0647 \u0635\u0641\u062d\u0627\u062a\n const maxPagesToShow = 5;\n let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow \/ 2));\n let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);\n \n \/\/ Adjust start page if we're near the end\n if (endPage - startPage + 1 < maxPagesToShow) {\n startPage = Math.max(1, endPage - maxPagesToShow + 1);\n }\n \n for (let i = startPage; i <= endPage; i++) {\n const pageBtn = document.createElement('button');\n pageBtn.className = `page-btn ${i === currentPage ? 'active' : ''}`;\n pageBtn.textContent = i;\n pageBtn.addEventListener('click', () => {\n displayGallery(filteredVideos, i);\n });\n pagination.appendChild(pageBtn);\n }\n \n \/\/ \u062f\u06a9\u0645\u0647 \u0628\u0639\u062f\u06cc\n if (currentPage < totalPages) {\n const nextBtn = document.createElement('button');\n nextBtn.className = 'page-btn';\n nextBtn.innerHTML = '\u0628\u0639\u062f\u06cc <i class=\"fas fa-chevron-left\"><\/i>';\n nextBtn.addEventListener('click', () => {\n displayGallery(filteredVideos, currentPage + 1);\n });\n pagination.appendChild(nextBtn);\n }\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0645\u062f\u0627\u0644 \u0648\u06cc\u062f\u06cc\u0648\n function openVideoModal(id) {\n const video = videoData.find(item => item.id === id);\n if (!video) return;\n \n modalTitle.textContent = video.title;\n externalLink.href = video.src;\n downloadLink.href = video.src;\n \n \/\/ \u062a\u0646\u0638\u06cc\u0645 \u0648\u06cc\u062f\u06cc\u0648\n modalVideo.src = video.src;\n \n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0645\u062f\u0627\u0644\n videoModal.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0628\u0633\u062a\u0646 \u0645\u062f\u0627\u0644\n function closeVideoModal() {\n videoModal.classList.remove('active');\n document.body.style.overflow = 'auto';\n modalVideo.pause();\n modalVideo.src = '';\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\n function searchVideos(query) {\n if (!query.trim()) {\n filteredVideos = [...videoData];\n } else {\n filteredVideos = videoData.filter(video => \n video.title.toLowerCase().includes(query.toLowerCase()) || \n video.number.toLowerCase().includes(query.toLowerCase())\n );\n }\n \n currentPage = 1;\n sortVideos(sortSelect.value);\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\n function sortVideos(sortType) {\n let sortedVideos = [...filteredVideos];\n \n switch(sortType) {\n case 'asc':\n sortedVideos.sort((a, b) => a.id - b.id);\n break;\n case 'desc':\n sortedVideos.sort((a, b) => b.id - a.id);\n break;\n default:\n sortedVideos = [...filteredVideos];\n break;\n }\n \n filteredVideos = sortedVideos;\n displayGallery(filteredVideos, currentPage);\n }\n\n \/\/ \u062a\u0646\u0638\u06cc\u0645 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\n searchInput.addEventListener('input', function() {\n searchVideos(this.value);\n });\n \n sortSelect.addEventListener('change', function() {\n sortVideos(this.value);\n });\n \n closeModalBtn.addEventListener('click', closeVideoModal);\n \n videoModal.addEventListener('click', function(e) {\n if (e.target === this) {\n closeVideoModal();\n }\n });\n \n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && videoModal.classList.contains('active')) {\n closeVideoModal();\n }\n });\n\n \/\/ \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0627\u0648\u0644\u06cc\u0647\n displayGallery(videoData, currentPage);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u06af\u0627\u0644\u0631\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 \u06af\u0627\u0644\u0631\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 \u0645\u062c\u0645\u0648\u0639\u0647 \u06a9\u0627\u0645\u0644 \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u062f\u0648\u0631\u0647 \u0628\u0627\u0648\u0631 – \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0633\u0627\u0646 \u0648 \u067e\u062e\u0634 \u0622\u0646\u0644\u0627\u06cc\u0646 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-8374","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/posts\/8374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/comments?post=8374"}],"version-history":[{"count":7,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/posts\/8374\/revisions"}],"predecessor-version":[{"id":8386,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/posts\/8374\/revisions\/8386"}],"wp:attachment":[{"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/media?parent=8374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/categories?post=8374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/tags?post=8374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8374,"date":"2026-01-03T02:18:21","date_gmt":"2026-01-02T22:48:21","guid":{"rendered":"https:\/\/bilgisayariran.ir\/lms\/?p=8374"},"modified":"2026-01-03T02:39:22","modified_gmt":"2026-01-02T23:09:22","slug":"%da%af%d8%a7%d9%84%d8%b1%db%8c-%d9%81%db%8c%d9%84%d9%85%d9%87%d8%a7","status":"publish","type":"post","link":"https:\/\/bilgisayariran.ir\/lms\/%da%af%d8%a7%d9%84%d8%b1%db%8c-%d9%81%db%8c%d9%84%d9%85%d9%87%d8%a7\/","title":{"rendered":"\u06af\u0627\u0644\u0631\u06cc \u0641\u06cc\u0644\u0645\u0647\u0627"},"content":{"rendered":"\n\n\n\n \n \n \u06af\u0627\u0644\u0631\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* Reset and Base Styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n \n body {\n background-color: #f5f5f5;\n color: #333;\n line-height: 1.6;\n padding: 20px;\n min-height: 100vh;\n }\n \n \/* Container for WordPress Content Area *\/\n .wp-content-area {\n max-width: 900px; \/* Width matches typical WordPress content area *\/\n margin: 0 auto;\n padding: 20px;\n background: white;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n }\n \n \/* Header *\/\n .content-header {\n text-align: center;\n margin-bottom: 40px;\n padding-bottom: 20px;\n border-bottom: 2px solid #f0f0f0;\n }\n \n .content-header h1 {\n font-size: 2rem;\n color: #2c3e50;\n margin-bottom: 15px;\n }\n \n .content-header p {\n color: #7f8c8d;\n font-size: 1.1rem;\n max-width: 700px;\n margin: 0 auto;\n }\n \n .video-stats {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-top: 25px;\n flex-wrap: wrap;\n }\n \n .stat-item {\n background: #f8f9fa;\n padding: 12px 25px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n gap: 10px;\n border: 1px solid #e9ecef;\n }\n \n .stat-item i {\n color: #3498db;\n font-size: 1.1rem;\n }\n \n \/* Filters *\/\n .filters {\n display: flex;\n gap: 15px;\n margin-bottom: 30px;\n padding: 20px;\n background: #f8f9fa;\n border-radius: 8px;\n flex-wrap: wrap;\n }\n \n .search-box {\n flex: 1;\n min-width: 250px;\n position: relative;\n }\n \n .search-box input {\n width: 100%;\n padding: 12px 45px 12px 20px;\n border: 1px solid #ddd;\n border-radius: 6px;\n font-size: 1rem;\n background: white;\n }\n \n .search-box i {\n position: absolute;\n left: 15px;\n top: 50%;\n transform: translateY(-50%);\n color: #7f8c8d;\n }\n \n .sort-select {\n padding: 12px 20px;\n border: 1px solid #ddd;\n border-radius: 6px;\n background: white;\n font-size: 1rem;\n min-width: 200px;\n }\n \n \/* Gallery Grid - Compact for 900px width *\/\n .video-gallery {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 40px;\n }\n \n .video-card {\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\n transition: all 0.3s ease;\n border: 1px solid #eee;\n }\n \n .video-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n border-color: #3498db;\n }\n \n .video-thumbnail {\n position: relative;\n height: 160px;\n overflow: hidden;\n background: linear-gradient(45deg, #2c3e50, #4a6491);\n }\n \n .video-thumbnail img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n }\n \n .video-card:hover .video-thumbnail img {\n transform: scale(1.05);\n }\n \n .play-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(52, 152, 219, 0.9);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n \n .video-card:hover .play-overlay {\n opacity: 1;\n }\n \n .play-icon {\n width: 50px;\n height: 50px;\n background: white;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #3498db;\n font-size: 1.2rem;\n }\n \n .video-info {\n padding: 15px;\n }\n \n .video-title {\n font-size: 1rem;\n font-weight: 600;\n color: #2c3e50;\n margin-bottom: 8px;\n height: 50px;\n overflow: hidden;\n line-height: 1.4;\n }\n \n .video-meta {\n display: flex;\n justify-content: space-between;\n color: #7f8c8d;\n font-size: 0.85rem;\n padding-top: 12px;\n border-top: 1px solid #eee;\n }\n \n .video-number {\n display: flex;\n align-items: center;\n gap: 5px;\n }\n \n .video-duration {\n display: flex;\n align-items: center;\n gap: 5px;\n }\n \n \/* Pagination *\/\n .pagination {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 30px;\n }\n \n .page-btn {\n padding: 10px 18px;\n background: white;\n border: 1px solid #ddd;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 0.95rem;\n }\n \n .page-btn:hover {\n background: #f8f9fa;\n border-color: #3498db;\n }\n \n .page-btn.active {\n background: #3498db;\n color: white;\n border-color: #3498db;\n }\n \n \/* Modal *\/\n .video-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.9);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n }\n \n .video-modal.active {\n opacity: 1;\n visibility: visible;\n }\n \n .modal-content {\n width: 90%;\n max-width: 800px;\n background: white;\n border-radius: 12px;\n overflow: hidden;\n position: relative;\n }\n \n .modal-header {\n padding: 20px 25px;\n background: #2c3e50;\n color: white;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .modal-title {\n font-size: 1.3rem;\n font-weight: 500;\n }\n \n .close-modal {\n background: none;\n border: none;\n color: white;\n font-size: 1.5rem;\n cursor: pointer;\n }\n \n .modal-body {\n padding: 25px;\n }\n \n .modal-video {\n width: 100%;\n max-height: 450px;\n border-radius: 8px;\n background: #000;\n }\n \n .modal-actions {\n display: flex;\n gap: 15px;\n margin-top: 20px;\n justify-content: center;\n }\n \n .modal-btn {\n padding: 12px 25px;\n background: #3498db;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.95rem;\n text-decoration: none;\n transition: background 0.3s ease;\n }\n \n .modal-btn:hover {\n background: #2980b9;\n }\n \n \/* Footer *\/\n .content-footer {\n text-align: center;\n padding: 25px 0;\n color: #7f8c8d;\n font-size: 0.9rem;\n border-top: 1px solid #eee;\n margin-top: 30px;\n }\n \n \/* Responsive Design *\/\n @media (max-width: 920px) {\n .wp-content-area {\n padding: 15px;\n margin: 0 10px;\n }\n \n .video-gallery {\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 15px;\n }\n \n .content-header h1 {\n font-size: 1.8rem;\n }\n }\n \n @media (max-width: 768px) {\n .video-gallery {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .filters {\n flex-direction: column;\n }\n \n .search-box, .sort-select {\n min-width: 100%;\n }\n \n .content-header h1 {\n font-size: 1.6rem;\n }\n \n .video-stats {\n gap: 10px;\n }\n \n .stat-item {\n padding: 10px 20px;\n font-size: 0.9rem;\n }\n }\n \n @media (max-width: 576px) {\n .video-gallery {\n grid-template-columns: 1fr;\n }\n \n .video-title {\n height: auto;\n min-height: 50px;\n }\n \n .modal-actions {\n flex-direction: column;\n }\n \n .modal-btn {\n width: 100%;\n justify-content: center;\n }\n \n body {\n padding: 10px;\n }\n }\n \n @media (max-width: 480px) {\n .content-header h1 {\n font-size: 1.4rem;\n }\n \n .video-stats {\n flex-direction: column;\n align-items: center;\n }\n \n .stat-item {\n width: 100%;\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wp-content-area\">\n <header class=\"content-header\">\n <h1><i class=\"fas fa-play-circle\"><\/i> \u06af\u0627\u0644\u0631\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631<\/h1>\n <p>\u0645\u062c\u0645\u0648\u0639\u0647 \u06a9\u0627\u0645\u0644 \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u062f\u0648\u0631\u0647 \u0628\u0627\u0648\u0631 – \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0633\u0627\u0646 \u0648 \u067e\u062e\u0634 \u0622\u0646\u0644\u0627\u06cc\u0646<\/p>\n \n <div class=\"video-stats\">\n <div class=\"stat-item\">\n <i class=\"fas fa-film\"><\/i>\n <span>\u062a\u0639\u062f\u0627\u062f \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627: <strong id=\"videoCount\">\u06f1\u06f8<\/strong><\/span>\n <\/div>\n <div class=\"stat-item\">\n <i class=\"fas fa-clock\"><\/i>\n <span>\u0645\u062f\u062a \u06a9\u0644: <strong>\u06f4\u066b\u06f5 \u0633\u0627\u0639\u062a<\/strong><\/span>\n <\/div>\n <div class=\"stat-item\">\n <i class=\"fas fa-download\"><\/i>\n <span>\u062d\u062c\u0645 \u06a9\u0644: <strong>\u06f3\u06f5\u06f0 \u0645\u06af\u0627\u0628\u0627\u06cc\u062a<\/strong><\/span>\n <\/div>\n <\/div>\n <\/header>\n \n <div class=\"filters\">\n <div class=\"search-box\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u062c\u0633\u062a\u062c\u0648\u06cc \u0648\u06cc\u062f\u06cc\u0648...\">\n <i class=\"fas fa-search\"><\/i>\n <\/div>\n \n <select class=\"sort-select\" id=\"sortSelect\">\n <option value=\"default\">\u062a\u0631\u062a\u06cc\u0628 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636<\/option>\n <option value=\"asc\">\u0634\u0645\u0627\u0631\u0647 \u0635\u0639\u0648\u062f\u06cc<\/option>\n <option value=\"desc\">\u0634\u0645\u0627\u0631\u0647 \u0646\u0632\u0648\u0644\u06cc<\/option>\n <\/select>\n <\/div>\n \n <div class=\"video-gallery\" id=\"videoGallery\">\n \n <\/div>\n \n <div class=\"pagination\" id=\"pagination\">\n \n <\/div>\n \n <footer class=\"content-footer\">\n <p>\u0633\u06cc\u0633\u062a\u0645 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0628\u0627\u0648\u0631 © 2024<\/p>\n <p>\u062a\u0645\u0627\u0645\u06cc \u062d\u0642\u0648\u0642 \u0628\u0631\u0627\u06cc \u0645\u062c\u0645\u0648\u0639\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a<\/p>\n <\/footer>\n <\/div>\n \n \n <div class=\"video-modal\" id=\"videoModal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h3 class=\"modal-title\" id=\"modalTitle\">\u0639\u0646\u0648\u0627\u0646 \u0648\u06cc\u062f\u06cc\u0648<\/h3>\n <button class=\"close-modal\" id=\"closeModal\">\n <i class=\"fas fa-times\"><\/i>\n <\/button>\n <\/div>\n <div class=\"modal-body\">\n <video controls class=\"modal-video\" id=\"modalVideo\">\n \u0645\u0631\u0648\u0631\u06af\u0631 \u0634\u0645\u0627 \u0627\u0632 \u062a\u06af \u0648\u06cc\u062f\u06cc\u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f\n <\/video>\n <div class=\"modal-actions\">\n <a href=\"#\" class=\"modal-btn\" id=\"externalLink\" target=\"_blank\">\n <i class=\"fas fa-external-link-alt\"><\/i> \u0645\u0634\u0627\u0647\u062f\u0647 \u062f\u0631 \u0635\u0641\u062d\u0647 \u062c\u062f\u06cc\u062f\n <\/a>\n <a href=\"#\" class=\"modal-btn\" id=\"downloadLink\" download>\n <i class=\"fas fa-download\"><\/i> \u062f\u0627\u0646\u0644\u0648\u062f \u0648\u06cc\u062f\u06cc\u0648\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\n const videoData = [\n { id: 1, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f1: \u0645\u0642\u062f\u0645\u0627\u062a\", number: \"\u0628\u0627\u0648\u0631\u06f1\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar1.mp4\", duration: \"15:30\", size: \"15MB\" },\n { id: 2, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f2: \u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u0627\u06cc\u0647\", number: \"\u0628\u0627\u0648\u0631\u06f2\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar2.mp4\", duration: \"18:45\", size: \"18MB\" },\n { id: 3, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f3: \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647\", number: \"\u0628\u0627\u0648\u0631\u06f3\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar3.mp4\", duration: \"16:20\", size: \"16MB\" },\n { id: 4, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4: \u06a9\u0627\u0631\u0628\u0631\u062f \u0639\u0645\u0644\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f4\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar4.mp4\", duration: \"17:10\", size: \"17MB\" },\n { id: 5, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f3\u06f6: \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u06f1\", number: \"\u0628\u0627\u0648\u0631\u06f3\u06f6\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar36.mp4\", duration: \"22:15\", size: \"22MB\" },\n { id: 6, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f3\u06f7: \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u06f2\", number: \"\u0628\u0627\u0648\u0631\u06f3\u06f7\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar37.mp4\", duration: \"21:30\", size: \"21MB\" },\n { id: 7, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f3\u06f8: \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\", number: \"\u0628\u0627\u0648\u0631\u06f3\u06f8\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/Bavar38.mp4\", duration: \"23:45\", size: \"23MB\" },\n { id: 8, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f3\u06f9: \u062a\u0645\u0631\u06cc\u0646 \u0639\u0645\u0644\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f3\u06f9\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar39.mp4\", duration: \"20:20\", size: \"20MB\" },\n { id: 9, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4\u06f0: \u067e\u0631\u0648\u0698\u0647 \u0646\u0647\u0627\u06cc\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f4\u06f0\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar40.mp4\", duration: \"19:10\", size: \"19MB\" },\n { id: 10, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4\u06f1: \u0646\u06a9\u0627\u062a \u062a\u06a9\u0645\u06cc\u0644\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f4\u06f1\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar41.mp4\", duration: \"24:25\", size: \"24MB\" },\n { id: 11, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4\u06f2: \u0631\u0641\u0639 \u0627\u0634\u06a9\u0627\u0644\", number: \"\u0628\u0627\u0648\u0631\u06f4\u06f2\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar42.mp4\", duration: \"21:15\", size: \"21MB\" },\n { id: 12, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4\u06f3: \u062c\u0645\u0639\u200c\u0628\u0646\u062f\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f4\u06f3\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar43.mp4\", duration: \"22:40\", size: \"22MB\" },\n { id: 13, title: \"\u0648\u06cc\u062f\u06cc\u0648 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 - \u0642\u0633\u0645\u062a \u06f4\u06f4: \u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc\", number: \"\u0628\u0627\u0648\u0631\u06f4\u06f4\", src: \"https:\/\/bilgisayariran.ir\/lms\/wp-content\/uploads\/sites\/2\/2024\/04\/bavar44.mp4\", duration: \"23:30\", size: \"23MB\" }\n ];\n\n \/\/ \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc DOM\n const videoGallery = document.getElementById('videoGallery');\n const videoModal = document.getElementById('videoModal');\n const modalVideo = document.getElementById('modalVideo');\n const modalTitle = document.getElementById('modalTitle');\n const externalLink = document.getElementById('externalLink');\n const downloadLink = document.getElementById('downloadLink');\n const closeModalBtn = document.getElementById('closeModal');\n const videoCount = document.getElementById('videoCount');\n const searchInput = document.getElementById('searchInput');\n const sortSelect = document.getElementById('sortSelect');\n const pagination = document.getElementById('pagination');\n\n \/\/ \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc\n let currentPage = 1;\n const videosPerPage = 9;\n let filteredVideos = [...videoData];\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0631\u062a \u0648\u06cc\u062f\u06cc\u0648\n function createVideoCard(video) {\n const card = document.createElement('div');\n card.className = 'video-card';\n card.setAttribute('data-id', video.id);\n \n \/\/ \u062a\u0635\u0648\u06cc\u0631 thumbnail\n const thumbnailUrl = `https:\/\/picsum.photos\/seed\/video${video.id}\/400\/250`;\n \n card.innerHTML = `\n <div class=\"video-thumbnail\">\n <img decoding=\"async\" src=\"${thumbnailUrl}\" alt=\"${video.title}\">\n <div class=\"play-overlay\">\n <div class=\"play-icon\">\n <i class=\"fas fa-play\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"video-info\">\n <h3 class=\"video-title\">${video.title}<\/h3>\n <div class=\"video-meta\">\n <div class=\"video-number\">\n <i class=\"fas fa-hashtag\"><\/i> ${video.number}\n <\/div>\n <div class=\"video-duration\">\n <i class=\"fas fa-clock\"><\/i> ${video.duration}\n <\/div>\n <\/div>\n <\/div>\n `;\n \n \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 event listener\n card.addEventListener('click', () => openVideoModal(video.id));\n \n return card;\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06af\u0627\u0644\u0631\u06cc\n function displayGallery(videos = filteredVideos, page = 1) {\n videoGallery.innerHTML = '';\n \n \/\/ \u0645\u062d\u0627\u0633\u0628\u0647 \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u062c\u0627\u0631\u06cc\n const startIndex = (page - 1) * videosPerPage;\n const endIndex = startIndex + videosPerPage;\n const videosToShow = videos.slice(startIndex, endIndex);\n \n if (videosToShow.length === 0) {\n videoGallery.innerHTML = `\n <div style=\"grid-column: 1 \/ -1; text-align: center; padding: 50px; background: #f8f9fa; border-radius: 10px;\">\n <i class=\"fas fa-video-slash\" style=\"font-size: 2.5rem; color: #7f8c8d; margin-bottom: 15px;\"><\/i>\n <h3 style=\"color: #2c3e50; margin-bottom: 10px;\">\u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f<\/h3>\n <p style=\"color: #7f8c8d;\">\u0644\u0637\u0641\u0627\u064b \u0639\u0628\u0627\u0631\u062a \u062c\u0633\u062a\u062c\u0648\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<\/p>\n <\/div>\n `;\n return;\n }\n \n videosToShow.forEach(video => {\n const card = createVideoCard(video);\n videoGallery.appendChild(card);\n });\n \n \/\/ \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0634\u0645\u0627\u0631\u0646\u062f\u0647\n videoCount.textContent = videos.length;\n \n \/\/ \u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc\n createPagination(videos.length, page);\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc\n function createPagination(totalVideos, currentPage) {\n pagination.innerHTML = '';\n const totalPages = Math.ceil(totalVideos \/ videosPerPage);\n \n if (totalPages <= 1) return;\n \n \/\/ \u062f\u06a9\u0645\u0647 \u0642\u0628\u0644\u06cc\n if (currentPage > 1) {\n const prevBtn = document.createElement('button');\n prevBtn.className = 'page-btn';\n prevBtn.innerHTML = '<i class=\"fas fa-chevron-right\"><\/i> \u0642\u0628\u0644\u06cc';\n prevBtn.addEventListener('click', () => {\n displayGallery(filteredVideos, currentPage - 1);\n });\n pagination.appendChild(prevBtn);\n }\n \n \/\/ \u0634\u0645\u0627\u0631\u0647 \u0635\u0641\u062d\u0627\u062a\n const maxPagesToShow = 5;\n let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow \/ 2));\n let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);\n \n \/\/ Adjust start page if we're near the end\n if (endPage - startPage + 1 < maxPagesToShow) {\n startPage = Math.max(1, endPage - maxPagesToShow + 1);\n }\n \n for (let i = startPage; i <= endPage; i++) {\n const pageBtn = document.createElement('button');\n pageBtn.className = `page-btn ${i === currentPage ? 'active' : ''}`;\n pageBtn.textContent = i;\n pageBtn.addEventListener('click', () => {\n displayGallery(filteredVideos, i);\n });\n pagination.appendChild(pageBtn);\n }\n \n \/\/ \u062f\u06a9\u0645\u0647 \u0628\u0639\u062f\u06cc\n if (currentPage < totalPages) {\n const nextBtn = document.createElement('button');\n nextBtn.className = 'page-btn';\n nextBtn.innerHTML = '\u0628\u0639\u062f\u06cc <i class=\"fas fa-chevron-left\"><\/i>';\n nextBtn.addEventListener('click', () => {\n displayGallery(filteredVideos, currentPage + 1);\n });\n pagination.appendChild(nextBtn);\n }\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0645\u062f\u0627\u0644 \u0648\u06cc\u062f\u06cc\u0648\n function openVideoModal(id) {\n const video = videoData.find(item => item.id === id);\n if (!video) return;\n \n modalTitle.textContent = video.title;\n externalLink.href = video.src;\n downloadLink.href = video.src;\n \n \/\/ \u062a\u0646\u0638\u06cc\u0645 \u0648\u06cc\u062f\u06cc\u0648\n modalVideo.src = video.src;\n \n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0645\u062f\u0627\u0644\n videoModal.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0628\u0633\u062a\u0646 \u0645\u062f\u0627\u0644\n function closeVideoModal() {\n videoModal.classList.remove('active');\n document.body.style.overflow = 'auto';\n modalVideo.pause();\n modalVideo.src = '';\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\n function searchVideos(query) {\n if (!query.trim()) {\n filteredVideos = [...videoData];\n } else {\n filteredVideos = videoData.filter(video => \n video.title.toLowerCase().includes(query.toLowerCase()) || \n video.number.toLowerCase().includes(query.toLowerCase())\n );\n }\n \n currentPage = 1;\n sortVideos(sortSelect.value);\n }\n\n \/\/ \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\n function sortVideos(sortType) {\n let sortedVideos = [...filteredVideos];\n \n switch(sortType) {\n case 'asc':\n sortedVideos.sort((a, b) => a.id - b.id);\n break;\n case 'desc':\n sortedVideos.sort((a, b) => b.id - a.id);\n break;\n default:\n sortedVideos = [...filteredVideos];\n break;\n }\n \n filteredVideos = sortedVideos;\n displayGallery(filteredVideos, currentPage);\n }\n\n \/\/ \u062a\u0646\u0638\u06cc\u0645 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\n searchInput.addEventListener('input', function() {\n searchVideos(this.value);\n });\n \n sortSelect.addEventListener('change', function() {\n sortVideos(this.value);\n });\n \n closeModalBtn.addEventListener('click', closeVideoModal);\n \n videoModal.addEventListener('click', function(e) {\n if (e.target === this) {\n closeVideoModal();\n }\n });\n \n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && videoModal.classList.contains('active')) {\n closeVideoModal();\n }\n });\n\n \/\/ \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0627\u0648\u0644\u06cc\u0647\n displayGallery(videoData, currentPage);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u06af\u0627\u0644\u0631\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 \u06af\u0627\u0644\u0631\u06cc \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u0627\u0648\u0631 \u0645\u062c\u0645\u0648\u0639\u0647 \u06a9\u0627\u0645\u0644 \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc \u062f\u0648\u0631\u0647 \u0628\u0627\u0648\u0631 – \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0633\u0627\u0646 \u0648 \u067e\u062e\u0634 \u0622\u0646\u0644\u0627\u06cc\u0646 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-8374","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/posts\/8374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/comments?post=8374"}],"version-history":[{"count":7,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/posts\/8374\/revisions"}],"predecessor-version":[{"id":8386,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/posts\/8374\/revisions\/8386"}],"wp:attachment":[{"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/media?parent=8374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/categories?post=8374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bilgisayariran.ir\/lms\/wp-json\/wp\/v2\/tags?post=8374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}