Update static/conv.html

static/conv.html

@@ -8,29 +8,33 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Bootstrap Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
-            --primary: #5046e5;
-            --primary-dark: #3730a3;
-            --accent: #06b6d4;
-            --accent-light: #22d3ee;
-            --bg-color: #f8fafc;
+            --primary: #2dd4bf;
+            --primary-dark: #0d9488;
+            --accent: #f59e0b;
+            --accent-light: #fbbf24;
+            --bg-color: #f0f9ff;
             --card-bg: #ffffff;
             --dark-text: #0f172a;
             --light-text: #f8fafc;
-            --message-bg-user: #7c3aed;
+            --message-bg-user: #2dd4bf;
             --message-bg-assistant: #e2e8f0;
-            --border-radius: 16px;
+            --border-radius: 20px;
+            --shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
         }
         
         body {
             background-color: var(--bg-color);
-            font-family: 'Inter', 'Segoe UI', sans-serif;
+            font-family: 'Poppins', 'Segoe UI', sans-serif;
             color: var(--dark-text);
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
+            background-image: radial-gradient(circle at 10% 20%, rgba(45, 212, 191, 0.1) 0%, rgba(45, 212, 191, 0.03) 50%);
         }
         
         .app-container {
@@ -38,28 +42,46 @@
             margin: 20px auto;
             background: var(--card-bg);
             border-radius: var(--border-radius);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
+            box-shadow: var(--shadow);
             overflow: hidden;
             display: grid;
             grid-template-rows: auto 1fr auto;
             height: 85vh;
             width: 100%;
+            border: 1px solid rgba(45, 212, 191, 0.1);
         }
         
         .app-header {
             padding: 24px;
             background: linear-gradient(135deg, var(--primary), var(--primary-dark));
             color: var(--light-text);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
             display: flex;
             align-items: center;
             gap: 15px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .app-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: 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='rgba(255,255,255,0.1)' fill-rule='evenodd'/%3E%3C/svg%3E");
+            opacity: 0.5;
+            z-index: 0;
         }
         
         .app-header h1 {
-            font-size: 1.5rem;
+            font-size: 1.6rem;
             font-weight: 600;
             margin: 0;
+            position: relative;
+            z-index: 1;
+            letter-spacing: 0.5px;
         }
         
         .app-title-icon {
@@ -67,23 +89,46 @@
             display: flex;
             align-items: center;
             animation: pulse 2s infinite alternate;
+            position: relative;
+            z-index: 1;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            justify-content: center;
         }
         
         .conversation-area {
-            padding: 20px;
+            padding: 24px;
             overflow-y: auto;
             display: flex;
             flex-direction: column;
-            gap: 16px;
+            gap: 20px;
             background-color: var(--bg-color);
             height: 100%;
+            background-image: linear-gradient(rgba(45, 212, 191, 0.03) 1px, transparent 1px),
+                            linear-gradient(90deg, rgba(45, 212, 191, 0.03) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        
+        .conversation-area::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        .conversation-area::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .conversation-area::-webkit-scrollbar-thumb {
+            background-color: rgba(45, 212, 191, 0.3);
+            border-radius: 20px;
         }
         
         .message-group {
             display: flex;
             flex-direction: column;
             gap: 8px;
-            max-width: 85%;
+            max-width: 80%;
         }
         
         .message-group.user {
@@ -97,6 +142,11 @@
             line-height: 1.5;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
             animation: fadeIn 0.3s ease-out;
+            transition: transform 0.2s ease;
+        }
+        
+        .message:hover {
+            transform: translateY(-2px);
         }
         
         .message.user {
@@ -112,14 +162,15 @@
         }
         
         .message-avatar {
-            width: 32px;
-            height: 32px;
+            width: 36px;
+            height: 36px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 14px;
             margin-bottom: 6px;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
         }
         
         .user .message-avatar {
@@ -134,12 +185,24 @@
         }
         
         .controls-area {
-            padding: 24px;
+            padding: 28px;
             background-color: white;
             border-top: 1px solid rgba(0, 0, 0, 0.05);
             display: flex;
             justify-content: center;
             align-items: center;
+            position: relative;
+        }
+        
+        .controls-area::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary), var(--accent));
+            opacity: 0.6;
         }
         
         .listen-container {
@@ -149,8 +212,8 @@
         }
         
         .listen-ball {
-            width: 100px;
-            height: 100px;
+            width: 110px;
+            height: 110px;
             border-radius: 50%;
             background: linear-gradient(135deg, var(--primary), var(--primary-dark));
             color: white;
@@ -159,23 +222,34 @@
             justify-content: center;
             cursor: pointer;
             transition: all 0.3s ease;
-            box-shadow: 0 4px 16px rgba(80, 70, 229, 0.4);
+            box-shadow: 0 6px 20px rgba(45, 212, 191, 0.4);
             position: relative;
             overflow: hidden;
         }
         
