.emoji-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 15px; justify-items: center; margin-top: 30px; max-width: 1200px; margin-left: auto; margin-right: auto; direction: rtl; font-weight: bold; } @media (max-width: 1024px) { .emoji-grid { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 600px) { .emoji-grid { grid-template-columns: repeat(2, 1fr); } } .emoji-box { text-align: center; padding: 10px; border-radius: 10px; background-color: #f9f9f9; border: 1px solid #ccc; box-shadow: 1px 1px 6px rgba(0,0,0,0.1); width: 100%; max-width: 120px; font-family: 'Arial', 'Tahoma', 'Segoe UI', sans-serif; user-select:none; } .emoji-symbol { font-size: 14px; margin-bottom: 6px; user-select:none; line-height: 1.2; } .copy-btn { background-color: #1e73be; color: white; border: none; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: bold; user-select:none; } .copy-btn:hover { background-color: #155a96; } /* بعض أنماط الخطوط والألوان والتأثيرات المتنوعة */ .style1 { font-family: 'Amiri', serif; font-size: 16px; color: #2c3e50; } .style2 { font-family: 'Scheherazade New', serif; font-size: 15px; color: #8e44ad; font-style: italic; } .style3 { font-family: 'Arial', sans-serif; font-size: 14px; color: #c0392b; font-weight: normal; } .style4 { font-family: 'Tahoma', sans-serif; font-size: 18px; color: #27ae60; text-shadow: 1px 1px 2px #000000; } .style5 { font-family: 'Segoe UI', sans-serif; font-size: 16px; color: #2980b9; letter-spacing: 1.5px; } .style6 { font-family: 'Courier New', monospace; font-size: 14px; color: #d35400; font-weight: bold; } .style7 { font-family: 'Georgia', serif; font-size: 17px; color: #7f8c8d; font-style: normal; } .style8 { font-family: 'Times New Roman', serif; font-size: 15px; color: #34495e; font-weight: 600; } .style9 { font-family: 'Verdana', sans-serif; font-size: 14px; color: #16a085; font-style: oblique; } .style10 { font-family: 'Impact', sans-serif; font-size: 16px; color: #e67e22; text-transform: uppercase; } const container = document.getElementById('bismillah-container'); const phrase = 'بسم الله الرحمن الرحيم'; // 10 أنماط CSS مستخدمة بالتناوب const styles = ['style1','style2','style3','style4','style5','style6','style7','style8','style9','style10']; for(let i=0; i { alert('تم نسخ العبارة!'); }).catch(() => { alert('فشل النسخ!'); }); }
