Приложение полностью офлайн, гитхаб френдли ( всегда есть проблема с абсолютными и относительными путями). С возможностью установить как нативное приложение на телефон.Стэк- WASM Cargo Leptos

.
Стиль Серо- сине - стальной, минималистичный, современный, приятный для глаз.
База данных 100мб+
1.Главный экран. Сверху слева инпут и кнопка Добавить ( добавляется в список фамилия) , справа две кнопки “Импорт”, “Экспорт”. Внизу кнопка " План" (ведёт в окно плана). Нижняя и верхняя панель зафиксированы. При вводе записи и нажатии кнопки в центре добавляется фамилия . Это вертикально скроллируемый список уходящий в невидимую область. Каждая фамилия на главной странице интерактивна и ведет в окно " Карточка сварщика" (КС) . На всех экранах кроме главного , фиксированная кнопка сверху “ На главную”.
2. План. 2.1 Нижняя фиксированная панель подписана Нормы. Слева двойной инпут для артикула и нормы времени /хт637/ 10ч/. При Вводе артикул с нормой отправляются в базу данных. В инпуте при начале ввода Норм происходит подсказка из баззы данных по совпадению. 2.2 Сверху двойной инпут и кнопка “Добавить” | хт637| 6 | . В инпоту тоже подсказка по совпадению из базы данных Норм. В инпут плана можно ввести только то, что есть в базе данных .Запись уходит в вертикальный список ( новая запись сверху) , выглядит так Хт637 6шт ……0 . С этого момента начинается отсчёт( текущий план для данного артикула) записанное количество этого артикула каждого сварщика в КС, суммируется в этот артикул. Например три сварщика выполнили хт637 по 2, в Плане артикул выглядит так Хт637 6шт……….. 6шт. Это значит план выполнен , строка подсвечивается зеленым контуром.
Если ввести в инпут количество 0, это бесконечное количество.
3. "Карточка сварщика" ( КС). Сверху фамилия сварщика, ниже строка ввода разделенная на 2 сектора для артикула и количества, например |хт637| 2 | “Добавить запись”. В этой же строке иконка календарь 📅 ( вызывает интерактивную модалку в виде календаря).
Клик по инпуту вызывает список подсказку из Плана ( текущий план), невозможно ввести артикул, которого нет в плане, или который закрыт ( план выполнен)

Добавленные артикулы формируются в центре экрана в вертикальный скроллируемый список; //последнее изменение в записи всегда сверху, допустим артикул уже в списке, он не на первом месте, но изменение (суммирование или редактирование) ставит его в верх списка, и так для всех артикулов//. Список разделен на блоки по месяцам, хт637 в августе и хт637 в сентябре не суммируются. Новый месячный блок всегда сверху, старый подписанный уходит вниз. Тап или клик по артикулу, который в списке, автоматически подставляет его в строку ввода ( если такой артикул есть в текущем плане), остается только добавить количество. Повторная запись того же артикула суммирует количество ( Например хт52 2шт , хт52 3шт в списке выглядит как хт52 5шт). Долгое нажатие в списке артикулов вызывает диалоговое окно, в котором две функции- функция редактировать артикул ( удалить артикул( корзина) или изменение количества, в соответствии с этим в текущем плане артикула автоматически происходит пересчет )и функция история изменения артикула, сколько раз он менялся и какого числа //например конечное количество хт637 8шт, в меню истории расписывается 08.08 0 -(стрелка) 2шт(добавленно 2шт), 15.08 2- 6 ( добавлено 4шт), 28.08 6- 8 ( добавленно 2шт)//. В модальных окнах история указывается только за текущий месяц, для старого артикула в старом месяце своя история.
. 5 Модалка Календарь. Там происходит распределение времени по ячейкам календаря. Лимит ячеек 8ч, время заливается в день добавления и дальше в будущее. Если в ячейке есть какое то время от прежнего ввода, настоящий ввод добавляет до 8ч и избыток распределяет дальше где есть место. Выходны пропускаются. Исключение - активированные ячейки ( долгий тап), это приоритетные ячейки наполняются временем первые, дальше по стандартной логике. Строго учесть активация не пропадает автоматически, только после повторного тапа. Конвертацию времени в количество делать не нужно, артикул и время вычитать в пропорциях. Например хт637 0,5 шт, = 50% и для количества и для времени. Перенос времени в следующий месяц= переносу такого че процента количества в новый месячный блок. Новый месячный блок формируется когда в него перетекает количество.

index.html

@@ -56,11 +56,11 @@
                     <i data-feather="compass" class="mr-2"></i>
                     Begin Exploration
                 </button>
-                <a href="wasm.html" class="px-8 py-3 bg-gradient-to-r from-blue-400 to-blue-500 text-white rounded-full font-medium hover:from-blue-500 hover:to-blue-600 transition-all duration-300 flex items-center">
-                    <i data-feather="cpu" class="mr-2"></i>
-                    WASM Demo
+                <a href="welders.html" class="px-8 py-3 bg-gradient-to-r from-blue-400 to-blue-500 text-white rounded-full font-medium hover:from-blue-500 hover:to-blue-600 transition-all duration-300 flex items-center">
+                    <i data-feather="user" class="mr-2"></i>
+                    Welder Tracking
                 </a>
-            </div>
+</div>
 </div>
         
         <div class="mt-16 text-sm text-gray-500 flex items-center">

