Update index.html

index.html

@@ -9,24 +9,26 @@
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
     :root {
-      --bg-primary: #0a0a0a;
-      --bg-secondary: #1a1a1a;
-      --bg-tertiary: #2a2a2a;
-      --text-primary: #ffffff;
-      --text-secondary: #b0b0b0;
-      --accent-primary: #00d4ff;
-      --accent-secondary: #ff6b35;
-      --accent-tertiary: #7c4dff;
-      --error: #ff4757;
-      --success: #2ed573;
-      --warning: #ffa502;
-      --glass-bg: rgba(255, 255, 255, 0.05);
-      --glass-border: rgba(255, 255, 255, 0.1);
-      --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6);
-      --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.8);
-      --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
-      --gradient-secondary: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
-      --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      --bg-primary: #121212;
+      --bg-secondary: #1c1c1a;
+      --bg-tertiary: #252521;
+      --text-primary: #e8e8e0;
+      --text-secondary: #a5a59c;
+      --accent-primary: #8FBC8F;
+      --accent-secondary: #5D4037;
+      --accent-tertiary: #3E2723;
+      --error: #a73737;
+      --success: #4a7c59;
+      --warning: #b3892b;
+      --glass-bg: rgba(24, 24, 20, 0.7);
+      --glass-border: rgba(143, 188, 143, 0.2);
+      --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.7);
+      --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.85);
+      --gradient-primary: linear-gradient(135deg, var(--accent-primary), #6a8a6a);
+      --gradient-secondary: linear-gradient(135deg, var(--accent-secondary), var(--accent-tertiary));
+      --gradient-bg: linear-gradient(135deg, #252521 0%, #121212 100%);
+      --rust-accent: #8b5d3b;
+      --metal-accent: #6c7b74;
     }
 
     * {
@@ -38,8 +40,9 @@
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
       background: var(--bg-primary);
       background-image: 
-        radial-gradient(ellipse at top left, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
-        radial-gradient(ellipse at bottom right, rgba(124, 77, 255, 0.05) 0%, transparent 50%);
+        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238FBC8F' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E"),
+        repeating-linear-gradient(45deg, rgba(143, 188, 143, 0.02) 0px, rgba(143, 188, 143, 0.02) 2px, transparent 2px, transparent 4px),
+        linear-gradient(135deg, rgba(30, 20, 15, 0.9), rgba(18, 18, 18, 1));
       color: var(--text-primary);
       display: flex;
       justify-content: center;
@@ -47,16 +50,14 @@
       min-height: 100vh;
       overflow: hidden;
       -webkit-tap-highlight-color: transparent;
-      backdrop-filter: blur(10px);
     }
 
     .app-container {
       width: 95%;
       max-width: 1400px;
       background: var(--glass-bg);
-      backdrop-filter: blur(20px);
       border: 1px solid var(--glass-border);
-      border-radius: 20px;
+      border-radius: 8px;
       box-shadow: var(--shadow-xl);
       display: flex;
       overflow: hidden;
@@ -64,6 +65,17 @@
       position: relative;
       animation: slideIn 0.8s cubic-bezier(0.23, 1, 0.32, 1);
     }
+    
+    .app-container::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: var(--accent-primary);
+      z-index: 10;
+    }
 
     @keyframes slideIn {
       from {
@@ -80,12 +92,29 @@
       width: 320px;
       padding: 24px;
       background: var(--bg-secondary);
-      backdrop-filter: blur(15px);
-      border-right: 1px solid var(--glass-border);
+      border-right: 2px solid var(--accent-tertiary);
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       overflow-y: auto;
       scrollbar-width: thin;
-      scrollbar-color: var(--accent-primary) transparent;
+      scrollbar-color: var(--accent-primary) var(--bg-tertiary);
+      position: relative;
+    }
+    
+    .settings-panel::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 1px;
+      height: 100%;
+      background: repeating-linear-gradient(
+        to bottom,
+        var(--accent-primary) 0,
+        var(--accent-primary) 10px,
+        transparent 10px,
+        transparent 20px
+      );
+      opacity: 0.3;
     }
 
     .settings-panel::-webkit-scrollbar {
@@ -93,7 +122,7 @@
     }
 
     .settings-panel::-webkit-scrollbar-track {
-      background: transparent;
+      background: var(--bg-tertiary);
     }
 
     .settings-panel::-webkit-scrollbar-thumb {
@@ -113,11 +142,26 @@
       flex-direction: column;
       position: relative;
       background: var(--bg-primary);
+      background-image: 
+        linear-gradient(rgba(18, 18, 18, 0.97), rgba(18, 18, 18, 0.97)),
+        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238FBC8F' fill-opacity='0.03'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     }
 
     .form-field {
       margin-bottom: 20px;
       animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1);
+      position: relative;
+    }
+    
+    .form-field::after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: var(--accent-tertiary);
+      opacity: 0.3;
     }
 
     .form-field label {
@@ -130,23 +174,21 @@
       letter-spacing: 0.5px;
     }
 
