|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PokéStats Pro - Pokémon TCG Match Tracker</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: { |
|
|
'pokemon-red': '#DC0A2D', |
|
|
'pokemon-blue': '#3B4CCA', |
|
|
'pokemon-yellow': '#FFCB05', |
|
|
'pokemon-dark': '#2A2A2A', |
|
|
'pokemon-light': '#F5F5F5', |
|
|
'pokemon-gray': '#E0E0E0', |
|
|
'grass': '#78C850', |
|
|
'fire': '#F08030', |
|
|
'water': '#6890F0', |
|
|
'electric': '#F8D030', |
|
|
'psychic': '#F85888', |
|
|
'ice': '#98D8D8', |
|
|
'dragon': '#7038F8', |
|
|
'dark': '#705848', |
|
|
'fairy': '#EE99AC', |
|
|
'fighting': '#C03028', |
|
|
'flying': '#A890F0', |
|
|
'poison': '#A040A0', |
|
|
'ground': '#E0C068', |
|
|
'rock': '#B8A038', |
|
|
'bug': '#A8B820', |
|
|
'ghost': '#705898', |
|
|
'steel': '#B8B8D0', |
|
|
'normal': '#A8A878' |
|
|
}, |
|
|
animation: { |
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
'bounce-slow': 'bounce 2s infinite', |
|
|
'spin-slow': 'spin 3s linear infinite', |
|
|
'float': 'float 3s ease-in-out infinite', |
|
|
'pulse-glow': 'pulse-glow 2s infinite', |
|
|
'wiggle': 'wiggle 1s ease-in-out infinite', |
|
|
'shake': 'shake 0.5s ease-in-out infinite' |
|
|
}, |
|
|
keyframes: { |
|
|
'float': { |
|
|
'0%, 100%': { transform: 'translateY(0px)' }, |
|
|
'50%': { transform: 'translateY(-10px)' } |
|
|
}, |
|
|
'pulse-glow': { |
|
|
'0%': { 'box-shadow': '0 0 0 0 rgba(220, 10, 45, 0.7)' }, |
|
|
'70%': { 'box-shadow': '0 0 0 10px rgba(220, 10, 45, 0)' }, |
|
|
'100%': { 'box-shadow': '0 0 0 0 rgba(220, 10, 45, 0)' } |
|
|
}, |
|
|
'wiggle': { |
|
|
'0%, 100%': { transform: 'rotate(-3deg)' }, |
|
|
'50%': { transform: 'rotate(3deg)' } |
|
|
}, |
|
|
'shake': { |
|
|
'0%, 100%': { transform: 'translateX(0)' }, |
|
|
'10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-5px)' }, |
|
|
'20%, 40%, 60%, 80%': { transform: 'translateX(5px)' } |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%); |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.poke-font { |
|
|
font-family: 'Press Start 2P', cursive; |
|
|
} |
|
|
|
|
|
|
|
|
.pokeball-loader { |
|
|
position: relative; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background: #fff; |
|
|
border: 4px solid #000; |
|
|
border-radius: 50%; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.2); |
|
|
animation: spin-slow 1.5s linear infinite; |
|
|
} |
|
|
|
|
|
.pokeball-loader::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 50%; |
|
|
background: #DC0A2D; |
|
|
} |
|
|
|
|
|
.pokeball-loader::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
background: #fff; |
|
|
border: 4px solid #000; |
|
|
border-radius: 50%; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.pokeball-loader-center { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
background: #000; |
|
|
border-radius: 50%; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
|
|
|
.pokemon-card-3d { |
|
|
transform-style: preserve-3d; |
|
|
transition: all 0.5s ease; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.pokemon-card-3d:hover { |
|
|
transform: rotateY(10deg) rotateX(5deg) translateY(-5px); |
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.type-badge { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
padding: 4px 12px; |
|
|
border-radius: 20px; |
|
|
font-weight: 600; |
|
|
font-size: 0.8rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.type-badge::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); |
|
|
transition: all 0.5s ease; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.type-badge:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.type-badge:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
.gradient-border { |
|
|
position: relative; |
|
|
border-radius: 16px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.gradient-border::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -2px; |
|
|
left: -2px; |
|
|
right: -2px; |
|
|
bottom: -2px; |
|
|
background: linear-gradient(45deg, #3B4CCA, #DC0A2D, #FFCB05); |
|
|
background-size: 200% 200%; |
|
|
z-index: -1; |
|
|
border-radius: 18px; |
|
|
animation: gradientBG 5s ease infinite; |
|
|
} |
|
|
|
|
|
@keyframes gradientBG { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
|
|
|
|
|
|
.floating-card { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: linear-gradient(#3B4CCA, #DC0A2D); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: linear-gradient(#2C3AA3, #A90821); |
|
|
} |
|
|
|
|
|
|
|
|
.tooltip { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.tooltip .tooltip-text { |
|
|
visibility: hidden; |
|
|
width: 120px; |
|
|
background-color: #333; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.tooltip .tooltip-text::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
left: 50%; |
|
|
margin-left: -5px; |
|
|
border-width: 5px; |
|
|
border-style: solid; |
|
|
border-color: #333 transparent transparent transparent; |
|
|
} |
|
|
|
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.ripple { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.ripple:after { |
|
|
content: ""; |
|
|
display: block; |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
top: 0; |
|
|
left: 0; |
|
|
pointer-events: none; |
|
|
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); |
|
|
background-repeat: no-repeat; |
|
|
background-position: 50%; |
|
|
transform: scale(10, 10); |
|
|
opacity: 0; |
|
|
transition: transform .5s, opacity 1s; |
|
|
} |
|
|
|
|
|
.ripple:active:after { |
|
|
transform: scale(0, 0); |
|
|
opacity: 0.3; |
|
|
transition: 0s; |
|
|
} |
|
|
|
|
|
|
|
|
.glow-on-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.glow-on-hover:hover { |
|
|
box-shadow: 0 0 20px rgba(220, 10, 45, 0.5); |
|
|
} |
|
|
|
|
|
|
|
|
.custom-checkbox { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background: #fff; |
|
|
border: 2px solid #D1D5DB; |
|
|
border-radius: 4px; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.custom-checkbox:after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
display: none; |
|
|
left: 6px; |
|
|
top: 2px; |
|
|
width: 5px; |
|
|
height: 10px; |
|
|
border: solid white; |
|
|
border-width: 0 3px 3px 0; |
|
|
transform: rotate(45deg); |
|
|
} |
|
|
|
|
|
input:checked ~ .custom-checkbox { |
|
|
background: #3B4CCA; |
|
|
border-color: #3B4CCA; |
|
|
} |
|
|
|
|
|
input:checked ~ .custom-checkbox:after { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
|
|
|
.custom-radio { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background: #fff; |
|
|
border: 2px solid #D1D5DB; |
|
|
border-radius: 50%; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.custom-radio:after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
display: none; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background: #3B4CCA; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
input:checked ~ .custom-radio { |
|
|
border-color: #3B4CCA; |
|
|
} |
|
|
|
|
|
input:checked ~ .custom-radio:after { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
|
|
|
.toggle-switch { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
width: 50px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
.toggle-switch input { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
} |
|
|
|
|
|
.slider { |
|
|
position: absolute; |
|
|
cursor: pointer; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: #D1D5DB; |
|
|
transition: .4s; |
|
|
border-radius: 24px; |
|
|
} |
|
|
|
|
|
.slider:before { |
|
|
position: absolute; |
|
|
content: ""; |
|
|
height: 16px; |
|
|
width: 16px; |
|
|
left: 4px; |
|
|
bottom: 4px; |
|
|
background-color: white; |
|
|
transition: .4s; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
input:checked + .slider { |
|
|
background-color: #3B4CCA; |
|
|
} |
|
|
|
|
|
input:checked + .slider:before { |
|
|
transform: translateX(26px); |
|
|
} |
|
|
|
|
|
|
|
|
.custom-range { |
|
|
-webkit-appearance: none; |
|
|
width: 100%; |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
background: #D1D5DB; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.custom-range::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: #3B4CCA; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.custom-range::-webkit-slider-thumb:hover { |
|
|
transform: scale(1.2); |
|
|
box-shadow: 0 0 5px rgba(59, 76, 202, 0.5); |
|
|
} |
|
|
|
|
|
|
|
|
.custom-select { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.custom-select select { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.select-selected { |
|
|
background-color: white; |
|
|
border: 1px solid #D1D5DB; |
|
|
border-radius: 0.5rem; |
|
|
padding: 0.75rem; |
|
|
cursor: pointer; |
|
|
user-select: none; |
|
|
} |
|
|
|
|
|
.select-selected:after { |
|
|
position: absolute; |
|
|
content: ""; |
|
|
top: 50%; |
|
|
right: 15px; |
|
|
width: 0; |
|
|
height: 0; |
|
|
border: 6px solid transparent; |
|
|
border-color: #9CA3AF transparent transparent transparent; |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
|
|
|
.select-selected.select-arrow-active:after { |
|
|
border-color: transparent transparent #9CA3AF transparent; |
|
|
top: 35%; |
|
|
} |
|
|
|
|
|
.select-items div,.select-selected { |
|
|
padding: 0.75rem; |
|
|
border: 1px solid transparent; |
|
|
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.select-items { |
|
|
position: absolute; |
|
|
background-color: white; |
|
|
top: 100%; |
|
|
left: 0; |
|
|
right: 0; |
|
|
z-index: 99; |
|
|
border-radius: 0.5rem; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
max-height: 200px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.select-hide { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.select-items div:hover, .same-as-selected { |
|
|
background-color: rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.custom-tabs { |
|
|
display: flex; |
|
|
border-bottom: 1px solid #E5E7EB; |
|
|
} |
|
|
|
|
|
.custom-tab { |
|
|
padding: 0.75rem 1.5rem; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
font-weight: 600; |
|
|
color: #6B7280; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.custom-tab:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -1px; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 3px; |
|
|
background: #3B4CCA; |
|
|
transform: scaleX(0); |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.custom-tab.active { |
|
|
color: #3B4CCA; |
|
|
} |
|
|
|
|
|
.custom-tab.active:after { |
|
|
transform: scaleX(1); |
|
|
} |
|
|
|
|
|
.custom-tab-content { |
|
|
display: none; |
|
|
padding: 1.5rem 0; |
|
|
animation: fadeIn 0.5s; |
|
|
} |
|
|
|
|
|
.custom-tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
|
|
|
.custom-accordion { |
|
|
border: 1px solid #E5E7EB; |
|
|
border-radius: 0.5rem; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.accordion-header { |
|
|
padding: 1rem; |
|
|
background: #F9FAFB; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.accordion-header:hover { |
|
|
background: #F3F4F6; |
|
|
} |
|
|
|
|
|
.accordion-content { |
|
|
padding: 0; |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.accordion-content-inner { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.accordion-icon { |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.accordion-active .accordion-icon { |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
|
|
|
|
|
|
.custom-modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
z-index: 1000; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.custom-modal.active { |
|
|
display: flex; |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background: white; |
|
|
border-radius: 1rem; |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
|
|
max-width: 500px; |
|
|
width: 90%; |
|
|
max-height: 90vh; |
|
|
overflow-y: auto; |
|
|
transform: translateY(-20px); |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.custom-modal.active .modal-content { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.modal-header { |
|
|
padding: 1.5rem; |
|
|
border-bottom: 1px solid #E5E7EB; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.modal-title { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 600; |
|
|
color: #1F2937; |
|
|
} |
|
|
|
|
|
.modal-close { |
|
|
width: 2rem; |
|
|
height: 2rem; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.modal-close:hover { |
|
|
background: #F3F4F6; |
|
|
} |
|
|
|
|
|
.modal-body { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.modal-footer { |
|
|
padding: 1.5rem; |
|
|
border-top: 1px solid #E5E7EB; |
|
|
display: flex; |
|
|
justify-content: flex-end; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
|
|
|
.custom-notification { |
|
|
position: fixed; |
|
|
top: 1rem; |
|
|
right: 1rem; |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
z-index: 1001; |
|
|
transform: translateX(150%); |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.custom-notification.active { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.notification-icon { |
|
|
margin-right: 0.75rem; |
|
|
font-size: 1.25rem; |
|
|
} |
|
|
|
|
|
.notification-close { |
|
|
margin-left: 1rem; |
|
|
cursor: pointer; |
|
|
opacity: 0.7; |
|
|
transition: opacity 0.2s; |
|
|
} |
|
|
|
|
|
.notification-close:hover { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.notification-success { |
|
|
background: #ECFDF5; |
|
|
color: #065F46; |
|
|
} |
|
|
|
|
|
.notification-error { |
|
|
background: #FEF2F2; |
|
|
color: #B91C1C; |
|
|
} |
|
|
|
|
|
.notification-warning { |
|
|
background: #FFFBEB; |
|
|
color: #92400E; |
|
|
} |
|
|
|
|
|
.notification-info { |
|
|
background: #EFF6FF; |
|
|
color: #1E40AF; |
|
|
} |
|
|
|
|
|
|
|
|
.custom-dropdown { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.dropdown-toggle { |
|
|
padding: 0.5rem 1rem; |
|
|
background: white; |
|
|
border: 1px solid #D1D5DB; |
|
|
border-radius: 0.5rem; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.dropdown-toggle:hover { |
|
|
border-color: #9CA3AF; |
|
|
} |
|
|
|
|
|
.dropdown-toggle:after { |
|
|
content: ""; |
|
|
display: inline-block; |
|
|
margin-left: 0.5rem; |
|
|
width: 0; |
|
|
height: 0; |
|
|
border-left: 5px solid transparent; |
|
|
border-right: 5px solid transparent; |
|
|
border-top: 5px solid #9CA3AF; |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
|
|
|
.dropdown-toggle.active:after { |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
|
|
|
.dropdown-menu { |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
left: 0; |
|
|
background: white; |
|
|
border: 1px solid #E5E7EB; |
|
|
border-radius: 0.5rem; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
min-width: 200px; |
|
|
z-index: 100; |
|
|
opacity: 0; |
|
|
visibility: hidden; |
|
|
transform: translateY(10px); |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.dropdown-menu.active { |
|
|
opacity: 1; |
|
|
visibility: visible; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.dropdown-item { |
|
|
padding: 0.75rem 1rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.dropdown-item:hover { |
|
|
background: #F3F4F6; |
|
|
} |
|
|
|
|
|
.dropdown-divider { |
|
|
height: 1px; |
|
|
background: #E5E7EB; |
|
|
margin: 0.25rem 0; |
|
|
} |
|
|
|
|
|
table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
} |
|
|
|
|
|
th { |
|
|
text-align: left; |
|
|
padding: 12px 15px; |
|
|
background-color: #f8fafc; |
|
|
font-weight: 600; |
|
|
color: #4a5568; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.05em; |
|
|
border-bottom: 1px solid #e2e8f0; |
|
|
} |
|
|
|
|
|
td { |
|
|
padding: 12px 15px; |
|
|
border-bottom: 1px solid #e2e8f0; |
|
|
} |
|
|
|
|
|
tr:hover { |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
|
|
|
.type-badge { |
|
|
display: inline-block; |
|
|
padding: 2px 10px; |
|
|
border-radius: 12px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 600; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="pokemon-bg"> |
|
|
|
|
|
<header class="header-gradient shadow-lg sticky top-0 z-50"> |
|
|
<div class="header-content max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="logo-container"> |
|
|
<div class="logo-icon"> |
|
|
<i class="fas fa-pokeball text-pokemon-red text-xl"></i> |
|
|
</div> |
|
|
<h1 class="logo-text poke-font">PokéStats Pro</h1> |
|
|
</div> |
|
|
|
|
|
<div class="user-info"> |
|
|
<span class="user-name">Trainer Ash</span> |
|
|
<div class="logout-btn ripple"> |
|
|
<i class="fas fa-sign-out-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="main-content max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
|
|
|
<div class="dashboard-header mb-8"> |
|
|
<div> |
|
|
<h2 class="dashboard-title text-3xl font-bold text-gray-800">Your Pokémon TCG Dashboard</h2> |
|
|
<p class="dashboard-subtitle">Track your matches, analyze stats, and become a Pokémon Master!</p> |
|
|
</div> |
|
|
<button class="add-deck-btn ripple glow-on-hover"> |
|
|
<i class="fas fa-plus mr-2"></i> New Deck |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="pokemon-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="stat-icon bg-pokemon-blue text-white p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-trophy"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Total Matches</h3> |
|
|
<p class="text-sm text-gray-500">All recorded matches</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-3xl font-bold text-pokemon-blue mb-2">42</div> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-pokemon-blue rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pokemon-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="stat-icon bg-green-500 text-white p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Win Rate</h3> |
|
|
<p class="text-sm text-gray-500">Percentage of wins</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-3xl font-bold text-green-500 mb-2">71.4%</div> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-green-500 rounded-full" style="width: 71.4%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pokemon-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="stat-icon bg-pokemon-red text-white p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-fire"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Current Streak</h3> |
|
|
<p class="text-sm text-gray-500">Consecutive wins</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-3xl font-bold text-pokemon-red mb-2">5</div> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-pokemon-red rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="mb-12"> |
|
|
<div class="section-header mb-6"> |
|
|
<h2 class="section-title text-2xl font-bold text-gray-800">Recent Matches</h2> |
|
|
<button class="add-btn ripple"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Match |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="recent-matches grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
|
|
|
|
<div class="match-card pokemon-card-3d rounded-lg hover:shadow-lg transition-all duration-300"> |
|
|
<div class="match-header"> |
|
|
<h3 class="match-opponent">Vs. Misty</h3> |
|
|
<span class="match-date text-xs text-gray-500">2 hours ago</span> |
|
|
</div> |
|
|
<div class="match-details grid grid-cols-2 gap-2 mb-3"> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-trophy text-yellow-500"></i> |
|
|
<span>3 Prizes</span> |
|
|
</div> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-clock text-blue-500"></i> |
|
|
<span>15 min</span> |
|
|
</div> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-redo text-orange-500"></i> |
|
|
<span>1 Mulligan</span> |
|
|
</div> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-flag text-purple-500"></i> |
|
|
<span>Went First</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="match-footer"> |
|
|
<span class="match-result match-win">Victory</span> |
|
|
<span class="match-prize">+25 Rating</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="match-card pokemon-card-3d rounded-lg hover:shadow-lg transition-all duration-300"> |
|
|
<div class="match-header"> |
|
|
<h3 class="match-opponent">Vs. Brock</h3> |
|
|
<span class="match-date text-xs text-gray-500">1 day ago</span> |
|
|
</div> |
|
|
<div class="match-details grid grid-cols-2 gap-2 mb-3"> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-trophy text-yellow-500"></i> |
|
|
<span>1 Prize</span> |
|
|
</div> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-clock text-blue-500"></i> |
|
|
<span>22 min</span> |
|
|
</div> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-redo text-orange-500"></i> |
|
|
<span>2 Mulligans</span> |
|
|
</div> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-flag text-purple-500"></i> |
|
|
<span>Went Second</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="match-footer"> |
|
|
<span class="match-result match-loss">Defeat</span> |
|
|
<span class="match-prize">-15 Rating</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="match-card pokemon-card-3d rounded-lg hover:shadow-lg transition-all duration-300"> |
|
|
<div class="match-header"> |
|
|
<h3 class="match-opponent">Vs. Gary</h3> |
|
|
<span class="match-date text-xs text-gray-500">3 days ago</span> |
|
|
</div> |
|
|
<div class="match-details grid grid-cols-2 gap-2 mb-3"> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-trophy text-yellow-500"></i> |
|
|
<span>6 Prizes</span> |
|
|
</div> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-clock text-blue-500"></i> |
|
|
<span>8 min</span> |
|
|
</div> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-redo text-orange-500"></i> |
|
|
<span>0 Mulligans</span> |
|
|
</div> |
|
|
<div class="match-detail"> |
|
|
<i class="fas fa-flag text-purple-500"></i> |
|
|
<span>Went First</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="match-footer"> |
|
|
<span class="match-result match-win">Victory</span> |
|
|
<span class="match-prize">+30 Rating</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12"> |
|
|
<div class="section-header mb-6"> |
|
|
<h2 class="section-title text-2xl font-bold text-gray-800">Deck Statistics</h2> |
|
|
<div class="deck-type-selector"> |
|
|
<button class="deck-type-btn active">All Decks</button> |
|
|
<button class="deck-type-btn">Standard</button> |
|
|
<button class="deck-type-btn">Expanded</button> |
|
|
<button class="deck-type-btn">Theme</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="stat-grid grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="stat-card-large bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="stat-card-header"> |
|
|
<h3 class="stat-card-title">Win Rate by Deck</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm text-gray-500 mr-2">Last 30 days</span> |
|
|
<i class="fas fa-info-circle text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-64 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<div class="pokeball-loader mx-auto mb-4"></div> |
|
|
<p class="text-gray-500">Loading chart data...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="stat-card-large bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="stat-card-header"> |
|
|
<h3 class="stat-card-title">Match Duration</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm text-gray-500 mr-2">Average: 12.4 min</span> |
|
|
<i class="fas fa-info-circle text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-64 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<div class="pokeball-loader mx-auto mb-4"></div> |
|
|
<p class="text-gray-500">Loading chart data...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12"> |
|
|
<div class="section-header mb-6"> |
|
|
<h2 class="section-title text-2xl font-bold text-gray-800">Your Decks</h2> |
|
|
<div class="flex items-center"> |
|
|
<div class="custom-dropdown mr-4"> |
|
|
<div class="dropdown-toggle"> |
|
|
<span>Sort by: Recent</span> |
|
|
</div> |
|
|
<div class="dropdown-menu"> |
|
|
<div class="dropdown-item">Recent</div> |
|
|
<div class="dropdown-item">Win Rate</div> |
|
|
<div class="dropdown-item">Matches</div> |
|
|
<div class="dropdown-item">Name</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="add-btn ripple"> |
|
|
<i class="fas fa-plus mr-2"></i> New Deck |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden mb-8"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Deck Name</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Format</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Matches</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Win Rate</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Played</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<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-full" src="https://images.pokemontcg.io/base1/4_hires.png" alt="Blastoise VMAX"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Blastoise VMAX</div> |
|
|
<div class="text-sm text-gray-500">Water Deck</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="type-badge bg-pokemon-blue text-white">Water</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Standard</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<div class="flex items-center"> |
|
|
<span class="mr-2">75%</span> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-green-500 h-2.5 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-pokemon-blue hover:text-pokemon-red mr-3"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-pokemon-red hover:text-pokemon-blue"><i class="fas fa-trash"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<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-full" src="https://images.pokemontcg.io/swsh45/154_hires.png" alt="Pikachu & Zekrom"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Pikachu & Zekrom</div> |
|
|
<div class="text-sm text-gray-500">Electric Deck</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="type-badge bg-pokemon-yellow text-black">Electric</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Expanded</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<div class="flex items-center"> |
|
|
<span class="mr-2">73%</span> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-green-500 h-2.5 rounded-full" style="width: 73%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 week ago</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-pokemon-blue hover:text-pokemon-red mr-3"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-pokemon-red hover:text-pokemon-blue"><i class="fas fa-trash"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<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-full" src="https://images.pokemontcg.io/swsh9/86_hires.png" alt="Rapid Strike Urshifu"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Rapid Strike Urshifu</div> |
|
|
<div class="text-sm text-gray-500">Fighting Deck</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="type-badge bg-fighting text-white">Fighting</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Standard</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<div class="flex items-center"> |
|
|
<span class="mr-2">67%</span> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-green-500 h-2.5 rounded-full" style="width: 67%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 days ago</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-pokemon-blue hover:text-pokemon-red mr-3"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-pokemon-red hover:text-pokemon-blue"><i class="fas fa-trash"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="decks-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<a href="deck-detail.html?id=1" class="deck-card gradient-border hover:shadow-lg transition-all duration-300 block"> |
|
|
<div class="deck-image" style="background-image: url('https://images.pokemontcg.io/base1/4_hires.png');"> |
|
|
<div class="absolute bottom-0 left-0 p-4 w-full"> |
|
|
<div class="flex justify-between items-end"> |
|
|
<div> |
|
|
<h3 class="deck-name text-white font-bold">Blastoise VMAX</h3> |
|
|
<p class="deck-date text-white text-opacity-80 text-sm">Updated 2 days ago</p> |
|
|
</div> |
|
|
<span class="type-badge bg-pokemon-blue text-white">Water</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="deck-content bg-white"> |
|
|
<div class="deck-stats grid grid-cols-3 gap-2 mb-4"> |
|
|
<div class="stat-item"> |
|
|
<div class="stat-value">15</div> |
|
|
<div class="stat-label">Wins</div> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<div class="stat-value">5</div> |
|
|
<div class="stat-label">Losses</div> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<div class="stat-value">75%</div> |
|
|
<div class="stat-label">Win Rate</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="deck-notes"> |
|
|
<i class="fas fa-sticky-note"></i> |
|
|
<span>Focuses on rapid energy acceleration with Deluge Blastoise...</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<a href="deck-detail.html?id=2" class="deck-card gradient-border hover:shadow-lg transition-all duration-300 block"> |
|
|
<div class="deck-image" style="background-image: url('https://images.pokemontcg.io/swsh45/154_hires.png');"> |
|
|
<div class="absolute bottom-0 left-0 p-4 w-full"> |
|
|
<div class="flex justify-between items-end"> |
|
|
<div> |
|
|
<h3 class="deck-name text-white font-bold">Pikachu & Zekrom</h3> |
|
|
<p class="deck-date text-white text-opacity-80 text-sm">Updated 1 week ago</p> |
|
|
</div> |
|
|
<span class="type-badge bg-pokemon-yellow text-black">Electric</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="deck-content bg-white"> |
|
|
<div class="deck-stats grid grid-cols-3 gap-2 mb-4"> |
|
|
<div class="stat-item"> |
|
|
<div class="stat-value">22</div> |
|
|
<div class="stat-label">Wins</div> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<div class="stat-value">8</div> |
|
|
<div class="stat-label">Losses</div> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<div class="stat-value">73%</div> |
|
|
<div class="stat-label">Win Rate</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="deck-notes"> |
|
|
<i class="fas fa-sticky-note"></i> |
|
|
<span>Tag Team powerhouse with Electropower boosts...</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<a href="deck-detail.html?id=3" class="deck-card gradient-border hover:shadow-lg transition-all duration-300 block"> |
|
|
<div class="deck-image" style="background-image: url('https://images.pokemontcg.io/swsh9/86_hires.png');"> |
|
|
<div class="absolute bottom-0 left-0 p-4 w-full"> |
|
|
<div class="flex justify-between items-end"> |
|
|
<div> |
|
|
<h3 class="deck-name text-white font-bold">Rapid Strike Urshifu</h3> |
|
|
<p class="deck-date text-white text-opacity-80 text-sm">Updated 3 days ago</p> |
|
|
</div> |
|
|
<span class="type-badge bg-fighting text-white">Fighting</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="deck-content bg-white"> |
|
|
<div class="deck-stats grid grid-cols-3 gap-2 mb-4"> |
|
|
<div class="stat-item"> |
|
|
<div class="stat-value">10</div> |
|
|
<div class="stat-label">Wins</div> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<div class="stat-value">5</div> |
|
|
<div class="stat-label">Losses</div> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<div class="stat-value">67%</div> |
|
|
<div class="stat-label">Win Rate</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="deck-notes"> |
|
|
<i class="fas fa-sticky-note"></i> |
|
|
<span>Quick attacks with Octillery draw engine...</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
</main> |
|
|
|
|
|
|
|
|
<div class="custom-modal" id="newDeckModal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h3 class="modal-title">Create New Deck</h3> |
|
|
<button class="modal-close" id="closeDeckModal"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<form id="deckForm"> |
|
|
<div class="input-group mb-4"> |
|
|
<label for="deckName" class="block text-sm font-medium text-gray-700 mb-1">Deck Name</label> |
|
|
<input type="text" id="deckName" class="form-input" placeholder="Enter deck name" required> |
|
|
</div> |
|
|
|
|
|
<div class="input-group mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Primary Type</label> |
|
|
<div class="grid grid-cols-3 gap-2"> |
|
|
<button type="button" class="type-badge grass">Grass</button> |
|
|
<button type="button" class="type-badge fire">Fire</button> |
|
|
<button type="button" class="type-badge water">Water</button> |
|
|
<button type="button" class="type-badge electric">Electric</button> |
|
|
<button type="button" class="type-badge psychic">Psychic</button> |
|
|
<button type="button" class="type-badge fighting">Fighting</button> |
|
|
<button type="button" class="type-badge dark">Dark</button> |
|
|
<button type="button" class="type-badge fairy">Fairy</button> |
|
|
<button type="button" class="type-badge dragon">Dragon</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="input-group mb-4"> |
|
|
<label for="deckFormat" class="block text-sm font-medium text-gray-700 mb-1">Format</label> |
|
|
<select id="deckFormat" class="form-input" required> |
|
|
<option value="">Select format</option> |
|
|
<option value="standard">Standard</option> |
|
|
<option value="expanded">Expanded</option> |
|
|
<option value="theme">Theme</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="input-group mb-4"> |
|
|
<label for="deckImage" class="block text-sm font-medium text-gray-700 mb-1">Cover Image URL</label> |
|
|
<input type="url" id="deckImage" class="form-input" placeholder="https://example.com/image.jpg"> |
|
|
</div> |
|
|
|
|
|
<div class="input-group mb-4"> |
|
|
<label for="deckDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label> |
|
|
<textarea id="deckDescription" class="notes-area" placeholder="Describe your deck strategy..." rows="3"></textarea> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button type="button" class="btn btn-secondary mr-2" id="cancelDeckModal">Cancel</button> |
|
|
<button type="button" class="btn btn-primary" id="saveDeck">Create Deck</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="custom-modal" id="addMatchModal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h3 class="modal-title">Add New Match</h3> |
|
|
<button class="modal-close" id="closeMatchModal"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<form id="matchForm"> |
|
|
<div class="input-group mb-4"> |
|
|
<label for="opponentName" class="block text-sm font-medium text-gray-700 mb-1">Opponent Name</label> |
|
|
<input type="text" id="opponentName" class="form-input" placeholder="Enter opponent's name"> |
|
|
</div> |
|
|
|
|
|
<div class="input-group mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Deck Used</label> |
|
|
<select class="form-input"> |
|
|
<option value="">Select your deck</option> |
|
|
<option value="1">Blastoise VMAX</option> |
|
|
<option value="2">Pikachu & Zekrom</option> |
|
|
<option value="3">Rapid Strike Urshifu</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="input-group mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Opponent's Deck Type</label> |
|
|
<div class="grid grid-cols-3 gap-2"> |
|
|
<button type="button" class="type-badge grass">Grass</button> |
|
|
<button type="button" class="type-badge fire">Fire</button> |
|
|
<button type="button" class="type-badge water">Water</button> |
|
|
<button type="button" class="type-badge electric">Electric</button> |
|
|
<button type="button" class="type-badge psychic">Psychic</button> |
|
|
<button type="button" class="type-badge fighting">Fighting</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="input-group mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Match Result</label> |
|
|
<div class="radio-group"> |
|
|
<label class="radio-option"> |
|
|
<input type="radio" name="result" value="win" checked> |
|
|
<span class="ml-2">Win</span> |
|
|
</label> |
|
|
<label class="radio-option"> |
|
|
<input type="radio" name="result" value="loss"> |
|
|
<span class="ml-2">Loss</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
|
<div class="input-group"> |
|
|
<label for="prizesTaken" class="block text-sm font-medium text-gray-700 mb-1">Prizes Taken</label> |
|
|
<input type="number" id="prizesTaken" class="form-input" min="0" max="6" value="6"> |
|
|
</div> |
|
|
<div class="input-group"> |
|
|
<label for="mulligans" class="block text-sm font-medium text-gray-700 mb-1">Mulligans</label> |
|
|
<input type="number" id="mulligans" class="form-input" min="0" max="5" value="0"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="input-group mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Who Went First?</label> |
|
|
<div class="radio-group"> |
|
|
<label class="radio-option"> |
|
|
<input type="radio" name="first" value="me" checked> |
|
|
<span class="ml-2">I did</span> |
|
|
</label> |
|
|
<label class="radio-option"> |
|
|
<input type="radio" name="first" value="opponent"> |
|
|
<span class="ml-2">Opponent</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="input-group mb-4"> |
|
|
<label for="matchDuration" class="block text-sm font-medium text-gray-700 mb-1">Match Duration (minutes)</label> |
|
|
<input type="number" id="matchDuration" class="form-input" min="1" max="60" value="15"> |
|
|
</div> |
|
|
|
|
|
<div class="input-group mb-4"> |
|
|
<label for="matchNotes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label> |
|
|
<textarea id="matchNotes" class="notes-area" placeholder="Add any notes about the match..."></textarea> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button class="btn btn-secondary mr-2">Cancel</button> |
|
|
<button class="btn btn-primary">Save Match</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="custom-notification notification-success" id="successNotification"> |
|
|
<i class="notification-icon fas fa-check-circle"></i> |
|
|
<div> |
|
|
<h4 class="font-semibold">Success!</h4> |
|
|
<p class="text-sm">Match recorded successfully.</p> |
|
|
</div> |
|
|
<span class="notification-close"> |
|
|
<i class="fas fa-times"></i> |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="mb-12" id="deckDetailSection"> |
|
|
<div class="section-header mb-6"> |
|
|
<h2 class="section-title text-2xl font-bold text-gray-800" id="deckNameTitle">Deck Details</h2> |
|
|
<button class="back-btn ripple"> |
|
|
<i class="fas fa-arrow-left mr-2"></i> Back to Decks |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="deck-info-card bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img id="deckImage" class="h-16 w-16 rounded-full mr-4" src="" alt="Deck Image"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-gray-800" id="deckName"></h3> |
|
|
<div class="flex items-center mt-1"> |
|
|
<span class="type-badge mr-2" id="deckType"></span> |
|
|
<span class="text-sm text-gray-500" id="deckFormat"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4" id="deckDescription"></p> |
|
|
<div class="grid grid-cols-3 gap-2 text-center"> |
|
|
<div> |
|
|
<div class="text-xl font-bold text-pokemon-blue" id="totalMatches">0</div> |
|
|
<div class="text-xs text-gray-500">Matches</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-xl font-bold text-green-500" id="winRate">0%</div> |
|
|
<div class="text-xs text-gray-500">Win Rate</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-xl font-bold text-pokemon-yellow" id="avgDuration">0</div> |
|
|
<div class="text-xs text-gray-500">Avg. Duration</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="deck-chart bg-white rounded-xl shadow-md overflow-hidden col-span-2"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Win Rate Over Time</h3> |
|
|
<div class="h-64 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<div class="pokeball-loader mx-auto mb-4"></div> |
|
|
<p class="text-gray-500">Loading chart data...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden mb-8"> |
|
|
<div class="px-6 py-4 border-b border-gray-200"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Match History</h3> |
|
|
</div> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Opponent</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Result</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prizes</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200" id="matchHistoryBody"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search); |
|
|
const deckId = urlParams.get('id'); |
|
|
|
|
|
|
|
|
const decks = { |
|
|
'1': { |
|
|
name: 'Blastoise VMAX', |
|
|
type: 'Water', |
|
|
format: 'Standard', |
|
|
image: 'https://images.pokemontcg.io/base1/4_hires.png', |
|
|
description: 'Focuses on rapid energy acceleration with Deluge Blastoise...', |
|
|
matches: 20, |
|
|
winRate: 75, |
|
|
avgDuration: 12 |
|
|
}, |
|
|
'2': { |
|
|
name: 'Pikachu & Zekrom', |
|
|
type: 'Electric', |
|
|
format: 'Expanded', |
|
|
image: 'https://images.pokemontcg.io/swsh45/154_hires.png', |
|
|
description: 'Tag Team powerhouse with Electropower boosts...', |
|
|
matches: 30, |
|
|
winRate: 73, |
|
|
avgDuration: 15 |
|
|
}, |
|
|
'3': { |
|
|
name: 'Rapid Strike Urshifu', |
|
|
type: 'Fighting', |
|
|
format: 'Standard', |
|
|
image: 'https://images.pokemontcg.io/swsh9/86_hires.png', |
|
|
description: 'Quick attacks with Octillery draw engine...', |
|
|
matches: 15, |
|
|
winRate: 67, |
|
|
avgDuration: 10 |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const matches = { |
|
|
'1': [ |
|
|
{ opponent: 'Misty', result: 'Win', prizes: 6, duration: 8, date: '3 days ago' }, |
|
|
{ opponent: 'Brock', result: 'Loss', prizes: 2, duration: 22, date: '1 week ago' }, |
|
|
{ opponent: 'Gary', result: 'Win', prizes: 6, duration: 15, date: '2 weeks ago' } |
|
|
], |
|
|
'2': [ |
|
|
{ opponent: 'Red', result: 'Win', prizes: 6, duration: 12, date: '2 days ago' }, |
|
|
{ opponent: 'Blue', result: 'Win', prizes: 4, duration: 18, date: '5 days ago' } |
|
|
], |
|
|
'3': [ |
|
|
{ opponent: 'Green', result: 'Loss', prizes: 1, duration: 25, date: '1 day ago' }, |
|
|
{ opponent: 'Yellow', result: 'Win', prizes: 6, duration: 10, date: '3 days ago' } |
|
|
] |
|
|
}; |
|
|
|
|
|
|
|
|
if (deckId && decks[deckId]) { |
|
|
const deck = decks[deckId]; |
|
|
document.getElementById('deckNameTitle').textContent = deck.name; |
|
|
document.getElementById('deckName').textContent = deck.name; |
|
|
document.getElementById('deckImage').src = deck.image; |
|
|
document.getElementById('deckType').textContent = deck.type; |
|
|
document.getElementById('deckType').className = `type-badge bg-${deck.type.toLowerCase()} ${deck.type === 'Electric' ? 'text-black' : 'text-white'}`; |
|
|
document.getElementById('deckFormat').textContent = deck.format; |
|
|
document.getElementById('deckDescription').textContent = deck.description; |
|
|
document.getElementById('totalMatches').textContent = deck.matches; |
|
|
document.getElementById('winRate').textContent = `${deck.winRate}%`; |
|
|
document.getElementById('avgDuration').textContent = `${deck.avgDuration} min`; |
|
|
|
|
|
|
|
|
const matchHistoryBody = document.getElementById('matchHistoryBody'); |
|
|
if (matches[deckId]) { |
|
|
matches[deckId].forEach(match => { |
|
|
const row = document.createElement('tr'); |
|
|
row.className = 'hover:bg-gray-50'; |
|
|
row.innerHTML = ` |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium text-gray-900">${match.opponent}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 text-sm rounded-full ${match.result === 'Win' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}"> |
|
|
${match.result} |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
${match.prizes} |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
${match.duration} min |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
${match.date} |
|
|
</td> |
|
|
`; |
|
|
matchHistoryBody.appendChild(row); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelector('.back-btn').addEventListener('click', () => { |
|
|
window.location.href = 'index.html'; |
|
|
}); |
|
|
|
|
|
document.querySelector('.add-btn').addEventListener('click', function() { |
|
|
document.getElementById('addMatchModal').classList.add('active'); |
|
|
}); |
|
|
|
|
|
document.querySelector('.add-deck-btn').addEventListener('click', function() { |
|
|
document.getElementById('newDeckModal').classList.add('active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeMatchModal').addEventListener('click', function() { |
|
|
document.getElementById('addMatchModal').classList.remove('active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeDeckModal').addEventListener('click', function() { |
|
|
document.getElementById('newDeckModal').classList.remove('active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('cancelDeckModal').addEventListener('click', function() { |
|
|
document.getElementById('newDeckModal').classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('saveDeck').addEventListener('click', function() { |
|
|
const deckName = document.getElementById('deckName').value; |
|
|
const deckFormat = document.getElementById('deckFormat').value; |
|
|
const deckImage = document.getElementById('deckImage').value; |
|
|
const deckDescription = document.getElementById('deckDescription').value; |
|
|
|
|
|
if (!deckName || !deckFormat) { |
|
|
alert('Please fill in all required fields'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
console.log('New deck created:', { |
|
|
name: deckName, |
|
|
format: deckFormat, |
|
|
image: deckImage, |
|
|
description: deckDescription |
|
|
}); |
|
|
|
|
|
document.getElementById('newDeckModal').classList.remove('active'); |
|
|
showNotification('Deck created successfully!'); |
|
|
|
|
|
|
|
|
document.getElementById('deckForm').reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
function showNotification(message) { |
|
|
const notification = document.getElementById('successNotification'); |
|
|
notification.querySelector('p').textContent = message; |
|
|
notification.classList.add('active'); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.remove('active'); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelector('.notification-close').addEventListener('click', function() { |
|
|
document.getElementById('successNotification').classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.dropdown-toggle').forEach(toggle => { |
|
|
toggle.addEventListener('click', function() { |
|
|
const menu = this.nextElementSibling; |
|
|
menu.classList.toggle('active'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.dropdown-menu').forEach(otherMenu => { |
|
|
if (otherMenu !== menu) { |
|
|
otherMenu.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (!e.target.closest('.custom-dropdown')) { |
|
|
document.querySelectorAll('.dropdown-menu').forEach(menu => { |
|
|
menu.classList.remove('active'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.deck-type-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
document.querySelectorAll('.deck-type-btn').forEach(otherBtn => { |
|
|
otherBtn.classList.remove('active'); |
|
|
}); |
|
|
this.classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.type-badge').forEach(badge => { |
|
|
badge.addEventListener('click', function() { |
|
|
this.classList.toggle('bg-opacity-50'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.ripple').forEach(button => { |
|
|
button.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
const rect = this.getBoundingClientRect(); |
|
|
const x = e.clientX - rect.left; |
|
|
const y = e.clientY - rect.top; |
|
|
|
|
|
const ripple = document.createElement('span'); |
|
|
ripple.style.left = x + 'px'; |
|
|
ripple.style.top = y + 'px'; |
|
|
ripple.classList.add('ripple-effect'); |
|
|
|
|
|
this.appendChild(ripple); |
|
|
|
|
|
setTimeout(() => { |
|
|
ripple.remove(); |
|
|
}, 1000); |
|
|
}); |
|
|
}); |
|
|
</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=SUPSINNED/POKEDATA" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
