2026-02-17 15:49:33 -05:00
|
|
|
---
|
2026-02-20 09:11:36 -05:00
|
|
|
import Card from '../components/Card.astro';
|
|
|
|
|
import ebay from "/vendors/ebay.svg?raw";
|
|
|
|
|
import EnergyIcon from './EnergyIcon.astro';
|
|
|
|
|
import RarityIcon from './RarityIcon.astro';
|
|
|
|
|
import SetIcon from './SetIcon.astro';
|
2026-02-17 15:49:33 -05:00
|
|
|
---
|
2026-02-20 09:11:36 -05:00
|
|
|
|
|
|
|
|
<!-- Modal -->
|
|
|
|
|
<div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
|
|
|
|
|
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header border-0">
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
<span class="h4 card-title w-100 pe-2">Pikachu</span><span class="text-secondary smaller ps-2 border-start">070/111</span>
|
|
|
|
|
</div>
|
|
|
|
|
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body pt-0">
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
<div class="card mb-2 border-0">
|
|
|
|
|
<div class="row g-4">
|
|
|
|
|
<div class="col-sm-12 col-md-3">
|
|
|
|
|
<h6 class="text-secondary">Neo Genesis</h6>
|
|
|
|
|
<div class="position-relative d-inline-block"><img src="/cards/88072.jpg" class="card-image img-fluid rounded" alt="..."><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set="Neo Genesis" /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy="Electric" /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity="Common" /></span></div>
|
|
|
|
|
<div class="d-flex flex-row justify-content-between mt-2">
|
|
|
|
|
<div class="h6 text-secondary">Naoyo Kimura</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-sm-12 col-md-7">
|
|
|
|
|
<nav>
|
|
|
|
|
<div class="nav nav-tabs nav-sm-fill border-0" id="nav-tab" role="tablist">
|
|
|
|
|
<button class="nav-link nm active" id="nav-nm" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true"><span class="d-none d-md-inline">Near Mint</span><span class="d-md-none">NM</span></button>
|
|
|
|
|
<button class="nav-link lp" id="nav-lp" data-bs-toggle="tab" data-bs-target="#nav-lp" type="button" role="tab" aria-controls="nav-lp" aria-selected="false"><span class="d-none d-md-inline">Lightly Played</span><span class="d-md-none">LP</span></button>
|
|
|
|
|
<button class="nav-link mp" id="nav-mp" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false"><span class="d-none d-md-inline">Moderately Played</span><span class="d-md-none">MP</span></button>
|
|
|
|
|
<button class="nav-link hp" id="nav-hp" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false"><span class="d-none d-md-inline">Heavily Played</span><span class="d-md-none">HP</span></button>
|
|
|
|
|
<button class="nav-link dmg" id="nav-dmg" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false"><span class="d-none d-md-inline">Damaged</span><span class="d-md-none">DMG</span></button>
|
|
|
|
|
<button class="nav-link vendor" id="nav-vendor" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-md-inline">Inventory</span><span class="d-md-none">+/-</span></button>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
<div class="tab-content" id="nav-tabContent">
|
|
|
|
|
<div class="tab-pane fade show active" id="nav-nm" role="tabpanel" aria-labelledby="nav-nm" tabindex="0">
|
|
|
|
|
<div class="row g-2 mt-2">
|
|
|
|
|
<div class="d-inline-flex justify-content-sm-evenly flex-row flex-md-column flex-wrap flex-md-nowrap mt-2 col-sm-4 col-md-3">
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Market Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Lowest Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Highest Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Volatility</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
|
|
|
|
<h6>Latest Sales</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d-flex flex-column mt-2 col-xs-8 col-md-9">
|
|
|
|
|
<div class="dark-callout rounded p-2 pb-0 h-100">
|
|
|
|
|
<h6>Placeholder for graph</h6>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-pane fade" id="nav-lp" role="tabpanel" aria-labelledby="nav-lp" tabindex="0">
|
|
|
|
|
<div class="row g-2 mt-2">
|
|
|
|
|
<div class="d-flex flex-column mt-2 col-3">
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Market Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Lowest Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Highest Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Volatility</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
|
|
|
|
<h6>Latest Sales</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-pane fade" id="nav-mp" role="tabpanel" aria-labelledby="nav-mp" tabindex="0">
|
|
|
|
|
<div class="row g-2 mt-2">
|
|
|
|
|
<div class="d-flex flex-column mt-2 col-3">
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Market Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Lowest Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Highest Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Volatility</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
|
|
|
|
<h6>Latest Sales</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-pane fade" id="nav-hp" role="tabpanel" aria-labelledby="nav-hp" tabindex="0">
|
|
|
|
|
<div class="row g-2 mt-2">
|
|
|
|
|
<div class="d-flex flex-column mt-2 col-3">
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Market Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Lowest Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Highest Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Volatility</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
|
|
|
|
<h6>Latest Sales</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-pane fade" id="nav-dmg" role="tabpanel" aria-labelledby="nav-dmg" tabindex="0">
|
|
|
|
|
<div class="row g-2 mt-2">
|
|
|
|
|
<div class="d-flex flex-column mt-2 col-3">
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Market Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Lowest Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Highest Price</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2">
|
|
|
|
|
<h6>Volatility</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
|
|
|
|
<h6>Latest Sales</h6>
|
|
|
|
|
<p></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-sm-12 col-md-2 mt-0 mt-md-5">
|
|
|
|
|
<button type="button" class="btn btn-secondary mb-2 w-100"><img src="/vendors/tcgplayer.webp"> TCGPlayer</button>
|
|
|
|
|
<button type="button" class="btn btn-secondary mb-2 w-100"><span set:html={ebay} /></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-end my-0"><small class="text-body-secondary">Prices last updated</small></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
