Update index.html

index.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LLM+ Web scraping Application</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
         * {
             margin: 0;
             padding: 0;
@@ -12,79 +14,149 @@
         }
 
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: radial-gradient(ellipse at top, #667eea 0%, #764ba2 50%, #f093fb 100%);
             min-height: 100vh;
+            position: relative;
+            overflow-x: hidden;
+        }
+
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: 
+                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
+            z-index: -1;
         }
 
         .container {
-            max-width: 1400px;
+            max-width: 1600px;
             margin: 0 auto;
-            padding: 20px;
+            padding: 15px;
             min-height: 100vh;
         }
 
         .header {
             text-align: center;
-            margin-bottom: 30px;
+            margin-bottom: 25px;
             color: white;
+            position: relative;
         }
 
         .main-title {
-            font-size: 2.5rem;
+            font-size: 3.2rem;
             font-weight: 700;
-            margin-bottom: 10px;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+            margin-bottom: 15px;
+            text-shadow: 0 4px 8px rgba(0,0,0,0.3);
+            background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -0.5px;
         }
 
         .subtitle {
-            font-size: 1.1rem;
-            opacity: 0.9;
-            font-weight: 300;
+            font-size: 1.2rem;
+            opacity: 0.95;
+            font-weight: 400;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+            margin-bottom: 5px;
         }
 
         .app-container {
             display: flex;
-            background: white;
-            border-radius: 15px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
+            background: rgba(255,255,255,0.95);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            box-shadow: 
+                0 25px 50px rgba(0,0,0,0.15),
+                0 0 0 1px rgba(255,255,255,0.2);
             overflow: hidden;
-            min-height: 600px;
+            min-height: 800px;
+            border: 1px solid rgba(255,255,255,0.2);
         }
 
         .sidebar {
-            width: 300px;
-            background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
+            width: 320px;
+            background: linear-gradient(180deg, 
+                rgba(30, 41, 59, 0.95) 0%, 
+                rgba(51, 65, 85, 0.95) 50%,
+                rgba(30, 41, 59, 0.95) 100%);
+            backdrop-filter: blur(10px);
             padding: 0;
             display: flex;
             flex-direction: column;
+            position: relative;
+        }
+
+        .sidebar::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, 
+                rgba(59, 130, 246, 0.1) 0%, 
+                rgba(147, 51, 234, 0.1) 100%);
+            pointer-events: none;
         }
 
         .tab-button {
-            padding: 25px 30px;
+            padding: 30px 35px;
             border: none;
             background: transparent;
-            color: #ecf0f1;
-            font-size: 1.1rem;
+            color: #f1f5f9;
+            font-size: 1.15rem;
             font-weight: 500;
             cursor: pointer;
             text-align: left;
-            transition: all 0.3s ease;
-            border-bottom: 1px solid rgba(255,255,255,0.1);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            border-bottom: 1px solid rgba(255,255,255,0.08);
             position: relative;
+            overflow: hidden;
+        }
+
+        .tab-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, 
+                transparent 0%, 
+                rgba(59, 130, 246, 0.2) 50%, 
+                transparent 100%);
+            transition: left 0.6s ease;
+        }
+
+        .tab-button:hover::before {
+            left: 100%;
         }
 
         .tab-button:hover {
-            background: rgba(255,255,255,0.1);
-            transform: translateX(5px);
+            background: rgba(59, 130, 246, 0.15);
+            transform: translateX(8px);
+            color: #ffffff;
         }
 
         .tab-button.active {
-            background: rgba(74, 144, 226, 0.3);
-            border-left: 4px solid #4a90e2;
+            background: linear-gradient(135deg, 
+                rgba(59, 130, 246, 0.3) 0%, 
+                rgba(147, 51, 234, 0.3) 100%);
+            border-left: 4px solid #3b82f6;
+            color: #ffffff;
+            box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.2);
         }
 
