change alter zu geburtsdatum

data/rfid.css

@@ -1,4 +1,4 @@
-* {
+ * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
@@ -130,49 +130,6 @@
             transform: translateY(-2px);
         }
 
-        .data-table {
-            margin-top: 30px;
-            background: #f8f9fa;
-            border-radius: 10px;
-            padding: 20px;
-            max-height: 300px;
-            overflow-y: auto;
-        }
-
-        .data-table h3 {
-            color: #333;
-            margin-bottom: 15px;
-            text-align: center;
-        }
-
-        .data-entry {
-            background: white;
-            padding: 15px;
-            margin-bottom: 10px;
-            border-radius: 8px;
-            border-left: 4px solid #667eea;
-            animation: fadeIn 0.3s ease-out;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateX(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-
-        .data-entry strong {
-            color: #333;
-        }
-
-        .data-entry span {
-            color: #666;
-        }
-
         .success-message {
             background: #d4edda;
             color: #155724;
@@ -183,13 +140,6 @@
             animation: fadeIn 0.3s ease-out;
         }
 
-        .counter {
-            text-align: center;
-            margin-top: 15px;
-            color: #666;
-            font-weight: 600;
-        }
-
         .read-uid-btn {
             background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
             color: white;
@@ -228,6 +178,52 @@
             50% { transform: scale(1.05); }
             100% { transform: scale(1); }
         }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateX(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+
+        /* Geburtsdatum Styling */
+        .date-input-group {
+            position: relative;
+        }
+
+        .date-input-group input[type="date"] {
+            position: relative;
+            color-scheme: light;
+        }
+
+        .date-input-group input[type="date"]::-webkit-calendar-picker-indicator {
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23667eea" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>') no-repeat;
+            background-size: contain;
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+        }
+
+        .age-display {
+            position: absolute;
+            right: 15px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: #667eea;
+            font-weight: 600;
+            font-size: 0.9em;
+            pointer-events: none;
+            background: rgba(255, 255, 255, 0.9);
+            padding: 2px 8px;
+            border-radius: 4px;
+            border: 1px solid #e1e5e9;
+        }
+
+        @media (max-width: 600px) {
             .container {
                 padding: 30px 20px;
                 margin: 10px;
@@ -236,4 +232,4 @@
             .btn-container {
                 flex-direction: column;
             }
-        
+        }

data/rfid.html

@@ -47,8 +47,11 @@
             </div>
 
             <div class="form-group">
-                <label for="alter">Alter <span class="required">*</span></label>
+                <label for="geburtsdatum">Geburtsdatum <span class="required">*</span></label>
-                <input type="number" id="alter" name="alter" placeholder="Alter eingeben" min="1" max="120" required>
+                <div class="date-input-group">
+                    <input type="date" id="geburtsdatum" name="geburtsdatum" required max="">
+                    <div id="ageDisplay" class="age-display" style="display: none;"></div>
+                </div>
             </div>
 
             <div class="btn-container">
@@ -60,11 +63,55 @@
     </div>
 
     <script>
-                
         // Globale Variablen
         let rfidData = [];
         let isLoading = false;
 
+        // Maximales Datum auf heute setzen
+        document.addEventListener('DOMContentLoaded', function() {
+            const today = new Date().toISOString().split('T')[0];
+            document.getElementById('geburtsdatum').setAttribute('max', today);
+        });
+
+        // Alter berechnen und anzeigen
+        function calculateAge(birthDate) {
+            const today = new Date();
+            const birth = new Date(birthDate);
+            let age = today.getFullYear() - birth.getFullYear();
+            const monthDiff = today.getMonth() - birth.getMonth();
+            
+            if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
+                age--;
+            }
+            
+            return age;
+        }
+
+        // Geburtsdatum Change Event
+        document.getElementById('geburtsdatum').addEventListener('change', function(e) {
+            const birthDate = e.target.value;
+            const ageDisplay = document.getElementById('ageDisplay');
+            
+            if (birthDate) {
+                const age = calculateAge(birthDate);
+                if (age >= 0 && age <= 150) {
+                    ageDisplay.textContent = `${age} Jahre`;
+                    ageDisplay.style.display = 'block';
+                } else {
+                    ageDisplay.style.display = 'none';
+                    if (age < 0) {
+                        showErrorMessage('Das Geburtsdatum kann nicht in der Zukunft liegen!');
+                        e.target.value = '';
+                    } else {
+                        showErrorMessage('Bitte überprüfen Sie das Geburtsdatum!');
+                        e.target.value = '';
+                    }
+                }
+            } else {
+                ageDisplay.style.display = 'none';
+            }
+        });
+
         // Form Submit Handler
         document.getElementById('rfidForm').addEventListener('submit', async function(e) {
             e.preventDefault();
@@ -75,14 +122,21 @@
             const uid = document.getElementById('uid').value.trim();
             const vorname = document.getElementById('vorname').value.trim();
             const nachname = document.getElementById('nachname').value.trim();
-            const alter = parseInt(document.getElementById('alter').value);
+            const geburtsdatum = document.getElementById('geburtsdatum').value;
 
             // Validierung
-            if (!uid || !vorname || !nachname || !alter) {
+            if (!uid || !vorname || !nachname || !geburtsdatum) {
                 showErrorMessage('Bitte füllen Sie alle Pflichtfelder aus!');
                 return;
             }
 
+            // Alter berechnen
+            const alter = calculateAge(geburtsdatum);
+            if (alter < 0) {
+                showErrorMessage('Das Geburtsdatum kann nicht in der Zukunft liegen!');
+                return;
+            }
+
             // Loading State
             setLoadingState(true);
 
@@ -97,7 +151,8 @@
                         uid: uid,
                         vorname: vorname,
                         nachname: nachname,
-                        alter: alter
+                        geburtsdatum: geburtsdatum,
+                        alter: alter // Berechnetes Alter wird mit gesendet
                     })
                 });
 
@@ -127,7 +182,6 @@
             }
         });
         
