Spaces:
Running
Running
File size: 2,830 Bytes
67efaec 3aeaee2 67efaec |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
class CustomCarCard extends HTMLElement {
connectedCallback() {
const title = this.getAttribute('title') || 'Classic Car';
const price = this.getAttribute('price') || '0';
const tokens = this.getAttribute('tokens') || '0';
const image = this.getAttribute('image') || 'http://static.photos/automotive/640x360/99';
const model = this.getAttribute('model') || '#';
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.price-tag {
background: linear-gradient(135deg, #3b82f6, #6366f1);
}
.token-tag {
background: linear-gradient(135deg, #10b981, #059669);
}
</style>
<a href="${model}" class="card block bg-white rounded-xl overflow-hidden shadow-md">
<!-- Image/Model Preview -->
<div class="relative h-48 bg-gray-100">
<img src="${image}" alt="${title}" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-10 transition"></div>
</div>
<!-- Content -->
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2">${title}</h3>
<div class="flex justify-between items-center">
<div>
<div class="price-tag text-white text-sm font-medium px-3 py-1 rounded-full inline-block">
$${price}
</div>
<div class="token-tag text-white text-sm font-medium px-3 py-1 rounded-full inline-block ml-2">
${tokens} GTR
</div>
</div>
<div class="flex items-center">
<button class="text-blue-600 hover:text-blue-800 transition mr-2">
<i data-feather="eye"></i>
</button>
<button class="text-green-600 hover:text-green-800 transition">
<i data-feather="shopping-cart"></i>
</button>
</div>
</div>
</div>
</a>
`;
}
}
customElements.define('custom-car-card', CustomCarCard); |