Spaces:
Running
Running
| body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: #f4f7f9; color: #333; margin: 0; padding: 20px; } | |
| .container { width: 100%; max-width: 800px; background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); margin: 20px auto; } | |
| header { text-align: center; border-bottom: 2px solid #e0e0e0; padding-bottom: 20px; margin-bottom: 30px; } | |
| header h1 { color: #0056b3; margin: 0; } | |
| h2 { color: #0056b3; margin-top: 30px; margin-bottom: 15px; border-top: 1px solid #eee; padding-top: 20px; } | |
| h2:first-of-type { margin-top: 0; border-top: none; padding-top: 0; } | |
| textarea, input[type="text"] { width: 100%; padding: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; box-sizing: border-box; margin-bottom: 15px; } | |
| textarea#reportBody { height: 200px; resize: vertical; } | |
| button { display: inline-block; width: auto; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; margin-top: 15px; transition: background-color: 0.3s; } | |
| button:hover { background-color: #0056b3; } | |
| button:disabled { background-color: #a0c3e6; cursor: not-allowed; } | |
| #uploadForm button { width: 100%; padding: 15px; margin-top: 0; } | |
| .result-container, .history-container, .reports-container { background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 5px; padding: 1px 20px; min-height: 50px; } | |
| .history-entry, .report-entry { border-bottom: 1px solid #eee; padding: 15px 0; } | |
| .history-entry:last-child, .report-entry:last-child { border-bottom: none; } | |
| .report-entry h3 { margin: 0; color: #0056b3; } | |
| .report-entry p { margin: 5px 0 0 0; font-size: 14px; } | |
| #uploadStatus { margin-top: 15px; font-size: 14px; } | |
| footer { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 2px solid #e0e0e0; font-size: 14px; color: #777; } | |
| /* ... (all your existing CSS rules) ... */ | |
| /* NEW: Styles for the modal pop-up */ | |
| .modal { | |
| display: none; /* Hidden by default */ | |
| position: fixed; /* Stay in place */ | |
| z-index: 1000; /* Sit on top */ | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: auto; /* Enable scroll if needed */ | |
| background-color: rgba(0,0,0,0.5); /* Black w/ opacity */ | |
| } | |
| .modal-content { | |
| background-color: #fefefe; | |
| margin: 10% auto; /* 10% from the top and centered */ | |
| padding: 30px; | |
| border: 1px solid #888; | |
| width: 80%; | |
| max-width: 700px; | |
| border-radius: 10px; | |
| position: relative; | |
| } | |
| .modal-close-button { | |
| color: #aaa; | |
| position: absolute; | |
| top: 15px; | |
| right: 25px; | |
| font-size: 28px; | |
| font-weight: bold; | |
| } | |
| .modal-close-button:hover, | |
| .modal-close-button:focus { | |
| color: black; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| #modalTitle { | |
| margin-top: 0; | |
| padding-top: 0; | |
| border-top: none; | |
| } | |
| .modal-body-container { | |
| background-color: #f8f9fa; | |
| border: 1px solid #e0e0e0; | |
| border-radius: 5px; | |
| padding: 20px; | |
| max-height: 50vh; /* Set a max height */ | |
| overflow-y: auto; /* Add vertical scrollbar if content overflows */ | |
| white-space: pre-wrap; /* Respects line breaks and spaces */ | |
| font-family: monospace; | |
| } |