<!--انسخ الكود من هنا وضعه في صفحة جديدة باسم: مولد أدوات المقال--> <style> @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap'); .sc-gen-wrapper { font-family: 'Tajawal', sans-serif; direction: rtl; text-align: right; color: #1e293b; background: #f8fafc; padding: 30px; border-radius: 20px; border: 1px solid #e2e8f0; } .gen-header { text-align: center; margin-bottom: 40px; border-bottom: 2px dashed #cbd5e1; padding-bottom: 20px; } .gen-header h1 { font-size: 32px; font-weight: 900; color: #0f172a; margin-bottom: 10px; } .gen-header p { font-size: 16px; color: #64748b; } /* كارت الأداة */ .tool-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 25px; margin-bottom: 40px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); } .tool-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #f1f5f9; } .tool-icon { font-size: 24px; background: #f1f5f9; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .tool-title { font-size: 20px; font-weight: 800; color: #334155; margin: 0; } /* الشبكة */ .io-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } @media (max-width: 768px) { .io-grid { grid-template-columns: 1fr; } } /* المدخلات */ .input-group { margin-bottom: 15px; } .input-group label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 14px; color: #475569; } .input-group input, .input-group select, .input-group textarea { width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-family: inherit; font-size: 14px; transition: 0.3s; outline: none; box-sizing: border-box; } .input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: #3b82f6; } /* المعاينة */ .preview-area { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 8px; padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 100px; margin-bottom: 20px; } .preview-label { display: block; font-weight: 700; margin-bottom: 10px; color: #64748b; font-size: 13px; } /* الكود الناتج */ .code-output { position: relative; background: #0f172a; border-radius: 8px; padding: 15px; direction: ltr; text-align: left; } .code-text { color: #38bdf8; font-family: monospace; font-size: 13px; white-space: pre-wrap; word-break: break-all; } .copy-btn { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.1); color: #fff; border: none; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-family: 'Tajawal'; font-size: 12px; transition: 0.2s; } .copy-btn:hover { background: rgba(255,255,255,0.2); } /* --- تنسيقات المعاينة (نفس القالب) --- */ /* Buttons */ .pro-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 28px; border-radius: 8px; font-weight: 700; text-decoration: none; border: 2px solid transparent; } .btn-primary { background-color: #3a7fff; color: #fff; } .btn-secondary { background-color: transparent; border-color: #eee; color: #34495e; } .btn-download { background-color: #10b981; color: #fff; } .btn-preview { background-color: #f59e0b; color: #fff; } /* Alerts */ .alert-box { padding: 15px 20px 15px 50px; border-radius: 12px; border: 1px solid #eee; position: relative; width: 100%; } .alert-box::before { content:''; position: absolute; right:0; top:0; bottom:0; width:6px; border-radius:0 12px 12px 0; } .alert-info { background: rgba(56, 189, 248, 0.1); } .alert-info::before { background: #38bdf8; } .alert-success { background: rgba(74, 222, 128, 0.1); } .alert-success::before { background: #4ade80; } .alert-warning { background: rgba(251, 191, 36, 0.1); } .alert-warning::before { background: #fbbf24; } .alert-error { background: rgba(248, 113, 113, 0.1); } .alert-error::before { background: #f87171; } </style> <div class="sc-gen-wrapper"> <div class="gen-header"> <h1>مولد أدوات المقال 🛠️</h1> <p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEg1UWaxltggYPPz1GA3zqzdvkul0JxmGfIxO_kx91Fh9zwza_xYWAn_eLrURRuOurYBlxTJxixCvevA-XoOTYFw5kRxxuh8fZw0DSBMOuyc6X4ASUvpkA2OQY_L8ijSiVt89HcunUT1Y3_wa0dc42_WE3R8hEfGGpCQ-HWc76ITEUHH-kfFYPG4MXvzeTo" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="720" data-original-width="1280" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEg1UWaxltggYPPz1GA3zqzdvkul0JxmGfIxO_kx91Fh9zwza_xYWAn_eLrURRuOurYBlxTJxixCvevA-XoOTYFw5kRxxuh8fZw0DSBMOuyc6X4ASUvpkA2OQY_L8ijSiVt89HcunUT1Y3_wa0dc42_WE3R8hEfGGpCQ-HWc76ITEUHH-kfFYPG4MXvzeTo=s16000-rw" /></a></div><p></p><p>أداة ذكية لإنشاء الأزرار، الصناديق، والأكواد داخل مقالاتك دون الحاجة لكتابة أي كود برمجي.</p> </div> <!--1. مولد الأزرار--> <div class="tool-card"> <div class="tool-head"> <div class="tool-icon">🔗</div> <h2 class="tool-title">مولد الأزرار (Buttons)</h2> </div> <div class="io-grid"> <!--Inputs--> <div> <div class="input-group"> <label>نص الزر:</label> <input id="btnText" oninput="updateBtn()" type="text" value="تحميل الملف" /> </div> <div class="input-group"> <label>رابط الزر (URL):</label> <input id="btnUrl" oninput="updateBtn()" type="text" value="#" /> </div> <div class="input-group"> <label>نوع الزر:</label> <select id="btnStyle" onchange="updateBtn()"> <option value="btn-primary">أزرق (أساسي)</option> <option value="btn-secondary">شفاف (ثانوي)</option> <option value="btn-download">أخضر (تحميل)</option> <option value="btn-preview">برتقالي (معاينة)</option> </select> </div> </div> <!--Output--> <div> <span class="preview-label">المعاينة الحية:</span> <div class="preview-area"> <a class="pro-btn btn-primary" href="#" id="btnPreview" onclick="return false;">تحميل الملف</a> </div> <div class="code-output"> <button class="copy-btn" onclick="copyCode('btnCode', this)">نسخ</button> <div class="code-text" id="btnCode"></div> </div> </div> </div> </div> <!--2. مولد التنبيهات--> <div class="tool-card"> <div class="tool-head"> <div class="tool-icon">🔔</div> <h2 class="tool-title">مولد صناديق التنبيه (Alerts)</h2> </div> <div class="io-grid"> <!--Inputs--> <div> <div class="input-group"> <label>نص الرسالة:</label> <textarea id="alertText" oninput="updateAlert()" rows="3">يرجى الانتباه لهذه الملاحظة المهمة.</textarea> </div> <div class="input-group"> <label>نوع التنبيه:</label> <select id="alertStyle" onchange="updateAlert()"> <option value="alert-info">معلومات (أزرق)</option> <option value="alert-success">نجاح (أخضر)</option> <option value="alert-warning">تحذير (أصفر)</option> <option value="alert-error">خطأ (أحمر)</option> </select> </div> </div> <!--Output--> <div> <span class="preview-label">المعاينة الحية:</span> <div class="preview-area" style="display: block;"> <div class="alert-box alert-info" id="alertPreview">يرجى الانتباه لهذه الملاحظة المهمة.</div> </div> <div class="code-output"> <button class="copy-btn" onclick="copyCode('alertCode', this)">نسخ</button> <div class="code-text" id="alertCode"></div> </div> </div> </div> </div> <!--3. مولد صندوق الكود--> <div class="tool-card"> <div class="tool-head"> <div class="tool-icon">code</div> <h2 class="tool-title">مولد صندوق الأكواد</h2> </div> <p style="color: #64748b; font-size: 14px; margin-bottom: 15px;">سيقوم القالب تلقائياً بإضافة أزرار (نسخ، معاينة، تحميل) لهذا الصندوق.</p> <div class="io-grid"> <!--Inputs--> <div> <div class="input-group"> <label>عنوان اللغة (HTML, CSS, JS):</label> <input id="codeLang" oninput="updateCodeBox()" type="text" value="HTML" /> </div> <div class="input-group"> <label>ضع الكود البرمجي هنا:</label> <textarea id="codeContent" oninput="updateCodeBox()" rows="5" style="direction: ltr; font-family: monospace; text-align: left;"><h1>Hello World</h1></textarea> </div> </div> <!--Output--> <div> <span class="preview-label">الكود النهائي (للمقال):</span> <div class="code-output" style="height: 100%;"> <button class="copy-btn" onclick="copyCode('boxCode', this)">نسخ</button> <div class="code-text" id="boxCode"></div> </div> </div> </div> </div> </div> <script> // 1. تحديث الأزرار function updateBtn() { const text = document.getElementById('btnText').value; const url = document.getElementById('btnUrl').value; const style = document.getElementById('btnStyle').value; // تحديث المعاينة const preview = document.getElementById('btnPreview'); preview.className = `pro-btn ${style}`; preview.innerText = text; // تحديث الكود const code = `<a href="${url}" class="pro-btn ${style}" target="_blank">${text}</a>`; document.getElementById('btnCode').innerText = code; } // 2. تحديث التنبيهات function updateAlert() { const text = document.getElementById('alertText').value; const style = document.getElementById('alertStyle').value; // تحديث المعاينة const preview = document.getElementById('alertPreview'); preview.className = `alert-box ${style}`; preview.innerText = text; // تحديث الكود const code = `<div class="alert-box ${style}">${text}</div>`; document.getElementById('alertCode').innerText = code; } // 3. تحديث صندوق الكود function updateCodeBox() { const lang = document.getElementById('codeLang').value; const content = document.getElementById('codeContent').value; // الهروب من الرموز (Escaping) const escapedContent = content .replace(/&/g, "&amp;") .replace(/</g, "&lt;") .replace(/>/g, "&gt;"); const code = `<div class="custom-code-box"> <div class="custom-code-box-header"> <span class="code-box-title">${lang}</span> </div> <pre>${escapedContent}</pre> </div>`; document.getElementById('boxCode').innerText = code; } // دالة النسخ function copyCode(elementId, btn) { const text = document.getElementById(elementId).innerText; navigator.clipboard.writeText(text).then(() => { const originalText = btn.innerText; btn.innerText = "تم النسخ!"; btn.style.background = "#10b981"; setTimeout(() => { btn.innerText = originalText; btn.style.background = "rgba(255,255,255,0.1)"; }, 2000); }); } // تشغيل مبدئي updateBtn(); updateAlert(); updateCodeBox(); </script>