Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document Authoring SDK</title> | |
| <style> | |
| /* Reset default margins and padding */ | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| #app { | |
| height: 100%; | |
| } | |
| .toolbar-container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 15px; | |
| flex-wrap: wrap; | |
| } | |
| .toolbar-select { | |
| padding: 8px 12px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| background: white; | |
| font-size: 14px; | |
| color: #333; | |
| min-width: 120px; | |
| cursor: pointer; | |
| outline: none; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .toolbar-select:hover { | |
| border-color: #bbb; | |
| } | |
| .toolbar-select:focus { | |
| border-color: #3498db; | |
| box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); | |
| } | |
| .toolbar-button { | |
| padding: 8px 16px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| background: white; | |
| font-size: 14px; | |
| color: #333; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| outline: none; | |
| white-space: nowrap; | |
| } | |
| .toolbar-button:hover { | |
| background: #f8f8f8; | |
| border-color: #bbb; | |
| } | |
| .toolbar-button:active { | |
| background: #eee; | |
| } | |
| .toolbar-button.primary { | |
| background: #3498db; | |
| border-color: #3498db; | |
| color: white; | |
| } | |
| .toolbar-button.primary:hover { | |
| background: #2980b9; | |
| border-color: #2980b9; | |
| } | |
| .toolbar-button:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .toolbar-button .spinner { | |
| border-color: rgba(255, 255, 255, 0.3); | |
| border-top-color: white; | |
| } | |
| .spinner { | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid #f3f3f3; | |
| border-top: 2px solid #3498db; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-right: 8px; | |
| vertical-align: middle; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| #translationControls { | |
| display: none; | |
| } | |
| #statusIndicator { | |
| text-align: center; | |
| padding: 8px; | |
| background: white; | |
| border-radius: 4px; | |
| margin-bottom: 10px; | |
| font-size: 14px; | |
| color: #666; | |
| } | |
| #loadingOverlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255, 255, 255, 0.9); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| } | |
| #loadingSpinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid #f3f3f3; | |
| border-top: 5px solid #3498db; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: 20px; | |
| } | |
| #loadingMessage { | |
| font-size: 18px; | |
| color: #333; | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| /* Responsive styles */ | |
| @media (max-width: 768px) { | |
| .toolbar-container { | |
| gap: 10px; | |
| } | |
| .toolbar-select { | |
| min-width: auto; | |
| flex: 1; | |
| font-size: 13px; | |
| padding: 8px; | |
| } | |
| .toolbar-button { | |
| font-size: 13px; | |
| padding: 8px 12px; | |
| } | |
| #translateButton { | |
| width: 100%; | |
| margin-top: 5px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .toolbar-container { | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .toolbar-select, .toolbar-button { | |
| width: 100%; | |
| } | |
| span { | |
| transform: rotate(90deg); | |
| margin: 5px 0; | |
| } | |
| } | |
| /* Prevent zoom on iOS when focusing inputs */ | |
| @media screen and (-webkit-min-device-pixel-ratio: 0) { | |
| select, | |
| button { | |
| font-size: 16px ; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="loadingOverlay"> | |
| <div id="loadingSpinner"></div> | |
| <div id="loadingMessage">Initializing AI models... This may take a while.</div> | |
| </div> | |
| <div id="app"> | |
| <div style="height: 100vh; display: flex; flex-direction: column;"> | |
| <div style="background: #f5f5f5; border-bottom: 1px solid #ddd; padding: 15px;"> | |
| <div id="statusIndicator"> | |
| <span class="spinner"></span> Translation services starting... | |
| </div> | |
| <div id="translationControls" style="display: none;"> | |
| <div class="toolbar-container"> | |
| <select id="sourceLanguageSelect" class="toolbar-select"> | |
| <option value="English" selected>English</option> | |
| <option value="Spanish">Spanish</option> | |
| <option value="French">French</option> | |
| <option value="German">German</option> | |
| </select> | |
| <span style="color: #666; font-weight: 500;">→</span> | |
| <select id="targetLanguageSelect" class="toolbar-select"> | |
| <option value="Spanish" selected>Spanish</option> | |
| <option value="French">French</option> | |
| <option value="German">German</option> | |
| </select> | |
| <button id="translateButton" class="toolbar-button primary">Translate Document</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="flex: 1; display: flex; flex-direction: column; position: relative;"> | |
| <div id="editor" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/document-authoring.js"></script> | |
| </body> | |
| </html> | |