Spaces:
Running
Running
That looks like a design for a full-stack web application. Based on the uploaded diagrams, the app called https://www.Godsrods.online appears to use a client-server architecture to manage user logins, display a front-end interface, handle backend logic, and interact with a database.
3aeaee2
verified
| 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); |