| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Welder Tracking System</title> |
| <link rel="manifest" href="/manifest.json"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| :root { |
| --steel-blue: #4682B4; |
| --slate-gray: #708090; |
| --light-steel: #B0C4DE; |
| } |
| body { |
| font-family: 'Segoe UI', system-ui, sans-serif; |
| background-color: #f8fafc; |
| } |
| .panel { |
| background-color: white; |
| border: 1px solid #e2e8f0; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| } |
| .input-field { |
| border: 1px solid #cbd5e1; |
| transition: border-color 0.2s; |
| } |
| .input-field:focus { |
| border-color: var(--steel-blue); |
| outline: none; |
| } |
| .btn-primary { |
| background-color: var(--steel-blue); |
| color: white; |
| transition: background-color 0.2s; |
| } |
| .btn-primary:hover { |
| background-color: #3a6d96; |
| } |
| .btn-secondary { |
| background-color: var(--slate-gray); |
| color: white; |
| transition: background-color 0.2s; |
| } |
| .btn-secondary:hover { |
| background-color: #5f6e7e; |
| } |
| .completed-plan { |
| border-left: 4px solid #10b981; |
| } |
| .month-divider { |
| background-color: var(--light-steel); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex flex-col"> |
| |
| <div class="fixed top-0 left-0 right-0 bg-white shadow-sm z-10 p-4 flex items-center"> |
| <a href="index.html" class="mr-4 text-gray-600 hover:text-gray-800"> |
| <i data-feather="home"></i> |
| </a> |
| <input type="text" placeholder="Add welder's name" class="input-field flex-1 px-4 py-2 rounded-l"> |
| <button class="btn-primary px-4 py-2 rounded-r"> |
| <i data-feather="plus" class="mr-2"></i>Add |
| </button> |
| <div class="ml-auto flex space-x-2"> |
| <button class="btn-secondary px-3 py-2 rounded"> |
| <i data-feather="download" class="mr-2"></i>Import |
| </button> |
| <button class="btn-secondary px-3 py-2 rounded"> |
| <i data-feather="upload" class="mr-2"></i>Export |
| </button> |
| </div> |
| </div> |
|
|
| |
| <main class="flex-1 mt-20 mb-24 p-4 overflow-y-auto"> |
| |
| <div id="welders-list" class="space-y-2"> |
| |
| </div> |
| </main> |
|
|
| |
| <div class="fixed bottom-0 left-0 right-0 bg-white shadow-md z-10 p-4"> |
| <button id="plan-btn" class="btn-primary w-full py-3 rounded flex items-center justify-center"> |
| <i data-feather="clipboard" class="mr-2"></i>Plan |
| </button> |
| </div> |
|
|
| <script> |
| |
| feather.replace(); |
| |
| async function loadWelders() { |
| try { |
| const response = await fetch('http://localhost:8080/welders'); |
| const welders = await response.json(); |
| |
| const weldersList = document.getElementById('welders-list'); |
| welders.forEach(welder => { |
| const welderItem = document.createElement('div'); |
| welderItem.className = 'panel p-4 rounded-lg cursor-pointer transition hover:bg-gray-50'; |
| welderItem.innerHTML = ` |
| <div class="flex items-center"> |
| <i data-feather="user" class="text-gray-500 mr-3"></i> |
| <span class="font-medium">${welder.name}</span> |
| <i data-feather="chevron-right" class="ml-auto text-gray-400"></i> |
| </div> |
| `; |
| welderItem.addEventListener('click', () => { |
| window.location.href = `welder-card.html?id=${welder.id}`; |
| }); |
| weldersList.appendChild(welderItem); |
| }); |
| feather.replace(); |
| } catch (error) { |
| console.error('Error loading welders:', error); |
| } |
| } |
| |
| |
| document.querySelector('button.btn-primary').addEventListener('click', async () => { |
| const input = document.querySelector('input'); |
| const name = input.value.trim(); |
| |
| if (name) { |
| try { |
| const response = await fetch('http://localhost:8080/welders', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ name }), |
| }); |
| |
| if (response.ok) { |
| input.value = ''; |
| document.getElementById('welders-list').innerHTML = ''; |
| await loadWelders(); |
| } |
| } catch (error) { |
| console.error('Error adding welder:', error); |
| } |
| } |
| }); |
| |
| |
| loadWelders(); |
| |
| document.getElementById('plan-btn').addEventListener('click', () => { |
| window.location.href = 'plan.html'; |
| }); |
| |
| |
| if ('serviceWorker' in navigator) { |
| window.addEventListener('load', () => { |
| navigator.serviceWorker.register('/sw.js') |
| .then(registration => { |
| console.log('ServiceWorker registration successful'); |
| }) |
| .catch(err => { |
| console.log('ServiceWorker registration failed: ', err); |
| }); |
| }); |
| } |
| </script> |
| </body> |
| </html> |
