@@ -36,14 +52,120 @@
.navbar {
font-family: 'Departure Mono', monospace;
padding: 1rem 2rem;
+ background: #f8f9fa;
+ display: flex;
+ align-items: center;
+ flex-wrap: nowrap;
}
- .navbar :global(.nav-link) {
- font-size: 1.25rem;
- padding: 0.75rem 1.25rem;
- }
-
- .navbar :global(.navbar-brand img) {
+ .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;
+ 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;
+ }
+ }
diff --git a/src/lib/styles/global.css b/src/lib/styles/global.css
index 9ad6d01..3d94489 100644
--- a/src/lib/styles/global.css
+++ b/src/lib/styles/global.css
@@ -12,6 +12,6 @@ body {
padding: 0;
}
-h1, h2, h3, h4, h5, h6, p, a, li, span, button, input, label {
+h1, h2, h3, h4, h5, h6, p, a, li, span, button, input, label, mark, th, td, select, option {
font-family: 'Departure Mono', monospace;
}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7372358..5d9299c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,8 +19,7 @@
}
function handleLogin() {
-
- window.location.href = '/dash';
+ window.location.href = 'http://localhost:9292/auth/login';
}
diff --git a/src/routes/dash/+page.svelte b/src/routes/dash/+page.svelte
index 947d9c9..a31c2bc 100644
--- a/src/routes/dash/+page.svelte
+++ b/src/routes/dash/+page.svelte
@@ -2,12 +2,6 @@
import Peelable from '$lib/components/Peelable.svelte';
import stickersBg from '$lib/assets/images/stickers.jpg';
- let showClaimModal = $state(false);
- let requiredFingers = $state(Math.floor(Math.random() * 5) + 1);
- let uploadedFile = $state(null);
- let previewUrl = $state(null);
- let isDragging = $state(false);
-
function goToTrade() {
window.location.href = '/trade';
}
@@ -19,125 +13,8 @@
function goToVote() {
window.location.href = '/vote';
}
-
- function openClaimModal() {
- requiredFingers = Math.floor(Math.random() * 5) + 1;
- showClaimModal = true;
- }
-
- function closeClaimModal() {
- showClaimModal = false;
- clearFile();
- }
-
- function handleFileSelect(event) {
- const input = event.target;
- if (input.files && input.files[0]) {
- setFile(input.files[0]);
- }
- }
-
- function handleDrop(event) {
- event.preventDefault();
- isDragging = false;
- if (event.dataTransfer?.files && event.dataTransfer.files[0]) {
- setFile(event.dataTransfer.files[0]);
- }
- }
-
- function handleDragOver(event) {
- event.preventDefault();
- isDragging = true;
- }
-
- function handleDragLeave() {
- isDragging = false;
- }
-
- function setFile(file) {
- if (file.type.startsWith('image/')) {
- uploadedFile = file;
- previewUrl = URL.createObjectURL(file);
- }
- }
-
- function clearFile() {
- if (previewUrl) {
- URL.revokeObjectURL(previewUrl);
- }
- uploadedFile = null;
- previewUrl = null;
- }
-
- function submitClaim() {
- if (!uploadedFile) return;
- alert('Claim submitted for verification!');
- closeClaimModal();
- }
-{#if showClaimModal}
-
diff --git a/src/routes/earn/+layout.svelte b/src/routes/earn/+layout.svelte
index be1afa9..e0cc399 100644
--- a/src/routes/earn/+layout.svelte
+++ b/src/routes/earn/+layout.svelte
@@ -11,7 +11,7 @@
{@render children()}
diff --git a/src/routes/earn/+page.svelte b/src/routes/earn/+page.svelte
index e69de29..0e8065d 100644
--- a/src/routes/earn/+page.svelte
+++ b/src/routes/earn/+page.svelte
@@ -0,0 +1,38 @@
+
+
Hack For Stickers
+
+
+
+
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...
+
+
+
diff --git a/src/routes/leaderboard/+page.svelte b/src/routes/leaderboard/+page.svelte
index e69de29..98af8dd 100644
--- a/src/routes/leaderboard/+page.svelte
+++ b/src/routes/leaderboard/+page.svelte
@@ -0,0 +1,229 @@
+
+
+
Leaderboard
+
+
+
+
Top Sticker collectors! This really is a bragging right.
+
+
+
+
+
+
+
+
+
+
+
+
+ | Rank |
+ Username |
+ Total Stickers |
+ Uniques |
+ Rares |
+
+
+
+ {#each sortedUsers as user}
+
+ | {user.rank} |
+ {user.username} |
+ {user.totalStickers} |
+ {user.uniques} |
+ {user.rares} |
+
+ {/each}
+
+
+
+
+
+
+{#if youUser}
+
+
+
+
+
+ | {youUser.rank} |
+ {youUser.username} |
+ {youUser.totalStickers} |
+ {youUser.uniques} |
+ {youUser.rares} |
+
+
+
+
+{/if}
+
+
diff --git a/src/routes/my-designs/+layout.svelte b/src/routes/my-designs/+layout.svelte
new file mode 100644
index 0000000..379ec6c
--- /dev/null
+++ b/src/routes/my-designs/+layout.svelte
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+ {@render children()}
+
+
+
diff --git a/src/routes/my-designs/+page.svelte b/src/routes/my-designs/+page.svelte
new file mode 100644
index 0000000..a6eb755
--- /dev/null
+++ b/src/routes/my-designs/+page.svelte
@@ -0,0 +1,299 @@
+
+
+
My Designs
+
+
+
+
Submit a sticker design, after voting it could be shipped out in the monthly sticker box
+
+
+
+
+
+{#if myDesigns.length > 0}
+
+
+
+
+ | Design |
+ Name |
+ Submitted |
+ Status |
+ Votes |
+ Actions |
+
+
+
+ {#each myDesigns as design}
+
+
+ 
+
+ |
+ {design.name} |
+ {design.submittedAt} |
+
+ {design.status}
+ |
+ {design.votes} |
+
+
+
+ |
+
+ {/each}
+
+
+
+{:else}
+
+
You haven't uploaded any designs yet.
+
+{/if}
+
+{#if showModal && selectedDesign}
+
+
e.stopPropagation()}>
+
+
+
+
+
+{/if}
+
+
diff --git a/src/routes/stickers/+layout.svelte b/src/routes/stickers/+layout.svelte
new file mode 100644
index 0000000..fced9ee
--- /dev/null
+++ b/src/routes/stickers/+layout.svelte
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+ {@render children()}
+
+
+
diff --git a/src/routes/stickers/+page.svelte b/src/routes/stickers/+page.svelte
index 18cf6cf..4095472 100644
--- a/src/routes/stickers/+page.svelte
+++ b/src/routes/stickers/+page.svelte
@@ -3,7 +3,7 @@
let selectedFilter = $state('all');
let searchQuery = $state('');
- let expandedId = $state(null);
+ let selectedSticker = $state(null);
let stickers = $state([]);
let loading = $state(true);
let error = $state(null);
@@ -31,11 +31,23 @@
})
);
- function toggleExpand(id) {
- expandedId = expandedId === id ? null : id;
+ function openModal(sticker) {
+ selectedSticker = sticker;
+ }
+
+ function closeModal() {
+ selectedSticker = null;
+ }
+
+ function handleKeydown(e) {
+ if (e.key === 'Escape' && selectedSticker) {
+ closeModal();
+ }
}
+
+
Stickers
@@ -72,8 +84,7 @@
{#each filteredDesigns as design}
toggleExpand(design.id)}
+ onclick={() => openModal(design)}
>
@@ -84,20 +95,6 @@
by {design.artist}
{/if}
- {#if expandedId === design.id}
-
- {#if design.event}
-
- Event:
- {design.event}
-
- {/if}
-
- ID:
- {design.id}
-
-
- {/if}
{/each}
@@ -107,6 +104,30 @@
{/if}
{/if}
+{#if selectedSticker}
+
+
e.stopPropagation()}>
+
+
+
+
+
+
+
+{/if}
+
diff --git a/src/routes/trade/+page.svelte b/src/routes/trade/+page.svelte
index e69de29..e5389a4 100644
--- a/src/routes/trade/+page.svelte
+++ b/src/routes/trade/+page.svelte
@@ -0,0 +1,309 @@
+
+
+
Trade
+
+
+
+
Incoming Trades
+
+
+ {#each mockTrades as trade}
+
+
+
+
+
×{trade.give.quantity}
+
+
+
+
×{trade.get.quantity}
+
+
+
+
+
{trade.message}
+
+
+
+ {/each}
+
+
+{#if showModal}
+
+
e.stopPropagation()}>
+
Propose a Trade
+
+
+
+
+
+
+
⇄
+
+
+
+
+
+
+
+
+
+
+
+
+{/if}
+
+
diff --git a/src/routes/vote/+layout.svelte b/src/routes/vote/+layout.svelte
new file mode 100644
index 0000000..f74aa92
--- /dev/null
+++ b/src/routes/vote/+layout.svelte
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+ {@render children()}
+
+
+
diff --git a/src/routes/vote/+page.svelte b/src/routes/vote/+page.svelte
new file mode 100644
index 0000000..a66f553
--- /dev/null
+++ b/src/routes/vote/+page.svelte
@@ -0,0 +1,38 @@
+
+
Vote
+
+
+
+
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.
+
+
+