|
|
<!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> |
