🛒 Shopping Bot Robot: روبوت تسوق SVG متحرك بكود HTML و CSS جاهز للنسخ
01ما هو Shopping Bot Robot؟
Shopping Bot Robot هو تصميم روبوت تسوق SVG خفيف يعمل مباشرة داخل المتصفح. يظهر بشكل بسيط ومناسب للمتاجر الإلكترونية وصفحات المنتجات ومشاريع البرمجة.
وإذا كنت تجمع أكثر من نموذج روبوت داخل مشروع واحد، يمكنك الانتقال أيضًا إلى friendly-assistant-robot لمشاهدة نموذج آخر من نفس فئة أكواد الروبوت.
يمكن استخدام هذا الروبوت داخل بلوجر أو ووردبريس أو أي صفحة HTML. الكود سهل النسخ والتعديل ولا يحتاج إلى أدوات خارجية.
02مميزات روبوت التسوق
- تصميم SVG خفيف وسريع التحميل.
- يعمل باستخدام HTML و CSS فقط.
- يحتوي على حركة طفو بسيطة.
- مناسب للمتاجر وصفحات المنتجات.
- سهل تعديل الألوان والحجم.
- لا يحتاج إلى JavaScript أو مكتبات خارجية.
03المعاينة الحية للروبوت
04طريقة استخدام الكود
انسخ الكود من الصندوق الموجود بالأسفل، ثم ضعه داخل صفحة HTML أو داخل أداة HTML/JavaScript في بلوجر. سيظهر روبوت التسوق مباشرة بدون إعدادات صعبة.
ولمقارنة هذا النموذج بروبوت آخر من المجموعة، يمكنك مشاهدة tech-bot-robot والانتقال بين الأكواد حسب التصميم الذي يناسب مشروعك.
05كيفية تعديل الألوان
يمكنك تغيير ألوان الروبوت من داخل عناصر SVG. القيم الموجودة في التصميم تشمل:
- #6366f1
- #f97316
- #06b6d4
- #ec4899
غيّر هذه الألوان لأي ألوان تناسب متجرك أو موقعك.
06الكود الكامل لروبوت Shopping Bot
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping 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;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
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" class="animate-float" role="img" aria-label="Shopping Bot Robot">
<rect x="30" y="60" width="40" height="30" rx="3" fill="#6366f1" stroke="white" stroke-width="2"/>
<rect x="35" y="65" width="30" height="20" fill="#1e293b" stroke="#06b6d4"/>
<line x1="42" y1="75" x2="48" y2="75" stroke="#ec4899" stroke-width="3" stroke-linecap="round"/>
<line x1="52" y1="75" x2="58" y2="75" stroke="#ec4899" stroke-width="3" stroke-linecap="round"/>
<path d="M44,70 Q50,74 56,70" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round"/>
<polygon points="25,55 75,55 70,15 30,15" fill="#f97316" stroke="white" stroke-width="2"/>
<path d="M32,55 Q40,45 48,55" fill="none" stroke="#1e293b" stroke-width="3"/>
<path d="M52,55 Q60,45 68,55" fill="none" stroke="#1e293b" stroke-width="3"/>
<circle cx="40" cy="58" r="5" fill="#ec4899"/>
<rect x="50" y="55" width="8" height="8" fill="#10b981"/>
</svg>
</div>
</body>
</html>07أين يمكن استخدام Shopping Bot Robot؟
- في المتاجر الإلكترونية.
- في صفحات المنتجات.
- في مقالات البرمجة.
- في صفحات الأكواد الجاهزة.
- في مشاريع HTML و CSS التعليمية.
- في بلوجر أو ووردبريس.
وإذا أردت استعراض نموذج روبوت إضافي من نفس المجموعة، يوجد أيضًا cute-bot-robot.
01هل يعمل الكود على بلوجر؟
نعم، يمكن إضافته داخل المقال من وضع HTML أو داخل أداة HTML/JavaScript.
02هل يحتاج الروبوت إلى JavaScript؟
لا، التصميم يعمل باستخدام HTML و CSS و SVG فقط.
03هل يمكن تغيير ألوان الروبوت؟
نعم، يمكنك تعديل ألوان الجسم والحقيبة والوجه من داخل كود SVG.
.jpeg)
التعليقات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.