459 lines
18 KiB
HTML
459 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="kk" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Переводчик Казахтелеком</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌐</text></svg>">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.hero-bg {
|
||
background: linear-gradient(135deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.hero-bg::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
right: -20%;
|
||
width: 80%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, var(--kt-ai-primary) 0%, transparent 70%);
|
||
opacity: 0.1;
|
||
transform: rotate(-15deg);
|
||
}
|
||
.translator-demo {
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-3xl);
|
||
padding: var(--kt-ai-space-6);
|
||
}
|
||
.lang-selector {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--kt-ai-space-3);
|
||
margin-bottom: var(--kt-ai-space-4);
|
||
}
|
||
.lang-arrow {
|
||
color: var(--kt-ai-fg-muted);
|
||
font-size: var(--kt-ai-text-xl);
|
||
}
|
||
.result-box {
|
||
background: var(--kt-ai-bg-soft);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
padding: var(--kt-ai-space-4);
|
||
min-height: 100px;
|
||
margin-top: var(--kt-ai-space-4);
|
||
}
|
||
.loading {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 3px solid var(--kt-ai-fg-faint);
|
||
border-top-color: var(--kt-ai-primary);
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.success-message {
|
||
background: var(--kt-ai-bg-soft);
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
padding: var(--kt-ai-space-4);
|
||
text-align: center;
|
||
display: none;
|
||
}
|
||
.success-message.show {
|
||
display: block;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(-10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.example-card {
|
||
cursor: pointer;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.example-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>🌐 Переводчик</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#about">Өнім туралы</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#demo">Попробовать</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero hero-bg" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Қазақтелеком Переводчик</h1>
|
||
<p class="kt-ai-hero-sub">Сервис мгновенного перевода между казахским, русским и английским языками. Быстро, точно, бесплатно.</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#demo">Попробовать</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#about">Подробнее</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Мүмкіндіктер</h2>
|
||
<p>Современный сервис перевода для бизнеса и личных нужд</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile example-card" onclick="useExample(0)">
|
||
<div class="kt-ai-tile-icon">💬</div>
|
||
<h3>Мгновенный перевод</h3>
|
||
<p>Перевод текста за доли секунды с сохранением смысла и контекста.</p>
|
||
</article>
|
||
<article class="kt-ai-tile example-card" onclick="useExample(1)">
|
||
<div class="kt-ai-tile-icon">🌍</div>
|
||
<h3>3 языка</h3>
|
||
<p>Казахский ↔ Русский ↔ Английский. Поддержка кириллицы и латиницы.</p>
|
||
</article>
|
||
<article class="kt-ai-tile example-card" onclick="useExample(2)">
|
||
<div class="kt-ai-tile-icon">🔒</div>
|
||
<h3>Безопасно</h3>
|
||
<p>Ваши данные не сохраняются. Конфиденциальность гарантирована.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="demo" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Демо переводчика</h2>
|
||
<p>Введите текст и выберите язык перевода</p>
|
||
</div>
|
||
|
||
<div class="translator-demo">
|
||
<div class="lang-selector">
|
||
<select id="sourceLang" class="kt-ai-select">
|
||
<option value="ru">Русский</option>
|
||
<option value="kk">Қазақша</option>
|
||
<option value="en">English</option>
|
||
</select>
|
||
<span class="lang-arrow">→</span>
|
||
<select id="targetLang" class="kt-ai-select">
|
||
<option value="kk">Қазақша</option>
|
||
<option value="ru">Русский</option>
|
||
<option value="en">English</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="kt-ai-field">
|
||
<label>Исходный текст</label>
|
||
<textarea id="inputText" class="kt-ai-textarea" rows="4" placeholder="Введите текст для перевода..."></textarea>
|
||
</div>
|
||
|
||
<div style="text-align: center; margin: var(--kt-ai-space-4) 0;">
|
||
<button id="translateBtn" class="kt-ai-btn" data-variant="primary" data-size="lg">
|
||
Перевести
|
||
</button>
|
||
</div>
|
||
|
||
<div class="kt-ai-field">
|
||
<label>Результат</label>
|
||
<div id="resultBox" class="result-box">
|
||
<span style="color: var(--kt-ai-fg-muted)">Здесь появится перевод...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Приклади</h2>
|
||
<p>Нажмите на карточку, чтобы использовать пример</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-card example-card" onclick="useExample(0)">
|
||
<h4>Приветствие</h4>
|
||
<p style="color: var(--kt-ai-fg-muted)">«Здравствуйте! Как ваши дела?»</p>
|
||
</article>
|
||
<article class="kt-ai-card example-card" onclick="useExample(1)">
|
||
<h4>Деловое письмо</h4>
|
||
<p style="color: var(--kt-ai-fg-muted)">«Уважаемые партнёры, направляем вам договор...»</p>
|
||
</article>
|
||
<article class="kt-ai-card example-card" onclick="useExample(2)">
|
||
<h4>Технический текст</h4>
|
||
<p style="color: var(--kt-ai-fg-muted)">«Оптическое волокно обеспечивает высокую скорость...»</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<h2>Оставить заявку</h2>
|
||
<p>Заполните форму и мы свяжемся с вами для подключения сервиса</p>
|
||
|
||
<form id="contactForm" style="max-width:420px; margin: var(--kt-ai-space-6) auto 0;">
|
||
<div class="kt-ai-field">
|
||
<label>Имя / Аты</label>
|
||
<input id="nameInput" class="kt-ai-input" name="name" required placeholder="Иван Иванов">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Телефон / Телефон</label>
|
||
<input id="phoneInput" class="kt-ai-input" name="phone" required placeholder="+7 777 123 45 67">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Компания / Компания</label>
|
||
<input id="companyInput" class="kt-ai-input" name="company" placeholder="ТОО «Название»">
|
||
</div>
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary" data-size="lg" style="width: 100%; margin-top: var(--kt-ai-space-4);">
|
||
Отправить заявку
|
||
</button>
|
||
</form>
|
||
|
||
<div id="successMessage" class="success-message">
|
||
<h3 style="color: var(--kt-ai-primary)">✅ Заявка отправлена!</h3>
|
||
<p style="margin-top: var(--kt-ai-space-2); color: var(--kt-ai-fg-muted);">
|
||
Спасибо! Мы свяжемся с вами в ближайшее время.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Қазақтелеком</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>📞 111 (бесплатно)</span>
|
||
</footer>
|
||
|
||
<script>
|
||
// Демо-данные для перевода
|
||
const translations = {
|
||
'ru-kk': {
|
||
'Здравствуйте! Как ваши дела?': 'Сәлеметсіз бе! Істеріңіз қалай?',
|
||
'Уважаемые партнёры, направляем вам договор': 'Құрметті серіктестер, сіздерге шартты жібереміз',
|
||
'Оптическое волокно обеспечивает высокую скорость': 'Оптикалық талшық жоғары жылдамдықты қамтамасыз етеді',
|
||
'Переводчик': 'Аудармашы',
|
||
'Спасибо': 'Рақмет',
|
||
'До свидания': 'Сау болыңыз',
|
||
'Хорошо': 'Жақсы',
|
||
'Да': 'Иә',
|
||
'Нет': 'Жоқ'
|
||
},
|
||
'ru-en': {
|
||
'Здравствуйте! Как ваши дела?': 'Hello! How are you?',
|
||
'Уважаемые партнёры, направляем вам договор': 'Dear partners, we are sending you the contract',
|
||
'Оптическое волокно обеспечивает высокую скорость': 'Optical fiber provides high speed',
|
||
'Переводчик': 'Translator',
|
||
'Спасибо': 'Thank you',
|
||
'До свидания': 'Goodbye',
|
||
'Хорошо': 'Good',
|
||
'Да': 'Yes',
|
||
'Нет': 'No'
|
||
},
|
||
'kk-ru': {
|
||
'Сәлеметсіз бе! Істеріңіз қалай?': 'Здравствуйте! Как ваши дела?',
|
||
'Құрметті серіктестер': 'Уважаемые партнёры',
|
||
'Рақмет': 'Спасибо',
|
||
'Сау болыңыз': 'До свидания',
|
||
'Жақсы': 'Хорошо',
|
||
'Иә': 'Да',
|
||
'Жоқ': 'Нет'
|
||
},
|
||
'kk-en': {
|
||
'Сәлеметсіз бе! Істеріңіз қалай?': 'Hello! How are you?',
|
||
'Рақмет': 'Thank you',
|
||
'Сау болыңыз': 'Goodbye',
|
||
'Жақсы': 'Good',
|
||
'Иә': 'Yes',
|
||
'Жоқ': 'No'
|
||
},
|
||
'en-ru': {
|
||
'Hello! How are you?': 'Здравствуйте! Как ваши дела?',
|
||
'Dear partners': 'Уважаемые партнёры',
|
||
'Thank you': 'Спасибо',
|
||
'Goodbye': 'До свидания',
|
||
'Good': 'Хорошо',
|
||
'Yes': 'Да',
|
||
'No': 'Нет'
|
||
},
|
||
'en-kk': {
|
||
'Hello! How are you?': 'Сәлеметсіз бе! Істеріңіз қалай?',
|
||
'Thank you': 'Рақмет',
|
||
'Goodbye': 'Сау болыңыз',
|
||
'Good': 'Жақсы',
|
||
'Yes': 'Иә',
|
||
'No': 'Жоқ'
|
||
}
|
||
};
|
||
|
||
// Примеры текстов
|
||
const examples = [
|
||
{ ru: 'Здравствуйте! Как ваши дела?', kk: 'Сәлеметсіз бе! Істеріңіз қалай?', en: 'Hello! How are you?' },
|
||
{ ru: 'Уважаемые партнёры, направляем вам договор', kk: 'Құрметті серіктестер, сіздерге шартты жібереміз', en: 'Dear partners, we are sending you the contract' },
|
||
{ ru: 'Оптическое волокно обеспечивает высокую скорость', kk: 'Оптикалық талшық жоғары жылдамдықты қамтамасыз етеді', en: 'Optical fiber provides high speed' }
|
||
];
|
||
|
||
// Загрузка сохранённых данных
|
||
function loadSavedData() {
|
||
const savedInput = localStorage.getItem('translatorInput');
|
||
const savedSource = localStorage.getItem('translatorSourceLang');
|
||
const savedTarget = localStorage.getItem('translatorTargetLang');
|
||
const savedResult = localStorage.getItem('translatorResult');
|
||
|
||
if (savedInput) document.getElementById('inputText').value = savedInput;
|
||
if (savedSource) document.getElementById('sourceLang').value = savedSource;
|
||
if (savedTarget) document.getElementById('targetLang').value = savedTarget;
|
||
if (savedResult) {
|
||
document.getElementById('resultBox').innerHTML = '<p>' + savedResult + '</p>';
|
||
}
|
||
}
|
||
|
||
// Сохранение данных
|
||
function saveData(input, source, target, result) {
|
||
localStorage.setItem('translatorInput', input);
|
||
localStorage.setItem('translatorSourceLang', source);
|
||
localStorage.setItem('translatorTargetLang', target);
|
||
localStorage.setItem('translatorResult', result);
|
||
}
|
||
|
||
// Функция перевода
|
||
function translate() {
|
||
const inputText = document.getElementById('inputText').value.trim();
|
||
const sourceLang = document.getElementById('sourceLang').value;
|
||
const targetLang = document.getElementById('targetLang').value;
|
||
const resultBox = document.getElementById('resultBox');
|
||
const btn = document.getElementById('translateBtn');
|
||
|
||
if (!inputText) {
|
||
resultBox.innerHTML = '<span style="color: var(--kt-ai-fg-muted)">Введите текст для перевода...</span>';
|
||
return;
|
||
}
|
||
|
||
// Показываем анимацию загрузки
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<span class="loading"></span> Перевод...';
|
||
resultBox.innerHTML = '<span style="color: var(--kt-ai-fg-muted)">Переводим...</span>';
|
||
|
||
// Имитация задержки API
|
||
setTimeout(function() {
|
||
const key = sourceLang + '-' + targetLang;
|
||
let translation = '';
|
||
|
||
if (sourceLang === targetLang) {
|
||
translation = inputText;
|
||
} else if (translations[key] && translations[key][inputText]) {
|
||
translation = translations[key][inputText];
|
||
} else {
|
||
// Генерация псевдо-перевода для неизвестных фраз
|
||
translation = generateFakeTranslation(inputText, sourceLang, targetLang);
|
||
}
|
||
|
||
resultBox.innerHTML = '<p style="font-size: var(--kt-ai-text-lg)">' + translation + '</p>';
|
||
saveData(inputText, sourceLang, targetLang, translation);
|
||
|
||
btn.disabled = false;
|
||
btn.textContent = 'Перевести';
|
||
}, 1000);
|
||
}
|
||
|
||
// Генерация псевдо-перевода
|
||
function generateFakeTranslation(text, from, to) {
|
||
const prefixes = {
|
||
'kk': ['Сәлем', 'Құрметті', 'Біз', 'Сіз', 'Ол', 'Бұл'],
|
||
'ru': ['Здравствуйте', 'Уважаемый', 'Мы', 'Вы', 'Он', 'Это'],
|
||
'en': ['Hello', 'Dear', 'We', 'You', 'He', 'This']
|
||
};
|
||
|
||
const words = text.split(' ').length;
|
||
const randomPrefix = prefixes[to][Math.floor(Math.random() * prefixes[to].length)];
|
||
return randomPrefix + '... (' + words + ' слов, ' + to + ')';
|
||
}
|
||
|
||
// Использование примера
|
||
function useExample(index) {
|
||
const example = examples[index];
|
||
const sourceLang = document.getElementById('sourceLang').value;
|
||
document.getElementById('inputText').value = example[sourceLang] || example.ru;
|
||
translate();
|
||
|
||
// Плавный скролл к демо
|
||
document.getElementById('demo').scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
|
||
// Обработка формы
|
||
document.getElementById('contactForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const name = document.getElementById('nameInput').value;
|
||
const phone = document.getElementById('phoneInput').value;
|
||
const company = document.getElementById('companyInput').value;
|
||
|
||
// Сохранение заявки
|
||
const leads = JSON.parse(localStorage.getItem('contactLeads') || '[]');
|
||
leads.push({
|
||
name: name,
|
||
phone: phone,
|
||
company: company,
|
||
date: new Date().toISOString()
|
||
});
|
||
localStorage.setItem('contactLeads', JSON.stringify(leads));
|
||
|
||
// Показ сообщения об успехе
|
||
document.getElementById('contactForm').style.display = 'none';
|
||
document.getElementById('successMessage').classList.add('show');
|
||
|
||
// Очистка полей
|
||
document.getElementById('nameInput').value = '';
|
||
document.getElementById('phoneInput').value = '';
|
||
document.getElementById('companyInput').value = '';
|
||
});
|
||
|
||
// Инициализация
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
loadSavedData();
|
||
|
||
document.getElementById('translateBtn').addEventListener('click', translate);
|
||
|
||
// Перевод по Enter в textarea
|
||
document.getElementById('inputText').addEventListener('keydown', function(e) {
|
||
if (e.key === 'Enter' && e.ctrlKey) {
|
||
translate();
|
||
}
|
||
});
|
||
|
||
// Анимация появления при скролле
|
||
const observer = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(entry) {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
|
||
document.querySelectorAll('.example-card').forEach(function(card) {
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(20px)';
|
||
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||
observer.observe(card);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|