refactor: complete application rewrite with modern UI

2026-02-19 22:55:26 +03:00
parent 271b530fa1
commit a6cc5a9827
26 changed files with 3036 additions and 794 deletions
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,139 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 
+           focus:outline-none focus:ring-2 focus:ring-offset-2
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+  
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700 
+           focus:ring-primary-500 shadow-md hover:shadow-lg;
+  }
+  
+  .btn-success {
+    @apply btn bg-success-600 text-white hover:bg-success-700 
+           focus:ring-success-500 shadow-md hover:shadow-lg;
+  }
+  
+  .btn-danger {
+    @apply btn bg-danger-600 text-white hover:bg-danger-700 
+           focus:ring-danger-500 shadow-md hover:shadow-lg;
+  }
+  
+  .btn-secondary {
+    @apply btn bg-slate-200 text-slate-700 hover:bg-slate-300 
+           focus:ring-slate-400 shadow-sm;
+  }
+  
+  .btn-sm {
+    @apply px-3 py-1.5 text-sm;
+  }
+  
+  .btn-icon {
+    @apply p-2 rounded-lg transition-all duration-200
+           hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-primary-500;
+  }
+  
+  .input {
+    @apply w-full px-3 py-2 border border-slate-300 rounded-lg
+           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
+           transition-all duration-200
+           placeholder:text-slate-400;
+  }
+  
+  .input-focused {
+    @apply ring-2 ring-primary-500 border-transparent bg-primary-50;
+  }
+  
+  .card {
+    @apply bg-white rounded-xl shadow-lg border border-slate-200 
+           overflow-hidden transition-all duration-300;
+  }
+  
+  .card-header {
+    @apply px-4 py-3 border-b border-slate-200 bg-slate-50;
+  }
+  
+  .card-body {
+    @apply p-4;
+  }
+  
+  .select {
+    @apply w-full px-3 py-2 border border-slate-300 rounded-lg
+           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
+           bg-white cursor-pointer transition-all duration-200;
+  }
+  
+  .tab {
+    @apply px-4 py-2 text-sm font-medium rounded-t-lg
+           transition-all duration-200 border-b-2 border-transparent
+           hover:bg-slate-100 cursor-pointer;
+  }
+  
+  .tab-active {
+    @apply tab bg-white border-primary-500 text-primary-600;
+  }
+  
+  .tab-inactive {
+    @apply tab text-slate-600;
+  }
+  
+  .badge {
+    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
+  }
+  
+  .badge-warning {
+    @apply badge bg-warning-100 text-warning-800;
+  }
+  
+  .badge-success {
+    @apply badge bg-success-100 text-success-800;
+  }
+  
+  .badge-danger {
+    @apply badge bg-danger-100 text-danger-800;
+  }
+  
+  .label {
+    @apply block text-sm font-medium text-slate-700 mb-1;
+  }
+}
+
+@layer utilities {
+  .animate-fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+  }
+  
+  .animate-slide-in {
+    animation: slideIn 0.3s ease-out;
+  }
+  
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 transparent;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: #cbd5e1;
+    border-radius: 3px;
+  }
+}