123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- body {
- font-family: Arial, sans-serif;
- display: flex;
- flex-direction: column;
- align-items: center;
- height: 100vh;
- margin: 0;
- background-color: #f7f7f7;
- }
- .back-button {
- align-self: flex-start;
- margin: 20px;
- }
- .back-button button {
- padding: 10px 20px;
- border: none;
- background-color: #007bff;
- color: #fff;
- border-radius: 5px;
- cursor: pointer;
- }
- .upload-container {
- text-align: center;
- border: 2px dashed #007bff;
- padding: 20px;
- border-radius: 10px;
- background-color: #fff;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- }
- .drop-zone {
- border: 2px dashed #007bff;
- border-radius: 10px;
- padding: 20px;
- margin-top: 10px;
- cursor: pointer;
- background-color: #f9f9f9;
- }
- .drop-zone.dragover {
- background-color: #e2eefd;
- }
- button {
- margin-top: 20px;
- padding: 10px 20px;
- border: none;
- background-color: #007bff;
- color: #fff;
- border-radius: 5px;
- cursor: pointer;
- }
- button:disabled {
- background-color: #cccccc;
- }
- #status {
- margin-top: 20px;
- color: red;
- }
- @media (max-width: 600px) {
- .upload-container {
- width: 90%;
- }
- .back-button {
- margin: 10px;
- }
- .back-button button {
- padding: 8px 16px;
- }
- }
|