mirror of
https://github.com/System-End/stickers.git
synced 2026-04-19 16:28:17 +00:00
Revert "feat: all routes"
This reverts commit 550ba2a6ba.
yeah i pulled some BS again
This commit is contained in:
EDRipper
parent
06b0200c1b
commit
2c63a8c505
13 changed files with 25 additions and 1190 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
|
|
@ -1,50 +1,34 @@
|
|||
<script>
|
||||
import hackClubLogo from '$lib/assets/images/hackClubLogo.svg';
|
||||
|
||||
let { active = '' } = $props();
|
||||
let menuOpen = $state(false);
|
||||
|
||||
function toggleMenu() {
|
||||
menuOpen = !menuOpen;
|
||||
}
|
||||
export let active = '';
|
||||
</script>
|
||||
|
||||
<nav class="navbar">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="/dash">
|
||||
<img src={hackClubLogo} alt="Hack Club Logo" />
|
||||
<img src={hackClubLogo} alt="Hack Club Logo" style="height: 40px;">
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" onclick={toggleMenu} aria-label="Toggle navigation">
|
||||
<span class="toggler-icon"></span>
|
||||
<span class="toggler-icon"></span>
|
||||
<span class="toggler-icon"></span>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="navbar-collapse" class:open={menuOpen}>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item" class:active={active === 'dash'}>
|
||||
<a class="nav-link" href="/dash">|Home ⠀</a>
|
||||
<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>
|
||||
<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">Earn |</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>
|
||||
</li>
|
||||
<li class="nav-item" class:active={active === 'my-designs'}>
|
||||
<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>
|
||||
<li class="nav-item" class:active={active === 'designs'}>
|
||||
<a class="nav-link" href="/designs">Designs |</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="help-text">help us archive stickers! DM @EuanRipper or @Nora on slack</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
|
@ -52,120 +36,14 @@
|
|||
.navbar {
|
||||
font-family: 'Departure Mono', monospace;
|
||||
padding: 1rem 2rem;
|
||||
background: #f8f9fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: 2px solid #333;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.toggler-icon {
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background: #333;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
.navbar :global(.nav-link) {
|
||||
font-size: 1.25rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
margin-left: auto;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.navbar {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.toggler-icon {
|
||||
width: 28px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
display: none;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.navbar-collapse.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 1rem 1rem;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
margin-left: 0;
|
||||
margin-top: 1rem;
|
||||
white-space: normal;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.navbar :global(.navbar-brand img) {
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, a, li, span, button, input, label, mark, th, td, select, option {
|
||||
h1, h2, h3, h4, h5, h6, p, a, li, span, button, input, label {
|
||||
font-family: 'Departure Mono', monospace;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -150,12 +150,10 @@
|
|||
corner="bottom-right"
|
||||
peelOnHover={true}
|
||||
hoverPeelAmount={0.3}
|
||||
peelOnClick={true}
|
||||
onPeelComplete={goToTrade}
|
||||
borderRadius="0.5rem"
|
||||
>
|
||||
{#snippet topContent()}
|
||||
<div class="sticker-btn">Trade</div>
|
||||
<div class="sticker-btn">Open</div>
|
||||
{/snippet}
|
||||
{#snippet backContent()}
|
||||
<div class="sticker-back"></div>
|
||||
|
|
@ -173,8 +171,6 @@
|
|||
corner="bottom-right"
|
||||
peelOnHover={true}
|
||||
hoverPeelAmount={0.3}
|
||||
peelOnClick={true}
|
||||
onPeelComplete={goToEarn}
|
||||
borderRadius="0.5rem"
|
||||
>
|
||||
{#snippet topContent()}
|
||||
|
|
@ -196,8 +192,6 @@
|
|||
corner="bottom-right"
|
||||
peelOnHover={true}
|
||||
hoverPeelAmount={0.3}
|
||||
peelOnClick={true}
|
||||
onPeelComplete={goToVote}
|
||||
borderRadius="0.5rem"
|
||||
>
|
||||
{#snippet topContent()}
|
||||
|
|
@ -226,7 +220,7 @@
|
|||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</svelte:head>
|
||||
|
||||
<Background />
|
||||
<Navbar active="vote" />
|
||||
<Navbar active="designs" />
|
||||
|
||||
<div class="page-content">
|
||||
{@render children()}
|
||||
|
|
@ -1,23 +1,20 @@
|
|||
<script>
|
||||
let selectedRarity = $state('all');
|
||||
let searchQuery = $state('');
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<h1><mark>Designs</mark></h1>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="card info-card">
|
||||
<p>Check out all the Hack Club stickers, let us know if we missed any!</p>
|
||||
<p>Browse and vote on sticker designs here.</p>
|
||||
</div>
|
||||
|
||||
<div class="card filter-card">
|
||||
<label for="rarity">Sort:</label>
|
||||
<label for="rarity">Filter by rarity:</label>
|
||||
<select id="rarity" bind:value={selectedRarity}>
|
||||
<option value="all">All</option>
|
||||
<option value="rarity">Rarity</option>
|
||||
<option value="current">Available</option>
|
||||
<option value="current">Current</option>
|
||||
<option value="old">Old</option>
|
||||
<option value="special">Special</option>
|
||||
<option value="in-person">In-Person</option>
|
||||
|
|
@ -35,35 +32,6 @@
|
|||
<button class="card upload-btn">+ Upload a design</button>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Design</th>
|
||||
<th>Name</th>
|
||||
<th>In Stock</th>
|
||||
<th>Price</th>
|
||||
<th>Program</th>
|
||||
<th>Created</th>
|
||||
<th>Artist</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each mockDesigns as design}
|
||||
<tr>
|
||||
<td class="design-icon">{design.design}</td>
|
||||
<td>{design.name}</td>
|
||||
<td class:out-of-stock={design.inStock === 0}>{design.inStock}</td>
|
||||
<td>{design.price} hrs</td>
|
||||
<td>{design.program}</td>
|
||||
<td>{design.created}</td>
|
||||
<td>{design.artist}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
|
|
@ -73,7 +41,7 @@
|
|||
.content-row {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: nowrap;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
|
@ -92,7 +60,6 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.filter-card label {
|
||||
|
|
@ -127,11 +94,10 @@
|
|||
}
|
||||
|
||||
.upload-btn {
|
||||
font-family: 'Departure Mono', monospace;
|
||||
font-size: 1.5rem;
|
||||
font-family: inherit;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.upload-btn:hover {
|
||||
|
|
@ -141,52 +107,10 @@
|
|||
p {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #d9c9b6;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin-top: 2rem;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
th {
|
||||
background: rgba(217, 201, 182, 0.5);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: rgba(250, 248, 245, 0.5);
|
||||
}
|
||||
|
||||
.design-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.out-of-stock {
|
||||
color: #cc0000;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
|
||||
<h1><mark>Hack For Stickers</mark></h1>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="card info-card">
|
||||
<p>You can uh get free stickers or ship 10 hours for a monthly crate of cool ones valid for 6 months! Link ur hackatime or smth...</p>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-card p {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #d9c9b6;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -1,229 +0,0 @@
|
|||
<script>
|
||||
let sortBy = $state('total');
|
||||
|
||||
const mockUsers = [
|
||||
{ rank: 1, username: 'MSW', totalStickers: 42, uniques: 33, rares: 4 },
|
||||
{ rank: 2, username: 'ZRL', totalStickers: 30, uniques: 20, rares: 4 },
|
||||
{ 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 }
|
||||
];
|
||||
|
||||
const youUser = mockUsers.find(u => u.username === 'You');
|
||||
const sortedUsers = $derived(
|
||||
[...mockUsers].filter(u => u.username !== 'You').sort((a, b) => {
|
||||
if (sortBy === 'total') return b.totalStickers - a.totalStickers;
|
||||
if (sortBy === 'uniques') return b.uniques - a.uniques;
|
||||
if (sortBy === 'rares') return b.rares - a.rares;
|
||||
return 0;
|
||||
}).map((user, i) => ({ ...user, rank: i + 1 }))
|
||||
);
|
||||
</script>
|
||||
|
||||
<h1><mark>Leaderboard</mark></h1>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="card info-card">
|
||||
<p>Top Sticker collectors! This really is a bragging right.</p>
|
||||
</div>
|
||||
|
||||
<div class="card filter-card">
|
||||
<label for="sort">Sort by:</label>
|
||||
<select id="sort" bind:value={sortBy}>
|
||||
<option value="total">Total Stickers</option>
|
||||
<option value="uniques">Unique Stickers</option>
|
||||
<option value="rares">Rare Stickers</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Username</th>
|
||||
<th>Total Stickers</th>
|
||||
<th>Uniques</th>
|
||||
<th>Rares</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each sortedUsers as user}
|
||||
<tr class:top-three={user.rank <= 3}>
|
||||
<td class="rank rank-{user.rank}">{user.rank}</td>
|
||||
<td class="username">{user.username}</td>
|
||||
<td>{user.totalStickers}</td>
|
||||
<td>{user.uniques}</td>
|
||||
<td>{user.rares}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
{#if youUser}
|
||||
<div class="table-container you-container">
|
||||
<table>
|
||||
<thead class="hidden-header">
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Username</th>
|
||||
<th>Total Stickers</th>
|
||||
<th>Uniques</th>
|
||||
<th>Rares</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="you-row">
|
||||
<td class="rank">{youUser.rank}</td>
|
||||
<td class="username">{youUser.username}</td>
|
||||
<td>{youUser.totalStickers}</td>
|
||||
<td>{youUser.uniques}</td>
|
||||
<td>{youUser.rares}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.filter-card label {
|
||||
font-size: 1.25rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-card select {
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(250, 248, 245, 0.95);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #d9c9b6;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin-top: 2rem;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
th {
|
||||
background: rgba(217, 201, 182, 0.5);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: rgba(250, 248, 245, 0.5);
|
||||
}
|
||||
|
||||
.top-three {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rank {
|
||||
font-family: 'Departure Mono', monospace;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.rank-1 {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.rank-2 {
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
.rank-3 {
|
||||
color: #cd7f32;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.you-container {
|
||||
background: #d4edda;
|
||||
}
|
||||
|
||||
.hidden-header {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.you-row:hover {
|
||||
background: #c3e6cb;
|
||||
}
|
||||
|
||||
.you-row td {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<script>
|
||||
import Background from '$lib/components/Background.svelte';
|
||||
import Navbar from '$lib/components/Navbar.svelte';
|
||||
import '$lib/styles/global.css';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
</svelte:head>
|
||||
|
||||
<Background />
|
||||
<Navbar active="my-designs" />
|
||||
|
||||
<div class="page-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,299 +0,0 @@
|
|||
<script>
|
||||
import resizeIcon from '$lib/assets/images/resize.jpg';
|
||||
|
||||
let showModal = $state(false);
|
||||
let selectedDesign = $state(null);
|
||||
|
||||
const myDesigns = [
|
||||
{ designUrl: 'https://hc-cdn.hel1.your-objectstorage.com/s/v3/80c59fb29dd5a3fbffc1b2297b512ac8cbb719cb_IMG_5304.png ', name: 'FlavorTownRed', status: 'approved', votes: 42, width: 100, height: 100, submittedAt: '2024-03-15' },
|
||||
{ designUrl: 'https://hc-cdn.hel1.your-objectstorage.com/s/v3/80c59fb29dd5a3fbffc1b2297b512ac8cbb719cb_IMG_5304.png ', name: 'FlavorTownRed', status: 'pending', votes: 42, width: 100, height: 100, submittedAt: '2024-03-15' }
|
||||
];
|
||||
|
||||
function openModal(design) {
|
||||
selectedDesign = design;
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
selectedDesign = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1><mark>My Designs</mark></h1>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="card info-card">
|
||||
<p>Submit a sticker design, after voting it could be shipped out in the monthly sticker box</p>
|
||||
</div>
|
||||
|
||||
<button class="card upload-btn">+ Upload a design</button>
|
||||
</div>
|
||||
|
||||
{#if myDesigns.length > 0}
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Design</th>
|
||||
<th>Name</th>
|
||||
<th>Submitted</th>
|
||||
<th>Status</th>
|
||||
<th>Votes</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each myDesigns as design}
|
||||
<tr>
|
||||
<td class="design-cell">
|
||||
<img src={design.designUrl} alt={design.name} class="design-thumb" />
|
||||
<button class="resize-btn" onclick={() => openModal(design)}>
|
||||
<img src={resizeIcon} alt="Resize" />
|
||||
</button>
|
||||
</td>
|
||||
<td>{design.name}</td>
|
||||
<td>{design.submittedAt}</td>
|
||||
<td>
|
||||
<span class="status status-{design.status}">{design.status}</span>
|
||||
</td>
|
||||
<td>{design.votes}</td>
|
||||
<td>
|
||||
<button class="action-btn">Edit</button>
|
||||
<button class="action-btn delete">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="empty-state">
|
||||
<p>You haven't uploaded any designs yet.</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showModal && selectedDesign}
|
||||
<div class="modal-overlay" onclick={closeModal}>
|
||||
<div class="modal-content" onclick={(e) => e.stopPropagation()}>
|
||||
<button class="modal-close" onclick={closeModal}>×</button>
|
||||
<img src={selectedDesign.designUrl} alt={selectedDesign.name} class="modal-image" />
|
||||
<div class="modal-footer">
|
||||
{selectedDesign.name} — {selectedDesign.width}mm × {selectedDesign.height}mm
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
font-family: 'Departure Mono', monospace;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.upload-btn:hover {
|
||||
background: rgba(250, 248, 245, 1);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #d9c9b6;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin-top: 2rem;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
th {
|
||||
background: rgba(217, 201, 182, 0.5);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: rgba(250, 248, 245, 0.5);
|
||||
}
|
||||
|
||||
.design-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.design-thumb {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: contain;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.resize-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.resize-btn img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.resize-btn:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.status-approved {
|
||||
background: #c8f7c5;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background: #fff3cd;
|
||||
}
|
||||
|
||||
.status-rejected {
|
||||
background: #f8d7da;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 1px solid #333;
|
||||
border-radius: 0.25rem;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.action-btn.delete {
|
||||
background: #f8d7da;
|
||||
border-color: #cc0000;
|
||||
}
|
||||
|
||||
.action-btn.delete:hover {
|
||||
background: #f5c6cb;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
margin-top: 2rem;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 3rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #fff;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid #333;
|
||||
padding: 2rem;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 70vw;
|
||||
max-height: 60vh;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
margin-top: 1.5rem;
|
||||
font-family: 'Departure Mono', monospace;
|
||||
font-size: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<script>
|
||||
import Background from '$lib/components/Background.svelte';
|
||||
import Navbar from '$lib/components/Navbar.svelte';
|
||||
import '$lib/styles/global.css';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
</svelte:head>
|
||||
|
||||
<Background />
|
||||
<Navbar active="stickers" />
|
||||
|
||||
<div class="page-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,309 +0,0 @@
|
|||
<script>
|
||||
const mockTrades = [
|
||||
{
|
||||
id: 1,
|
||||
from: 'LFD',
|
||||
get: { name: 'Crow thing', img: 'https://hc-cdn.hel1.your-objectstorage.com/s/v3/d2edc2953c00399264ec0c9d93167794a1cb1867_image.png ', quantity: 2 },
|
||||
give: { name: 'FlavorTownRed', img: 'https://hc-cdn.hel1.your-objectstorage.com/s/v3/80c59fb29dd5a3fbffc1b2297b512ac8cbb719cb_IMG_5304.png', quantity: 1 },
|
||||
message: "Yo midnight just wrapped and i have one billion left over stickers, would trade most things."
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
from: 'LFD',
|
||||
get: { name: 'Crow thing', img: 'https://hc-cdn.hel1.your-objectstorage.com/s/v3/d2edc2953c00399264ec0c9d93167794a1cb1867_image.png ', quantity: 2 },
|
||||
give: { name: 'FlavorTownRed', img: 'https://hc-cdn.hel1.your-objectstorage.com/s/v3/80c59fb29dd5a3fbffc1b2297b512ac8cbb719cb_IMG_5304.png', quantity: 1 },
|
||||
message: "Yo midnight just wrapped and i have one billion left over stickers, would trade most things."
|
||||
}
|
||||
];
|
||||
|
||||
let showModal = $state(false);
|
||||
|
||||
function openMakeDeal() {
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1><mark>Trade</mark></h1>
|
||||
|
||||
<button class="make-deal-btn" onclick={openMakeDeal}>+ Make a Deal</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;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #d9c9b6;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
.make-deal-btn {
|
||||
background: #444;
|
||||
color: white;
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.make-deal-btn:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.trades-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.trade-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.trade-box {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trade-side {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.give-side {
|
||||
background: #ffebee;
|
||||
}
|
||||
|
||||
.get-side {
|
||||
background: #e8f5e9;
|
||||
}
|
||||
|
||||
.sticker-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
font-family: 'Departure Mono', monospace;
|
||||
}
|
||||
|
||||
.trade-message {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.from-user {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.discuss-btn {
|
||||
align-self: flex-start;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #444;
|
||||
color: white;
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.discuss-btn:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
padding: 2rem;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-content .trade-side {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-content .trade-side label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-content .trade-side select,
|
||||
.modal-content .trade-side input {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 0.25rem;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-content .trade-side input {
|
||||
margin-top: 0.5rem;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #eee;
|
||||
color: #333;
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background: #4caf50;
|
||||
color: white;
|
||||
border: 2px solid #333;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: #45a049;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
|
||||
<h1><mark>Vote</mark></h1>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="card info-card">
|
||||
<p>Voting will be open in [time]! Right now please take a look at the current submissions. Remember the highest voted design will be produced and shipped.</p>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-card p {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #d9c9b6;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Reference in a new issue