| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Weekly Report | SlateSync</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .progress-ring__circle { |
| transition: stroke-dashoffset 0.5s; |
| transform: rotate(-90deg); |
| transform-origin: 50% 50%; |
| } |
| </style> |
| </head> |
| <body class="bg-primary-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="mb-10"> |
| <div class="flex justify-between items-center mb-6"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-secondary-500 flex items-center justify-center mr-3"> |
| <i data-feather="file-text" class="text-white"></i> |
| </div> |
| <h1 class="text-3xl font-bold text-primary-800">Weekly Project Report</h1> |
| </div> |
| <div class="flex space-x-4"> |
| <a href="/weekly_report.html" class="bg-white hover:bg-primary-50 border border-primary-200 px-4 py-2 rounded-lg flex items-center transition"> |
| <i data-feather="calendar" class="mr-2"></i> |
| Weekly Report |
| </a> |
| <button class="bg-white hover:bg-primary-50 border border-primary-200 px-4 py-2 rounded-lg flex items-center transition"> |
| <i data-feather="download" class="mr-2"></i> |
| Export |
| </button> |
| <button class="bg-secondary-500 hover:bg-secondary-600 text-white px-4 py-2 rounded-lg flex items-center transition"> |
| <i data-feather="share-2" class="mr-2"></i> |
| Share |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div> |
| <h3 class="text-sm font-medium text-primary-400 mb-1">Report Period</h3> |
| <p class="text-primary-800 font-medium">Jun 5 - Jun 11, 2023</p> |
| </div> |
| <div> |
| <h3 class="text-sm font-medium text-primary-400 mb-1">Project</h3> |
| <p class="text-primary-800 font-medium">Website Redesign</p> |
| </div> |
| <div> |
| <h3 class="text-sm font-medium text-primary-400 mb-1">Team Lead</h3> |
| <p class="text-primary-800 font-medium">Sarah Johnson</p> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-2"> |
| |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| <h2 class="text-xl font-bold text-primary-800 mb-6">Progress Overview</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="bg-primary-50 rounded-lg p-4"> |
| <div class="flex items-center justify-between mb-2"> |
| <h3 class="font-medium text-primary-700">Completion Status</h3> |
| <span class="text-secondary-500 font-bold">75%</span> |
| </div> |
| <div class="w-full bg-primary-100 rounded-full h-2"> |
| <div class="bg-secondary-500 h-2 rounded-full" style="width: 75%"></div> |
| </div> |
| </div> |
| <div class="bg-primary-50 rounded-lg p-4"> |
| <div class="flex items-center justify-between mb-2"> |
| <h3 class="font-medium text-primary-700">Tasks Completed</h3> |
| <span class="text-secondary-500 font-bold">18/24</span> |
| </div> |
| <div class="w-full bg-primary-100 rounded-full h-2"> |
| <div class="bg-secondary-500 h-2 rounded-full" style="width: 75%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| <h2 class="text-xl font-bold text-primary-800 mb-6">Key Accomplishments</h2> |
| <ul class="space-y-4"> |
| <li class="flex"> |
| <div class="mr-4 mt-0.5"> |
| <div class="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center"> |
| <i data-feather="check" class="text-green-500 w-3 h-3"></i> |
| </div> |
| </div> |
| <p class="text-primary-700">Completed homepage redesign with new UI components</p> |
| </li> |
| <li class="flex"> |
| <div class="mr-4 mt-0.5"> |
| <div class="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center"> |
| <i data-feather="check" class="text-green-500 w-3 h-3"></i> |
| </div> |
| </div> |
| <p class="text-primary-700">Implemented responsive design for mobile devices</p> |
| </li> |
| <li class="flex"> |
| <div class="mr-4 mt-0.5"> |
| <div class="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center"> |
| <i data-feather="check" class="text-green-500 w-3 h-3"></i> |
| </div> |
| </div> |
| <p class="text-primary-700">Conducted user testing with 15 participants</p> |
| </li> |
| <li class="flex"> |
| <div class="mr-4 mt-0.5"> |
| <div class="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center"> |
| <i data-feather="check" class="text-green-500 w-3 h-3"></i> |
| </div> |
| </div> |
| <p class="text-primary-700">Integrated analytics tracking for new pages</p> |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-xl font-bold text-primary-800 mb-6">Challenges & Roadblocks</h2> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="mr-4 mt-0.5"> |
| <div class="w-5 h-5 rounded-full bg-yellow-100 flex items-center justify-center"> |
| <i data-feather="alert-triangle" class="text-yellow-500 w-3 h-3"></i> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-medium text-primary-700">Performance Issues</h4> |
| <p class="text-primary-500 mt-1">Image optimization needed for faster load times on mobile devices</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="mr-4 mt-0.5"> |
| <div class="w-5 h-5 rounded-full bg-yellow-100 flex items-center justify-center"> |
| <i data-feather="alert-triangle" class="text-yellow-500 w-3 h-3"></i> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-medium text-primary-700">Cross-browser Compatibility</h4> |
| <p class="text-primary-500 mt-1">Layout inconsistencies found in Safari that need resolution</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| <h2 class="text-xl font-bold text-primary-800 mb-6">Team Contributions</h2> |
| <div class="space-y-4"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-secondary-100 flex items-center justify-center mr-3"> |
| <i data-feather="user" class="text-secondary-500"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium text-primary-800">Sarah Johnson</h4> |
| <p class="text-sm text-primary-500">Completed 8 tasks</p> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-secondary-100 flex items-center justify-center mr-3"> |
| <i data-feather="user" class="text-secondary-500"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium text-primary-800">Michael Chen</h4> |
| <p class="text-sm text-primary-500">Completed 5 tasks</p> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-secondary-100 flex items-center justify-center mr-3"> |
| <i data-feather="user" class="text-secondary-500"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium text-primary-800">Alex Rodriguez</h4> |
| <p class="text-sm text-primary-500">Completed 3 tasks</p> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-secondary-100 flex items-center justify-center mr-3"> |
| <i data-feather="user" class="text-secondary-500"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium text-primary-800">Emma Wilson</h4> |
| <p class="text-sm text-primary-500">Completed 2 tasks</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-xl font-bold text-primary-800 mb-6">Next Week Priorities</h2> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <div class="mr-3 mt-0.5"> |
| <div class="w-5 h-5 rounded-full bg-secondary-100 flex items-center justify-center"> |
| <i data-feather="flag" class="text-secondary-500 w-3 h-3"></i> |
| </div> |
| </div> |
| <p class="text-primary-700">Fix Safari layout inconsistencies</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="mr-3 mt-0.5"> |
| <div class="w-5 h-5 rounded-full bg-secondary-100 flex items-center justify-center"> |
| <i data-feather="flag" class="text-secondary-500 w-3 h-3"></i> |
| </div> |
| </div> |
| <p class="text-primary-700">Implement image optimization</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="mr-3 mt-0.5"> |
| <div class="w-5 h-5 rounded-full bg-secondary-100 flex items-center justify-center"> |
| <i data-feather="flag" class="text-secondary-500 w-3 h-3"></i> |
| </div> |
| </div> |
| <p class="text-primary-700">Develop product page templates</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="mr-3 mt-0.5"> |
| <div class="w-5 h-5 rounded-full bg-secondary-100 flex items-center justify-center"> |
| <i data-feather="flag" class="text-secondary-500 w-3 h-3"></i> |
| </div> |
| </div> |
| <p class="text-primary-700">Prepare for client review meeting</p> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const sections = document.querySelectorAll('.bg-white'); |
| sections.forEach((section, index) => { |
| section.style.opacity = '0'; |
| section.style.transform = 'translateY(20px)'; |
| section.style.transition = 'all 0.5s ease ' + (index * 0.1) + 's'; |
| |
| setTimeout(() => { |
| section.style.opacity = '1'; |
| section.style.transform = 'translateY(0)'; |
| }, 100); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
