| #camera-feed, #captured-image { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| border: 1px solid black; |
| } |
|
|
| .scan-effect { |
| position: absolute; |
| top: -100%; |
| left: 0; |
| width: 100%; |
| height: 10px; |
| background: linear-gradient(to bottom, |
| rgba(0,255,255,0) 0%, |
| rgba(0,255,255,0.8) 50%, |
| rgba(0,255,255,0) 100%); |
| opacity: 0; |
| box-shadow: 0 0 10px rgba(0,255,255,0.5); |
| } |
|
|
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
|
|
| .pulse { |
| animation: pulse 2s infinite; |
| } |
|
|
| button { |
| margin: 10px 0; |
| padding: 10px 20px; |
| font-size: 16px; |
| } |
|
|
| input[type="text"] { |
| margin: 10px 0; |
| padding: 5px; |
| font-size: 16px; |
| } |
|
|
| .camera-container { |
| position: relative; |
| overflow: hidden; |
| border-radius: 0.5rem; |
| width: 320px; |
| height: 240px; |
| margin: 20px auto; |
| } |
|
|
| body { |
| background-image: url('/images/background.jpg'); |
| background-size: cover; |
| background-position: center; |
| background-repeat: no-repeat; |
| } |
|
|
| .bg-transparent { |
| background-color: rgba(128, 128, 128, 0); |
| } |
|
|
|
|
| @font-face { |
| font-family: 'GeistMono'; |
| src: url('/static/fonts/GeistMono-Black.ttf') format('truetype'); |
| font-weight: normal; |
| font-style: normal; |
| } |
|
|
| .icon-geistmono { |
| font-family: 'GeistMono', monospace; |
| } |
