| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>PetPalace - Pet Food, Products, Supplies at Low Prices</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| | body { font-family: 'Inter', sans-serif; } |
| | .hero-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } |
| | .card-hover { transition: all 0.3s ease; } |
| | .card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } |
| | .nav-link { position: relative; } |
| | .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #667eea; transition: width 0.3s ease; } |
| | .nav-link:hover::after { width: 100%; } |
| | .autocomplete-item { transition: background-color 0.2s ease; } |
| | .autocomplete-item:hover { background-color: #f3f4f6; } |
| | .cart-badge { animation: bounce 0.5s ease-in-out; } |
| | @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } |
| | .product-card { transition: all 0.3s ease; } |
| | .product-card:hover { transform: scale(1.02); } |
| | .category-card { transition: all 0.3s ease; } |
| | .category-card:hover { background-color: #f9fafb; } |
| | .mobile-menu { transform: translateX(-100%); transition: transform 0.3s ease; } |
| | .mobile-menu.open { transform: translateX(0); } |
| | .search-suggestions { max-height: 400px; overflow-y: auto; } |
| | .promo-banner { background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%); } |
| | .deal-timer { font-variant-numeric: tabular-nums; } |
| | .star-rating { color: #fbbf24; } |
| | .price-tag { font-weight: 700; color: #dc2626; } |
| | .original-price { text-decoration: line-through; color: #6b7280; } |
| | .savings-badge { background-color: #dcfce7; color: #166534; } |
| | .brand-logo { filter: grayscale(100%) opacity(0.6); transition: filter 0.3s ease; } |
| | .brand-logo:hover { filter: grayscale(0%) opacity(1); } |
| | .testimonial-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } |
| | .footer-link { transition: color 0.3s ease; } |
| | .footer-link:hover { color: #667eea; } |
| | .social-icon { transition: transform 0.3s ease; } |
| | .social-icon:hover { transform: scale(1.1); } |
| | .autocomplete-highlight { background-color: #fef3c7; } |
| | .loading-spinner { border: 3px solid #f3f4f6; border-top: 3px solid #667eea; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } |
| | @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
| | .notification { animation: slideInRight 0.3s ease-out; } |
| | @keyframes slideInRight { from { |
| | </head> |
| | </html> |
