🛒 Shopping Bot Robot: روبوت تسوق SVG متحرك بكود HTML و CSS جاهز للنسخ

مرحباً بكم يا غوالي في مختبر التميّز Wowolabs 🚀

إذا كنت تبحث عن روبوت تسوق بسيط وجذاب لموقعك أو مشروعك، فهذا التصميم مناسب لك. Shopping Bot Robot يعطي الصفحة لمسة تفاعلية جميلة.

التصميم مبني باستخدام HTML و CSS و SVG فقط، بدون مكتبات خارجية وبدون ملفات ثقيلة.

Shopping Bot Robot SVG روبوت تسوق متحرك بكود HTML CSS

ما هو Shopping Bot Robot؟

Shopping Bot Robot هو تصميم روبوت تسوق SVG خفيف يعمل مباشرة داخل المتصفح. يظهر بشكل بسيط ومناسب للمتاجر الإلكترونية وصفحات المنتجات ومشاريع البرمجة.

يمكن استخدام هذا الروبوت داخل بلوجر أو ووردبريس أو أي صفحة HTML. الكود سهل النسخ والتعديل ولا يحتاج إلى أدوات خارجية.

مميزات روبوت التسوق

تصميم SVG خفيف وسريع التحميل.
يعمل باستخدام HTML و CSS فقط.
يحتوي على حركة طفو بسيطة.
مناسب للمتاجر وصفحات المنتجات.
سهل تعديل الألوان والحجم.
لا يحتاج إلى JavaScript أو مكتبات خارجية.

المعاينة الحية للروبوت

👁️ معاينة Shopping Bot Robot

طريقة استخدام الكود

انسخ الكود من الصندوق الموجود بالأسفل، ثم ضعه داخل صفحة HTML أو داخل أداة HTML/JavaScript في بلوجر. سيظهر روبوت التسوق مباشرة بدون إعدادات صعبة.

كيفية تعديل الألوان

يمكنك تغيير ألوان الروبوت من داخل عناصر SVG. مثلًا تستطيع تعديل هذه القيم:

fill="#6366f1"
fill="#f97316"
stroke="#06b6d4"
fill="#ec4899"

غيّر هذه الألوان لأي ألوان تناسب متجرك أو موقعك.

الكود الكامل لروبوت Shopping Bot

📄 كود Shopping Bot Robot جاهز للنسخ

<!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>

أين يمكن استخدام Shopping Bot Robot؟

في المتاجر الإلكترونية.
في صفحات المنتجات.
في مقالات البرمجة.
في صفحات الأكواد الجاهزة.
في مشاريع HTML و CSS التعليمية.
في بلوجر أو ووردبريس.

أسئلة شائعة

هل يعمل الكود على بلوجر؟

نعم، يمكن إضافته داخل المقال من وضع HTML أو داخل أداة HTML/JavaScript.

هل يحتاج الروبوت إلى JavaScript؟

لا، التصميم يعمل باستخدام HTML و CSS و SVG فقط.

هل يمكن تغيير ألوان الروبوت؟

نعم، يمكنك تعديل ألوان الجسم والحقيبة والوجه من داخل كود SVG.

هل التصميم مناسب للهاتف؟

نعم، التصميم خفيف ويظهر بشكل جيد على الشاشات الصغيرة والكبيرة.

الخلاصة

Shopping Bot Robot هو روبوت SVG بسيط وخفيف مناسب للمتاجر وصفحات المنتجات ومقالات البرمجة. الكود جاهز للنسخ، سهل التعديل، ولا يحتاج إلى مكتبات خارجية.

wowo