Update static/test.css

static/test.css

@@ -131,445 +131,380 @@ body {
   */
 
 
-/* General Styles */
+   
+/* ===== BASE STYLES ===== */
 body {
-    font-family: 'Inter', sans-serif;
-    margin: 0;
-    background: url('https://images.pexels.com/photos/8294624/pexels-photo-8294624.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center fixed;
-    background-size: cover;
-    color: #f1f5f9;
-    overflow-x: hidden;
-    line-height: 1.6;
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  background: url('https://images.pexels.com/photos/8294624/pexels-photo-8294624.jpeg') no-repeat center center fixed;
+  background-size: cover;
+  color: #f1f5f9;
+  line-height: 1.6;
 }
 
-/* Header Styles */
+/* ===== HEADER ===== */
 header {
-    text-align: center;
-    padding: 4rem 2rem 2rem;
-    background: rgba(0, 0, 0, 0.7);
-    color: white;
-    border-bottom: 1px solid #ffffff33;
-    animation: fadeIn 1s ease-in-out;
-    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  padding: 4rem 2rem 2rem;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  border-bottom: 1px solid #ffffff33;
+  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.3);
 }
 
 h1 {
-    font-size: 3rem;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-    letter-spacing: 1px;
-    animation: typing 2.5s steps(20) 1s 1 normal both, glow 1.5s ease-in-out infinite alternate;
-}
-
-/* Animations */
-@keyframes typing {
-    from { width: 0; }
-    to { width: 100%; }
-}
-
-@keyframes glow {
-    0% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #3b82f6; }
-    50% { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #3b82f6; }
-    100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #3b82f6; }
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(-10px); }
-    to { opacity: 1; transform: translateY(0); }
+  font-size: 3rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  letter-spacing: 1px;
+  animation: 
+    typing 2.5s steps(20) 1s 1 normal both,
+    glow 1.5s ease-in-out infinite alternate;
 }
 
-@keyframes fadeInUp {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-/* Main Content */
+/* ===== MAIN CONTENT ===== */
 main {
-    padding: 2rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-/* Card Styles */
 .cards {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 2rem;
-    margin-bottom: 3rem;
-    animation: fadeInUp 1s ease-in-out;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2rem;
+  margin-bottom: 3rem;
 }
 
 .card {
-    background: #2c3e50;
-    padding: 2rem;
-    border-radius: 1.5rem;
-    width: 280px;
-    text-align: center;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    cursor: pointer;
-    border: 1px solid #34495e;
+  background: #2c3e50;
+  padding: 2rem;
+  border-radius: 1.5rem;
+  width: 280px;
+  text-align: center;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: 1px solid #34495e;
 }
 
 .card:hover {
-    transform: scale(1.05);
-    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
-    background: #34495e;
+  transform: scale(1.03);
+  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
+  background: #34495e;
 }
 
 .icon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-    color: #f39c12;
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: #f39c12;
 }
 
-/* Tool Sections */
+/* ===== TOOL SECTIONS ===== */
 .tool-section {
-    display: none;
-    width: 100%;
-    max-width: 800px;
-    background: #1e293b;
-    padding: 2rem;
-    border-radius: 1rem;
-    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
-    margin-bottom: 2rem;
-    animation: fadeIn 0.5s ease-in-out;
+  width: 100%;
+  max-width: 800px;
+  background: #1e293b;
+  padding: 2rem;
+  border-radius: 1rem;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+  margin-bottom: 2rem;
 }
 
 .tool-section h3 {
-    color: #f39c12;
-    margin-bottom: 1.5rem;
-    font-size: 1.5rem;
+  color: #f39c12;
+  margin-bottom: 1.5rem;
+  font-size: 1.5rem;
 }
 
-/* Form Elements */
-.input-group {
-    margin-bottom: 1.5rem;
+/* ===== FORM ELEMENTS ===== */
+.input-group, .form-group {
+  margin-bottom: 1.5rem;
 }
 
-.input-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
 }
 
-textarea, input[type="file"] {
-    width: 100%;
-    margin-top: 1rem;
-    padding: 0.75rem;
-    border: none;
-    border-radius: 0.5rem;
-    background: #34495e;
-    color: #f1f5f9;
-    font-size: 1rem;
-    resize: vertical;
-    min-height: 100px;
+textarea, select {
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: #34495e;
+  color: #f1f5f9;
+  font-size: 1rem;
 }
 
-textarea:focus {
-    outline: 2px solid #3b82f6;
+textarea {
+  min-height: 100px;
+  resize: vertical;
 }
 
-.form-group {
-    margin-bottom: 1.5rem;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-}
-
-select {
-    width: 100%;
-    padding: 0.75rem;
-    border: none;
-    border-radius: 0.5rem;
-    background: #34495e;
-    color: #f1f5f9;
-    font-size: 1rem;
-}
-
-/* Upload Areas */
+/* ===== UPLOAD AREAS ===== */
 .upload-area {
-    border: 2px dashed #64748b;
-    border-radius: 0.5rem;
-    padding: 2rem;
-    text-align: center;
-    margin-bottom: 1.5rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
+  border: 2px dashed #64748b;
+  border-radius: 0.5rem;
+  padding: 2rem;
+  text-align: center;
+  margin-bottom: 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
 .upload-area p {
-    margin: 0;
-    color: #94a3b8;
+  margin: 0;
+  color: #94a3b8;
 }
 
-.upload-area input[type="file"] {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    cursor: pointer;
+.upload-area.highlight {
+  border-color: #3b82f6;
+  background: rgba(59, 130, 246, 0.1);
 }
 
-.highlight {
-    border: 2px dashed #3b82f6 !important;
-    background: rgba(59, 130, 246, 0.1) !important;
+input[type="file"] {
+  display: none;
 }
 
-/* File Preview */
 .file-preview-container {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }
 
 .file-preview-card {
-    display: flex;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
-    padding: 12px;
-    margin-top: 10px;
-    position: relative;
-    animation: fadeIn 0.3s ease-out;
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 12px;
+  margin-top: 10px;
 }
 
 .file-icon {
-    font-size: 1.5rem;
-    margin-right: 12px;
+  font-size: 1.5rem;
+  margin-right: 12px;
 }
 
 .file-details {
-    flex: 1;
+  flex: 1;
 }
 
 .file-name {
-    display: block;
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  display: block;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .file-size {
-    font-size: 0.8rem;
-    color: #94a3b8;
+  font-size: 0.8rem;
+  color: #94a3b8;
 }
 
 .upload-progress {
-    height: 4px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 2px;
-    margin-top: 8px;
-    overflow: hidden;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  margin-top: 8px;
+  overflow: hidden;
 }
 
 .progress-bar {
-    height: 100%;
-    background: #3b82f6;
-    transition: width 0.3s ease;
+  height: 100%;
+  background: #3b82f6;
+  transition: width 0.3s ease;
 }
 
 .upload-complete {
-    color: #10b981;
-    font-size: 0.8rem;
+  color: #10b981;
+  font-size: 0.8rem;
 }
 
 .remove-file {
-    background: none;
-    border: none;
-    color: #94a3b8;
-    font-size: 1.2rem;
-    cursor: pointer;
-    margin-left: 8px;
-    padding: 0 5px;
+  background: none;
+  border: none;
+  color: #94a3b8;
+  font-size: 1.2rem;
+  cursor: pointer;
+  margin-left: 8px;
+  padding: 0 5px;
 }
 
-/* Buttons */
+/* ===== BUTTONS ===== */
 .button-group {
-    display: flex;
-    gap: 1rem;
-    margin-top: 1.5rem;
+  display: flex;
+  gap: 1rem;
+  margin-top: 1.5rem;
 }
 
 button {
-    margin-top: 1rem;
-    padding: 0.75rem 2rem;
-    font-size: 1rem;
-    border: none;
-    border-radius: 0.5rem;
-    background: #3b82f6;
-    color: white;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
+  padding: 0.75rem 2rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: #3b82f6;
+  color: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
 }
 
-button:hover {
-    background: #2563eb;
-    transform: translateY(-2px);
+button:hover:not(:disabled) {
+  background: #2563eb;
+  transform: translateY(-2px);
 }
 
 button:disabled {
-    background: #64748b;
-    cursor: not-allowed;
-    transform: none;
+  background: #64748b;
+  cursor: not-allowed;
+  opacity: 0.7;
 }
 
 .secondary-btn {
-    background: #64748b;
+  background: #64748b;
 }
 
-.secondary-btn:hover {
-    background: #475569;
+.secondary-btn:hover:not(:disabled) {
+  background: #475569;
 }
 
-/* Spinner */
-.spinner {
-    width: 16px;
-    height: 16px;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    border-top-color: white;
-    animation: spin 1s ease-in-out infinite;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-.hidden {
-    display: none;
-}
-
-/* Results Container */
+/* ===== RESULTS DISPLAY ===== */
 .result-container {
-    margin-top: 2rem;
-    padding: 1.5rem;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 0.5rem;
-    animation: fadeIn 0.5s ease-out;
+  margin-top: 2rem;
+  padding: 1.5rem;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 0.5rem;
 }
 
 .ai-response-container {
-    line-height: 1.6;
-    padding: 12px;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 8px;
-    border-left: 3px solid #3b82f6;
-    margin-top: 1rem;
+  line-height: 1.6;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  border-left: 3px solid #3b82f6;
 }
 
 .ai-response-container pre {
-    background: rgba(0, 0, 0, 0.3);
-    padding: 12px;
-    border-radius: 6px;
-    overflow-x: auto;
-    font-family: 'Courier New', monospace;
-    font-size: 0.9rem;
+  background: rgba(0, 0, 0, 0.3);
+  padding: 12px;
+  border-radius: 6px;
+  overflow-x: auto;
 }
 
 .ai-response-container code {
-    font-family: inherit;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
 }
 
-/* Confidence Meter */
+/* ===== CONFIDENCE METER ===== */
 .confidence-meter {
-    margin-top: 15px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 0.9rem;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 0.9rem;
 }
 
 .meter-bar {
-    flex: 1;
-    height: 8px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
-    overflow: hidden;
+  flex: 1;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
 }
 
 .meter-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
-    transition: width 0.5s ease;
+  height: 100%;
+  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
 }
 
-/* Error Messages */
+/* ===== ERROR MESSAGES ===== */
 .error-message {
-    margin-top: 1.5rem;
-    padding: 1rem;
-    background: rgba(239, 68, 68, 0.2);
-    border-left: 3px solid #ef4444;
-    border-radius: 0 4px 4px 0;
-    animation: fadeIn 0.3s ease-out;
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background: rgba(239, 68, 68, 0.2);
+  border-left: 3px solid #ef4444;
+  border-radius: 0 4px 4px 0;
 }
 
 .error-message-box {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .error-icon {
-    font-size: 1.2rem;
+  font-size: 1.2rem;
 }
 
-.error-text {
-    flex: 1;
+/* ===== ANIMATIONS ===== */
+@keyframes typing {
+  from { width: 0; }
+  to { width: 100%; }
 }
 
-/* Footer */
-footer {
-    text-align: center;
-    padding: 2rem;
-    color: #cbd5e1;
-    font-size: 0.875rem;
-    border-top: 1px solid #34495e;
-    background: rgba(0, 0, 0, 0.8);
+@keyframes glow {
+  0% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #3b82f6; }
+  50% { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #3b82f6; }
+  100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #3b82f6; }
 }
 
-/* Responsive Design */
-@media (max-width: 768px) {
-    .cards {
-        flex-direction: column;
-        align-items: center;
-    }
-    
-    .card {
-        width: 100%;
-        max-width: 350px;
-    }
-    
-    h1 {
-        font-size: 2rem;
-    }
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-@media (max-width: 480px) {
-    main {
-        padding: 1rem;
-    }
-    
-    .tool-section {
-        padding: 1rem;
-    }
-    
-    .button-group {
-        flex-direction: column;
-    }
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: white;
+  animation: spin 1s linear infinite;
 }
 
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
 
+.hidden {
+  display: none !important;
+}
+
+/* ===== RESPONSIVE DESIGN ===== */
+@media (max-width: 768px) {
+  .cards {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .card {
+    width: 100%;
+    max-width: 350px;
+  }
+  
+  h1 {
+    font-size: 2rem;
+  }
+}
 
+@media (max-width: 480px) {
+  main {
+    padding: 1rem;
+  }
+  
+  .tool-section {
+    padding: 1rem;
+  }
+  
+  .button-group {
+    flex-direction: column;
+  }
+}