plan.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Production Plan</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="min-h-screen bg-gray-50">
+    <!-- Fixed Top Panel -->
+    <div class="fixed top-0 left-0 right-0 bg-white shadow-sm z-10 p-4 flex items-center">
+        <a href="welders.html" class="mr-4 text-gray-600 hover:text-gray-800">
+            <i data-feather="home"></i>
+        </a>
+        <h1 class="text-xl font-semibold">Production Plan</h1>
+    </div>
+
+    <!-- Input Section -->
+    <div class="mt-16 p-4">
+        <div class="bg-white rounded-lg shadow p-4">
+            <div class="flex mb-2">
+                <input type="text" placeholder="Article" class="flex-1 p-2 border rounded-l">
+                <input type="number" placeholder="Qty" class="w-20 p-2 border-t border-b">
+                <button class="bg-blue-500 text-white px-4 rounded-r flex items-center">
+                    <i data-feather="plus" class="mr-2"></i>Add
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Plan List -->
+    <div class="p-4 space-y-4 mb-24">
+        <!-- Plan Item (Completed) -->
+        <div class="bg-white rounded-lg shadow overflow-hidden completed-plan">
+            <div class="p-4">
+                <div class="flex items-center">
+                    <div class="flex-1">
+                        <div class="font-medium">HT637</div>
+                    </div>
+                    <div class="text-green-500 font-medium">6/6</div>
+                </div>
+                <div class="mt-2 text-sm text-gray-500">
+                    <div>Johnson: 2, Smith: 2, Williams: 2</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Plan Item (In Progress) -->
+        <div class="bg-white rounded-lg shadow overflow-hidden">
+            <div class="p-4">
+                <div class="flex items-center">
+                    <div class="flex-1">
+                        <div class="font-medium">HT52</div>
+                    </div>
+                    <div class="text-gray-500">3/∞</div>
+                </div>
+                <div class="mt-2 text-sm text-gray-500">
+                    <div>Johnson: 1, Williams: 2</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Fixed Bottom Panel -->
+    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-md z-10 p-4">
+        <div class="font-medium mb-2 text-gray-700">Norms</div>
+        <div class="flex">
+            <input type="text" placeholder="Article" class="flex-1 p-2 border rounded-l">
+            <input type="text" placeholder="Time norm" class="w-24 p-2 border-t border-b">
+            <button class="bg-gray-600 text-white px-4 rounded-r flex items-center">
+                <i data-feather="plus" class="mr-2"></i>Add
+            </button>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

welder-card.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welder Card</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="min-h-screen bg-gray-50">
+    <!-- Fixed Top Panel -->
+    <div class="fixed top-0 left-0 right-0 bg-white shadow-sm z-10 p-4 flex items-center">
+        <a href="welders.html" class="mr-4 text-gray-600 hover:text-gray-800">
+            <i data-feather="home"></i>
+        </a>
+        <h1 class="text-xl font-semibold">Welder Name</h1>
+    </div>
+
+    <!-- Input Section -->
+    <div class="mt-16 p-4">
+        <div class="bg-white rounded-lg shadow p-4">
+            <div class="flex mb-2">
+                <input type="text" placeholder="Article" class="flex-1 p-2 border rounded-l">
+                <input type="number" placeholder="Qty" class="w-20 p-2 border-t border-b">
+                <button class="bg-blue-500 text-white px-4 rounded-r flex items-center">
+                    <i data-feather="plus" class="mr-2"></i>Add
+                </button>
+            </div>
+            <button class="text-gray-500 mt-2 flex items-center">
+                <i data-feather="calendar" class="mr-2"></i>Calendar
+            </button>
+        </div>
+    </div>
+
+    <!-- Articles List -->
+    <div class="p-4 space-y-4 mb-20">
+        <!-- Month Divider -->
+        <div class="bg-gray-200 px-4 py-2 rounded font-medium">August 2023</div>
+        
+        <!-- Article Items -->
+        <div class="bg-white rounded-lg shadow overflow-hidden">
+            <div class="p-4 border-b flex items-center">
+                <div class="flex-1">
+                    <div class="font-medium">HT637</div>
+                    <div class="text-sm text-gray-500">4 pieces</div>
+                </div>
+                <div class="text-green-500 font-medium">4/6</div>
+            </div>
+            <div class="p-4 flex items-center">
+                <div class="flex-1">
+                    <div class="font-medium">HT52</div>
+                    <div class="text-sm text-gray-500">3 pieces</div>
+                </div>
+                <div class="text-gray-500">3/∞</div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

welders.html

@@ -0,0 +1,140 @@
+<!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">
+    <!-- Fixed Top Panel -->
+    <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 Content -->
+    <main class="flex-1 mt-20 mb-24 p-4 overflow-y-auto">
+        <!-- Welder's List -->
+        <div id="welders-list" class="space-y-2">
+            <!-- Welder items will be added here dynamically -->
+        </div>
+    </main>
+
+    <!-- Fixed Bottom Panel -->
+    <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>
+        // Initialize feather icons
+        feather.replace();
+
+        // Sample data for demonstration
+        const welders = [
+            { id: 1, name: "Smith" },
+            { id: 2, name: "Johnson" },
+            { id: 3, name: "Williams" }
+        ];
+
+        // Render welder's list
+        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);
+        });
+
+        // Plan button click handler
+        document.getElementById('plan-btn').addEventListener('click', () => {
+            window.location.href = 'plan.html';
+        });
+
+        // Service worker registration for PWA
+        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>