Spaces:
Running
Running
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f8f9fa; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| width: 80%; | |
| margin: 20px auto; | |
| background-color: #fff; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .header { | |
| background-color: #007bff; | |
| color: #fff; | |
| padding: 15px; | |
| text-align: center; | |
| font-size: 1.5em; | |
| border-top-left-radius: 8px; | |
| border-top-right-radius: 8px; | |
| } | |
| .form-container { | |
| padding: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .form-group label { | |
| font-weight: bold; | |
| } | |
| .form-group input, | |
| .form-group select { | |
| width: 100%; | |
| padding: 8px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| box-sizing: border-box; | |
| } | |
| .form-group input[type="password"] { | |
| font-family: monospace; /* Maintain font style for API key input */ | |
| } | |
| .form-group button { | |
| background-color: #007bff; | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 1em; | |
| } | |
| .form-group button:hover { | |
| background-color: #0056b3; | |
| } | |
| .error-message { | |
| margin-top: 20px; | |
| padding: 15px; | |
| background-color: #f8d7da; | |
| border: 1px solid #f5c6cb; | |
| border-radius: 8px; | |
| color: #721c24; | |
| } | |
| .result-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 20px; | |
| overflow: hidden; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.1); | |
| border-radius: 8px; | |
| } | |
| .result-table th, | |
| .result-table td { | |
| border: 1px solid #ddd; | |
| padding: 12px; | |
| text-align: left; | |
| white-space: nowrap; | |
| } | |
| .result-table th { | |
| background-color: #f2f2f2; | |
| } | |
| .result-table td { | |
| vertical-align: top; | |
| } | |
| .llm-output { | |
| padding: 20px; | |
| margin-top: 20px; | |
| background-color: #f8f9fa; | |
| border-bottom-left-radius: 8px; | |
| border-bottom-right-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| } | |
| .llm-output h3 { | |
| margin-top: 0; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .llm-output pre { | |
| white-space: pre-wrap; | |
| padding: 10px; | |
| background-color: #fff; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| overflow-x: auto; | |
| } | |