| body { |
| font-family: 'Roboto', sans-serif; background: linear-gradient(270deg, rgb(44, 13, 58), rgb(13, 58, 56)); color: white; text-align: center; margin: 0; padding: 50px; |
| } |
| h1 { |
| font-size: 40px; |
| background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44); |
| -webkit-text-fill-color: transparent; |
| -webkit-background-clip: text; |
| font-weight: bold; |
| } |
| |
| #upload-container, #upload-container2, #upload-container3 { |
| background: rgba(255, 255, 255, 0.2); padding: 20px; margin-bottom: 30px; width: 70%; border-radius: 10px; display: inline-block; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3); |
| } |
| #upload, #upload2, #upload3 { |
| font-size: 18px; padding: 10px; border-radius: 5px; border: none; background: #fff; cursor: pointer; |
| } |
| |
| #loader { |
| margin-top: 10px; margin-left: auto; margin-right: auto; width: 60px; height: 60px; font-size: 12px; text-align: center; |
| } |
| p { |
| margin-top: 10px; font-size: 12px; color: #3498db; |
| } |
| #spinner { |
| border: 8px solid #f3f3f3; border-top: 8px solid rgb(117 7 7); border-radius: 50%; animation: spin 1s linear infinite; width: 40px; height: 40px; margin: auto; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| #outputVideo { |
| margin-top: 20px; width: 70%; margin-left: auto; margin-right: auto; max-width: 640px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3); |
| } |
| #downloadBtn { |
| display: block; visibility: hidden; width: 20%; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 10px 15px; font-size: 16px; background: #27ae60; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; |
| } |
| #downloadBtn:hover { |
| background: #950606; |
| } |
| #checkAnimalBtn { |
| display: block; width: 20%; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 10px 15px; font-size: 16px; background: #2752ae; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; |
| } |
| #checkAnimalBtn:hover { |
| background: #8127ae; |
| } |
| #checkTrashBtn { |
| display: block; width: 20%; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 10px 15px; font-size: 16px; background: #147712; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; |
| } |
| #checkTrashBtn:hover { |
| background: #105e5d; |
| } |
| .hidden { |
| display: none; |
| } |
| @media (max-width: 860px) { |
| h1 { font-size: 30px; } |
| } |
| @media (max-width: 720px) { |
| h1 { font-size: 25px; } |
| #upload { font-size: 15px; } |
| #downloadBtn { font-size: 13px; } |
| } |
| @media (max-width: 580px) { |
| h1 { font-size: 20px; } |
| #upload { font-size: 10px; } |
| #downloadBtn { font-size: 10px; } |
| } |
| @media (max-width: 580px) { |
| h1 { font-size: 10px; } |
| } |
| @media (max-width: 460px) { |
| #upload { font-size: 7px; } |
| } |
| @media (max-width: 400px) { |
| h1 { font-size: 14px; } |
| } |
| @media (max-width: 370px) { |
| h1 { font-size: 11px; } |
| #upload { font-size: 5px; } |
| #downloadBtn { font-size: 7px; } |
| } |
| @media (max-width: 330px) { |
| h1 { font-size: 8px; } |
| #upload { font-size: 3px; } |
| #downloadBtn { font-size: 5px; } |
| } |
