Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Unified Time Logger & Scheduler</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> | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Animation for time entry */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .time-entry { | |
| animation: fadeIn 0.3s ease-out forwards; | |
| } | |
| /* Dark mode toggle transition */ | |
| .dark-toggle { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white dark:bg-gray-800 shadow-sm py-4 px-6 flex items-center justify-between sticky top-0 z-10"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-clock text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold">TimeTrack Pro</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="darkModeToggle" class="dark-toggle w-12 h-6 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center px-1"> | |
| <span class="w-4 h-4 rounded-full bg-white dark:bg-gray-300 shadow-md transform dark:translate-x-6 transition-transform"></span> | |
| </button> | |
| <div class="relative"> | |
| <button id="userMenuButton" class="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| <div id="userMenu" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-20"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a> | |
| <div class="border-t border-gray-200 dark:border-gray-700"></div> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-500 hover:bg-gray-100 dark:hover:bg-gray-700">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 flex flex-col md:flex-row p-4 gap-6"> | |
| <!-- Sidebar --> | |
| <aside class="w-full md:w-64 bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 h-fit sticky top-20"> | |
| <nav> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-blue-50 dark:bg-gray-700 text-blue-600 dark:text-blue-400 font-medium"> | |
| <i class="fas fa-home"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"> | |
| <i class="fas fa-clock"></i> | |
| <span>Time Log</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"> | |
| <i class="fas fa-calendar-alt"></i> | |
| <span>Schedule</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"> | |
| <i class="fas fa-chart-bar"></i> | |
| <span>Reports</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"> | |
| <i class="fas fa-cog"></i> | |
| <span>Settings</span> | |
| </a> | |
| </li> | |
| </ul> | |
| <div class="mt-8"> | |
| <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-4 mb-2">Projects</h3> | |
| <ul class="space-y-1"> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"> | |
| <span class="w-3 h-3 rounded-full bg-green-500"></span> | |
| <span>Website Redesign</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"> | |
| <span class="w-3 h-3 rounded-full bg-blue-500"></span> | |
| <span>Mobile App</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"> | |
| <span class="w-3 h-3 rounded-full bg-purple-500"></span> | |
| <span>Marketing Campaign</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200"> | |
| <span class="w-3 h-3 rounded-full bg-yellow-500"></span> | |
| <span>Client Support</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </aside> | |
| <!-- Main Panel --> | |
| <div class="flex-1 flex flex-col gap-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Today's Hours</p> | |
| <p class="text-2xl font-bold mt-1">4.5</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center"> | |
| <i class="fas fa-clock text-blue-500 dark:text-blue-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">+1.2h from yesterday</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Weekly Hours</p> | |
| <p class="text-2xl font-bold mt-1">32.8</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center"> | |
| <i class="fas fa-calendar-week text-green-500 dark:text-green-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">On track for 40h</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Active Projects</p> | |
| <p class="text-2xl font-bold mt-1">3</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center"> | |
| <i class="fas fa-tasks text-purple-500 dark:text-purple-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">2 deadlines this week</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Productivity</p> | |
| <p class="text-2xl font-bold mt-1">87%</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-yellow-500 dark:text-yellow-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">+5% from last week</p> | |
| </div> | |
| </div> | |
| <!-- Time Log Section --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">Time Log</h2> | |
| <button id="addTimeBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors"> | |
| <i class="fas fa-plus"></i> | |
| <span>Add Time</span> | |
| </button> | |
| </div> | |
| <!-- Time Entry Form (Hidden by default) --> | |
| <div id="timeEntryForm" class="hidden mb-6 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Project</label> | |
| <select class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"> | |
| <option>Website Redesign</option> | |
| <option>Mobile App</option> | |
| <option>Marketing Campaign</option> | |
| <option>Client Support</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Task</label> | |
| <input type="text" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200" placeholder="What did you work on?"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Duration</label> | |
| <input type="text" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200" placeholder="1h 30m"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes</label> | |
| <textarea class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200" rows="2" placeholder="Any additional details..."></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancelTimeBtn" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">Cancel</button> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors">Save Entry</button> | |
| </div> | |
| </div> | |
| <!-- Time Entries List --> | |
| <div class="space-y-4"> | |
| <div class="time-entry bg-gray-50 dark:bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="font-medium">Website Redesign</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Homepage layout updates</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">1.5h</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Today, 2:30 PM</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex items-center space-x-4"> | |
| <span class="text-xs px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">Design</span> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Updated the hero section and navigation based on client feedback</p> | |
| </div> | |
| </div> | |
| <div class="time-entry bg-gray-50 dark:bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="font-medium">Mobile App</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">User authentication flow</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">2.0h</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Today, 10:00 AM</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex items-center space-x-4"> | |
| <span class="text-xs px-2 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">Development</span> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Implemented OAuth integration with Google and Facebook</p> | |
| </div> | |
| </div> | |
| <div class="time-entry bg-gray-50 dark:bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="font-medium">Client Support</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Email correspondence</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">1.0h</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday, 4:15 PM</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex items-center space-x-4"> | |
| <span class="text-xs px-2 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-full">Communication</span> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Answered client questions about billing and upcoming features</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Schedule Section --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">Upcoming Schedule</h2> | |
| <button class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 flex items-center space-x-2 transition-colors"> | |
| <i class="fas fa-calendar-plus"></i> | |
| <span>Add Event</span> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="border-l-4 border-blue-500 pl-4 py-2"> | |
| <h3 class="font-medium">Team Standup</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Daily sync</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Tomorrow, 9:30 AM - 10:00 AM</p> | |
| </div> | |
| <div class="border-l-4 border-green-500 pl-4 py-2"> | |
| <h3 class="font-medium">Client Meeting</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Project review</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Tomorrow, 2:00 PM - 3:00 PM</p> | |
| </div> | |
| <div class="border-l-4 border-purple-500 pl-4 py-2"> | |
| <h3 class="font-medium">Code Review</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">PR #142</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Friday, 11:00 AM - 12:00 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white dark:bg-gray-800 py-4 px-6 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">© 2023 TimeTrack Pro. All rights reserved.</p> | |
| <div class="flex space-x-4 mt-2 md:mt-0"> | |
| <a href="#" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Privacy</a> | |
| <a href="#" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Terms</a> | |
| <a href="#" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Help</a> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Dark mode toggle | |
| const darkModeToggle = document.getElementById('darkModeToggle'); | |
| const html = document.documentElement; | |
| // Check for saved user preference or use system preference | |
| const savedTheme = localStorage.getItem('theme') || | |
| (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); | |
| if (savedTheme === 'dark') { | |
| html.classList.add('dark'); | |
| } | |
| darkModeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| const theme = html.classList.contains('dark') ? 'dark' : 'light'; | |
| localStorage.setItem('theme', theme); | |
| }); | |
| // User menu toggle | |
| const userMenuButton = document.getElementById('userMenuButton'); | |
| const userMenu = document.getElementById('userMenu'); | |
| userMenuButton.addEventListener('click', () => { | |
| userMenu.classList.toggle('hidden'); | |
| }); | |
| // Close user menu when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!userMenuButton.contains(e.target) && !userMenu.contains(e.target)) { | |
| userMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Time entry form toggle | |
| const addTimeBtn = document.getElementById('addTimeBtn'); | |
| const timeEntryForm = document.getElementById('timeEntryForm'); | |
| const cancelTimeBtn = document.getElementById('cancelTimeBtn'); | |
| addTimeBtn.addEventListener('click', () => { | |
| timeEntryForm.classList.remove('hidden'); | |
| timeEntryForm.scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| cancelTimeBtn.addEventListener('click', () => { | |
| timeEntryForm.classList.add('hidden'); | |
| }); | |
| // Add animation to new time entries (demo only) | |
| function addDemoTimeEntry() { | |
| const entriesContainer = document.querySelector('.space-y-4'); | |
| const newEntry = document.createElement('div'); | |
| newEntry.className = 'time-entry bg-gray-50 dark:bg-gray-700 rounded-lg p-4'; | |
| newEntry.innerHTML = ` | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="font-medium">Demo Project</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Sample task</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">0.5h</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Just now</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex items-center space-x-4"> | |
| <span class="text-xs px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full">Demo</span> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">This is a demo time entry added via JavaScript</p> | |
| </div> | |
| `; | |
| entriesContainer.prepend(newEntry); | |
| } | |
| // Uncomment to test adding demo entries | |
| // setInterval(addDemoTimeEntry, 5000); | |
| </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=Ultronprime/newdeepjoirnal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |