From fbd8f30de3d637a1afd57ca04aa0d8b383005d64 Mon Sep 17 00:00:00 2001
From: iRedTea <red__tea@outlook.com>
Date: Tue, 13 Oct 2026 23:18:49 +0300
Subject: [PATCH] feat: the new forward rule form on one line, with short type
 names

---
 internal/server/web/templates/forwards.html | 57 +++++++++++----------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/internal/server/web/templates/forwards.html b/internal/server/web/templates/forwards.html
index 9bc5fd0..1db4d41 100644
--- a/internal/server/web/templates/forwards.html
+++ b/internal/server/web/templates/forwards.html
@@ -6,16 +6,19 @@
 <title>Порты · {{.Agent.Name}} - LPRA</title>
 <link rel="stylesheet" href="/static/app.css">
 <style>
-  .frow { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
-  .frow label { margin:0 0 6px; }
-  .frow .fld { display:flex; flex-direction:column; }
-  .frow select, .frow input, .frow button {
+  /* One line: fixed narrow fields, the label takes what is left. */
+  .frow { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
+  .frow label { margin:0 0 6px; white-space:nowrap; }
+  .frow .fld { display:flex; flex-direction:column; flex:none; width:108px; }
+  .frow .fld.addr { width:128px; }
+  .frow .fld.grow { flex:1; width:auto; min-width:150px; }
+  .frow select, .frow input[type=text], .frow button {
     height:40px; box-sizing:border-box; font-size:14px; line-height:1; margin:0;
   }
-  label.check { display:inline-flex; align-items:center; gap:8px; margin:14px 0 0; color:var(--text); font-size:14px; cursor:pointer; }
-  .frow select {
-    padding:0 32px 0 12px; border-radius:8px; border:1px solid var(--border);
-    background:#0c0f13; color:var(--text);
+  .frow select { min-width:0; width:100%; padding:0 30px 0 12px; background-position:right 10px center; }
+  .frow label.check {
+    display:inline-flex; align-items:center; gap:8px; height:40px; margin:0;
+    color:var(--text); font-size:14px; cursor:pointer;
   }
 </style>
 </head>
@@ -73,34 +76,34 @@
         <div class="fld">
           <label>Тип</label>
           <select name="proto" id="proto">
-            <option value="http">http (long-poll, работает везде)</option>
-            <option value="tcp">tcp (прямой, низкая задержка, порт {{.TunnelPort}})</option>
-            <option value="udp">udp (прямой, порт {{.TunnelPort}})</option>
+            <option value="http">http-lp</option>
+            <option value="tcp">tcp</option>
+            <option value="udp">udp</option>
           </select>
         </div>
         <div class="fld">
-          <label>Порт на клиенте</label>
-          <input type="text" name="client_port" placeholder="напр. 22" style="max-width:140px" required>
+          <label>Порт клиента</label>
+          <input type="text" name="client_port" placeholder="22" required>
         </div>
         <div class="fld">
-          <label>Порт на хосте</label>
-          <input type="text" name="host_port" placeholder="напр. 2222" style="max-width:140px" required>
+          <label>Порт хоста</label>
+          <input type="text" name="host_port" placeholder="2222" required>
         </div>
-        <div class="fld">
-          <label>Слушать на хосте</label>
-          <input type="text" name="listen_addr" value="0.0.0.0" style="max-width:160px">
+        <div class="fld addr">
+          <label>Слушать на</label>
+          <input type="text" name="listen_addr" value="0.0.0.0">
         </div>
-        <div class="fld" style="flex:1; min-width:200px">
-          <label>Метка (необязательно)</label>
-          <input type="text" name="label" maxlength="80" placeholder="для чего это правило">
+        <div class="fld grow">
+          <label>Метка</label>
+          <input type="text" name="label" maxlength="80" placeholder="необязательно">
         </div>
+        {{if .UfwEnabled}}
+        <label class="check" title="Порт не будет открыт в ufw, и при удалении правила в ufw ничего не изменится">
+          <input type="checkbox" name="no_ufw" value="1"> Без ufw
+        </label>
+        {{end}}
         <button type="submit">Создать</button>
       </div>
-      {{if .UfwEnabled}}
-      <label class="check" title="Порт не будет открыт в ufw, и при удалении правила в ufw ничего не изменится">
-        <input type="checkbox" name="no_ufw" value="1"> Без ufw правила
-      </label>
-      {{end}}
     </form>
     <p class="muted" id="note" style="font-size:13px; margin-top:12px"></p>
   </div>
@@ -108,7 +111,7 @@
   <div class="card">
     <h2>Режимы</h2>
     <ul class="muted" style="font-size:14px; line-height:1.7">
-      <li><b>http</b> - туннель поверх HTTP long-poll (через адрес панели, порт {{.PanelPort}}). Работает везде, где доступна панель, но задержка выше.</li>
+      <li><b>http-lp</b> - туннель поверх HTTP long-poll (через адрес панели, порт {{.PanelPort}}). Работает везде, где доступна панель, но задержка выше.</li>
       <li><b>tcp</b> - прямой TCP-мультиплексор через порт <b>{{.TunnelPort}}</b> хоста. Минимальная задержка, keep-alive, TCP_NODELAY. Нужно открыть {{.TunnelPort}}/tcp на хосте.</li>
       <li><b>udp</b> - прямой UDP через порт <b>{{.TunnelPort}}</b> хоста. Нужно открыть {{.TunnelPort}}/udp.</li>
     </ul>