HTML+JS kodunu paylaşıyorum.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Çeviri Servisi</title>
</head>
<body class="bg-light">
<div class="container mt-5">
<h1 class="mb-4">Çeviri Servisi (ZFC)</h1>
<div class="form-group">
<textarea id="sourceText" class="form-control" placeholder="Çevrilecek metni buraya yazın veya yapıştırın." rows="4"></textarea>
</div>
<div class="form-group">
<select id="languageSelect" class="form-control">
<!-- Dil seçeneklerinizi buraya ekleyin -->
<option value="en">İngilizce (EN)</option>
<option value="tr">Türkçe (TR)</option>
<option value="de">Almanca (DE)</option>
<option value="es">İspanyolca (ES)</option>
<option value="fr">Fransızca (FR)</option>
<option value="ja">Japonca (JA)</option>
<option value="ko">Korece (KO)</option>
<option value="nl">Hollandaca (NL)</option>
<option value="pl">Lehçe (PL)</option>
<option value="pt">Portekizce (PT)</option>
<option value="ru">Rusça (RU)</option>
<option value="zh-Hans">Çince (Basitleştirilmiş) (ZH)</option>
<option value="zh-Hant">Çince (Geleneksel) (ZH)</option>
<option value="zh">Çince (ZH)</option>
<option value="bg">Bulgarca (BG)</option>
<option value="cs">Çekçe (CS)</option>
<option value="da">Danca (DA)</option>
<option value="el">Yunanca (EL)</option>
<option value="et">Estonyaca (ET)</option>
<option value="fi">Fince (FI)</option>
<option value="hu">Macarca (HU)</option>
<option value="lt">Litvanca (LT)</option>
<option value="lv">Letonca (LV)</option>
<option value="ro">Romence (RO)</option>
<option value="sk">Slovakça (SK)</option>
<option value="sl">Slovence (SL)</option>
<option value="sv">İsveççe (SV)</option>
<!-- Diğer dil seçenekleri -->
</select>
</div>
<button onclick="translateText()" class="btn btn-primary">Çevir</button>
<button id="copyButton" onclick="copyToClipboard()" class="btn btn-success ml-2">Kopyala</button>
<h2 class="mt-4">Ana Çeviri</h2>
<p id="mainTranslation" class="p-3 bg-white rounded border"></p>
<h5>Alternatif Çeviriler</h5>
<ul id="alternativeTranslations" class="list-group">
<!-- Alternatif çeviriler burada listelenecek -->
</ul>
<br><br>
</div>
<!-- Bootstrap ve bağımlılıkları -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.9/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function translateText() {
var sourceText = document.getElementById('sourceText').value.trim(); // Metnin başında ve sonunda boşlukları temizle
var selectedLang = document.getElementById('languageSelect').value;
fetch('https://translate.zfc.com.tr/translate', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({text: sourceText, lang: selectedLang})
})
.then(response => response.json()) // Yanıtı JSON olarak işle
.then(data => {
// API'den dönen veriyi kontrol et
if (data.status && data.data) {
// Ana çeviri metnini bul ve sayfaya yansıt
var mainTranslation = data.data.text || "Çeviri bulunamadı.";
document.getElementById('mainTranslation').innerText = mainTranslation;
// Alternatif çevirileri işle ve sayfaya yansıt
var alternativesList = document.getElementById('alternativeTranslations');
alternativesList.innerHTML = ""; // Alternatif çeviriler listesini temizle
if (data.data.alternatives && data.data.alternatives.length > 0) {
// Alternatif çevirileri listele
data.data.alternatives.forEach(function(alt) {
var listItem = document.createElement('li');
listItem.innerText = alt.text;
alternativesList.appendChild(listItem);
});
} else {
// Alternatif çeviri yoksa, kullanıcıya bilgi ver
alternativesList.innerHTML = "<li>Alternatif çeviri bulunamadı.</li>";
}
} else {
// API'den geçerli bir çeviri gelmezse hata mesajı göster
document.getElementById('mainTranslation').innerText = "Çeviri bulunamadı veya bir hata oluştu.";
document.getElementById('alternativeTranslations').innerHTML = "";
}
})
.catch(error => {
// Hata yakalama
console.error('Hata:', error);
document.getElementById('mainTranslation').innerText = "Hata oluştu: " + error.message;
document.getElementById('alternativeTranslations').innerHTML = "";
});
}
function copyToClipboard() {
var mainTranslationText = document.getElementById('mainTranslation').innerText;
navigator.clipboard.writeText(mainTranslationText)
.then(() => {
var copyButton = document.getElementById('copyButton');
copyButton.textContent = 'Kopyalandı!'; // Buton metnini değiştir
setTimeout(function() {
copyButton.textContent = 'Kopyala'; // 2 saniye sonra eski metnine dön
}, 3000);
})
.catch(err => {
console.error('Metni kopyalarken bir hata oluştu:', err);
});
}
</script>
</body>
</html> 
