From e99bdea48dd12f29eb4a459aaebff3b02ef51380 Mon Sep 17 00:00:00 2001
From: AlexChard <alexchard2014@gmail.com>
Date: Sat, 29 Aug 2026 13:10:05 +0400
Subject: [PATCH] Add panel preview

---
 assets/panel-preview.html | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 assets/panel-preview.html
diff --git a/assets/panel-preview.html b/assets/panel-preview.html
new file mode 100644
index 0000000..a8074f2
--- /dev/null
+++ b/assets/panel-preview.html
@@ -0,0 +1,34 @@
+<!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>
