Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Progress Tracker | Мониторинг прогресса</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 0.6s ease-out forwards; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.6); | |
| } | |
| .task-item:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-12 animate-fadeIn" style="animation-delay: 0.1s;"> | |
| <div> | |
| <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600"> | |
| Progress<span class="font-light">Tracker</span> | |
| </h1> | |
| <p class="text-gray-500 mt-1">Мониторинг выполнения задач в реальном времени</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="notificationBtn" class="p-2 rounded-full bg-white shadow-md hover:bg-gray-100 transition"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="h-10 w-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold">AI</div> | |
| <span class="hidden md:inline font-medium">Алексей Иванов</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Stats Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12"> | |
| <div class="bg-white rounded-xl shadow-md p-6 animate-fadeIn" style="animation-delay: 0.2s;"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Всего задач</p> | |
| <h3 class="text-3xl font-bold mt-2">47</h3> | |
| </div> | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <i class="fas fa-tasks text-blue-500"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-blue-500 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 animate-fadeIn" style="animation-delay: 0.3s;"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">В работе</p> | |
| <h3 class="text-3xl font-bold mt-2">18</h3> | |
| </div> | |
| <div class="bg-yellow-50 p-3 rounded-lg"> | |
| <i class="fas fa-spinner text-yellow-500"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-yellow-500 rounded-full" style="width: 38%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 animate-fadeIn" style="animation-delay: 0.4s;"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Завершено</p> | |
| <h3 class="text-3xl font-bold mt-2">24</h3> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded-lg"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-green-500 rounded-full" style="width: 51%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 animate-fadeIn" style="animation-delay: 0.5s;"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Просрочено</p> | |
| <h3 class="text-3xl font-bold mt-2">5</h3> | |
| </div> | |
| <div class="bg-red-50 p-3 rounded-lg"> | |
| <i class="fas fa-exclamation-circle text-red-500"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-red-500 rounded-full" style="width: 11%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Project Progress --> | |
| <div class="lg:col-span-2 animate-fadeIn" style="animation-delay: 0.6s;"> | |
| <div class="bg-white rounded-xl shadow-md p-6 h-full"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Прогресс по проектам</h2> | |
| <div class="relative"> | |
| <select class="appearance-none bg-gray-100 border-0 py-2 pl-3 pr-8 rounded-lg focus:ring-2 focus:ring-blue-500"> | |
| <option>Все проекты</option> | |
| <option>Веб-разработка</option> | |
| <option>Мобильное приложение</option> | |
| <option>Дизайн</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500 pointer-events-none"></i> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- Project 1 --> | |
| <div class="flex items-start p-4 rounded-lg border border-gray-200 hover:border-blue-300 transition task-item"> | |
| <div class="mr-4"> | |
| <div class="h-12 w-12 rounded-lg bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-code text-blue-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold">Разработка API</h3> | |
| <p class="text-gray-500 text-sm mt-1">Команда Backend</p> | |
| </div> | |
| <span class="text-xs bg-blue-100 text-blue-800 py-1 px-2 rounded-full">В работе</span> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Прогресс</span> | |
| <span>65%</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-blue-500 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="flex items-start p-4 rounded-lg border border-gray-200 hover:border-purple-300 transition task-item"> | |
| <div class="mr-4"> | |
| <div class="h-12 w-12 rounded-lg bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-mobile-alt text-purple-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold">Мобильное приложение</h3> | |
| <p class="text-gray-500 text-sm mt-1">Команда iOS</p> | |
| </div> | |
| <span class="text-xs bg-green-100 text-green-800 py-1 px-2 rounded-full">Завершено</span> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Прогресс</span> | |
| <span>100%</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-green-500 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="flex items-start p-4 rounded-lg border border-gray-200 hover:border-yellow-300 transition task-item"> | |
| <div class="mr-4"> | |
| <div class="h-12 w-12 rounded-lg bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-paint-brush text-yellow-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold">Дизайн интерфейса</h3> | |
| <p class="text-gray-500 text-sm mt-1">UI/UX команда</p> | |
| </div> | |
| <span class="text-xs bg-yellow-100 text-yellow-800 py-1 px-2 rounded-full">В работе</span> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Прогресс</span> | |
| <span>45%</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-yellow-500 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full py-3 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> Добавить новый проект | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Progress Summary --> | |
| <div class="animate-fadeIn" style="animation-delay: 0.7s;"> | |
| <div class="bg-white rounded-xl shadow-md p-6 h-full"> | |
| <h2 class="text-xl font-bold mb-6">Общий прогресс</h2> | |
| <div class="flex justify-center my-8"> | |
| <div class="relative w-48 h-48"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100"> | |
| <!-- Background circle --> | |
| <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> | |
| <!-- Progress circle --> | |
| <circle class="progress-ring__circle text-blue-500" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" | |
| stroke-dasharray="251.2" stroke-dashoffset="88" /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center flex-col"> | |
| <span class="text-3xl font-bold">65%</span> | |
| <span class="text-gray-500 text-sm">общего прогресса</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="h-3 w-3 rounded-full bg-blue-500 mr-3"></div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-sm"> | |
| <span>Разработка</span> | |
| <span class="font-medium">35 задач</span> | |
| </div> | |
| <div class="h-1.5 bg-gray-200 rounded-full overflow-hidden mt-1"> | |
| <div class="h-full bg-blue-500 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="h-3 w-3 rounded-full bg-purple-500 mr-3"></div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-sm"> | |
| <span>Дизайн</span> | |
| <span class="font-medium">18 задач</span> | |
| </div> | |
| <div class="h-1.5 bg-gray-200 rounded-full overflow-hidden mt-1"> | |
| <div class="h-full bg-purple-500 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="h-3 w-3 rounded-full bg-green-500 mr-3"></div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-sm"> | |
| <span>Тестирование</span> | |
| <span class="font-medium">12 задач</span> | |
| </div> | |
| <div class="h-1.5 bg-gray-200 rounded-full overflow-hidden mt-1"> | |
| <div class="h-full bg-green-500 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-blue-50 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-trophy text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-800">Отличный прогресс!</h4> | |
| <p class="text-blue-600 text-sm mt-1">Вы выполнили 12 задач на этой неделе. Продолжайте в том же духе!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="mt-12 animate-fadeIn" style="animation-delay: 0.8s;"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Последняя активность</h2> | |
| <button class="text-blue-500 hover:text-blue-700 transition">Показать все</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="relative mr-4"> | |
| <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-check text-purple-500"></i> | |
| </div> | |
| <div class="absolute -bottom-1 -right-1 h-5 w-5 bg-green-500 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium">Задача завершена</h4> | |
| <p class="text-gray-500 text-sm mt-1">Максим завершил задачу "Разработка API для авторизации"</p> | |
| </div> | |
| <span class="text-gray-400 text-sm">2 часа назад</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="relative mr-4"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-code text-blue-500"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium">Новая задача</h4> | |
| <p class="text-gray-500 text-sm mt-1">Анна добавила новую задачу "Обновить дизайн главной страницы"</p> | |
| </div> | |
| <span class="text-gray-400 text-sm">5 часов назад</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="relative mr-4"> | |
| <div class="h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-comment-alt text-yellow-500"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium">Новый комментарий</h4> | |
| <p class="text-gray-500 text-sm mt-1">Сергей оставил комментарий к задаче "Исправить баг в мобильной версии"</p> | |
| </div> | |
| <span class="text-gray-400 text-sm">Вчера</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Action Button --> | |
| <button class="fixed bottom-8 right-8 h-14 w-14 rounded-full bg-blue-500 text-white flex items-center justify-center shadow-lg glow-effect hover:bg-blue-600 transition floating"> | |
| <i class="fas fa-plus text-xl"></i> | |
| </button> | |
| <script> | |
| // Notification dropdown | |
| const notificationBtn = document.getElementById('notificationBtn'); | |
| notificationBtn.addEventListener('click', () => { | |
| alert('У вас 3 новых уведомления'); | |
| }); | |
| // Animate progress ring | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const circle = document.querySelector('.progress-ring__circle'); | |
| const radius = circle.r.baseVal.value; | |
| const circumference = 2 * Math.PI * radius; | |
| circle.style.strokeDasharray = `${circumference} ${circumference}`; | |
| circle.style.strokeDashoffset = circumference; | |
| const offset = circumference - (65 / 100) * circumference; | |
| setTimeout(() => { | |
| circle.style.strokeDashoffset = offset; | |
| }, 200); | |
| }); | |
| // Task hover effect | |
| const taskItems = document.querySelectorAll('.task-item'); | |
| taskItems.forEach(item => { | |
| item.style.transition = 'all 0.3s ease'; | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SallyHS/site-for-progress" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |