وبکتاب

body{ background:#f6faf7; font-family:"IRANSans",sans-serif; } .page-wrapper{ max-width:1200px; width:95%; margin:35px auto; } .main-card{ background:#fff; border:1px solid #e7efe9; border-radius:30px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.05); } .hero{ background:linear-gradient( 135deg, #518d79, #6ca58f ); padding:30px; color:white; text-align:center; } .hero h2{ margin:0; font-weight:700; } .hero p{ margin-top:10px; opacity:.9; } .content-area{ padding:35px; } .section-card{ background:#fafdfb; border:1px solid #e4eee7; border-radius:22px; padding:25px; } .form-label{ display:block; margin-bottom:8px; font-weight:600; color:#41584f; } .form-control, .form-select{ border-radius:14px; border:1px solid #d6e5da; min-height:52px; transition:.25s; } .form-control:focus, .form-select:focus{ border-color:#518d79; box-shadow:0 0 0 4px rgba(81,141,121,.12); } textarea.form-control{ min-height:180px; } .upload-box{ background:#f8fbf9; border:2px dashed #b6debd; border-radius:20px; padding:30px; text-align:center; } .btn-green{ background:#518d79; color:white; border:none; border-radius:12px; padding:12px 28px; transition:.3s; } .btn-green:hover{ background:#447867; color:white; } #imagePreview{ display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:15px; margin-top:20px; } .preview-img{ width:100%; height:180px; object-fit:cover; border-radius:15px; box-shadow:0 4px 12px rgba(0,0,0,.08); } @media(max-width:768px){ .content-area{ padding:20px; } }

📖 افزودن فصل جدید

برای کتاب این یک تست است

document .getElementById("imageUpload") .addEventListener("change",function(event){ const preview = document.getElementById("imagePreview"); preview.innerHTML = ""; [...event.target.files].forEach(file => { const reader = new FileReader(); reader.onload = function(e){ const img = document.createElement("img"); img.src = e.target.result; img.className = "preview-img"; preview.appendChild(img); }; reader.readAsDataURL(file); }); });