style

src/lib/components/Piclets/PicletCard.svelte

@@ -1,28 +1,30 @@
 <script lang="ts">
   import type { PicletInstance } from '$lib/db/schema';
   import { TYPE_DATA } from '$lib/types/picletTypes';
-  
+
   interface Props {
     piclet: PicletInstance;
     size?: number;
     onClick?: () => void;
   }
-  
+
   let { piclet, size = 100, onClick }: Props = $props();
-  
+
   const typeColor = $derived(TYPE_DATA[piclet.primaryType]?.color || '#6c757d');
-  const softTypeColor = $derived(`${typeColor}20`); // Add 20% opacity for soft background
+  const softTypeColor = $derived(`${typeColor}20`);
+  const typeLogoPath = $derived(`/classes/${piclet.primaryType}.png`);
 </script>
 
-<button 
-  class="piclet-card" 
-  style="width: {size}px; height: {size + 40}px; --type-color: {typeColor}; --soft-type-color: {softTypeColor};"
+<button
+  class="piclet-card"
+  style="width: {size}px; height: {size + 50}px; --type-color: {typeColor}; --soft-type-color: {softTypeColor}; --type-logo: url('{typeLogoPath}');"
   onclick={onClick}
   type="button"
 >
   <div class="image-container">
-    <img 
-      src={piclet.imageData || piclet.imageUrl} 
+    <div class="logo-watermark"></div>
+    <img
+      src={piclet.imageData || piclet.imageUrl}
       alt={piclet.typeId || 'Piclet'}
       class="piclet-image"
       style="width: {size * 0.8}px; height: {size * 0.8}px;"
@@ -31,11 +33,14 @@
       {piclet.tier}
     </div>
   </div>
-  
+
   <div class="details-section">
     <p class="nickname">{piclet.nickname || piclet.objectName}</p>
