Analytics Bot Robot
01ما هو Analytics Bot Robot؟
Analytics Bot Robot هو تصميم روبوت SVG مخصص للتحليلات والرسوم البيانية، ويعمل بكود HTML و CSS خفيف يمكن استخدامه داخل صفحات الويب والمقالات البرمجية.
ولمشاهدة نموذج آخر من مجموعة أكواد الروبوتات، يمكنك الانتقال إلى arcade-prince-robot.
02فكرة تصميم روبوت التحليلات
يعتمد التصميم على شاشة تحتوي على مخطط بياني وأعمدة بيانات بألوان مختلفة، ليعطي طابعًا مناسبًا للمحتوى المرتبط بالإحصائيات والبيانات ولوحات المعلومات.
03مميزات الكود
- تصميم SVG خفيف.
- يعمل باستخدام HTML و CSS.
- لا يحتاج إلى صور خارجية لتكوين الروبوت.
- يمكن تعديل الألوان والحجم مباشرة من الكود.
- مناسب لصفحات التحليلات والبيانات.
- يمكن استخدامه داخل بلوجر وصفحات HTML.
04المعاينة الحية للروبوت
05طريقة استخدام الكود
انسخ الكود من الصندوق الموجود بالأسفل، ثم ضعه داخل صفحة HTML أو داخل محرر HTML في بلوجر.
ويمكنك أيضًا مشاهدة friendly-assistant-robot ضمن نفس مجموعة أكواد الروبوتات.
06تعديل الألوان والحجم
يمكن تعديل ألوان الأعمدة والمخطط مباشرة من قيم fill وstroke داخل SVG. كما يمكن تغيير حجم الروبوت من قيم width وheight الموجودة في CSS.
07أين يمكن استخدام Analytics Bot Robot؟
- صفحات التحليلات.
- لوحات البيانات.
- المقالات التقنية.
- مشاريع البرمجة.
- واجهات الأدوات الرقمية.
- صفحات الأكواد الجاهزة.
ولمشاهدة نموذج إضافي من نفس المجموعة، يمكنك الانتقال إلى 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>Analytics 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">
<rect x="25" y="60" width="50" height="30" rx="4" fill="#1e293b" stroke="#06b6d4" stroke-width="2"/>
<rect x="30" y="65" width="8" height="20" fill="#10b981" stroke="white" stroke-width="1"/>
<rect x="42" y="65" width="8" height="15" fill="#ec4899" stroke="white" stroke-width="1"/>
<rect x="54" y="65" width="8" height="22" fill="#6366f1" stroke="white" stroke-width="1"/>
<rect x="66" y="65" width="8" height="18" fill="#f97316" stroke="white" stroke-width="1"/>
<rect x="45" y="82" width="10" height="4" fill="#ec4899"/>
<rect x="30" y="20" width="40" height="35" fill="#f8fafc" stroke="#1e293b" stroke-width="2"/>
<g stroke="#1e293b" stroke-width="0.5" opacity="0.3">
<line x1="30" y1="29" x2="70" y2="29"/>
<line x1="30" y1="38" x2="70" y2="38"/>
<line x1="30" y1="47" x2="70" y2="47"/>
<line x1="40" y1="20" x2="40" y2="55"/>
<line x1="50" y1="20" x2="50" y2="55"/>
<line x1="60" y1="20" x2="60" y2="55"/>
</g>
<polyline points="32,30 42,40 52,35 62,48 68,45" fill="none" stroke="#ec4899" stroke-width="3"/>
<circle cx="32" cy="30" r="2" fill="#ec4899"/>
<circle cx="42" cy="40" r="2" fill="#ec4899"/>
<circle cx="52" cy="35" r="2" fill="#ec4899"/>
<circle cx="62" cy="48" r="2" fill="#ec4899"/>
<circle cx="68" cy="45" r="2" fill="#ec4899"/>
</svg>
01هل يعمل الكود على بلوجر؟
نعم، يمكن وضعه داخل محرر HTML.
02هل يحتاج إلى مكتبات خارجية؟
لا، يعتمد التصميم على HTML و CSS و SVG.
03هل يمكن تعديل الرسم البياني؟
نعم، يمكن تعديل ألوان الأعمدة والخطوط والنقاط مباشرة من عناصر SVG.
.jpeg)
التعليقات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.