| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PokéExchange - Mercado de Cartas Pokémon</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| pokered: '#FF0000', |
| pokeblue: '#3B4CCA', |
| pokeyellow: '#FFDE00', |
| }, |
| fontFamily: { |
| 'pokemon': ['"Press Start 2P"', 'cursive'], |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| .card-hover:hover { |
| transform: translateY(-5px) scale(1.02); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, #FF0000 0%, #3B4CCA 100%); |
| } |
| .rarity-common { |
| border-left: 5px solid #B0B0B0; |
| } |
| .rarity-uncommon { |
| border-left: 5px solid #50C878; |
| } |
| .rarity-rare { |
| border-left: 5px solid #4169E1; |
| } |
| .rarity-holo { |
| border-left: 5px solid #FFD700; |
| } |
| .rarity-ultra { |
| border-left: 5px solid #FF4500; |
| } |
| .price-trend-up { |
| color: #4CAF50; |
| } |
| .price-trend-down { |
| color: #F44336; |
| } |
| .price-trend-stable { |
| color: #2196F3; |
| } |
| .auction-card { |
| background: linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%); |
| border-radius: 12px; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| .countdown { |
| font-family: 'Pokemon', sans-serif; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <i class="fas fa-pokeball text-4xl mr-3 text-pokeyellow"></i> |
| <h1 class="text-2xl md:text-3xl font-bold font-pokemon">POKÉEXCHANGE</h1> |
| </div> |
| <div class="w-full md:w-auto"> |
| <div class="relative"> |
| <input type="text" placeholder="Buscar cartas..." class="w-full md:w-96 py-2 px-4 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-pokeyellow"> |
| <button class="absolute right-0 top-0 mt-2 mr-4 text-gray-500"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| </div> |
| <nav class="mt-4 md:mt-0"> |
| <ul class="flex space-x-6"> |
| <li><a href="#" class="hover:text-pokeyellow transition"><i class="fas fa-home mr-1"></i> Inicio</a></li> |
| <li><a href="#" class="hover:text-pokeyellow transition"><i class="fas fa-exchange-alt mr-1"></i> Intercambios</a></li> |
| <li><a href="#" class="hover:text-pokeyellow transition"><i class="fas fa-gavel mr-1"></i> Subastas</a></li> |
| <li><a href="#" class="hover:text-pokeyellow transition"><i class="fas fa-user mr-1"></i> Mi Perfil</a></li> |
| </ul> |
| </nav> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="bg-gray-900 text-white py-12 relative overflow-hidden"> |
| <div class="absolute inset-0 opacity-20"> |
| <div class="absolute inset-0 bg-repeat" style="background-image: url('https://www.transparenttextures.com/patterns/pokemon.png');"></div> |
| </div> |
| <div class="container mx-auto px-4 relative z-10"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-8 md:mb-0"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 font-pokemon">EL MERCADO POKÉMON DEFINITIVO</h2> |
| <p class="text-xl mb-6">Compra, vende y subasta tus cartas Pokémon con el mejor sistema de precios dinámicos del mundo.</p> |
| <div class="flex space-x-4"> |
| <button class="bg-pokered hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105"> |
| <i class="fas fa-gavel mr-2"></i> Ver Subastas |
| </button> |
| <button class="bg-pokeblue hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105"> |
| <i class="fas fa-exchange-alt mr-2"></i> Intercambiar |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative"> |
| <img src="https://assets.pokemon.com/assets/cms2/img/cards/web/SWSH12/SWSH12_EN_249.png" alt="Lugia V" class="w-64 h-auto rounded-lg shadow-2xl transform rotate-6 card-hover"> |
| <img src="https://assets.pokemon.com/assets/cms2/img/cards/web/SWSH12/SWSH12_EN_248.png" alt="Charizard V" class="w-64 h-auto rounded-lg shadow-2xl absolute -right-10 -bottom-10 transform -rotate-6 card-hover"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-8 text-center font-pokemon">MERCADO POKÉMON</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> |
| <div class="bg-gray-100 p-6 rounded-lg shadow"> |
| <div class="flex items-center"> |
| <div class="bg-pokered text-white p-3 rounded-full mr-4"> |
| <i class="fas fa-chart-line text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-600">Cartas activas</p> |
| <p class="text-2xl font-bold">12,458</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-100 p-6 rounded-lg shadow"> |
| <div class="flex items-center"> |
| <div class="bg-pokeblue text-white p-3 rounded-full mr-4"> |
| <i class="fas fa-exchange-alt text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-600">Intercambios hoy</p> |
| <p class="text-2xl font-bold">1,247</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-100 p-6 rounded-lg shadow"> |
| <div class="flex items-center"> |
| <div class="bg-pokeyellow text-gray-800 p-3 rounded-full mr-4"> |
| <i class="fas fa-gavel text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-600">Subastas activas</p> |
| <p class="text-2xl font-bold">843</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-100 p-6 rounded-lg shadow"> |
| <div class="flex items-center"> |
| <div class="bg-green-500 text-white p-3 rounded-full mr-4"> |
| <i class="fas fa-users text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-600">Maestros registrados</p> |
| <p class="text-2xl font-bold">58,962</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| <i class="fas fa-chart-bar mr-2 text-pokeblue"></i> Tendencias de Precios |
| </h3> |
| <div class="bg-white p-6 rounded-lg shadow"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Carta</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Precio Actual</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cambio 24h</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Volumen</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Escasez</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded" src="https://assets.pokemon.com/assets/cms2/img/cards/web/SWSH12/SWSH12_EN_248.png" alt="Charizard V"> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Charizard V</div> |
| <div class="text-sm text-gray-500">SWSH12</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$189.99</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm price-trend-up"> |
| <i class="fas fa-arrow-up mr-1"></i> 5.2% |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">142</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Alta</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded" src="https://assets.pokemon.com/assets/cms2/img/cards/web/SWSH12/SWSH12_EN_249.png" alt="Lugia V"> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Lugia V</div> |
| <div class="text-sm text-gray-500">SWSH12</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$124.50</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm price-trend-down"> |
| <i class="fas fa-arrow-down mr-1"></i> 2.8% |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">87</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Media</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded" src="https://assets.pokemon.com/assets/cms2/img/cards/web/SWSH11/SWSH11_EN_177.png" alt="Mewtwo V"> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Mewtwo V</div> |
| <div class="text-sm text-gray-500">SWSH11</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$78.25</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm price-trend-stable"> |
| <i class="fas fa-equals mr-1"></i> 0.5% |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">203</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Baja</span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-8 text-center font-pokemon">SUBASTAS DESTACADAS</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="auction-card p-6 card-hover"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <span class="bg-pokered text-white text-xs font-semibold px-2.5 py-0.5 rounded">HOT</span> |
| </div> |
| <div class="text-sm text-gray-500">#PKE23456</div> |
| </div> |
| |
| <div class="flex justify-center mb-4"> |
| <img src="https://assets.pokemon.com/assets/cms2/img/cards/web/SWSH12/SWSH12_EN_248.png" alt="Charizard V" class="h-48 object-contain"> |
| </div> |
| |
| <h3 class="text-xl font-bold mb-2">Charizard V - SWSH12</h3> |
| <div class="flex items-center mb-3"> |
| <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded mr-2">★ Ultra Rara</span> |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">PSA 10</span> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="flex justify-between items-center mb-1"> |
| <span class="text-sm text-gray-600">Precio actual:</span> |
| <span class="text-lg font-bold">$215.50</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-gray-600">Puja mínima:</span> |
| <span class="text-lg font-bold text-pokered">$5.00</span> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="text-sm text-gray-600 mb-1">Tiempo restante:</div> |
| <div class="countdown text-xl font-bold text-pokeblue">12:34:56</div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="text-sm text-gray-600 mb-1">Ofertas: <span class="font-medium">24</span></div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-pokered h-2.5 rounded-full" style="width: 75%"></div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between"> |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded transition"> |
| <i class="far fa-heart mr-1"></i> Guardar |
| </button> |
| <button class="bg-pokered hover:bg-red-700 text-white font-bold py-2 px-6 rounded transition transform hover:scale-105"> |
| <i class="fas fa-gavel mr-1"></i> Pujar |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="auction-card p-6 card-hover"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <span class="bg-pokeblue text-white text-xs font-semibold px-2.5 py-0.5 rounded">NEW</span> |
| </div> |
| <div class="text-sm text-gray-500">#PKE78901</div> |
| </div> |
| |
| <div class="flex justify-center mb-4"> |
| <img src="https://assets.pokemon.com/assets/cms2/img/cards/web/SWSH12/SWSH12_EN_249.png" alt="Lugia V" class="h-48 object-contain"> |
| </div> |
| |
| <h3 class="text-xl font-bold mb-2">Lugia V - SWSH12</h3> |
| <div class="flex items-center mb-3"> |
| <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded mr-2">★ Ultra Rara</span> |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">PSA 9</span> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="flex justify-between items-center mb-1"> |
| <span class="text-sm text-gray-600">Precio actual:</span> |
| <span class="text-lg font-bold">$145.75</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-gray-600">Puja mínima:</span> |
| <span class="text-lg font-bold text-pokered">$5.00</span> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="text-sm text-gray-600 mb-1">Tiempo restante:</div> |
| <div class="countdown text-xl font-bold text-pokeblue">1d 04:12:33</div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="text-sm text-gray-600 mb-1">Ofertas: <span class="font-medium">12</span></div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-pokeblue h-2.5 rounded-full" style="width: 40%"></div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between"> |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded transition"> |
| <i class="far fa-heart mr-1"></i> Guardar |
| </button> |
| <button class="bg-pokered hover:bg-red-700 text-white font-bold py-2 px-6 rounded transition transform hover:scale-105"> |
| <i class="fas fa-gavel mr-1"></i> Pujar |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="auction-card p-6 card-hover"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <span class="bg-green-500 text-white text-xs font-semibold px-2.5 py-0.5 rounded">ENDING</span> |
| </div> |
| <div class="text-sm text-gray-500">#PKE34567</div> |
| </div> |
| |
| <div class="flex justify-center mb-4"> |
| <img src="https://assets.pokemon.com/assets/cms2/img/cards/web/SWSH11/SWSH11_EN_177.png" alt="Mewtwo V" class="h-48 object-contain"> |
| </div> |
| |
| <h3 class="text-xl font-bold mb-2">Mewtwo V - SWSH11</h3> |
| <div class="flex items-center mb-3"> |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded mr-2">★ Rara</span> |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">PSA 8</span> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="flex justify-between items-center mb-1"> |
| <span class="text-sm text-gray-600">Precio actual:</span> |
| <span class="text-lg font-bold">$89.99</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-gray-600">Puja mínima:</span> |
| <span class="text-lg font-bold text-pokered">$2.50</span> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="text-sm text-gray-600 mb-1">Tiempo restante:</div> |
| <div class="countdown text-xl font-bold text-pokeblue">00:23:45</div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="text-sm text-gray-600 mb-1">Ofertas: <span class="font-medium">36</span></div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between"> |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded transition"> |
| <i class="far fa-heart mr-1"></i> Guardar |
| </button> |
| <button class="bg-pokered hover:bg-red-700 text-white font-bold py-2 px-6 rounded transition transform hover:scale-105"> |
| <i class="fas fa-gavel mr-1"></i> Pujar |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-8"> |
| <button class="bg-pokeblue hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> |
| Ver Todas las Subastas <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-12 text-center font-pokemon">¿CÓMO FUNCIONA?</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="text-center"> |
| <div class="bg-pokered text-white w-16 h-16 mx-auto rounded-full flex items-center justify-center text-2xl mb-4"> |
| 1 |
| </div> |
| <h3 class="text-xl font-bold mb-2">Regístrate</h3> |
| <p class="text-gray-600">Crea tu cuenta de Maestro Pokémon y verifica tu perfil para comenzar a operar.</p> |
| </div> |
| <div class="text-center"> |
| <div class="bg-pokeblue text-white w-16 h-16 mx-auto rounded-full flex items-center justify-center text-2xl mb-4"> |
| 2 |
| </div> |
| <h3 class="text-xl font-bold mb-2">Lista tus cartas</h3> |
| <p class="text-gray-600">Sube tus cartas con fotos y detalles. Nuestro sistema sugiere precios basados en el mercado.</p> |
| </div> |
| <div class="text-center"> |
| <div class="bg-pokeyellow text-gray-800 w-16 h-16 mx-auto rounded-full flex items-center justify-center text-2xl mb-4"> |
| 3 |
| </div> |
| <h3 class="text-xl font-bold mb-2">Intercambia o Subasta</h3> |
| <p class="text-gray-600">Elige vender a precio fijo, negociar intercambios o crear una subasta competitiva.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-gray-900 text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-8 md:mb-0"> |
| <h2 class="text-3xl font-bold mb-4 font-pokemon">ALGORITMO DE PRECIOS INTELIGENTE</h2> |
| <p class="text-lg mb-6">Nuestro sistema analiza múltiples factores para determinar el precio justo de cada carta:</p> |
| |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <div class="bg-pokered rounded-full p-1 mr-3 mt-1"> |
| <i class="fas fa-chart-line text-white text-sm"></i> |
| </div> |
| <span>Tendencias del mercado en tiempo real</span> |
| </li> |
| <li class="flex items-start"> |
| <div class="bg-pokeblue rounded-full p-1 mr-3 mt-1"> |
| <i class="fas fa-boxes text-white text-sm"></i> |
| </div> |
| <span>Disponibilidad y escasez de la carta</span> |
| </li> |
| <li class="flex items-start"> |
| <div class="bg-pokeyellow rounded-full p-1 mr-3 mt-1"> |
| <i class="fas fa-star text-gray-800 text-sm"></i> |
| </div> |
| <span>Condición y rareza (PSA, Beckett)</span> |
| </li> |
| <li class="flex items-start"> |
| <div class="bg-green-500 rounded-full p-1 mr-3 mt-1"> |
| <i class="fas fa-history text-white text-sm"></i> |
| </div> |
| <span>Historial de transacciones similares</span> |
| </li> |
| <li class="flex items-start"> |
| <div class="bg-purple-500 rounded-full p-1 mr-3 mt-1"> |
| <i class="fas fa-fire text-white text-sm"></i> |
| </div> |
| <span>Demanda actual y popularidad</span> |
| </li> |
| </ul> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="bg-gray-800 p-8 rounded-lg shadow-xl border border-gray-700"> |
| <h3 class="text-xl font-bold mb-4 text-center">EJEMPLO DE CÁLCULO</h3> |
| <div class="space-y-4"> |
| <div class="flex justify-between"> |
| <span>Precio base:</span> |
| <span>$120.00</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>+ Demanda alta (15%):</span> |
| <span class="text-green-400">+$18.00</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>+ Escasez (10%):</span> |
| <span class="text-green-400">+$12.00</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>+ PSA 10 (25%):</span> |
| <span class="text-green-400">+$30.00</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>- Disponibilidad (5%):</span> |
| <span class="text-red-400">-$7.50</span> |
| </div> |
| <div class="border-t border-gray-700 my-3"></div> |
| <div class="flex justify-between font-bold text-lg"> |
| <span>PRECIO FINAL:</span> |
| <span>$172.50</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-12 text-center font-pokemon">OPINIONES DE MAESTROS</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-6 rounded-lg shadow"> |
| <div class="flex items-center mb-4"> |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Ashley"> |
| <div> |
| <h4 class="font-bold">Ashley K.</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"Conseguí vender mi Charizard a un precio que nunca imaginé. El algoritmo de precios realmente maximiza el valor de tus cartas."</p> |
| </div> |
| <div class="bg-gray-50 p-6 rounded-lg shadow"> |
| <div class="flex items-center mb-4"> |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Brandon"> |
| <div> |
| <h4 class="font-bold">Brandon T.</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"El sistema de subastas es increíble. Pude completar mi colección de cartas de primera generación gracias a los intercambios."</p> |
| </div> |
| <div class="bg-gray-50 p-6 rounded-lg shadow"> |
| <div class="flex items-center mb-4"> |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="David"> |
| <div> |
| <h4 class="font-bold">David M.</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"Como coleccionista profesional, aprecio la transparencia en los precios y la calidad de los vendedores verificados."</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 gradient-bg text-white text-center"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 font-pokemon">¿LISTO PARA UNIRTE A POKÉEXCHANGE?</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Únete a miles de Maestros Pokémon que ya están intercambiando y subastando sus cartas.</p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> |
| <button class="bg-white hover:bg-gray-100 text-pokered font-bold py-4 px-8 rounded-full text-lg transition transform hover:scale-105"> |
| <i class="fas fa-user-plus mr-2"></i> Regístrate Gratis |
| </button> |
| <button class="bg-transparent hover:bg-white hover:bg-opacity-10 border-2 border-white font-bold py-4 px-8 rounded-full text-lg transition transform hover:scale-105"> |
| <i class="fas fa-play-circle mr-2"></i> Ver Video Tutorial |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4 flex items-center font-pokemon"> |
| <i class="fas fa-pokeball text-2xl mr-2 text-pokeyellow"></i> POKÉEXCHANGE |
| </h3> |
| <p class="text-gray-400">El mercado definitivo para Maestros Pokémon. Compra, vende y subasta tus cartas con confianza.</p> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">NAVEGACIÓN</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Inicio</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Subastas</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Intercambios</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tendencias</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Mi Perfil</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">INFORMACIÓN</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cómo funciona</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tarifas</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Política de envíos</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Garantía de autenticidad</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Preguntas frecuentes</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">CONTACTO</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope mr-2 text-gray-400"></i> |
| <span>soporte@pokeexchange.com</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt mr-2 text-gray-400"></i> |
| <span>+1 (555) 123-4567</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i> |
| <span>Ciudad Paleta, Región Kanto</span> |
| </li> |
| </ul> |
| <div class="mt-4 flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-discord"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 PokéExchange. Todos los derechos reservados. Pokémon y los nombres de personajes Pokémon son marcas registradas de Nintendo.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function updateCountdowns() { |
| const countdowns = document.querySelectorAll('.countdown'); |
| |
| countdowns.forEach(countdown => { |
| let time = countdown.textContent; |
| |
| if (time.includes('d')) { |
| |
| let parts = time.split(' '); |
| let days = parseInt(parts[0].replace('d', '')); |
| let [h, m, s] = parts[1].split(':').map(Number); |
| |
| |
| if (s > 0) s--; |
| else { |
| s = 59; |
| if (m > 0) m--; |
| else { |
| m = 59; |
| if (h > 0) h--; |
| else { |
| h = 23; |
| days--; |
| } |
| } |
| } |
| |
| |
| countdown.textContent = `${days}d ${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; |
| } else { |
| |
| let [h, m, s] = time.split(':').map(Number); |
| |
| |
| if (s > 0) s--; |
| else { |
| s = 59; |
| if (m > 0) m--; |
| else { |
| m = 59; |
| if (h > 0) h--; |
| } |
| } |
| |
| |
| countdown.textContent = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; |
| } |
| }); |
| } |
| |
| setInterval(updateCountdowns, 1000); |
| |
| |
| function simulateMarketTrends() { |
| const trends = document.querySelectorAll('.price-trend-up, .price-trend-down, .price-trend-stable'); |
| |
| trends.forEach(trend => { |
| if (Math.random() > 0.7) { |
| |
| if (trend.classList.contains('price-trend-up')) { |
| trend.classList.remove('price-trend-up'); |
| trend.classList.add('price-trend-down'); |
| trend.innerHTML = '<i class="fas fa-arrow-down mr-1"></i> ' + (Math.random() * 5).toFixed(1) + '%'; |
| } else if (trend.classList.contains('price-trend-down')) { |
| trend.classList.remove('price-trend-down'); |
| trend.classList.add('price-trend-stable'); |
| trend.innerHTML = '<i class="fas fa-equals mr-1"></i> ' + (Math.random() * 2).toFixed(1) + '%'; |
| } else { |
| trend.classList.remove('price-trend-stable'); |
| trend.classList.add('price-trend-up'); |
| trend.innerHTML = '<i class="fas fa-arrow-up mr-1"></i> ' + (Math.random() * 5).toFixed(1) + '%'; |
| } |
| } |
| }); |
| } |
| |
| setInterval(simulateMarketTrends, 5000); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cocovidal/romeo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
