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