Создай сайт с задачами и уведомлениями сотрудникам в telegram, функциональный и простой интерфейс легко ставить задачи переставлять их и удалять, Задачи можно настраивать еженедельно, ежедневно, ежемесячно на конкретные дату и время. Уведомления можно настроить на любое время и дату, каждый понедельник приходит уведомления со списком задач на неделю, дизайн футуристичный, сочетание черного, красного и голубого цветов
b406761 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TaskTron - Futuristic Task Manager</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <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> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#E53E3E', // red-600 | |
| secondary: '#3182CE', // blue-600 | |
| dark: '#1A202C', | |
| darker: '#171923' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-darker text-gray-200 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Task Creation Panel --> | |
| <div class="bg-dark rounded-xl p-6 shadow-lg border-l-4 border-primary"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i data-feather="plus-circle" class="mr-2 text-primary"></i> | |
| New Task | |
| </h2> | |
| <form id="taskForm" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Task Name</label> | |
| <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Description</label> | |
| <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" rows="3"></textarea> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Due Date</label> | |
| <input type="datetime-local" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Recurrence</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <option value="once">Once</option> | |
| <option value="daily">Daily</option> | |
| <option value="weekly">Weekly</option> | |
| <option value="monthly">Monthly</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Telegram Notification</label> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-700 rounded"> | |
| <span class="ml-2">Send to Telegram</span> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-primary hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center"> | |
| <i data-feather="save" class="mr-2"></i> | |
| Create Task | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Task List --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-dark rounded-xl p-6 shadow-lg border-l-4 border-secondary"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <i data-feather="list" class="mr-2 text-secondary"></i> | |
| My Tasks | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-sm px-3 py-1 rounded-lg transition duration-200"> | |
| All | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-sm px-3 py-1 rounded-lg transition duration-200"> | |
| Active | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-sm px-3 py-1 rounded-lg transition duration-200"> | |
| Completed | |
| </button> | |
| </div> | |
| </div> | |
| <div id="taskList" class="space-y-3"> | |
| <!-- Task items will be added here dynamically --> | |
| <div class="task-item bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-secondary transition duration-200"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" class="mt-1 h-4 w-4 text-primary focus:ring-primary border-gray-700 rounded"> | |
| <div class="ml-3"> | |
| <h3 class="font-medium">Complete project documentation</h3> | |
| <p class="text-sm text-gray-400 mt-1">Due: Tomorrow, 10:00 AM</p> | |
| <div class="flex items-center mt-2 text-xs"> | |
| <span class="bg-gray-700 px-2 py-1 rounded mr-2">Weekly</span> | |
| <span class="flex items-center text-secondary"> | |
| <i data-feather="send" class="w-3 h-3 mr-1"></i> | |
| Telegram | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="task-item bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-secondary transition duration-200"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" class="mt-1 h-4 w-4 text-primary focus:ring-primary border-gray-700 rounded" checked> | |
| <div class="ml-3"> | |
| <h3 class="font-medium text-gray-500 line-through">Team meeting</h3> | |
| <p class="text-sm text-gray-500 mt-1">Due: Today, 3:00 PM</p> | |
| <div class="flex items-center mt-2 text-xs"> | |
| <span class="bg-gray-700 px-2 py-1 rounded mr-2">Daily</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notifications Panel --> | |
| <div class="bg-dark rounded-xl p-6 shadow-lg border-l-4 border-secondary mt-6"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i data-feather="bell" class="mr-2 text-secondary"></i> | |
| Notifications | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary bg-opacity-20 p-2 rounded-lg mr-3"> | |
| <i data-feather="calendar" class="w-5 h-5 text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Weekly Digest</h3> | |
| <p class="text-sm text-gray-400">Every Monday at 9:00 AM</p> | |
| <p class="text-sm mt-1">Sends a summary of all tasks for the week</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-secondary bg-opacity-20 p-2 rounded-lg mr-3"> | |
| <i data-feather="clock" class="w-5 h-5 text-secondary"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Daily Reminder</h3> | |
| <p class="text-sm text-gray-400">Every day at 8:00 AM</p> | |
| <p class="text-sm mt-1">Reminds about tasks due today</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 bg-secondary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center"> | |
| <i data-feather="plus" class="mr-2"></i> | |
| Add Notification | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |