Spaces:
Running
Running
| class AchievementCard extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| perspective: 1000px; | |
| } | |
| .card { | |
| background: linear-gradient(145deg, #1a1a2e, #16213e); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| transition: all 0.5s ease; | |
| transform-style: preserve-3d; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card:hover { | |
| transform: translateY(-10px) rotateX(5deg); | |
| box-shadow: 0 15px 35px rgba(100, 65, 165, 0.4); | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%); | |
| transform: rotate(45deg); | |
| transition: all 0.5s ease; | |
| } | |
| .card:hover::before { | |
| transform: rotate(45deg) translate(20px, 20px); | |
| } | |
| .trophy { | |
| font-size: 3rem; | |
| color: #fbbf24; | |
| text-shadow: 0 0 10px rgba(251, 191, 36, 0.5); | |
| margin-bottom: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover .trophy { | |
| transform: scale(1.1); | |
| } | |
| h3 { | |
| font-family: 'Orbitron', sans-serif; | |
| color: white; | |
| margin: 0 0 0.5rem 0; | |
| font-size: 1.5rem; | |
| } | |
| p { | |
| color: #a1a1aa; | |
| margin: 0; | |
| line-height: 1.6; | |
| } | |
| .date { | |
| color: #818cf8; | |
| font-size: 0.9rem; | |
| margin-top: 1rem; | |
| display: inline-block; | |
| } | |
| </style> | |
| <div class="card"> | |
| <div class="trophy">🏆</div> | |
| <h3>${this.getAttribute('title')}</h3> | |
| <p>${this.getAttribute('description')}</p> | |
| <span class="date">${this.getAttribute('date')}</span> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('achievement-card', AchievementCard); |