-    .form-field select, .form-field textarea {
+    .form-field select, .form-field textarea, .form-field input {
       width: 100%;
       padding: 12px 16px;
-      border: 2px solid transparent;
-      border-radius: 12px;
+      border: 2px solid var(--accent-tertiary);
+      border-radius: 6px;
       background: var(--bg-tertiary);
       color: var(--text-primary);
       font-size: 1rem;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-      backdrop-filter: blur(10px);
     }
 
-    .form-field select:focus, .form-field textarea:focus {
+    .form-field select:focus, .form-field textarea:focus, .form-field input:focus {
       outline: none;
       border-color: var(--accent-primary);
-      box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
-      transform: translateY(-2px);
+      box-shadow: 0 0 0 2px rgba(143, 188, 143, 0.3);
     }
 
     .form-field textarea {
@@ -157,9 +199,9 @@
     button {
       padding: 12px 24px;
       border: none;
-      border-radius: 12px;
-      background: var(--gradient-primary);
-      color: var(--text-primary);
+      border-radius: 6px;
+      background: var(--accent-primary);
+      color: var(--bg-primary);
       cursor: pointer;
       font-size: 1rem;
       font-weight: 600;
@@ -167,6 +209,7 @@
       touch-action: manipulation;
       position: relative;
       overflow: hidden;
+      box-shadow: 0 4px 0 var(--accent-tertiary);
     }
 
     button::before {
@@ -176,7 +219,7 @@
       left: -100%;
       width: 100%;
       height: 100%;
-      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
       transition: left 0.5s;
     }
 
@@ -185,17 +228,18 @@
     }
 
     button:hover {
-      transform: translateY(-3px);
-      box-shadow: 0 10px 25px rgba(0, 212, 255, 0.4);
+      background: #a0cfa0;
+      transform: translateY(-2px);
     }
 
     button:active {
-      transform: translateY(-1px);
+      transform: translateY(2px);
+      box-shadow: 0 0 0 var(--accent-tertiary);
     }
 
     .material-icons {
       font-family: 'Material Icons';
-      font-size: 28px;
+      font-size: 24px;
       vertical-align: middle;
     }
 
@@ -207,7 +251,10 @@
       flex-direction: column;
       gap: 16px;
       scrollbar-width: thin;
-      scrollbar-color: var(--accent-primary) transparent;
+      scrollbar-color: var(--accent-primary) var(--bg-tertiary);
+      background-image: 
+        linear-gradient(rgba(18, 18, 18, 0.95), rgba(18, 18, 18, 0.95)),
+        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235D4037' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     }
 
     .chat-container::-webkit-scrollbar {
@@ -215,7 +262,7 @@
     }
 
     .chat-container::-webkit-scrollbar-track {
-      background: transparent;
+      background: var(--bg-tertiary);
     }
 
     .chat-container::-webkit-scrollbar-thumb {
@@ -226,12 +273,22 @@
     .message {
       max-width: 80%;
       padding: 16px 20px;
-      border-radius: 20px;
+      border-radius: 6px;
       font-size: 1rem;
       line-height: 1.6;
       position: relative;
       animation: messageSlide 0.5s cubic-bezier(0.23, 1, 0.32, 1);
-      backdrop-filter: blur(10px);
+      border: 1px solid transparent;
+    }
+    
+    .message::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: var(--glass-border);
     }
 
     @keyframes messageSlide {
@@ -246,48 +303,56 @@
     }
 
     .message.user {
-      background: var(--gradient-primary);
+      background: var(--accent-secondary);
       align-self: flex-end;
-      box-shadow: 0 8px 20px rgba(0, 212, 255, 0.3);
+      border-bottom: 3px solid var(--accent-tertiary);
     }
 
     .message.ai {
-      background: var(--glass-bg);
-      border: 1px solid var(--glass-border);
+      background: var(--bg-tertiary);
       align-self: flex-start;
-      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+      border-left: 3px solid var(--accent-primary);
     }
 
     .input-container {
       display: flex;
       gap: 12px;
       padding: 20px;
-      background: var(--glass-bg);
-      backdrop-filter: blur(20px);
-      border-top: 1px solid var(--glass-border);
+      background: var(--bg-secondary);
+      border-top: 2px solid var(--accent-tertiary);
       align-items: center;
+      position: relative;
+    }
+    
+    .input-container::before {
+      content: '';
+      position: absolute;
+      top: -4px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: var(--rust-accent);
+      opacity: 0.6;
     }
 
     #userInput {
       flex: 1;
       padding: 16px 20px;
-      border: 2px solid transparent;
-      border-radius: 20px;
-      background: var(--bg-secondary);
+      border: 2px solid var(--accent-tertiary);
+      border-radius: 6px;
+      background: var(--bg-tertiary);
       color: var(--text-primary);
       resize: none;
       min-height: 60px;
       max-height: 150px;
-      font-size: 1rem;
+      font-size: 16px;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-      backdrop-filter: blur(10px);
     }
 
     #userInput:focus {
       outline: none;
       border-color: var(--accent-primary);
-      box-shadow: 0 0 25px rgba(0, 212, 255, 0.3);
-      transform: translateY(-2px);
+      box-shadow: 0 0 0 2px rgba(143, 188, 143, 0.3);
     }
 
     #sendButton, #attachButton {
