body { font-family: 'Cairo', sans-serif; background: #f8f9fa; } .exam-list { list-style: none; padding: 0; } .exam-item { margin: 15px 0; padding: 15px; border: 1px solid #ddd; border-radius: 12px; background: #fff; cursor: pointer; transition: 0.3s; } .exam-item:hover { background: #f1f9ff; transform: translateY(-3px); } .exam-title { font-weight: bold; font-size: 18px; } /* Modal */ .modal { display: none; position: fixed; z-index: 9999; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); } .modal-content { background: #fff; margin: auto; padding: 20px; border-radius: 12px; width: 90%; max-width: 500px; text-align: center; animation: fadeIn 0.4s ease; } @keyframes fadeIn { from {opacity: 0; transform: scale(0.9);} to {opacity: 1; transform: scale(1);} } .close { float: right; font-size: 22px; font-weight: bold; cursor: pointer; color: #999; } .close:hover { color: #000; } .btn { padding: 10px 15px; border: none; border-radius: 8px; cursor: pointer; margin: 10px 5px; font-size: 14px; } .btn-preview { background: #007bff; color: #fff; } .btn-preview:hover { background: #0056b3; } .btn-download { background: #28a745; color: #fff; position: relative; } .btn-download:hover { background: #1e7e34; } .progress { height: 6px; background: #ccc; margin-top: 12px; border-radius: 4px; overflow: hidden; display: none; } .progress-bar { height: 100%; background: #28a745; width: 0%; } 📘 فرض اللغة العربية - الفصل الأول × 👁️ معاينة ⬇️ تحميل let currentFile = ''; function openModal(title, fileUrl) { document.getElementById("modalTitle").innerText = title; document.getElementById("previewBtn").onclick = () => window.open(fileUrl, '_blank'); document.getElementById("downloadBtn").onclick = () => startDownload(fileUrl); currentFile = fileUrl; document.getElementById("examModal").style.display = "block"; } function closeModal() { document.getElementById("examModal").style.display = "none"; } function startDownload(fileUrl) { let progressContainer = document.querySelector('.progress'); let progressBar = progressContainer.querySelector('.progress-bar'); progressContainer.style.display = "block"; progressBar.style.width = "0%"; let time = 7; let step = 100 / time; let current = 0; let timer = setInterval(() => { current += step; progressBar.style.width = current + "%"; if (current >= 100) { clearInterval(timer); window.location.href = fileUrl; closeModal(); } }, 1000); } // إغلاق النافذة عند الضغط خارجها window.onclick = function(event) { let modal = document.getElementById("examModal"); if (event.target == modal) { closeModal(); } }
