class LoveCalculator extends HTMLElement { connectedCallback() { this.innerHTML = ` .love-box { direction: rtl; text-align: center; font-family: 'Arial', sans-serif; background: #fff; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); padding: 25px; width: 100%; max-width: 400px; margin: 20px auto; } h2 { color: #e60023; font-size: 1.5em; } input { width: 90%; padding: 12px; margin: 8px 0; border: 2px solid #ddd; border-radius: 10px; font-size: 1em; } button { display: block; margin: 15px auto; padding: 12px 25px; font-size: 1.1em; font-weight: bold; color: #fff; background: linear-gradient(45deg, #e60023, #ff4d6d); border: none; border-radius: 25px; cursor: pointer; transition: transform 0.2s; } button:hover { transform: scale(1.05); } #result { margin-top: 20px; font-size: 1.3em; color: #e60023; font-weight: bold; } #advice { margin-top: 10px; font-size: 1em; line-height: 1.6; color: #444; text-align: justify; } ❤️ حاسبة الحب ❤️ أحسب نسبة الحب ❤️ `; this.querySelector("#calcBtn").addEventListener("click", () => { const percentage = Math.floor(Math.random() * 50) + 51; // 51 - 100 this.querySelector("#result").textContent = `النسبة: ${percentage}% ❤️`; let adviceText = ""; if (percentage