@@ -296,14 +361,20 @@
       justify-content: center;
       width: 60px;
       height: 60px;
-      border-radius: 50%;
-      background: var(--gradient-primary);
+      border-radius: 6px;
+      background: var(--accent-primary);
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+      box-shadow: 0 4px 0 var(--accent-tertiary);
     }
 
     #sendButton:hover, #attachButton:hover {
-      transform: translateY(-3px) scale(1.05);
-      box-shadow: 0 12px 30px rgba(0, 212, 255, 0.5);
+      background: #a0cfa0;
+      transform: translateY(-2px);
+    }
+    
+    #sendButton:active, #attachButton:active {
+      transform: translateY(2px);
+      box-shadow: 0 0 0 var(--accent-tertiary);
     }
 
     #sendButton:disabled {
@@ -316,7 +387,7 @@
     .spinner {
       width: 28px;
       height: 28px;
-      border: 3px solid rgba(255, 255, 255, 0.3);
+      border: 3px solid rgba(143, 188, 143, 0.2);
       border-top: 3px solid var(--accent-primary);
       border-radius: 50%;
       animation: spin 1s linear infinite;
@@ -331,14 +402,14 @@
       top: 24px;
       right: 24px;
       padding: 16px 24px;
-      border-radius: 12px;
+      border-radius: 6px;
       color: #fff;
       font-size: 1rem;
       font-weight: 600;
       z-index: 1000;
       display: none;
-      backdrop-filter: blur(15px);
       animation: notificationSlide 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+      border-left: 4px solid transparent;
     }
 
     @keyframes notificationSlide {
@@ -353,13 +424,15 @@
     }
 
     .error-message {
-      background: linear-gradient(135deg, var(--error), #ff6b6b);
-      box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4);
+      background: var(--bg-tertiary);
+      border-left-color: var(--error);
+      box-shadow: 0 5px 15px rgba(167, 55, 55, 0.3);
     }
 
     .success-message {
-      background: linear-gradient(135deg, var(--success), #5af78e);
-      box-shadow: 0 10px 25px rgba(46, 213, 115, 0.4);
+      background: var(--bg-tertiary);
+      border-left-color: var(--success);
+      box-shadow: 0 5px 15px rgba(74, 124, 89, 0.3);
     }
 
     .carousel-container {
@@ -372,6 +445,7 @@
       position: relative;
       user-select: none;
       padding: 24px;
+      touch-action: pan-y;
     }
 
     .carousel {
@@ -380,28 +454,55 @@
       max-width: 500px;
       height: 300px;
       transform-style: preserve-3d;
-      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
+      transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
       cursor: grab;
     }
 
     .carousel.dragging {
       cursor: grabbing;
+      transition: none;
     }
 
     .carousel-card {
       position: absolute;
       width: 100%;
       height: 100%;
-      background: var(--glass-bg);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--glass-border);
-      border-radius: 16px;
+      background: var(--bg-secondary);
+      border: 2px solid var(--accent-tertiary);
+      border-radius: 6px;
       padding: 24px;
-      box-shadow: var(--shadow-lg);
       display: flex;
       flex-direction: column;
       gap: 12px;
-      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
+      transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    }
+    
+    .carousel-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: var(--accent-primary);
+    }
+    
+    .carousel-card::after {
+      content: '';
+      position: absolute;
+      top: 4px;
+      bottom: 0;
+      right: 0;
+      width: 4px;
+      background: repeating-linear-gradient(
+        to bottom,
+        var(--accent-primary) 0,
+        var(--accent-primary) 10px,
+        transparent 10px,
+        transparent 20px
+      );
+      opacity: 0.5;
     }
 
     .carousel-controls, .carousel-indicator {
@@ -414,15 +515,15 @@
       width: 14px;
       height: 14px;
       background: var(--bg-tertiary);
-      border-radius: 50%;
+      border-radius: 2px;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-      border: 2px solid transparent;
+      border: 2px solid var(--accent-tertiary);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
     }
 
     .carousel-dot.active {
       background: var(--accent-primary);
-      box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
       transform: scale(1.2);
     }
 