-    <div class="types-section">
-      <span class="type primary">{piclet.primaryType.toUpperCase()}</span>
+    <div class="info-row">
+      <span class="type-badge">{piclet.primaryType}</span>
+      {#if piclet.scanCount}
+        <span class="scan-count">×{piclet.scanCount}</span>
+      {/if}
     </div>
   </div>
 </button>
@@ -44,20 +49,25 @@
   .piclet-card {
     display: flex;
     flex-direction: column;
-    background: var(--type-color, #007bff);
+    background: white;
     border-radius: 12px;
-    border: 2px solid;
-    border-color: var(--type-color, #007bff);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border: 2px solid var(--type-color, #007bff);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
     padding: 0;
     cursor: pointer;
-    transition: transform 0.2s;
+    transition: all 0.2s;
+    overflow: hidden;
   }
-  
+
+  .piclet-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  }
+
   .piclet-card:active {
-    transform: scale(0.95);
+    transform: scale(0.97);
   }
-  
+
   .image-container {
     width: 100%;
     flex: 1;
@@ -65,74 +75,106 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 10px 10px 0 0;
+    background: linear-gradient(135deg, var(--soft-type-color) 0%, rgba(255, 255, 255, 0.9) 100%);
     overflow: hidden;
-    background: rgba(255, 255, 255, 0.7);
   }
-  
+
+  .logo-watermark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+    height: 80%;
+    background-image: var(--type-logo);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    opacity: 0.08;
+    pointer-events: none;
+    z-index: 0;
+  }
+
   .piclet-image {
     object-fit: contain;
+    position: relative;
+    z-index: 1;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
   }
-  
+
   .tier-badge {
     position: absolute;
-    top: 4px;
-    right: 4px;
-    padding: 2px 6px;
+    top: 6px;
+    right: 6px;
+    padding: 3px 8px;
     border-radius: 8px;
     font-size: 9px;
     font-weight: bold;
     text-transform: uppercase;
+    z-index: 2;
+    backdrop-filter: blur(4px);
   }
-  
-  .tier-low { background: #6c757d; color: white; }
-  .tier-medium { background: #28a745; color: white; }
-  .tier-high { background: #fd7e14; color: white; }
-  .tier-legendary { background: #dc3545; color: white; }
-  
+
+  .tier-low {
+    background: rgba(108, 117, 125, 0.9);
+    color: white;
+  }
+  .tier-medium {
+    background: rgba(40, 167, 69, 0.9);
+    color: white;
+  }
+  .tier-high {
+    background: rgba(253, 126, 20, 0.9);
+    color: white;
+  }
+  .tier-legendary {
+    background: rgba(220, 53, 69, 0.9);
+    color: white;
+  }
+
   .details-section {
-    height: 50px;
-    padding: 6px 8px;
+    padding: 8px;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    background: rgba(255, 255, 255, 0.9);
-    border-radius: 0 0 10px 10px;
-    width: 100%;
+    gap: 4px;
+    background: white;
+    border-top: 1px solid var(--soft-type-color);
   }
-  
+
   .nickname {
-    margin: 0 0 4px 0;
-    font-size: 11px;
-    font-weight: 600;
+    margin: 0;
+    font-size: 12px;
+    font-weight: 700;
     text-align: center;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: #333;
+    color: #1a1a1a;
   }
-  
-  .types-section {
+
+  .info-row {
     display: flex;
-    gap: 4px;
     justify-content: center;
+    align-items: center;
+    gap: 6px;
   }
-  
-  .type {
-    font-size: 8px;
-    padding: 1px 4px;
-    border-radius: 4px;
-    font-weight: 500;
+
+  .type-badge {
+    font-size: 9px;
+    padding: 2px 6px;
+    border-radius: 6px;
+    font-weight: 600;
     text-transform: uppercase;
-  }
-  
-  .type.primary {
     background: var(--type-color);
     color: white;
   }
-  
-  .type.secondary {
-    background: rgba(0, 0, 0, 0.1);
+
+  .scan-count {
+    font-size: 9px;
+    font-weight: 600;
     color: #666;
+    background: #f0f0f0;
+    padding: 2px 6px;
+    border-radius: 6px;
   }
-</style>
+</style>

src/lib/components/Piclets/PicletDetail.svelte

@@ -1,19 +1,28 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import type { PicletInstance } from '$lib/db/schema';
   import { deletePicletInstance } from '$lib/db/piclets';
   import { uiStore } from '$lib/stores/ui';
   import { TYPE_DATA } from '$lib/types/picletTypes';
-  
+
   interface Props {
     instance: PicletInstance;
     onClose: () => void;
     onDeleted?: () => void;
   }
-  
+
   let { instance, onClose, onDeleted }: Props = $props();
-  
+
   const typeColor = $derived(TYPE_DATA[instance.primaryType]?.color || '#007bff');
-  
+  const typeLogoPath = $derived(`/classes/${instance.primaryType}.png`);
+
+  onMount(() => {
+    uiStore.openDetailPage();
+    return () => {
+      uiStore.closeDetailPage();
+    };
+  });
+
   async function handleDelete() {
     if (confirm(`Are you sure you want to delete ${instance.typeId}?`)) {
       try {
@@ -28,258 +37,346 @@
   }
 </script>
 
-<div class="piclet-detail-overlay" onclick={onClose}>
-  <div class="piclet-detail" onclick={(e) => e.stopPropagation()}>
-    <!-- Header -->
-    <div class="header" style="--type-color: {typeColor}">
-      <button class="close-button" onclick={onClose}>×</button>
-      <div class="tier-badge tier-{instance.tier}">{instance.tier}</div>
+<div class="detail-page">
+  <div class="content-scroll">
+    <!-- Header Card -->
+    <div class="header-card">
+      <div class="card-background" style="--type-color: {typeColor}; --type-logo: url('{typeLogoPath}')">
+        <!-- Faded Logo Background -->
+        <div class="logo-background"></div>
+
+        <!-- Card Header -->
+        <div class="card-header">
+          <button
+            class="back-btn-card"
+            onclick={onClose}
+            aria-label="Go back"
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M19 12H5m0 0l7 7m-7-7l7-7"></path>
+            </svg>
+          </button>
+          <h1 class="card-title">{instance.typeId}</h1>
+          <div class="tier-badge tier-{instance.tier}">{instance.tier}</div>
+        </div>
+
+        <!-- Large Image Section -->
+        <div class="large-image-section">
+          <div class="large-image-container">
+            <img
+              src={instance.imageData || instance.imageUrl}
+              alt={instance.typeId}
+              class="large-piclet-image"
+            />
+          </div>
+        </div>
+      </div>
     </div>
-    
-    <!-- Main Content -->
-    <div class="content">
-      <!-- Image Section -->
-      <div class="image-section">
-        <img 
-          src={instance.imageData || instance.imageUrl} 
-          alt={instance.typeId}
-          class="piclet-image"
-        />
+
+    <!-- Info Section -->
+    <div class="info-card">
+      <div class="type-badge" style="background-color: {typeColor}">
+        {instance.primaryType}
       </div>
-      
-      <!-- Info Section -->
-      <div class="info-section">
-        <h2 class="name">{instance.typeId}</h2>
-        
-        <div class="types">
-          <span class="type primary" style="background-color: {typeColor}">
-            {instance.primaryType}
-          </span>
-        </div>
-        
-        <div class="description">
-          <h3>Description</h3>
-          <p>{instance.description}</p>
+
+      <div class="description">
+        <p>{instance.description}</p>
+      </div>
+
+      <div class="divider"></div>
+
+      <h3 class="section-heading">Discovery Info</h3>
+      <div class="metadata-list">
+        <div class="meta-row">
+          <span class="meta-label">Object</span>
+          <span class="meta-value">{instance.objectName}</span>
         </div>
-        
-        <div class="metadata">
-          <div class="meta-item">
-            <strong>Object:</strong>
-            {instance.objectName}
+
+        {#if instance.isCanonical}
+          <div class="meta-row">
+            <span class="meta-label">Status</span>
+            <span class="canonical-badge">Canonical</span>
           </div>
-          {#if instance.isCanonical}
-            <div class="meta-item">
-              <strong>Status:</strong>
-              <span class="canonical-badge">Canonical</span>
-            </div>
-          {/if}
-          {#if instance.variationAttributes && instance.variationAttributes.length > 0}
-            <div class="meta-item">
-              <strong>Variation:</strong>
-              {instance.variationAttributes.join(', ')}
-            </div>
-          {/if}
-          {#if instance.discoveredAt}
-            <div class="meta-item">
-              <strong>Discovered:</strong>
-              {new Date(instance.discoveredAt).toLocaleDateString()}
-            </div>
-          {/if}
-          <div class="meta-item">
-            <strong>Scan Count:</strong>
-            {instance.scanCount || 1}
+        {/if}
+
+        {#if instance.variationAttributes && instance.variationAttributes.length > 0}
+          <div class="meta-row">
+            <span class="meta-label">Variation</span>
+            <span class="meta-value">{instance.variationAttributes.join(', ')}</span>
           </div>
-          <div class="meta-item">
-            <strong>Rarity:</strong>
-            <span class="rarity-{instance.tier}">{instance.tier}</span>
+        {/if}
+
+        {#if instance.discoveredAt}
+          <div class="meta-row">
+            <span class="meta-label">Discovered</span>
+            <span class="meta-value">{new Date(instance.discoveredAt).toLocaleDateString()}</span>
           </div>
+        {/if}
+
+        <div class="meta-row">
+          <span class="meta-label">Scan Count</span>
+          <span class="meta-value">{instance.scanCount || 1}</span>
+        </div>
+
+        <div class="meta-row">
+          <span class="meta-label">Rarity</span>
+          <span class="rarity-badge tier-{instance.tier}">{instance.tier}</span>
         </div>
       </div>
     </div>
-    
+
     <!-- Actions -->
-    <div class="actions">
-      <button class="delete-button" onclick={handleDelete}>
-        🗑️ Delete
-      </button>
+    <div class="bottom-actions">
+      <button class="btn btn-danger" onclick={handleDelete}>Delete Piclet</button>
     </div>
   </div>
 </div>
 
 <style>
-  .piclet-detail-overlay {
+  .detail-page {
     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;
+    background: #f2f2f7;
     z-index: 1000;
-    padding: 1rem;
-  }
-  
-  .piclet-detail {
-    background: white;
-    border-radius: 16px;
-    width: 100%;
-    max-width: 400px;
-    max-height: 80vh;
-    overflow: hidden;
     display: flex;
     flex-direction: column;
   }
-  
-  .header {
-    background: var(--type-color, #007bff);
-    color: white;
-    padding: 1rem;
+
+  /* Content Scroll */
+  .content-scroll {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Header Card */
+  .header-card {
+    margin-bottom: 16px;
+    overflow: hidden;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     position: relative;
+  }
+
+  .card-background {
+    background: linear-gradient(135deg, var(--type-color, #4CAF50) 0%, color-mix(in srgb, var(--type-color, #4CAF50) 80%, white) 100%);
+    padding: 24px;
+    padding-top: calc(24px + env(safe-area-inset-top, 0));
+    position: relative;
+    overflow: hidden;
+  }
+
+  .logo-background {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    width: 120px;
+    height: 120px;
+    background-image: var(--type-logo);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    opacity: 0.15;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 2;
   }
-  
-  .close-button {
-    background: none;
+
+  .card-title {
+    margin: 0;
+    font-size: 24px;
+    font-weight: bold;
+    color: white;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    flex: 1;
+    text-align: center;
+  }
+
+  .back-btn-card {
+    background: rgba(255, 255, 255, 0.2);
     border: none;
     color: white;
-    font-size: 1.5rem;
     cursor: pointer;
-    padding: 0;
-    width: 32px;
-    height: 32px;
+    padding: 8px;
+    border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
-    transition: background 0.2s;
+    transition: all 0.2s;
   }
-  
-  .close-button:hover {
-    background: rgba(255, 255, 255, 0.2);
+
+  .back-btn-card:hover {
+    background: rgba(255, 255, 255, 0.3);
   }
-  
+
   .tier-badge {
-    padding: 0.5rem 1rem;
-    border-radius: 20px;
-    font-size: 0.8rem;
+    background: rgba(255, 255, 255, 0.3);
+    padding: 6px 12px;
+    border-radius: 12px;
+    font-size: 11px;
     font-weight: bold;
     text-transform: uppercase;
+    color: white;
+    backdrop-filter: blur(10px);
   }
-  
-  .tier-low { background: #6c757d; }
-  .tier-medium { background: #28a745; }
-  .tier-high { background: #fd7e14; }
-  .tier-legendary { background: #dc3545; }
-  
-  .content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1.5rem;
-  }
-  
-  .image-section {
-    text-align: center;
-    margin-bottom: 1.5rem;
-  }
-  
-  .piclet-image {
-    width: 150px;
-    height: 150px;
-    object-fit: contain;
-    border-radius: 12px;
-    background: rgba(0, 0, 0, 0.05);
-  }
-  
-  .info-section {
+
+  .large-image-section {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-  }
-  
-  .name {
-    margin: 0;
-    font-size: 1.5rem;
-    font-weight: bold;
-    text-align: center;
-    color: var(--type-color, #007bff);
+    align-items: center;
+    position: relative;
+    z-index: 2;
   }
-  
-  .types {
+
+  .large-image-container {
     display: flex;
-    gap: 0.5rem;
+    align-items: center;
     justify-content: center;
+    width: 360px;
+    height: 360px;
   }
-  
-  .type {
-    padding: 0.5rem 1rem;
+
+  .large-piclet-image {
+    width: 360px;
+    height: 360px;
+    object-fit: contain;
+    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
+  }
+
+  /* Info Card */
+  .info-card {
+    background: white;
+    margin: 0 16px 16px;
+    border-radius: 12px;
+    padding: 16px;
+    border: 0.5px solid #c6c6c8;
+  }
+
+  .type-badge {
+    display: inline-block;
+    padding: 8px 16px;
     border-radius: 20px;
-    font-size: 0.9rem;
+    font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     color: white;
+    margin-bottom: 16px;
   }
-  
-  .type.secondary {
-    background: #6c757d;
-  }
-  
-  .description h3 {
-    margin: 0 0 0.5rem 0;
-    color: #333;
-    font-size: 1.1rem;
+
+  .description {
+    margin-bottom: 16px;
   }
-  
+
   .description p {
     margin: 0;
+    font-size: 16px;
     line-height: 1.5;
-    color: #666;
+    color: #333;
+  }
+
+  .divider {
+    height: 1px;
+    background: #e5e5ea;
+    margin: 16px 0;
   }
-  
-  .metadata {
+
+  .section-heading {
+    font-size: 18px;
+    font-weight: 600;
+    color: #495057;
+    margin: 0 0 12px 0;
+  }
+
+  .metadata-list {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 12px;
   }
-  
-  .meta-item {
+
+  .meta-row {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: 0.5rem;
-    font-size: 0.9rem;
+    font-size: 15px;
+  }
+
+  .meta-label {
+    font-weight: 500;
+    color: #666;
   }
-  
-  .roster-badge {
-    background: #28a745;
+
+  .meta-value {
+    font-weight: 600;
+    color: #000;
+  }
+
+  .canonical-badge {
+    background: #4CAF50;
     color: white;
-    padding: 0.25rem 0.5rem;
+    padding: 4px 12px;
     border-radius: 12px;
-    font-size: 0.8rem;
+    font-size: 12px;
     font-weight: 600;
   }
-  
-  .actions {
-    padding: 1rem 1.5rem;
-    border-top: 1px solid #eee;
-    display: flex;
-    justify-content: center;
-  }
-  
-  .delete-button {
-    background: #dc3545;
+
+  .rarity-badge {
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
     color: white;
-    border: none;
+  }
+
+  .rarity-badge.tier-low { background: #6c757d; }
+  .rarity-badge.tier-medium { background: #28a745; }
+  .rarity-badge.tier-high { background: #fd7e14; }
+  .rarity-badge.tier-legendary { background: #dc3545; }
+
+  /* Bottom Actions */
+  .bottom-actions {
+    padding: 16px;
+    background: white;
+    border-top: 0.5px solid #c6c6c8;
+    text-align: center;
+  }
+
+  .btn {
     padding: 0.75rem 1.5rem;
+    border: none;
     border-radius: 8px;
+    font-size: 16px;
     font-weight: 600;
     cursor: pointer;
-    transition: background 0.2s;
+    transition: transform 0.2s;
   }
-  
-  .delete-button:hover {
-    background: #c82333;
+
+  .btn:active {
+    transform: scale(0.95);
+  }
+
+  .btn-danger {
+    background: #ff3b30;
+    color: white;
+    width: 100%;
+  }
+
+  @media (min-width: 768px) {
+    .detail-page {
+      position: relative;
+      max-width: 600px;
+      margin: 0 auto;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    }
   }
-</style>
+</style>