775 lines
20 KiB
HTML
775 lines
20 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>VPN Proxy Route Console Redesign</title>
|
||
<style>
|
||
:root {
|
||
color-scheme: light;
|
||
--bg: oklch(0.965 0.008 232);
|
||
--surface: oklch(0.986 0.006 232);
|
||
--surface-2: oklch(0.948 0.009 232);
|
||
--surface-3: oklch(0.918 0.014 232);
|
||
--ink: oklch(0.238 0.028 238);
|
||
--muted: oklch(0.47 0.028 238);
|
||
--subtle: oklch(0.62 0.022 238);
|
||
--line: oklch(0.835 0.018 232);
|
||
--line-strong: oklch(0.72 0.032 232);
|
||
--blue: oklch(0.56 0.14 244);
|
||
--blue-soft: oklch(0.915 0.045 244);
|
||
--green: oklch(0.61 0.13 153);
|
||
--green-soft: oklch(0.915 0.052 153);
|
||
--amber: oklch(0.72 0.13 74);
|
||
--amber-soft: oklch(0.93 0.07 74);
|
||
--red: oklch(0.58 0.15 27);
|
||
--radius: 8px;
|
||
--shadow: 0 18px 42px oklch(0.36 0.035 238 / 0.13);
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-size: 14px;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
button,
|
||
input,
|
||
select {
|
||
font: inherit;
|
||
}
|
||
|
||
.page {
|
||
min-height: 100vh;
|
||
padding: 24px;
|
||
}
|
||
|
||
.shell {
|
||
max-width: 1320px;
|
||
min-height: calc(100vh - 48px);
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-rows: auto 1fr;
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
min-height: 64px;
|
||
padding: 0 22px;
|
||
border-bottom: 1px solid var(--line);
|
||
background: oklch(0.978 0.007 232);
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.mark {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 7px;
|
||
background:
|
||
linear-gradient(135deg, oklch(0.52 0.13 244), oklch(0.62 0.12 153));
|
||
position: relative;
|
||
}
|
||
|
||
.mark::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 8px;
|
||
border: 2px solid oklch(0.985 0.005 232);
|
||
border-left-color: transparent;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.brand h1 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.brand span {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.top-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.status-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-height: 32px;
|
||
padding: 0 11px;
|
||
border: 1px solid oklch(0.73 0.05 153);
|
||
border-radius: 999px;
|
||
background: var(--green-soft);
|
||
color: oklch(0.34 0.08 153);
|
||
font-size: 13px;
|
||
font-weight: 650;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.status-pill::before {
|
||
content: "";
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--green);
|
||
}
|
||
|
||
.btn {
|
||
min-height: 34px;
|
||
padding: 0 13px;
|
||
border-radius: 7px;
|
||
border: 1px solid var(--line-strong);
|
||
background: var(--surface);
|
||
color: var(--ink);
|
||
font-weight: 650;
|
||
cursor: default;
|
||
}
|
||
|
||
.btn.primary {
|
||
border-color: oklch(0.49 0.13 244);
|
||
background: var(--blue);
|
||
color: oklch(0.985 0.005 232);
|
||
}
|
||
|
||
.workspace {
|
||
display: grid;
|
||
grid-template-columns: 264px minmax(0, 1fr) 312px;
|
||
gap: 0;
|
||
min-height: 0;
|
||
}
|
||
|
||
.rail {
|
||
padding: 18px 14px;
|
||
border-right: 1px solid var(--line);
|
||
background: oklch(0.956 0.009 232);
|
||
}
|
||
|
||
.nav-title,
|
||
.panel-label,
|
||
.field-label {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.mode-list {
|
||
display: grid;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.mode {
|
||
width: 100%;
|
||
padding: 12px;
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 11px;
|
||
text-align: left;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
background: var(--surface);
|
||
}
|
||
|
||
.mode.active {
|
||
border-color: oklch(0.68 0.08 244);
|
||
background: var(--blue-soft);
|
||
}
|
||
|
||
.mode-dot {
|
||
width: 11px;
|
||
height: 11px;
|
||
margin-top: 4px;
|
||
border-radius: 50%;
|
||
background: var(--subtle);
|
||
}
|
||
|
||
.mode.active .mode-dot {
|
||
background: var(--blue);
|
||
}
|
||
|
||
.mode strong {
|
||
display: block;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.mode span {
|
||
display: block;
|
||
margin-top: 2px;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.rail-section {
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.mini-list {
|
||
display: grid;
|
||
gap: 7px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.mini-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
padding: 9px 10px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 7px;
|
||
background: var(--surface);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.mini-row span {
|
||
color: var(--muted);
|
||
}
|
||
|
||
.main {
|
||
min-width: 0;
|
||
padding: 22px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.route-head {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 18px;
|
||
align-items: start;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.route-head h2 {
|
||
margin: 0;
|
||
font-size: 28px;
|
||
line-height: 1.12;
|
||
}
|
||
|
||
.route-head p {
|
||
max-width: 68ch;
|
||
margin: 8px 0 0;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.health {
|
||
min-width: 210px;
|
||
padding: 12px 14px;
|
||
border: 1px solid oklch(0.76 0.07 153);
|
||
border-radius: var(--radius);
|
||
background: var(--green-soft);
|
||
}
|
||
|
||
.health strong {
|
||
display: block;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.health span {
|
||
color: oklch(0.38 0.07 153);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.route-strip {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.node {
|
||
min-height: 126px;
|
||
padding: 14px;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
background: var(--surface);
|
||
position: relative;
|
||
}
|
||
|
||
.node.active {
|
||
border-color: oklch(0.72 0.075 153);
|
||
background: var(--green-soft);
|
||
}
|
||
|
||
.node.pending {
|
||
border-color: oklch(0.8 0.09 74);
|
||
background: var(--amber-soft);
|
||
}
|
||
|
||
.node small {
|
||
color: var(--muted);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.node strong {
|
||
display: block;
|
||
margin-top: 9px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.node span {
|
||
display: block;
|
||
margin-top: 5px;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.flow-line {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-height: 42px;
|
||
padding: 0 13px;
|
||
margin-bottom: 20px;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
background: var(--surface-2);
|
||
overflow-x: auto;
|
||
white-space: nowrap;
|
||
font-family: "SF Mono", "Cascadia Code", Menlo, monospace;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.flow-line b {
|
||
color: var(--blue);
|
||
}
|
||
|
||
.flow-line span {
|
||
color: var(--muted);
|
||
}
|
||
|
||
.settings-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
|
||
gap: 14px;
|
||
align-items: start;
|
||
}
|
||
|
||
.panel {
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
background: var(--surface);
|
||
}
|
||
|
||
.panel-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 14px;
|
||
min-height: 50px;
|
||
padding: 0 14px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.panel-head h3 {
|
||
margin: 0;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.panel-body {
|
||
padding: 14px;
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.field {
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
|
||
.control-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 8px;
|
||
}
|
||
|
||
.input,
|
||
.select {
|
||
width: 100%;
|
||
min-height: 38px;
|
||
border: 1px solid var(--line-strong);
|
||
border-radius: 7px;
|
||
background: oklch(0.992 0.004 232);
|
||
color: var(--ink);
|
||
padding: 0 11px;
|
||
}
|
||
|
||
.summary-list {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.summary-row {
|
||
display: grid;
|
||
grid-template-columns: 94px minmax(0, 1fr);
|
||
gap: 10px;
|
||
align-items: baseline;
|
||
padding: 9px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.summary-row:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.summary-row small {
|
||
color: var(--muted);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.summary-row strong {
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.side {
|
||
padding: 18px 14px;
|
||
border-left: 1px solid var(--line);
|
||
background: oklch(0.956 0.009 232);
|
||
overflow: auto;
|
||
}
|
||
|
||
.copy-stack {
|
||
display: grid;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.copy-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
min-height: 40px;
|
||
padding: 0 10px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 7px;
|
||
background: var(--surface);
|
||
font-family: "SF Mono", "Cascadia Code", Menlo, monospace;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.copy-row button {
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--blue);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.side-panel {
|
||
margin-top: 18px;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
background: var(--surface);
|
||
}
|
||
|
||
.activity {
|
||
display: grid;
|
||
gap: 0;
|
||
}
|
||
|
||
.activity-row {
|
||
display: grid;
|
||
grid-template-columns: 54px minmax(0, 1fr);
|
||
gap: 10px;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.activity-row:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.activity-row time {
|
||
color: var(--muted);
|
||
font-family: "SF Mono", "Cascadia Code", Menlo, monospace;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.activity-row strong {
|
||
display: block;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.activity-row span {
|
||
display: block;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
@media (max-width: 1080px) {
|
||
.workspace {
|
||
grid-template-columns: 220px minmax(0, 1fr);
|
||
}
|
||
|
||
.side {
|
||
grid-column: 1 / -1;
|
||
border-left: 0;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.route-strip,
|
||
.settings-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.page {
|
||
padding: 10px;
|
||
}
|
||
|
||
.shell {
|
||
min-height: calc(100vh - 20px);
|
||
}
|
||
|
||
.topbar,
|
||
.route-head,
|
||
.workspace {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.topbar {
|
||
align-items: flex-start;
|
||
padding: 14px;
|
||
}
|
||
|
||
.top-actions {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.rail {
|
||
border-right: 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.route-strip,
|
||
.settings-grid,
|
||
.control-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.main,
|
||
.side {
|
||
padding: 14px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="page">
|
||
<section class="shell" aria-label="VPN Proxy redesign preview">
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<div class="mark" aria-hidden="true"></div>
|
||
<div>
|
||
<h1>VPN Proxy Client</h1>
|
||
<span>Local control panel, macOS Docker mode</span>
|
||
</div>
|
||
</div>
|
||
<div class="top-actions">
|
||
<span class="status-pill">sing-box running</span>
|
||
<button class="btn">Restart</button>
|
||
<button class="btn primary">Apply route</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="workspace">
|
||
<aside class="rail" aria-label="Connection modes">
|
||
<p class="nav-title">Режим подключения</p>
|
||
<div class="mode-list">
|
||
<button class="mode" type="button">
|
||
<span class="mode-dot"></span>
|
||
<span>
|
||
<strong>Общий gateway</strong>
|
||
<span>192.168.50.111:8080</span>
|
||
</span>
|
||
</button>
|
||
<button class="mode active" type="button">
|
||
<span class="mode-dot"></span>
|
||
<span>
|
||
<strong>Локальный VPN</strong>
|
||
<span>Finland 02 selected</span>
|
||
</span>
|
||
</button>
|
||
<button class="mode" type="button">
|
||
<span class="mode-dot"></span>
|
||
<span>
|
||
<strong>Напрямую</strong>
|
||
<span>без VPN и gateway</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
|
||
<section class="rail-section">
|
||
<p class="nav-title">Проверки</p>
|
||
<div class="mini-list">
|
||
<div class="mini-row"><strong>Docker</strong><span>ready</span></div>
|
||
<div class="mini-row"><strong>Ports</strong><span>8082 open</span></div>
|
||
<div class="mini-row"><strong>Config</strong><span>valid</span></div>
|
||
</div>
|
||
</section>
|
||
</aside>
|
||
|
||
<section class="main">
|
||
<div class="route-head">
|
||
<div>
|
||
<h2>Текущий маршрут: приложения Mac идут через локальный VPN</h2>
|
||
<p>
|
||
Главный экран показывает не настройки как список, а фактический путь трафика:
|
||
от приложения до интернета, с портом, выбранным режимом и состоянием сервиса.
|
||
</p>
|
||
</div>
|
||
<div class="health">
|
||
<strong>42 ms</strong>
|
||
<span>последняя проверка маршрута</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="route-strip" aria-label="Active route">
|
||
<div class="node">
|
||
<small>Источник</small>
|
||
<strong>Mac apps</strong>
|
||
<span>браузер, Discord, Telegram</span>
|
||
</div>
|
||
<div class="node active">
|
||
<small>Локальный proxy</small>
|
||
<strong>127.0.0.1:8082</strong>
|
||
<span>HTTP и SOCKS5</span>
|
||
</div>
|
||
<div class="node active">
|
||
<small>Режим</small>
|
||
<strong>Local VPN</strong>
|
||
<span>Finland 02</span>
|
||
</div>
|
||
<div class="node pending">
|
||
<small>Выход</small>
|
||
<strong>Internet</strong>
|
||
<span>проверка 11:04</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-line" aria-label="Route path">
|
||
<b>Mac apps</b><span>></span><b>127.0.0.1:8082</b><span>></span><b>sing-box</b><span>></span><b>Finland 02</b><span>></span><b>Internet</b>
|
||
</div>
|
||
|
||
<div class="settings-grid">
|
||
<section class="panel">
|
||
<div class="panel-head">
|
||
<h3>Настройка выбранного режима</h3>
|
||
<button class="btn">Load subscription</button>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="form-grid">
|
||
<label class="field">
|
||
<span class="field-label">Подписка или VLESS</span>
|
||
<div class="control-row">
|
||
<input class="input" value="https://provider.example/subscription" />
|
||
<button class="btn">Refresh</button>
|
||
</div>
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">VPN-сервер</span>
|
||
<div class="control-row">
|
||
<select class="select">
|
||
<option>Finland 02, 42 ms, 18 GB left</option>
|
||
</select>
|
||
<button class="btn primary">Connect</button>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-head">
|
||
<h3>Сводка</h3>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="summary-list">
|
||
<div class="summary-row"><small>Service</small><strong>running since 10:52</strong></div>
|
||
<div class="summary-row"><small>Config</small><strong>applied 2 minutes ago</strong></div>
|
||
<div class="summary-row"><small>Fallback</small><strong>VPN by default</strong></div>
|
||
<div class="summary-row"><small>Quota</small><strong>18 GB left</strong></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="side" aria-label="Local proxy details">
|
||
<p class="panel-label">Адреса для приложений</p>
|
||
<div class="copy-stack">
|
||
<div class="copy-row"><span>http://127.0.0.1:8082</span><button>Copy</button></div>
|
||
<div class="copy-row"><span>socks5://127.0.0.1:8082</span><button>Copy</button></div>
|
||
</div>
|
||
|
||
<section class="side-panel">
|
||
<div class="panel-head">
|
||
<h3>Порт proxy</h3>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="control-row">
|
||
<input class="input" value="8082" />
|
||
<button class="btn">Save</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="side-panel">
|
||
<div class="panel-head">
|
||
<h3>Активность</h3>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="activity">
|
||
<div class="activity-row">
|
||
<time>11:04</time>
|
||
<span><strong>Route check passed</strong><span>Finland 02 returned 42 ms</span></span>
|
||
</div>
|
||
<div class="activity-row">
|
||
<time>11:02</time>
|
||
<span><strong>Port changed</strong><span>8080 was busy, 8082 selected</span></span>
|
||
</div>
|
||
<div class="activity-row">
|
||
<time>10:59</time>
|
||
<span><strong>Subscription refreshed</strong><span>12 servers available</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|