diff --git a/frontend/assets/style.css b/frontend/assets/style.css new file mode 100644 index 0000000..bb0eb2c --- /dev/null +++ b/frontend/assets/style.css @@ -0,0 +1,128 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Inter, Arial, sans-serif; + background: #0b1020; + color: #fff; +} + +.layout { + display: flex; + min-height: 100vh; +} + +.sidebar { + width: 260px; + background: #121a31; + padding: 24px; + border-right: 1px solid rgba(255,255,255,0.08); +} + +.logo h1 { + margin: 0; + font-size: 28px; +} + +.logo span { + color: #8ea0c9; + font-size: 13px; +} + +.sidebar nav { + margin-top: 32px; + display: flex; + flex-direction: column; + gap: 12px; +} + +.sidebar nav a { + text-decoration: none; + color: #fff; + padding: 12px; + border-radius: 12px; + background: rgba(255,255,255,0.04); +} + +.sidebar nav a:hover { + background: rgba(255,255,255,0.08); +} + +.content { + flex: 1; + padding: 24px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 20px; +} + +.card { + background: #131d38; + border-radius: 20px; + padding: 24px; + box-shadow: 0 8px 30px rgba(0,0,0,0.3); +} + +.card h2 { + margin-top: 0; +} + +textarea, +input { + width: 100%; + border: none; + border-radius: 14px; + padding: 14px; + margin-top: 12px; + background: #0d1428; + color: #fff; +} + +textarea { + min-height: 180px; + resize: vertical; +} + +button { + margin-top: 16px; + border: none; + border-radius: 14px; + padding: 14px 20px; + background: linear-gradient(135deg,#4f46e5,#7c3aed); + color: #fff; + font-weight: bold; + cursor: pointer; +} + +button:hover { + opacity: 0.92; +} + +pre { + margin-top: 16px; + padding: 16px; + border-radius: 14px; + background: #0a1020; + overflow-x: auto; + white-space: pre-wrap; +} + +.status-grid { + display: grid; + grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); + gap: 16px; +} + +.status-item { + background: rgba(255,255,255,0.04); + padding: 16px; + border-radius: 16px; +} + +.status-item span { + display: block; + color: #90a2c9; + margin-bottom: 8px; +}