const googleTranslateURL = 'https://google-translate1.p.rapidapi.com/language/translate/v2';
const textTranslateURL = 'https://text-translator2.p.rapidapi.com/translate';
var rapidApiKey = "";
document.write(`
<div style="min-height: 100vh; background: linear-gradient(135deg, #f3e5f5, #e1bee7); font-family: system-ui, -apple-system, sans-serif;">
<!-- Navbar with centered text -->
<nav style="background-color: #ce93d8; padding: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<div style="max-width: 1000px; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
<h1 style="color: #fff; font-size: 1.5rem; margin: 0; text-align: center;">Pearl and Drishtis Translation World</h1>
</div>
</nav>
<!-- Rest of the content remains the same -->
<div style="padding: 40px 20px;">
<div style="max-width: 1000px; margin: 0 auto;">
<h1 style="color: #6a1b9a; font-size: 2.5rem; margin-bottom: 40px; text-align: center;">Translation API Comparison</h1>
<div id="apiKeys" style="background-color: #fff3e0; border: 1px solid #ffe0b2; margin-bottom: 30px; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
<h3 style="margin-top: 0; margin-bottom: 20px; color: #4a148c; font-size: 1.5rem;">API Configuration</h3>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<label style="font-weight: 500; min-width: 120px;">RapidAPI Key:</label>
<input
style="flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid #e1bee7; border-radius: 6px; font-size: 1rem;"
maxlength="2000"
id="rapidApiKey"
value=""
>
<button
onclick="setKey();"
style="background-color: #ba68c8; color: white; border: none; border-radius: 6px; padding: 10px 20px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s; hover: {background-color: #ab47bc};"
>Set Key</button>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
<!-- Google Translate Section -->
<div style="background-color: #e8f5e9; border: 1px solid #c8e6c9; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
<h3 style="margin-top: 0; margin-bottom: 20px; color: #4a148c; font-size: 1.5rem;">Google Translate</h3>
<div style="display: flex; flex-direction: column; gap: 16px;">
<select
id="googleTargetLang"
style="width: 100%; padding: 10px 12px; border: 1px solid #c8e6c9; border-radius: 6px; font-size: 1rem; background-color: white;"
>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="id">Indonesian</option>
<option value="zh">Chinese</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="ru">Russian</option>
<option value="ar">Arabic</option>
<option value="it">Italian</option>
<option value="pt">Portuguese</option>
<option value="hi">Hindi</option>
<option value="tr">Turkish</option>
<option value="vi">Vietnamese</option>
<option value="th">Thai</option>
</select>
<textarea
id="googleSourceText"
rows="4"
style="width: 100%; padding: 12px; border: 1px solid #c8e6c9; border-radius: 6px; font-size: 1rem; resize: vertical;"
placeholder="Enter text to translate..."
>Hello world!</textarea>
<button
onclick="translateGoogle();"
style="background-color: #81c784; color: white; border: none; border-radius: 6px; padding: 12px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s; width: 100%;"
>Translate with Google</button>
<div id="googleDebug" style="color: #6b7280; font-size: 0.875rem;"></div>
<div id="googleResults" style="background-color: #f1f8e9; padding: 16px; border-radius: 6px; color: #1b5e20; min-height: 60px;"></div>
</div>
</div>
<!-- Text Translator Section -->
<div style="background-color: #f3e5f5; border: 1px solid #e1bee7; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
<h3 style="margin-top: 0; margin-bottom: 20px; color: #4a148c; font-size: 1.5rem;">Text Translator</h3>
<div style="display: flex; flex-direction: column; gap: 16px;">
<select
id="textTargetLang"
style="width: 100%; padding: 10px 12px; border: 1px solid #e1bee7; border-radius: 6px; font-size: 1rem; background-color: white;"
>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="id">Indonesian</option>
<option value="zh">Chinese</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="ru">Russian</option>
<option value="ar">Arabic</option>
<option value="it">Italian</option>
<option value="pt">Portuguese</option>
<option value="hi">Hindi</option>
<option value="tr">Turkish</option>
<option value="vi">Vietnamese</option>
<option value="th">Thai</option>
</select>
<textarea
id="textSourceText"
rows="4"
style="width: 100%; padding: 12px; border: 1px solid #e1bee7; border-radius: 6px; font-size: 1rem; resize: vertical;"
placeholder="Enter text to translate..."
>Hello world!</textarea>
<button
onclick="translateText();"
style="background-color: #ce93d8; color: white; border: none; border-radius: 6px; padding: 12px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s; width: 100%;"
>Translate with Text Translator</button>
<div id="textDebug" style="color: #6b7280; font-size: 0.875rem;"></div>
<div id="textResults" style="background-color: #f8bbd0; padding: 16px; border-radius: 6px; color: #4a148c; min-height: 60px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
`);
function setKey() {
rapidApiKey = $("#rapidApiKey").val().trim();
$("#apiKeys").html("<b>API key has been set.</b>");
}
async function translateGoogle() {
const text = $("#googleSourceText").val();
const targetLang = $("#googleTargetLang").val();
const debug = $("#googleDebug");
const results = $("#googleResults");
results.html("<i>Translating...</i>");
debug.html("Sending request to Google API...");
try {
if (!rapidApiKey) {
throw new Error("RapidAPI key not set");
}
const response = await fetch(googleTranslateURL, {
method: 'POST',
headers: {
'x-rapidapi-key': rapidApiKey,
'x-rapidapi-host': 'google-translate1.p.rapidapi.com',
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
q: text,
target: targetLang
})
});
debug.html(`Response status: ${response.status} ${response.statusText}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
results.html(`<strong>Translation:</strong><br>${data.data.translations[0].translatedText}`);
} catch (error) {
debug.html(`Error: ${error.message}`);
results.html(`<font color="red">Translation failed. Check debug info above.</font>`);
}
}
async function translateText() {
const text = $("#textSourceText").val();
const targetLang = $("#textTargetLang").val();
const debug = $("#textDebug");
const results = $("#textResults");
results.html("<i>Translating...</i>");
debug.html("Sending request to Text Translator API...");
try {
if (!rapidApiKey) {
throw new Error("RapidAPI key not set");
}
const response = await fetch(textTranslateURL, {
method: 'POST',
headers: {
'x-rapidapi-key': rapidApiKey,
'x-rapidapi-host': 'text-translator2.p.rapidapi.com',
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
source_language: 'en',
target_language: targetLang,
text: text
})
});
const rawResponse = await response.text();
console.log(rawResponse);
debug.html(`Response status: ${response.status} ${response.statusText}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = JSON.parse(rawResponse);
console.log(data);
if (data && data.data && data.data.translatedText) {
results.html(`<strong>Translation:</strong><br>${data.data.translatedText}`);
} else {
throw new Error("Unexpected response structure.");
}
} catch (error) {
debug.html(`Error: ${error.message}`);
results.html(`<font color="red">Translation failed. Check debug info above.</font>`);
}
}