diff --git a/website/public/data/manifest.json b/website/public/data/manifest.json index 0140c246..bce21f4a 100644 --- a/website/public/data/manifest.json +++ b/website/public/data/manifest.json @@ -1,5 +1,5 @@ { - "generated": "2026-01-28T05:56:29.890Z", + "generated": "2026-01-28T06:03:00.479Z", "counts": { "agents": 140, "prompts": 134, diff --git a/website/public/styles/global.css b/website/public/styles/global.css index abc79e71..37e88fc5 100644 --- a/website/public/styles/global.css +++ b/website/public/styles/global.css @@ -1,64 +1,87 @@ /* CSS Variables and Base Styles */ :root { /* Dark theme (default) */ - --color-bg: #0d1117; - --color-bg-secondary: #161b22; - --color-bg-tertiary: #21262d; - --color-border: #30363d; - --color-text: #c9d1d9; - --color-text-muted: #8b949e; - --color-text-emphasis: #f0f6fc; - --color-link: #58a6ff; - --color-link-hover: #79c0ff; - --color-accent: #238636; - --color-accent-hover: #2ea043; - --color-danger: #f85149; - --color-warning: #d29922; - --color-success: #238636; - --color-card-bg: #161b22; - --color-card-hover: #1c2128; - --border-radius: 6px; - --border-radius-lg: 12px; - --shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.12); - --shadow-lg: 0 8px 24px rgba(0,0,0,0.4); - --transition: 0.15s ease; + --color-bg: #0a0a0f; + --color-bg-secondary: #12121a; + --color-bg-tertiary: #1a1a24; + --color-border: #2a2a3a; + --color-text: #e0e0e8; + --color-text-muted: #8888a0; + --color-text-emphasis: #ffffff; + --color-link: #6c9fff; + --color-link-hover: #9cc0ff; + --color-accent: #6366f1; + --color-accent-hover: #818cf8; + --color-accent-secondary: #ec4899; + --color-danger: #f43f5e; + --color-warning: #f59e0b; + --color-success: #10b981; + --color-card-bg: rgba(18, 18, 26, 0.8); + --color-card-hover: rgba(26, 26, 36, 0.9); + --color-glass: rgba(255, 255, 255, 0.05); + --color-glass-border: rgba(255, 255, 255, 0.1); + --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); + --gradient-accent: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%); + --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.3), transparent), + radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.15), transparent), + radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.15), transparent); + --border-radius: 8px; + --border-radius-lg: 16px; + --border-radius-xl: 24px; + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2); + --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.5); + --shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.5); + --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --container-width: 1200px; - --header-height: 64px; + --header-height: 72px; } /* Light theme */ [data-theme="light"] { - --color-bg: #ffffff; - --color-bg-secondary: #f6f8fa; - --color-bg-tertiary: #f0f3f6; - --color-border: #d0d7de; - --color-text: #24292f; - --color-text-muted: #57606a; - --color-text-emphasis: #1f2328; - --color-link: #0969da; - --color-link-hover: #0550ae; - --color-card-bg: #ffffff; - --color-card-hover: #f6f8fa; - --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.08); - --shadow-lg: 0 8px 24px rgba(0,0,0,0.15); + --color-bg: #fafafa; + --color-bg-secondary: #ffffff; + --color-bg-tertiary: #f4f4f5; + --color-border: #e4e4e7; + --color-text: #3f3f46; + --color-text-muted: #71717a; + --color-text-emphasis: #18181b; + --color-link: #6366f1; + --color-link-hover: #4f46e5; + --color-card-bg: rgba(255, 255, 255, 0.9); + --color-card-hover: rgba(255, 255, 255, 1); + --color-glass: rgba(255, 255, 255, 0.7); + --color-glass-border: rgba(0, 0, 0, 0.08); + --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15), transparent), + radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.08), transparent), + radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.08), transparent); + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); + --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.15); + --shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.3); } /* Auto theme based on system preference */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { - --color-bg: #ffffff; - --color-bg-secondary: #f6f8fa; - --color-bg-tertiary: #f0f3f6; - --color-border: #d0d7de; - --color-text: #24292f; - --color-text-muted: #57606a; - --color-text-emphasis: #1f2328; - --color-link: #0969da; - --color-link-hover: #0550ae; - --color-card-bg: #ffffff; - --color-card-hover: #f6f8fa; - --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.08); - --shadow-lg: 0 8px 24px rgba(0,0,0,0.15); + --color-bg: #fafafa; + --color-bg-secondary: #ffffff; + --color-bg-tertiary: #f4f4f5; + --color-border: #e4e4e7; + --color-text: #3f3f46; + --color-text-muted: #71717a; + --color-text-emphasis: #18181b; + --color-link: #6366f1; + --color-link-hover: #4f46e5; + --color-card-bg: rgba(255, 255, 255, 0.9); + --color-card-hover: rgba(255, 255, 255, 1); + --color-glass: rgba(255, 255, 255, 0.7); + --color-glass-border: rgba(0, 0, 0, 0.08); + --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15), transparent), + radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.08), transparent), + radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.08), transparent); + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); + --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.15); + --shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.3); } } @@ -98,8 +121,10 @@ a:hover { /* Header */ .site-header { - background-color: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border); + background: var(--color-glass); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-bottom: 1px solid var(--color-glass-border); position: sticky; top: 0; z-index: 100; @@ -116,38 +141,40 @@ a:hover { .logo { display: flex; align-items: center; - gap: 8px; - font-weight: 600; - font-size: 18px; + gap: 10px; + font-weight: 700; + font-size: 20px; color: var(--color-text-emphasis); + transition: all var(--transition); } .logo:hover { color: var(--color-text-emphasis); + transform: scale(1.02); } .logo-icon { - font-size: 24px; + font-size: 28px; } .main-nav { display: flex; - gap: 24px; + gap: 8px; } .main-nav a { - color: var(--color-text); + color: var(--color-text-muted); font-size: 14px; font-weight: 500; - padding: 8px 0; - border-bottom: 2px solid transparent; + padding: 8px 14px; + border-radius: var(--border-radius); transition: all var(--transition); } .main-nav a:hover, .main-nav a.active { color: var(--color-text-emphasis); - border-bottom-color: var(--color-accent); + background: var(--color-bg-tertiary); } .github-link { @@ -225,46 +252,68 @@ a:hover { /* Hero Section */ .hero { - background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg) 100%); - padding: 80px 0 60px; + background: var(--gradient-hero), var(--color-bg); + padding: 100px 0 80px; text-align: center; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + pointer-events: none; } .hero h1 { - font-size: 48px; - font-weight: 700; - color: var(--color-text-emphasis); - margin-bottom: 16px; + font-size: 56px; + font-weight: 800; + letter-spacing: -0.02em; + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 20px; + position: relative; } .hero-subtitle { font-size: 20px; color: var(--color-text-muted); - max-width: 600px; - margin: 0 auto 32px; + max-width: 650px; + margin: 0 auto 40px; + line-height: 1.7; } .hero-search { - max-width: 500px; + max-width: 560px; margin: 0 auto; position: relative; } .hero-search input { width: 100%; - padding: 16px 20px; + padding: 18px 24px; font-size: 16px; - background-color: var(--color-bg-secondary); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-lg); + background: var(--color-glass); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid var(--color-glass-border); + border-radius: var(--border-radius-xl); color: var(--color-text); transition: all var(--transition); + box-shadow: var(--shadow); } .hero-search input:focus { outline: none; - border-color: var(--color-link); - box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3); + border-color: var(--color-accent); + box-shadow: var(--shadow-glow); } .hero-search input::placeholder { @@ -274,8 +323,8 @@ a:hover { .hero-stats { display: flex; justify-content: center; - gap: 40px; - margin-top: 40px; + gap: 48px; + margin-top: 56px; } .stat { @@ -283,14 +332,20 @@ a:hover { } .stat-value { - font-size: 32px; - font-weight: 700; - color: var(--color-text-emphasis); + font-size: 40px; + font-weight: 800; + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } .stat-label { font-size: 14px; color: var(--color-text-muted); + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; } /* Search Results Dropdown */ @@ -358,71 +413,100 @@ a:hover { /* Cards Grid */ .cards-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 24px; } .card { - background-color: var(--color-card-bg); - border: 1px solid var(--color-border); + background: var(--color-card-bg); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid var(--color-glass-border); border-radius: var(--border-radius-lg); - padding: 24px; + padding: 28px; transition: all var(--transition); display: block; color: inherit; + position: relative; + overflow: hidden; +} + +.card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: var(--gradient-primary); + opacity: 0; + transition: opacity var(--transition); } .card:hover { - background-color: var(--color-card-hover); - border-color: var(--color-link); - transform: translateY(-2px); - box-shadow: var(--shadow); + background: var(--color-card-hover); + border-color: transparent; + transform: translateY(-4px); + box-shadow: var(--shadow-lg), var(--shadow-glow); +} + +.card:hover::before { + opacity: 1; } .card-icon { - font-size: 32px; - margin-bottom: 12px; + font-size: 40px; + margin-bottom: 16px; + display: inline-block; + transition: transform var(--transition); +} + +.card:hover .card-icon { + transform: scale(1.1); } .card h3 { - font-size: 18px; - font-weight: 600; + font-size: 20px; + font-weight: 700; color: var(--color-text-emphasis); - margin-bottom: 8px; + margin-bottom: 10px; } .card p { - font-size: 14px; + font-size: 15px; color: var(--color-text-muted); + line-height: 1.6; } /* Quick Links Section */ .quick-links { - padding: 60px 0; + padding: 80px 0; } /* Featured Section */ .featured { - padding: 60px 0; - background-color: var(--color-bg-secondary); + padding: 80px 0; + background: var(--color-bg-secondary); + position: relative; } .featured h2 { - font-size: 28px; - font-weight: 600; + font-size: 32px; + font-weight: 800; color: var(--color-text-emphasis); - margin-bottom: 32px; + margin-bottom: 40px; text-align: center; } /* Getting Started */ .getting-started { - padding: 80px 0; + padding: 100px 0; + background: var(--gradient-hero), var(--color-bg); } .getting-started h2 { - font-size: 28px; - font-weight: 600; + font-size: 32px; + font-weight: 800; color: var(--color-text-emphasis); margin-bottom: 48px; text-align: center; @@ -431,46 +515,49 @@ a:hover { .steps { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 40px; - max-width: 800px; + gap: 48px; + max-width: 900px; margin: 0 auto; } .step { text-align: center; + position: relative; } .step-number { - width: 48px; - height: 48px; - background-color: var(--color-accent); + width: 64px; + height: 64px; + background: var(--gradient-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; - font-size: 20px; - font-weight: 700; - margin: 0 auto 16px; + font-size: 24px; + font-weight: 800; + margin: 0 auto 20px; + box-shadow: var(--shadow-glow); } .step h3 { - font-size: 18px; - font-weight: 600; + font-size: 20px; + font-weight: 700; color: var(--color-text-emphasis); - margin-bottom: 8px; + margin-bottom: 10px; } .step p { - font-size: 14px; + font-size: 15px; color: var(--color-text-muted); + line-height: 1.6; } /* Footer */ .site-footer { - background-color: var(--color-bg-secondary); - border-top: 1px solid var(--color-border); - padding: 24px 0; + background: var(--color-bg-secondary); + border-top: 1px solid var(--color-glass-border); + padding: 32px 0; text-align: center; } @@ -481,10 +568,11 @@ a:hover { .site-footer a { color: var(--color-text-muted); + transition: color var(--transition); } .site-footer a:hover { - color: var(--color-text); + color: var(--color-accent); } /* Buttons */ @@ -492,7 +580,7 @@ a:hover { display: inline-flex; align-items: center; gap: 8px; - padding: 8px 16px; + padding: 10px 18px; font-size: 14px; font-weight: 500; border-radius: var(--border-radius); @@ -503,25 +591,29 @@ a:hover { } .btn-primary { - background-color: var(--color-accent); + background: var(--gradient-primary); color: white; - border-color: var(--color-accent); + border-color: transparent; + font-weight: 600; } .btn-primary:hover { - background-color: var(--color-accent-hover); - border-color: var(--color-accent-hover); + background: var(--gradient-primary); + transform: translateY(-1px); + box-shadow: var(--shadow-glow); color: white; } .btn-secondary { - background-color: var(--color-bg-tertiary); + background: var(--color-glass); + backdrop-filter: blur(10px); color: var(--color-text); - border-color: var(--color-border); + border-color: var(--color-glass-border); } .btn-secondary:hover { - background-color: var(--color-border); + background: var(--color-bg-tertiary); + border-color: var(--color-border); } .btn-icon { @@ -562,7 +654,9 @@ a:hover { left: 0; right: 0; bottom: 0; - background-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.8); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; @@ -575,23 +669,25 @@ a:hover { } .modal-content { - background-color: var(--color-bg-secondary); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-lg); + background: var(--color-bg-secondary); + border: 1px solid var(--color-glass-border); + border-radius: var(--border-radius-xl); width: 100%; max-width: 900px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); + overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; - padding: 16px 20px; - border-bottom: 1px solid var(--color-border); + padding: 20px 24px; + border-bottom: 1px solid var(--color-glass-border); + background: var(--color-glass); } .modal-header h3 { @@ -616,10 +712,10 @@ a:hover { .modal-body pre { margin: 0; - padding: 20px; + padding: 24px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13px; - line-height: 1.5; + line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; background: var(--color-bg); @@ -629,24 +725,28 @@ a:hover { /* Page Layouts */ .page-header { - padding: 48px 0 32px; - border-bottom: 1px solid var(--color-border); + padding: 56px 0 40px; + background: var(--gradient-hero), var(--color-bg); + border-bottom: 1px solid var(--color-glass-border); } .page-header h1 { - font-size: 32px; - font-weight: 700; - color: var(--color-text-emphasis); - margin-bottom: 8px; + font-size: 36px; + font-weight: 800; + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 12px; } .page-header p { - font-size: 16px; + font-size: 17px; color: var(--color-text-muted); } .page-content { - padding: 32px 0 60px; + padding: 40px 0 80px; } /* Search and Filter Bar */ @@ -660,49 +760,53 @@ a:hover { .search-bar input { flex: 1; min-width: 250px; - padding: 12px 16px; - font-size: 14px; - background-color: var(--color-bg-secondary); - border: 1px solid var(--color-border); - border-radius: var(--border-radius); + padding: 14px 18px; + font-size: 15px; + background: var(--color-glass); + border: 1px solid var(--color-glass-border); + border-radius: var(--border-radius-lg); color: var(--color-text); + transition: all var(--transition); } .search-bar input:focus { outline: none; - border-color: var(--color-link); + border-color: var(--color-accent); + box-shadow: var(--shadow-glow); } /* Filters Bar */ .filters-bar { display: flex; gap: 16px; - margin-bottom: 20px; + margin-bottom: 24px; flex-wrap: wrap; align-items: center; - padding: 16px; - background-color: var(--color-bg-secondary); - border: 1px solid var(--color-border); - border-radius: var(--border-radius); + padding: 18px 20px; + background: var(--color-glass); + backdrop-filter: blur(10px); + border: 1px solid var(--color-glass-border); + border-radius: var(--border-radius-lg); } .filter-group { display: flex; align-items: center; - gap: 8px; + gap: 10px; } .filter-group label { font-size: 13px; + font-weight: 500; color: var(--color-text-muted); white-space: nowrap; } .filter-group select { - padding: 6px 12px; + padding: 8px 14px; font-size: 13px; - background-color: var(--color-bg); - border: 1px solid var(--color-border); + background: var(--color-bg); + border: 1px solid var(--color-glass-border); border-radius: var(--border-radius); color: var(--color-text); min-width: 150px; @@ -711,26 +815,30 @@ a:hover { .filter-group select:focus { outline: none; - border-color: var(--color-link); + border-color: var(--color-accent); } .checkbox-label { display: flex; align-items: center; - gap: 6px; + gap: 8px; cursor: pointer; user-select: none; + font-size: 13px; + font-weight: 500; + color: var(--color-text-muted); } .checkbox-label input[type="checkbox"] { - width: 16px; - height: 16px; + width: 18px; + height: 18px; cursor: pointer; + accent-color: var(--color-accent); } .btn-small { - padding: 6px 12px; - font-size: 12px; + padding: 8px 14px; + font-size: 13px; } /* Choices.js Theme Overrides */ @@ -821,8 +929,8 @@ a:hover { /* Tag variants */ .tag-model { - background-color: rgba(88, 166, 255, 0.15); - color: var(--color-link); + background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)); + color: #a5b4fc; } .tag-none { @@ -832,68 +940,89 @@ a:hover { } .tag-handoffs { - background-color: rgba(210, 153, 34, 0.15); - color: var(--color-warning); + background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2)); + color: #fcd34d; } .tag-extension { - background-color: rgba(35, 134, 54, 0.15); - color: var(--color-success); + background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.2)); + color: #6ee7b7; } .tag-category { - background-color: rgba(130, 80, 223, 0.15); - color: #a371f7; + background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(244, 114, 182, 0.2)); + color: #f9a8d4; } .tag-assets { - background-color: rgba(88, 166, 255, 0.15); - color: var(--color-link); + background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(34, 211, 238, 0.2)); + color: #67e8f9; } .tag-collection { - background-color: rgba(210, 153, 34, 0.15); - color: var(--color-warning); + background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2)); + color: #fcd34d; } .tag-featured { - background-color: rgba(210, 153, 34, 0.2); - color: var(--color-warning); - padding: 2px 8px; + background: var(--gradient-primary); + color: white; + padding: 3px 10px; border-radius: 12px; font-size: 12px; - font-weight: 500; + font-weight: 600; } .results-count { font-size: 14px; color: var(--color-text-muted); - margin-bottom: 16px; + margin-bottom: 20px; + font-weight: 500; } /* Resource List */ .resource-list { display: flex; flex-direction: column; - gap: 12px; + gap: 16px; } .resource-item { - background-color: var(--color-card-bg); - border: 1px solid var(--color-border); - border-radius: var(--border-radius); - padding: 16px 20px; + background: var(--color-card-bg); + backdrop-filter: blur(10px); + border: 1px solid var(--color-glass-border); + border-radius: var(--border-radius-lg); + padding: 20px 24px; display: flex; align-items: flex-start; justify-content: space-between; - gap: 16px; + gap: 20px; transition: all var(--transition); cursor: pointer; + position: relative; +} + +.resource-item::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background: var(--gradient-primary); + border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg); + opacity: 0; + transition: opacity var(--transition); } .resource-item:hover { - background-color: var(--color-card-hover); - border-color: var(--color-link); + background: var(--color-card-hover); + transform: translateX(4px); + box-shadow: var(--shadow); +} + +.resource-item:hover::before { + opacity: 1; } .resource-info {