diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 2276081..6ec3921 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,7 +6,7 @@
-
+
@@ -620,7 +620,7 @@
-
+
diff --git a/docutranslate/static/index.html b/docutranslate/static/index.html
index fad8090..b15a8a0 100644
--- a/docutranslate/static/index.html
+++ b/docutranslate/static/index.html
@@ -28,11 +28,11 @@
}
.error-message {
- color: #d32f2f; /* Pico invalid color */
+ color: #d32f2f;
}
.success-message {
- color: #2e7d32; /* Pico valid color */
+ color: #2e7d32;
}
a.no-style {
@@ -70,15 +70,14 @@
.checkbox-group {
display: flex;
flex-wrap: wrap;
- gap: 1rem; /* Added gap for better spacing */
+ gap: 1rem;
margin-bottom: 1rem;
}
- .checkbox-group label { /* Ensure checkboxes are aligned */
+ .checkbox-group label {
margin-right: 10px;
}
-
#resultArea {
margin-top: 1.5rem;
padding-top: 1rem;
@@ -110,17 +109,86 @@
background-color: #fff;
margin: 2% auto;
padding: 20px;
- width: 90%;
- max-width: 900px;
- max-height: 90vh;
+ width: 95%;
+ max-width: 1400px;
+ height: 90vh;
border-radius: 8px;
- overflow: auto;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
}
- #previewFrame {
- width: 100%;
- min-height: 500px;
+ #previewTitleBar {
+ display: flex;
+ align-items: center; /* Vertically align items */
+ margin-bottom: 10px;
+ flex-shrink: 0; /* Prevent shrinking when content is large */
+ }
+
+ #previewModalTitle {
+ margin: 0; /* Remove default h3 margin */
+ font-size: 1.2rem; /* Adjust title size */
+ }
+
+ .preview-view-mode-buttons { /* This is a Pico .button-group */
+ margin-left: 1.5rem; /* Space from title */
+ /* Pico styles will apply display:flex, gap */
+ }
+ .preview-view-mode-buttons button {
+ font-size: 0.85rem; /* Smaller buttons for toggle */
+ padding: 0.4rem 0.8rem;
+ }
+
+
+ #closeModalBtnInTitle { /* Renamed to avoid conflict if another element has closeModalBtn */
+ cursor: pointer;
+ margin-left: auto; /* Pushes close button to the very right */
+ font-size: 1.5rem;
+ line-height: 1;
+ padding: 0 0.5rem; /* Add some clickable area */
+ }
+
+
+ #previewContainer {
+ display: flex;
+ flex-grow: 1;
+ gap: 15px;
+ overflow: hidden;
+ min-height: 0;
+ }
+
+ .preview-pane {
+ flex: 1 1 0; /* Grow, Shrink, Basis. Basis 0 for even distribution with gap */
+ min-width: 0; /* Important for flex items that might contain oversized content */
border: 1px solid #ddd;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ background-color: #f9f9f9;
+ }
+
+ .preview-pane h4 {
+ margin: 0;
+ padding: 8px 12px;
+ background-color: #efefef;
+ border-bottom: 1px solid #ddd;
+ font-size: 0.9rem;
+ text-align: center;
+ flex-shrink: 0; /* Prevent title from shrinking */
+ }
+
+ .preview-pane iframe, .preview-pane pre {
+ width: 100%;
+ flex-grow: 1;
+ border: none;
+ overflow: auto;
+ background-color: #fff;
+ }
+ .preview-pane pre {
+ padding: 10px;
+ white-space: pre-wrap;
+ word-break: break-all;
+ font-family: monospace;
}
#printFrame {
@@ -162,7 +230,7 @@
color: #1a531d;
}
- #fileDropArea.input-error, input.input-error, select.input-error { /* Extended to input/select */
+ #fileDropArea.input-error, input.input-error, select.input-error {
border-color: #d32f2f !important;
}
@@ -175,6 +243,34 @@
.form-grid {
grid-template-columns: 1fr;
}
+ #previewContainer {
+ flex-direction: column;
+ height: auto;
+ }
+ .modal-content {
+ height: 95vh;
+ }
+ .preview-pane {
+ min-height: 300px;
+ }
+ #previewTitleBar {
+ flex-wrap: wrap; /* Allow wrapping for smaller screens */
+ }
+ .preview-view-mode-buttons {
+ margin-left: 0;
+ margin-top: 0.5rem; /* Space when wrapped */
+ width: 100%; /* Take full width when wrapped */
+ justify-content: center;
+ }
+ #closeModalBtnInTitle {
+ order: -1; /* Move close button to top left on wrap if needed, or adjust layout */
+ margin-left: auto; /* Keep it to the right */
+ }
+ #previewModalTitle {
+ width: 100%; /* Allow title to take width if buttons wrap below */
+ text-align: center;
+ margin-bottom: 0.5rem; /* Space if buttons wrap */
+ }
}
@@ -291,18 +387,39 @@
运行日志
+
+