feat: implement request handling and dashboard features with new tags and utilities

1 files changed, 124 insertions, 0 deletions

diff --git a/static/css/tailwind.css b/static/css/tailwind.css
index f1d8c73..2983d29 100644
--- a/static/css/tailwind.css
+++ b/static/css/tailwind.css
@@ -1 +1,125 @@
 @import "tailwindcss";
+
+@theme {
+  --color-surface-950: #09090b;
+  --color-surface-900: #111113;
+  --color-surface-800: #1a1a1f;
+  --color-surface-700: #252529;
+  --color-surface-600: #35353b;
+  --color-accent-500: #6366f1;
+  --color-accent-400: #818cf8;
+  --color-accent-600: #4f46e5;
+}
+
+@utility glass {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.03),
+    rgba(255, 255, 255, 0.01)
+  );
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+@utility glow-border {
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  box-shadow:
+    0 0 20px rgba(99, 102, 241, 0.05),
+    inset 0 0 20px rgba(99, 102, 241, 0.02);
+}
+
+@utility gradient-text {
+  background: linear-gradient(135deg, #e4e4e7, #818cf8);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+@utility input-field {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--color-surface-800);
+  color: #e4e4e7;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
+  transition: all 0.2s ease;
+  &::placeholder {
+    color: #52525b;
+  }
+  &:focus {
+    border-color: var(--color-accent-500);
+    box-shadow:
+      0 0 0 3px rgba(99, 102, 241, 0.1),
+      0 0 20px rgba(99, 102, 241, 0.05);
+  }
+}
+
+@utility btn-primary {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: white;
+  background: linear-gradient(
+    135deg,
+    var(--color-accent-500),
+    var(--color-accent-600)
+  );
+  outline: none;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  &:hover {
+    box-shadow:
+      0 0 30px rgba(99, 102, 241, 0.3),
+      0 4px 15px rgba(99, 102, 241, 0.2);
+    transform: translateY(-1px);
+  }
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+@utility fade-in {
+  animation: fadeIn 0.4s ease-out;
+}
+
+@utility slide-up {
+  animation: slideUp 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+::selection {
+  background-color: var(--color-accent-500);
+  color: white;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+  -webkit-text-fill-color: #e4e4e7;
+  -webkit-box-shadow: 0 0 0px 1000px var(--color-surface-800) inset;
+  transition: background-color 5000s ease-in-out 0s;
+}