mirror of
https://github.com/System-End/stickers.git
synced 2026-04-19 16:28:17 +00:00
footers and tiny visual changes
This commit is contained in:
EDRipper
parent
1b2a07e172
commit
37ed99a6c6
15 changed files with 252 additions and 242 deletions
|
|
@ -1,66 +0,0 @@
|
|||
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M128 256C230.4 256 256 230.4 256 128C256 25.6 230.4 0 128 0C25.6 0 0 25.6 0 128C0 230.4 25.6 256 128 256Z" fill="black"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<g filter="url(#filter0_ii)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M128 256C230.4 256 256 230.4 256 128C256 25.6 230.4 0 128 0C25.6 0 0 25.6 0 128C0 230.4 25.6 256 128 256Z" fill="url(#paint0_radial)"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_ddii)">
|
||||
<path d="M115.103 48.3682C115.103 47.1299 113.989 46.1892 112.769 46.3965L81.6652 51.6777C80.7036 51.8409 80 52.6741 80 53.6494V205.085C80 206.189 80.8954 207.085 82 207.085H113.103C114.208 207.085 115.103 206.189 115.103 205.085V148.397C115.103 131.127 124.261 120.429 131.892 120.429C138.76 120.429 140.744 127.307 140.744 137.699V205.085C140.744 206.189 141.639 207.085 142.744 207.085H174C175.105 207.085 176 206.189 176 205.085V132.656C176 109.12 167.148 93.9892 144.102 93.9892C134.852 93.9892 125.825 96.2163 118.633 101.146C117.205 102.125 115.103 101.161 115.103 99.4284V48.3682Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_ii" x="-6" y="-6" width="268" height="268" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="6" dy="6"/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-6" dy="-6"/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
|
||||
</filter>
|
||||
<filter id="filter1_ddii" x="64" y="42.3677" width="128" height="192.717" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="12"/>
|
||||
<feGaussianBlur stdDeviation="8"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.125 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.125 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect3_innerShadow"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.92549 0 0 0 0 0.215686 0 0 0 0 0.313726 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="effect3_innerShadow" result="effect4_innerShadow"/>
|
||||
</filter>
|
||||
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(58.6367) scale(245.935)">
|
||||
<stop stop-color="#FF8C37"/>
|
||||
<stop offset="1" stop-color="#EC3750"/>
|
||||
</radialGradient>
|
||||
<clipPath id="clip0">
|
||||
<rect width="256" height="256" fill="white" transform="translate(256) rotate(90)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.4 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import hackClubLogo from '$lib/assets/images/hackClubLogo.svg';
|
||||
import hackClubLogo from '$lib/assets/images/hackClubLogo.png';
|
||||
|
||||
let { active = '' } = $props();
|
||||
let menuOpen = $state(false);
|
||||
|
|
@ -22,29 +22,29 @@
|
|||
|
||||
<div class="navbar-collapse" class:open={menuOpen}>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item" class:active={active === 'dash'}>
|
||||
<a class="nav-link" href="/dash">|Home ⠀</a>
|
||||
</li>
|
||||
<li class="nav-item" class:active={active === 'trade'}>
|
||||
<a class="nav-link" href="/trade">|Trade ⠀</a>
|
||||
</li>
|
||||
<li class="nav-item" class:active={active === 'earn'}>
|
||||
<a class="nav-link" href="/earn">|Get ⠀</a>
|
||||
<a class="nav-link" href="/earn">|Get ⠀</a>
|
||||
</li>
|
||||
<li class="nav-item" class:active={active === 'leaderboard'}>
|
||||
<a class="nav-link" href="/leaderboard">|Leaderboard ⠀</a>
|
||||
<a class="nav-link" href="/leaderboard">|Leaderboard ⠀</a>
|
||||
</li>
|
||||
<li class="nav-item" class:active={active === 'stickers'}>
|
||||
<a class="nav-link" href="/stickers">|Stickers ⠀</a>
|
||||
<a class="nav-link" href="/stickers">|Stickers ⠀</a>
|
||||
</li>
|
||||
<li class="nav-item" class:active={active === 'my-designs'}>
|
||||
<a class="nav-link" href="/my-designs">|My Designs ⠀</a>
|
||||
<a class="nav-link" href="/my-designs">|My Designs ⠀</a>
|
||||
</li>
|
||||
<li class="nav-item" class:active={active === 'vote'}>
|
||||
<a class="nav-link" href="/vote">|Vote ⠀</a>
|
||||
<a class="nav-link" href="/vote">|Vote ⠀</a>
|
||||
</li>
|
||||
<!-- <li class="nav-item" class:active={active === 'trade'}>
|
||||
<a class="nav-link disabled">|Trade (soon)</a>
|
||||
</li>-->
|
||||
<li class="nav-item logout">
|
||||
<a class="nav-link" href="http://localhost:9292/auth/logout">|Logout ⠀</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="help-text">help us archive stickers! DM @EuanRipper or @Nora on slack</span>
|
||||
<span class="help-text">Made with <3 by Nora and Euan</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
|
@ -123,6 +123,12 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.help-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.navbar {
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -10,18 +10,11 @@
|
|||
<div class="error-container">
|
||||
<h1>404!</h1>
|
||||
<img src={errorImg} alt="404" class="error-image" />
|
||||
<p>You aren't supposed to go here - Please go <a href="/dash">back</a></p>
|
||||
<p>You aren't supposed to be here - Please go <a href="/dash">back</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(html, body) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.error-wrapper {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
|
|
@ -29,6 +22,7 @@
|
|||
justify-content: center;
|
||||
padding: 2rem;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
|
|
@ -65,6 +59,6 @@
|
|||
}
|
||||
|
||||
a:hover {
|
||||
color: #666;
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,28 @@
|
|||
<div class="page-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
</AuthGuard>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
padding: 2rem 4rem;
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
height: calc(100vh - 60px);
|
||||
border:#000;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.site-footer {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
<script>
|
||||
import Peelable from '$lib/components/Peelable.svelte';
|
||||
import stickersBg from '$lib/assets/images/stickers.jpg';
|
||||
import Peelable from "$lib/components/Peelable.svelte";
|
||||
import stickersBg from "$lib/assets/images/stickers.jpg";
|
||||
|
||||
function goToTrade() {
|
||||
window.location.href = '/trade';
|
||||
window.location.href = "/trade";
|
||||
}
|
||||
|
||||
function goToEarn() {
|
||||
window.location.href = '/earn';
|
||||
window.location.href = "/earn";
|
||||
}
|
||||
|
||||
function goToVote() {
|
||||
window.location.href = '/vote';
|
||||
window.location.href = "/vote";
|
||||
}
|
||||
|
||||
function goToStickers() {
|
||||
window.location.href = "/stickers";
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -21,72 +25,74 @@
|
|||
|
||||
<div class="cards">
|
||||
<div class="card">
|
||||
<p>USER is looking for a sticker that you own! Are you open to trade?</p>
|
||||
<Peelable
|
||||
class="btn-sticker"
|
||||
corner="bottom-right"
|
||||
peelOnHover={true}
|
||||
hoverPeelAmount={0.3}
|
||||
peelOnClick={true}
|
||||
onPeelComplete={goToTrade}
|
||||
borderRadius="0.5rem"
|
||||
>
|
||||
{#snippet topContent()}
|
||||
<div class="sticker-btn">Trade</div>
|
||||
{/snippet}
|
||||
{#snippet backContent()}
|
||||
<div class="sticker-back"></div>
|
||||
{/snippet}
|
||||
{#snippet bottomContent()}
|
||||
<div class="sticker-surface"></div>
|
||||
{/snippet}
|
||||
</Peelable>
|
||||
</div>
|
||||
<p>
|
||||
USER is looking for a sticker that own! Are you open to trade?
|
||||
</p>
|
||||
<Peelable
|
||||
class="btn-sticker"
|
||||
corner="bottom-right"
|
||||
peelOnHover={true}
|
||||
hoverPeelAmount={0.3}
|
||||
peelOnClick={true}
|
||||
onPeelComplete={goToTrade}
|
||||
borderRadius="0.5rem"
|
||||
>
|
||||
{#snippet topContent()}
|
||||
<div class="sticker-btn">Trade</div>
|
||||
{/snippet}
|
||||
{#snippet backContent()}
|
||||
<div class="sticker-back"></div>
|
||||
{/snippet}
|
||||
{#snippet bottomContent()}
|
||||
<div class="sticker-surface"></div>
|
||||
{/snippet}
|
||||
</Peelable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<p>STICKER is X% cheaper this week</p>
|
||||
<Peelable
|
||||
class="btn-sticker"
|
||||
corner="bottom-right"
|
||||
peelOnHover={true}
|
||||
hoverPeelAmount={0.3}
|
||||
peelOnClick={true}
|
||||
onPeelComplete={goToEarn}
|
||||
borderRadius="0.5rem"
|
||||
>
|
||||
{#snippet topContent()}
|
||||
<div class="sticker-btn">Shop</div>
|
||||
{/snippet}
|
||||
{#snippet backContent()}
|
||||
<div class="sticker-back"></div>
|
||||
{/snippet}
|
||||
{#snippet bottomContent()}
|
||||
<div class="sticker-surface"></div>
|
||||
{/snippet}
|
||||
</Peelable>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p>STICKER is X% cheaper this week</p>
|
||||
<Peelable
|
||||
class="btn-sticker"
|
||||
corner="bottom-right"
|
||||
peelOnHover={true}
|
||||
hoverPeelAmount={0.3}
|
||||
peelOnClick={true}
|
||||
onPeelComplete={goToEarn}
|
||||
borderRadius="0.5rem"
|
||||
>
|
||||
{#snippet topContent()}
|
||||
<div class="sticker-btn">Shop</div>
|
||||
{/snippet}
|
||||
{#snippet backContent()}
|
||||
<div class="sticker-back"></div>
|
||||
{/snippet}
|
||||
{#snippet bottomContent()}
|
||||
<div class="sticker-surface"></div>
|
||||
{/snippet}
|
||||
</Peelable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<p>New sticker drop! Vote on the best option now!</p>
|
||||
<Peelable
|
||||
class="btn-sticker"
|
||||
corner="bottom-right"
|
||||
peelOnHover={true}
|
||||
hoverPeelAmount={0.3}
|
||||
peelOnClick={true}
|
||||
onPeelComplete={goToVote}
|
||||
borderRadius="0.5rem"
|
||||
>
|
||||
{#snippet topContent()}
|
||||
<div class="sticker-btn">Vote</div>
|
||||
{/snippet}
|
||||
{#snippet backContent()}
|
||||
<div class="sticker-back"></div>
|
||||
{/snippet}
|
||||
{#snippet bottomContent()}
|
||||
<div class="sticker-surface"></div>
|
||||
{/snippet}
|
||||
</Peelable>
|
||||
<div class="card">
|
||||
<p>New sticker drop! Vote on the best option now!</p>
|
||||
<Peelable
|
||||
class="btn-sticker"
|
||||
corner="bottom-right"
|
||||
peelOnHover={true}
|
||||
hoverPeelAmount={0.3}
|
||||
peelOnClick={true}
|
||||
onPeelComplete={goToVote}
|
||||
borderRadius="0.5rem"
|
||||
>
|
||||
{#snippet topContent()}
|
||||
<div class="sticker-btn">Vote</div>
|
||||
{/snippet}
|
||||
{#snippet backContent()}
|
||||
<div class="sticker-back"></div>
|
||||
{/snippet}
|
||||
{#snippet bottomContent()}
|
||||
<div class="sticker-surface"></div>
|
||||
{/snippet}
|
||||
</Peelable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,13 +103,13 @@
|
|||
<div class="right-header">
|
||||
<h1><mark>Your collection</mark></h1>
|
||||
<div class="button-group">
|
||||
<button class="btn-left">Claim stickers</button>
|
||||
<button class="btn-left" onclick={goToStickers}>Claim stickers</button>
|
||||
<button class="btn-right">Place stickers</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="canvas" style="background-image: url({stickersBg});">
|
||||
<div class="empty-overlay">
|
||||
<b><u>No stickers placed!</u></b><br>X stickers owned.
|
||||
<b><u>No stickers placed!</u></b><br />X stickers owned.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -115,18 +121,28 @@
|
|||
gap: 2rem;
|
||||
height: calc(100vh - 120px);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
flex: 0 0 500px;
|
||||
min-width: 500px;
|
||||
overflow-y: auto;
|
||||
flex: 0 0 350px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.divider {
|
||||
|
|
@ -137,11 +153,12 @@
|
|||
}
|
||||
|
||||
.right-column {
|
||||
flex: 1;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
padding-bottom: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
|
|
@ -200,37 +217,41 @@
|
|||
p {
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 1rem 0;
|
||||
font-family: 'Departure Mono', monospace;
|
||||
}
|
||||
|
||||
:global(.btn-sticker) {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
font-family: 'Departure Mono', monospace;
|
||||
|
||||
}
|
||||
|
||||
.sticker-btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #444444;
|
||||
background:#8bb1e3;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.sticker-back {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #d9c9b6;
|
||||
background: #729abd;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.sticker-surface {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #d1a874;
|
||||
background: #d9c9b6;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -239,7 +260,7 @@
|
|||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@media (max-width: 1400px) {
|
||||
.layout {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
|
|
@ -250,11 +271,13 @@
|
|||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow-y: visible;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
padding-bottom: 2rem;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
|
|
|
|||
|
|
@ -18,10 +18,20 @@
|
|||
<div class="page-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
</AuthGuard>
|
||||
|
||||
<style>
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
padding: 2rem 4rem;
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.site-footer {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,20 @@
|
|||
<div class="page-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
</AuthGuard>
|
||||
|
||||
<style>
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
padding: 2rem 4rem;
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.site-footer {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,20 @@
|
|||
<div class="page-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
</AuthGuard>
|
||||
|
||||
<style>
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
padding: 2rem 4rem;
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.site-footer {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,11 +7,7 @@
|
|||
{ rank: 3, username: 'LFD', totalStickers: 28, uniques: 18, rares: 3 },
|
||||
{ rank: 4, username: 'Nora', totalStickers: 19, uniques: 15, rares: 3 },
|
||||
{ rank: 5, username: 'Euan', totalStickers: 17, uniques: 16, rares: 3 },
|
||||
{ rank: 6, username: 'KittyCat', totalStickers: 15, uniques: 10, rares: 3 },
|
||||
{ rank: 7, username: 'AVD', totalStickers: 14, uniques: 14, rares: 2 },
|
||||
{ rank: 8, username: 'Neon', totalStickers: 12, uniques: 6, rares: 0 },
|
||||
{ rank: 9, username: 'Kartikey', totalStickers: 11, uniques: 10, rares: 0 },
|
||||
{ rank: 10, username: 'Jmeow', totalStickers: 9, uniques: 9, rares: 1 },
|
||||
|
||||
{ rank: 1192, username: 'You', totalStickers: 2, uniques: 2, rares: 0 }
|
||||
];
|
||||
|
||||
|
|
@ -104,7 +100,7 @@
|
|||
.content-row {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: nowrap;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
|
@ -116,11 +112,12 @@
|
|||
}
|
||||
|
||||
.info-card {
|
||||
flex: 1;
|
||||
flex: 1 1 300px;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -144,7 +141,12 @@
|
|||
p {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
|
|
|
|||
|
|
@ -18,10 +18,20 @@
|
|||
<div class="page-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
</AuthGuard>
|
||||
|
||||
<style>
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
padding: 2rem 4rem;
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.site-footer {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,13 @@
|
|||
</AuthGuard>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
padding: 2rem 4rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,22 @@
|
|||
<div class="page-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
<footer class="site-footer">
|
||||
<b>THIS PAGE IS UNDER CONSTRUCTION</b>
|
||||
</footer>
|
||||
</AuthGuard>
|
||||
|
||||
<style>
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
padding: 2rem 4rem;
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.site-footer {
|
||||
background: #000000;
|
||||
color: #ff0000;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,78 +20,31 @@
|
|||
|
||||
function openMakeDeal() {
|
||||
showModal = true;
|
||||
showModal()
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
|
||||
if (showModal) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
alert('test');
|
||||
|
||||
} else {
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1><mark>Trade</mark></h1>
|
||||
|
||||
<button class="make-deal-btn" onclick={openMakeDeal}>+ Make a Deal</button>
|
||||
<button class="make-deal-btn" onclick={openMakeDeal}>Propose</button>
|
||||
|
||||
<h2><div style="font-weight: bold; background-color: #d9c9b6; padding: 0 1rem; font-family: 'Departure Mono', monospace; height: 2rem; width: max-content;">Incoming Trades</div></h2>
|
||||
|
||||
<div class="trades-list">
|
||||
{#each mockTrades as trade}
|
||||
<div class="trade-row">
|
||||
<div class="trade-box">
|
||||
<div class="trade-side give-side">
|
||||
<img src={trade.give.img} alt={trade.give.name} class="sticker-img" />
|
||||
<div class="quantity">×{trade.give.quantity}</div>
|
||||
</div>
|
||||
<div class="trade-side get-side">
|
||||
<img src={trade.get.img} alt={trade.get.name} class="sticker-img" />
|
||||
<div class="quantity">×{trade.get.quantity}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-message">
|
||||
<div class="message-header">
|
||||
<span class="from-user">{trade.from}</span>
|
||||
</div>
|
||||
<p class="message-text">{trade.message}</p>
|
||||
<button class="discuss-btn">Discuss</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if showModal}
|
||||
<div class="modal-overlay" onclick={closeModal}>
|
||||
<div class="modal" onclick={(e) => e.stopPropagation()}>
|
||||
<h2>Propose a Trade</h2>
|
||||
<div class="modal-content">
|
||||
<div class="trade-side give-side">
|
||||
<label>You Give</label>
|
||||
<select>
|
||||
<option>Select sticker...</option>
|
||||
<option>Orpheus</option>
|
||||
<option>Hack Club Flag</option>
|
||||
<option>HackOS </option>
|
||||
</select>
|
||||
<input type="number" placeholder="Qty" value="1" min="1" />
|
||||
</div>
|
||||
<div class="trade-arrow">⇄</div>
|
||||
<div class="trade-side get-side">
|
||||
<label>You Get</label>
|
||||
<select>
|
||||
<option>Select sticker...</option>
|
||||
<option>🦕 Orpheus</option>
|
||||
<option>🚩 Hack Club Flag</option>
|
||||
<option>💻 Retro Computer</option>
|
||||
</select>
|
||||
<input type="number" placeholder="Qty" value="1" min="1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button class="cancel-btn" onclick={closeModal}>Cancel</button>
|
||||
<button class="submit-btn" onclick={closeModal}>Post Trade</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
|
|
|
|||
|
|
@ -18,10 +18,22 @@
|
|||
<div class="page-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
<footer class="site-footer">
|
||||
© 2026 Hack Club. 501(c)(3) nonprofit (EIN: 81-2908499)
|
||||
</footer>
|
||||
</AuthGuard>
|
||||
|
||||
<style>
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
padding: 2rem 4rem;
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.site-footer {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,20 @@
|
|||
<div class="page-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
</AuthGuard>
|
||||
|
||||
<style>
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
padding: 2rem 4rem;
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.site-footer {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue