| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Time Logger with Export</title> |
| <style> |
| body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 40px; background-color: #f4f4f9; } |
| .card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; width: 350px; } |
| button { padding: 12px 24px; font-size: 16px; cursor: pointer; border: none; border-radius: 6px; transition: 0.2s; margin: 5px; } |
| .log-btn { background: #28a745; color: white; width: 100%; font-weight: bold; } |
| .log-btn:active { transform: scale(0.98); } |
| .export-btn { background: #007bff; color: white; font-size: 14px; } |
| .clear-btn { background: #f8d7da; color: #721c24; font-size: 12px; } |
| #logDisplay { margin-top: 20px; height: 150px; border: 1px solid #eee; overflow-y: auto; padding: 10px; background: #fafafa; font-family: monospace; text-align: left; font-size: 13px; } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="card"> |
| <h2>Time Logger</h2> |
| <button class="log-btn" onclick="logTime()">LOG CURRENT TIME</button> |
| |
| <div id="logDisplay"></div> |
|
|
| <div style="margin-top: 15px;"> |
| <button class="export-btn" onclick="exportToFile()">Download .txt File</button> |
| <br> |
| <button class="clear-btn" onclick="clearLogs()">Clear Browser Cache</button> |
| </div> |
| </div> |
|
|
| <script> |
| const logDisplay = document.getElementById('logDisplay'); |
| |
| |
| window.onload = displayLogs; |
| |
| function logTime() { |
| const timestamp = new Date().toLocaleString(); |
| let logs = JSON.parse(localStorage.getItem('buttonPresses')) || []; |
| logs.push(timestamp); |
| localStorage.setItem('buttonPresses', JSON.stringify(logs)); |
| displayLogs(); |
| } |
| |
| function displayLogs() { |
| const logs = JSON.parse(localStorage.getItem('buttonPresses')) || []; |
| logDisplay.innerHTML = logs.map(t => `<div>> ${t}</div>`).reverse().join(''); |
| } |
| |
| function exportToFile() { |
| const logs = JSON.parse(localStorage.getItem('buttonPresses')) || []; |
| if (logs.length === 0) { |
| alert("No logs to export!"); |
| return; |
| } |
| |
| |
| const fileContent = logs.join('\n'); |
| |
| |
| const blob = new Blob([fileContent], { type: 'text/plain' }); |
| |
| |
| const link = document.createElement('a'); |
| link.href = URL.createObjectURL(blob); |
| link.download = 'my_button_logs.txt'; |
| |
| |
| link.click(); |
| URL.revokeObjectURL(link.href); |
| } |
| |
| function clearLogs() { |
| if(confirm("This will wipe the browser's memory for this page. Continue?")) { |
| localStorage.removeItem('buttonPresses'); |
| displayLogs(); |
| } |
| } |
| </script> |
| </body> |
| </html> |
