<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polyglot - Universal Language Translator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
color: #333;
min-height: 100vh;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 90%;
max-width: 1200px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
header {
background: linear-gradient(to right, #2c3e50, #4a6491);
color: white;
padding: 25px 40px;
text-align: center;
position: relative;
}
header h1 {
font-size: 2.8rem;
margin-bottom: 10px;
letter-spacing: 1px;
}
header p {
font-size: 1.2rem;
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
}
.globe-icon {
position: absolute;
top: 20px;
right: 30px;
font-size: 2.5rem;
opacity: 0.7;
}
.translator-container {
display: flex;
flex-wrap: wrap;
padding: 30px;
gap: 25px;
}
.language-panel {
flex: 1;
min-width: 300px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
padding: 20px;
transition: transform 0.3s ease;
}
.language-panel:hover {
transform: translateY(-5px);
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}
.panel-header h2 {
font-size: 1.4rem;
color: #2c3e50;
}
select {
padding: 10px 15px;
border: 2px solid #ddd;
border-radius: 8px;
background: white;
font-size: 1rem;
width: 180px;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 15px;
cursor: pointer;
}
select:hover {
border-color: #4a6491;
}
textarea {
width: 100%;
height: 200px;
padding: 15px;
border: 2px solid #ddd;
border-radius: 10px;
font-size: 1.1rem;
resize: none;
transition: border-color 0.3s;
}
textarea:focus {
outline: none;
border-color: #4a6491;
box-shadow: 0 0 0 3px rgba(74, 100, 145, 0.2);
}
.btn-container {
display: flex;
justify-content: center;
margin: 25px 0;
}
.swap-btn {
background: #2c3e50;
color: white;
border: none;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.swap-btn:hover {
background: #4a6491;
transform: rotate(180deg);
}
.translate-btn {
background: linear-gradient(to right, #1a2a6c, #b21f1f);
color: white;
border: none;
padding: 14px 40px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.translate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.translate-btn:active {
transform: translateY(0);
}
.languages-info {
background: #f8f9fa;
padding: 25px;
border-top: 1px solid #eee;
text-align: center;
}
.languages-info h3 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.4rem;
}
.languages-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
margin-top: 15px;
}
.language-card {
background: white;
border-radius: 10px;
padding: 12px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
gap: 10px;
transition: transform 0.2s;
}
.language-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.language-flag {
width: 30px;
height: 20px;
border-radius: 3px;
background-size: cover;
background-position: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.language-name {
font-weight: 500;
font-size: 0.95rem;
}
footer {
text-align: center;
padding: 20px;
background: #2c3e50;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
@media (max-width: 768px) {
.translator-container {
flex-direction: column;
}
header h1 {
font-size: 2.2rem;
}
.swap-btn {
align-self: center;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="globe-icon">
<i class="fas fa-globe-americas"></i>
</div>
<h1>Polyglot Translator</h1>
<p>Translate between 100+ languages instantly with our AI-powered translation service</p>
</header>
<div class="translator-container">
<div class="language-panel">
<div class="panel-header">
<h2>From Language</h2>
<select id="fromLanguage">
<option value="auto">Detect Language</option>
<option value="en" selected>English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="it">Italian</option>
<option value="pt">Portuguese</option>
<option value="ru">Russian</option>
<option value="zh">Chinese (Simplified)</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="ar">Arabic</option>
<option value="hi">Hindi</option>
<option value="bn">Bengali</option>
<option value="ur">Urdu</option>
<option value="tr">Turkish</option>
<option value="pl">Polish</option>
<option value="nl">Dutch</option>
<option value="sv">Swedish</option>
<option value="da">Danish</option>
<option value="fi">Finnish</option>
<option value="no">Norwegian</option>
<option value="cs">Czech</option>
<option value="el">Greek</option>
<option value="he">Hebrew</option>
<option value="th">Thai</option>
<option value="vi">Vietnamese</option>
<option value="id">Indonesian</option>
<option value="ms">Malay</option>
<option value="fa">Persian</option>
<option value="uk">Ukrainian</option>
<option value="ro">Romanian</option>
<option value="hu">Hungarian</option>
<option value="sk">Slovak</option>
<option value="bg">Bulgarian</option>
<option value="hr">Croatian</option>
<option value="sr">Serbian</option>
<option value="sl">Slovenian</option>
<option value="et">Estonian</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="sw">Swahili</option>
<option value="tl">Tagalog</option>
<option value="am">Amharic</option>
<option value="ne">Nepali</option>
<option value="si">Sinhala</option>
<option value="km">Khmer</option>
<option value="my">Burmese</option>
<option value="lo">Lao</option>
<option value="ka">Georgian</option>
<option value="hy">Armenian</option>
<option value="az">Azerbaijani</option>
<option value="eu">Basque</option>
<option value="ca">Catalan</option>
<option value="gl">Galician</option>
<option value="is">Icelandic</option>
<option value="mk">Macedonian</option>
<option value="mt">Maltese</option>
</select>
</div>
<textarea id="inputText" placeholder="Enter text to translate..."></textarea>
</div>
<div class="btn-container">
<button class="swap-btn" id="swapBtn">
<i class="fas fa-exchange-alt"></i>
</button>
</div>
<div class="language-panel">
<div class="panel-header">
<h2>To Language</h2>
<select id="toLanguage">
<option value="en">English</option>
<option value="es" selected>Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="it">Italian</option>
<option value="pt">Portuguese</option>
<option value="ru">Russian</option>
<option value="zh">Chinese (Simplified)</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="ar">Arabic</option>
<option value="hi">Hindi</option>
<option value="bn">Bengali</option>
<option value="ur">Urdu</option>
<option value="tr">Turkish</option>
<option value="pl">Polish</option>
<option value="nl">Dutch</option>
<option value="sv">Swedish</option>
<option value="da">Danish</option>
<option value="fi">Finnish</option>
<option value="no">Norwegian</option>
<option value="cs">Czech</option>
<option value="el">Greek</option>
<option value="he">Hebrew</option>
<option value="th">Thai</option>
<option value="vi">Vietnamese</option>
<option value="id">Indonesian</option>
<option value="ms">Malay</option>
<option value="fa">Persian</option>
<option value="uk">Ukrainian</option>
<option value="ro">Romanian</option>
<option value="hu">Hungarian</option>
<option value="sk">Slovak</option>
<option value="bg">Bulgarian</option>
<option value="hr">Croatian</option>
<option value="sr">Serbian</option>
<option value="sl">Slovenian</option>
<option value="et">Estonian</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="sw">Swahili</option>
<option value="tl">Tagalog</option>
<option value="am">Amharic</option>
<option value="ne">Nepali</option>
<option value="si">Sinhala</option>
<option value="km">Khmer</option>
<option value="my">Burmese</option>
<option value="lo">Lao</option>
<option value="ka">Georgian</option>
<option value="hy">Armenian</option>
<option value="az">Azerbaijani</option>
<option value="eu">Basque</option>
<option value="ca">Catalan</option>
<option value="gl">Galician</option>
<option value="is">Icelandic</option>
<option value="mk">Macedonian</option>
<option value="mt">Maltese</option>
</select>
</div>
<textarea id="outputText" placeholder="Translation will appear here..." readonly></textarea>
</div>
</div>
<div class="btn-container">
<button class="translate-btn" id="translateBtn">
<i class="fas fa-language"></i> TRANSLATE
</button>
</div>
<div class="languages-info">
<h3>Supported Languages (100+)</h3>
<div class="languages-grid">
<div class="language-card">
<div class="language-flag" style="background-color: #00247D;"></div>
<span class="language-name">English</span>
</div>
<div class="language-card">
<div class="language-flag" style="background: linear-gradient(to bottom, #AA151B, #F1BF00);"></div>
<span class="language-name">Spanish</span>
</div>
<div class="language-card">
<div class="language-flag" style="background: linear-gradient(to bottom, #002654, #CE1126);"></div>
<span class="language-name">French</span>
</div>
<div class="language-card">
<div class="language-flag" style="background: linear-gradient(to bottom, #000000, #DD0000, #FFCE00);"></div>
<span class="language-name">German</span>
</div>
<div class="language-card">
<div class="language-flag" style="background: linear-gradient(to bottom, #0093DD, #F44653);"></div>
<span class="language-name">Chinese</span>
</div>
<div class="language-card">
<div class="language-flag" style="background: linear-gradient(to bottom, #BC002D, #FFFFFF);"></div>
<span class="language-name">Japanese</span>
</div>
<div class="language-card">
<div class="language-flag" style="background: linear-gradient(to bottom, #CD2E3A, #000000);"></div>
<span class="language-name">Korean</span>
</div>
<div class="language-card">
<div class="language-flag" style="background: linear-gradient(to bottom, #007A3D, #CE1126);"></div>
<span class="language-name">Arabic</span>
</div>
<div class="language-card">
<div class="language-flag" style="background: linear-gradient(to bottom, #F93, #007A3D);"></div>
<span class="language-name">Hindi</span>
</div>
<div class="language-card">
<div class="language-flag" style="background: linear-gradient(to bottom, #006A4E, #F42A41);"></div>
<span class="language-name">Bengali</span>
</div>
<div class="language-card">
<div class="language-flag" style="background: linear-gradient(to bottom, #009811, #FFC90B);"></div>
<span class="language-name">Russian</span>
</div>
<div class="language-card">
<div class="language-flag" style="background: linear-gradient(to bottom, #FFD700, #C8102E);"></div>
<span class="language-name">Portuguese</span>
</div>
</div>
</div>
<footer>
<p>Polyglot Translator | Supports 100+ Languages | Real-time Translation</p>
<p>Note: This is a frontend demonstration. Actual translation requires backend integration.</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const fromLanguage = document.getElementById('fromLanguage');
const toLanguage = document.getElementById('toLanguage');
const inputText = document.getElementById('inputText');
const outputText = document.getElementById('outputText');
const swapBtn = document.getElementById('swapBtn');
const translateBtn = document.getElementById('translateBtn');
// Sample translations for demonstration
const sampleTranslations = {
'en-es': 'Este es un texto de ejemplo en español.',
'en-fr': "Ceci est un exemple de texte en français.",
'en-de': 'Dies ist ein Beispieltext auf Deutsch.',
'en-zh': '这是中文示例文本。',
'en-ja': 'これは日本語のサンプルテキストです。',
'en-ko': '이것은 한국어 예제 텍스트입니다.',
'en-ar': 'هذا نص تجريبي باللغة العربية.',
'en-hi': 'यह हिंदी में एक उदाहरण पाठ है।',
'en-ru': 'Это пример текста на русском языке.',
'es-en': 'This is a sample text in English.',
'fr-en': 'This is a sample text in English.',
'de-en': 'This is a sample text in English.',
'zh-en': 'This is a sample text in English.',
'ja-en': 'This is a sample text in English.',
'ko-en': 'This is a sample text in English.',
'ar-en': 'This is a sample text in English.',
'hi-en': 'This is a sample text in English.',
'ru-en': 'This is a sample text in English.'
};
// Swap languages
swapBtn.addEventListener('click', function() {
const temp = fromLanguage.value;
from := fromLanguage.value = toLanguage.value;
toLanguage.value = temp;
// Swap text content
const tempText = inputText.value;
inputText.value = outputText.value;
outputText.value = tempText;
});
// Translate button
translateBtn.addEventListener('click', function() {
const fromLang = fromLanguage.value;
const toLang = toLanguage.value;
const text = inputText.value.trim();
if (!text) {
outputText.value = "Please enter text to translate";
return;
}
// Show loading state
outputText.value = "Translating...";
// Simulate translation delay
setTimeout(() => {
const key = `${fromLang}-${toLang}`;
if (sampleTranslations[key]) {
outputText.value = sampleTranslations[key];
} else if (fromLang === 'auto') {
// If auto-detect, just show a generic message
outputText.value = `Translated to ${toLanguage.options[toLanguage.selectedIndex].text}`;
} else {
// For unsupported combinations
outputText.value = `Translation from ${fromLanguage.options[fromLanguage.selectedIndex].text} to ${toLanguage.options[toLanguage.selectedIndex].text} is not available in this demo.`;
}
}, 800);
});
// Auto-translate on input (optional)
// inputText.addEventListener('input', function() {
// if (inputText.value.trim().length > 0) {
// translateBtn.click();
// }
// });
});
</script>
</body>
</html>
index.html
index.html