c4b8c0fe38
Track B — Auth & User System (complete): - User registration with bcrypt + Turnstile verification - JWT access/refresh token flow with httpOnly cookie rotation - Redis refresh token blocklist for logout - User profile + settings update endpoints (username, email) - API key generation with bcrypt hashing (ff_key_ prefix) - BYOK key management with AES-256-GCM encryption at rest - Free tier rate limiting (5 shaders/month) - Tier-gated endpoints (Pro/Studio for BYOK, API keys, bounty posting) Track C — Shader Submission & Renderer (complete): - GLSL validator: entry point check, banned extensions, infinite loop detection, brace balancing, loop bound warnings, code length limits - Puppeteer/headless Chromium renderer with Shadertoy-compatible uniform injection (iTime, iResolution, iMouse), WebGL2 with SwiftShader fallback - Shader compilation error detection via page title signaling - Thumbnail capture at t=1s, preview frame at t=duration - Renderer client service for API→renderer HTTP communication - Shader submission pipeline: validate GLSL → create record → enqueue render job - Desire fulfillment linking on shader submit - Re-validation and re-render on shader code update - Fork endpoint copies code, tags, metadata, enqueues new render Track D — Frontend Shell (complete): - React 18 + Vite + TypeScript + Tailwind CSS + TanStack Query + Zustand - Dark theme with custom fracta color palette and surface tones - Responsive layout with sticky navbar, gradient branding - Auth: Login + Register pages with JWT token management - API client with automatic 401 refresh interceptor - ShaderCanvas: Full WebGL2 renderer component with Shadertoy uniforms, mouse tracking, ResizeObserver, debounced recompilation, error callbacks - GLSL Editor: Split pane (code textarea + live preview), 400ms debounced preview, metadata panel (description, tags, type), GLSL validation errors, shader publish flow, fork-from-existing support - Feed: Infinite scroll with IntersectionObserver sentinel, dwell time tracking, skeleton loading states, empty state with CTA - Explore: Search + tag filter + sort tabs (trending/new/top), grid layout - ShaderDetail: Full-screen preview, vote controls, view source toggle, fork button - Bounties: Desire queue list sorted by heat score, status badges, tip display - BountyDetail: Single desire view with style hints, fulfill CTA - Profile: User header with avatar initial, shader grid - Settings: Account info, API key management (create/revoke/copy), subscription tiers - Generate: AI generation UI stub with prompt input, style controls, example prompts 76 files, ~5,700 lines of application code.
62 lines
1.5 KiB
CSS
62 lines
1.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
@apply bg-surface-0 text-gray-100;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-surface-1;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-surface-4 rounded-full;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-fracta-600;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2
|
|
font-medium rounded-lg transition-all duration-150
|
|
focus:outline-none focus:ring-2 focus:ring-fracta-500/50
|
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
.btn-primary {
|
|
@apply btn bg-fracta-600 hover:bg-fracta-500 text-white;
|
|
}
|
|
.btn-secondary {
|
|
@apply btn bg-surface-3 hover:bg-surface-4 text-gray-200;
|
|
}
|
|
.btn-ghost {
|
|
@apply btn bg-transparent hover:bg-surface-3 text-gray-300;
|
|
}
|
|
.btn-danger {
|
|
@apply btn bg-red-600/20 hover:bg-red-600/30 text-red-400 border border-red-600/30;
|
|
}
|
|
|
|
.input {
|
|
@apply w-full px-3 py-2 bg-surface-2 border border-surface-4
|
|
rounded-lg text-gray-100 placeholder-gray-500
|
|
focus:outline-none focus:border-fracta-500 focus:ring-1 focus:ring-fracta-500/30
|
|
transition-colors;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-surface-1 border border-surface-3 rounded-xl overflow-hidden;
|
|
}
|
|
}
|