-        .tab-button.active::before {
+        .tab-button.active::after {
             content: '';
             position: absolute;
             right: 0;
@@ -92,26 +164,41 @@
             transform: translateY(-50%);
             width: 0;
             height: 0;
-            border-top: 10px solid transparent;
-            border-bottom: 10px solid transparent;
-            border-right: 10px solid white;
+            border-top: 12px solid transparent;
+            border-bottom: 12px solid transparent;
+            border-right: 12px solid rgba(255,255,255,0.95);
+            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
         }
 
         .tab-title {
             font-weight: 600;
-            margin-bottom: 5px;
+            margin-bottom: 8px;
+            font-size: 1.1rem;
+            display: flex;
+            align-items: center;
+        }
+
+        .tab-title::before {
+            content: '⚡';
+            margin-right: 10px;
+            font-size: 1.2rem;
+        }
+
+        .tab-button:nth-child(2) .tab-title::before {
+            content: '🤖';
         }
 
         .tab-description {
-            font-size: 0.9rem;
-            opacity: 0.8;
-            line-height: 1.4;
+            font-size: 0.95rem;
+            opacity: 0.85;
+            line-height: 1.5;
+            color: #cbd5e1;
         }
 
         .content {
             flex: 1;
             padding: 0;
-            background: #f8f9fa;
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
             position: relative;
         }
 
@@ -119,7 +206,7 @@
             display: none;
             width: 100%;
             height: 100%;
-            padding: 20px;
+            padding: 25px;
         }
 
         .tab-content.active {
@@ -128,17 +215,29 @@
 
         .iframe-container {
             width: 100%;
-            height: 560px;
-            border-radius: 10px;
+            height: 750px;
+            border-radius: 15px;
             overflow: hidden;
-            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+            box-shadow: 
+                0 20px 40px rgba(0,0,0,0.12),
+                0 0 0 1px rgba(0,0,0,0.05);
             background: white;
+            position: relative;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .iframe-container:hover {
+            transform: translateY(-2px);
+            box-shadow: 
+                0 25px 50px rgba(0,0,0,0.15),
+                0 0 0 1px rgba(0,0,0,0.05);
         }
 
         iframe {
             width: 100%;
             height: 100%;
             border: none;
+            border-radius: 15px;
         }
 
         .loading {
@@ -146,19 +245,21 @@
             justify-content: center;
             align-items: center;
             height: 100%;
-            color: #666;
-            font-size: 1.1rem;
+            color: #64748b;
+            font-size: 1.15rem;
+            font-weight: 500;
+            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
         }
 
         .loading::before {
             content: '';
-            width: 20px;
-            height: 20px;
-            border: 2px solid #ddd;
-            border-top: 2px solid #4a90e2;
+            width: 24px;
+            height: 24px;
+            border: 3px solid #e2e8f0;
+            border-top: 3px solid #3b82f6;
             border-radius: 50%;
             animation: spin 1s linear infinite;
-            margin-right: 10px;
+            margin-right: 15px;
         }
 
         @keyframes spin {
@@ -166,33 +267,125 @@
             100% { transform: rotate(360deg); }
         }
 
+        .floating-elements {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        .floating-element {
+            position: absolute;
+            background: rgba(255,255,255,0.1);
+            border-radius: 50%;
+            animation: float 6s ease-in-out infinite;
+        }
+
+        .floating-element:nth-child(1) {
+            top: 20%;
+            left: 10%;
+            width: 60px;
+            height: 60px;
+            animation-delay: 0s;
+        }
+
+        .floating-element:nth-child(2) {
+            top: 60%;
+            right: 15%;
+            width: 80px;
+            height: 80px;
+            animation-delay: 2s;
+        }
+
+        .floating-element:nth-child(3) {
+            bottom: 30%;
+            left: 20%;
+            width: 40px;
+            height: 40px;
+            animation-delay: 4s;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0px) rotate(0deg); }
+            33% { transform: translateY(-20px) rotate(120deg); }
+            66% { transform: translateY(10px) rotate(240deg); }
+        }
+
+        @media (max-width: 1024px) {
+            .container {
+                padding: 10px;
+            }
+            
+            .app-container {
+                min-height: 700px;
+            }
+            
+            .sidebar {
+                width: 280px;
+            }
+            
+            .iframe-container {
+                height: 650px;
+            }
+        }
+
         @media (max-width: 768px) {
             .app-container {
                 flex-direction: column;
+                min-height: auto;
             }
             
             .sidebar {
                 width: 100%;
                 flex-direction: row;
                 overflow-x: auto;
+                min-height: auto;
             }
             
             .tab-button {
-                min-width: 200px;
+                min-width: 250px;
                 white-space: nowrap;
+                padding: 20px 25px;
+            }
+            
+            .tab-button.active::after {
+                display: none;
             }
             
             .iframe-container {
-                height: 400px;
+                height: 500px;
             }
             
+            .main-title {
+                font-size: 2.5rem;
+            }
+            
+            .tab-content {
+                padding: 15px;
+            }
+        }
+
+        @media (max-width: 480px) {
             .main-title {
                 font-size: 2rem;
             }
+            
+            .iframe-container {
+                height: 400px;
+            }
         }
     </style>
 </head>
 <body>
+    <div class="floating-elements">
+        <div class="floating-element"></div>
+        <div class="floating-element"></div>
+        <div class="floating-element"></div>
+    </div>
+    
     <div class="container">
         <div class="header">
             <h1 class="main-title">LLM+ Web scraping Application</h1>