mirror of
https://github.com/ONLYOFFICE/onlyoffice.github.io.git
synced 2026-02-10 18:05:06 +08:00
336 lines
10 KiB
HTML
336 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mathpix Plugin</title>
|
|
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
|
|
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
|
|
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
#scrollable-container {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background-color: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
.logo {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
h1 {
|
|
font-size: 16px;
|
|
color: #2c3e50;
|
|
margin: 0;
|
|
}
|
|
#dropZone {
|
|
border: 2px dashed #3498db;
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
height: 200px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
#dropZone:hover, #dropZone.dragover {
|
|
background-color: #ecf0f1;
|
|
}
|
|
.image-preview {
|
|
max-width: 100%;
|
|
margin-bottom: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
.result-box {
|
|
background-color: #f9f9f9;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.preview-container {
|
|
overflow-x: auto;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
button {
|
|
background-color: #3498db;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 15px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
margin-right: 10px;
|
|
}
|
|
button:hover {
|
|
background-color: #2980b9;
|
|
}
|
|
input[type="text"], select, textarea {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-bottom: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
.error {
|
|
color: #e74c3c;
|
|
background-color: #fadbd8;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
}
|
|
#resultContainer {
|
|
display: none;
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
padding-right: 10px;
|
|
}
|
|
#recognizeButton, #clearButton {
|
|
display: none;
|
|
margin-top: 10px;
|
|
}
|
|
.formatSelector {
|
|
margin-bottom: 10px;
|
|
}
|
|
.codeDisplay {
|
|
width: 100%;
|
|
min-height: 150px;
|
|
max-height: 300px;
|
|
margin-bottom: 10px;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
background-color: #ffffff;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
resize: vertical;
|
|
outline: none;
|
|
}
|
|
.codeDisplay:focus {
|
|
border-color: #3498db;
|
|
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
|
|
}
|
|
#errorContainer {
|
|
display: none;
|
|
}
|
|
#insertArea {
|
|
width: 100%;
|
|
height: 100px;
|
|
margin-top: 20px;
|
|
}
|
|
#imageContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
padding-right: 10px;
|
|
}
|
|
.image-item {
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
#configPanel {
|
|
display: none;
|
|
position: absolute;
|
|
top: 60px;
|
|
right: 10px;
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
z-index: 1000;
|
|
}
|
|
#settingsButton {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
font-size: 16px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: #f1f1f1;
|
|
color: #333;
|
|
border: 1px solid #ddd;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
#settingsButton:hover {
|
|
background-color: #e1e1e1;
|
|
}
|
|
.checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.checkbox-group label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
/* Add dark theme styles */
|
|
body.dark-theme {
|
|
background-color: #2d2d2d;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark-theme .container {
|
|
background-color: #363636;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.dark-theme h1, .dark-theme h2, .dark-theme h3 {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark-theme #dropZone {
|
|
border-color: #4a9eff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark-theme #dropZone:hover, .dark-theme #dropZone.dragover {
|
|
background-color: #404040;
|
|
}
|
|
|
|
.dark-theme .result-box {
|
|
background-color: #404040;
|
|
border-color: #505050;
|
|
}
|
|
|
|
.dark-theme .preview-container {
|
|
background-color: #363636;
|
|
border-color: #505050;
|
|
}
|
|
|
|
.dark-theme .codeDisplay {
|
|
background-color: #2d2d2d;
|
|
border-color: #505050;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark-theme .codeDisplay:focus {
|
|
border-color: #4a9eff;
|
|
}
|
|
|
|
.dark-theme #configPanel {
|
|
background-color: #363636;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.dark-theme #settingsButton {
|
|
background-color: #404040;
|
|
color: #ffffff;
|
|
border-color: #505050;
|
|
}
|
|
|
|
.dark-theme #settingsButton:hover {
|
|
background-color: #505050;
|
|
}
|
|
|
|
.dark-theme input[type="text"],
|
|
.dark-theme select,
|
|
.dark-theme textarea {
|
|
background-color: #2d2d2d;
|
|
border-color: #505050;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark-theme .error {
|
|
background-color: #662c2c;
|
|
color: #ff9999;
|
|
}
|
|
</style>
|
|
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="scrollable-container">
|
|
<div class="container">
|
|
<div class="header">
|
|
<img src="resources/dark/favicon.ico" alt="Mathpix Logo" class="logo">
|
|
<h1 class="i18n">Mathpix</h1>
|
|
</div>
|
|
|
|
<button id="settingsButton" aria-label="Settings" class="i18n">⚙️</button>
|
|
<div id="configPanel">
|
|
<h3 class="i18n">Configuration</h3>
|
|
<label for="appId" class="i18n">Mathpix App ID:</label>
|
|
<input type="text" id="appId" placeholder="Enter your App ID" class="i18n">
|
|
<label for="appKey" class="i18n">Mathpix APP Key:</label>
|
|
<input type="text" id="appKey" placeholder="Enter your APP Key" class="i18n">
|
|
<button id="saveCredentialsBtn" style="padding: 5px 10px; font-size: 14px;" class="i18n">Save Credentials</button>
|
|
<p>
|
|
<span class="i18n">Don't have an API key?</span>
|
|
<a href="https://mathpix.com/ocr" target="_blank" class="i18n">Register here</a>
|
|
</p>
|
|
<br>
|
|
<label class="i18n">Output Formats:</label>
|
|
<div class="checkbox-group">
|
|
<label><input type="checkbox" name="outputFormat" value="latex" checked> <span class="i18n">LaTeX</span></label>
|
|
<label><input type="checkbox" name="outputFormat" value="text" checked> <span class="i18n">Text</span></label>
|
|
<label><input type="checkbox" name="outputFormat" value="mathml"> <span class="i18n">MathML</span></label>
|
|
<label><input type="checkbox" name="outputFormat" value="html"> <span class="i18n">HTML</span></label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dropZone">
|
|
<p class="i18n">Click to upload</p>
|
|
</div>
|
|
<input type="file" id="fileInput" accept="image/*" multiple style="display: none;">
|
|
|
|
<div id="imageContainer"></div>
|
|
<button id="recognizeButton" class="i18n">Recognize</button>
|
|
<button id="clearButton" class="i18n">Clear</button>
|
|
</div>
|
|
|
|
<div id="errorContainer" class="error"></div>
|
|
|
|
<div id="resultContainer" class="container">
|
|
<h2 class="i18n">Results</h2>
|
|
<!-- Results will be dynamically added here -->
|
|
</div>
|
|
</div>
|
|
|
|
<script src="scripts/code.js"></script>
|
|
</body>
|
|
</html> |