|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Localization Test | MedMIS</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/i18next@21.9.1/dist/umd/i18next.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.4.2/i18nextHttpBackend.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/i18next-browser-languagedetector@6.1.3/i18nextBrowserLanguageDetector.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.language-card { |
|
|
transition: all 0.3s ease; |
|
|
border: 1px solid rgba(255,255,255,0.1); |
|
|
} |
|
|
.language-card:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
.test-section { |
|
|
border: 1px dashed rgba(255,255,255,0.3); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<header class="mb-12"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<button onclick="history.back()" class="mr-4 p-2 rounded-lg bg-gray-700 hover:bg-gray-600 transition"> |
|
|
<i data-feather="arrow-left" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div class="text-center flex-1"> |
|
|
<h1 class="text-4xl font-bold mb-4">Localization Test Interface</h1> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto">Test all UI components across supported languages</p> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="flex justify-center mb-12"> |
|
|
<div class="bg-gray-800 rounded-xl p-6 max-w-4xl w-full"> |
|
|
<h2 class="text-2xl font-semibold mb-6 text-center">Select Language</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
|
|
<button class="language-card bg-gray-700 rounded-lg p-6 text-center hover:bg-blue-900 hover:border-blue-500" data-lang="ru"> |
|
|
<div class="text-4xl mb-2">🇷🇺</div> |
|
|
<h3 class="text-xl font-medium">Русский</h3> |
|
|
<p class="text-gray-400">Russian</p> |
|
|
</button> |
|
|
<button class="language-card bg-gray-700 rounded-lg p-6 text-center hover:bg-green-900 hover:border-green-500" data-lang="uz"> |
|
|
<div class="text-4xl mb-2">🇺🇿</div> |
|
|
<h3 class="text-xl font-medium">O'zbekcha</h3> |
|
|
<p class="text-gray-400">Uzbek</p> |
|
|
</button> |
|
|
<button class="language-card bg-gray-700 rounded-lg p-6 text-center hover:bg-yellow-900 hover:border-yellow-500" data-lang="tj"> |
|
|
<div class="text-4xl mb-2">🇹🇯</div> |
|
|
<h3 class="text-xl font-medium">Тоҷикӣ</h3> |
|
|
<p class="text-gray-400">Tajik</p> |
|
|
</button> |
|
|
<button class="language-card bg-gray-700 rounded-lg p-6 text-center hover:bg-red-900 hover:border-red-500" data-lang="kk"> |
|
|
<div class="text-4xl mb-2">🇰🇿</div> |
|
|
<h3 class="text-xl font-medium">Қазақша</h3> |
|
|
<p class="text-gray-400">Kazakh</p> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-8 max-w-4xl mx-auto"> |
|
|
|
|
|
<div class="test-section bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-2xl font-semibold mb-4" data-i18n="test.navigation">Navigation Test</h2> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<a href="#" class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700 transition" data-i18n="nav.home">Home</a> |
|
|
<a href="#" class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition" data-i18n="nav.patients">Patients</a> |
|
|
<a href="#" class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition" data-i18n="nav.studies">Studies</a> |
|
|
<a href="#" class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition" data-i18n="nav.reports">Reports</a> |
|
|
<a href="#" class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition" data-i18n="nav.settings">Settings</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="test-section bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-2xl font-semibold mb-4" data-i18n="test.forms">Form Elements Test</h2> |
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label class="block mb-2" data-i18n="form.name">Full Name</label> |
|
|
<input type="text" class="w-full bg-gray-700 rounded-lg px-4 py-2"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-2" data-i18n="form.email">Email Address</label> |
|
|
<input type="email" class="w-full bg-gray-700 rounded-lg px-4 py-2"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-2" data-i18n="form.role">Role</label> |
|
|
<select class="w-full bg-gray-700 rounded-lg px-4 py-2"> |
|
|
<option value="" data-i18n="form.selectRole">Select Role</option> |
|
|
<option value="doctor" data-i18n="roles.doctor">Doctor</option> |
|
|
<option value="nurse" data-i18n="roles.nurse">Nurse</option> |
|
|
<option value="admin" data-i18n="roles.admin">Administrator</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="rounded bg-gray-700"> |
|
|
<span class="ml-2" data-i18n="form.agree">I agree to the terms</span> |
|
|
</label> |
|
|
</div> |
|
|
<button type="submit" class="px-6 py-2 bg-green-600 rounded-lg hover:bg-green-700 transition" data-i18n="form.submit">Submit Form</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="test-section bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-2xl font-semibold mb-4" data-i18n="test.alerts">Alerts & Messages Test</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="p-4 bg-blue-900 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="info" class="w-5 h-5 mr-2 text-blue-300"></i> |
|
|
<span data-i18n="alert.info">This is an informational message.</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 bg-yellow-900 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="alert-triangle" class="w-5 h-5 mr-2 text-yellow-300"></i> |
|
|
<span data-i18n="alert.warning">Warning: Action required.</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 bg-red-900 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="alert-octagon" class="w-5 h-5 mr-2 text-red-300"></i> |
|
|
<span data-i18n="alert.error">Error: Something went wrong.</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 bg-green-900 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="check-circle" class="w-5 h-5 mr-2 text-green-300"></i> |
|
|
<span data-i18n="alert.success">Success! Operation completed.</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="test-section bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-2xl font-semibold mb-4" data-i18n="test.table">Data Table Test</h2> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr class="text-gray-300 border-b border-gray-700"> |
|
|
<th class="py-3 px-4 text-left" data-i18n="table.id">ID</th> |
|
|
<th class="py-3 px-4 text-left" data-i18n="table.name">Name</th> |
|
|
<th class="py-3 px-4 text-left" data-i18n="table.status">Status</th> |
|
|
<th class="py-3 px-4 text-left" data-i18n="table.date">Date</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-3 px-4">P-123456</td> |
|
|
<td class="py-3 px-4" data-i18n="test.johnDoe">John Doe</td> |
|
|
<td class="py-3 px-4"><span class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs" data-i18n="status.active">Active</span></td> |
|
|
<td class="py-3 px-4">15.06.2023</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-3 px-4">P-789012</td> |
|
|
<td class="py-3 px-4" data-i18n="test.janeSmith">Jane Smith</td> |
|
|
<td class="py-3 px-4"><span class="bg-yellow-900 text-yellow-300 px-2 py-1 rounded text-xs" data-i18n="status.pending">Pending</span></td> |
|
|
<td class="py-3 px-4">14.06.2023</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="test-section bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-2xl font-semibold mb-4" data-i18n="test.components">Complex Components Test</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 bg-blue-500 rounded-lg mr-4"> |
|
|
<i data-feather="user" class="w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold" data-i18n="component.patient">Patient Card</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4" data-i18n="component.patientDesc">Patient information and status</p> |
|
|
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition" data-i18n="component.viewDetails"> |
|
|
View Details |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h3 class="text-lg font-semibold mb-2" data-i18n="component.stats">Today's Statistics</h3> |
|
|
<div class="grid grid-cols-2 gap-2 text-sm"> |
|
|
<div> |
|
|
<span class="text-gray-400" data-i18n="stats.patients">Patients:</span> 8 |
|
|
</div> |
|
|
<div> |
|
|
<span class="text-gray-400" data-i18n="stats.studies">Studies:</span> 12 |
|
|
</div> |
|
|
<div> |
|
|
<span class="text-gray-400" data-i18n="stats.reports">Reports:</span> 9 |
|
|
</div> |
|
|
<div> |
|
|
<span class="text-gray-400" data-i18n="stats.avgTime">Avg Time:</span> 23m |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
i18next |
|
|
.use(i18nextHttpBackend) |
|
|
.use(i18nextBrowserLanguageDetector) |
|
|
.init({ |
|
|
fallbackLng: 'ru', |
|
|
lng: 'ru', |
|
|
debug: false, |
|
|
backend: { |
|
|
loadPath: '/locales/{{lng}}.json' |
|
|
}, |
|
|
detection: { |
|
|
order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag'], |
|
|
caches: ['cookie'] |
|
|
} |
|
|
}) |
|
|
.then(function() { |
|
|
|
|
|
i18next.on('languageChanged', updateContent); |
|
|
updateContent(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.language-card').forEach(btn => { |
|
|
btn.addEventListener('click', async () => { |
|
|
const lang = btn.dataset.lang; |
|
|
await i18next.changeLanguage(lang); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function updateContent() { |
|
|
|
|
|
document.querySelectorAll('[data-i18n]').forEach(el => { |
|
|
const key = el.dataset.i18n; |
|
|
if (el.tagName === 'INPUT' && el.type === 'text' || el.tagName === 'INPUT' && el.type === 'email') { |
|
|
el.placeholder = i18next.t(key); |
|
|
} else { |
|
|
el.textContent = i18next.t(key); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