@@ -433,13 +534,12 @@
 
     .mode-toggle {
       display: flex;
-      background: var(--bg-secondary);
-      backdrop-filter: blur(15px);
-      border-radius: 20px;
+      background: var(--bg-tertiary);
+      border-radius: 6px;
       padding: 4px;
       position: relative;
       margin-bottom: 20px;
-      border: 1px solid var(--glass-border);
+      border: 2px solid var(--accent-tertiary);
     }
 
     .mode-toggle button {
@@ -452,12 +552,13 @@
       z-index: 1;
       font-size: 1rem;
       font-weight: 600;
-      border-radius: 16px;
+      border-radius: 4px;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+      box-shadow: none;
     }
 
     .mode-toggle button.active {
-      color: var(--text-primary);
+      color: var(--bg-primary);
     }
 
     .mode-toggle-slider {
@@ -465,10 +566,10 @@
       top: 4px;
       left: 4px;
       height: calc(100% - 8px);
-      background: var(--gradient-primary);
-      border-radius: 16px;
-      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-      box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
+      background: var(--accent-primary);
+      border-radius: 4px;
+      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+      box-shadow: 0 2px 0 var(--accent-tertiary);
     }
 
     .dropzone {
@@ -477,8 +578,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: rgba(0, 212, 255, 0.1);
-      backdrop-filter: blur(20px);
+      background: rgba(143, 188, 143, 0.1);
       border: 3px dashed var(--accent-primary);
       display: none;
       align-items: center;
@@ -487,7 +587,7 @@
       font-size: 1.4rem;
       font-weight: 600;
       z-index: 10;
-      border-radius: 20px;
+      border-radius: 6px;
     }
 
     .dropzone.active {
@@ -522,22 +622,38 @@
 
     .chip {
       padding: 10px 18px;
-      background: var(--glass-bg);
-      backdrop-filter: blur(15px);
-      border: 1px solid var(--glass-border);
-      border-radius: 20px;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--accent-tertiary);
+      border-radius: 4px;
       font-size: 0.9rem;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
       color: var(--text-secondary);
+      position: relative;
+    }
+    
+    .chip::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 5px;
+      height: 5px;
+      background: var(--accent-primary);
+      border-radius: 1px;
     }
 
     .chip:hover {
       background: var(--accent-primary);
-      color: var(--text-primary);
+      color: var(--bg-primary);
       transform: translateY(-2px);
-      box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
+      box-shadow: 0 3px 0 var(--accent-tertiary);
+    }
+    
+    .chip:active {
+      transform: translateY(1px);
+      box-shadow: 0 0 0 var(--accent-tertiary);
     }
 
     .floating-buttons {
@@ -552,21 +668,26 @@
     .floating-btn {
       width: 48px;
       height: 48px;
-      border-radius: 50%;
-      background: var(--glass-bg);
-      backdrop-filter: blur(15px);
-      border: 1px solid var(--glass-border);
+      border-radius: 6px;
+      background: var(--bg-tertiary);
+      border: 2px solid var(--accent-tertiary);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
       padding: 0;
+      box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
     }
 
     .floating-btn:hover {
       background: var(--accent-primary);
-      transform: translateY(-3px) scale(1.05);
-      box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
+      color: var(--bg-primary);
+      transform: translateY(-2px);
+    }
+    
+    .floating-btn:active {
+      transform: translateY(2px);
+      box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
     }
 
     .code-tools {
@@ -580,19 +701,18 @@
     .code-tools button {
       padding: 6px 12px;
       font-size: 0.85rem;
-      background: var(--glass-bg);
-      backdrop-filter: blur(10px);
-      border: 1px solid var(--glass-border);
+      background: var(--bg-tertiary);
+      border: 1px solid var(--accent-tertiary);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
     }
 
     pre {
       position: relative;
-      background: var(--bg-secondary);
-      border: 1px solid var(--glass-border);
+      background: var(--bg-tertiary);
+      border: 1px solid var(--accent-tertiary);
       padding: 20px;
-      border-radius: 12px;
+      border-radius: 6px;
       overflow-x: auto;
-      backdrop-filter: blur(10px);
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     }
 
@@ -604,9 +724,46 @@
     .image-preview {
       max-width: 100%;
       max-height: 300px;
-      border-radius: 12px;
+      border-radius: 6px;
       margin-top: 12px;
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+      border: 1px solid var(--accent-tertiary);
+    }
+    
+    /* Factory theme specific elements */
+    .rusty-border {
+      position: relative;
+    }
+    
+    .rusty-border::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: 1px solid var(--rust-accent);
+      border-radius: inherit;
+      pointer-events: none;
+      opacity: 0.6;
+    }
+    
+    .metal-panel {
+      background-image: 
+        linear-gradient(45deg, 
+          rgba(108, 123, 116, 0.1) 25%, 
+          transparent 25%, 
+          transparent 75%, 
+          rgba(108, 123, 116, 0.1) 75%, 
+          rgba(108, 123, 116, 0.1)),
+        linear-gradient(45deg, 
+          rgba(108, 123, 116, 0.1) 25%, 
+          transparent 25%, 
+          transparent 75%,
+          rgba(108, 123, 116, 0.1) 75%, 
+          rgba(108, 123, 116, 0.1));
+      background-size: 10px 10px;
+      background-position: 0 0, 5px 5px;
     }
 
     @keyframes fadeInUp {
@@ -633,7 +790,7 @@
         width: 100%;
         max-height: 40vh;
         border-right: none;
-        border-bottom: 1px solid var(--glass-border);
+        border-bottom: 2px solid var(--accent-tertiary);
       }
 
       .settings-panel.collapsed {
@@ -692,7 +849,7 @@
         padding: 8px 14px;
       }
 
-      .form-field select, .form-field textarea, #userInput {
+      .form-field select, .form-field textarea, .form-field input, #userInput {
         font-size: 16px;
       }
     }
