| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; |
| line-height: 1.6; |
| color: #333; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| padding: 20px; |
| } |
|
|
| .container { |
| max-width: 800px; |
| margin: 0 auto; |
| background: rgba(255, 255, 255, 0.95); |
| border-radius: 20px; |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); |
| backdrop-filter: blur(10px); |
| overflow: hidden; |
| animation: slideUp 0.6s ease-out; |
| } |
|
|
| @keyframes slideUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| |
| .header { |
| background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); |
| color: white; |
| padding: 40px 30px; |
| text-align: center; |
| } |
|
|
| .title { |
| font-size: 2.5rem; |
| font-weight: 700; |
| margin-bottom: 10px; |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); |
| } |
|
|
| .subtitle { |
| font-size: 1.1rem; |
| opacity: 0.9; |
| font-weight: 300; |
| } |
|
|
| |
| .main-content { |
| padding: 40px 30px; |
| } |
|
|
| .upload-section { |
| margin-bottom: 30px; |
| } |
|
|
| .form-group { |
| margin-bottom: 25px; |
| } |
|
|
| .form-label { |
| display: block; |
| font-size: 1.1rem; |
| font-weight: 600; |
| color: #2c3e50; |
| margin-bottom: 10px; |
| } |
|
|
| .form-textarea { |
| width: 100%; |
| padding: 15px; |
| border: 2px solid #e1e8ed; |
| border-radius: 12px; |
| font-size: 1rem; |
| font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; |
| resize: vertical; |
| transition: all 0.3s ease; |
| background: #f8f9fa; |
| } |
|
|
| .form-textarea:focus { |
| outline: none; |
| border-color: #667eea; |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| background: white; |
| } |
|
|
| .form-hint { |
| font-size: 0.9rem; |
| color: #6c757d; |
| margin-top: 8px; |
| font-style: italic; |
| } |
|
|
| .form-actions { |
| display: flex; |
| gap: 15px; |
| flex-wrap: wrap; |
| } |
|
|
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 12px 24px; |
| border: none; |
| border-radius: 10px; |
| font-size: 1rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| text-decoration: none; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .btn::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); |
| transition: left 0.5s; |
| } |
|
|
| .btn:hover::before { |
| left: 100%; |
| } |
|
|
| .btn-primary { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); |
| } |
|
|
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); |
| } |
|
|
| .btn-primary:disabled { |
| background: #95a5a6; |
| cursor: not-allowed; |
| transform: none; |
| box-shadow: none; |
| } |
|
|
| .btn-secondary { |
| background: #f8f9fa; |
| color: #495057; |
| border: 2px solid #dee2e6; |
| } |
|
|
| .btn-secondary:hover { |
| background: #e9ecef; |
| border-color: #adb5bd; |
| transform: translateY(-1px); |
| } |
|
|
| .btn-ghost { |
| background: transparent; |
| color: #6c757d; |
| border: 1px solid #dee2e6; |
| padding: 8px 16px; |
| font-size: 0.9rem; |
| } |
|
|
| .btn-ghost:hover { |
| background: #f8f9fa; |
| color: #495057; |
| } |
|
|
| |
| .results-section { |
| margin-top: 30px; |
| border: 2px solid #e1e8ed; |
| border-radius: 12px; |
| overflow: hidden; |
| animation: fadeIn 0.5s ease-out; |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
|
|
| .results-header { |
| background: #f8f9fa; |
| padding: 15px 20px; |
| border-bottom: 1px solid #e1e8ed; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| .results-title { |
| font-size: 1.2rem; |
| font-weight: 600; |
| color: #2c3e50; |
| margin: 0; |
| } |
|
|
| .results-content { |
| padding: 20px; |
| background: white; |
| font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; |
| font-size: 0.9rem; |
| line-height: 1.8; |
| white-space: pre-wrap; |
| max-height: 400px; |
| overflow-y: auto; |
| } |
|
|
| |
| .loading-section { |
| text-align: center; |
| padding: 40px 20px; |
| animation: fadeIn 0.3s ease-out; |
| } |
|
|
| .loading-spinner { |
| width: 50px; |
| height: 50px; |
| border: 4px solid #f3f3f3; |
| border-top: 4px solid #667eea; |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| margin: 0 auto 20px; |
| } |
|
|
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
|
|
| .loading-text { |
| font-size: 1.1rem; |
| color: #6c757d; |
| font-weight: 500; |
| } |
|
|
| |
| .footer { |
| background: #f8f9fa; |
| padding: 25px 30px; |
| border-top: 1px solid #e1e8ed; |
| } |
|
|
| .footer-content { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 20px; |
| } |
|
|
| .status-indicators { |
| display: flex; |
| gap: 20px; |
| flex-wrap: wrap; |
| } |
|
|
| .status-item { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 0.9rem; |
| } |
|
|
| .status-badge { |
| padding: 4px 8px; |
| border-radius: 6px; |
| font-size: 0.8rem; |
| font-weight: 600; |
| background: #e9ecef; |
| color: #495057; |
| } |
|
|
| .status-badge.success { |
| background: #d4edda; |
| color: #155724; |
| } |
|
|
| .status-badge.error { |
| background: #f8d7da; |
| color: #721c24; |
| } |
|
|
| .status-badge.warning { |
| background: #fff3cd; |
| color: #856404; |
| } |
|
|
| .footer-links { |
| display: flex; |
| gap: 15px; |
| flex-wrap: wrap; |
| } |
|
|
| .footer-link { |
| color: #6c757d; |
| text-decoration: none; |
| font-size: 0.9rem; |
| padding: 5px 10px; |
| border-radius: 6px; |
| transition: all 0.3s ease; |
| } |
|
|
| .footer-link:hover { |
| background: #e9ecef; |
| color: #495057; |
| } |
|
|
| |
| .result-line { |
| margin: 5px 0; |
| padding: 8px 12px; |
| border-radius: 6px; |
| border-left: 4px solid transparent; |
| } |
|
|
| .result-success { |
| background: #d4edda; |
| border-left-color: #28a745; |
| color: #155724; |
| } |
|
|
| .result-error { |
| background: #f8d7da; |
| border-left-color: #dc3545; |
| color: #721c24; |
| } |
|
|
| .result-warning { |
| background: #fff3cd; |
| border-left-color: #ffc107; |
| color: #856404; |
| } |
|
|
| .result-info { |
| background: #d1ecf1; |
| border-left-color: #17a2b8; |
| color: #0c5460; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| body { |
| padding: 10px; |
| } |
| |
| .container { |
| border-radius: 15px; |
| } |
| |
| .header { |
| padding: 30px 20px; |
| } |
| |
| .title { |
| font-size: 2rem; |
| } |
| |
| .main-content { |
| padding: 30px 20px; |
| } |
| |
| .form-actions { |
| flex-direction: column; |
| } |
| |
| .btn { |
| justify-content: center; |
| width: 100%; |
| } |
| |
| .footer-content { |
| flex-direction: column; |
| text-align: center; |
| } |
| |
| .status-indicators { |
| justify-content: center; |
| } |
| } |
|
|
| |
| .keyboard-hint { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| background: rgba(0, 0, 0, 0.8); |
| color: white; |
| padding: 10px 15px; |
| border-radius: 8px; |
| font-size: 0.8rem; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| pointer-events: none; |
| z-index: 1000; |
| } |
|
|
| .keyboard-hint.show { |
| opacity: 1; |
| } |
|
|
| |
| html { |
| scroll-behavior: smooth; |
| } |
|
|
|
|