-
         function showSuccessMessage(message = 'Daten erfolgreich gespeichert!') {
             const successMsg = document.getElementById('successMessage');
             successMsg.textContent = `✅ ${message}`;
@@ -182,6 +236,7 @@
 
         function clearForm() {
             document.getElementById('rfidForm').reset();
+            document.getElementById('ageDisplay').style.display = 'none';
             document.getElementById('uid').focus();
         }
 
@@ -272,27 +327,27 @@
                 // Button Status zurücksetzen
                 readBtn.disabled = false;
                 readBtn.className = 'read-uid-btn';
-                readBtn.innerHTML = '📡 Read UID';
+                readBtn.innerHTML = '📡 Read Chip';
             }
         }
 
-    async function checkServerStatus() {
+        async function checkServerStatus() {
-    try {
+            try {
-        const response = await fetch('/api/health');
+                const response = await fetch('/api/health');
-        const data = await response.json();
+                const data = await response.json();
-        
+                
-        if (!data.status || data.status !== 'connected') {
+                if (!data.status || data.status !== 'connected') {
-            showErrorMessage('Server nicht verbunden. Einige Funktionen könnten eingeschränkt sein.');
+                    showErrorMessage('Server nicht verbunden. Einige Funktionen könnten eingeschränkt sein.');
-            return false;
+                    return false;
+                }
+                
+                return true;
+            } catch (error) {
+                console.error('Server Status Check fehlgeschlagen:', error);
+                showErrorMessage('Verbindung zum Server nicht möglich.');
+                return false;
+            }
         }
-        
-        return true;
-    } catch (error) {
-        console.error('Server Status Check fehlgeschlagen:', error);
-        showErrorMessage('Verbindung zum Server nicht möglich.');
-        return false;
-    }
-}
     </script>
 </body>
 </html>