diff --git a/data/rfid.css b/data/rfid.css index 58791b7..693b653 100644 --- a/data/rfid.css +++ b/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,') 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; } - \ No newline at end of file + } \ No newline at end of file diff --git a/data/rfid.html b/data/rfid.html index 3c8bbe6..3f0c299 100644 --- a/data/rfid.html +++ b/data/rfid.html @@ -47,8 +47,11 @@