404 page created with random pokemon encounter. Add sample data to latest sales table and set up NM prices inside modal
This commit is contained in:
zach
19
package-lock.json
generated
19
package-lock.json
generated
@@ -11,6 +11,7 @@
|
||||
"astro": "^5.17.1",
|
||||
"bootstrap": "^5.3.8",
|
||||
"chalk": "^5.6.2",
|
||||
"chart.js": "^4.5.1",
|
||||
"dotenv": "^17.2.4",
|
||||
"drizzle-orm": "^1.0.0-beta.15-859cf75",
|
||||
"mysql2": "^3.16.3",
|
||||
@@ -1365,6 +1366,12 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@kurkle/color": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
|
||||
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@oslojs/encoding": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@oslojs/encoding/-/encoding-1.1.0.tgz",
|
||||
@@ -2722,6 +2729,18 @@
|
||||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "4.5.1",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
|
||||
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@kurkle/color": "^0.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"pnpm": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"astro": "^5.17.1",
|
||||
"bootstrap": "^5.3.8",
|
||||
"chalk": "^5.6.2",
|
||||
"chart.js": "^4.5.1",
|
||||
"dotenv": "^17.2.4",
|
||||
"drizzle-orm": "^1.0.0-beta.15-859cf75",
|
||||
"mysql2": "^3.16.3",
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
@import 'bootstrap/scss/images';
|
||||
@import 'bootstrap/scss/nav';
|
||||
// @import 'bootstrap/scss/accordion';
|
||||
// @import 'bootstrap/scss/alert';
|
||||
@import 'bootstrap/scss/alert';
|
||||
// @import 'bootstrap/scss/badge';
|
||||
// @import 'bootstrap/scss/breadcrumb';
|
||||
// @import 'bootstrap/scss/button-group';
|
||||
@@ -39,7 +39,7 @@
|
||||
// @import 'bootstrap/scss/popover';
|
||||
// @import 'bootstrap/scss/progress';
|
||||
// @import 'bootstrap/scss/spinners';
|
||||
// @import 'bootstrap/scss/tables';
|
||||
@import 'bootstrap/scss/tables';
|
||||
// @import 'bootstrap/scss/toasts';
|
||||
// @import 'bootstrap/scss/tooltip';
|
||||
@import 'bootstrap/scss/transitions';
|
||||
|
||||
@@ -28,151 +28,133 @@
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Card
|
||||
// Cards & Modal
|
||||
// ----------------------
|
||||
|
||||
.tcg-card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-xl {
|
||||
@media (min-width: 768px) {
|
||||
max-width: 95vw;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
max-width: 90vw;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
max-width: 95vw;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
.card-modal {
|
||||
background-color: rgba(1, 11, 18, .8);
|
||||
cursor: default;
|
||||
background-color: rgba(1, 11, 18, 0.8);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link:focus {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
|
||||
color: rgba(0, 0, 0, .94);
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
|
||||
border-color: rgba(0, 0, 0, .0);
|
||||
canvas {
|
||||
max-width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Navigation Tabs
|
||||
// ----------------------
|
||||
.nav-link {
|
||||
font-weight: 600;
|
||||
color: rgba(255,255,255,67);
|
||||
transition: margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
||||
padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
||||
padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);
|
||||
}
|
||||
.nav-link:hover, .nav-link:focus {
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.67);
|
||||
transition:
|
||||
margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
||||
padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
||||
padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.nav-link.nm, .nav-link.nm:hover, .nav-link.nm:focus {
|
||||
border-bottom: 3px solid rgba(156, 204, 102, 1);
|
||||
}
|
||||
.nav-link.nm:hover, .nav-link.nm:focus {
|
||||
background-color: rgba(156, 204, 102, .67);
|
||||
}
|
||||
.nav-link.nm.active {
|
||||
background-color: rgba(156, 204, 102, 1);
|
||||
border-bottom: 3px solid rgba(156, 204, 102, 1);
|
||||
}
|
||||
.nav-link.lp, .nav-link.lp:hover, .nav-link.lp:focus {
|
||||
border-bottom: 3px solid rgba(211, 225, 86, 1);
|
||||
}
|
||||
.nav-link.lp:hover, .nav-link.lp:focus {
|
||||
background-color: rgba(211, 225, 86, .67);
|
||||
}
|
||||
.nav-link.lp.active {
|
||||
background-color: rgba(211, 225, 86, 1);
|
||||
border-bottom: 3px solid rgba(211, 225, 86, 1);
|
||||
}
|
||||
.nav-link.mp, .nav-link.mp:hover, .nav-link.mp:focus {
|
||||
border-bottom: 3px solid rgba(255, 238, 87, 1);
|
||||
}
|
||||
.nav-link.mp:hover, .nav-link.mp:focus {
|
||||
background-color: rgba(255, 238, 87, .67);
|
||||
}
|
||||
.nav-link.mp.active {
|
||||
background-color: rgba(255, 238, 87, 1);
|
||||
border-bottom: 3px solid rgba(255, 238, 87, 1);
|
||||
}
|
||||
.nav-link.hp, .nav-link.hp:hover, .nav-link.hp:focus {
|
||||
border-bottom: 3px solid rgba(255, 201, 41, 1);
|
||||
}
|
||||
.nav-link.hp:hover, .nav-link.hp:focus {
|
||||
background-color: rgba(255, 201, 41, .67);
|
||||
}
|
||||
.nav-link.hp.active {
|
||||
background-color: rgba(255, 201, 41, 1);
|
||||
border-bottom: 3px solid rgba(255, 201, 41, 1);
|
||||
}
|
||||
.nav-link.dmg, .nav-link.dmg:hover, .nav-link.dmg:focus {
|
||||
border-bottom: 3px solid rgba(255, 167, 36, 1);
|
||||
}
|
||||
.nav-link.dmg:hover, .nav-link.dmg:focus {
|
||||
background-color: rgba(255, 167, 36, .67);
|
||||
}
|
||||
.nav-link.dmg.active {
|
||||
background-color: rgba(255, 167, 36, 1);
|
||||
border-bottom: 3px solid rgba(255, 167, 36, 1);
|
||||
}
|
||||
.nav-link.vendor, .nav-link.vendor:hover, .nav-link.vendor:focus {
|
||||
border-bottom: 3px solid hsl(262, 47%, 55%);
|
||||
}
|
||||
.nav-link.vendor:hover, .nav-link.vendor:focus {
|
||||
background-color: hsla(262, 47%, 55%, .67);
|
||||
}
|
||||
.nav-link.vendor.active {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: hsl(262, 47%, 55%);
|
||||
border-bottom: 3px solid hsl(262, 47%, 55%);
|
||||
}
|
||||
}
|
||||
|
||||
.dark-callout {
|
||||
@media (min-width: 768px) {
|
||||
background-color: rgba(44, 48, 59, 1);
|
||||
.nav-tabs {
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: rgba(0, 0, 0, 0.94);
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Tiered Nav-Link Colors
|
||||
$tiers: (
|
||||
nm: rgba(156, 204, 102, 1),
|
||||
lp: rgba(211, 225, 86, 1),
|
||||
mp: rgba(255, 238, 87, 1),
|
||||
hp: rgba(255, 201, 41, 1),
|
||||
dmg: rgba(255, 167, 36, 1),
|
||||
vendor: hsl(262, 47%, 55%)
|
||||
);
|
||||
|
||||
@each $name, $color in $tiers {
|
||||
.nav-link.#{$name} {
|
||||
border-bottom: 3px solid $color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba($color, 0.67);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $color;
|
||||
border-bottom-color: $color;
|
||||
@if $name == vendor {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Misc Components
|
||||
// ----------------------
|
||||
.dark-callout {
|
||||
@media (min-width: 768px) {
|
||||
background-color: rgba(44, 48, 59, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-image {
|
||||
aspect-ratio: 23/32;
|
||||
aspect-ratio: 23 / 32;
|
||||
object-fit: cover;
|
||||
z-index: 998;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Icon sizes
|
||||
.small-icon svg {
|
||||
width: 100%;
|
||||
max-height: 16px;
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
|
||||
.energy-icon svg {
|
||||
width:2.5rem;
|
||||
.energy-icon svg,
|
||||
.rarity-icon-large svg,
|
||||
.set-icon svg {
|
||||
width: 2.5rem;
|
||||
margin-top: -0.25rem;
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
|
||||
.rarity-icon-large svg {
|
||||
width: 2.5rem;
|
||||
.rarity-icon-large svg,
|
||||
.set-icon svg {
|
||||
margin-bottom: -0.25rem;
|
||||
}
|
||||
|
||||
.energy-icon svg {
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
|
||||
.set-icon svg {
|
||||
width: 2.5rem;
|
||||
margin-bottom: -0.25rem;
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
|
||||
.shadow-filter {
|
||||
//filter: drop-shadow(0 30px 30px #333);
|
||||
filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
|
||||
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
|
||||
filter:
|
||||
drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
|
||||
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
@@ -193,7 +175,6 @@
|
||||
);
|
||||
}
|
||||
|
||||
// Base label style
|
||||
.price-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
@@ -215,29 +196,24 @@
|
||||
@media (min-width: 1600px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Your palette tiers
|
||||
.price-label:nth-of-type(n + 2) {
|
||||
background-color: hsl(66, 70%, 61%);
|
||||
&:nth-of-type(n + 2) {
|
||||
background-color: hsl(66, 70%, 61%);
|
||||
}
|
||||
&:nth-of-type(n + 3) {
|
||||
background-color: hsl(54, 100%, 67%);
|
||||
}
|
||||
&:nth-of-type(n + 4) {
|
||||
background-color: hsl(45, 100%, 58%);
|
||||
}
|
||||
&:last-of-type {
|
||||
background-color: hsl(36, 100%, 57%);
|
||||
border-radius: 0.33rem;
|
||||
}
|
||||
}
|
||||
|
||||
.price-label:nth-of-type(n + 3) {
|
||||
background-color: hsl(54, 100%, 67%);
|
||||
}
|
||||
|
||||
.price-label:nth-of-type(n + 4) {
|
||||
background-color: hsl(45, 100%, 58%);
|
||||
}
|
||||
|
||||
.price-label:last-of-type {
|
||||
background-color: hsl(36, 100%, 57%);
|
||||
border-radius: 0.33rem;
|
||||
}
|
||||
|
||||
|
||||
// ----------------------
|
||||
// Search Elements
|
||||
// Search
|
||||
// ----------------------
|
||||
@media (max-width: 768px) {
|
||||
.search-box,
|
||||
|
||||
@@ -9,7 +9,7 @@ import RarityIcon from './RarityIcon.astro';
|
||||
const { query } = Astro.props;
|
||||
const searchResults = await client.collections('cards').documents().search({
|
||||
q: query,
|
||||
query_by: 'productLineName,productName,setName,number,rarityName,Artist',
|
||||
query_by: 'productLineName,productName,setName,number,rarityName',
|
||||
per_page: 250,
|
||||
});
|
||||
const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];
|
||||
@@ -38,9 +38,10 @@ const formatPrice = (price:any) => {
|
||||
const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
|
||||
---
|
||||
{pokemon.map((card) => (
|
||||
<div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
|
||||
<div class="col tcg-card">
|
||||
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
|
||||
<div class="col">
|
||||
<div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
|
||||
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
|
||||
</div>
|
||||
<div class="row row-cols-5 gx-1 price-row mb-2">
|
||||
{card.prices
|
||||
.slice()
|
||||
@@ -49,7 +50,7 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
|
||||
arr.findIndex(p => p.condition === price.condition) === index
|
||||
)
|
||||
.map((price) => (
|
||||
<div class="col price-label ps-xxl-2 ps-1">
|
||||
<div class="col price-label ps-1">
|
||||
{price.condition.split(' ').map((w) => w[0]).join('')}
|
||||
<br />${formatPrice(price.marketPrice)}
|
||||
</div>
|
||||
@@ -57,10 +58,9 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
|
||||
</div>
|
||||
<div class="h5 my-0">{card.productName}</div>
|
||||
<div class="d-flex flex-row lh-1 mt-1">
|
||||
<div class="copy-small flex-grow-1">{card.set?.setCode}</div>
|
||||
<div class="copy-small">{card.number}</div>
|
||||
<div class="text-secondary flex-grow-1">{card.set?.setCode}</div>
|
||||
<div class="text-secondary">{card.number}</div>
|
||||
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import grass from "/src/svg/energy/grass.svg?raw";
|
||||
import fairy from "/src/svg/energy/fairy.svg?raw";
|
||||
import dark from "/src/svg/energy/dark.svg?raw";
|
||||
import darkness from "/src/svg/energy/dark.svg?raw";
|
||||
import dragon from "/src/svg/energy/dragon.svg?raw";
|
||||
import fire from "/src/svg/energy/fire.svg?raw";
|
||||
import water from "/src/svg/energy/water.svg?raw";
|
||||
@@ -16,7 +16,7 @@ const { energy } = Astro.props;
|
||||
const energyMap = {
|
||||
"Grass": grass,
|
||||
"Fairy": fairy,
|
||||
"Dark": dark,
|
||||
"Darkness": darkness,
|
||||
"Dragon": dragon,
|
||||
"Fire": fire,
|
||||
"Water": water,
|
||||
|
||||
@@ -27,10 +27,21 @@ import diamond_and_pearl from "/src/svg/set/diamond_and_pearl.svg?raw";
|
||||
import double_crisis from "/src/svg/set/double_crisis.svg?raw";
|
||||
import dragon_majesty from "/src/svg/set/dragon_majesty.svg?raw";
|
||||
import neo_genesis from "/src/svg/set/neo_genesis.svg?raw";
|
||||
import jungle from "/src/svg/set/jungle.svg?raw";
|
||||
import fossil from "/src/svg/set/fossil.svg?raw";
|
||||
import ascended_heroes from "/src/svg/set/ascended_heroes.svg?raw";
|
||||
import expedition from "/src/svg/set/expedition.svg?raw";
|
||||
import dragonvault from "/src/svg/set/dragon_vault.svg?raw";
|
||||
import dragonsexalted from "/src/svg/set/dragons_exalted.svg?raw";
|
||||
import ecardsample from "/src/svg/set/e-card_sample_set.svg?raw";
|
||||
import emergingpowers from "/src/svg/set/emerging_powers.svg?raw";
|
||||
import evolutions from "/src/svg/set/evolutions.svg?raw";
|
||||
import evolvingskies from "/src/svg/set/evolving_skies.svg?raw";
|
||||
|
||||
const { set } = Astro.props;
|
||||
|
||||
const setMap = {
|
||||
"ME: Ascended Heroes": ascended_heroes,
|
||||
"Ancient Origins": ancient_origins,
|
||||
"Aquapolis": aquapolis,
|
||||
"Arceus": arceus,
|
||||
@@ -59,6 +70,15 @@ const setMap = {
|
||||
"Double Crisis": double_crisis,
|
||||
"Dragon Majesty": dragon_majesty,
|
||||
"Neo Genesis": neo_genesis,
|
||||
"Jungle": jungle,
|
||||
"Fossil": fossil,
|
||||
"Expedition Base Set": expedition,
|
||||
"Dragon Vault": dragonvault,
|
||||
"Dragons Exalted": dragonsexalted,
|
||||
"E-Card Sample": ecardsample,
|
||||
"Emerging Powers": emergingpowers,
|
||||
"Evolutions": evolutions,
|
||||
"SWSH07: Evolving Skies": evolvingskies,
|
||||
};
|
||||
|
||||
const svg = setMap[set as keyof typeof setMap] ?? "";
|
||||
|
||||
26
src/pages/404.astro
Normal file
26
src/pages/404.astro
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
import Layout from '../layouts/Main.astro';
|
||||
import StickyFilter from '../components/StickyFilter.astro';
|
||||
|
||||
const searchParams = Astro.url.searchParams;
|
||||
const query = searchParams.get('q') || '*';
|
||||
|
||||
const randomNumber = Math.floor(Math.random() * 1000) + 1;
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<StickyFilter query={ query } />
|
||||
<div class="container">
|
||||
<div class="row col-10 mx-auto mt-5">
|
||||
<div class="col-12 col-md-6">
|
||||
<h1 class="mb-4 mt-0">404 - Page Not Found</h1>
|
||||
<h4 class="my-4">Sorry, the page you are looking for does not exist.</h4>
|
||||
<p class="copy-big my-4">Return to the <a href="/">home page</a> or search for another Pokémon.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 offset-md-1">
|
||||
<div class="alert alert-warning border" role="alert">
|
||||
<h4 class="alert-heading">A wild Pokémon appeared!</h4>
|
||||
</div>
|
||||
<img src={`https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/${randomNumber}.png`} class="img-fluid" alt="">
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,6 +1,15 @@
|
||||
---
|
||||
import ebay from "/vendors/ebay.svg?raw";
|
||||
import SetIcon from '../../components/SetIcon.astro';
|
||||
import EnergyIcon from '../../components/EnergyIcon.astro';
|
||||
import RarityIcon from '../../components/RarityIcon.astro';
|
||||
import { db } from '../../db/index.ts';
|
||||
import { privateDecrypt } from "node:crypto";
|
||||
|
||||
import latestSales from '../../sampleData/latestsales.json';
|
||||
import chartdata from '../../sampleData/chartdata.json';
|
||||
|
||||
const priceData = chartdata;
|
||||
|
||||
export const partial = true;
|
||||
export const prerender = false;
|
||||
@@ -18,12 +27,43 @@ const card = await db.query.cards.findFirst({
|
||||
}
|
||||
});
|
||||
|
||||
const nearMint = await db.query.skus.findFirst({
|
||||
where: {
|
||||
productId: Number(productId),
|
||||
}
|
||||
});
|
||||
|
||||
const nearMintPrice = nearMint?.marketPrice ?? null;
|
||||
|
||||
const calculatedAt = new Date(nearMint?.calculatedAt);
|
||||
|
||||
function timeAgo(date) {
|
||||
const seconds = Math.floor((Date.now() - date) / 1000);
|
||||
|
||||
const intervals = {
|
||||
year: 31536000,
|
||||
month: 2592000,
|
||||
day: 86400,
|
||||
hour: 3600,
|
||||
minute: 60
|
||||
};
|
||||
|
||||
for (const [unit, value] of Object.entries(intervals)) {
|
||||
const count = Math.floor(seconds / value);
|
||||
if (count >= 1) return `${count} ${unit}${count > 1 ? "s" : ""} ago`;
|
||||
}
|
||||
|
||||
return "just now";
|
||||
}
|
||||
|
||||
---
|
||||
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
|
||||
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0">
|
||||
<h4 class="card-title">{card?.productName} | <span class="text-secondary">{card?.number}</span> {card?.energyType}</h4>
|
||||
<div class="container-fluid">
|
||||
<span class="h4 card-title pe-2">{card?.productName}</span><span class="text-secondary ps-2 border-start">{card?.number}</span><span class="text-secondary ps-2">{nearMint?.variant}</span>
|
||||
</div>
|
||||
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body pt-0">
|
||||
@@ -31,10 +71,10 @@ const card = await db.query.cards.findFirst({
|
||||
<div class="card mb-2 border-0">
|
||||
<div class="row g-4">
|
||||
<div class="col-sm-12 col-md-3">
|
||||
<h6 class="text-secondary">Set name | Set Symbol</h6>
|
||||
<img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt="...">
|
||||
<p class="text-secondary">{card?.set?.setName}</p>
|
||||
<div class="position-relative d-inline-block"><img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setName} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
|
||||
<div class="d-flex flex-row justify-content-between mt-2">
|
||||
<div class="h6 text-secondary">Naoyo Kimura</div>
|
||||
<div class="p text-secondary">{card?.Artist}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
@@ -51,31 +91,49 @@ const card = await db.query.cards.findFirst({
|
||||
<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 class="mt-2 col-12 col-md-3 row row-cols-3 row-cols-md-1">
|
||||
<div class="col dark-callout rounded mb-1 py-2">
|
||||
<p class="h6">Market Price</p>
|
||||
<p class="py-0 mb-1">${nearMintPrice}</p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
<div class="col dark-callout rounded mb-1 py-2">
|
||||
<p class="h6">Lowest List</p>
|
||||
<p class="py-0 mb-1">${nearMint?.lowestPrice}</p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
<div class="col dark-callout rounded mb-1 py-2">
|
||||
<p class="h6">Highest List</p>
|
||||
<p class="py-0 mb-1">${nearMint?.highestPrice}</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 class="col-12 alert alert-success mb-1 py-2">
|
||||
<p class="h6">Low Volatility</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 class="d-flex flex-column mt-2 col-12 col-md-9">
|
||||
<div class="dark-callout rounded table-responsive pt-1 ps-2 mb-1">
|
||||
<p class="h6">Latest Sales</p>
|
||||
<table class="table small table-dark table-sm table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Date</th>
|
||||
<th scope="col">Price</th>
|
||||
<th scope="col">Condition</th>
|
||||
<th scope="col">Title</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{latestSales.data.map(sale => (
|
||||
<tr>
|
||||
<td>{new Date(sale.orderDate).toLocaleDateString()}</td>
|
||||
<td>${sale.purchasePrice}</td>
|
||||
<td>{sale.condition}</td>
|
||||
<td>{sale.title}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-0 flex-fill">
|
||||
<p class="h6">Placeholder for graph</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,11 +245,11 @@ const card = await db.query.cards.findFirst({
|
||||
</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>
|
||||
<a class="btn btn-secondary mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a>
|
||||
<a class="btn btn-secondary mb-2 w-100" href={`https://www.ebay.com/sch/i.html?_nkw=${card?.productUrlName}+${card?.number}&LH_Sold=1&Graded=No&_dcat=183454${card?.productId}`} target="_blank"><span set:html={ebay} /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end my-0"><small class="text-body-secondary">Prices last updated</small></div>
|
||||
<div class="text-end my-0"><small class="text-body-secondary">Prices last updated: {timeAgo(calculatedAt)}</small></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
318
src/sampleData/chartdata.json
Normal file
318
src/sampleData/chartdata.json
Normal file
@@ -0,0 +1,318 @@
|
||||
{
|
||||
"count": 1,
|
||||
"result": [
|
||||
{
|
||||
"skuId": "4835350",
|
||||
"variant": "Reverse Holofoil",
|
||||
"language": "English",
|
||||
"condition": "Near Mint",
|
||||
"averageDailyQuantitySold": "0",
|
||||
"averageDailyTransactionCount": "0",
|
||||
"totalQuantitySold": "1",
|
||||
"totalTransactionCount": "1",
|
||||
"trendingMarketPricePercentages": {},
|
||||
"buckets": [
|
||||
{
|
||||
"marketPrice": "95",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-02-21"
|
||||
},
|
||||
{
|
||||
"marketPrice": "95",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-02-18"
|
||||
},
|
||||
{
|
||||
"marketPrice": "95",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-02-15"
|
||||
},
|
||||
{
|
||||
"marketPrice": "95",
|
||||
"quantitySold": "1",
|
||||
"lowSalePrice": "95",
|
||||
"lowSalePriceWithShipping": "99.99",
|
||||
"highSalePrice": "95",
|
||||
"highSalePriceWithShipping": "99.99",
|
||||
"transactionCount": "1",
|
||||
"bucketStartDate": "2026-02-12"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-02-09"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-02-06"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-02-03"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-01-31"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-01-28"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-01-25"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-01-22"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-01-19"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-01-16"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-01-13"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-01-10"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-01-07"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-01-04"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2026-01-01"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-12-29"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-12-26"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-12-23"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-12-20"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-12-17"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-12-14"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-12-11"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-12-08"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-12-05"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-12-02"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-11-29"
|
||||
},
|
||||
{
|
||||
"marketPrice": "0",
|
||||
"quantitySold": "0",
|
||||
"lowSalePrice": "0",
|
||||
"lowSalePriceWithShipping": "0",
|
||||
"highSalePrice": "0",
|
||||
"highSalePriceWithShipping": "0",
|
||||
"transactionCount": "0",
|
||||
"bucketStartDate": "2025-11-26"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
52
src/sampleData/latestsales.json
Normal file
52
src/sampleData/latestsales.json
Normal file
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"condition": "Moderately Played",
|
||||
"variant": "Reverse Holofoil",
|
||||
"language": "English",
|
||||
"quantity": 1,
|
||||
"title": "Scyther - 4/108 (Pokemon League) [1st Place]",
|
||||
"listingType": "ListingWithoutPhotos",
|
||||
"customListingId": "0",
|
||||
"purchasePrice": 90.25,
|
||||
"shippingPrice": 0.0,
|
||||
"orderDate": "2026-02-21T00:20:03.97+00:00"
|
||||
},
|
||||
{
|
||||
"condition": "Near Mint",
|
||||
"variant": "Reverse Holofoil",
|
||||
"language": "English",
|
||||
"quantity": 1,
|
||||
"title": "Scyther - 4/108 (Pokemon League) [1st Place]",
|
||||
"listingType": "ListingWithoutPhotos",
|
||||
"customListingId": "0",
|
||||
"purchasePrice": 95.0,
|
||||
"shippingPrice": 4.99,
|
||||
"orderDate": "2026-02-14T18:45:38.677+00:00"
|
||||
},
|
||||
{
|
||||
"condition": "Lightly Played",
|
||||
"variant": "Reverse Holofoil",
|
||||
"language": "English",
|
||||
"quantity": 1,
|
||||
"title": "Scyther - 4/108 (Pokemon League) [1st Place]",
|
||||
"listingType": "ListingWithoutPhotos",
|
||||
"customListingId": "0",
|
||||
"purchasePrice": 75.0,
|
||||
"shippingPrice": 0.0,
|
||||
"orderDate": "2026-01-18T01:31:47.323+00:00"
|
||||
},
|
||||
{
|
||||
"condition": "Lightly Played",
|
||||
"variant": "Reverse Holofoil",
|
||||
"language": "English",
|
||||
"quantity": 1,
|
||||
"title": "Scyther - 4/108 (Pokemon League) [1st Place]",
|
||||
"listingType": "ListingWithoutPhotos",
|
||||
"customListingId": "0",
|
||||
"purchasePrice": 85.0,
|
||||
"shippingPrice": 1.25,
|
||||
"orderDate": "2026-01-03T20:15:57.477+00:00"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,3 +1,14 @@
|
||||
<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="5" cy="5" r="4.5" fill="#1F232D" stroke="white"/>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10 10">
|
||||
<!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1) -->
|
||||
<defs>
|
||||
<style>
|
||||
.st0 {
|
||||
fill: #1f232d;
|
||||
stroke: #fff;
|
||||
stroke-width: .7px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<circle class="st0" cx="5" cy="5" r="4.5"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 142 B After Width: | Height: | Size: 415 B |
@@ -1,3 +1,14 @@
|
||||
<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.00035 1.21724L8.56088 4.6818L8.67978 4.94579L8.96793 4.97407L12.7977 5.34995L9.93478 7.8445L9.71062 8.03983L9.77518 8.33005L10.5931 12.007L7.24791 10.1016L7.00047 9.9607L6.75302 10.1016L3.40706 12.007L4.2257 8.33014L4.29034 8.03983L4.06607 7.84447L1.20247 5.34994L5.03207 4.97407L5.32016 4.94579L5.43909 4.68188L7.00035 1.21724Z" fill="#FDC401" stroke="white"/>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 13">
|
||||
<!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1) -->
|
||||
<defs>
|
||||
<style>
|
||||
.st0 {
|
||||
fill: #fdc401;
|
||||
stroke: #fff;
|
||||
stroke-width: .7px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="st0" d="M7,1.2l1.6,3.5v.3c.1,0,.4,0,.4,0l3.8.4-2.9,2.5-.2.2v.3c0,0,.9,3.7.9,3.7l-3.3-1.9h-.2c0-.1-.2,0-.2,0l-3.3,1.9.8-3.7v-.3c0,0-.2-.2-.2-.2l-2.9-2.5,3.8-.4h.3s.1-.3.1-.3l1.6-3.5Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 454 B After Width: | Height: | Size: 569 B |
@@ -1,3 +1,14 @@
|
||||
<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.00035 1.21724L8.56088 4.6818L8.67978 4.94579L8.96793 4.97407L12.7977 5.34995L9.93478 7.8445L9.71062 8.03983L9.77518 8.33005L10.5931 12.007L7.24791 10.1016L7.00047 9.9607L6.75302 10.1016L3.40706 12.007L4.2257 8.33014L4.29034 8.03983L4.06607 7.84447L1.20247 5.34994L5.03207 4.97407L5.32016 4.94579L5.43909 4.68188L7.00035 1.21724Z" fill="#1F232D" stroke="white"/>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 13">
|
||||
<!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1) -->
|
||||
<defs>
|
||||
<style>
|
||||
.st0 {
|
||||
fill: #1f232d;
|
||||
stroke: #fff;
|
||||
stroke-width: .7px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="st0" d="M7,1.2l1.6,3.5v.3c.1,0,.4,0,.4,0l3.8.4-2.9,2.5-.2.2v.3c0,0,.9,3.7.9,3.7l-3.3-1.9h-.2c0-.1-.2,0-.2,0l-3.3,1.9.8-3.7v-.3c0,0-.2-.2-.2-.2l-2.9-2.5,3.8-.4h.3s.1-.3.1-.3l1.6-3.5Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 454 B After Width: | Height: | Size: 569 B |
@@ -1,3 +1,15 @@
|
||||
<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="7.07104" y="0.707107" width="9" height="9" transform="rotate(45 7.07104 0.707107)" fill="#1F232D" stroke="white"/>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15">
|
||||
<!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1) -->
|
||||
<defs>
|
||||
<style>
|
||||
.st0 {
|
||||
fill: #1f232d;
|
||||
stroke: #fff;
|
||||
stroke-miterlimit: 4;
|
||||
stroke-width: .7px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<rect class="st0" x="2.6" y="2.6" width="9" height="9" transform="translate(-2.9 7.1) rotate(-45)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 204 B After Width: | Height: | Size: 502 B |
1
src/svg/set/ascended_heroes.svg
Normal file
1
src/svg/set/ascended_heroes.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
Reference in New Issue
Block a user