|
|
| body {
|
| margin: 0;
|
| font-family: Arial, sans-serif;
|
| background-color: #b6edf0;
|
| }
|
|
|
| h1.title {
|
| text-align: center;
|
| font-size: 48px;
|
| font-weight: bold;
|
| color: #333;
|
| margin-top: 20px;
|
| }
|
|
|
|
|
| .container {
|
| display: flex;
|
| flex-direction: row;
|
| padding: 10px;
|
| margin: 10px;
|
| gap: 10px;
|
| }
|
|
|
|
|
| .left-panel {
|
| background-color: #ffffff;
|
| width: 240px;
|
| padding: 10px;
|
| border-radius: 20px;
|
| text-align: center;
|
| padding-top: 90px;
|
| }
|
|
|
| .left-panel img {
|
| width: 220px;
|
| height: 260px;
|
| border-radius: 10px;
|
| margin-top: 60px;
|
| }
|
|
|
|
|
| .center-panel {
|
| flex-grow: 1;
|
| background-color: #b0dde9;
|
| border-radius: 20px;
|
| padding: 10px;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| }
|
|
|
|
|
| .top-label textarea {
|
| width: 97%;
|
| height: 100px;
|
| font-size: 14px;
|
| font-family: Arial, sans-serif;
|
| background-color: #f0f0f0;
|
| border-radius: 10px;
|
| border: 1px solid #ccc;
|
| padding: 12px;
|
| resize: none;
|
| }
|
|
|
|
|
| .qa-section {
|
| display: flex;
|
| gap: 10px;
|
| }
|
|
|
| .input-area, .output-area {
|
| flex: 1;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 5px;
|
| background-color: #ffffff;
|
| padding: 10px;
|
| border-radius: 20px;
|
| }
|
|
|
| textarea {
|
| resize: none;
|
| font-family: Arial, sans-serif;
|
| font-size: 14px;
|
| padding: 10px;
|
| border-radius: 10px;
|
| border: 1px solid #ccc;
|
| min-height: 180px;
|
| background-color: #f9fbe7;
|
| }
|
|
|
|
|
| .button-panel {
|
| display: flex;
|
| flex-wrap: wrap;
|
| justify-content: space-between;
|
| gap: 10px;
|
| padding: 10px;
|
| background-color: #ffffff;
|
| border-radius: 20px;
|
| }
|
|
|
| .button-panel button {
|
| flex: 1;
|
| min-width: 140px;
|
| height: 45px;
|
| border: none;
|
| font-size: 14px;
|
| font-weight: bold;
|
| border-radius: 25px;
|
| cursor: pointer;
|
| transition: 0.2s ease-in-out;
|
| }
|
|
|
| .button-panel button:hover {
|
| transform: scale(1.05);
|
| }
|
|
|
|
|
| .button-panel button:nth-child(1) { background-color: #80deea; color: black; }
|
| .button-panel button:nth-child(2) { background-color: #c5e1a5; color: black; }
|
| .button-panel button:nth-child(3) { background-color: #ffccbc; color: black; }
|
| .button-panel button:nth-child(4) { background-color: #8ad5d5; color: black; }
|
| .button-panel button:nth-child(5) { background-color: #ffe082; color: black; }
|
| .button-panel button:nth-child(6) { background-color: #d7ccc8; color: black; }
|
|
|
|
|
| .right-panel {
|
| width: 300px;
|
| background-color: #9ed4dc;
|
| border-radius: 20px;
|
| padding: 10px;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| }
|
|
|
| .right-panel label {
|
| font-weight: bold;
|
| }
|
|
|
| #history {
|
| flex: 1;
|
| height: 500px;
|
| resize: none;
|
| border-radius: 10px;
|
| padding: 10px;
|
| font-family: Consolas, monospace;
|
| font-size: 13px;
|
| border: 1px solid #ccc;
|
| background-color: #ffffff;
|
| overflow-y: auto;
|
| }
|
|
|
