/* Upload Section */ .upload-container { display: flex; justify-content: center; align-items: center; } .upload-container.hidden { display: none; } .upload-card { width: 100%; text-align: center; } .upload-header { margin-bottom: 30px; } .upload-header h2 { font-size: 28px; margin-bottom: 10px; color: #333; } .upload-header p { color: #6c757d; font-size: 16px; } .drop-zone { border: 2px dashed #007bff; padding: 50px; margin-bottom: 20px; border-radius: 10px; background-color: #f8f9fa; cursor: pointer; width: 100%; text-align: center; } form#uploadForm h2 { font-size: 21px; font-weight: 600; } .drop-zone.dragover { border-color: #4a6cf7; background-color: rgba(74, 108, 247, 0.05); color: #4a6cf7; } .drop-zone i { font-size: 64px; margin-bottom: 20px; color: #4a6cf7; } .drop-zone h3 { font-size: 20px; margin-bottom: 10px; color: #333; } .drop-zone p { font-size: 16px; margin-bottom: 0; } .browse-btn { padding: 12px 24px; background: #4a6cf7; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 16px; display:none; transition: all 0.3s ease; } .browse-btn:hover { background: #3a5bd9; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(74, 108, 247, 0.3); } input[type="file"] { display: none; } /* Preview Section */ .preview-container { display: none; flex-direction: column; height: calc(100vh - 80px); } .preview-container.active { display: flex; } .preview-header { background: #fff; border-radius: 16px 16px 0 0; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .preview-title { display: flex; align-items: center; gap: 15px; } .preview-title h2 { font-size: 22px; color: #333; } .file-info { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #f8fafc; border-radius: 8px; } .file-icon { width: 36px; height: 36px; background: #4a6cf7; color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .file-name { font-weight: 500; color: #333; } .file-size { font-size: 12px; color: #6c757d; } .preview-actions { display: flex; gap: 10px; } .preview-btn { padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; } .preview-btn.primary { background: #4a6cf7; color: white; } .preview-btn.primary:hover { background: #3a5bd9; } .preview-btn.secondary { background: #f8fafc; color: #6c757d; } .preview-btn.secondary:hover { background: #e9ecef; } .preview-content { flex: 1; background: #fff; border-radius: 0 0 16px 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } .preview-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #e9ecef; background: #f8fafc; } .zoom-controls { display: flex; align-items: center; gap: 10px; } .zoom-level { font-size: 14px; color: #6c757d; min-width: 50px; text-align: center; } .preview-document-container { flex: 1; overflow: auto; padding: 30px; background: #f5f7fa; display: flex; justify-content: center; } .preview-document { background: white; padding: 40px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); width: 100%; line-height: 1.6; transform-origin: top center; transition: transform 0.3s ease; font-family: 'Times New Roman', Times, serif; font-size: 12pt; height: 100%; display: inline-table; } /* Preserve document styling with better font support */ .preview-document h1, .preview-document h2, .preview-document h3, .preview-document h4, .preview-document h5, .preview-document h6 { margin-bottom: 16px; color: #333; font-weight: bold; } .preview-document h1 { font-size: 24pt; } .preview-document h2 { font-size: 20pt; } .preview-document h3 { font-size: 16pt; } .preview-document p { margin-bottom: 12px; text-align: justify; } .preview-document ul, .preview-document ol { margin-bottom: 12px; padding-left: 30px; } .preview-document li { margin-bottom: 6px; } .preview-document table { border-collapse: collapse; width: 100%; margin-bottom: 16px; } .preview-document th, .preview-document td { border: 1px solid #ddd; padding: 8px; text-align: left; } .preview-document th { background-color: #f2f2f2; } .preview-document strong, .preview-document b { font-weight: bold; } .preview-document em, .preview-document i { font-style: italic; } .preview-document u { text-decoration: underline; } .preview-document a { color: #4a6cf7; text-decoration: underline; } .preview-document blockquote { border-left: 4px solid #ddd; margin: 16px 0; padding-left: 16px; font-style: italic; } /* Conversion Section */ .conversion-section { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); padding: 30px; margin-top: 30px; display: none; } .conversion-section.active { display: block; } .conversion-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .conversion-header h2 { font-size: 22px; color: #333; } .conversion-options { display: flex; gap: 20px; margin-bottom: 20px; } .option-group { flex: 1; } .option-label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; } .option-select { width: 100%; padding: 10px; border: 1px solid #d1d9e6; border-radius: 8px; background: white; } .convert-btn { padding: 12px 24px; background: #28a745; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 16px; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } .convert-btn:hover { background: #218838; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3); } .convert-btn:disabled { background: #6c757d; cursor: not-allowed; transform: none; box-shadow: none; } .spinner { margin: 20px auto; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #4a6cf7; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .result-section { margin-top: 20px; padding: 20px; background: #f8fafc; border-radius: 8px; display: none; } .result-section.active { display: block; } .download-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 12px 24px; background-color: #007BFF; color: #fff; border-radius: 8px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; } .download-btn:hover { background: #0069d9; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3); } .download-btn.disabled { opacity: 0.5; pointer-events: none; } .countdown { margin-top: 10px; font-size: 14px; color: #6c757d; } .toast { position: fixed; bottom: 20px; right: 20px; background: white; padding: 16px 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 12px; transform: translateY(100px); opacity: 0; transition: all 0.3s ease; z-index: 1000; } .toast.show { transform: translateY(0); opacity: 1; } .toast.success { border-left: 4px solid #28a745; } .toast.error { border-left: 4px solid #dc3545; } .toast.info { border-left: 4px solid #17a2b8; } .toast i { font-size: 20px; } .toast.success i { color: #28a745; } .toast.error i { color: #dc3545; } .toast.info i { color: #17a2b8; } @media (max-width: 768px) { .preview-header { flex-direction: column; gap: 15px; } .conversion-options { flex-direction: column; } }