diff --git a/data/rfid.css b/data/rfid.css new file mode 100644 index 0000000..131f1a4 --- /dev/null +++ b/data/rfid.css @@ -0,0 +1,242 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} + +.container { + background: rgba(255, 255, 255, 0.95); + padding: 40px; + border-radius: 20px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(10px); + width: 100%; + max-width: 500px; + animation: slideIn 0.5s ease-out; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.header { + text-align: center; + margin-bottom: 30px; +} + +.header h1 { + color: #333; + font-size: 2em; + margin-bottom: 10px; +} + +.header p { + color: #666; + font-size: 1.1em; +} + +.form-group { + margin-bottom: 25px; + position: relative; +} + +.form-group label { + display: block; + margin-bottom: 8px; + color: #333; + font-weight: 600; + font-size: 1em; +} + +.form-group input { + width: 100%; + padding: 15px; + border: 2px solid #e1e5e9; + border-radius: 10px; + font-size: 1em; + transition: all 0.3s ease; + background: #fff; +} + +.form-group input:focus { + outline: none; + border-color: #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); + transform: translateY(-2px); +} + +.form-group input:hover { + border-color: #667eea; +} + +.required { + color: #e74c3c; +} + +.btn-container { + display: flex; + gap: 15px; + margin-top: 30px; +} + +.btn { + flex: 1; + padding: 15px 25px; + border: none; + border-radius: 10px; + font-size: 1.1em; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.btn-primary { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); +} + +.btn-secondary { + background: #f8f9fa; + color: #666; + border: 2px solid #e1e5e9; +} + +.btn-secondary:hover { + background: #e9ecef; + transform: translateY(-2px); +} + +.success-message { + background: #d4edda; + color: #155724; + padding: 15px; + border-radius: 8px; + margin-bottom: 20px; + border: 1px solid #c3e6cb; + animation: fadeIn 0.3s ease-out; +} + +.read-uid-btn { + background: linear-gradient(135deg, #28a745 0%, #20c997 100%); + color: white; + border: none; + padding: 15px 20px; + border-radius: 10px; + font-size: 0.9em; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 0.5px; + white-space: nowrap; + min-width: 120px; +} + +.read-uid-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 16px rgba(40, 167, 69, 0.3); +} + +.read-uid-btn:disabled { + background: #6c757d; + cursor: not-allowed; + transform: none; + box-shadow: none; +} + +.read-uid-btn.reading { + background: linear-gradient(135deg, #fd7e14 0%, #e83e8c 100%); + animation: pulse 1.5s infinite; +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 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; + } + + .btn-container { + flex-direction: column; + } +} diff --git a/data/rfid.html b/data/rfid.html new file mode 100644 index 0000000..31b65ca --- /dev/null +++ b/data/rfid.html @@ -0,0 +1,451 @@ + + +
+ + + + + +Erfassen Sie RFID-Tag Informationen
+