@@ -701,7 +858,7 @@
 <body>
   <div class="app-container" id="appContainer">
     <div class="settings-panel" id="settingsPanel">
-      <h2 style="font-size: 1.4rem; margin-bottom: 24px; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">⚙️ Settings</h2>
+      <h2 style="font-size: 1.4rem; margin-bottom: 24px; color: var(--accent-primary); font-weight: 700;">⚙️ Control Panel</h2>
       <div class="form-field">
         <label>🤖 Main Model:</label>
         <select id="modelSelect">
@@ -717,16 +874,16 @@
       </div>
       <div class="form-field">
         <label>🔑 API Key:</label>
-        <input type="password" id="apiKeyInput" class="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500" placeholder="Enter your HuggingFace API key">
+        <input type="password" id="apiKeyInput" placeholder="Enter your HuggingFace API key">
         <p style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 8px;">
           🔒 Your API key is stored locally only
         </p>
       </div>
       <div class="form-field">
         <label>⚡ Max Tokens:</label>
-        <input type="number" id="maxTokensInput" class="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500" value="512" min="100" max="2048">
+        <input type="number" id="maxTokensInput" value="512" min="100" max="2048">
       </div>
-      <button id="saveSettingsBtn">💾 Save Settings</button>
+      <button id="saveSettingsBtn" class="rusty-border">💾 Save Settings</button>
     </div>
     <div class="main-content">
       <div class="floating-buttons">
@@ -742,19 +899,19 @@
       </div>
 
       <div class="mode-toggle">
-        <button id="carouselModeBtn" class="active">🎛️ Prompt Editor</button>
-        <button id="chatModeBtn">💬 Chat</button>
+        <button id="carouselModeBtn" class="active">🎛️ Command Center</button>
+        <button id="chatModeBtn">💬 Terminal</button>
         <div class="mode-toggle-slider" id="modeToggleSlider"></div>
       </div>
 
       <div id="carouselMode">
         <div class="carousel-container">
           <div class="carousel" id="promptCarousel">
-            <div class="carousel-card" style="transform: rotateY(0deg) translateZ(500px);">
+            <div class="carousel-card metal-panel" style="transform: rotateY(0deg) translateZ(500px);">
               <label>🎯 Primary System Prompt:</label>
               <textarea id="primarySystemPrompt" placeholder="Enter primary system prompt for the AI assistant...">You are a helpful AI assistant that provides clear, accurate, and helpful responses. Focus on practical solutions and detailed explanations.</textarea>
             </div>
-            <div class="carousel-card" style="transform: rotateY(60deg) translateZ(500px); opacity: 0.8;">
+            <div class="carousel-card metal-panel" style="transform: rotateY(60deg) translateZ(500px); opacity: 0.8;">
               <label>💻 Code Template:</label>
               <textarea id="codeTemplate" placeholder="Enter code formatting template...">```javascript
 // Code implementation
@@ -764,7 +921,7 @@ function solution() {
 }
 ```</textarea>
             </div>
-            <div class="carousel-card" style="transform: rotateY(120deg) translateZ(500px); opacity: 0.8;">
+            <div class="carousel-card metal-panel" style="transform: rotateY(120deg) translateZ(500px); opacity: 0.8;">
               <label>📋 Additional Instructions:</label>
               <textarea id="additionalInstructions" placeholder="Enter additional instructions for the AI...">Provide working code examples when possible. Explain complex concepts step by step. Use modern best practices.</textarea>
             </div>
@@ -778,7 +935,7 @@ function solution() {
             <div class="carousel-dot" data-index="1"></div>
             <div class="carousel-dot" data-index="2"></div>
           </div>
-          <button id="applyPromptBtn" style="margin-top: 24px;">✅ Apply Prompts & Switch to Chat</button>
+          <button id="applyPromptBtn" style="margin-top: 24px;">✅ Apply Prompts & Switch to Terminal</button>
         </div>
       </div>
 
@@ -811,13 +968,27 @@ function solution() {
     // Global variables
     let isLoading = false;
     let currentCarouselIndex = 0;
+    let isDragging = false;
+    let startX = 0;
 
     // Initialize the application
     document.addEventListener('DOMContentLoaded', function() {
       loadSettings();
       setupEventListeners();
-      setupCarousel();
+      setupSimpleCarousel();
       hljs.highlightAll();
+      
+      // Dark mode detection
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('dark');
+      }
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+        if (event.matches) {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
+      });
     });
 
     // Settings management
@@ -859,9 +1030,15 @@ function solution() {
       document.getElementById('saveSettingsBtn').addEventListener('click', saveSettings);
       document.getElementById('settingsToggle').addEventListener('click', toggleSettings);
 
-      // Carousel controls
-      document.getElementById('prevCard').addEventListener('click', () => rotateCarousel(-1));
-      document.getElementById('nextCard').addEventListener('click', () => rotateCarousel(1));
+      // Carousel controls - simple direct rotation
+      document.getElementById('prevCard').addEventListener('click', () => {
+        rotateCarousel(-1);
+      });
+      
+      document.getElementById('nextCard').addEventListener('click', () => {
+        rotateCarousel(1);
+      });
+      
       document.getElementById('applyPromptBtn').addEventListener('click', applyPromptsAndSwitchToChat);
 
       // Chat controls
@@ -881,7 +1058,7 @@ function solution() {
         });
       });
 
-      // Carousel dots
+      // Carousel dots - simple direct navigation
       document.querySelectorAll('.carousel-dot').forEach(dot => {
         dot.addEventListener('click', (e) => {
           const index = parseInt(e.target.getAttribute('data-index'));
@@ -889,6 +1066,39 @@ function solution() {
         });
       });
     }
+    
+    // Simple carousel functions with direct animations
+    function setupSimpleCarousel() {
+      // Initial setup
+      updateCarouselPosition();
+      
+      // Add touch handling for mobile/tablet
+      const carousel = document.getElementById('promptCarousel');
+      
+      // Touch events for swiping
+      carousel.addEventListener('touchstart', handleTouchStart, { passive: true });
+      carousel.addEventListener('touchend', handleTouchEnd, { passive: true });
+    }
+    
+    function handleTouchStart(e) {
+      startX = e.touches[0].clientX;
+    }
+    
+    function handleTouchEnd(e) {
+      const endX = e.changedTouches[0].clientX;
+      const diffX = endX - startX;
+      
+      // If swipe distance is significant, rotate carousel
+      if (Math.abs(diffX) > 50) {
+        if (diffX > 0) {
+          // Swipe right - go to previous card
+          rotateCarousel(-1);
+        } else {
+          // Swipe left - go to next card
+          rotateCarousel(1);
+        }
+      }
+    }
 
     // Mode switching
     function switchMode(mode) {
@@ -915,11 +1125,7 @@ function solution() {
       }
     }
 
-    // Carousel functionality
-    function setupCarousel() {
-      updateCarouselPosition();
-    }
-
+    // Simplified carousel functionality
     function rotateCarousel(direction) {
       const totalCards = 3;
       currentCarouselIndex = (currentCarouselIndex + direction + totalCards) % totalCards;
@@ -934,20 +1140,38 @@ function solution() {
     function updateCarouselPosition() {
       const carousel = document.getElementById('promptCarousel');
       const cards = carousel.querySelectorAll('.carousel-card');
-      const dots = document.querySelectorAll('.carousel-dot');
       
+      // Update indicator dots
+      document.querySelectorAll('.carousel-dot').forEach((dot, index) => {
+        dot.classList.toggle('active', index === currentCarouselIndex);
+      });
+      
+      // Apply smooth transition
+      carousel.style.transition = 'transform 0.5s ease-out';
+      
+      // Apply new rotation
+      const newRotation = -currentCarouselIndex * 60;
+      carousel.style.transform = `rotateY(${newRotation}deg)`;
+      
+      // Update each card position
       cards.forEach((card, index) => {
         const angle = (index - currentCarouselIndex) * 60;
         const isActive = index === currentCarouselIndex;
         
+        // Add smooth transition to cards
+        card.style.transition = 'all 0.5s ease-out';
         card.style.transform = `rotateY(${angle}deg) translateZ(500px)`;
         card.style.opacity = isActive ? '1' : '0.6';
         card.style.zIndex = isActive ? '10' : '1';
       });
-
-      dots.forEach((dot, index) => {
-        dot.classList.toggle('active', index === currentCarouselIndex);
-      });
+      
+      // Remove transition after animation completes for better performance
+      setTimeout(() => {
+        carousel.style.transition = '';
+        cards.forEach(card => {
+          card.style.transition = '';
+        });
+      }, 500);
     }
 
     function applyPromptsAndSwitchToChat() {
@@ -1124,4 +1348,4 @@ function solution() {
     }
   </script>
 </body>
-</html>
+</html>