| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PosterCraft Studio - Task Management Dashboard</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-card { |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| transform-style: preserve-3d; |
| } |
| .task-card:hover { |
| transform: translateY(-4px) rotateX(2deg); |
| } |
| .progress-ring { |
| transform: rotate(-90deg); |
| transform-origin: 50% 50%; |
| } |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .dark-gradient { |
| background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); |
| } |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| } |
| .float-animation { |
| animation: float 6s ease-in-out infinite; |
| } |
| .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; |
| } |
| .tag-pill { |
| transition: all 0.2s; |
| } |
| .tag-pill:hover { |
| transform: scale(1.05); |
| } |
| </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 float-animation"> |
| <i data-feather="image" 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"> |
| Development Dashboard |
| </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-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/50 rounded-md"> |
| Dashboard |
| </a> |
| <a href="tasks.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"> |
| Tasks |
| </a> |
| </nav> |
| <button class="px-4 py-2 gradient-bg text-white rounded-lg hover:shadow-lg transition-all transform hover:scale-105"> |
| <span class="flex items-center space-x-2"> |
| <i data-feather="play" class="w-4 h-4"></i> |
| <span>Start Build</span> |
| </span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| |
| <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="check-square" 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="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700"> |
| <div class="flex items-center justify-between mb-2"> |
| <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Setup</h3> |
| <svg class="w-16 h-16 progress-ring"> |
| <circle cx="32" cy="32" r="28" stroke="#e5e7eb" stroke-width="4" fill="none"></circle> |
| <circle cx="32" cy="32" r="28" stroke="url(#gradient1)" stroke-width="4" fill="none" |
| stroke-dasharray="176" stroke-dashoffset="44" stroke-linecap="round"></circle> |
| <defs> |
| <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" /> |
| <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| <p class="text-sm text-gray-600 dark:text-gray-400">75% Complete</p> |
| </div> |
| <div class="p-6 space-y-3"> |
| <div class="flex items-start space-x-3"> |
| <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">Initialize TypeScript project</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">tsconfig.json configured</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <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">Set up Vite + React</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Frontend structure ready</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <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">Express backend setup</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">TypeScript configured</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">Docker containerization</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Create Dockerfile & docker-compose</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">GitHub Actions CI/CD</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Set up automated pipeline</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700"> |
| <div class="flex items-center justify-between mb-2"> |
| <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jellyfin Integration</h3> |
| <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 text-xs font-medium rounded-full"> |
| In Progress |
| </span> |
| </div> |
| <p class="text-sm text-gray-600 dark:text-gray-400">40% Complete</p> |
| </div> |
| <div class="p-6 space-y-3"> |
| <div class="flex items-start space-x-3"> |
| <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">API client setup</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Authentication flow ready</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <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">Library fetching</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Media items retrieved</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">Poster retrieval</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Image loading implementation</p> |
| <div class="mt-2"> |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5"> |
| <div class="bg-blue-500 h-1.5 rounded-full" style="width: 60%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">Poster upload</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Save back to Jellyfin</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">Error handling</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Rate limiting & retry logic</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700"> |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700"> |
| <div class="flex items-center justify-between mb-2"> |
| <h3 class="text-lg font-semibold text-gray-900 dark:text-white">TMDb Integration</h3> |
| <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-medium rounded-full"> |
| Pending |
| </span> |
| </div> |
| <p class="text-sm text-gray-600 dark:text-gray-400">0% Complete</p> |
| </div> |
| <div class="p-6 space-y-3"> |
| <div class="flex items-start space-x-3"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">TMDb API client</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Initialize client setup</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">Alternative posters</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Fetch multiple options</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">Metadata enrichment</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Genres, year, overview</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <input type="checkbox" class="checkbox-custom mt-1"> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white">Selection interface</p> |
| <p class="text-xs text-gray-500 dark:text-gray-400">UI for poster options</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="task-card bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700 hover:shadow-xl"> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="p-2 bg-orange-100 dark:bg-orange-900 rounded-lg"> |
| <i data-feather="layout" class="w-5 h-5 text-orange-600 dark:text-orange-400"></i> |
| </div> |
| <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Phase 4</span> |
| </div> |
| <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Template System</h4> |
| <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">JSON schema, card types, custom templates</p> |
| <div class="space-y-2"> |
| <div class="flex items-center justify-between text-xs"> |
| <span class="text-gray-500 dark:text-gray-400">Progress</span> |
| <span class="font-medium text-gray-900 dark:text-white">0%</span> |
| </div> |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
| <div class="bg-orange-500 h-2 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| <div class="mt-4 flex flex-wrap gap-1"> |
| <span class="tag-pill px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded">JSON</span> |
| <span class="tag-pill px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded">UI</span> |
| </div> |
| </div> |
|
|
| |
| <div class="task-card bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700 hover:shadow-xl"> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="p-2 bg-green-100 dark:bg-green-900 rounded-lg"> |
| <i data-feather="cpu" class="w-5 h-5 text-green-600 dark:text-green-400"></i> |
| </div> |
| <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Phase 5</span> |
| </div> |
| <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Rendering Engine</h4> |
| <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">Canvas, WebGL, real-time preview</p> |
| <div class="space-y-2"> |
| <div class="flex items-center justify-between text-xs"> |
| <span class="text-gray-500 dark:text-gray-400">Progress</span> |
| <span class="font-medium text-gray-900 dark:text-white">0%</span> |
| </div> |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| <div class="mt-4 flex flex-wrap gap-1"> |
| <span class="tag-pill px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded">WebGL</span> |
| <span class="tag-pill px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded">Canvas</span> |
| </div> |
| </div> |
|
|
| |
| <div class="task-card bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700 hover:shadow-xl"> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg"> |
| <i data-feather="type" class="w-5 h-5 text-blue-600 dark:text-blue-400"></i> |
| </div> |
| <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Phase 6</span> |
| </div> |
| <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Font System</h4> |
| <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">Fontkit, metrics, management</p> |
| <div class="space-y-2"> |
| <div class="flex items-center justify-between text-xs"> |
| <span class="text-gray-500 dark:text-gray-400">Progress</span> |
| <span class="font-medium text-gray-900 dark:text-white">0%</span> |
| </div> |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| <div class="mt-4 flex flex-wrap gap-1"> |
| <span class="tag-pill px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded">Fonts</span> |
| <span class="tag-pill px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded">Typography</span> |
| </div> |
| </div> |
|
|
| |
| <div class="task-card bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700 hover:shadow-xl"> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="p-2 bg-purple-100 dark:bg-purple-900 rounded-lg"> |
| <i data-feather="monitor" class="w-5 h-5 text-purple-600 dark:text-purple-400"></i> |
| </div> |
| <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Phase 7</span> |
| </div> |
| <h4 class="font-semibold text-gray-900 dark:text-white mb-2">User Interface</h4> |
| <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">Editor layout, controls, preview</p> |
| <div class="space-y-2"> |
| <div class="flex items-center justify-between text-xs"> |
| <span class="text-gray-500 dark:text-gray-400">Progress</span> |
| <span class="font-medium text-gray-900 dark:text-white">0%</span> |
| </div> |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| <div class="mt-4 flex flex-wrap gap-1"> |
| <span class="tag-pill px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded">React</span> |
| <span class="tag-pill px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded">UI/UX</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-8 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl p-8 text-white"> |
| <div class="flex items-center justify-between mb-6"> |
| <div> |
| <h3 class="text-2xl font-bold mb-2">Testing & Validation</h3> |
| <p class="text-purple-100">Phase 8: Comprehensive testing strategy</p> |
| </div> |
| <div class="text-right"> |
| <div class="text-3xl font-bold">0%</div> |
| <div class="text-sm text-purple-100">Not Started</div> |
| </div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="glass-effect rounded-lg p-4"> |
| <div class="flex items-center space-x-3 mb-2"> |
| <i data-feather="code" class="w-5 h-5"></i> |
| <h4 class="font-semibold">Unit Tests</h4> |
| </div> |
| <p class="text-sm text-purple-100">Core utilities and rendering logic</p> |
| <div class="mt-3 flex items-center space-x-2"> |
| <span class="px-2 py-1 bg-white/20 text-xs rounded">Jest</span> |
| <span class="px-2 py-1 bg-white/20 text-xs rounded">Coverage: 0%</span> |
| </div> |
| </div> |
| <div class="glass-effect rounded-lg p-4"> |
| <div class="flex items-center space-x-3 mb-2"> |
| <i data-feather="layers" class="w-5 h-5"></i> |
| <h4 class="font-semibold">Component Tests</h4> |
| </div> |
| <p class="text-sm text-purple-100">UI elements and interactions</p> |
| <div class="mt-3 flex items-center space-x-2"> |
| <span class="px-2 py-1 bg-white/20 text-xs rounded">RTL</span> |
| <span class="px-2 py-1 bg-white/20 text-xs rounded">Coverage: 0%</span> |
| </div> |
| </div> |
| <div class="glass-effect rounded-lg p-4"> |
| <div class="flex items-center space-x-3 mb-2"> |
| <i data-feather="globe" class="w-5 h-5"></i> |
| <h4 class="font-semibold">E2E Tests</h4> |
| </div> |
| <p class="text-sm text-purple-100">Full application workflows</p> |
| <div class="mt-3 flex items-center space-x-2"> |
| <span class="px-2 py-1 bg-white/20 text-xs rounded">Playwright</span> |
| <span class="px-2 py-1 bg-white/20 text-xs rounded">Scenarios: 0</span> |
| </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'); |
| } |
| |
| |
| anime({ |
| targets: '.task-card', |
| translateY: [50, 0], |
| opacity: [0, 1], |
| delay: anime.stagger(100), |
| duration: 800, |
| easing: 'easeOutExpo' |
| }); |
| |
| |
| anime({ |
| targets: '[style*="width"]', |
| width: [0, function(el) { |
| return el.style.width; |
| }], |
| duration: 1500, |
| delay: 500, |
| easing: 'easeOutExpo' |
| }); |
| |
| |
| 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.nextElementSibling.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'); |
| } |
| } |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.task-card').forEach(card => { |
| card.addEventListener('mouseenter', function() { |
| anime({ |
| targets: this, |
| scale: 1.02, |
| duration: 300, |
| easing: 'easeOutQuad' |
| }); |
| }); |
| |
| card.addEventListener('mouseleave', function() { |
| anime({ |
| targets: this, |
| scale: 1, |
| duration: 300, |
| easing: 'easeOutQuad' |
| }); |
| }); |
| }); |
| |
| |
| setInterval(() => { |
| const completed = document.querySelectorAll('.checkbox-custom:checked').length; |
| const total = document.querySelectorAll('.checkbox-custom').length; |
| const percentage = Math.round((completed / total) * 100); |
| |
| |
| const mainProgress = document.querySelector('.bg-gradient-to-r.from-purple-500.to-pink-500'); |
| if (mainProgress) { |
| mainProgress.style.width = percentage + '%'; |
| } |
| }, 1000); |
| </script> |
| </body> |
| </html> |
|
|
