feat: Реализован новый веб-интерфейс и бэкенд для управления VPN-клиентом, включая списки серверов, элементы управления прокси и опции конфигурации.

2026-01-15 18:39:39 +03:00
parent c4915389a7
commit 6e97bb9f61
22 changed files with 2412 additions and 2275 deletions
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -0,0 +1,130 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap");
+
+:root {
+  --color-neon: #00ff41;
+  --color-bg: #050505;
+}
+
+body {
+  font-family: "JetBrains Mono", monospace;
+  background-color: var(--color-bg);
+  color: var(--color-neon);
+  overflow-x: hidden;
+}
+
+::selection {
+  background-color: var(--color-neon);
+  color: black;
+}
+
+/* Scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(0, 255, 65, 0.2);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 255, 65, 0.5);
+}
+
+.matrix-bg {
+  background-image:
+    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
+    linear-gradient(
+      90deg,
+      rgba(255, 0, 0, 0.06),
+      rgba(0, 255, 0, 0.02),
+      rgba(0, 0, 255, 0.06)
+    );
+  background-size:
+    100% 2px,
+    3px 100%;
+}
+
+/* Big Toggle Switch */
+.big-toggle {
+  position: relative;
+  width: 80px;
+  height: 40px;
+}
+
+.big-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.big-toggle .slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: #1a1a1a;
+  border: 2px solid rgba(0, 255, 65, 0.3);
+  border-radius: 40px;
+  transition: 0.3s;
+}
+
+.big-toggle .slider:before {
+  position: absolute;
+  content: "";
+  height: 28px;
+  width: 28px;
+  left: 4px;
+  bottom: 4px;
+  background-color: rgba(0, 255, 65, 0.4);
+  border-radius: 50%;
+  transition: 0.3s;
+}
+
+.big-toggle input:checked + .slider {
+  background-color: rgba(0, 255, 65, 0.2);
+  border-color: #00ff41;
+  box-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
+}
+
+.big-toggle input:checked + .slider:before {
+  transform: translateX(40px);
+  background-color: #00ff41;
+  box-shadow: 0 0 10px #00ff41;
+}
+
+/* Server Card */
+.server-card {
+  transition: all 0.2s ease;
+}
+
+.server-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 255, 65, 0.15);
+}
+
+.server-card.active {
+  border-color: #00ff41 !important;
+  box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
+}
+
+.blink-1 {
+  animation: blink 1s infinite;
+}
+.blink-2 {
+  animation: blink 1s infinite 0.2s;
+}
+.blink-3 {
+  animation: blink 1s infinite 0.4s;
+}
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}