| class FortuneTeller extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .fortune-container { | |
| background: linear-gradient(135deg, #6e45e2 0%, #88d3ce 100%); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| color: white; | |
| text-align: center; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| max-width: 500px; | |
| margin: 2rem auto; | |
| } | |
| .fortune-title { | |
| font-size: 1.8rem; | |
| margin-bottom: 1rem; | |
| font-weight: 700; | |
| } | |
| .fortune-text { | |
| font-size: 1.2rem; | |
| line-height: 1.6; | |
| margin-bottom: 1.5rem; | |
| } | |
| .fortune-button { | |
| background: white; | |
| color: #6e45e2; | |
| border: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.1); | |
| } | |
| .fortune-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(0,0,0,0.15); | |
| } | |
| .fortune-image { | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| margin: 0 auto 1rem; | |
| border: 4px solid white; | |
| } | |
| </style> | |
| <div class="fortune-container"> | |
| <img src="http://static.photos/mystic/200x200/42" class="fortune-image" alt="Fortune Teller"> | |
| <h3 class="fortune-title">🔮 Mystic Fortune Teller 🔮</h3> | |
| <p class="fortune-text" id="fortune-result">Ask your question and receive guidance from the universe...</p> | |
| <button class="fortune-button" id="get-fortune">Get Your Fortune</button> | |
| </div> | |
| `; | |
| const fortunes = [ | |
| "The stars align in your favor today. Expect unexpected blessings!", | |
| "A new opportunity will present itself soon. Stay open to change.", | |
| "Your creative energy is strong. Use it to manifest your dreams.", | |
| "Patience is key right now. Good things come to those who wait.", | |
| "A financial windfall may be coming your way. Be wise with it.", | |
| "Love is in the air! Keep your heart open to new connections.", | |
| "Trust your intuition - it's guiding you in the right direction.", | |
| "A challenge ahead will lead to personal growth. Embrace it.", | |
| "Your hard work is about to pay off. Success is near!", | |
| "The universe is preparing something special for you. Stay positive." | |
| ]; | |
| const signs = [ | |
| "♈ Aries", "♉ Taurus", "♊ Gemini", "♋ Cancer", | |
| "♌ Leo", "♍ Virgo", "♎ Libra", "♏ Scorpio", | |
| "♐ Sagittarius", "♑ Capricorn", "♒ Aquarius", "♓ Pisces" | |
| ]; | |
| this.shadowRoot.getElementById('get-fortune').addEventListener('click', () => { | |
| const randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)]; | |
| const randomSign = signs[Math.floor(Math.random() * signs.length)]; | |
| const result = `✨ ${randomSign} ✨\n${randomFortune}`; | |
| this.shadowRoot.getElementById('fortune-result').textContent = result; | |
| }); | |
| } | |
| } | |
| customElements.define('fortune-teller', FortuneTeller); |