بناء الصفحة الرئيسية
بواسطة morbah |
1. اختر التصميم:
2. الإعدادات:
3. الكود الناتج:
<!--انسخ هذا الكود الشامل (31 شكل) وضعه في صفحة الشرح-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap');
.builder-wrapper {
font-family: 'Tajawal', sans-serif;
direction: rtl;
text-align: right;
color: #1e293b;
background: #f8fafc;
padding: 30px;
border-radius: 20px;
border: 1px solid #e2e8f0;
}
.builder-header { text-align: center; margin-bottom: 50px; }
.builder-header h1 { font-size: 32px; font-weight: 900; color: #0f172a; margin-bottom: 10px; }
.builder-header p { font-size: 16px; color: #64748b; }
/* شبكة الأشكال */
.styles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 40px;
}
.style-card {
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 10px;
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.style-card:hover { transform: translateY(-3px); border-color: #94a3b8; }
.style-card.selected { border-color: #3b82f6; background-color: #eff6ff; box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }
.style-name { font-weight: 700; font-size: 13px; text-align: center; margin-top: 8px; color: #334155; }
/* --- المصغرات (Miniatures) --- */
.mini { height: 80px; background: #f1f5f9; border-radius: 6px; overflow: hidden; pointer-events: none; padding: 4px; box-sizing: border-box; }
/* تعريفات سريعة للمعاينة */
.m-flex { display: flex; gap: 3px; height: 100%; }
.m-grid { display: grid; gap: 3px; height: 100%; }
.m-col { display: flex; flex-direction: column; gap: 3px; height: 100%; }
.bg-blue { background: #3b82f6; } .bg-red { background: #ef4444; } .bg-green { background: #10b981; } .bg-dark { background: #1e293b; } .bg-white { background: #fff; border: 1px solid #e2e8f0; } .bg-gray { background: #cbd5e1; }
.rad { border-radius: 3px; } .circle { border-radius: 50%; }
/* لوحة التحكم */
.controls-panel {
background: #fff; padding: 20px; border-radius: 12px;
border: 1px solid #e2e8f0; display: grid; gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.form-group label { display: block; margin-bottom: 5px; font-weight: 700; font-size: 13px; }
.form-group input { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; }
/* الكود */
.result-area { margin-top: 30px; background: #0f172a; padding: 15px; border-radius: 8px; color: #38bdf8; font-family: monospace; direction: ltr; position: relative; }
.copy-btn { position: absolute; top: 10px; right: 10px; background: #3b82f6; color: #fff; border: none; padding: 5px 15px; border-radius: 4px; cursor: pointer; font-family: 'Tajawal'; }
</style>
<div class="builder-wrapper">
<div class="builder-header">
<h1>مولد الأكواد الشامل (31 شكل) 🚀</h1>
<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiDeZV_mHZs-NlIrXBJNH3kMKL31xo_3PR_eslv1amtJoFDD1n33RQfC5CH0g3ZcaRdO65NdiRK-RLMl_vkmClc1tO0ze6RM7Ae3r9ckQwvr5aggDomBxeBLgg6Dc5PXS8erdA7tSu8DAI1oYpaTWD3Xhpt1IEhFWOLWQ8ata3pXdHZbOTIEoTpSxeIIcQ" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="720" data-original-width="1280" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEiDeZV_mHZs-NlIrXBJNH3kMKL31xo_3PR_eslv1amtJoFDD1n33RQfC5CH0g3ZcaRdO65NdiRK-RLMl_vkmClc1tO0ze6RM7Ae3r9ckQwvr5aggDomBxeBLgg6Dc5PXS8erdA7tSu8DAI1oYpaTWD3Xhpt1IEhFWOLWQ8ata3pXdHZbOTIEoTpSxeIIcQ=s16000-rw" /></a></div><br /><p></p><p>مكتبة كاملة لتصميم موقعك! اختر، خصص، وانسخ.</p>
</div>
<h3>1. اختر التصميم:</h3>
<div class="styles-grid" id="styleSelector">
<!--1. Hero Slider-->
<div class="style-card selected" data-min="3" data-value="hero-slider">
<div class="mini"><div class="m-flex"><div class="bg-blue rad" style="flex: 2 1 0%;"></div><div class="m-col" style="flex: 1 1 0%;"><div class="bg-white rad" style="flex: 1 1 0%;"></div><div class="bg-white rad" style="flex: 1 1 0%;"></div></div></div></div>
<div class="style-name">سلايدر البطل</div>
</div>
<!--2. News Hero-->
<div class="style-card" data-min="5" data-value="news-hero">
<div class="mini"><div class="m-grid" style="grid-template-columns: 2fr 1fr;"><div class="bg-red rad"></div><div class="m-col"><div class="bg-white rad" style="flex: 1 1 0%;"></div><div class="bg-white rad" style="flex: 1 1 0%;"></div></div></div></div>
<div class="style-name">سلايدر إخباري</div>
</div>
<!--3. 3D Hero-->
<div class="style-card" data-min="1" data-value="hero-3d">
<div class="mini" style="align-items: center; background: rgb(30, 41, 59); display: flex; justify-content: center;"><div class="bg-red rad" style="height: 50px; transform: perspective(100px) rotateY(-15deg); width: 30px;"></div></div>
<div class="style-name">سلايدر عائم (3D)</div>
</div>
<!--4. Video Grid-->
<div class="style-card" data-min="5" data-value="video-grid">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 1fr;"><div class="bg-dark rad" style="align-items: center; color: white; display: flex; font-size: 10px; justify-content: center; position: relative;">▶</div><div class="m-grid" style="grid-template-rows: 1fr 1fr;"><div class="bg-white rad"></div><div class="bg-white rad"></div></div></div></div>
<div class="style-name">شبكة فيديو</div>
</div>
<!--5. Apps Grid-->
<div class="style-card" data-min="6" data-value="apps-grid">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;"><div class="bg-white rad"></div><div class="bg-white rad"></div><div class="bg-white rad"></div><div class="bg-white rad"></div></div></div>
<div class="style-name">شبكة تطبيقات</div>
</div>
<!--6. Carousel-->
<div class="style-card" data-min="4" data-value="carousel">
<div class="mini"><div class="m-flex" style="overflow: hidden;"><div class="bg-white rad" style="border-top: 10px solid rgb(139, 92, 246); height: 100%; min-width: 40px;"></div><div class="bg-white rad" style="border-top: 10px solid rgb(139, 92, 246); height: 100%; min-width: 40px;"></div><div class="bg-white rad" style="border-top: 10px solid rgb(139, 92, 246); height: 100%; min-width: 40px;"></div></div></div>
<div class="style-name">سلايدر متحرك</div>
</div>
<!--7. Story Reel-->
<div class="style-card" data-min="6" data-value="story-reel">
<div class="mini"><div class="m-flex" style="align-items: center; justify-content: center;"><div class="bg-white circle" style="border: 2px solid rgb(239, 68, 68); height: 25px; width: 25px;"></div><div class="bg-white circle" style="border: 2px solid rgb(239, 68, 68); height: 25px; width: 25px;"></div></div></div>
<div class="style-name">شريط قصص</div>
</div>
<!--8. Grid 3 Col-->
<div class="style-card" data-min="3" data-value="grid-3-col">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 1fr 1fr;"><div class="bg-white rad"></div><div class="bg-white rad"></div><div class="bg-white rad"></div></div></div>
<div class="style-name">شبكة (3 أعمدة)</div>
</div>
<!--9. Atlas Slider-->
<div class="style-card" data-min="5" data-value="atlas-slider">
<div class="mini"><div class="m-flex" style="align-items: center; justify-content: center;"><div class="bg-dark rad" style="height: 40px; opacity: 0.5; width: 20px;"></div><div class="bg-red rad" style="box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px; height: 50px; width: 30px; z-index: 2;"></div><div class="bg-dark rad" style="height: 40px; opacity: 0.5; width: 20px;"></div></div></div>
<div class="style-name">سلايدر أطلس</div>
</div>
<!--10. Magazine 1+3-->
<div class="style-card" data-min="4" data-value="magazine-1-3">
<div class="mini"><div class="m-grid" style="grid-template-columns: repeat(3,1fr);"><div class="bg-blue rad" style="grid-column: 1 / 4; height: 35px;"></div><div class="bg-white rad"></div><div class="bg-white rad"></div><div class="bg-white rad"></div></div></div>
<div class="style-name">مجلة 1+3</div>
</div>
<!--11. Vertical Ticker-->
<div class="style-card" data-min="4" data-value="vertical-ticker">
<div class="mini"><div class="m-flex"><div class="bg-red rad" style="flex: 1 1 0%;"></div><div class="bg-white rad" style="display: flex; flex-direction: column; flex: 1 1 0%; gap: 2px;"><div style="border-bottom: 1px solid rgb(238, 238, 238); flex: 1 1 0%;"></div><div style="border-bottom: 1px solid rgb(238, 238, 238); flex: 1 1 0%;"></div></div></div></div>
<div class="style-name">شريط عمودي</div>
</div>
<!--12. Filter Grid-->
<div class="style-card" data-min="6" data-value="filter-grid">
<div class="mini"><div class="m-col"><div style="display: flex; gap: 2px; justify-content: center;"><span class="bg-blue rad" style="height: 3px; width: 15px;"></span><span class="bg-gray rad" style="height: 3px; width: 10px;"></span></div><div class="m-grid" style="grid-template-columns: 1fr 1fr 1fr;"><div class="bg-white rad"></div><div class="bg-white rad"></div><div class="bg-white rad"></div></div></div></div>
<div class="style-name">معرض بفلتر</div>
</div>
<!--13. Dual Column-->
<div class="style-card" data-min="4" data-value="dual-column-posts">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 1fr;"><div class="m-col"><div class="bg-gray rad" style="height: 30px;"></div><div class="bg-white rad" style="flex: 1 1 0%;"></div></div><div class="m-col"><div class="bg-gray rad" style="height: 30px;"></div><div class="bg-white rad" style="flex: 1 1 0%;"></div></div></div></div>
<div class="style-name">عمودين مزدوج</div>
</div>
<!--14. Pinned List-->
<div class="style-card" data-min="4" data-value="magazine-pinned-list">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1.5fr 1fr;"><div class="bg-green rad"></div><div class="m-col"><div class="bg-white rad" style="flex: 1 1 0%;"></div><div class="bg-white rad" style="flex: 1 1 0%;"></div></div></div></div>
<div class="style-name">مثبت + قائمة</div>
</div>
<!--15. Grid Slider-->
<div class="style-card" data-min="3" data-value="grid-slider">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 2fr;"><div class="m-col"><div class="bg-white rad" style="flex: 1 1 0%;"></div><div class="bg-white rad" style="flex: 1 1 0%;"></div></div><div class="bg-red rad"></div></div></div>
<div class="style-name">سلايدر + قائمة</div>
</div>
<!--16. Numbered Grid-->
<div class="style-card" data-min="3" data-value="numbered-grid">
<div class="mini"><div class="m-col"><div style="align-items: center; display: flex; gap: 3px;"><span style="font-size: 10px; font-weight: bold;">1</span><div class="bg-white rad" style="flex: 1 1 0%; height: 15px;"></div></div><div style="align-items: center; display: flex; gap: 3px;"><span style="font-size: 10px; font-weight: bold;">2</span><div class="bg-white rad" style="flex: 1 1 0%; height: 15px;"></div></div></div></div>
<div class="style-name">قائمة مرقمة</div>
</div>
<!--17. Overlapping-->
<div class="style-card" data-min="3" data-value="overlapping-grid">
<div class="mini" style="position: relative;"><div class="bg-blue rad" style="height: 60%; left: 5px; position: absolute; top: 5px; width: 60%;"></div><div class="bg-red rad" style="bottom: 5px; height: 50%; position: absolute; right: 5px; width: 50%; z-index: 2;"></div></div>
<div class="style-name">شبكة متداخلة</div>
</div>
<!--18. Comparison-->
<div class="style-card" data-min="2" data-value="comparison">
<div class="mini"><div class="m-grid" style="align-items: center; grid-template-columns: 1fr 1fr;"><div class="bg-white rad" style="height: 80%;"></div><div class="bg-white rad" style="height: 80%;"></div><div style="background: red; border-radius: 50%; color: white; font-size: 8px; left: 50%; padding: 1px; position: absolute; top: 50%; transform: translate(-50%, -50%);">VS</div></div></div>
<div class="style-name">مقارنة VS</div>
</div>
<!--19. Magazine 1-->
<div class="style-card" data-min="5" data-value="magazine-1">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;"><div class="bg-blue rad" style="grid-column: 1 / 3;"></div><div class="bg-white rad"></div><div class="bg-white rad"></div></div></div>
<div class="style-name">مجلة كلاسيك</div>
</div>
<!--20. Random Grid-->
<div class="style-card" data-min="5" data-value="random-grid">
<div class="mini"><div class="m-grid" style="grid-template-columns: repeat(3,1fr);"><div class="bg-gray rad"></div><div class="bg-dark rad"></div><div class="bg-gray rad"></div><div class="bg-dark rad"></div><div class="bg-gray rad"></div><div class="bg-dark rad"></div></div></div>
<div class="style-name">شبكة عشوائية</div>
</div>
<!--21. Store Games-->
<div class="style-card" data-min="4" data-value="store-games">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 1fr;"><div class="bg-white rad" style="padding: 2px; text-align: center;"><div class="bg-blue rad" style="height: 20px; margin: 0px auto; width: 20px;"></div></div><div class="bg-white rad" style="padding: 2px; text-align: center;"><div class="bg-blue rad" style="height: 20px; margin: 0px auto; width: 20px;"></div></div></div></div>
<div class="style-name">متجر ألعاب</div>
</div>
<!--22. Store Apps-->
<div class="style-card" data-min="4" data-value="store-apps">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 1fr;"><div class="bg-white rad" style="align-items: center; display: flex; gap: 2px; padding: 2px;"><div class="bg-green rad" style="height: 15px; width: 15px;"></div><div class="bg-gray rad" style="flex: 1 1 0%; height: 5px;"></div></div><div class="bg-white rad" style="align-items: center; display: flex; gap: 2px; padding: 2px;"><div class="bg-green rad" style="height: 15px; width: 15px;"></div><div class="bg-gray rad" style="flex: 1 1 0%; height: 5px;"></div></div></div></div>
<div class="style-name">متجر تطبيقات</div>
</div>
<!--23. List with Thumb-->
<div class="style-card" data-min="3" data-value="list-with-thumb">
<div class="mini"><div class="m-col"><div class="bg-white rad" style="align-items: center; display: flex; flex: 1 1 0%; gap: 3px; padding: 2px;"><div class="bg-gray rad" style="height: 15px; width: 20px;"></div><div style="background: rgb(226, 232, 240); flex: 1 1 0%; height: 3px;"></div></div><div class="bg-white rad" style="align-items: center; display: flex; flex: 1 1 0%; gap: 3px; padding: 2px;"><div class="bg-gray rad" style="height: 15px; width: 20px;"></div><div style="background: rgb(226, 232, 240); flex: 1 1 0%; height: 3px;"></div></div></div></div>
<div class="style-name">قائمة وصورة</div>
</div>
<!--24. Text List (No Img)-->
<div class="style-card" data-min="3" data-value="no-img">
<div class="mini"><div class="m-col"><div class="bg-white rad" style="align-items: center; display: flex; flex: 1 1 0%; padding: 0px 5px;"><div style="background: rgb(226, 232, 240); height: 3px; width: 100%;"></div></div><div class="bg-white rad" style="align-items: center; display: flex; flex: 1 1 0%; padding: 0px 5px;"><div style="background: rgb(226, 232, 240); height: 3px; width: 100%;"></div></div></div></div>
<div class="style-name">قائمة نصية</div>
</div>
<!--25. Grid 2x2-->
<div class="style-card" data-min="4" data-value="grid-2x2">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;"><div class="bg-white rad"></div><div class="bg-white rad"></div><div class="bg-white rad"></div><div class="bg-white rad"></div></div></div>
<div class="style-name">شبكة 2x2</div>
</div>
<!--26. Magazine 3 Cols-->
<div class="style-card" data-min="12" data-value="magazine-3-cols">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 1fr 1fr;"><div class="bg-gray rad"></div><div class="bg-gray rad"></div><div class="bg-gray rad"></div></div></div>
<div class="style-name">مجلة 3 أقسام</div>
</div>
<!--27. Magazine Grid 3-->
<div class="style-card" data-min="3" data-value="magazine-grid-3">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 1fr 1fr;"><div class="bg-white rad" style="border-top: 3px solid rgb(59, 130, 246);"></div><div class="bg-white rad" style="border-top: 3px solid rgb(59, 130, 246);"></div><div class="bg-white rad" style="border-top: 3px solid rgb(59, 130, 246);"></div></div></div>
<div class="style-name">شبكة مجلة 3</div>
</div>
<!--28. News Slider V2-->
<div class="style-card" data-min="5" data-value="news-slider">
<div class="mini"><div class="m-flex" style="align-items: center; gap: 2px; justify-content: center;"><div class="bg-dark rad" style="height: 20px; opacity: 0.5; width: 20px;"></div><div class="bg-dark rad" style="border: 1px solid rgb(59, 130, 246); height: 25px; width: 25px;"></div><div class="bg-dark rad" style="height: 20px; opacity: 0.5; width: 20px;"></div></div></div>
<div class="style-name">سلايدر مصغر V2</div>
</div>
<!--29. Pinned Post-->
<div class="style-card" data-min="5" data-value="pinned-post">
<div class="mini"><div class="m-grid" style="grid-template-columns: 2fr 1fr;"><div class="bg-blue rad"></div><div class="m-col"><div class="bg-white rad"></div><div class="bg-white rad"></div></div></div></div>
<div class="style-name">مقال مثبت</div>
</div>
<!--30. Magazine Pro 1-->
<div class="style-card" data-min="3" data-value="magazine-pro-1">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;"><div class="bg-dark rad"></div><div class="bg-dark rad"></div><div class="bg-red rad" style="grid-column: 1 / 3;"></div></div></div>
<div class="style-name">مجلة برو 1</div>
</div>
<!--31. Pro Layout-->
<div class="style-card" data-min="2" data-value="pro-layout">
<div class="mini"><div class="m-grid" style="grid-template-columns: 1.5fr 1fr;"><div class="bg-white rad" style="border: 1px solid rgb(59, 130, 246);"></div><div class="m-col"><div class="bg-white rad"></div><div class="bg-white rad"></div></div></div></div>
<div class="style-name">تصميم متوازن</div>
</div>
</div>
<h3>2. الإعدادات:</h3>
<div class="controls-panel">
<div class="form-group">
<label>العنوان (Title):</label>
<input id="inpTitle" type="text" value="أحدث المقالات" />
</div>
<div class="form-group">
<label>التصنيف (Label):</label>
<input id="inpLabel" placeholder="lastPost أو اسم التسمية" type="text" value="lastPost" />
<small id="multiLabelNote" style="color: #d97706; display: none; font-weight: bold; margin-top: 5px;">⚠️ يتطلب هذا الشكل عدة تصنيفات مفصولة بفاصلة (مثال: رياضة, اقتصاد)</small>
</div>
<div class="form-group">
<label>العدد (Number):</label>
<input id="inpNumber" max="20" type="number" value="5" />
<small id="minCountMsg" style="color: #ef4444; display: block; font-weight: bold; margin-top: 5px;"></small>
</div>
</div>
<h3>3. الكود الناتج:</h3>
<div class="result-area">
<button class="copy-btn" onclick="copyCode()">نسخ</button>
<code id="codeOutput"></code>
</div>
</div>
<script>
const styleCards = document.querySelectorAll('.style-card');
const inpTitle = document.getElementById('inpTitle');
const inpLabel = document.getElementById('inpLabel');
const inpNumber = document.getElementById('inpNumber');
const codeOutput = document.getElementById('codeOutput');
const minCountMsg = document.getElementById('minCountMsg');
const multiLabelNote = document.getElementById('multiLabelNote');
let currentType = 'hero-slider';
let minPosts = 3;
function updateCode() {
const multiTypes = ['filter-grid', 'magazine-3-cols', 'dual-column-posts'];
if(multiTypes.includes(currentType)) {
multiLabelNote.style.display = 'block';
} else {
multiLabelNote.style.display = 'none';
}
if(parseInt(inpNumber.value) < minPosts) {
minCountMsg.innerText = `⚠️ يتطلب ${minPosts} مقالات على الأقل.`;
} else {
minCountMsg.innerText = '';
}
const code = `<i class="posts-from" \n data-type="${currentType}" \n data-title="${inpTitle.value}" \n data-label="${inpLabel.value}" \n data-number="${inpNumber.value}">\n</i>`;
codeOutput.innerText = code;
}
styleCards.forEach(card => {
card.addEventListener('click', () => {
styleCards.forEach(c => c.classList.remove('selected'));
card.classList.add('selected');
currentType = card.getAttribute('data-value');
minPosts = parseInt(card.getAttribute('data-min'));
if(parseInt(inpNumber.value) < minPosts) inpNumber.value = minPosts;
updateCode();
});
});
inpTitle.addEventListener('input', updateCode);
inpLabel.addEventListener('input', updateCode);
inpNumber.addEventListener('input', updateCode);
function copyCode() {
navigator.clipboard.writeText(codeOutput.innerText).then(() => {
const btn = document.querySelector('.copy-btn');
btn.innerText = 'تم!';
setTimeout(() => btn.innerText = 'نسخ', 2000);
});
}
updateCode();
</script>
انا مهتم بمجال التقنية والربح من الانترنت واتطلع لنشر المزيد من المقالات التي تفيدكم
![Author](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240" role="img" aria-label="Default profile avatar"%3E%3Cdefs%3E%3ClinearGradient id="g" x1="0" x2="1" y1="0" y2="1"%3E%3Cstop offset="0" stop-color="%236db3f2"/%3E%3Cstop offset="1" stop-color="%234a90e2"/%3E%3C/linearGradient%3E%3Cfilter id="soft" x="-50%25" y="-50%25" width="200%25" height="200%25"%3E%3CfeDropShadow dx="0" dy="6" stdDeviation="12" flood-opacity="0.12"/%3E%3C/filter%3E%3C/defs%3E%3Cg transform="translate(120,120)"%3E%3Ccircle r="108" fill="url(%23g)" filter="url(%23soft)"/%3E%3Ccircle r="88" fill="rgba(255,255,255,0.06)"/%3E%3C/g%3E%3Cg transform="translate(120,120)"%3E%3Ccircle cx="0" cy="-24" r="28" fill="%23ffffff" fill-opacity="0.95"/%3E%3Cpath d="M-56,64 C-56,36 -36,16 0,16 C36,16 56,36 56,64 L56,76 C56,88 44,100 0,100 C-44,100 -56,88 -56,76 Z" fill="%23ffffff" fill-opacity="0.95"/%3E%3Cellipse cx="0" cy="72" rx="52" ry="12" fill="%23000" opacity="0.04"/%3E%3C/g%3E%3C/svg%3E){kind=avatar}
تعليقات
إرسال تعليق