Spaces:
Running
Running
Create an AppSheet application to track employee break times during night shifts with the following requirements: Shift time range: Employees can start work no earlier than 6:00 PM and finish no later than 6:00 AM the next day. The system must not reset at midnight, but instead reset at 6:00 AM. Break rules: Break 1 = 10 minutes Break 2 = 40 minutes Break 3 = 10 minutes Break 4 = 10 minutes The app should monitor whether employees take breaks exactly within the defined durations and intervals. Tracking features: Show total break time taken by each employee. Show the elapsed time since an employee went on a break. Default status after the shift starts is “Working” with a green indicator and a Check-Out button. When an employee successfully checks out, the status should update to “On Break” (Break 1, Break 2, Break 3, Break 4 accordingly). Location-based restrictions: Check-In and Check-Out buttons should only be visible when the employee is using the registered device and is within a 20-meter radius of the pre-configured workplace location. Every time an employee presses Check-In or Check-Out, the system must refresh the location data to verify if the current position is within range. If the position is out of range, the action must fail with an error message, and the buttons must not appear. Performance requirements: The app should be lightweight, fast, and smooth without unnecessary bots or heavy automation. Only essential features for quick operation should be included. Build a complete system with these rules and make sure it is simple, reliable, and ready for real-world use. - Initial Deployment
3bab5cb
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Night Shift Break 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> | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .slide-in { | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-3xl"> | |
| <!-- Header --> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">Night Shift Break Tracker</h1> | |
| <p class="text-gray-600">Monitor employee breaks during night shifts (6PM - 6AM)</p> | |
| <div class="mt-4 p-3 bg-blue-50 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-clock text-blue-500 mr-2"></i> | |
| <span id="current-time" class="font-mono font-bold text-blue-700"></span> | |
| <span id="shift-status" class="ml-4 px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800"></span> | |
| </div> | |
| </header> | |
| <!-- Employee Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6 slide-in"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div> | |
| <h2 class="text-xl font-semibold text-gray-800" id="employee-name">John Doe</h2> | |
| <p class="text-gray-600 text-sm">Employee ID: NS-2023-001</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full mr-2" id="status-indicator"></div> | |
| <span class="text-sm font-medium" id="status-text">Working</span> | |
| </div> | |
| </div> | |
| <!-- Time Tracking --> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500 mb-1">Shift Started</p> | |
| <p class="font-mono font-bold" id="shift-start-time">--:-- --</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500 mb-1">Current Break</p> | |
| <p class="font-mono font-bold" id="current-break-time">00:00</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500 mb-1">Total Break Time</p> | |
| <p class="font-mono font-bold" id="total-break-time">00:00</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500 mb-1">Break Type</p> | |
| <p class="font-mono font-bold" id="break-type">None</p> | |
| </div> | |
| </div> | |
| <!-- Break Progress --> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Break Progress</span> | |
| <span id="break-progress-text">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" id="break-progress-bar" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex flex-col space-y-3" id="action-buttons"> | |
| <button id="check-in-btn" class="hidden w-full bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg font-medium transition duration-200 flex items-center justify-center"> | |
| <i class="fas fa-sign-in-alt mr-2"></i> Check In to Start Shift | |
| </button> | |
| <button id="check-out-btn" class="w-full bg-red-500 hover:bg-red-600 text-white py-3 px-4 rounded-lg font-medium transition duration-200 flex items-center justify-center"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> Check Out for Break | |
| </button> | |
| </div> | |
| <!-- Location Warning --> | |
| <div id="location-warning" class="hidden mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm flex items-center"> | |
| <i class="fas fa-exclamation-circle mr-2"></i> | |
| <span>You must be within 20m of workplace to check in/out</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Break Rules --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6 slide-in"> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Break Rules</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> | |
| <span class="font-medium">Break 1</span> | |
| </div> | |
| <p class="text-sm text-gray-700">10 minutes duration</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg border border-purple-100"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div> | |
| <span class="font-medium">Break 2</span> | |
| </div> | |
| <p class="text-sm text-gray-700">40 minutes duration</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg border border-green-100"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="font-medium">Break 3</span> | |
| </div> | |
| <p class="text-sm text-gray-700">10 minutes duration</p> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <span class="font-medium">Break 4</span> | |
| </div> | |
| <p class="text-sm text-gray-700">10 minutes duration</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Break History --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden slide-in"> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Today's Break History</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Break</th> | |
| <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Time</th> | |
| <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Time</th> | |
| <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th> | |
| <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="break-history"> | |
| <!-- Will be populated by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Modal --> | |
| <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-6 max-w-sm w-full mx-4 slide-in"> | |
| <div class="text-center"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4"> | |
| <i class="fas fa-check text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2" id="modal-title">Success</h3> | |
| <p class="text-sm text-gray-500 mb-4" id="modal-message">Action completed successfully.</p> | |
| <button id="modal-close-btn" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-200"> | |
| OK | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // App State | |
| const state = { | |
| shiftStarted: false, | |
| currentBreak: null, | |
| breakStartTime: null, | |
| totalBreakTime: 0, | |
| breakHistory: [], | |
| currentBreakType: null, | |
| inLocation: true, // Simulate location check | |
| workplaceLocation: { lat: 40.7128, lng: -74.0060 }, // Example coordinates | |
| breakRules: { | |
| 1: { name: "Break 1", duration: 10 * 60 * 1000, color: "blue" }, | |
| 2: { name: "Break 2", duration: 40 * 60 * 1000, color: "purple" }, | |
| 3: { name: "Break 3", duration: 10 * 60 * 1000, color: "green" }, | |
| 4: { name: "Break 4", duration: 10 * 60 * 1000, color: "yellow" } | |
| }, | |
| shiftStartTime: null | |
| }; | |
| // DOM Elements | |
| const elements = { | |
| currentTime: document.getElementById('current-time'), | |
| shiftStatus: document.getElementById('shift-status'), | |
| employeeName: document.getElementById('employee-name'), | |
| statusIndicator: document.getElementById('status-indicator'), | |
| statusText: document.getElementById('status-text'), | |
| shiftStartTime: document.getElementById('shift-start-time'), | |
| currentBreakTime: document.getElementById('current-break-time'), | |
| totalBreakTime: document.getElementById('total-break-time'), | |
| breakType: document.getElementById('break-type'), | |
| breakProgressText: document.getElementById('break-progress-text'), | |
| breakProgressBar: document.getElementById('break-progress-bar'), | |
| checkInBtn: document.getElementById('check-in-btn'), | |
| checkOutBtn: document.getElementById('check-out-btn'), | |
| locationWarning: document.getElementById('location-warning'), | |
| breakHistory: document.getElementById('break-history'), | |
| successModal: document.getElementById('success-modal'), | |
| modalTitle: document.getElementById('modal-title'), | |
| modalMessage: document.getElementById('modal-message'), | |
| modalCloseBtn: document.getElementById('modal-close-btn') | |
| }; | |
| // Initialize the app | |
| function init() { | |
| updateClock(); | |
| setInterval(updateClock, 1000); | |
| // Check if shift should be active based on time (6PM-6AM) | |
| checkShiftTime(); | |
| // Set up event listeners | |
| elements.checkInBtn.addEventListener('click', startShift); | |
| elements.checkOutBtn.addEventListener('click', toggleBreak); | |
| elements.modalCloseBtn.addEventListener('click', () => { | |
| elements.successModal.classList.add('hidden'); | |
| }); | |
| // Simulate location check (in a real app, this would use Geolocation API) | |
| simulateLocationCheck(); | |
| } | |
| // Update clock display | |
| function updateClock() { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); | |
| elements.currentTime.textContent = timeString; | |
| // Update current break timer if in break | |
| if (state.currentBreak) { | |
| updateBreakTimer(); | |
| } | |
| } | |
| // Check if current time is within shift hours (6PM-6AM) | |
| function checkShiftTime() { | |
| const now = new Date(); | |
| const hours = now.getHours(); | |
| const isNightShift = hours >= 18 || hours < 6; | |
| if (isNightShift) { | |
| elements.shiftStatus.textContent = "Night Shift Active"; | |
| elements.shiftStatus.classList.remove('bg-red-100', 'text-red-800'); | |
| elements.shiftStatus.classList.add('bg-green-100', 'text-green-800'); | |
| } else { | |
| elements.shiftStatus.textContent = "Day Time (Shift Inactive)"; | |
| elements.shiftStatus.classList.remove('bg-green-100', 'text-green-800'); | |
| elements.shiftStatus.classList.add('bg-red-100', 'text-red-800'); | |
| // Reset if outside shift hours | |
| if (state.shiftStarted) { | |
| endShift(); | |
| } | |
| } | |
| } | |
| // Start the shift | |
| function startShift() { | |
| if (!state.inLocation) { | |
| showLocationWarning(); | |
| return; | |
| } | |
| state.shiftStarted = true; | |
| state.shiftStartTime = new Date(); | |
| state.totalBreakTime = 0; | |
| state.breakHistory = []; | |
| state.currentBreak = null; | |
| state.currentBreakType = null; | |
| updateUI(); | |
| const timeString = state.shiftStartTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); | |
| elements.shiftStartTime.textContent = timeString; | |
| showSuccessModal("Shift Started", "Your night shift has started successfully. Remember to take your breaks on time!"); | |
| } | |
| // End the shift | |
| function endShift() { | |
| state.shiftStarted = false; | |
| state.shiftStartTime = null; | |
| state.currentBreak = null; | |
| state.currentBreakType = null; | |
| updateUI(); | |
| } | |
| // Toggle break (start or end) | |
| function toggleBreak() { | |
| if (!state.inLocation) { | |
| showLocationWarning(); | |
| return; | |
| } | |
| if (state.currentBreak) { | |
| endBreak(); | |
| } else { | |
| startBreak(); | |
| } | |
| } | |
| // Start a break | |
| function startBreak() { | |
| if (!state.shiftStarted) return; | |
| // Determine next break type | |
| const breaksTaken = state.breakHistory.filter(b => b.type !== null).length; | |
| let nextBreakType = null; | |
| if (breaksTaken < 4) { | |
| nextBreakType = breaksTaken + 1; | |
| } else { | |
| // All breaks taken | |
| showSuccessModal("All Breaks Taken", "You have already taken all your scheduled breaks for this shift."); | |
| return; | |
| } | |
| state.currentBreak = true; | |
| state.breakStartTime = new Date(); | |
| state.currentBreakType = nextBreakType; | |
| updateUI(); | |
| // Add to history | |
| state.breakHistory.push({ | |
| type: nextBreakType, | |
| startTime: new Date(state.breakStartTime), | |
| endTime: null, | |
| duration: null | |
| }); | |
| updateBreakHistory(); | |
| const breakName = state.breakRules[nextBreakType].name; | |
| showSuccessModal("Break Started", `Your ${breakName} has started. Duration: ${state.breakRules[nextBreakType].duration / 60000} minutes.`); | |
| } | |
| // End current break | |
| function endBreak() { | |
| if (!state.currentBreak || !state.breakStartTime) return; | |
| const endTime = new Date(); | |
| const duration = endTime - state.breakStartTime; | |
| state.totalBreakTime += duration; | |
| // Update history | |
| const currentBreak = state.breakHistory.find(b => b.endTime === null); | |
| if (currentBreak) { | |
| currentBreak.endTime = endTime; | |
| currentBreak.duration = duration; | |
| } | |
| // Check if break duration matches rules | |
| const expectedDuration = state.breakRules[state.currentBreakType].duration; | |
| const isCorrectDuration = Math.abs(duration - expectedDuration) < 30000; // 30 second tolerance | |
| state.currentBreak = false; | |
| state.breakStartTime = null; | |
| state.currentBreakType = null; | |
| updateUI(); | |
| updateBreakHistory(); | |
| const breakName = state.breakRules[state.currentBreakType].name; | |
| if (isCorrectDuration) { | |
| showSuccessModal("Break Ended", `Your ${breakName} has ended. Duration was correct.`); | |
| } else { | |
| showSuccessModal("Break Ended", `Your ${breakName} has ended. Note: Duration was ${Math.round(duration / 60000)} minutes (expected ${expectedDuration / 60000} minutes).`); | |
| } | |
| } | |
| // Update break timer display | |
| function updateBreakTimer() { | |
| if (!state.currentBreak || !state.breakStartTime) return; | |
| const now = new Date(); | |
| const elapsed = now - state.breakStartTime; | |
| const minutes = Math.floor(elapsed / 60000); | |
| const seconds = Math.floor((elapsed % 60000) / 1000); | |
| elements.currentBreakTime.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| // Update progress | |
| if (state.currentBreakType) { | |
| const expectedDuration = state.breakRules[state.currentBreakType].duration; | |
| const progress = Math.min(100, (elapsed / expectedDuration) * 100); | |
| elements.breakProgressBar.style.width = `${progress}%`; | |
| elements.breakProgressText.textContent = `${Math.round(progress)}%`; | |
| // Change color if over duration | |
| if (progress >= 100) { | |
| elements.breakProgressBar.classList.remove('bg-blue-600'); | |
| elements.breakProgressBar.classList.add('bg-red-600'); | |
| } else { | |
| elements.breakProgressBar.classList.remove('bg-red-600'); | |
| elements.breakProgressBar.classList.add('bg-blue-600'); | |
| } | |
| } | |
| } | |
| // Update UI based on current state | |
| function updateUI() { | |
| // Check in/out button visibility | |
| elements.checkInBtn.classList.toggle('hidden', state.shiftStarted); | |
| elements.checkOutBtn.classList.toggle('hidden', !state.shiftStarted); | |
| // Status indicator | |
| if (state.currentBreak) { | |
| elements.statusIndicator.className = 'w-3 h-3 rounded-full mr-2 pulse-animation'; | |
| elements.statusIndicator.classList.add(`bg-${state.breakRules[state.currentBreakType].color}-500`); | |
| elements.statusText.textContent = state.breakRules[state.currentBreakType].name; | |
| elements.checkOutBtn.innerHTML = '<i class="fas fa-sign-in-alt mr-2"></i> Check In from Break'; | |
| elements.checkOutBtn.classList.remove('bg-red-500', 'hover:bg-red-600'); | |
| elements.checkOutBtn.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| } else { | |
| elements.statusIndicator.className = 'w-3 h-3 rounded-full mr-2 bg-green-500'; | |
| elements.statusText.textContent = 'Working'; | |
| elements.checkOutBtn.innerHTML = '<i class="fas fa-sign-out-alt mr-2"></i> Check Out for Break'; | |
| elements.checkOutBtn.classList.remove('bg-green-500', 'hover:bg-green-600'); | |
| elements.checkOutBtn.classList.add('bg-red-500', 'hover:bg-red-600'); | |
| } | |
| // Break type display | |
| if (state.currentBreakType) { | |
| elements.breakType.textContent = state.breakRules[state.currentBreakType].name; | |
| elements.breakType.classList.add(`text-${state.breakRules[state.currentBreakType].color}-600`); | |
| } else { | |
| elements.breakType.textContent = 'None'; | |
| elements.breakType.className = 'font-mono font-bold'; | |
| } | |
| // Total break time display | |
| const totalMinutes = Math.floor(state.totalBreakTime / 60000); | |
| const totalSeconds = Math.floor((state.totalBreakTime % 60000) / 1000); | |
| elements.totalBreakTime.textContent = `${totalMinutes.toString().padStart(2, '0')}:${totalSeconds.toString().padStart(2, '0')}`; | |
| // Reset current break time if not in break | |
| if (!state.currentBreak) { | |
| elements.currentBreakTime.textContent = '00:00'; | |
| elements.breakProgressBar.style.width = '0%'; | |
| elements.breakProgressText.textContent = '0%'; | |
| elements.breakProgressBar.classList.remove('bg-red-600'); | |
| elements.breakProgressBar.classList.add('bg-blue-600'); | |
| } | |
| } | |
| // Update break history table | |
| function updateBreakHistory() { | |
| elements.breakHistory.innerHTML = ''; | |
| state.breakHistory.forEach(breakItem => { | |
| const row = document.createElement('tr'); | |
| const typeCell = document.createElement('td'); | |
| typeCell.className = 'px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900'; | |
| typeCell.textContent = breakItem.type ? state.breakRules[breakItem.type].name : 'Shift Start'; | |
| const startCell = document.createElement('td'); | |
| startCell.className = 'px-4 py-3 whitespace-nowrap text-sm text-gray-500'; | |
| startCell.textContent = breakItem.startTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); | |
| const endCell = document.createElement('td'); | |
| endCell.className = 'px-4 py-3 whitespace-nowrap text-sm text-gray-500'; | |
| endCell.textContent = breakItem.endTime ? breakItem.endTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : '--:-- --'; | |
| const durationCell = document.createElement('td'); | |
| durationCell.className = 'px-4 py-3 whitespace-nowrap text-sm text-gray-500'; | |
| if (breakItem.duration) { | |
| const minutes = Math.floor(breakItem.duration / 60000); | |
| const seconds = Math.floor((breakItem.duration % 60000) / 1000); | |
| durationCell.textContent = `${minutes}m ${seconds}s`; | |
| } else { | |
| durationCell.textContent = '--'; | |
| } | |
| const statusCell = document.createElement('td'); | |
| statusCell.className = 'px-4 py-3 whitespace-nowrap text-sm'; | |
| if (breakItem.endTime) { | |
| const expectedDuration = breakItem.type ? state.breakRules[breakItem.type].duration : 0; | |
| const isCorrect = breakItem.type ? Math.abs(breakItem.duration - expectedDuration) < 30000 : true; | |
| if (isCorrect) { | |
| statusCell.innerHTML = '<span class="px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">Completed</span>'; | |
| } else { | |
| statusCell.innerHTML = '<span class="px-2 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">Incorrect Duration</span>'; | |
| } | |
| } else if (breakItem.type) { | |
| statusCell.innerHTML = '<span class="px-2 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">In Progress</span>'; | |
| } else { | |
| statusCell.innerHTML = '<span class="px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">Shift Active</span>'; | |
| } | |
| row.appendChild(typeCell); | |
| row.appendChild(startCell); | |
| row.appendChild(endCell); | |
| row.appendChild(durationCell); | |
| row.appendChild(statusCell); | |
| elements.breakHistory.appendChild(row); | |
| }); | |
| } | |
| // Show location warning | |
| function showLocationWarning() { | |
| elements.locationWarning.classList.remove('hidden'); | |
| setTimeout(() => { | |
| elements.locationWarning.classList.add('hidden'); | |
| }, 5000); | |
| } | |
| // Show success modal | |
| function showSuccessModal(title, message) { | |
| elements.modalTitle.textContent = title; | |
| elements.modalMessage.textContent = message; | |
| elements.successModal.classList.remove('hidden'); | |
| } | |
| // Simulate location check (in a real app, this would use Geolocation API) | |
| function simulateLocationCheck() { | |
| // Randomly toggle location status for demo purposes | |
| setInterval(() => { | |
| state.inLocation = Math.random() > 0.2; // 80% chance of being in location | |
| if (!state.inLocation) { | |
| elements.checkInBtn.classList.add('hidden'); | |
| elements.checkOutBtn.classList.add('hidden'); | |
| showLocationWarning(); | |
| } else { | |
| updateUI(); // Show buttons again if in location | |
| } | |
| }, 10000); | |
| } | |
| // Initialize the app when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', init); | |
| </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=ivanhoang/break-plan" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |