diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000..79c0041 --- /dev/null +++ b/static/index.html @@ -0,0 +1,32 @@ + + + + + + Robo Arena — РСУ + + + +
+
+
🤖
+
Robo Arena / РСУ
+

Удалённая система управления боевыми роботами

+

Прототип личного кабинета для мониторинга арены, дистанционного управления роботами и ведения боевого журнала в реальном времени.

+
+
⚔ Управление роботами ONLINE
+
📡 Телеметрия арены LIVE
+
🛡 Защищённый доступ TLS
+
+
+
+
+

Добро пожаловать, пилот

+

Войдите или зарегистрируйтесь, чтобы управлять своими роботами на арене

+ Войти в систему + Стать пилотом +
+
+
+ + diff --git a/static/login.html b/static/login.html new file mode 100644 index 0000000..5f9ef31 --- /dev/null +++ b/static/login.html @@ -0,0 +1,79 @@ + + + + + + Вход — Robo Arena + + + +
+
+
⚔
+
Robo Arena / РСУ
+

Вход пилота

+

Управляйте боевыми роботами, следите за телеметрией и ведите журнал сражений из любой точки мира.

+
+
🤖 Роботы в арене READY
+
📊 Журнал боёв LOG
+
+
+
+
+

Авторизация

+

Введите данные своего аккаунта пилота

+ +
+ + +
+ +
+ + +
+ + +

+ +
Нет аккаунта? Стать пилотом
+
+
+
+ + + + diff --git a/static/profile.html b/static/profile.html new file mode 100644 index 0000000..e86af29 --- /dev/null +++ b/static/profile.html @@ -0,0 +1,234 @@ + + + + + + Robo Arena — Профиль пилота + + + + + + +
+ +
+ + + + + +
+
+
⚔ Профиль пилота
+

Данные оператора

+

Заполните личную информацию для участия в системе управления боевыми роботами

+
+ +
+ +
+
+ 📋 + Личные данные +
+ +
+ +
+ 👤 + +
+
+ +
+
+ +
+ 🎂 + +
+
+ +
+ +
+ ⚧ + +
+
+
+
+ +
+
+ 📞 + Контакты +
+ +
+ +
+ 📱 + +
+ Формат: +7 или 8, минимум 7 цифр +
+
+ +
+ + ← На арену +
+ +

+

+
+
+ +
+
+ + + + diff --git a/static/register.html b/static/register.html new file mode 100644 index 0000000..f893cc2 --- /dev/null +++ b/static/register.html @@ -0,0 +1,79 @@ + + + + + + Регистрация — Robo Arena + + + +
+
+
🛡
+
Robo Arena / РСУ
+

Регистрация пилота

+

Один аккаунт — неограниченное количество боевых роботов под вашим управлением на арене.

+
+
⚡ Развёртывание роботов INSTANT
+
🔧 Управление мощностью 0–100%
+
+
+
+
+

Новый пилот

+

Создайте аккаунт — после регистрации заполните профиль

+ +
+ + +
+ +
+ + +
+ + +

