Harden UI security and add deployment templates

2026-05-16 11:22:02 +07:00
parent 1ac66ec4ac
commit 0fd64307b7
12 changed files with 962 additions and 210 deletions
--- a/static/ui.css
+++ b/static/ui.css
@@ -0,0 +1,163 @@
+:root {
+  --bg-deep: #08090c;
+  --bg-card: rgba(20, 22, 30, 0.8);
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-hover: rgba(249, 115, 22, 0.4);
+  --accent: #f97316;
+  --accent-glow: rgba(249, 115, 22, 0.15);
+}
+
+[v-cloak] {
+  display: none;
+}
+
+body {
+  background: var(--bg-deep);
+  color: #e2e8f0;
+  font-family:
+    "Avenir Next",
+    "Segoe UI",
+    "Helvetica Neue",
+    sans-serif;
+  min-height: 100vh;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background:
+    radial-gradient(
+      ellipse at 20% 0%,
+      rgba(249, 115, 22, 0.06) 0%,
+      transparent 60%
+    ),
+    radial-gradient(
+      ellipse at 80% 100%,
+      rgba(30, 27, 75, 0.15) 0%,
+      transparent 60%
+    );
+}
+
+.glass {
+  background: var(--bg-card);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--border-subtle);
+}
+
+.glass:hover {
+  border-color: var(--border-hover);
+}
+
+.group-active {
+  border-color: rgba(249, 115, 22, 0.2);
+}
+
+.active-tab {
+  background: var(--accent);
+  box-shadow:
+    0 0 24px var(--accent-glow),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  height: 6px;
+  border-radius: 10px;
+  background: #1e293b;
+  outline: none;
+  transition: opacity 0.2s;
+}
+
+input[type="range"]:disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  background: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 3px solid var(--accent);
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
+  transition: transform 0.15s;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+}
+
+input[type="range"]:disabled::-webkit-slider-thumb {
+  border-color: #475569;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.temp-gradient {
+  background: linear-gradient(to right, #ffcc66, #ffffff, #99ccff) !important;
+}
+
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1em;
+}
+
+.mono {
+  font-family:
+    "JetBrains Mono",
+    "SFMono-Regular",
+    "Cascadia Code",
+    monospace;
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fade-up {
+  animation: fadeUp 0.4s ease-out both;
+}
+
+.toast-enter {
+  animation: fadeUp 0.3s ease-out;
+}
+
+@keyframes pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.pulse-on {
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  animation: spin 0.8s linear infinite;
+}