xixu-me
b935544b22
Updated the text to clarify that the default API endpoint is a pre-deployed instance, improving readability and user understanding.
382 lines
14 KiB
HTML
382 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<!-- Basic Meta Tags -->
|
|
<title>DeepLX App - Free DeepL Translation Alternative</title>
|
|
<meta
|
|
name="description"
|
|
content="Free web-based translation app powered by DeepLX API. Translate text between 30+ languages with auto-detection, translation history, and RTL support. No API keys or subscription fees required."
|
|
/>
|
|
<meta
|
|
name="keywords"
|
|
content="translation, translator, DeepLX, AI translation, free translator, language translation, multilingual, auto translate"
|
|
/>
|
|
<meta name="author" content="Xi Xu" />
|
|
<meta name="robots" content="index, follow" />
|
|
<meta name="language" content="English" />
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/x-icon" href="logo.ico" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="logo.png" />
|
|
<link rel="apple-touch-icon" href="logo.png" />
|
|
|
|
<!-- Open Graph Meta Tags (Facebook, LinkedIn) -->
|
|
<meta property="og:type" content="website" />
|
|
<meta
|
|
property="og:title"
|
|
content="DeepLX App - Free DeepL Translation Alternative"
|
|
/>
|
|
<meta
|
|
property="og:description"
|
|
content="Free web-based translation app powered by DeepLX API. Translate text between 30+ languages with auto-detection, translation history, and RTL support. No API keys or subscription fees required."
|
|
/>
|
|
<meta property="og:image" content="logo.png" />
|
|
<meta property="og:url" content="https://deeplx.xi-xu.me" />
|
|
<meta property="og:site_name" content="DeepLX App" />
|
|
<meta property="og:locale" content="en_US" />
|
|
|
|
<!-- Twitter Card Meta Tags -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta
|
|
name="twitter:title"
|
|
content="DeepLX App - Free DeepL Translation Alternative"
|
|
/>
|
|
<meta
|
|
name="twitter:description"
|
|
content="Free web-based translation app powered by DeepLX API. Translate text between 30+ languages with auto-detection, translation history, and RTL support. No API keys or subscription fees required."
|
|
/>
|
|
<meta name="twitter:image" content="logo.png" />
|
|
<meta name="twitter:creator" content="@xixu_me" />
|
|
<meta name="twitter:site" content="@xixu_me" />
|
|
|
|
<!-- Additional Meta Tags -->
|
|
<meta name="theme-color" content="#1f2937" />
|
|
<meta name="msapplication-TileColor" content="#1f2937" />
|
|
<meta name="msapplication-config" content="browserconfig.xml" />
|
|
<meta name="application-name" content="DeepLX App" />
|
|
<meta name="apple-mobile-web-app-title" content="DeepLX App" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta
|
|
name="apple-mobile-web-app-status-bar-style"
|
|
content="black-translucent"
|
|
/>
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
|
|
<!-- Canonical URL -->
|
|
<link rel="canonical" href="https://deeplx.xi-xu.me" />
|
|
|
|
<!-- Preconnect for Performance -->
|
|
<link rel="preconnect" href="https://cdn.tailwindcss.com" />
|
|
<link rel="preconnect" href="https://unpkg.com" />
|
|
|
|
<!-- Import Tailwind CSS for modern design -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Import Lucide Icons library -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body
|
|
class="bg-gray-900 text-gray-200 flex items-center justify-center min-h-screen p-4"
|
|
>
|
|
<div class="w-full max-w-4xl mx-auto">
|
|
<header class="text-center mb-6">
|
|
<h1 class="text-4xl font-bold text-white animate-fade-in">
|
|
DeepLX App
|
|
</h1>
|
|
<p class="text-gray-400 mt-2 animate-fade-in-delay">
|
|
The web app using the DeepLX API
|
|
</p>
|
|
</header>
|
|
|
|
<main class="bg-gray-800 shadow-2xl rounded-xl p-6 animate-slide-up">
|
|
<!-- Language selection and operation area -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-center mb-4">
|
|
<!-- Source language selection -->
|
|
<div class="flex flex-col">
|
|
<label
|
|
for="sourceLang"
|
|
class="mb-1 text-sm font-medium text-gray-400"
|
|
>Source Language</label
|
|
>
|
|
<select
|
|
id="sourceLang"
|
|
class="lang-select w-full p-2 rounded-md"
|
|
></select>
|
|
</div>
|
|
<!-- Target language selection -->
|
|
<div class="flex flex-col">
|
|
<label
|
|
for="targetLang"
|
|
class="mb-1 text-sm font-medium text-gray-400"
|
|
>Target Language</label
|
|
>
|
|
<select
|
|
id="targetLang"
|
|
class="lang-select w-full p-2 rounded-md"
|
|
></select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Text input/output area -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Input area -->
|
|
<div class="relative">
|
|
<label class="block text-sm font-medium text-gray-400 mb-2">
|
|
<i data-lucide="edit-3" class="w-4 h-4 inline mr-1"></i>
|
|
Input Text
|
|
</label>
|
|
<textarea
|
|
id="inputText"
|
|
class="translate-textarea w-full p-3 rounded-lg"
|
|
placeholder="Enter text to translate here... (Auto-translate enabled)"
|
|
maxlength="5000"
|
|
></textarea>
|
|
<div class="absolute bottom-2 right-2 text-xs text-gray-500">
|
|
<span id="charCount">0</span>/5000
|
|
</div>
|
|
</div>
|
|
<!-- Output area -->
|
|
<div class="relative">
|
|
<label class="block text-sm font-medium text-gray-400 mb-2">
|
|
<i data-lucide="languages" class="w-4 h-4 inline mr-1"></i>
|
|
Translation Result
|
|
</label>
|
|
<textarea
|
|
id="outputText"
|
|
class="translate-textarea w-full p-3 rounded-lg"
|
|
placeholder="Translation result will appear here automatically..."
|
|
readonly
|
|
></textarea>
|
|
<button
|
|
id="copyButton"
|
|
title="Copy to clipboard"
|
|
class="action-btn absolute top-8 right-2 p-2 rounded-full bg-gray-700 text-gray-400 hover:text-white"
|
|
>
|
|
<i data-lucide="copy" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Control buttons and status area -->
|
|
<div
|
|
class="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
id="swapButton"
|
|
title="Swap languages"
|
|
class="action-btn p-2 rounded-full bg-gray-700 text-gray-400 hover:text-white flex items-center gap-2"
|
|
>
|
|
<i data-lucide="arrow-left-right" class="w-5 h-5"></i>
|
|
<span class="hidden sm:inline">Swap Languages</span>
|
|
</button>
|
|
<button
|
|
id="historyButton"
|
|
title="Translation history"
|
|
class="action-btn p-2 rounded-full bg-gray-700 text-gray-400 hover:text-white flex items-center gap-2"
|
|
>
|
|
<i data-lucide="history" class="w-5 h-5"></i>
|
|
<span class="hidden sm:inline">History</span>
|
|
</button>
|
|
<button
|
|
id="settingsButton"
|
|
title="Settings"
|
|
class="action-btn p-2 rounded-full bg-gray-700 text-gray-400 hover:text-white flex items-center gap-2"
|
|
>
|
|
<i data-lucide="settings" class="w-5 h-5"></i>
|
|
<span class="hidden sm:inline">Settings</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div
|
|
id="loadingSpinner"
|
|
class="hidden w-5 h-5 border-2 border-gray-400 rounded-full"
|
|
></div>
|
|
<div
|
|
id="statusMessage"
|
|
class="text-green-400 text-sm h-5 text-right"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick tips -->
|
|
<div class="mt-4 p-3 bg-gray-700 rounded-lg">
|
|
<div class="text-xs text-gray-400 space-y-1">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="info" class="w-3 h-3"></i>
|
|
<span>Auto-translation activates after you stop typing</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="keyboard" class="w-3 h-3"></i>
|
|
<span
|
|
>Press Ctrl+Enter to translate manually • Esc to close
|
|
panels</span
|
|
>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="clock" class="w-3 h-3"></i>
|
|
<span>Translation history is automatically saved</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- History Panel -->
|
|
<div
|
|
id="historyPanel"
|
|
class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 animate-fade-in"
|
|
>
|
|
<div
|
|
class="bg-gray-800 rounded-xl p-6 w-full max-w-2xl max-h-96 overflow-hidden animate-slide-up shadow-2xl"
|
|
>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="history" class="w-5 h-5"></i>
|
|
Translation History
|
|
</h2>
|
|
<button
|
|
id="closeHistoryButton"
|
|
class="action-btn p-2 rounded-full bg-gray-700 text-gray-400 hover:text-white"
|
|
>
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<span class="text-gray-400 text-sm" id="historyCount"
|
|
>0 records</span
|
|
>
|
|
<button
|
|
id="clearHistoryButton"
|
|
class="action-btn px-3 py-1 rounded bg-red-600 hover:bg-red-700 text-white text-sm transition-colors"
|
|
>
|
|
Clear All
|
|
</button>
|
|
</div>
|
|
<div id="historyList" class="space-y-2 overflow-y-auto max-h-64">
|
|
<!-- History items will be inserted here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Panel -->
|
|
<div
|
|
id="settingsPanel"
|
|
class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 animate-fade-in"
|
|
>
|
|
<div
|
|
class="bg-gray-800 rounded-xl p-6 w-full max-w-md animate-slide-up shadow-2xl"
|
|
>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="settings" class="w-5 h-5"></i>
|
|
Settings
|
|
</h2>
|
|
<button
|
|
id="closeSettingsButton"
|
|
class="action-btn p-2 rounded-full bg-gray-700 text-gray-400 hover:text-white"
|
|
>
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<!-- API Endpoint -->
|
|
<div>
|
|
<label
|
|
for="apiUrlInput"
|
|
class="block mb-1 font-medium text-gray-400 flex items-center gap-2"
|
|
>
|
|
<i data-lucide="link" class="w-4 h-4"></i>
|
|
API Endpoint
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="apiUrlInput"
|
|
class="api-input w-full p-2 rounded-md text-gray-300"
|
|
placeholder="https://your-deeplx-api.com/translate"
|
|
/>
|
|
</div>
|
|
<!-- Auto-translate delay -->
|
|
<div>
|
|
<label
|
|
for="delayInput"
|
|
class="block mb-1 font-medium text-gray-400 flex items-center gap-2"
|
|
>
|
|
<i data-lucide="timer" class="w-4 h-4"></i>
|
|
Auto-translate Delay (ms)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
id="delayInput"
|
|
min="100"
|
|
max="5000"
|
|
step="100"
|
|
class="api-input w-full p-2 rounded-md text-gray-300"
|
|
/>
|
|
<p class="text-xs text-gray-500 mt-1">
|
|
Delay before auto-translation starts (100-5000ms)
|
|
</p>
|
|
</div>
|
|
<!-- Enable auto-translate -->
|
|
<div class="flex items-center justify-between">
|
|
<label
|
|
for="autoTranslateToggle"
|
|
class="font-medium text-gray-400 flex items-center gap-2"
|
|
>
|
|
<i data-lucide="zap" class="w-4 h-4"></i>
|
|
Enable Auto-translate
|
|
</label>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
id="autoTranslateToggle"
|
|
class="sr-only peer"
|
|
/>
|
|
<div
|
|
class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
|
|
></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer
|
|
class="text-center mt-6 text-gray-500 text-sm animate-fade-in-delay-3"
|
|
>
|
|
<p>
|
|
The default API endpoint is a pre-deployed instance of
|
|
<a
|
|
href="https://github.com/xixu-me/DeepLX"
|
|
target="_blank"
|
|
class="underline hover:text-gray-300 transition-colors"
|
|
>https://github.com/xixu-me/DeepLX</a
|
|
>
|
|
</p>
|
|
<p class="mt-1">
|
|
The source code repository of this app is
|
|
<a
|
|
href="https://github.com/xixu-me/DeepLX-App"
|
|
target="_blank"
|
|
class="underline hover:text-gray-300 transition-colors"
|
|
>https://github.com/xixu-me/DeepLX-App</a
|
|
>
|
|
</p>
|
|
<p class="mt-1">
|
|
Copyright © 2025
|
|
<a
|
|
href="https://xi-xu.me"
|
|
target="_blank"
|
|
class="underline hover:text-gray-300 transition-colors"
|
|
>Xi Xu</a
|
|
>. All rights reserved.
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|