| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Implementation Tasks - PosterCraft Studio</title> |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎨</text></svg>"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); |
| body { font-family: 'Inter', sans-serif; } |
| .task-item { |
| transition: all 0.2s ease; |
| } |
| .task-item:hover { |
| background-color: rgba(99, 102, 241, 0.05); |
| } |
| .phase-card { |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| .phase-card:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .checkbox-custom { |
| appearance: none; |
| width: 20px; |
| height: 20px; |
| border: 2px solid #e5e7eb; |
| border-radius: 4px; |
| position: relative; |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| .checkbox-custom:checked { |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| border-color: #667eea; |
| } |
| .checkbox-custom:checked::after { |
| content: '✓'; |
| position: absolute; |
| color: white; |
| font-size: 14px; |
| top: -2px; |
| left: 2px; |
| } |
| .progress-ring { |
| transform: rotate(-90deg); |
| transform-origin: 50% 50%; |
| } |
| .collapsible-content { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.3s ease-out; |
| } |
| .collapsible-content.active { |
| max-height: 1000px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300"> |
| |
| <header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"> |
| <i data-feather="check-square" class="w-6 h-6 text-white"></i> |
| </div> |
| <h1 class="text-xl font-bold text-gray-900 dark:text-white">PosterCraft Studio</h1> |
| </div> |
| <span class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 text-xs font-medium rounded-full"> |
| Implementation Tasks |
| </span> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button onclick="toggleTheme()" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
| <i data-feather="sun" class="w-5 h-5 text-gray-600 dark:text-gray-400 dark:hidden"></i> |
| <i data-feather="moon" class="w-5 h-5 text-gray-600 dark:text-gray-400 hidden dark:block"></i> |
| </button> |
| <nav class="hidden md:flex space-x-4"> |
| <a href="index.html" class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md"> |
| Dashboard |
| </a> |
| <a href="tasks.html" class="px-3 py-2 text-sm font-medium text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/50 rounded-md"> |
| Tasks |
| </a> |
| </nav> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| <div class="mb-8"> |
| <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Implementation Tasks</h1> |
| <p class="text-gray-600 dark:text-gray-400">Detailed breakdown of all development tasks for PosterCraft Studio</p> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Tasks</span> |
| <i data-feather="list" class="w-5 h-5 text-purple-500"></i> |
| </div> |
| <div class="text-2xl font-bold text-gray-900 dark:text-white">42</div> |
| <div class="mt-2 flex items-center space-x-1"> |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
| <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 65%"></div> |
| </div> |
| <span class="text-xs text-gray-600 dark:text-gray-400">65%</span> |
| </div> |
| </div> |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Completed</span> |
| <i data-feather="check-circle" class="w-5 h-5 text-green-500"></i> |
| </div> |
| <div class="text-2xl font-bold text-gray-900 dark:text-white">27</div> |
| <div class="mt-2 text-xs text-green-600 dark:text-green-400 font-medium">+5 today</div> |
| </div> |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-600 dark:text-gray-400">In Progress</span> |
| <i data-feather="clock" class="w-5 h-5 text-blue-500"></i> |
| </div> |
| <div class="text-2xl font-bold text-gray-900 dark:text-white">8</div> |
| <div class="mt-2 text-xs text-blue-600 dark:text-blue-400 font-medium">3 critical</div> |
| </div> |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Pending</span> |
| <i data-feather="alert-circle" class="w-5 h-5 text-yellow-500"></i> |
| </div> |
| <div class="text-2xl font-bold text-gray-900 dark:text-white">7</div> |
| <div class="mt-2 text-xs text-yellow-600 dark:text-yellow-400 font-medium">Ready to start</div> |
| </div> |
| </div> |
|
|
| |
| <div class="space-y-6"> |
| |
| <div class="phase-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <div class="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg"> |
| <i data-feather="settings" class="w-5 h-5 text-blue-600 dark:text-blue-400"></i> |
| </div> |
| <div> |
| <h2 class="text-xl font-bold text-gray-900 dark:text-white">1. Project Setup</h2> |
| <p class="text-sm text-gray-600 dark:text-gray-400">Foundation and tooling configuration</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="text-right"> |
| <div class="text-sm font-medium text-gray-900 dark:text-white">75%</div> |
| <div class="text-xs text-gray-500 dark:text-gray-400">6/8 tasks</div> |
| </div> |
| <svg class="w-12 h-12 progress-ring"> |
| <circle cx="24" cy="24" r="20" stroke="#e5e7eb" stroke-width="3" fill="none"></circle> |
| <circle cx="24" cy="24" r="20" stroke="url(#gradient1)" stroke-width="3" fill="none" |
| stroke-dasharray="126" stroke-dashoffset="31.5" stroke-linecap="round"></circle> |
| <defs> |
| <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" /> |
| <stop offset="100%" style="stop-color:#6366f1;stop-opacity:1" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-4"> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1" checked> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white line-through">1.1 Initialize TypeScript project with proper tsconfig.json</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Configured strict mode, module resolution, and path aliases</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1" checked> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white line-through">1.2 Set up Vite + React frontend structure</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Created component architecture with routing</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1" checked> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white line-through">1.3 Set up Express backend with TypeScript</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">REST API foundation with middleware support</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1" checked> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white line-through">1.4 Configure Prettier, ESLint, and Git hooks</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Code quality standards and formatting automation</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1" checked> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white line-through">1.5 Set up Docker containerization</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Multi-stage builds for frontend and backend</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1" checked> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white line-through">1.6 Configure GitHub Actions CI/CD pipeline</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Automated testing, building, and deployment</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/20"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">1.7 Initialize Jest + React Testing Library setup</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Test environment configuration and sample tests</p> |
| <div class="mt-2 flex items-center space-x-2"> |
| <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 text-xs rounded-full">In Progress</span> |
| <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs rounded-full">Testing</span> |
| </div> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">1.8 Document development workflow</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Contribution guidelines and best practices</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="phase-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-green-50 to-teal-50 dark:from-gray-700 dark:to-gray-800"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <div class="p-2 bg-green-100 dark:bg-green-900 rounded-lg"> |
| <i data-feather="server" class="w-5 h-5 text-green-600 dark:text-green-400"></i> |
| </div> |
| <div> |
| <h2 class="text-xl font-bold text-gray-900 dark:text-white">2. Jellyfin Integration</h2> |
| <p class="text-sm text-gray-600 dark:text-gray-400">Media server connectivity and asset management</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="text-right"> |
| <div class="text-sm font-medium text-gray-900 dark:text-white">40%</div> |
| <div class="text-xs text-gray-500 dark:text-gray-400">2/5 tasks</div> |
| </div> |
| <svg class="w-12 h-12 progress-ring"> |
| <circle cx="24" cy="24" r="20" stroke="#e5e7eb" stroke-width="3" fill="none"></circle> |
| <circle cx="24" cy="24" r="20" stroke="url(#gradient2)" stroke-width="3" fill="none" |
| stroke-dasharray="126" stroke-dashoffset="75.6" stroke-linecap="round"></circle> |
| <defs> |
| <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" /> |
| <stop offset="100%" style="stop-color:#0d9488;stop-opacity:1" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-4"> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1" checked> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white line-through">2.1 Create Jellyfin API client with authentication</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Token-based auth with refresh token handling</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1" checked> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white line-through">2.2 Implement library and media item fetching</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Paginated requests with filtering capabilities</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/20"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">2.3 Add poster/image retrieval functionality</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Image caching and fallback handling</p> |
| <div class="mt-2 flex items-center space-x-2"> |
| <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 text-xs rounded-full">In Progress</span> |
| <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs rounded-full">Backend</span> |
| </div> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">2.4 Create poster upload/save back to Jellyfin</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Binary upload with progress tracking</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">2.5 Add error handling and rate limiting</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Retry mechanisms and circuit breaker pattern</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="phase-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-red-50 to-orange-50 dark:from-gray-700 dark:to-gray-800"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <div class="p-2 bg-red-100 dark:bg-red-900 rounded-lg"> |
| <i data-feather="film" class="w-5 h-5 text-red-600 dark:text-red-400"></i> |
| </div> |
| <div> |
| <h2 class="text-xl font-bold text-gray-900 dark:text-white">3. TMDb Integration</h2> |
| <p class="text-sm text-gray-600 dark:text-gray-400">Movie/TV database connectivity</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="text-right"> |
| <div class="text-sm font-medium text-gray-900 dark:text-white">0%</div> |
| <div class="text-xs text-gray-500 dark:text-gray-400">0/4 tasks</div> |
| </div> |
| <svg class="w-12 h-12 progress-ring"> |
| <circle cx="24" cy="24" r="20" stroke="#e5e7eb" stroke-width="3" fill="none"></circle> |
| <circle cx="24" cy="24" r="20" stroke="url(#gradient3)" stroke-width="3" fill="none" |
| stroke-dasharray="126" stroke-dashoffset="126" stroke-linecap="round"></circle> |
| <defs> |
| <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#ef4444;stop-opacity:1" /> |
| <stop offset="100%" style="stop-color:#f97316;stop-opacity:1" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-4"> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">3.1 Set up TMDb API client</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">API key management and request throttling</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">3.2 Implement alternative poster fetching</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Multiple image sizes and aspect ratios</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">3.3 Add metadata enrichment (genres, year, overview)</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Structured data parsing and normalization</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">3.4 Create poster options selection interface</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Thumbnail gallery with preview functionality</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="phase-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-gray-700 dark:to-gray-800"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <div class="p-2 bg-purple-100 dark:bg-purple-900 rounded-lg"> |
| <i data-feather="layout" class="w-5 h-5 text-purple-600 dark:text-purple-400"></i> |
| </div> |
| <div> |
| <h2 class="text-xl font-bold text-gray-900 dark:text-white">4. Template System</h2> |
| <p class="text-sm text-gray-600 dark:text-gray-400">Design template engine and management</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="text-right"> |
| <div class="text-sm font-medium text-gray-900 dark:text-white">0%</div> |
| <div class="text-xs text-gray-500 dark:text-gray-400">0/5 tasks</div> |
| </div> |
| <svg class="w-12 h-12 progress-ring"> |
| <circle cx="24" cy="24" r="20" stroke="#e5e7eb" stroke-width="3" fill="none"></circle> |
| <circle cx="24" cy="24" r="20" stroke="url(#gradient4)" stroke-width="3" fill="none" |
| stroke-dasharray="126" stroke-dashoffset="126" stroke-linecap="round"></circle> |
| <defs> |
| <linearGradient id="gradient4" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:1" /> |
| <stop offset="100%" style="stop-color:#ec4899;stop-opacity:1" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-4"> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">4.1 Design JSON template schema</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Versioned specification with validation rules</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">4.2 Create predefined card types (poster, banner, anime, comic)</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Sample templates for common use cases</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">4.3 Implement template loader and validator</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Schema validation and error reporting</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">4.4 Add template selection UI component</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Gallery view with filtering and search</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">4.5 Create custom template creation interface</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">WYSIWYG editor for template design</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="phase-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-gray-700 dark:to-gray-800"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <div class="p-2 bg-cyan-100 dark:bg-cyan-900 rounded-lg"> |
| <i data-feather="cpu" class="w-5 h-5 text-cyan-600 dark:text-cyan-400"></i> |
| </div> |
| <div> |
| <h2 class="text-xl font-bold text-gray-900 dark:text-white">5. Rendering Engine</h2> |
| <p class="text-sm text-gray-600 dark:text-gray-400">High-performance graphics rendering</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="text-right"> |
| <div class="text-sm font-medium text-gray-900 dark:text-white">0%</div> |
| <div class="text-xs text-gray-500 dark:text-gray-400">0/8 tasks</div> |
| </div> |
| <svg class="w-12 h-12 progress-ring"> |
| <circle cx="24" cy="24" r="20" stroke="#e5e7eb" stroke-width="3" fill="none"></circle> |
| <circle cx="24" cy="24" r="20" stroke="url(#gradient5)" stroke-width="3" fill="none" |
| stroke-dasharray="126" stroke-dashoffset="126" stroke-linecap="round"></circle> |
| <defs> |
| <linearGradient id="gradient5" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1" /> |
| <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-4"> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">5.1 Set up HTML5 Canvas with WebGL context</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Context initialization and fallback handling</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">5.2 Implement layered compositing pipeline</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Z-index management and blending modes</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">5.3 Add background image loading and scaling</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Aspect ratio preservation and tiling options</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">5.4 Create mask application system</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Shape clipping and alpha channel manipulation</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">5.5 Implement text layer rendering with font metrics</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Kerning, leading, and baseline alignment</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">5.6 Add effects system (shadow, stroke, glow, blur)</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Shader-based effects with parameter controls</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">5.7 Create real-time preview (<200ms target)</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Debounced rendering with progressive enhancement</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">5.8 Build high-quality export pipeline</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">PNG/JPEG/WebP export with resolution options</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="phase-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-gray-700 dark:to-gray-800"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <div class="p-2 bg-amber-100 dark:bg-amber-900 rounded-lg"> |
| <i data-feather="type" class="w-5 h-5 text-amber-600 dark:text-amber-400"></i> |
| </div> |
| <div> |
| <h2 class="text-xl font-bold text-gray-900 dark:text-white">6. Font System</h2> |
| <p class="text-sm text-gray-600 dark:text-gray-400">Typography management and rendering</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="text-right"> |
| <div class="text-sm font-medium text-gray-900 dark:text-white">0%</div> |
| <div class="text-xs text-gray-500 dark:text-gray-400">0/6 tasks</div> |
| </div> |
| <svg class="w-12 h-12 progress-ring"> |
| <circle cx="24" cy="24" r="20" stroke="#e5e7eb" stroke-width="3" fill="none"></circle> |
| <circle cx="24" cy="24" r="20" stroke="url(#gradient6)" stroke-width="3" fill="none" |
| stroke-dasharray="126" stroke-dashoffset="126" stroke-linecap="round"></circle> |
| <defs> |
| <linearGradient id="gradient6" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" /> |
| <stop offset="100%" style="stop-color:#eab308;stop-opacity:1" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-4"> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">6.1 Integrate fontkit for font loading and metrics</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">OpenType feature support and glyph extraction</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">6.2 Create font property controls (size, kerning, interline)</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Real-time adjustment with visual feedback</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">6.3 Implement character replacement system</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Ligatures and stylistic alternates support</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">6.4 Add case transformation features</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Title case, sentence case, small caps</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">6.5 Create font licensing validation</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Usage rights checking and attribution display</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">6.6 Build font upload and management interface</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Drag-and-drop upload with preview thumbnails</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="phase-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-gray-700 dark:to-gray-800"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <div class="p-2 bg-emerald-100 dark:bg-emerald-900 rounded-lg"> |
| <i data-feather="monitor" class="w-5 h-5 text-emerald-600 dark:text-emerald-400"></i> |
| </div> |
| <div> |
| <h2 class="text-xl font-bold text-gray-900 dark:text-white">7. User Interface</h2> |
| <p class="text-sm text-gray-600 dark:text-gray-400">Application frontend and user experience</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="text-right"> |
| <div class="text-sm font-medium text-gray-900 dark:text-white">0%</div> |
| <div class="text-xs text-gray-500 dark:text-gray-400">0/7 tasks</div> |
| </div> |
| <svg class="w-12 h-12 progress-ring"> |
| <circle cx="24" cy="24" r="20" stroke="#e5e7eb" stroke-width="3" fill="none"></circle> |
| <circle cx="24" cy="24" r="20" stroke="url(#gradient7)" stroke-width="3" fill="none" |
| stroke-dasharray="126" stroke-dashoffset="126" stroke-linecap="round"></circle> |
| <defs> |
| <linearGradient id="gradient7" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" /> |
| <stop offset="100%" style="stop-color:#0d9488;stop-opacity:1" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-4"> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">7.1 Create main editor layout with canvas and controls</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Responsive design with docking panels</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">7.2 Build media selection interface (Jellyfin browser)</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Grid/list view with filtering and sorting</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">7.3 Add template picker component</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Categorized templates with live previews</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">7.4 Create font controls panel</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Advanced typography settings with live preview</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">7.5 Implement real-time preview synchronization</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Debounced updates with performance optimization</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">7.6 Add export options and progress tracking</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Batch processing with status indicators</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">7.7 Ensure WCAG AA accessibility compliance</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Keyboard navigation and screen reader support</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="phase-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-violet-50 to-purple-50 dark:from-gray-700 dark:to-gray-800"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <div class="p-2 bg-violet-100 dark:bg-violet-900 rounded-lg"> |
| <i data-feather="shield" class="w-5 h-5 text-violet-600 dark:text-violet-400"></i> |
| </div> |
| <div> |
| <h2 class="text-xl font-bold text-gray-900 dark:text-white">8. Testing & Validation</h2> |
| <p class="text-sm text-gray-600 dark:text-gray-400">Quality assurance and validation procedures</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="text-right"> |
| <div class="text-sm font-medium text-gray-900 dark:text-white">0%</div> |
| <div class="text-xs text-gray-500 dark:text-gray-400">0/6 tasks</div> |
| </div> |
| <svg class="w-12 h-12 progress-ring"> |
| <circle cx="24" cy="24" r="20" stroke="#e5e7eb" stroke-width="3" fill="none"></circle> |
| <circle cx="24" cy="24" r="20" stroke="url(#gradient8)" stroke-width="3" fill="none" |
| stroke-dasharray="126" stroke-dashoffset="126" stroke-linecap="round"></circle> |
| <defs> |
| <linearGradient id="gradient8" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:1" /> |
| <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:1" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-4"> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">8.1 Write unit tests for core utilities and rendering</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">80%+ coverage target for critical modules</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">8.2 Add component tests for key UI elements</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Interaction testing with React Testing Library</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">8.3 Create integration tests for API endpoints</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Contract testing with mock services</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">8.4 Set up E2E tests with Playwright</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Cross-browser testing scenarios</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">8.5 Add visual regression testing</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Screenshot comparison with threshold tolerance</p> |
| </div> |
| </div> |
| <div class="task-item flex items-start space-x-3 p-3 rounded-lg"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">8.6 Implement performance benchmarks</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Rendering speed and memory usage metrics</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="mt-12 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
| <div class="flex items-center justify-between"> |
| <p class="text-sm text-gray-600 dark:text-gray-400"> |
| © 2024 PosterCraft Studio. Building the ultimate poster customization tool. |
| </p> |
| <div class="flex items-center space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"> |
| <i data-feather="github" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"> |
| <i data-feather="external-link" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| feather.replace(); |
| |
| |
| function toggleTheme() { |
| document.documentElement.classList.toggle('dark'); |
| localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); |
| } |
| |
| |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| document.documentElement.classList.add('dark'); |
| } |
| |
| |
| document.querySelectorAll('.task-item').forEach(item => { |
| item.addEventListener('mouseenter', function() { |
| anime({ |
| targets: this, |
| backgroundColor: [ |
| { value: 'rgba(99, 102, 241, 0.05)', duration: 200 } |
| ], |
| easing: 'easeOutQuad' |
| }); |
| }); |
| |
| item.addEventListener('mouseleave', function() { |
| anime({ |
| targets: this, |
| backgroundColor: [ |
| { value: 'transparent', duration: 200 } |
| ], |
| easing: 'easeOutQuad' |
| }); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.checkbox-custom').forEach(checkbox => { |
| checkbox.addEventListener('change', function() { |
| if (this.checked) { |
| anime({ |
| targets: this, |
| scale: [1, 1.2, 1], |
| duration: 300, |
| easing: 'easeInOutQuad' |
| }); |
| |
| |
| const textContainer = this.parentElement.querySelector('p:first-child'); |
| if (textContainer && !textContainer.classList.contains('line-through')) { |
| anime({ |
| targets: textContainer, |
| opacity: [1, 0.5], |
| duration: 300 |
| }); |
| textContainer.classList.add('line-through'); |
| } |
| } else { |
| |
| const textContainer = this.parentElement.querySelector('p:first-child'); |
| if (textContainer && textContainer.classList.contains('line-through')) { |
| anime({ |
| targets: textContainer, |
| opacity: [0.5, 1], |
| duration: 300 |
| }); |
| textContainer.classList.remove('line-through'); |
| } |
| } |
| }); |
| }); |
| |
| |
| anime({ |
| targets: '.phase-card', |
| translateY: [50, 0], |
| opacity: [0, 1], |
| delay: anime.stagger(100), |
| duration: 800, |
| easing: 'easeOutExpo' |
| }); |
| |
| |
| setTimeout(() => { |
| anime({ |
| targets: '[stroke-dashoffset]', |
| strokeDashoffset: [function(el) { |
| return el.getAttribute('stroke-dasharray'); |
| }, function(el) { |
| return el.getAttribute('stroke-dashoffset'); |
| }], |
| duration: 1500, |
| delay: 500, |
| easing: 'easeOutExpo' |
| }); |
| }, 100); |
| </script> |
| </body> |
| </html> |
