🤖 Friendly Assistant Robot: روبوت مساعد SVG متحرك بكود HTML و CSS
01ما هو Friendly Assistant Robot؟
Friendly Assistant Robot هو عنصر تفاعلي مبني بتقنية SVG، صُمم ليضيف لمسة بصرية حديثة إلى واجهات المواقع والمدونات. يعتمد على رسوم متجهية عالية الدقة مع حركات سلسة، ويعمل بكود HTML و CSS خفيف.
ولمشاهدة نموذج آخر من نفس مجموعة أكواد الروبوتات، يمكنك الانتقال إلى delivery-bot-robot.
02تصميم SVG بجودة عالية
تم إنشاء الروبوت باستخدام رسومات SVG، مما يمنحه وضوحًا كاملًا عند التكبير أو التصغير دون فقدان الجودة. كما يسمح هذا النوع من الرسومات بتعديل الألوان والأشكال والعناصر بسهولة مع الحفاظ على حجم ملف صغير وسرعة تحميل ممتازة.
03الحركات والتأثيرات التفاعلية
يتضمن التصميم مجموعة من الحركات الهادئة مثل رمش العين وتأثير النبض والانتقالات السلسة، لتمنح الروبوت مظهرًا حيويًا يتناسب مع واجهات المستخدم الحديثة دون مبالغة في الحركة.
04المعاينة الحية للروبوت
05التوافق مع المواقع والمدونات
يمكن دمج الروبوت داخل صفحات HTML أو قوالب Blogger أو WordPress أو أي مشروع ويب آخر بسهولة.
ويمكنك أيضًا مشاهدة analytics-bot-robot ضمن نفس مجموعة أكواد الروبوتات.
06إمكانية التخصيص
يسمح هيكل التصميم بتعديل الألوان والحجم وسرعة الحركة وبعض التفاصيل البصرية مباشرة من الكود، مما يسهّل استخدامه ضمن هويات بصرية مختلفة دون الحاجة إلى إعادة تصميم العنصر بالكامل.
07استخدامات الروبوت
- صفحات الذكاء الاصطناعي.
- الدعم الفني.
- صفحات الهبوط.
- لوحات التحكم.
- المواقع التقنية.
- منصات التعليم.
ولمشاهدة روبوت إضافي من نفس المجموعة، يمكنك الانتقال إلى gaming-king-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>Friendly Assistant 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; }
@keyframes float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes blink { 0%,90%,100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-blink { animation: blink 4s infinite; transform-origin: center; }
.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.2)); }
</style>
</head>
<head>
<body>
<div class="svg-container">
<svg viewBox="0 0 100 100" class="animate-float">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#6366f1"/>
<stop offset="100%" stop-color="#8b5cf6"/>
</linearGradient>
</defs>
<rect x="30" y="55" width="40" height="35" rx="5" fill="url(#grad1)" stroke="white" stroke-width="2"/>
<circle cx="42" cy="72" r="6" fill="white" stroke="#1e293b" stroke-width="1.5" class="animate-blink"/>
<circle cx="58" cy="72" r="6" fill="white" stroke="#1e293b" stroke-width="1.5" class="animate-blink"/>
<circle cx="42" cy="72" r="3" fill="#1e293b"/>
<circle cx="58" cy="72" r="3" fill="#1e293b"/>
<line x1="50" y1="90" x2="50" y2="98" stroke="#1e293b" stroke-width="3"/>
<circle cx="50" cy="98" r="3" fill="#ec4899" stroke="white" stroke-width="1.5" class="animate-pulse"/>
<rect x="35" y="25" width="30" height="30" rx="3" fill="#8b5cf6" stroke="white" stroke-width="2"/>
<path d="M50,40 L45,45 L42,40 L45,35 L50,38 L55,35 L58,40 L55,45 Z" fill="#ec4899" stroke="white" stroke-width="1"/>
<rect x="20" y="35" width="12" height="8" rx="2" fill="#6366f1" stroke="white" stroke-width="1.5"/>
<rect x="68" y="35" width="12" height="8" rx="2" fill="#6366f1" stroke="white" stroke-width="1.5"/>
<circle cx="40" cy="15" r="8" fill="#1e293b" stroke="white" stroke-width="2"/>
<circle cx="60" cy="15" r="8" fill="#1e293b" stroke="white" stroke-width="2"/>
</svg>
01هل يعمل الكود على بلوجر؟
نعم، يمكن وضعه داخل محرر HTML في المقال أو داخل أداة HTML/JavaScript.
02هل يحتاج الروبوت إلى مكتبات خارجية؟
لا، يعتمد التصميم على HTML و CSS و SVG.
03هل يمكن تعديل ألوان وحركة الروبوت؟
نعم، يمكن تعديل قيم الألوان وسرعة الحركات مباشرة من الكود.
.jpeg)
التعليقات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.