| html, | |
| body { | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| .container { | |
| margin: 40px auto; | |
| width: max(50vw, 400px); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .custom-file-upload { | |
| display: flex; | |
| align-items: center; | |
| cursor: pointer; | |
| gap: 10px; | |
| border: 2px solid black; | |
| padding: 8px 16px; | |
| cursor: pointer; | |
| border-radius: 6px; | |
| } | |
| #file-upload { | |
| display: none; | |
| } | |
| .upload-icon { | |
| width: 30px; | |
| } | |
| #image-container { | |
| width: 100%; | |
| margin-top: 20px; | |
| position: relative; | |
| } | |
| #image-container>img { | |
| width: 100%; | |
| } | |
| .bounding-box { | |
| position: absolute; | |
| box-sizing: border-box; | |
| border-width: 2px; | |
| border-style: solid; | |
| } | |
| .bounding-box-label { | |
| color: white; | |
| position: absolute; | |
| font-size: 12px; | |
| margin-top: -16px; | |
| margin-left: -2px; | |
| padding: 1px; | |
| } |