+        .listen-ball::before {
+            content: '';
+            position: absolute;
+            width: 150%;
+            height: 150%;
+            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
+            top: -25%;
+            left: -25%;
+        }
+        
         .listen-ball.listening {
             background: linear-gradient(135deg, var(--accent), var(--accent-light));
             animation: pulse 1.5s infinite;
         }
         
         .listen-ball.processing {
-            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-            animation: none;
+            background: linear-gradient(135deg, var(--accent-light), var(--accent));
+            animation: rotate 2s linear infinite;
         }
         
         .listen-ball i {
-            font-size: 2.5rem;
+            font-size: 2.8rem;
+            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
         }
         
         .sound-wave {
@@ -194,21 +268,29 @@
         }
         
         .status-badge {
-            background-color: rgba(0, 0, 0, 0.04);
+            background-color: white;
             border-radius: 50px;
-            padding: 8px 16px;
+            padding: 10px 20px;
             font-size: 0.9rem;
             color: var(--dark-text);
-            margin-top: 16px;
+            margin-top: 18px;
             display: inline-flex;
             align-items: center;
-            gap: 8px;
+            gap: 10px;
             font-weight: 500;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+            border: 1px solid rgba(45, 212, 191, 0.2);
+            transition: all 0.3s ease;
+        }
+        
+        .status-badge:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
         }
         
         .status-badge i {
-            font-size: 1rem;
+            font-size: 1.1rem;
+            color: var(--primary);
         }
         
         .audio-controls {
@@ -227,15 +309,24 @@
         }
         
         .empty-state i {
-            font-size: 3.5rem;
+            font-size: 4rem;
             margin-bottom: 20px;
-            color: #cbd5e1;
+            color: var(--primary);
+            opacity: 0.7;
         }
         
         .empty-state h3 {
-            font-size: 1.3rem;
-            margin-bottom: 10px;
+            font-size: 1.5rem;
+            margin-bottom: 12px;
+            color: #475569;
+            font-weight: 600;
+        }
+        
+        .empty-state p {
             color: #64748b;
+            font-size: 1.1rem;
+            max-width: 260px;
+            line-height: 1.6;
         }
         
         .time-stamp {
@@ -246,9 +337,14 @@
         }
         
         @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
+            0% { transform: scale(1); box-shadow: 0 6px 20px rgba(45, 212, 191, 0.4); }
+            50% { transform: scale(1.05); box-shadow: 0 8px 25px rgba(45, 212, 191, 0.6); }
+            100% { transform: scale(1); box-shadow: 0 6px 20px rgba(45, 212, 191, 0.4); }
+        }
+        
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
         }
         
         @keyframes wave {
@@ -273,12 +369,31 @@
             }
             
             .listen-ball {
-                width: 80px;
-                height: 80px;
+                width: 90px;
+                height: 90px;
             }
             
             .listen-ball i {
-                font-size: 2rem;
+                font-size: 2.2rem;
+            }
+            
+            .app-header h1 {
+                font-size: 1.4rem;
+            }
+            
+            .controls-area {
+                padding: 20px;
+            }
+            
+            .status-badge {
+                padding: 8px 16px;
+                font-size: 0.85rem;
+            }
+        }
+        
+        @media (min-width: 1200px) {
+            .app-container {
+                max-width: 1000px;
             }
         }
     </style>
@@ -323,6 +438,7 @@
         </div>
     </div>
 
+
     <!-- Bootstrap JS Bundle -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>