initial commit
This commit is contained in:
f1den committed
1 parent
eeab594b68
commit
e1ed811084
57 files changed
+18704
No files matched your search
@@ -0,0 +1,696 @@
|
||||
:root {
|
||||
--primary-color: #2196F3;
|
||||
--primary-hover: #0b7dda;
|
||||
--success-color: #4CAF50;
|
||||
--error-color: #f44336;
|
||||
--warning-color: #ff9800;
|
||||
--text-color: #333;
|
||||
--light-gray: #f5f5f5;
|
||||
--medium-gray: #ddd;
|
||||
--dark-gray: #666;
|
||||
--purple: #673ab7;
|
||||
--deep-purple: #5c6bc0;
|
||||
--brown: #795548;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
color: var(--text-color);
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #444;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid var(--medium-gray);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid var(--medium-gray);
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
background-color: var(--light-gray);
|
||||
border: 1px solid var(--medium-gray);
|
||||
border-bottom: none;
|
||||
margin-right: 5px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
margin-bottom: -1px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 4px 4px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.difference {
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--medium-gray);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.key {
|
||||
font-weight: bold;
|
||||
color: #0066cc;
|
||||
}
|
||||
|
||||
.old-value {
|
||||
color: var(--error-color);
|
||||
background-color: #ffebee;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: Consolas, monospace;
|
||||
}
|
||||
|
||||
.new-value {
|
||||
color: var(--success-color);
|
||||
background-color: #e8f5e9;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: Consolas, monospace;
|
||||
}
|
||||
|
||||
.type {
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.changed {
|
||||
background-color: #fff3e0;
|
||||
color: #e65100;
|
||||
}
|
||||
|
||||
.added {
|
||||
background-color: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.removed {
|
||||
background-color: #ffebee;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.key-list {
|
||||
margin-bottom: 30px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.key-item {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.key-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.key-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.translation-controls {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.translation-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.translation-input {
|
||||
width: 100%;
|
||||
min-height: 38px;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
border: 1px solid #7fb3d5;
|
||||
border-radius: 4px;
|
||||
margin-top: 5px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
resize: none;
|
||||
overflow-y: hidden;
|
||||
line-height: 1.4;
|
||||
transition: all 0.2s;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.translation-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||||
}
|
||||
|
||||
.copy-btn, .suggest-btn, .copy-clipboard-btn, .undo-btn, .redo-btn {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background-color: #7fb3d5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background-color: #5d9cc5;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.suggest-btn {
|
||||
background-color: #9c27b0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.suggest-btn:hover {
|
||||
background-color: #7b1fa2;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.copy-clipboard-btn {
|
||||
background-color: #607d8b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.copy-clipboard-btn:hover {
|
||||
background-color: #455a64;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.copy-clipboard-btn.copied {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.copy-clipboard-btn.failed {
|
||||
background-color: var(--error-color);
|
||||
}
|
||||
|
||||
.ai-suggest-btn {
|
||||
background-color: var(--purple);
|
||||
}
|
||||
|
||||
.ai-suggest-btn:hover {
|
||||
background-color: #5e35b1;
|
||||
}
|
||||
|
||||
.suggestion-btn-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.save-all-btn {
|
||||
padding: 10px 20px;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.save-all-btn:hover {
|
||||
background-color: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.status-message {
|
||||
margin-left: 15px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
.backup-info {
|
||||
font-size: 0.9em;
|
||||
color: var(--dark-gray);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.scroll-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
z-index: 1000;
|
||||
transition: all 0.3s;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.scroll-top:hover {
|
||||
background-color: var(--primary-hover);
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scroll-top:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.scroll-top.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.suggestions-container, .ai-suggestions-container {
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.suggestions-container {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.ai-suggestions-container {
|
||||
background-color: #f5f0ff;
|
||||
}
|
||||
|
||||
.suggestion, .ai-suggestion {
|
||||
margin-bottom: 0;
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.suggestion:last-child, .ai-suggestion:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.suggestion:hover {
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
|
||||
.ai-suggestion:hover {
|
||||
background-color: #ede7f6;
|
||||
}
|
||||
|
||||
.suggestion-source {
|
||||
font-weight: bold;
|
||||
color: var(--deep-purple);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: var(--dark-gray);
|
||||
font-style: italic;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.suggestions-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
background-color: #e0e0e0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ai-suggestions-container .suggestions-header {
|
||||
background-color: #e6d8ff;
|
||||
}
|
||||
|
||||
.close-suggestions {
|
||||
cursor: pointer;
|
||||
color: var(--dark-gray);
|
||||
font-weight: bold;
|
||||
padding: 2px 8px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.close-suggestions:hover {
|
||||
color: #333;
|
||||
background-color: #d0d0d0;
|
||||
}
|
||||
|
||||
.ai-suggestions-container .close-suggestions:hover {
|
||||
background-color: #d9c7ff;
|
||||
}
|
||||
|
||||
.suggestion-number {
|
||||
font-weight: bold;
|
||||
color: var(--purple);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.undo-redo-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.undo-btn, .redo-btn {
|
||||
background-color: var(--brown);
|
||||
color: white;
|
||||
padding: 5px 12px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.undo-btn:hover, .redo-btn:hover {
|
||||
background-color: #5d4037;
|
||||
}
|
||||
|
||||
.undo-btn:disabled, .redo-btn:disabled {
|
||||
background-color: #bdbdbd;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.key-value-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* Settings Tab Styles */
|
||||
.settings-tab {
|
||||
margin-left: auto;
|
||||
border-left: 1px solid var(--medium-gray);
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid var(--medium-gray);
|
||||
}
|
||||
|
||||
.settings-section:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
margin-left: 10px;
|
||||
flex-grow: 1;
|
||||
min-width: 200px; /* Added minimum width for labels */
|
||||
}
|
||||
|
||||
.setting-control {
|
||||
width: 300px; /* Fixed width for the control container */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.setting-input, .setting-textarea, .setting-select {
|
||||
width: 100%; /* Will take full width of parent .setting-control */
|
||||
max-width: 300px; /* Maximum width to prevent over-expansion */
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--medium-gray);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
box-sizing: border-box; /* Include padding in width calculation */
|
||||
}
|
||||
|
||||
.setting-textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.setting-input:focus, .setting-textarea:focus, .setting-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||||
}
|
||||
|
||||
.settings-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.save-settings-btn, .reset-settings-btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.save-settings-btn {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.save-settings-btn:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.reset-settings-btn {
|
||||
background-color: var(--medium-gray);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.reset-settings-btn:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
/* Switch styles */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Dark theme styles remain the same */
|
||||
.dark-theme {
|
||||
--text-color: #e0e0e0;
|
||||
--light-gray: #333;
|
||||
--medium-gray: #555;
|
||||
--dark-gray: #999;
|
||||
background-color: #222;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.dark-theme h1,
|
||||
.dark-theme h2,
|
||||
.dark-theme h3 {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.dark-theme .tab-content,
|
||||
.dark-theme .key-list,
|
||||
.dark-theme .translation-controls,
|
||||
.dark-theme .difference {
|
||||
background-color: #333;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.dark-theme .tab {
|
||||
background-color: #444;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.dark-theme .tab.active {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.dark-theme .translation-input {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.dark-theme .suggestions-container {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.dark-theme .ai-suggestions-container {
|
||||
background-color: #3a2d4a;
|
||||
}
|
||||
|
||||
.dark-theme .suggestion,
|
||||
.dark-theme .ai-suggestion {
|
||||
background-color: #444;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.dark-theme .suggestion:hover {
|
||||
background-color: #2a3a4a;
|
||||
}
|
||||
|
||||
.dark-theme .ai-suggestion:hover {
|
||||
background-color: #4a3a5a;
|
||||
}
|
||||
|
||||
.dark-theme .suggestions-header {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
.dark-theme .ai-suggestions-container .suggestions-header {
|
||||
background-color: #5a4a6a;
|
||||
}
|
||||
|
||||
/* Toast notifications */
|
||||
.toast-notification {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 12px 24px;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
z-index: 1001;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toast-notification.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast-notification.info {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.toast-notification.success {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.toast-notification.error {
|
||||
background-color: var(--error-color);
|
||||
}
|
||||
|
||||
.toast-notification.warning {
|
||||
background-color: var(--warning-color);
|
||||
}
|
||||
@@ -0,0 +1,548 @@
|
||||
// Textarea auto-resize functionality
|
||||
function autoResizeTextarea(textarea) {
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = (textarea.scrollHeight + 2) + 'px';
|
||||
}
|
||||
|
||||
function initAutoResizeTextareas() {
|
||||
const textareas = document.querySelectorAll('.translation-input');
|
||||
|
||||
textareas.forEach(textarea => {
|
||||
textarea.addEventListener('input', function() {
|
||||
autoResizeTextarea(this);
|
||||
});
|
||||
|
||||
textarea.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
const start = this.selectionStart;
|
||||
const end = this.selectionEnd;
|
||||
|
||||
this.value = this.value.substring(0, start) + '\n' + this.value.substring(end);
|
||||
this.selectionStart = this.selectionEnd = start + 1;
|
||||
autoResizeTextarea(this);
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => autoResizeTextarea(textarea), 0);
|
||||
});
|
||||
}
|
||||
|
||||
// Copy functionality
|
||||
function copyToTranslation(key, value, inputId) {
|
||||
const textarea = document.getElementById(inputId);
|
||||
textarea.value = value;
|
||||
textarea.focus();
|
||||
autoResizeTextarea(textarea);
|
||||
|
||||
const btn = event.target;
|
||||
const originalText = btn.textContent;
|
||||
btn.textContent = 'Copied!';
|
||||
setTimeout(() => btn.textContent = originalText, 2000);
|
||||
}
|
||||
|
||||
function copyToClipboard(event, text) {
|
||||
event.preventDefault();
|
||||
const btn = event.currentTarget;
|
||||
const originalText = btn.textContent;
|
||||
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
btn.textContent = 'Copied!';
|
||||
btn.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
btn.textContent = originalText;
|
||||
btn.classList.remove('copied');
|
||||
}, 2000);
|
||||
}).catch(() => {
|
||||
// Fallback for older browsers
|
||||
try {
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
|
||||
btn.textContent = 'Copied!';
|
||||
btn.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
btn.textContent = originalText;
|
||||
btn.classList.remove('copied');
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
btn.textContent = 'Failed!';
|
||||
btn.classList.add('failed');
|
||||
setTimeout(() => {
|
||||
btn.textContent = originalText;
|
||||
btn.classList.remove('failed');
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Translation suggestions functionality
|
||||
async function getTranslationSuggestions(text, inputId, containerId) {
|
||||
const container = document.getElementById(containerId);
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = `
|
||||
<div class="suggestions-header">
|
||||
<span>Translation Suggestions</span>
|
||||
<span class="close-suggestions" onclick="closeSuggestions('${containerId}', true)">×</span>
|
||||
</div>
|
||||
<div class="loading">Loading suggestions...</div>
|
||||
`;
|
||||
|
||||
try {
|
||||
const response = await fetch('/get_translation_suggestions', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({text: text})
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
container.innerHTML = `
|
||||
<div class="suggestions-header">
|
||||
<span>Error getting translation suggestions</span>
|
||||
<span class="close-suggestions" onclick="closeSuggestions('${containerId}', true)">×</span>
|
||||
</div>
|
||||
<div class="error-message">${data.error}</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<div class="suggestions-header">
|
||||
<span>Translation Suggestions</span>
|
||||
<span class="close-suggestions" onclick="closeSuggestions('${containerId}', true)">×</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (data.yandex) {
|
||||
html += `<div class="suggestion" onclick="useSuggestion('${inputId}', '${escapeHtml(data.yandex)}')">
|
||||
<span class="suggestion-source">Yandex:</span> ${data.yandex}
|
||||
</div>`;
|
||||
}
|
||||
if (data.google) {
|
||||
html += `<div class="suggestion" onclick="useSuggestion('${inputId}', '${escapeHtml(data.google)}')">
|
||||
<span class="suggestion-source">Google:</span> ${data.google}
|
||||
</div>`;
|
||||
}
|
||||
if (data.deepl) {
|
||||
html += `<div class="suggestion" onclick="useSuggestion('${inputId}', ${escapeHtml(data.deepl)})">
|
||||
<span class="suggestion-source">DeepL:</span> ${data.deepl}
|
||||
</div>`;
|
||||
}
|
||||
if (data.ai_suggestion) {
|
||||
html += `<div class="suggestion" onclick="useSuggestion('${inputId}', ${escapeHtml(data.ai_suggestion)})">
|
||||
<span class="suggestion-source">AI:</span> ${data.ai_suggestion}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
} catch (error) {
|
||||
container.innerHTML = `
|
||||
<div class="suggestions-header">
|
||||
<span>Error getting translation suggestions</span>
|
||||
<span class="close-suggestions" onclick="closeSuggestions('${containerId}', true)">×</span>
|
||||
</div>
|
||||
<div class="error-message">Error loading suggestions: ${error.message}</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
async function getAISuggestions(text, inputId, containerId) {
|
||||
const container = document.getElementById(containerId);
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = `
|
||||
<div class="suggestions-header">
|
||||
<span>AI Translation Suggestions</span>
|
||||
<span class="close-suggestions" onclick="closeSuggestions('${containerId}', true)">×</span>
|
||||
</div>
|
||||
<div class="loading">Loading AI suggestions...</div>
|
||||
`;
|
||||
|
||||
try {
|
||||
const response = await fetch('/get_ai_suggestions', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({text: text})
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
container.innerHTML = `
|
||||
<div class="suggestions-header">
|
||||
<span>Error getting AI suggestions</span>
|
||||
<span class="close-suggestions" onclick="closeSuggestions('${containerId}', true)">×</span>
|
||||
</div>
|
||||
<div class="error-message">${data.error}</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<div class="suggestions-header">
|
||||
<span>AI Translation Suggestions</span>
|
||||
<span class="close-suggestions" onclick="closeSuggestions('${containerId}', true)">×</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (data.suggestions?.length > 0) {
|
||||
data.suggestions.forEach((suggestion, index) => {
|
||||
html += `
|
||||
<div class="ai-suggestion" onclick="useSuggestion('${inputId}', '${escapeHtml(suggestion)}')">
|
||||
<span class="suggestion-number">${index + 1}.</span>
|
||||
${suggestion}
|
||||
</div>
|
||||
`;
|
||||
|
||||
});
|
||||
} else {
|
||||
html += `<div class="error-message">No AI suggestions available</div>`;
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
} catch (error) {
|
||||
container.innerHTML = `
|
||||
<div class="suggestions-header">
|
||||
<span>Error getting AI suggestions</span>
|
||||
<span class="close-suggestions" onclick="closeSuggestions('${containerId}', true)">×</span>
|
||||
</div>
|
||||
<div class="error-message">Error loading AI suggestions: ${error.message}</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function closeSuggestions(containerId, clearContent = false) {
|
||||
const container = document.getElementById(containerId);
|
||||
container.style.display = 'none';
|
||||
if (clearContent) {
|
||||
container.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
function useSuggestion(inputId, suggestion) {
|
||||
const textarea = document.getElementById(inputId);
|
||||
textarea.dataset.programmaticChange = 'true';
|
||||
textarea.value = suggestion;
|
||||
textarea.focus();
|
||||
autoResizeTextarea(textarea);
|
||||
addToHistory(textarea);
|
||||
}
|
||||
|
||||
function escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// Tab functionality
|
||||
function openTab(evt, tabName) {
|
||||
const tabcontent = document.getElementsByClassName("tab-content");
|
||||
for (let i = 0; i < tabcontent.length; i++) {
|
||||
tabcontent[i].classList.remove("active");
|
||||
}
|
||||
|
||||
const tablinks = document.getElementsByClassName("tab");
|
||||
for (let i = 0; i < tablinks.length; i++) {
|
||||
tablinks[i].classList.remove("active");
|
||||
}
|
||||
|
||||
document.getElementById(tabName).classList.add("active");
|
||||
evt.currentTarget.classList.add("active");
|
||||
|
||||
initAutoResizeTextareas();
|
||||
}
|
||||
|
||||
// Scroll to top functionality
|
||||
function scrollToTop() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
const scrollButton = document.querySelector('.scroll-top');
|
||||
if (window.pageYOffset > 300) {
|
||||
scrollButton.classList.add('visible');
|
||||
} else {
|
||||
scrollButton.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
|
||||
// Translation saving functionality
|
||||
function collectTranslations() {
|
||||
const translations = {};
|
||||
const textareas = document.querySelectorAll('.translation-input');
|
||||
|
||||
textareas.forEach(textarea => {
|
||||
const key = textarea.id.replace('input-', '');
|
||||
const originalKey = document.querySelector(`#translation-${key} .key`).textContent;
|
||||
let value = textarea.value.trim();
|
||||
if (value.startsWith("[{")) {
|
||||
translations[originalKey] = eval(value);
|
||||
console.warn("EVALED")
|
||||
} else {
|
||||
translations[originalKey] = value;
|
||||
}
|
||||
});
|
||||
|
||||
return translations;
|
||||
}
|
||||
|
||||
async function saveAllTranslations() {
|
||||
const translations = collectTranslations();
|
||||
const statusMessage = document.getElementById('status-message');
|
||||
|
||||
try {
|
||||
const response = await fetch('/save_translations', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(translations)
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
statusMessage.textContent = `Successfully saved ${data.saved} translations`;
|
||||
statusMessage.className = 'status-message success-message';
|
||||
} else {
|
||||
statusMessage.textContent = 'Error: ' + (data.message || 'Unknown error');
|
||||
statusMessage.className = 'status-message error-message';
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
statusMessage.textContent = '';
|
||||
statusMessage.className = 'status-message';
|
||||
}, 3000);
|
||||
} catch (error) {
|
||||
statusMessage.textContent = 'Error: ' + error.message;
|
||||
statusMessage.className = 'status-message error-message';
|
||||
}
|
||||
}
|
||||
|
||||
// Undo/Redo functionality
|
||||
let changeHistory = {};
|
||||
let currentHistoryIndex = {};
|
||||
|
||||
function initChangeTracking() {
|
||||
const textareas = document.querySelectorAll('.translation-input');
|
||||
textareas.forEach(textarea => {
|
||||
const id = textarea.id;
|
||||
changeHistory[id] = [textarea.value];
|
||||
currentHistoryIndex[id] = 0;
|
||||
|
||||
textarea.addEventListener('input', function() {
|
||||
if (!this.dataset.programmaticChange) {
|
||||
addToHistory(this);
|
||||
}
|
||||
delete this.dataset.programmaticChange;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function addToHistory(textarea) {
|
||||
const id = textarea.id;
|
||||
const currentValue = textarea.value;
|
||||
|
||||
if (changeHistory[id][currentHistoryIndex[id]] === currentValue) return;
|
||||
|
||||
changeHistory[id] = changeHistory[id].slice(0, currentHistoryIndex[id] + 1);
|
||||
changeHistory[id].push(currentValue);
|
||||
currentHistoryIndex[id] = changeHistory[id].length - 1;
|
||||
|
||||
updateUndoRedoButtons(id);
|
||||
}
|
||||
|
||||
function updateUndoRedoButtons(inputId) {
|
||||
const undoBtn = document.querySelector(`#${inputId}`).closest('.key-item').querySelector('.undo-btn');
|
||||
const redoBtn = document.querySelector(`#${inputId}`).closest('.key-item').querySelector('.redo-btn');
|
||||
|
||||
undoBtn.disabled = currentHistoryIndex[inputId] <= 0;
|
||||
redoBtn.disabled = currentHistoryIndex[inputId] >= changeHistory[inputId].length - 1;
|
||||
}
|
||||
|
||||
function undoChange(inputId) {
|
||||
const textarea = document.getElementById(inputId);
|
||||
if (currentHistoryIndex[inputId] > 0) {
|
||||
currentHistoryIndex[inputId]--;
|
||||
textarea.dataset.programmaticChange = 'true';
|
||||
textarea.value = changeHistory[inputId][currentHistoryIndex[inputId]];
|
||||
autoResizeTextarea(textarea);
|
||||
updateUndoRedoButtons(inputId);
|
||||
}
|
||||
}
|
||||
|
||||
function redoChange(inputId) {
|
||||
const textarea = document.getElementById(inputId);
|
||||
if (currentHistoryIndex[inputId] < changeHistory[inputId].length - 1) {
|
||||
currentHistoryIndex[inputId]++;
|
||||
textarea.dataset.programmaticChange = 'true';
|
||||
textarea.value = changeHistory[inputId][currentHistoryIndex[inputId]];
|
||||
autoResizeTextarea(textarea);
|
||||
updateUndoRedoButtons(inputId);
|
||||
}
|
||||
}
|
||||
|
||||
function showToast(message, type = 'info') {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast-notification ${type}`;
|
||||
toast.textContent = message;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('show');
|
||||
}, 10);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', e => {
|
||||
// Save on Ctrl+S
|
||||
console.log("DEBUG")
|
||||
if (e.ctrlKey && (e.key.toLowerCase() === 's' || e.key.toLowerCase() === 'ы')) {
|
||||
e.preventDefault();
|
||||
const translationTab = document.getElementById('translation');
|
||||
if (translationTab?.classList.contains('active')) {
|
||||
saveAllTranslations();
|
||||
showToast('Saving all translations...', 'info');
|
||||
}
|
||||
}
|
||||
|
||||
// Undo on Ctrl+Z
|
||||
if (e.ctrlKey && e.key.toLowerCase() === 'z' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
const activeTextarea = document.activeElement;
|
||||
if (activeTextarea?.classList.contains('translation-input')) {
|
||||
undoChange(activeTextarea.id);
|
||||
showToast('Undo last change', 'info');
|
||||
}
|
||||
}
|
||||
|
||||
// Redo on Ctrl+Y or Ctrl+Shift+Z
|
||||
if ((e.ctrlKey && e.key.toLowerCase() === 'y') ||
|
||||
(e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'z')) {
|
||||
e.preventDefault();
|
||||
const activeTextarea = document.activeElement;
|
||||
if (activeTextarea?.classList.contains('translation-input')) {
|
||||
redoChange(activeTextarea.id);
|
||||
showToast('Redo last change', 'info');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Settings functionality
|
||||
function tabinitSettings() {
|
||||
// Theme switch
|
||||
const themeSwitch = document.getElementById('theme-switch');
|
||||
themeSwitch.addEventListener('change', function() {
|
||||
document.body.classList.toggle('dark-theme', this.checked);
|
||||
localStorage.setItem('darkTheme', this.checked);
|
||||
});
|
||||
|
||||
// Load theme preference
|
||||
if (localStorage.getItem('darkTheme') === 'true') {
|
||||
themeSwitch.checked = true;
|
||||
document.body.classList.add('dark-theme');
|
||||
}
|
||||
|
||||
// Custom preprompt switch
|
||||
const prepromptSwitch = document.getElementById('custom-preprompt-switch');
|
||||
const prepromptTextarea = document.getElementById('custom-preprompt');
|
||||
prepromptSwitch.addEventListener('change', function() {
|
||||
prepromptTextarea.disabled = !this.checked;
|
||||
});
|
||||
|
||||
// Proxy switch
|
||||
const proxySwitch = document.getElementById('yandex-proxy-switch');
|
||||
const proxySettings = document.querySelector('.proxy-settings');
|
||||
proxySwitch.addEventListener('change', function() {
|
||||
proxySettings.style.display = this.checked ? 'block' : 'none';
|
||||
});
|
||||
|
||||
// Load saved settings
|
||||
tabloadSettings();
|
||||
}
|
||||
|
||||
function tabloadSettings() {
|
||||
// This would load from localStorage or server in a real app
|
||||
console.log('Loading settings...');
|
||||
}
|
||||
|
||||
function tabsaveSettings() {
|
||||
const settings = {
|
||||
darkTheme: document.getElementById('theme-switch').checked,
|
||||
customPreprompt: {
|
||||
enabled: document.getElementById('custom-preprompt-switch').checked,
|
||||
text: document.getElementById('custom-preprompt').value
|
||||
},
|
||||
deepseekApiKey: document.getElementById('deepseek-api-key').value,
|
||||
yandex: {
|
||||
apiType: document.getElementById('yandex-api-type').value,
|
||||
proxy: {
|
||||
enabled: document.getElementById('yandex-proxy-switch').checked,
|
||||
type: document.getElementById('proxy-type').value,
|
||||
address: document.getElementById('proxy-address').value
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// In a real app, this would save to localStorage or server
|
||||
console.log('Saving settings:', settings);
|
||||
|
||||
const status = document.getElementById('settings-status');
|
||||
status.textContent = 'Settings saved!';
|
||||
status.className = 'status-message success-message';
|
||||
|
||||
setTimeout(() => {
|
||||
status.textContent = '';
|
||||
status.className = 'status-message';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function tabresetSettings() {
|
||||
if (confirm('Are you sure you want to reset all settings to defaults?')) {
|
||||
// Reset all settings to default values
|
||||
document.getElementById('theme-switch').checked = false;
|
||||
document.body.classList.remove('dark-theme');
|
||||
|
||||
document.getElementById('custom-preprompt-switch').checked = false;
|
||||
document.getElementById('custom-preprompt').value = '';
|
||||
document.getElementById('custom-preprompt').disabled = true;
|
||||
|
||||
document.getElementById('deepseek-api-key').value = '';
|
||||
|
||||
document.getElementById('yandex-api-type').value = 'web';
|
||||
document.getElementById('yandex-proxy-switch').checked = false;
|
||||
document.querySelector('.proxy-settings').style.display = 'none';
|
||||
document.getElementById('proxy-type').value = 'http';
|
||||
document.getElementById('proxy-address').value = '';
|
||||
|
||||
const status = document.getElementById('settings-status');
|
||||
status.textContent = 'Settings reset to defaults!';
|
||||
status.className = 'status-message success-message';
|
||||
|
||||
setTimeout(() => {
|
||||
status.textContent = '';
|
||||
status.className = 'status-message';
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page is fully loaded
|
||||
window.addEventListener('load', function() {
|
||||
initAutoResizeTextareas();
|
||||
initChangeTracking();
|
||||
tabinitSettings();
|
||||
});
|
||||
Reference in new issue
Block a user