🤖 Tech Bot Robot: روبوت تقني متحرك بكود HTML و CSS جاهز للنسخ
01ما هو Tech Bot Robot؟
Tech Bot Robot هو تصميم روبوت رقمي بسيط ومميز يعمل مباشرة داخل المتصفح. لا يحتاج إلى صور كثيرة، ولا مكتبات ثقيلة، ولا ملفات JavaScript كبيرة. كل شيء مبني باستخدام SVG و CSS.
ولمشاهدة نموذج آخر من نفس مجموعة أكواد الروبوتات، يمكنك الانتقال إلى cute-bot-robot.
هذا النوع من التصاميم مناسب جدًا للمواقع التي تتحدث عن البرمجة، الذكاء الاصطناعي، أدوات المطورين، الأمن السيبراني، التصميم الرقمي، وصفحات المشاريع التقنية.
02لماذا هذا الروبوت مفيد لموقعك؟
وجود عنصر بصري مثل روبوت تقني متحرك يجعل الصفحة أكثر حياة. الزائر لا يرى نصًا فقط، بل يرى شكلًا متفاعلًا يعطي إحساسًا بالابتكار والتقنية.
- تصميم خفيف لا يبطئ الصفحة.
- مبني بكود HTML و CSS فقط.
- يعمل على بلوجر، ووردبريس، وصفحات HTML.
- سهل التعديل وتغيير الألوان.
- مناسب للمواقع التقنية ومشاريع الذكاء الاصطناعي.
- لا يحتاج إلى تحميل صور خارجية كثيرة.
03المعاينة الحية للروبوت التقني
04طريقة استخدام كود Tech Bot Robot
استخدام الكود بسيط جدًا. انسخ الكود الموجود في الصندوق، ثم ضعه داخل صفحة HTML، أو داخل أداة HTML في بلوجر، أو داخل محرر مخصص في ووردبريس.
ويمكنك أيضًا مشاهدة analytics-bot-robot ضمن نفس مجموعة أكواد الروبوتات.
بعد الإضافة، سيظهر الروبوت مباشرة في الصفحة. لا تحتاج إلى رفع صور أو تحميل ملفات إضافية.
05كيف تعدل ألوان الروبوت؟
تستطيع تعديل ألوان الروبوت من خلال أكواد الألوان داخل عناصر SVG. اللون الأزرق المستخدم هو #06b6d4، واللون الوردي المستخدم في النبض هو #ec4899.
06كيف تغير حجم الروبوت؟
لتغيير حجم الروبوت، ابحث داخل الكود عن width: 220px; وheight: 220px; ثم غير الرقم إلى الحجم الذي تريده.
07أين يمكن استخدام هذا التصميم؟
- مقالات البرمجة.
- صفحات الذكاء الاصطناعي.
- مواقع أدوات المطورين.
- صفحات الهبوط التقنية.
- مشاريع HTML و CSS للمبتدئين.
- أقسام تحميل الأكواد المجانية.
ولمشاهدة نموذج إضافي من نفس المجموعة، يمكنك الانتقال إلى delivery-bot-robot.
08الكود المصدري الكامل للروبوت
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tech Bot Robot SVG</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;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
.animate-pulse {
animation: pulse 2s ease-in-out infinite;
}
svg {
width: 220px;
height: 220px;
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25));
}
</style>
</head>
<body>
<div class="svg-container">
<svg viewBox="0 0 100 100" role="img" aria-label="Tech Bot Robot">
<polygon points="50,50 75,65 75,90 50,100 25,90 25,65" fill="#06b6d4" stroke="white" stroke-width="2.5" transform="translate(0, -25)"/>
<rect x="35" y="70" width="30" height="10" fill="#1e293b" stroke="#06b6d4" stroke-width="2"/>
<rect x="35" y="72" width="30" height="2" fill="#ec4899" class="animate-pulse"/>
<polygon points="40,50 60,50 65,25 35,25" fill="#1e293b" stroke="#06b6d4" stroke-width="2"/>
<circle cx="50" cy="37" r="8" fill="#ec4899" stroke="white" stroke-width="2" class="animate-pulse"/>
<line x1="35" y1="45" x2="20" y2="35" stroke="#06b6d4" stroke-width="4"/>
<line x1="65" y1="45" x2="80" y2="35" stroke="#06b6d4" stroke-width="4"/>
<circle cx="20" cy="35" r="4" fill="#f97316" stroke="white"/>
<circle cx="80" cy="35" r="4" fill="#f97316" stroke="white"/>
<rect x="30" y="10" width="40" height="12" fill="#1e293b" stroke="#06b6d4" stroke-width="2"/>
</svg>
</div>
</body>
</html>01هل يعمل الكود على بلوجر؟
نعم، يعمل الكود على بلوجر ويمكن وضعه داخل محرر HTML.
02هل يحتاج الروبوت إلى مكتبات خارجية؟
لا. التصميم يعمل باستخدام HTML و CSS و SVG فقط.
03هل يمكن تغيير ألوان الروبوت؟
نعم، من خلال قيم fill و stroke الموجودة داخل عناصر SVG.
.jpeg)
التعليقات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.