|
| 1 | +* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Courier New', monospace; } |
| 2 | +html, body { height: 100vh; overflow: hidden; background: #000; color: #0f0; display: flex; flex-direction: column; align-items: center; touch-action: manipulation; } |
| 3 | +body.glow { background: rgba(255, 0, 0, 0.1); box-shadow: 0 0 20px #ff0000; } |
| 4 | +body.train-glow { background: rgba(255, 255, 0, 0.1); box-shadow: 0 0 20px #ff0; } |
| 5 | +h1 { font-size: 1.6rem; text-align: center; margin: 0.8rem 0; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 5px #0f0; } |
| 6 | +#console { width: 90%; max-width: 900px; background: rgba(0, 255, 0, 0.1); border: 1px solid #0f0; padding: 0.6rem; flex: 1; max-height: calc(100vh - 380px); overflow-y: auto; margin: 0.5rem 0; border-radius: 5px; font-size: 0.8rem; position: relative; z-index: 5; } |
| 7 | +#console.active-monitor { border-color: #ff0000; box-shadow: 0 0 10px #ff0000; } |
| 8 | +#console.active-train { border-color: #ff0; box-shadow: 0 0 10px #ff0; } |
| 9 | +#console p { margin: 0.2rem 0; } |
| 10 | +#console .command { font-weight: 700; text-shadow: 0 0 3px #0f0; } |
| 11 | +#console .error { color: #ff0000; text-shadow: 0 0 3px #ff0000; } |
| 12 | +#console .balance { color: #00f; text-shadow: 0 0 3px #00f; position: sticky; bottom: 0; background: rgba(0, 0, 0, 0.8); padding: 0.2rem; z-index: 6; } |
| 13 | +#error-notification { display: none; position: fixed; top: 10px; right: 10px; background: rgba(255, 0, 0, 0.8); color: #fff; padding: 0.5rem; border-radius: 3px; font-size: 0.8rem; max-width: 300px; z-index: 1000; box-shadow: 0 0 10px #ff0000; } |
| 14 | +#error-notification.visible { display: block; } |
| 15 | +#api-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 500px; background: #000; border: 2px solid #0f0; padding: 1rem; border-radius: 5px; z-index: 2000; box-shadow: 0 0 20px #0f0; color: #0f0; } |
| 16 | +#api-popup.visible { display: block; } |
| 17 | +#api-popup textarea { width: 100%; height: 100px; background: #000; border: 1px solid #0f0; color: #0f0; padding: 0.5rem; font-size: 0.9rem; border-radius: 3px; resize: none; } |
| 18 | +#api-popup button { background: #0f0; color: #000; border: none; padding: 0.5rem 1rem; font-size: 0.9rem; cursor: pointer; border-radius: 3px; margin-top: 0.5rem; } |
| 19 | +#api-popup button:hover { background: #0c0; } |
| 20 | +.button-group { display: flex; gap: 0.5rem; margin: 0.5rem 0; flex-wrap: wrap; justify-content: center; width: 90%; max-width: 900px; z-index: 10; } |
| 21 | +button { background: #0f0; color: #000; border: none; padding: 0.6rem 1.2rem; font-size: 0.9rem; cursor: pointer; border-radius: 3px; min-width: 90px; } |
| 22 | +button:hover, button:focus { background: #0c0; outline: 2px solid #0f0; } |
| 23 | +button.active-monitor { background: #ff0000; box-shadow: 0 0 10px #ff0000; } |
| 24 | +button.active-train { background: #ff0; color: #000; box-shadow: 0 0 10px #ff0; } |
| 25 | +button:disabled { background: #666; cursor: not-allowed; } |
| 26 | +#prompt-input { width: 90%; max-width: 900px; background: #000; border: 1px solid #0f0; color: #0f0; padding: 0.6rem; font-size: 0.9rem; border-radius: 3px; margin: 0.5rem 0; } |
| 27 | +#vial-status-bars { width: 90%; max-width: 900px; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.2rem; z-index: 10; } |
| 28 | +.progress-container { display: flex; align-items: center; gap: 0.4rem; } |
| 29 | +.progress-label { width: 90px; font-size: 0.75rem; color: #0f0; } |
| 30 | +.progress-bar { flex: 1; height: 8px; background: #333; border: 1px solid #0f0; border-radius: 3px; overflow: hidden; } |
| 31 | +.progress-fill { height: 100%; background: #0f0; transition: width 0.5s; } |
| 32 | +.progress-fill.offline-grey { background: #666; } |
| 33 | +.progress-fill.training { background: #ff0; } |
| 34 | +.progress-fill.offline { background: #f00; } |
| 35 | +.status-text { font-size: 0.75rem; width: 250px; text-align: right; } |
| 36 | +.status-text.online { color: #0f0; } |
| 37 | +.status-text.training { color: #ff0; } |
| 38 | +.status-text.offline-grey { color: #666; } |
| 39 | +.status-text.offline { color: #f00; } |
| 40 | +footer { width: 100%; padding: 0.4rem; font-size: 9pt; text-align: center; color: #0f0; background: rgba(0, 0, 0, 0.8); z-index: 10; } |
| 41 | +#file-input { display: none; } |
| 42 | +@media (max-width: 600px) { |
| 43 | + h1 { font-size: 1.1rem; margin: 0.5rem 0; } |
| 44 | + #console { font-size: 0.75rem; padding: 0.5rem; max-height: calc(100vh - 380px); } |
| 45 | + button { padding: 0.5rem 1rem; font-size: 0.85rem; min-width: 80px; } |
| 46 | + #prompt-input, #api-popup textarea { font-size: 0.85rem; padding: 0.5rem; } |
| 47 | + .progress-label { width: 70px; font-size: 0.7rem; } |
| 48 | + .progress-bar { height: 7px; } |
| 49 | + .status-text { font-size: 0.7rem; width: 200px; } |
| 50 | + #error-notification, #api-popup { font-size: 0.7rem; max-width: 250px; } |
| 51 | +} |
| 52 | +@media (max-width: 400px) { |
| 53 | + .button-group { flex-direction: column; align-items: center; } |
| 54 | + button { width: 100%; max-width: 160px; } |
| 55 | + #console { max-height: calc(100vh - 320px); } |
| 56 | + .status-text { width: 150px; } |
| 57 | +} |
0 commit comments