صندوق اكواد بزر توسيع وتصغير وادراج عنوان ووصف

✅ زر توسيع/تصغير الصندوق

✅ عنوان أعلى الصندوق

✅ وصف تحت العنوان

✅ الوضع الليلي/النهاري تلقائي وزر التبديل

✅ نسخ وتحميل الكود

توجد العديد من المدونات التي تهتم بشرح لغات البرمجة، مثل لغة HTML، حيث يتم استخدام أكواد طويلة جدًا داخل المقالات. ولذلك يكون من الضروري إيجاد طريقة لتقليل حجم الكود داخل الصفحة وجعلها أكثر تنظيمًا. في هذا المقال، سنستعرض طريقتين لإنشاء صندوق مخصص لإضافة أكواد HTML بشكل متناسق مع تقليل الحجم الكلي للمحتوى.

الطريقة : تصميم صندوق أكواد يحتوي على إطار يمكنك تخصيصه من حيث الارتفاع، العرض، سمك الإطار ولونه. كل التفاصيل المتعلقة بالألوان قابلة للتعديل. ما عليك سوى نسخ الكود الخاص بالصندوق واستخدامه عند إنشاء مشاركة جديدة. قم بالضغط على خيار HTML بجانب Compose في المحرر النصي، ثم لصق الكود داخل المحرر. بعد ذلك، اضغط على Compose لتجد الصندوق مُنشأ مسبقًا مع وجود عبارة (اكتب الكود هنا). قم بإزالة هذه العبارة واستبدالها بالكود الخاص بك. يمكنك متابعة الفيديو المرفق لشرح وعرض تجربة استخدام الكود بشكل عملي.

  صندوق اكواد بزر توسيع وتصغير وادراج عنوان ووصف

:root {
–bg-light: #f5f5f5;
–text-light: #333;
–bg-dark: #1e1e1e;
–text-dark: #dcdcdc;
–blue-light: #007BFF;
–blue-dark: #2d89ef;
–blue-dark-hover: #1b61c1;
}

.code-box {
position: relative;
border-radius: 12px;
padding: 20px;
margin: 30px auto;
font-family: ‘Courier New’, monospace;
direction: ltr;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
max-width: 800px;
background-color: var(–bg-light);
color: var(–text-light);
transition: background 0.3s, color 0.3s;
}

.code-box.dark {
background-color: var(–bg-dark);
color: var(–text-dark);
box-shadow: 0 8px 25px rgba(255,255,255,0.05);
}

.code-box h2 {
font-size: 22px;
margin-bottom: 8px;
color: inherit;
}

.code-box p.description {
font-size: 14px;
margin-bottom: 15px;
color: inherit;
}

.code-box textarea {
width: 100%;
min-height: 160px;
max-height: 600px;
background: transparent;
border: none;
color: inherit;
resize: none;
font-size: 15px;
line-height: 1.5em;
outline: none;
overflow: hidden;
white-space: pre;
transition: max-height 0.3s ease;
}

.code-box.expanded textarea {
max-height: 1000px;
}

.code-buttons {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top: 12px;
gap: 10px;
}

.code-buttons button {
padding: 10px 16px;
background-color: var(–blue-light);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: 0.3s ease-in-out;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.code-box.dark .code-buttons button {
background-color: var(–blue-dark);
}

.code-box.dark .code-buttons button:hover {
background-color: var(–blue-dark-hover);
}

.code-buttons button:hover {
background-color: #0056b3;
transform: translateY(-2px);
}

function autoResize(el) {
el.style.height = “auto”;
el.style.height = (el.scrollHeight) + “px”;
}

function copyCode() {
const code = document.getElementById(“myCode”);
code.select();
document.execCommand(“copy”);
alert(“✅ تم نسخ الكود!”);
}

function downloadCode() {
const code = document.getElementById(“myCode”).value;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.html”;
link.click();
}

function toggleTheme() {
const container = document.getElementById(“codeContainer”);
container.classList.toggle(“dark”);
localStorage.setItem(“preferredTheme”, container.classList.contains(“dark”) ? “dark” : “light”);
}

function toggleExpand() {
const container = document.getElementById(“codeContainer”);
container.classList.toggle(“expanded”);
}

window.addEventListener(“load”, () => {
const preferred = localStorage.getItem(“preferredTheme”);
const systemPrefersDark = window.matchMedia(‘(prefers-color-scheme: dark)’).matches;

if (preferred === “dark” || (!preferred && systemPrefersDark)) {
document.getElementById(“codeContainer”).classList.add(“dark”);
}

autoResize(document.getElementById(“myCode”));
});

المعاينة هو نفس الكود بالموضوع

.button-outline-blue {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
margin: 10px 8px;
font-size: 18px;
font-weight: bold;
color: #007BFF;
background-color: #ffffff;
border: 2px solid #007BFF;
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
}

.button-outline-blue i {
font-size: 20px;
}

.button-outline-blue:hover {
background-color: #f0f8ff;
}

.button-outline-blue:active {
color: #dc3545;
background-color: #ffe5e5;
border-color: #dc3545;
}

تحميل

تحميل اخر