re-did 404 images and added mapping, re-did menu/search components for auth, removed unneeded files and cleaned up css
This commit is contained in:
zach
@@ -27,7 +27,7 @@
|
||||
@import 'bootstrap/scss/card';
|
||||
// @import 'bootstrap/scss/carousel';
|
||||
@import 'bootstrap/scss/close';
|
||||
// @import 'bootstrap/scss/dropdown';
|
||||
@import 'bootstrap/scss/dropdown';
|
||||
@import 'bootstrap/scss/forms';
|
||||
@import 'bootstrap/scss/grid';
|
||||
// @import 'bootstrap/scss/list-group';
|
||||
|
||||
@@ -1,54 +1,88 @@
|
||||
@import "_bootstrap";
|
||||
|
||||
// ----------------------
|
||||
// Container
|
||||
// ----------------------
|
||||
.container {
|
||||
max-width: 100vw;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
max-width: 95vw;
|
||||
}
|
||||
/* --------------------------------------------------
|
||||
Root Variables
|
||||
-------------------------------------------------- */
|
||||
:root {
|
||||
--total: 11; /* Number of items in the energy wheel */
|
||||
--radius: 40px; /* Circle radius */
|
||||
}
|
||||
|
||||
.circle {
|
||||
/* --------------------------------------------------
|
||||
Layout
|
||||
-------------------------------------------------- */
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100dvh !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Energy Wheel
|
||||
-------------------------------------------------- */
|
||||
.energy-wheel {
|
||||
position: relative;
|
||||
width: calc(var(--radius) * 2);
|
||||
height: calc(var(--radius) * 2);
|
||||
margin: 50px auto;
|
||||
margin: 5px 0 10px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--total: 11; /* How many items */
|
||||
--radius: 80px; /* Circle size */
|
||||
}
|
||||
|
||||
.circle-item {
|
||||
.energy-wheel-item {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: -30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
/* This is where the magic happens */
|
||||
--angle: calc(360deg / var(--total) * var(--i));
|
||||
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
|
||||
transform:
|
||||
rotate(var(--angle)) /* Rotate to position */
|
||||
translateX(var(--radius)) /* Move away from center */
|
||||
rotate(calc(-1 * var(--angle))); /* Rotate back */
|
||||
|
||||
transform:
|
||||
rotate(var(--angle))
|
||||
translateX(var(--radius))
|
||||
rotate(calc(-1 * var(--angle)));
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Typography
|
||||
// ----------------------
|
||||
.energy-wheel-item:first-of-type {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Navbar & Icons
|
||||
-------------------------------------------------- */
|
||||
.navbar {
|
||||
background-color: hsl(358, 71%, 48%) !important;
|
||||
}
|
||||
|
||||
.sticky-top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 1.85rem;
|
||||
height: 1.85rem;
|
||||
|
||||
> svg {
|
||||
fill: hsla(210, 11%, 15%, 0.5);
|
||||
stroke: hsla(210, 11%, 15%, 0.5);
|
||||
|
||||
&:hover {
|
||||
fill: hsla(210, 11%, 15%, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Typography
|
||||
-------------------------------------------------- */
|
||||
.copy-small {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.87;
|
||||
@@ -56,36 +90,34 @@
|
||||
@media (min-width: 768px) {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Cards & Modal
|
||||
// ----------------------
|
||||
|
||||
/* --------------------------------------------------
|
||||
Modal & Cards
|
||||
-------------------------------------------------- */
|
||||
.modal-xl {
|
||||
@media (min-width: 768px) {
|
||||
max-width: 95vw;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
max-width: 90vw;
|
||||
max-width: 85vw;
|
||||
}
|
||||
@media (min-width: 1921px) {
|
||||
max-width: 75vw;
|
||||
}
|
||||
}
|
||||
|
||||
.image-grow {
|
||||
transition-property: box-shadow, transform;
|
||||
transition-duration: 350ms;
|
||||
transition-timing-function: ease;
|
||||
transition: box-shadow 350ms ease, transform 350ms ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
|
||||
|
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.image-grow:is(:hover, :focus) {
|
||||
box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-.9rem) scale(1.02);
|
||||
&:is(:hover, :focus) {
|
||||
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-0.9rem) scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
.card-modal {
|
||||
@@ -94,17 +126,18 @@
|
||||
}
|
||||
|
||||
.pokedex-page {
|
||||
z-index: 99;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
z-index: 99;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
top: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Navigation Tabs
|
||||
// ----------------------
|
||||
/* --------------------------------------------------
|
||||
Navigation Tabs
|
||||
-------------------------------------------------- */
|
||||
.nav-link {
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.67);
|
||||
@@ -131,7 +164,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Tiered Nav-Link Colors
|
||||
/* Tiered Colors */
|
||||
$tiers: (
|
||||
nm: rgba(156, 204, 102, 1),
|
||||
lp: rgba(211, 225, 86, 1),
|
||||
@@ -153,6 +186,7 @@ $tiers: (
|
||||
&.active {
|
||||
background-color: $color;
|
||||
border-bottom-color: $color;
|
||||
|
||||
@if $name == vendor {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
@@ -160,9 +194,9 @@ $tiers: (
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Misc Components
|
||||
// ----------------------
|
||||
/* --------------------------------------------------
|
||||
Misc UI Elements
|
||||
-------------------------------------------------- */
|
||||
.dark-callout {
|
||||
@media (min-width: 768px) {
|
||||
background-color: rgba(44, 48, 59, 1);
|
||||
@@ -170,7 +204,7 @@ $tiers: (
|
||||
}
|
||||
|
||||
.price-area {
|
||||
max-height: 75px;
|
||||
max-height: 75px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
@@ -180,34 +214,33 @@ $tiers: (
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Icon sizes
|
||||
/* Icon sizing */
|
||||
.small-icon svg {
|
||||
width: 100%;
|
||||
max-height: 16px;
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
|
||||
/* Black silhouette overlay */
|
||||
.masked-image {
|
||||
z-index: 1000;
|
||||
opacity: 100%;
|
||||
opacity: 1;
|
||||
filter: brightness(0);
|
||||
}
|
||||
|
||||
.starburst {
|
||||
opacity: 10%;
|
||||
mix-blend-mode: lighten;
|
||||
object-fit: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* Decorative background elements */
|
||||
.starburst,
|
||||
.whos-that-pokemon {
|
||||
width: 100%;
|
||||
z-index: 998;
|
||||
opacity: 10%;
|
||||
mix-blend-mode: lighten;
|
||||
aspect-ratio: 1/1;
|
||||
opacity: 0.1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.whos-that-pokemon {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
/* SVG sizes */
|
||||
.energy-icon svg,
|
||||
.rarity-icon-large svg,
|
||||
.set-icon svg {
|
||||
@@ -224,10 +257,6 @@ $tiers: (
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
|
||||
.rarity-icon-large svg {
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
|
||||
.set-icon svg {
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
@@ -238,9 +267,9 @@ $tiers: (
|
||||
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Pricing
|
||||
// ----------------------
|
||||
/* --------------------------------------------------
|
||||
Pricing
|
||||
-------------------------------------------------- */
|
||||
.price-row {
|
||||
position: relative;
|
||||
margin-top: -1.25rem;
|
||||
@@ -258,9 +287,9 @@ $tiers: (
|
||||
.inventory-button {
|
||||
margin-bottom: -2rem;
|
||||
margin-right: -0.25rem;
|
||||
border-radius: 0.33rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 0.33rem;
|
||||
background-color: hsl(262, 47%, 55%);
|
||||
color: #fff;
|
||||
}
|
||||
@@ -269,7 +298,7 @@ $tiers: (
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
@@ -277,9 +306,8 @@ $tiers: (
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
background-color: hsl(88, 50%, 60%);
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
|
||||
border-top-left-radius: 0.33rem;
|
||||
border-bottom-left-radius: 0.33rem;
|
||||
border-radius: 0.33rem 0 0 0.33rem;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 0.8rem;
|
||||
@@ -294,13 +322,13 @@ $tiers: (
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:nth-of-type(n + 2) {
|
||||
&:nth-of-type(2) {
|
||||
background-color: hsl(66, 70%, 61%);
|
||||
}
|
||||
&:nth-of-type(n + 3) {
|
||||
&:nth-of-type(3) {
|
||||
background-color: hsl(54, 100%, 67%);
|
||||
}
|
||||
&:nth-of-type(n + 4) {
|
||||
&:nth-of-type(4) {
|
||||
background-color: hsl(45, 100%, 58%);
|
||||
}
|
||||
&:last-of-type {
|
||||
@@ -309,9 +337,9 @@ $tiers: (
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Search
|
||||
// ----------------------
|
||||
/* --------------------------------------------------
|
||||
Search
|
||||
-------------------------------------------------- */
|
||||
@media (max-width: 768px) {
|
||||
.search-box,
|
||||
.search-button {
|
||||
@@ -319,502 +347,130 @@ $tiers: (
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// Sticky Bar
|
||||
// ----------------------
|
||||
::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
opacity: 1 !important;
|
||||
font-size: 1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
/* Sticky (mobile-bottom / desktop-top) search bar */
|
||||
.search-bar {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
height: 48px;
|
||||
z-index: 1000;
|
||||
transform: rotate(180deg);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
position: sticky;
|
||||
top:0;
|
||||
min-width: 45vw;
|
||||
transform: rotate(0deg);
|
||||
max-width: 45vw;
|
||||
top: 0;
|
||||
float: right;
|
||||
min-width: 45vw;
|
||||
max-width: 45vw;
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
// dexter css classes to reconciled later
|
||||
/* COLORS & BACKGROUNDS */
|
||||
/* --------------------------------------------------
|
||||
Navbar Dark Overrides
|
||||
-------------------------------------------------- */
|
||||
.navbar-dark .nav-item .nav-link {
|
||||
color: #fff;
|
||||
|
||||
$dropshadow-rgba: rgba(176, 38, 46, .35);
|
||||
|
||||
/* SIZES */
|
||||
/* prefer calculations here and calculated variables in CSS below */
|
||||
|
||||
/* Set left-column-width, derive logo size below */
|
||||
$hdr-side-width: 270px;
|
||||
$hdr-big-btn-width: 72px; /* SIGN UP */
|
||||
|
||||
/* to see the menu flow to more than 1 line, change
|
||||
$min-width here to something smaller: e.g., * 1.5; */
|
||||
$min-width: $hdr-side-width * 2;
|
||||
$max-width: $hdr-side-width * 3;
|
||||
|
||||
$padding-small: 0;
|
||||
/* declared for flexibility */
|
||||
$padding-to-window: $padding-small;
|
||||
$padding-to-top: $padding-small;
|
||||
$padding-hdr: $padding-small;
|
||||
|
||||
$hdr-big-btn-margin: floor(.75 * $padding-hdr); /* round down */
|
||||
|
||||
$border-radius: 8px; /* big-btn radius */
|
||||
/* larger radius to flow around big button */
|
||||
$border-radius-hdr: ceil(1.25 * $border-radius); /* round up */
|
||||
$corner-border-width: $border-radius-hdr;
|
||||
$corner-border-size: $border-radius-hdr * 2;
|
||||
|
||||
$shadow-size: 20px;
|
||||
|
||||
$shadow-size-deep: ceil(1.5 * $shadow-size);
|
||||
|
||||
$hdr-menu-item-height: 18px;
|
||||
|
||||
$hdr-menu-item-padding-top: $hdr-big-btn-margin;
|
||||
$hdr-menu-item-padding-bottom: ceil(0.5 * $hdr-big-btn-margin);
|
||||
$hdr-menu-height: $hdr-menu-item-padding-top + $hdr-menu-item-height + $hdr-menu-item-padding-bottom;
|
||||
|
||||
$hdr-menu-item-height: $hdr-menu-height - $padding-hdr;
|
||||
|
||||
$hdr-logo-width: $hdr-side-width - $hdr-big-btn-width - 2 * $hdr-big-btn-margin;
|
||||
$hdr-logo-height: ceil(0.75 * $hdr-logo-width); /* 4x3 */
|
||||
$hdr-logo-margin-bottom: floor(0.5 * $hdr-menu-height);
|
||||
/* height of taller left side "overhang" without padding-to-top */
|
||||
$hdr-side-height: $hdr-logo-height + $hdr-logo-margin-bottom;
|
||||
$hdr-side-total-height: $hdr-side-height + $padding-to-top;
|
||||
|
||||
$hdr-total-height: $hdr-side-total-height + $shadow-size-deep;
|
||||
|
||||
/* extra padding-top to make room for column-1 header "overhang" */
|
||||
$column-1-padding-top: $hdr-side-total-height + floor(.5 *$shadow-size);
|
||||
|
||||
/* shorter green bg across top */
|
||||
/* can specify or calculate: e.g., half the logo height */
|
||||
$hdr-topwell-height: ceil(0.5 * $hdr-logo-height);
|
||||
|
||||
/* height of shorter right side -
|
||||
needed for .header-bg and .main padding-top */
|
||||
$hdr-top-height: $padding-to-top + $hdr-topwell-height + $hdr-menu-height;
|
||||
|
||||
/* size and position of horizontal background "patch"
|
||||
extending background into negative space by size of border-radius-hdr */
|
||||
$hdr-logo-patch-height: $shadow-size + $border-radius-hdr;
|
||||
$hdr-logo-patch-width: $hdr-logo-width + $border-radius-hdr;
|
||||
$hdr-logo-patch-top: $padding-to-top + $hdr-topwell-height - $shadow-size;
|
||||
$hdr-logo-patch-background-position: -1*($hdr-topwell-height - $shadow-size);
|
||||
|
||||
$hdr-big-btn-top: $hdr-topwell-height + $hdr-big-btn-margin;
|
||||
$hdr-big-btn-left: $hdr-logo-width + $hdr-big-btn-margin;
|
||||
$hdr-big-btn-height: $hdr-side-height - $hdr-topwell-height - $hdr-big-btn-margin - $hdr-logo-margin-bottom;
|
||||
$hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
|
||||
|
||||
.blueCircle {
|
||||
width: 20vw; /* Equal width and height for a perfect square */
|
||||
height: 20vw;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
background: radial-gradient(circle at top left, hsl(196, 100%, 47%), hsl(196, 100%, 27%)); /* The color of the circle */
|
||||
border-radius: 50%; /* Turns the square into a circle */
|
||||
position: absolute; /* Positioning context for the circle */
|
||||
border: 8px solid #fff;
|
||||
margin: 0 auto; /* Remove default margin */
|
||||
--a: 8deg;
|
||||
/* Initial mask to create the shine line */
|
||||
mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
|
||||
transition: .4s;
|
||||
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.25rem;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
FontAwesome List Icons
|
||||
-------------------------------------------------- */
|
||||
.fa-li {
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Circles (Header, Buttons, etc.)
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Shared Circle Styles */
|
||||
%circle-base {
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
--a: 8deg;
|
||||
mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
|
||||
transition: 0.4s;
|
||||
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
|
||||
}
|
||||
|
||||
/* Red */
|
||||
.redCircle {
|
||||
width: 10vw; /* Equal width and height for a perfect square */
|
||||
height: 10vw;
|
||||
max-width: 25px; /* Equal width and height */
|
||||
max-height: 25px;
|
||||
background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%)); /* The color of the circle */
|
||||
border-radius: 50%; /* Turns the square into a circle */
|
||||
position: absolute; /* Positioning context for the circle */
|
||||
border: 3px solid hsl(210, 11%, 15%);
|
||||
left: 13rem;
|
||||
margin: 0 auto; /* Remove default margin */
|
||||
--a: 8deg;
|
||||
/* Initial mask to create the shine line */
|
||||
mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
|
||||
transition: .4s;
|
||||
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
|
||||
@extend %circle-base;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 1px solid hsl(210, 11%, 15%);
|
||||
background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%));
|
||||
}
|
||||
|
||||
/* Yellow */
|
||||
.yellowCircle {
|
||||
width: 25px; /* Equal width and height for a perfect square */
|
||||
height: 25px; /* Equal width and height */
|
||||
background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%)); /* The color of the circle */
|
||||
border-radius: 50%; /* Turns the square into a circle */
|
||||
position: absolute; /* Positioning context for the circle */
|
||||
border: 3px solid hsl(210, 11%, 15%);
|
||||
left: 15rem;
|
||||
margin: 0 auto; /* Remove default margin */
|
||||
--a: 8deg;
|
||||
/* Initial mask to create the shine line */
|
||||
mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
|
||||
transition: .4s;
|
||||
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
|
||||
@extend %circle-base;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 1px solid hsl(210, 11%, 15%);
|
||||
background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%));
|
||||
}
|
||||
|
||||
.yellowCircle:hover, .redCircle:hover, .greenCircle:hover, .blueCircle:hover {
|
||||
/* Reverse the rotation direction on hover */
|
||||
--i: -1, 1;
|
||||
/* Move the mask position to simulate the shine moving */
|
||||
/* Green */
|
||||
.greenCircle {
|
||||
@extend %circle-base;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 1px solid hsl(210, 11%, 15%);
|
||||
background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%));
|
||||
}
|
||||
|
||||
/* Circle Hover Effect */
|
||||
.yellowCircle:hover,
|
||||
.redCircle:hover,
|
||||
.greenCircle:hover,
|
||||
.blueCircle:hover {
|
||||
--i: -1, 1;
|
||||
mask-position: 0 0;
|
||||
}
|
||||
|
||||
.greenCircle {
|
||||
width: 25px; /* Equal width and height for a perfect square */
|
||||
height: 25px; /* Equal width and height */
|
||||
background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%)); /* The color of the circle */
|
||||
border-radius: 50%; /* Turns the square into a circle */
|
||||
position: absolute; /* Positioning context for the circle */
|
||||
border: 3px solid hsl(210, 11%, 15%);
|
||||
left: 17rem;
|
||||
margin: 0 auto; /* Remove default margin */
|
||||
--a: 8deg;
|
||||
/* Initial mask to create the shine line */
|
||||
mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
|
||||
transition: .4s;
|
||||
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
|
||||
.nav-icon {
|
||||
width: 1.85rem;
|
||||
height: 1.85rem;
|
||||
}
|
||||
|
||||
/* can't assume only one "header" element in HTML5 */
|
||||
.header-top {
|
||||
/* pin to top - 0 is default */
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
/* raise z-index to cover, higher here to allow
|
||||
a range of z-indexes in the scrolling content */
|
||||
z-index: 100;
|
||||
max-height: 150px;
|
||||
transform:rotate(180deg);
|
||||
/* height overflows */
|
||||
@media (min-width:768px) {
|
||||
top: 0;
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
.btn-warning>span, .btn-warning>svg.nav-icon {
|
||||
fill: var(--bs-warning-border-subtle);
|
||||
stroke: var(--bs-warning-border-subtle);
|
||||
color: var(--bs-warning-border-subtle);
|
||||
}
|
||||
|
||||
/* match these backgrounds to blend */
|
||||
/* OPTIONAL, extend header bg color across top */
|
||||
|
||||
/* match widths, margins & padding */
|
||||
.page-wrap, .header-wrap {
|
||||
width: 100%;
|
||||
/* center content */
|
||||
margin: 0 auto;
|
||||
/* separate content from window edge --
|
||||
padding-top and -bottom specified below.
|
||||
Here (not on body) to work with fixed header */
|
||||
padding: 0 $padding-to-window;
|
||||
.btn.btn-warning:hover>span, .btn.btn-warning:hover>svg.nav-icon {
|
||||
fill: var(--bs-warning-bg-subtle);
|
||||
stroke: var(--bs-warning-bg-subtle);
|
||||
color: var(--bs-warning-border-subtle);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* padding-left and -right added above */
|
||||
.header-wrap {
|
||||
/* child elements abaolute */
|
||||
position: relative;
|
||||
/* a "min-height" for shorter right side */
|
||||
height: $hdr-top-height;
|
||||
.btn-outline-success svg.nav-icon {
|
||||
fill: var(--bs-success);
|
||||
stroke: var(--bs-success);
|
||||
}
|
||||
|
||||
/* extend bg into padding-to-window gap on taller left side -
|
||||
not needed if extending bg using optional .header-bg div */
|
||||
.header-wrap:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* extra 2px width to cover tiny gap when iOS zooms */
|
||||
width: $padding-to-window + 2px;
|
||||
height: $hdr-side-total-height;
|
||||
/* OPTIONAL, extend padding-to-window "frame" all the way down -
|
||||
may want to do the same on right with an :after pseudo-element:
|
||||
height: 100000px; */
|
||||
}
|
||||
|
||||
/* OPTIONAL, if we want to differentiate header and body -
|
||||
.header-bg:before extends taller bg all the way left */
|
||||
.header-bg {
|
||||
/* child elements absolute */
|
||||
position: relative;
|
||||
/* tuck behind header framing */
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* OPTIONAL, extends bg to left on taller left side */
|
||||
.header-bg:before {
|
||||
content: "";
|
||||
/* remove from layout */
|
||||
position: absolute;
|
||||
/* start from the right and extend left */
|
||||
right: 100%;
|
||||
/* height of shorter right side */
|
||||
height: $hdr-side-total-height;
|
||||
/* crazy wide - absolutely positioned
|
||||
to start at left edge and go left */
|
||||
width: 100000px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
/* child elements absolute */
|
||||
position: relative;
|
||||
height: $hdr-total-height;
|
||||
width: 100%;
|
||||
padding-top: $padding-to-top;
|
||||
/* crop shadows at the sides and top */
|
||||
overflow: hidden; }
|
||||
|
||||
/* add taller left-side "overhang" bg + shadow */
|
||||
.header-content:before {
|
||||
content: "";
|
||||
/* remove from layout */
|
||||
position: absolute;
|
||||
/* tuck behind .header-wrap and .nav-main ul
|
||||
so right-edge shadow is covered up */
|
||||
z-index: -1;
|
||||
height: $hdr-side-height;
|
||||
width: $hdr-side-width;
|
||||
padding: 0;
|
||||
border-radius: 0 0 $border-radius-hdr 0;
|
||||
}
|
||||
|
||||
/* match backgrounds to blend */
|
||||
.header-logo, .header-social {
|
||||
background-color: hsl(358, 71%, 48%);
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
position: absolute;
|
||||
/* cover .header-content-social */
|
||||
/* z-index: 1; */
|
||||
height: $hdr-logo-height;
|
||||
width: $hdr-logo-width;
|
||||
border-radius: 0 0 $border-radius-hdr $border-radius-hdr;
|
||||
}
|
||||
|
||||
.header-logo h1, .header-logo h2 {
|
||||
position: relative;
|
||||
/* overlap .header-logo-patch */
|
||||
z-index: 2;
|
||||
text-shadow: 0 2px 1px rgba(255,255,255, 0.3),
|
||||
0 0 10px rgba(204,232,229, 0.5)
|
||||
}
|
||||
|
||||
.header-logo h1 {
|
||||
padding: 10px 0 0 18px;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.header-logo a {
|
||||
color: inherit !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header-logo h2 {
|
||||
margin-top: -2px;
|
||||
padding: 0 0 0 18px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* "patch" to cover shadow "seam" of overlapping shapes -
|
||||
can't nest pseudo-elements, so need extra div here -
|
||||
overflow:hidden to crop shadow of rounded corner overlay (below) */
|
||||
.header-logo-patch {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: $hdr-logo-patch-top;
|
||||
height: $hdr-logo-patch-height;
|
||||
width: $hdr-logo-patch-width;
|
||||
background-color: hsl(358, 71%, 48%);
|
||||
background-position: 0 $hdr-logo-patch-background-position;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* rounded corner overlay (with outset shadow to match "well") */
|
||||
.header-logo-patch:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -$border-radius-hdr;
|
||||
right: -$border-radius-hdr;
|
||||
height: $border-radius-hdr * 2;
|
||||
width: $border-radius-hdr * 2;
|
||||
background-color: hsl(210, 11%, 15%);
|
||||
border-radius: $border-radius-hdr 0 0 0;
|
||||
}
|
||||
|
||||
.header-social {
|
||||
position: absolute;
|
||||
top: $padding-to-top;
|
||||
height: $hdr-topwell-height;
|
||||
width: 100%;
|
||||
border-radius: 0 0 $border-radius-hdr $border-radius-hdr;
|
||||
@media (min-width:768px) {
|
||||
border-radius: $border-radius-hdr 0 $border-radius-hdr 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
|
||||
.horizontal-nav ul, .horizontal-nav li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.horizontal-nav li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.horizontal-nav li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-main {
|
||||
/* child elements absolute */
|
||||
position: relative;
|
||||
padding-left: $hdr-side-width;
|
||||
padding-top: $hdr-topwell-height + $hdr-menu-item-padding-top;
|
||||
padding-bottom: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.nav-main ul {
|
||||
padding: 0 0 $hdr-menu-item-padding-bottom 2px; /* nudge links right */
|
||||
background: $body-bg;
|
||||
/* clear floats without extra div or
|
||||
using pseudo-elements needed below -
|
||||
cannot use with position:relative */
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* dropshadow tracks with menu height if links exceed 1 line */
|
||||
.nav-main ul:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
/* stack shadow behind "overhang" */
|
||||
z-index: -2;
|
||||
/* same size as parent */
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $body-bg;
|
||||
}
|
||||
|
||||
/* INVERTED ROUNDED CORNER under menu - left */
|
||||
.nav-main ul:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
/* tuck behind nav-main a:hover */
|
||||
z-index: -1;
|
||||
height: $border-radius-hdr * 2;
|
||||
width: $border-radius-hdr * 2;
|
||||
border-top: $border-radius-hdr solid $body-bg;
|
||||
border-left: $border-radius-hdr solid $body-bg;
|
||||
bottom: -1*$border-radius-hdr;
|
||||
left: $hdr-side-width - $border-radius-hdr;
|
||||
/* top left */
|
||||
border-radius: $border-radius-hdr * 2 0 0 0;
|
||||
}
|
||||
|
||||
.nav-main a,
|
||||
.nav-main:visited {
|
||||
display: block;
|
||||
height: $hdr-menu-item-height;
|
||||
padding: 0 .5em;
|
||||
line-height: $hdr-menu-item-height;
|
||||
font-size: 0.8125em;
|
||||
text-transform: uppercase;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
/* nudge down 1px for uppercase vertical centering */
|
||||
.nav-main a span {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.nav-social {
|
||||
/* overlap .header-logo-patch */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
float: right;
|
||||
padding-right: .875em;
|
||||
}
|
||||
|
||||
/* MEDIA QUERIES */
|
||||
|
||||
/* Mobile example - e.g., iPhone5 landscape width = 568px */
|
||||
@media only screen
|
||||
and (max-device-width : 599px) {
|
||||
|
||||
.header-top {
|
||||
/* unpin header so it scrolls with content */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* even if you keep the header fixed, you might
|
||||
change width to 100% for better mobile zooming */
|
||||
.page-wrap, .header-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* A full-on responsive layout would reconfigure the
|
||||
layout - this is just a gesture as an example */
|
||||
|
||||
/* lose countoured bottom at smaller width -
|
||||
when menu items overflow 2 lines */
|
||||
|
||||
@media only screen
|
||||
and (max-width : 512px) {
|
||||
|
||||
.nav-main ul {
|
||||
height: $hdr-side-height - $hdr-topwell-height - $hdr-menu-item-padding-top;
|
||||
background: none; }
|
||||
|
||||
/* taller left-side "tab" bg + shadow */
|
||||
.header-content:before,
|
||||
/* rounded corner under menu - left */
|
||||
.nav-main ul:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-width : 320px) {
|
||||
|
||||
.header-top {
|
||||
/* unpin header so it scrolls with content */
|
||||
position: absolute; }
|
||||
|
||||
/* even if you keep the header fixed, you might
|
||||
change width to 100% for better mobile zooming */
|
||||
|
||||
.page-wrap, .header-wrap {
|
||||
width: 100%; }
|
||||
|
||||
.btn.btn-outline-success:hover, .btn.btn-outline-success:hover>svg.nav-icon {
|
||||
fill: var(--bs-success-border-subtle);
|
||||
stroke: var(--bs-success-border-subtle);
|
||||
color: var(--bs-success-border-subtle);
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
|
||||
<div class="row pokedex-page my-5">
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3 display-sm-none">
|
||||
<div class="h5 d-none">Inventory management placeholder</div>
|
||||
<div id="facetContainer"></div>
|
||||
|
||||
@@ -3,16 +3,21 @@ import Image from "astro/components/Image.astro"
|
||||
import '/src/assets/css/main.scss';
|
||||
---
|
||||
|
||||
<div class="circle float-start ms-5">
|
||||
<Image class="circle-item rounded-shadow" style="--i: 0" src="/src/svg/energy/grass.svg?raw" alt="Grass Energy" width={25} height={25}></Image>
|
||||
<Image class="circle-item rounded-shadow" style="--i: 1" src="/src/svg/energy/fire.svg?raw" alt="Fire Energy" width={25} height={25}></Image>
|
||||
<Image class="circle-item rounded-shadow" style="--i: 2" src="/src/svg/energy/water.svg?raw" alt="Water Energy" width={25} height={25}></Image>
|
||||
<Image class="circle-item rounded-shadow" style="--i: 3" src="/src/svg/energy/electric.svg?raw" alt="Electric Energy" width={25} height={25}></Image>
|
||||
<Image class="circle-item rounded-shadow" style="--i: 4" src="/src/svg/energy/psychic.svg?raw" alt="Psychic Energy" width={25} height={25}></Image>
|
||||
<Image class="circle-item rounded-shadow" style="--i: 5" src="/src/svg/energy/fighting.svg?raw" alt="Fighting Energy" width={25} height={25}></Image>
|
||||
<Image class="circle-item rounded-shadow" style="--i: 6" src="/src/svg/energy/dark.svg?raw" alt="Dark Energy" width={25} height={25}></Image>
|
||||
<Image class="circle-item rounded-shadow" style="--i: 7" src="/src/svg/energy/steel.svg?raw" alt="Steel Energy" width={25} height={25}></Image>
|
||||
<Image class="circle-item rounded-shadow" style="--i: 8" src="/src/svg/energy/colorless.svg?raw" alt="Colorless Energy" width={25} height={25}></Image>
|
||||
<Image class="circle-item rounded-shadow" style="--i: 9" src="/src/svg/energy/fairy.svg?raw" alt="Fairy Energy" width={25} height={25}></Image>
|
||||
<Image class="circle-item rounded-shadow" style="--i: 10" src="/src/svg/energy/dragon.svg?raw" alt="Dragon Energy" width={25} height={25}></Image>
|
||||
</div>
|
||||
<div class="energy-wheel">
|
||||
<Image class="energy-wheel-item rounded-shadow" style="--i: 0" src="/src/svg/energy/colorless.svg?raw" alt="Colorless Energy" width={25} height={25}></Image>
|
||||
<Image class="energy-wheel-item rounded-shadow" style="--i: 1" src="/src/svg/energy/dark.svg?raw" alt="Dark Energy" width={25} height={25}></Image>
|
||||
<Image class="energy-wheel-item rounded-shadow" style="--i: 2" src="/src/svg/energy/dragon.svg?raw" alt="Dragon Energy" width={25} height={25}></Image>
|
||||
<Image class="energy-wheel-item rounded-shadow" style="--i: 3" src="/src/svg/energy/electric.svg?raw" alt="Electric Energy" width={25} height={25}></Image>
|
||||
<Image class="energy-wheel-item rounded-shadow" style="--i: 4" src="/src/svg/energy/fighting.svg?raw" alt="Fighting Energy" width={25} height={25}></Image>
|
||||
<Image class="energy-wheel-item rounded-shadow" style="--i: 5" src="/src/svg/energy/fairy.svg?raw" alt="Fairy Energy" width={25} height={25}></Image>
|
||||
<Image class="energy-wheel-item rounded-shadow" style="--i: 6" src="/src/svg/energy/fire.svg?raw" alt="Fire Energy" width={25} height={25}></Image>
|
||||
<Image class="energy-wheel-item rounded-shadow" style="--i: 7" src="/src/svg/energy/grass.svg?raw" alt="Grass Energy" width={25} height={25}></Image>
|
||||
<Image class="energy-wheel-item rounded-shadow" style="--i: 8" src="/src/svg/energy/psychic.svg?raw" alt="Psychic Energy" width={25} height={25}></Image>
|
||||
<Image class="energy-wheel-item rounded-shadow" style="--i: 9" src="/src/svg/energy/steel.svg?raw" alt="Steel Energy" width={25} height={25}></Image>
|
||||
<Image class="energy-wheel-item rounded-shadow" style="--i: 10" src="/src/svg/energy/water.svg?raw" alt="Water Energy" width={25} height={25}></Image>
|
||||
</div>
|
||||
<script>
|
||||
document.querySelectorAll(".energy-wheel-item").forEach((el, i, arr) => {
|
||||
el.style.zIndex = arr.length - i;
|
||||
});
|
||||
</script>
|
||||
16
src/components/Footer.astro
Normal file
16
src/components/Footer.astro
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
import EnergyWheel from './EnergyWheel.astro';
|
||||
import '/src/assets/css/main.scss';
|
||||
---
|
||||
<footer class="bd-footer py-4 py-md-5 mt-0 bottom-0 bg-body-tertiary">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
|
||||
<div class="row">
|
||||
<div class="col-3 mb-3">
|
||||
|
||||
</div>
|
||||
<div class="col mb-3 align-items-end">
|
||||
<a class="btn btn-outline-success rounded p-2 float-end" href="/contact">Contact Us <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path opacity=".25" d="M112 176L404 176C411.9 206.7 431 233 456.6 250.2L320 353.9L112 196.1L112 176zM112 256.3L305.5 403.1L320 414.1L334.5 403.1L509.2 270.6C515.3 271.5 521.6 272 528 272L528 464L112 464L112 256.3z"/><path d="M528 64C572.2 64 608 99.8 608 144C608 188.2 572.2 224 528 224C483.8 224 448 188.2 448 144C448 99.8 483.8 64 528 64zM88 128L401 128C400.3 133.2 400 138.6 400 144C400 155 401.4 165.8 404 176L112 176L112 196.1L320 353.9L456.6 250.3C472.1 260.7 489.9 267.8 509.2 270.7L334.5 403.2L320 414.2L305.5 403.2L112 256.4L112 464.1L528 464.1L528 272.1C545 272.1 561.2 268.8 576 262.8L576 512.1L64 512.1L64 128.1L88 128.1z"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
34
src/components/NavBar.astro
Normal file
34
src/components/NavBar.astro
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
import '/src/assets/css/main.scss';
|
||||
export const prerender = false;
|
||||
---
|
||||
<script is:inline>
|
||||
const afterUpdate = (e) => {
|
||||
const start = document.querySelector('#start');
|
||||
if (start) {
|
||||
const val = Number(start.value) || 0;
|
||||
start.value = (val + 20).toString();
|
||||
}
|
||||
// delete the triggering element
|
||||
if (e && e.detail && e.detail.elt) {
|
||||
e.detail.elt.remove();
|
||||
}
|
||||
};
|
||||
const beforeSearch = (e) => {
|
||||
const start = document.querySelector('#start');
|
||||
if (start) {
|
||||
start.value = '0';
|
||||
document.querySelector('#cardGrid').innerHTML = '';
|
||||
window.scrollTo({ top: 0, behavior: 'instant' });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<nav class="navbar navbar-expand sticky-top bg-dark" data-bs-theme="dark">
|
||||
<div class="container container-fluid">
|
||||
<a class="navbar-brand d-flex" href="/">
|
||||
<span class="h3 d-none d-md-flex">Rigid's App Thing</span><span class="h3 d-md-none d-flex m-auto">RAT</span>
|
||||
</a>
|
||||
<slot name="navItems"/>
|
||||
<slot name="searchInput"/>
|
||||
</div>
|
||||
</nav>
|
||||
10
src/components/NavItems.astro
Normal file
10
src/components/NavItems.astro
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
import '/src/assets/css/main.scss';
|
||||
---
|
||||
<div class="navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item d-flex">
|
||||
<a class="nav-link btn btn-warning rounded p-2" href="/pokemon"><span class="d-inline-block d-md-none">Cards</span> <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path opacity=".4" d="M256 519.9L256 576L576 576L576 128L378.8 128C408.7 239.7 438.6 351.3 468.5 463C397.7 482 326.8 501 256 519.9z"/><path d="M43.5 113L352.6 30.2L468.6 462.9L159.5 545.7z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
33
src/components/Search.astro
Normal file
33
src/components/Search.astro
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
import { SignedIn } from "@clerk/astro/components";
|
||||
---
|
||||
<script is:inline>
|
||||
const afterUpdate = (e) => {
|
||||
const start = document.querySelector('#start');
|
||||
if (start) {
|
||||
const val = Number(start.value) || 0;
|
||||
start.value = (val + 20).toString();
|
||||
}
|
||||
// delete the triggering element
|
||||
if (e && e.detail && e.detail.elt) {
|
||||
e.detail.elt.remove();
|
||||
}
|
||||
};
|
||||
const beforeSearch = (e) => {
|
||||
const start = document.querySelector('#start');
|
||||
if (start) {
|
||||
start.value = '0';
|
||||
document.querySelector('#cardGrid').innerHTML = '';
|
||||
window.scrollTo({ top: 0, behavior: 'instant' });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<SignedIn>
|
||||
<form class="d-flex ms-2" role="search" id="searchform" hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit" hx-vals='{"start":"0"}' hx-on--after-request="afterUpdate()" hx-on--before-request="beforeSearch()">
|
||||
<input type="hidden" name="start" id="start" value="0" />
|
||||
<input type="search" name="q" class="form-control form-control-lg me-2" placeholder="Search cards..." />
|
||||
<input type="submit" class="btn btn-outline-light" value="Search" onclick="const q = document.querySelector('[name=q]').value; dataLayer.push({ event: 'view_search_results', search_term: q });"/>
|
||||
</form>
|
||||
</SignedIn>
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
---
|
||||
|
||||
---
|
||||
<script is:inline>
|
||||
const afterUpdate = (e) => {
|
||||
const start = document.querySelector('#start');
|
||||
if (start) {
|
||||
const val = Number(start.value) || 0;
|
||||
start.value = (val + 20).toString();
|
||||
}
|
||||
// delete the triggering element
|
||||
if (e && e.detail && e.detail.elt) {
|
||||
e.detail.elt.remove();
|
||||
}
|
||||
};
|
||||
const beforeSearch = (e) => {
|
||||
const start = document.querySelector('#start');
|
||||
if (start) {
|
||||
start.value = '0';
|
||||
document.querySelector('#cardGrid').innerHTML = '';
|
||||
window.scrollTo({ top: 0, behavior: 'instant' });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="search-bar w-100 me-md-3">
|
||||
<div class="container mt-3 mt-md-0">
|
||||
<form id="searchform" hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit" hx-vals='{"start":"0"}' hx-on--after-request="afterUpdate()" hx-on--before-request="beforeSearch()">
|
||||
<div class="bottom-0 row row-cols-2 g-0 me-md-2">
|
||||
<div class="col-10">
|
||||
<input type="hidden" name="start" id="start" value="0" />
|
||||
<input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." />
|
||||
</div>
|
||||
<div class="col-2 p-0">
|
||||
<input type="submit" class="w-100 btn btn-secondary search-button" value="Search" onclick="const q = document.querySelector('[name=q]').value; dataLayer.push({ event: 'view_search_results', search_term: q });"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
4102
src/data/pokedex.json
Normal file
4102
src/data/pokedex.json
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,7 @@
|
||||
---
|
||||
import '/src/assets/css/main.scss';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import NavBar from '../components/NavBar.astro';
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
@@ -25,8 +27,19 @@ import '/src/assets/css/main.scss';
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPQMZ4PL"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<slot />
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<slot name="navbar"/>
|
||||
<div class="wrapper">
|
||||
<div class="main">
|
||||
<div class="container-fluid container-lg mt-4">
|
||||
<slot name="page"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Import only what you need
|
||||
// import 'bootstrap/js/dist/alert';
|
||||
|
||||
@@ -1,46 +1,76 @@
|
||||
---
|
||||
import Layout from '../layouts/Main.astro';
|
||||
import PokedexHeader from '../components/PokedexHeader.astro';
|
||||
import Image from 'astro/components/Image.astro';
|
||||
import NavItems from '../components/NavItems.astro';
|
||||
import NavBar from '../components/NavBar.astro';
|
||||
export const prerender = false;
|
||||
import pokedexList from '../data/pokedex.json';
|
||||
|
||||
const searchParams = Astro.url.searchParams;
|
||||
const query = searchParams.get('q') || '*';
|
||||
|
||||
const randomNumber = String(Math.floor(Math.random() * 151) + 1).padStart(4, "0");
|
||||
const pokedexImage = `/404/pokedex/${randomNumber}.svg?raw`;
|
||||
---
|
||||
// Get random # (0001–1025)
|
||||
const randomNumber = String(Math.floor(Math.random() * 1025) + 1).padStart(4, "0");
|
||||
|
||||
// Image path
|
||||
const pokedexImage = `/404/pokedex/${randomNumber}.png`;
|
||||
|
||||
// Find Pokémon from JSON
|
||||
const pokemon = pokedexList.find(p => p["#"] === randomNumber);
|
||||
|
||||
// If not found (rare), fallback
|
||||
const pokemonName = pokemon?.Name || "Unknown Pokémon";
|
||||
---
|
||||
<Layout>
|
||||
<PokedexHeader />
|
||||
<div class="container pokedex-page">
|
||||
<div class="row col-10 mx-auto mt-5">
|
||||
<div class="col-12 col-md-5">
|
||||
<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 <a href="/pokemon">Pokémon</a>.</p>
|
||||
<NavBar slot="navbar">
|
||||
<NavItems slot="navItems" />
|
||||
</NavBar>
|
||||
<div class="row mb-4" slot="page">
|
||||
<div class="col-12 col-md-6">
|
||||
<h1 class="mb-4">404 - Page Not Found</h1>
|
||||
<h4>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 <a href="/pokemon">Pokémon</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 offset-md-1 row">
|
||||
<div class="alert alert-warning border col-12" role="alert">
|
||||
<div class="col-12 col-md-4 offset-md-2">
|
||||
<div class="alert alert-warning border p-2" role="alert">
|
||||
<h4 class="alert-heading">Who's that Pokémon?</h4>
|
||||
<p class="mb-0">Click to reveal.</p>
|
||||
<p class="mb-0">Click the image to reveal.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-0 mx-auto position-relative overflow-hidden d-flex">
|
||||
<img class="whos-that-pokemon position-absolute" src="/404/lines.gif">
|
||||
|
||||
<div class="mx-auto d-flex flex-col-reverse flex-lg-row">
|
||||
<div class="ratio ratio-1x1 relative">
|
||||
<img class="w-100 starburst top-0 bottom-0 left-0 right-0" src="/404/glow.png">
|
||||
<Image class="m-auto position-absolute w-75 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle" src={pokedexImage} alt="Who is that Pokémon?" width={100} height={100}></Image>
|
||||
|
||||
<!-- ✨ Name is placed in a data attribute for later use -->
|
||||
<img
|
||||
class="m-auto position-absolute w-50 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle"
|
||||
src={pokedexImage}
|
||||
alt={pokemonName}
|
||||
data-name={pokemonName}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pokémon name reveal -->
|
||||
<div class="col-12 text-center mt-3">
|
||||
<h3 id="pokemon-name" class="opacity-0 transition-opacity">???</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const maskedImage = document.querySelector('.masked-image');
|
||||
maskedImage?.addEventListener('click', () => {
|
||||
maskedImage.classList.remove('masked-image');
|
||||
<script>
|
||||
const img = document.querySelector('.masked-image');
|
||||
const nameEl = document.querySelector('#pokemon-name');
|
||||
|
||||
img?.addEventListener('click', () => {
|
||||
img.classList.remove('masked-image');
|
||||
nameEl.textContent = img.dataset.name || "Unknown Pokémon";
|
||||
nameEl.classList.remove('opacity-0');
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
40
src/pages/contact.astro
Normal file
40
src/pages/contact.astro
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
import Layout from '../layouts/Main.astro';
|
||||
import NavItems from '../components/NavItems.astro';
|
||||
import NavBar from '../components/NavBar.astro';
|
||||
export const prerender = false;
|
||||
---
|
||||
<Layout>
|
||||
<NavBar slot="navbar">
|
||||
<NavItems slot="navItems" />
|
||||
</NavBar>
|
||||
<div class="row mb-4" slot="page">
|
||||
<h1>Contact Us</h1>
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc4F7VZjZ6ImWnNRqzMLyAWnyGQdEC3Nr2xtbzugewky239kg/formResponse" method="POST" id="contactForm">
|
||||
<!-- Name input -->
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Full Name</label>
|
||||
<input type="text" class="form-control" id="name" name="entry.563494744" required>
|
||||
</div>
|
||||
|
||||
<!-- Email address input -->
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="email" name="entry.577942868" aria-describedby="emailHelp" required>
|
||||
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
|
||||
</div>
|
||||
|
||||
<!-- Message textarea -->
|
||||
<div class="mb-3">
|
||||
<label for="message" class="form-label">Message</label>
|
||||
<textarea class="form-control" id="message" name="entry.1640055664" rows="4" required></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Submit button -->
|
||||
<button type="submit" class="btn btn-light">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
@@ -1,7 +1,31 @@
|
||||
---
|
||||
import Layout from '../layouts/Main.astro';
|
||||
import PokedexHeader from '../components/PokedexHeader.astro';
|
||||
import NavItems from '../components/NavItems.astro';
|
||||
import NavBar from '../components/NavBar.astro';
|
||||
export const prerender = false;
|
||||
import { Waitlist as WaitlistAstro } from '@clerk/astro/components'
|
||||
---
|
||||
<Layout>
|
||||
<PokedexHeader />
|
||||
<NavBar slot="navbar">
|
||||
<NavItems slot="navItems" />
|
||||
</NavBar>
|
||||
<div class="row mb-4" slot="page">
|
||||
<h1>Rigid's App Thing</h1>
|
||||
<h5 class="text-secondary">(working title)</h5>
|
||||
<div class="col-12 col-md-7">
|
||||
<h4 class="mt-3">Welcome!</h4>
|
||||
<p class="mt-2">
|
||||
This single-page web applictation is currently in a closed beta. Access to the beta will be limited, and the selection process will be highly curated. You are welcome to request access - if you do not get into the beta, don't worry, after the beta is complete, the app will be available to all users.</p>
|
||||
</p>
|
||||
<p class="my-2">
|
||||
If you would like to join the waitlist, please enter your email address. You will receive an email with instructions on how to access the app when it becomes available.
|
||||
</p>
|
||||
<p class="my-2">
|
||||
If you aren't interested in joining the waitlist, that is okay too! Feel free to play "Who's that Pokémon?" with the random Pokémon generator <a href="/404">here</a>. Refresh the page to see a new Pokémon!
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 offset-md-1 mx-2">
|
||||
<WaitlistAstro />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
@@ -6,11 +6,6 @@ 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;
|
||||
|
||||
@@ -121,7 +116,7 @@ const ebaySearchUrl = (card: any) => {
|
||||
<p class="text-secondary">{card?.set?.setName}</p>
|
||||
<div class="position-relative"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-3" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></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="p text-secondary">{card?.Artist}</div>
|
||||
<div class="p text-secondary">Illustrator: {card?.Artist}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
@@ -193,7 +188,7 @@ const ebaySearchUrl = (card: any) => {
|
||||
<a class="btn btn-secondary mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end my-0"><small class="text-body-secondary">Prices last updated: {timeAgo(calculatedAt)}</small></div>
|
||||
<div class="text-end my-0"><small class="text-body-secondary">Prices last changed: {timeAgo(calculatedAt)}</small></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,24 +1,15 @@
|
||||
---
|
||||
import Layout from '../layouts/Main.astro';
|
||||
import Search from '../components/Search.astro';
|
||||
import CardGrid from "../components/CardGrid.astro";
|
||||
import PokedexHeader from '../components/PokedexHeader.astro';
|
||||
import StickyFilter from '../components/StickyFilter.astro';
|
||||
import NavBar from '../components/NavBar.astro';
|
||||
import NavItems from '../components/NavItems.astro';
|
||||
export const prerender = false;
|
||||
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<PokedexHeader>
|
||||
<StickyFilter />
|
||||
</PokedexHeader>
|
||||
<div class="container">
|
||||
<CardGrid />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NavBar slot="navbar">
|
||||
<Search slot="searchInput" />
|
||||
</NavBar>
|
||||
<CardGrid slot="page" />
|
||||
</Layout>
|
||||
@@ -1,318 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user