+ +
Уже есть аккаунт? Войти
+
+
+
+ + + + diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..b62f883 --- /dev/null +++ b/static/style.css @@ -0,0 +1,1335 @@ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +:root { + --bg: #0a0e17; + --bg-soft: #111827; + --surface: #151c2c; + --surface-2: #1a2236; + --navy: #0f172a; + --navy-soft: #1e293b; + --accent: #f97316; + --accent-h: #ea580c; + --accent-glow: rgba(249, 115, 22, .35); + --cyan: #22d3ee; + --cyan-dim: #0891b2; + --text: #f1f5f9; + --muted: #94a3b8; + --border: #2a3548; + --on: #22c55e; + --off: #64748b; + --err: #ef4444; + --warn: #fbbf24; + --radius: 12px; + --mono: "Consolas", "Fira Code", "JetBrains Mono", monospace; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; + background: var(--bg); + background-image: + radial-gradient(ellipse 80% 50% at 50% -20%, rgba(249, 115, 22, .12), transparent), + radial-gradient(ellipse 60% 40% at 100% 100%, rgba(34, 211, 238, .06), transparent); + color: var(--text); + min-height: 100vh; +} + +/* Сетка и фон для страниц приложения */ +.page-app { + background-color: var(--bg); + /* background-image: */ + radial-gradient(ellipse 70% 45% at 15% -5%, rgba(249, 115, 22, .14), transparent), + radial-gradient(ellipse 50% 35% at 95% 90%, rgba(34, 211, 238, .08), transparent), + linear-gradient(rgba(42, 53, 72, .25) 1px, transparent 1px), + linear-gradient(90deg, rgba(42, 53, 72, .25) 1px, transparent 1px); + background-size: auto, auto, 32px 32px, 32px 32px; +} + +/* ── AUTH LAYOUT ───────────────────────────────── */ +.auth-wrap { + display: flex; + min-height: 100vh; +} + +.auth-panel { + width: 400px; + flex-shrink: 0; + background: linear-gradient(160deg, #0f172a 0%, #1a0a00 50%, #0f172a 100%); + border-right: 1px solid var(--border); + display: flex; + flex-direction: column; + justify-content: center; + padding: 48px 40px; + color: #fff; + position: relative; + overflow: hidden; +} + +.auth-panel::before { + content: ""; + position: absolute; + inset: 0; + background: + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(249, 115, 22, .03) 2px, + rgba(249, 115, 22, .03) 4px + ); + pointer-events: none; +} + +.auth-panel .robot-icon { + font-size: 48px; + margin-bottom: 16px; + filter: drop-shadow(0 0 20px var(--accent-glow)); +} + +.auth-panel .sys-label { + font-family: var(--mono); + font-size: 11px; + letter-spacing: .14em; + color: var(--accent); + text-transform: uppercase; + margin-bottom: 16px; +} + +.auth-panel h1 { + font-size: 26px; + font-weight: 800; + line-height: 1.25; + color: #fff; + margin-bottom: 16px; +} + +.auth-panel p { + font-size: 14px; + color: var(--muted); + line-height: 1.65; +} + +.auth-panel .arena-stats { + margin-top: 40px; + display: flex; + flex-direction: column; + gap: 10px; +} + +.auth-panel .arena-stat { + display: flex; + align-items: center; + gap: 10px; + font-size: 13px; + color: var(--muted); +} + +.auth-panel .arena-stat span { + color: var(--cyan); + font-family: var(--mono); + font-weight: 700; +} + +.auth-form-area { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 40px 24px; +} + +.auth-box { + width: 100%; + max-width: 400px; +} + +.auth-box h2 { + font-size: 24px; + font-weight: 800; + margin-bottom: 6px; +} + +.auth-box .sub { + color: var(--muted); + font-size: 14px; + margin-bottom: 32px; +} + +/* ── FORM ELEMENTS ─────────────────────────────── */ +label { + display: block; + font-size: 13px; + font-weight: 600; + color: var(--muted); + margin-bottom: 6px; + text-transform: uppercase; + letter-spacing: .04em; +} + +.field { margin-bottom: 18px; } + +input[type="text"], +input[type="email"], +input[type="password"], +input[type="number"], +input[type="date"], +input[type="tel"], +select { + width: 100%; + padding: 12px 14px; + border: 1.5px solid var(--border); + border-radius: var(--radius); + font-size: 14px; + color: var(--text); + background: var(--surface); + outline: none; + transition: border-color .15s, box-shadow .15s; +} + +select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 14px center; + padding-right: 36px; +} + +input:focus, select:focus { + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-glow); +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 12px 20px; + border: none; + border-radius: var(--radius); + font-size: 14px; + font-weight: 700; + cursor: pointer; + text-decoration: none; + transition: background .15s, transform .1s, box-shadow .15s; + letter-spacing: .02em; +} + +.btn:active { transform: scale(.98); } + +.btn-primary { + background: linear-gradient(135deg, var(--accent), var(--accent-h)); + color: #fff; + width: 100%; + box-shadow: 0 4px 20px var(--accent-glow); +} + +.btn-primary:hover { + background: linear-gradient(135deg, #fb923c, var(--accent)); + box-shadow: 0 6px 28px var(--accent-glow); +} + +.btn-ghost { + background: var(--surface-2); + color: var(--text); + border: 1.5px solid var(--border); +} + +.btn-ghost:hover { + background: var(--border); + border-color: var(--muted); +} + +.btn-sm { + padding: 8px 14px; + font-size: 12px; +} + +.btn-danger { background: rgba(239, 68, 68, .15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .3); } +.btn-danger:hover { background: rgba(239, 68, 68, .25); } + +.btn-success { background: rgba(34, 197, 94, .15); color: #86efac; border: 1px solid rgba(34, 197, 94, .3); } +.btn-success:hover { background: rgba(34, 197, 94, .25); } + +.btn-cyan { + background: rgba(34, 211, 238, .12); + color: var(--cyan); + border: 1px solid rgba(34, 211, 238, .3); +} +.btn-cyan:hover { background: rgba(34, 211, 238, .22); } + +.link-row { + text-align: center; + margin-top: 20px; + font-size: 14px; + color: var(--muted); +} + +.link-row a { color: var(--accent); text-decoration: none; font-weight: 600; } +.link-row a:hover { text-decoration: underline; } + +.err-msg { + color: #fca5a5; + font-size: 13px; + margin-top: 12px; + min-height: 18px; + text-align: center; +} + +.ok-msg { + color: #86efac; + font-size: 13px; + margin-top: 12px; + min-height: 18px; + text-align: center; +} + +/* ── TOPBAR ────────────────────────────────────── */ +.topbar { + background: rgba(15, 23, 42, .92); + backdrop-filter: blur(12px); + height: 58px; + display: flex; + align-items: center; + padding: 0 28px; + gap: 12px; + position: sticky; + top: 0; + z-index: 10; + border-bottom: 1px solid var(--border); +} + +.topbar-brand { + font-family: var(--mono); + font-size: 13px; + color: var(--muted); + letter-spacing: .06em; + flex: 1; + display: flex; + align-items: center; + gap: 8px; +} + +.topbar-brand .logo-icon { font-size: 18px; } + +.topbar-brand span { + color: var(--accent); + font-weight: 800; +} + +.topbar-pilot { + font-size: 13px; + color: var(--cyan); + font-weight: 600; + max-width: 200px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.topbar-user { + font-size: 12px; + color: var(--muted); + font-family: var(--mono); +} + +.topbar .btn-sm { + background: var(--surface-2); + color: var(--text); + border: 1px solid var(--border); +} + +.topbar .btn-sm:hover { + background: var(--border); + border-color: var(--accent); + color: var(--accent); +} + +.topbar .btn-sm.active-nav { + border-color: var(--accent); + color: var(--accent); +} + +/* ── MAIN LAYOUT ───────────────────────────────── */ +.main { + max-width: 960px; + margin: 0 auto; + padding: 28px 20px 60px; +} + +/* ── ARENA HERO ────────────────────────────────── */ +.arena-hero { + background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); + border: 1.5px solid var(--border); + border-radius: var(--radius); + padding: 24px 28px; + margin-bottom: 48px; + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + position: relative; + overflow: hidden; +} +.arena-hero-text{ + display: flex;flex-direction: column;gap: 4px; + align-items: center; + justify-content: center; +} + +.arena-hero::after { + content: ""; + position: absolute; + right: -40px; + top: -40px; + width: 180px; + height: 180px; + background: radial-gradient(circle, var(--accent-glow), transparent 70%); + pointer-events: none; +} + +.arena-hero-text h2 { + font-size: 22px; + font-weight: 800; + margin-bottom: 4px; +} + +.arena-hero-text p { + font-size: 14px; + color: var(--muted); +} + +.arena-stats-row { + display: flex; + gap: 20px; + flex-shrink: 0; + justify-content: space-between; + padding: 4px; + margin-top: 20px; +} + +.stat-card{ + border: 1.5px solid var(--border); + border-radius: var(--radius); + padding: 12px; + text-align: center; + min-width: 128px; + min-height: 72px; +} + +.arena-stat-box { + text-align: center; + min-width: 72px; +} + +.arena-stat-box .num { + font-family: var(--mono); + font-size: 28px; + font-weight: 800; + color: var(--accent); + line-height: 1; +} + +.arena-stat-box .lbl { + font-size: 11px; + color: var(--muted); + text-transform: uppercase; + letter-spacing: .06em; + margin-top: 4px; +} + +.arena-stat-box .num.green { color: var(--on); } +.arena-stat-box .num.red { color: var(--err); } + +/* ── PROFILE BANNER ────────────────────────────── */ +.profile-banner { + background: rgba(249, 115, 22, .1); + border: 1.5px solid rgba(249, 115, 22, .35); + border-radius: var(--radius); + padding: 14px 20px; + margin-bottom: 24px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + font-size: 14px; +} + +.profile-banner p { color: var(--muted); } +.profile-banner strong { color: var(--accent); } + +/* ── SECTION HEAD ──────────────────────────────── */ +.section-head { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} + +.section-title { + font-size: 13px; + font-weight: 800; + color: var(--muted); + text-transform: uppercase; + letter-spacing: .1em; + display: flex; + align-items: center; + gap: 8px; +} + +/* ── ADD FORM ──────────────────────────────────── */ +.add-form { + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: var(--radius); + padding: 20px; + display: flex; + gap: 12px; + align-items: flex-end; + margin-bottom: 28px; +} + +.add-form .field { flex: 1; margin: 0; } +.add-form .field label { margin-bottom: 6px; display: block; } +.add-form input { margin: 0; } +.add-form .btn { white-space: nowrap; width: auto; } + +/* ── ROBOT CARDS ───────────────────────────────── */ +.cards-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 16px; +} + +.obj-card { + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: var(--radius); + overflow: hidden; + transition: box-shadow .2s, border-color .2s; +} + +.obj-card:hover { + box-shadow: 0 8px 32px rgba(0, 0, 0, .4); + border-color: #3a4558; +} + +.obj-card-body { + border-left: 4px solid var(--off); + padding: 18px 20px; + transition: border-color .3s; +} + +.obj-card-body.is-on { + border-left-color: var(--on); + background: linear-gradient(90deg, rgba(34, 197, 94, .06) 0%, transparent 60%); +} + +.obj-card-body.is-err { + border-left-color: var(--err); + background: linear-gradient(90deg, rgba(239, 68, 68, .06) 0%, transparent 60%); +} + +.obj-card-body.is-off { border-left-color: var(--off); } + +.obj-head { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 8px; +} + +.robot-emoji { + font-size: 22px; + flex-shrink: 0; + filter: drop-shadow(0 0 8px rgba(249, 115, 22, .3)); +} + +.status-dot { + width: 9px; height: 9px; + border-radius: 50%; + flex-shrink: 0; + background: var(--off); +} + +.status-dot.is-on { + background: var(--on); + animation: pulse 2s ease-in-out infinite; +} + +.status-dot.is-err { background: var(--err); animation: pulse-err 1.5s ease-in-out infinite; } + +@keyframes pulse { + 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } + 50% { opacity: .85; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } +} + +@keyframes pulse-err { + 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); } + 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } +} + +.obj-name { + font-weight: 800; + font-size: 16px; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.status-badge { + font-family: var(--mono); + font-size: 10px; + font-weight: 800; + letter-spacing: .08em; + text-transform: uppercase; + padding: 4px 10px; + border-radius: 20px; +} + +.status-badge.is-on { background: rgba(34, 197, 94, .15); color: #86efac; border: 1px solid rgba(34, 197, 94, .3); } +.status-badge.is-off { background: rgba(100, 116, 139, .15); color: #94a3b8; border: 1px solid rgba(100, 116, 139, .3); } +.status-badge.is-err { background: rgba(239, 68, 68, .15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .3); } + +.obj-value { + font-family: var(--mono); + font-size: 13px; + color: var(--muted); + margin-bottom: 14px; +} + +.power-bar-wrap { + height: 6px; + background: var(--border); + border-radius: 3px; + margin-bottom: 14px; + overflow: hidden; +} + +.power-bar { + height: 100%; + border-radius: 3px; + background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); + transition: width .4s ease; +} + +.obj-controls { + display: flex; + flex-wrap: wrap; + gap: 6px; + align-items: center; +} + +.obj-controls input { + width: 88px; + padding: 8px 10px; + font-size: 13px; +} + +/* ── HISTORY ───────────────────────────────────── */ +.history-panel { + border-top: 1.5px solid var(--border); + padding: 12px 20px; + background: var(--bg-soft); + max-height: 180px; + overflow-y: auto; +} + +.history-row { + display: flex; + gap: 8px; + align-items: baseline; + padding: 5px 0; + border-bottom: 1px solid var(--border); + font-size: 12px; +} + +.history-row:last-child { border-bottom: none; } + +.history-src { + font-family: var(--mono); + font-size: 10px; + padding: 2px 7px; + border-radius: 4px; + background: rgba(34, 211, 238, .12); + color: var(--cyan); + flex-shrink: 0; +} + +.history-src.ext { background: rgba(249, 115, 22, .12); color: var(--accent); } + +.history-status { font-weight: 700; flex-shrink: 0; } +.history-val { color: var(--muted); flex-shrink: 0; } +.history-time { color: #64748b; margin-left: auto; font-family: var(--mono); font-size: 11px; } + +/* ── EMPTY STATE ───────────────────────────────── */ +.empty { + grid-column: 1/-1; + text-align: center; + padding: 56px 16px; + color: var(--muted); + border: 2px dashed var(--border); + border-radius: var(--radius); + font-size: 15px; +} + +.empty .empty-icon { font-size: 40px; margin-bottom: 12px; opacity: .6; } +.empty strong { display: block; margin-bottom: 6px; font-size: 18px; color: var(--text); } + +/* ── PROFILE PAGE ──────────────────────────────── */ +.profile-card { + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: var(--radius); + padding: 32px; + max-width: 520px; + margin: 0 auto; +} + +.profile-card h2 { + font-size: 22px; + font-weight: 800; + margin-bottom: 6px; +} + +.profile-card .sub { + color: var(--muted); + font-size: 14px; + margin-bottom: 28px; +} + +.profile-card .btn-primary { margin-top: 8px; } + +.profile-badge { + display: inline-flex; + align-items: center; + gap: 6px; + background: rgba(34, 211, 238, .1); + border: 1px solid rgba(34, 211, 238, .25); + color: var(--cyan); + font-size: 12px; + font-weight: 700; + padding: 5px 12px; + border-radius: 20px; + margin-bottom: 20px; + text-transform: uppercase; + letter-spacing: .06em; +} + +.profile-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0 16px; +} + +.profile-grid .field.full { grid-column: 1 / -1; } + +/* ── RESPONSIVE ────────────────────────────────── */ +@media (max-width: 640px) { + .auth-panel { display: none; } + .auth-form-area { padding: 32px 20px; align-items: flex-start; padding-top: 60px; } + .topbar { padding: 0 14px; gap: 8px; } + .topbar-pilot, .topbar-user { display: none; } + .arena-hero { flex-direction: column; align-items: flex-start; } + .arena-stats-row { width: 100%; justify-content: space-around; } + .add-form { flex-direction: column; } + .add-form .btn { width: 100%; } + .profile-grid { grid-template-columns: 1fr; } + .profile-banner { flex-direction: column; align-items: flex-start; } +} + +.section-title{ +margin-top: 40px; +} + +.panel-header{ + margin-top: 80px; + display: flex; + gap: 8px; +} +.deploy-form{ + margin-top: 20px; + display: flex;flex-direction: column;gap: 24px; + +} + + + + + + + + + + + + +.main--profile { + max-width: 1040px; +} + +.profile-layout { + display: grid; + grid-template-columns: 280px 1fr; + gap: 24px; + align-items: start; +} + +/* Боковая панель пилота */ +.profile-sidebar { + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: var(--radius); + padding: 32px 20px; + text-align: center; + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; +} + +/* Эффект свечения в сайдбаре */ +.profile-sidebar-glow { + position: absolute; + top: -60px; + width: 140px; + height: 140px; + background: radial-gradient(circle, var(--accent-glow), transparent 70%); + pointer-events: none; + z-index: 1; +} + +/* Аватар (цифровой индекс / первая буква) */ +.profile-avatar { + width: 80px; + height: 80px; + background: var(--surface-2); + border: 2px solid var(--border); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 32px; + font-weight: 800; + color: var(--text); + margin-bottom: 16px; + position: relative; + z-index: 2; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); + transition: border-color 0.3s, box-shadow 0.3s; +} + +.profile-sidebar:hover .profile-avatar { + border-color: var(--cyan); + box-shadow: 0 0 20px rgba(34, 211, 238, 0.2); +} + +.profile-sidebar-name { + font-size: 18px; + font-weight: 800; + margin-bottom: 4px; + color: var(--text); + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.profile-sidebar-email { + font-family: var(--mono); + font-size: 12px; + color: var(--muted); + margin-bottom: 24px; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Статус заполнения профиля (Прогресс-бар) */ +.profile-status { + width: 100%; + background: var(--bg-soft); + border: 1px solid var(--border); + border-radius: calc(var(--radius) - 4px); + padding: 14px; + margin-bottom: 24px; + text-align: left; +} + +.profile-status-label { + font-size: 11px; + text-transform: uppercase; + letter-spacing: .06em; + color: var(--muted); + margin-bottom: 8px; +} + +.profile-progress-wrap { + height: 6px; + background: var(--surface-2); + border-radius: 3px; + overflow: hidden; + margin-bottom: 6px; +} + +.profile-progress-bar { + height: 100%; + background: linear-gradient(90deg, var(--accent), var(--accent-h)); + box-shadow: 0 0 8px var(--accent-glow); + width: 0%; + transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +.profile-status-text { + font-family: var(--mono); + font-size: 11px; + color: var(--muted); + text-align: right; +} + +/* Модификатор при 100% заполнении */ +.profile-status--complete .profile-progress-bar { + background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); + box-shadow: 0 0 8px rgba(34, 211, 238, 0.4); +} + +.profile-status--complete .profile-status-text { + color: var(--cyan); + font-weight: 600; +} + +/* Подсказки в сайдбаре */ +.profile-sidebar-hints { + display: flex; + flex-direction: column; + gap: 12px; + width: 100%; + border-top: 1px solid var(--border); + padding-top: 20px; +} + +.hint-item { + display: flex; + gap: 10px; + align-items: flex-start; + text-align: left; + font-size: 12px; + color: var(--muted); + line-height: 1.4; +} + +.hint-icon { + font-size: 14px; + flex-shrink: 0; +} + +/* Карточка основной формы */ +.profile-form-card { + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: var(--radius); + padding: 32px; +} + +.profile-form-header { + border-bottom: 1px solid var(--border); + padding-bottom: 24px; + margin-bottom: 24px; +} + +.profile-form-header h2 { + font-size: 24px; + font-weight: 800; + margin-bottom: 6px; + color: var(--text); +} + +.profile-form-header .sub { + color: var(--muted); + font-size: 14px; +} + +/* Секции формы */ +.form-section { + margin-bottom: 28px; +} + +.form-section-title { + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .06em; + color: var(--cyan); + margin-bottom: 16px; + display: flex; + align-items: center; + gap: 8px; + border-bottom: 1px solid rgba(42, 53, 72, 0.4); + padding-bottom: 6px; +} + +.form-section-icon { + font-size: 16px; +} + +/* Поля ввода с иконками */ +.form-field { + margin-bottom: 18px; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; +} + +.input-wrap { + position: relative; + display: flex; + align-items: center; +} + +.input-wrap .input-icon { + position: absolute; + left: 14px; + font-size: 15px; + color: var(--muted); + pointer-events: none; + z-index: 2; +} + +/* Смещение текста внутри input из-за иконки */ +.input-wrap input, +.input-wrap select { + padding-left: 40px; +} + +.field-hint { + display: block; + font-size: 11px; + color: var(--muted); + margin-top: 6px; + font-family: var(--mono); +} + +/* Кнопки управления и футер формы */ +.form-actions { + display: flex; + align-items: center; + gap: 16px; + border-top: 1px solid var(--border); + padding-top: 24px; + margin-top: 12px; +} + +.form-actions .btn-primary { + width: auto; + min-width: 200px; +} + +.btn-back { + font-weight: 600; +} + +/* Переопределение стилей для заблокированной кнопки во время отправки */ +.btn:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none !important; +} + +/* Адаптивность для мобильных экранов */ +@media (max-width: 840px) { + .profile-layout { + grid-template-columns: 1fr; + } + .profile-sidebar { + padding: 24px; + } + .form-row { + grid-template-columns: 1fr; + gap: 0; + } +} + +@media (max-width: 480px) { + .profile-form-card { + padding: 20px; + } + .form-actions { + flex-direction: column; + align-items: stretch; + } + .form-actions .btn { + width: 100%; + justify-content: center; + } +} + + + + + + + + + + + + + +/* ── ROBOT DYNAMIC CARDS (ДОПОЛНЕНИЕ) ─────────── */ + +/* Сетка для карточек */ +.cards-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 20px; + margin-top: 16px; +} + +/* Сама карточка робота */ +.obj-card { + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: var(--radius); + overflow: hidden; + display: flex; + flex-direction: column; + transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease; + position: relative; +} + +.obj-card:hover { + border-color: rgba(249, 115, 22, 0.4); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 15px rgba(249, 115, 22, 0.05); + transform: translateY(-2px); +} + +/* Декоративная верхняя цветная полоса состояния */ +.obj-card-top { + height: 4px; + width: 100%; + background: var(--off); + transition: background-color 0.3s; +} +.obj-card-top.is-on { background: linear-gradient(90deg, var(--on), #4ade80); } +.obj-card-top.is-off { background: var(--off); } +.obj-card-top.is-err { background: var(--err); } + +/* Тело карточки */ +.obj-card-body { + padding: 20px; + display: flex; + flex-direction: column; + gap: 18px; + flex: 1; +} + +/* Шапка внутри карточки */ +.obj-head { + display: flex; + align-items: center; + gap: 12px; +} + +/* Аватар робота */ +.robot-avatar { + width: 42px; + height: 42px; + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 22px; + flex-shrink: 0; + box-shadow: inset 0 0 8px rgba(0,0,0,0.3); +} + +/* Информация о роботе */ +.obj-info { + display: flex; + flex-direction: column; + gap: 2px; + flex: 1; + min-width: 0; /* предотвращает раздувание от длинного текста */ +} + +.obj-name { + font-weight: 800; + font-size: 16px; + color: var(--text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.obj-meta { + font-family: var(--mono); + font-size: 11px; + color: var(--muted); +} + +/* Бейдж статуса */ +.status-badge { + display: inline-flex; + align-items: center; + gap: 6px; + font-family: var(--mono); + font-size: 11px; + font-weight: 700; + padding: 4px 10px; + border-radius: 20px; + border: 1px solid transparent; + text-transform: uppercase; + letter-spacing: .02em; +} + +.status-badge.is-on { + background: rgba(34, 197, 94, 0.1); + color: #86efac; + border-color: rgba(34, 197, 94, 0.25); +} + +.status-badge.is-off { + background: rgba(100, 116, 139, 0.12); + color: #94a3b8; + border-color: rgba(100, 116, 139, 0.25); +} + +.status-badge.is-err { + background: rgba(239, 68, 68, 0.1); + color: #fca5a5; + border-color: rgba(239, 68, 68, 0.25); +} + +/* Точка статуса внутри бейджа */ +.status-dot { + width: 7px; + height: 7px; + border-radius: 50%; + display: inline-block; +} +.status-dot.is-on { background: var(--on); box-shadow: 0 0 8px var(--on); } +.status-dot.is-off { background: var(--off); } +.status-dot.is-err { background: var(--err); box-shadow: 0 0 8px var(--err); } + +/* Блок секции мощности */ +.power-section { + background: var(--bg-soft); + border: 1px solid var(--border); + border-radius: 8px; + padding: 10px 12px; +} + +.power-header { + display: flex; + justify-content: space-between; + font-size: 12px; + font-weight: 600; + color: var(--muted); + margin-bottom: 6px; + text-transform: uppercase; + letter-spacing: .04em; +} + +.power-value { + font-family: var(--mono); + color: var(--cyan); + font-weight: 700; +} + +/* Органы управления (Кнопки внутри карточки) */ +.obj-controls { + display: flex; + flex-direction: column; + gap: 10px; +} + +.controls-row { + display: flex; + gap: 8px; + align-items: center; +} + +/* Основной ряд управления (Бой / Стоп) */ +.controls-row--primary .btn { + flex: 1; + min-width: 100px; +} + +/* Дополнительный ряд управления */ +.controls-row--secondary { + justify-content: geopolitical; +} + +.controls-row--secondary .btn[data-action="set"] { + padding-left: 12px; + padding-right: 12px; +} + +.controls-row--secondary .btn[data-action="history"] { + flex: 1; +} + +/* Опасная кнопка удаления карточки (крестик) */ +.controls-row--secondary .btn-danger { + padding: 8px 12px; + flex-shrink: 0; +} + +/* Компактное поле ввода числовых значений % */ +.input-wrap--compact { + width: 90px; + position: relative; + display: flex; + align-items: center; +} + +.input-wrap--compact input[type="number"] { + padding: 8px 24px 8px 10px; + font-size: 13px; + font-family: var(--mono); + text-align: center; + border-radius: var(--radius); + height: 33px; /* Выравнивание высоты под маленькие кнопки */ +} + +/* Спиннеры (стрелочки вверх-вниз в инпуте) скрываем для компактности */ +.input-wrap--compact input::-webkit-outer-spin-button, +.input-wrap--compact input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.input-wrap--compact .input-suffix { + position: absolute; + right: 10px; + font-size: 12px; + font-family: var(--mono); + color: var(--muted); + pointer-events: none; +} + +/* Панель истории/журнала внутри карточки */ +.history-panel { + border-top: 1px solid var(--border); + background: var(--bg-soft); + padding: 14px 20px; + max-height: 150px; + overflow-y: auto; +} + +.history-panel-title { + font-size: 11px; + text-transform: uppercase; + letter-spacing: .06em; + color: var(--muted); + margin-bottom: 8px; + font-weight: 700; +} \ No newline at end of file