unoops

src/lib/components/Navbar.svelte

@@ -25,6 +25,9 @@
       <li class="nav-item" class:active={active === 'leaderboard'}>
         <a class="nav-link" href="/leaderboard">Leaderboard |</a>
       </li>
+      <li class="nav-item" class:active={active === 'designs'}>
+        <a class="nav-link" href="/designs">Designs |</a>
+      </li>
     </ul>
   </div>
 </nav>

src/routes/designs/+layout.svelte

@@ -0,0 +1,24 @@
+<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="designs" />
+
+<div class="page-content">
+  {@render children()}
+</div>
+
+<style>
+  .page-content {
+    padding: 2rem;
+  }
+</style>

src/routes/designs/+page.svelte

@@ -0,0 +1,116 @@
+<script>
+  let selectedRarity = $state('all');
+  let searchQuery = $state('');
+</script>
+
+<h1><mark>Designs</mark></h1>
+
+<div class="content-row">
+  <div class="card info-card">
+    <p>Browse and vote on sticker designs here.</p>
+  </div>
+
+  <div class="card filter-card">
+    <label for="rarity">Filter by rarity:</label>
+    <select id="rarity" bind:value={selectedRarity}>
+      <option value="all">All</option>
+      <option value="current">Current</option>
+      <option value="old">Old</option>
+      <option value="special">Special</option>
+      <option value="in-person">In-Person</option>
+    </select>
+  </div>
+
+  <div class="card search-card">
+    <input 
+      type="text" 
+      placeholder="Search designs..." 
+      bind:value={searchQuery}
+    />
+  </div>
+
+  <button class="card upload-btn">+ Upload a design</button>
+</div>
+
+<style>
+  h1 {
+    font-size: 3rem;
+    margin: 0 0 2rem 0;
+  }
+
+  .content-row {
+    display: flex;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+    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: 0 0 auto;
+  }
+
+  .filter-card {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .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;
+  }
+
+  .search-card {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-card input {
+    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);
+    width: 100%;
+  }
+
+  .upload-btn {
+    font-family: inherit;
+    font-size: 1.25rem;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .upload-btn:hover {
+    background: rgba(250, 248, 245, 1);
+  }
+
+  p {
+    font-size: 1.5rem;
+    margin: 0;
+  }
+
+  mark {
+    background-color: #d9c9b6;
+    padding: 0 0.2rem;
+  }
+</style>