⚙️ Settings Bot Robot: روبوت إعدادات SVG بكود HTML و CSS جاهز للنسخ
01ما هو Settings Bot Robot؟
Settings Bot Robot هو روبوت إعدادات تقني مصمم بعناصر SVG خفيفة. يمكن استخدامه داخل المواقع التقنية، صفحات الأدوات، مشاريع البرمجة، وصفحات الذكاء الاصطناعي.
الميزة الجميلة في هذا التصميم أنه لا يحتاج إلى صور كثيرة أو مكتبات خارجية. كل الشكل مبني بالكود، وهذا يجعله سريع التحميل وسهل التعديل. ولشرح أوسع عن استخدام هذا النوع من الأيقونات يمكنك مشاهدة svg-robot-icons-guide.
02مميزات روبوت الإعدادات
- تصميم SVG خفيف وسريع.
- يعمل باستخدام HTML و CSS فقط.
- مناسب لبلوجر ووردبريس وصفحات HTML.
- سهل تغيير الألوان والحجم.
- مناسب للمواقع التقنية ومشاريع البرمجة.
- لا يحتاج إلى JavaScript أو مكتبات خارجية.
03المعاينة الحية للروبوت
04طريقة استخدام الكود
انسخ الكود من الصندوق الموجود بالأسفل، ثم ضعه داخل صفحة HTML أو داخل أداة HTML/JavaScript في بلوجر. سيظهر الروبوت مباشرة بدون أي إعدادات صعبة.
ومن نفس مجموعة أكواد الروبوتات يمكنك مشاهدة analytics-bot-robot.
05كيفية تعديل ألوان الروبوت
يمكنك تغيير الألوان من داخل الكود عن طريق تعديل قيم fill وstroke الموجودة داخل SVG، ثم اختيار الألوان المناسبة لموقعك.
06الكود الكامل لروبوت الإعدادات
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings Bot Robot</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
}
.svg-container {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
svg {
width: 220px;
height: 220px;
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.2));
}
</style>
</head>
<body>
<div class="svg-container">
<svg viewBox="0 0 100 100" role="img" aria-label="Settings Bot Robot">
<polygon points="50,47 72,58 72,82 50,94 28,82 28,58" fill="#1e293b" stroke="#06b6d4" stroke-width="2"/>
<polygon points="50,50 70,60 70,80 50,90 30,80 30,60" fill="#1e293b" stroke="#06b6d4" stroke-width="2"/>
<g fill="#1e293b" stroke="#06b6d4" stroke-width="2">
<rect x="45" y="45" width="10" height="5"/>
<rect x="68" y="55" width="5" height="10"/>
<rect x="68" y="75" width="5" height="10"/>
<rect x="45" y="90" width="10" height="5"/>
<rect x="27" y="75" width="5" height="10"/>
<rect x="27" y="55" width="5" height="10"/>
</g>
<circle cx="50" cy="72" r="10" fill="#06b6d4" stroke="white" stroke-width="2"/>
<circle cx="50" cy="72" r="4" fill="#1e293b"/>
<line x1="25" y1="72" x2="35" y2="50" stroke="#f97316" stroke-width="6"/>
<line x1="75" y1="72" x2="65" y2="50" stroke="#f97316" stroke-width="6"/>
<polygon points="20,75 25,72 20,69" fill="#ec4899"/>
<polygon points="80,75 75,72 80,69" fill="#ec4899"/>
<rect x="35" y="20" width="30" height="28" rx="3" fill="#f8fafc" stroke="#1e293b" stroke-width="2"/>
<circle cx="42" cy="34" r="5" fill="#1e293b" stroke="#ec4899"/>
<rect x="41.5" y="34" width="1" height="4" fill="#ec4899"/>
<circle cx="50" cy="34" r="5" fill="#1e293b" stroke="#ec4899"/>
<rect x="49.5" y="34" width="1" height="4" fill="#ec4899"/>
<circle cx="58" cy="34" r="5" fill="#1e293b" stroke="#ec4899"/>
<rect x="57.5" y="34" width="1" height="4" fill="#ec4899"/>
</svg>
</div>
</body>
</html>07أين يمكن استخدام Settings Bot Robot؟
- في مقالات البرمجة.
- في صفحات الذكاء الاصطناعي.
- في مواقع الأدوات التقنية.
- في صفحات الهبوط.
- في مشاريع HTML و CSS التعليمية.
- في بلوجر أو ووردبريس.
ويمكنك أيضًا مشاهدة friendly-assistant-robot من نفس مجموعة الروبوتات.
08الخلاصة
Settings Bot Robot هو تصميم تقني بسيط وخفيف مناسب لأي موقع يريد إضافة لمسة برمجية جميلة. الكود جاهز للنسخ، سهل التعديل، ويعمل مباشرة داخل أغلب المواقع والمدونات.
01هل يعمل الروبوت على بلوجر؟
نعم، يمكنك إضافته داخل محرر HTML أو داخل أداة HTML/JavaScript.
02هل يحتاج الروبوت إلى JavaScript؟
لا، التصميم الأساسي يعمل باستخدام HTML و CSS و SVG فقط.
03هل يمكن تغيير الحجم؟
نعم، يمكنك تعديل قيمة width و height داخل CSS لتكبير أو تصغير الروبوت.
04هل يؤثر على سرعة الموقع؟
لا، لأنه تصميم SVG خفيف ولا يعتمد على صور كبيرة أو مكتبات خارجية.
.jpeg)
التعليقات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.