can you also add world wide sudjects ,all the laguege in the world to learn,and a buton for the user to decorate and style the wedsite,and can you make the wedsite provide infomation when the user did something wrong,and make a cute study companion to give small tips or cool fun facts about what their studying about,and they can custom the cute companion style to match their design of the wedsite
5ff6b98 verified | class ProgressCard extends HTMLElement { | |
| connectedCallback() { | |
| const title = this.getAttribute('title') || ''; | |
| const value = this.getAttribute('value') || '0'; | |
| const icon = this.getAttribute('icon') || 'activity'; | |
| const color = this.getAttribute('color') || 'bg-indigo-500'; | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .card { | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .icon-container { | |
| width: 48px; | |
| height: 48px; | |
| } | |
| </style> | |
| <div class="card p-6 h-full"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-lg font-bold text-gray-800">${title}</h3> | |
| <div class="icon-container ${color} rounded-full flex items-center justify-center text-white"> | |
| <i data-feather="${icon}"></i> | |
| </div> | |
| </div> | |
| <div class="text-3xl font-bold text-gray-900 mb-2">${value}</div> | |
| <slot></slot> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('progress-card', ProgressCard); |