init

ui/src/app/knock/knock-page.component.scss

@@ -0,0 +1,132 @@
+.container {
+  max-width: 800px;
+  margin: 24px auto;
+  padding: 16px;
+}
+.row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin: 8px 0;
+}
+label {
+  width: 180px;
+}
+input[type='text'], input[type='password'], select, textarea {
+  flex: 1;
+}
+.actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+.result, .error {
+  margin-top: 16px;
+}
+
+.error pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dialog-content {
+  min-width: 400px;
+}
+
+.bg-blue-50 {
+  background-color: #eff6ff;
+}
+
+.result-dialog {
+  .p-dialog {
+    max-width: 90vw !important;
+    width: 600px !important;
+    
+    @media (max-width: 768px) {
+      width: 95vw !important;
+      max-width: 95vw !important;
+    }
+  }
+  
+  .p-dialog-content {
+    max-height: 70vh;
+    overflow-y: auto;
+    padding: 1.5rem;
+    
+    @media (max-width: 768px) {
+      padding: 1rem;
+    }
+  }
+  
+  pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    max-height: 300px;
+    overflow-y: auto;
+    font-size: 0.9rem;
+    line-height: 1.4;
+    
+    @media (max-width: 768px) {
+      font-size: 0.8rem;
+      max-height: 200px;
+    }
+  }
+  
+  .dialog-content {
+    min-width: 300px;
+    max-width: 100%;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    
+    @media (max-width: 768px) {
+      min-width: auto;
+    }
+  }
+}
+
+// Анимированный заголовок
+.animated-title {
+  margin-left: 1.5rem;
+  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: gradientShift 3s ease-in-out infinite;
+  font-weight: bold;
+  font-size: 1.8rem;
+  transition: all 0.3s ease;
+  
+  &.animating {
+    animation: gradientShift 1s ease-in-out infinite, glow 0.5s ease-in-out infinite alternate;
+  }
+  
+  span {
+    display: inline-block;
+    min-width: 1ch;
+  }
+}
+
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes glow {
+  from {
+    text-shadow: 0 0 5px rgba(102, 126, 234, 0.5), 0 0 10px rgba(102, 126, 234, 0.3);
+  }
+  to {
+    text-shadow: 0 0 10px rgba(102, 126, 234, 0.8), 0 0 20px rgba(102, 126, 234, 0.5);
+  }
+}
+