دمج الإيموجيات

body { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; } h1 { font-size: 32px; text-align: center; margin-bottom: 10px; } p.description { text-align: center; color: #555; max-width: 700px; margin: 0 auto 25px auto; } .combiner { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; } .dropdown, .result-box { width: 120px; height: 120px; border: 2px solid #ccc; border-radius: 15px; background-color: #fff; display: flex; justify-content: center; align-items: center; font-size: 80px; cursor: pointer; position: relative; user-select: none; z-index: 1; } /* القائمة المنسدلة: مخفية افتراضياً */ .dropdown .options { display: none; position: absolute; top: 125px; /* لتظهر أسفل الصندوق */ left: 0; width: 100%; max-height: 200px; overflow-y: auto; background-color: #fff; border: 2px solid #ccc; border-radius: 10px; z-index: 1000; } /* الفئة التي تجعل القائمة تظهر عند النقر */ .dropdown .options.open { display: block; } .dropdown .option { padding: 10px; text-align: center; font-size: 50px; cursor: pointer; } .dropdown .option:hover { background-color: #f0f0f0; } .buttons { display: flex; gap: 10px; justify-content: center; margin-bottom: 15px; flex-wrap: wrap; } .buttons button { background-color: #A61E69; color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 16px; cursor: pointer; transition: background-color 0.2s; } .buttons button:hover { background-color: #8B1655; } #copyMessage { color: green; font-weight: bold; display: none; margin-bottom: 15px; text-align: center; } @media (max-width: 480px) { .combiner { flex-wrap: nowrap; } .dropdown, .result-box { font-size: 80px; width: 120px; height: 120px; } .combiner span { font-size: 36px; } .buttons button { font-size: 14px; padding: 8px 15px; } } 🔀 دمج الإيموجي الذكي اختر إيموجي من القوائم المنسدلة لتحصل على إيموجي جديد في صندوق النتيجة. يمكنك نسخ الإيموجي الناتج أو تحميله. ? + ? = ? نسخ تحميل مسح تم النسخ! const emojis = [ "😀","😄","😂","😊","😎","😍","😘","😢","😡","🤔", "😴","🤯","😱","🤪","🥳","🤖","💀","👻","😺","😸", "😹","😻","😼","😽","🙀","😿","😾","🤑","🤠","😈", "👿","👹","👺","🤡","💩","👋","🤚","🖐️","✋","🖖", "👌","✌️","🤞","🤟","🤘","🤙","👈","👉","👆","🖕", "👇","☝️","✍️","🙏","💪","🦵","🦶","👂","👃","🧠", "🫀","🫁","👀","👅","👄","💋" ]; // إنشاء Dropdown مخصص function createDropdown(dropdownId) { const dropdown = document.getElementById(dropdownId); const optionsDiv = document.createElement('div'); optionsDiv.classList.add('options'); emojis.forEach(e => { const opt = document.createElement('div'); opt.classList.add('option'); opt.textContent = e; opt.addEventListener('click', (event) => { event.stopPropagation(); dropdown.dataset.value = e; dropdown.textContent = e; optionsDiv.classList.remove('open'); updateResult(); }); optionsDiv.appendChild(opt); }); dropdown.appendChild(optionsDiv); dropdown.addEventListener('click', (event) => { event.stopPropagation(); document.querySelectorAll('.dropdown .options.open').forEach(d => { if (d !== optionsDiv) { d.classList.remove('open'); } }); optionsDiv.classList.toggle('open'); }); } // إغلاق جميع القوائم عند النقر خارجها document.addEventListener('click', (event) => { document.querySelectorAll('.dropdown .options.open').forEach(d => { d.classList.remove('open'); }); }); function getMergedEmoji(e1, e2) { if (!e1 || !e2 || e1 === '?' || e2 === '?') return "?"; return ["🤩","🥳","😏","🤯","😎","😜","🤗","😇","🤤","🥰"][ Math.floor(Math.random() * 10) ]; } function updateResult() { const e1 = document.getElementById('dropdown1').dataset.value; const e2 = document.getElementById('dropdown2').dataset.value; document.getElementById('result').textContent = getMergedEmoji(e1, e2); } // تهيئة القوائم createDropdown('dropdown1'); createDropdown('dropdown2'); // أزرار document.getElementById('copyBtn').addEventListener('click', () => { navigator.clipboard.writeText(document.getElementById('result').textContent).then(() => { const msg = document.getElementById('copyMessage'); msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 2000); }); }); document.getElementById('downloadBtn').addEventListener('click', () => { const a = document.createElement('a'); const canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 100; const ctx = canvas.getContext('2d'); ctx.font = '48px "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", Arial, sans-serif'; ctx.fillText(document.getElementById('result').textContent, 20, 60); a.href = canvas.toDataURL('image/png'); a.download = 'emoji-mashup.png'; a.click(); }); document.getElementById('reloadBtn').addEventListener('click', () => { location.reload(); });

🔀 دمج الإيموجي الذكي

مقالات ذات صلة

محوِّل لغة الدردشة

مصمِّم الإيموجي

اترك تعليقاً إلغاء الرد