35 lines
5.7 KiB
HTML
35 lines
5.7 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>WEB Proxy — Панель</title>
|
||
<style>
|
||
*{box-sizing:border-box} :root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#f5f7ff;background:#080b16}
|
||
body{margin:0;min-width:320px;background:radial-gradient(circle at 82% 8%,#35246b55,transparent 28%),radial-gradient(circle at 40% 90%,#075a7355,transparent 35%),#080b16}
|
||
.shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}
|
||
aside{padding:28px 16px;border-right:1px solid #ffffff10;background:linear-gradient(180deg,#10152aee,#0b0e1ddd)}
|
||
.brand{display:flex;gap:12px;align-items:center;margin:3px 8px 42px}.logo{display:grid;place-items:center;width:44px;height:44px;border:1px solid #65dfff35;border-radius:14px;background:linear-gradient(135deg,#7658ff,#2bcce2);font-weight:850}.brand b{display:block;font-size:13px;letter-spacing:.08em}.brand small{display:block;margin-top:2px;color:#9ca9c9;font-size:11px}
|
||
nav{display:grid;gap:8px}.nav{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid transparent;border-radius:13px;color:#aeb9d4;text-decoration:none}.nav.active{color:#fff;border-color:#a894ff35;background:linear-gradient(100deg,#7b5cff29,#2ccce51a)}.nav span{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#ffffff09}.nav.active span{background:#8b70ff}
|
||
main{min-width:0;padding:42px clamp(22px,4vw,64px)}.top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:26px}.top h1{margin:0;font-size:clamp(28px,3vw,38px);letter-spacing:-.045em}.top p{margin:7px 0 0;color:#94a3c4}.status{padding:9px 13px;border:1px solid #65efad35;border-radius:99px;background:#65efad12;color:#82f5b8;font-size:12px}
|
||
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{margin-bottom:16px;padding:21px;border:1px solid #ffffff12;border-radius:18px;background:linear-gradient(135deg,#161b32e8,#0e1223e8);box-shadow:0 18px 50px #0002}.card small{color:#9aa7c4}.value{margin-top:5px;font-size:27px;font-weight:760}.section{margin-top:4px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.section h2{margin:0;font-size:17px}.button{padding:10px 15px;border:0;border-radius:11px;background:linear-gradient(135deg,#7658ff,#2bcce2);box-shadow:0 9px 22px #6548bd3b;color:#fff;font-weight:700}
|
||
.user{display:grid;grid-template-columns:1.2fr 1fr auto;gap:14px;align-items:center;padding:15px 0;border-top:1px solid #ffffff0c}.user:first-of-type{border-top:0}.name b{display:block}.name small,.secret{color:#909dbc}.secret{font:12px ui-monospace,SFMono-Regular,Consolas,monospace}.actions{display:flex;gap:7px}.secondary,.danger{padding:8px 11px;border:1px solid #ffffff1c;border-radius:9px;background:#202741;color:#f7f8ff}.danger{border-color:#ff7aa433;background:#321b2d;color:#ffb2c7}
|
||
@media(max-width:760px){.shell{grid-template-columns:1fr}aside{padding:14px 18px;border-right:0;border-bottom:1px solid #ffffff10}.brand{margin:0 0 14px}nav{grid-template-columns:repeat(3,1fr)}.nav{justify-content:center}.nav b{display:none}main{padding:28px 18px}.metrics{grid-template-columns:1fr}.user{grid-template-columns:1fr}.secret{word-break:break-all}.actions{justify-content:flex-start}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="shell">
|
||
<aside><div class="brand"><div class="logo">W</div><div><b>WEB PROXY</b><small>Панель управления</small></div></div><nav><a class="nav active" href="#"><span>◉</span><b>Пользователи</b></a><a class="nav" href="#"><span>⚙</span><b>Настройки</b></a><a class="nav" href="#"><span>↪</span><b>Выйти</b></a></nav></aside>
|
||
<main>
|
||
<div class="top"><div><h1>Пользователи</h1><p>Ссылки и доступ к вашему WEB Proxy.</p></div><div class="status">● Всё работает</div></div>
|
||
<div class="metrics"><div class="card"><small>Активные доступы</small><div class="value">3</div></div><div class="card"><small>Домен</small><div class="value" style="font-size:18px">proxy.example.com</div></div><div class="card"><small>HTTPS</small><div class="value" style="color:#82f5b8">Активен</div></div></div>
|
||
<section class="card section"><div class="section-head"><div><h2>Доступы</h2><small>Отдельная ссылка для каждого человека</small></div><button class="button">＋ Добавить</button></div>
|
||
<div class="user"><div class="name"><b>Основной</b><small>Создан при установке</small></div><div class="secret">7d8a••••••••••••••••••••92f1</div><div class="actions"><button class="secondary">Ссылка</button><button class="secondary">QR</button></div></div>
|
||
<div class="user"><div class="name"><b>Иван</b><small>Персональный доступ</small></div><div class="secret">b492••••••••••••••••••••14aa</div><div class="actions"><button class="secondary">Ссылка</button><button class="secondary">QR</button><button class="danger">Удалить</button></div></div>
|
||
<div class="user"><div class="name"><b>Ноутбук</b><small>Персональный доступ</small></div><div class="secret">f010••••••••••••••••••••88c3</div><div class="actions"><button class="secondary">Ссылка</button><button class="secondary">QR</button><button class="danger">Удалить</button></div></div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</body>
|
||
</html>
|