267 lines
12 KiB
HTML
267 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" 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">
|
||
<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%);
|
||
padding: var(--kt-ai-space-12) 0;
|
||
}
|
||
.feature-icon {
|
||
width: 48px; height: 48px;
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
background: var(--kt-ai-primary);
|
||
color: white;
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: var(--kt-ai-space-4);
|
||
}
|
||
.demo-window {
|
||
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);
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
|
||
}
|
||
.lang-pair {
|
||
display: flex; gap: var(--kt-ai-space-4); align-items: center; justify-content: center;
|
||
margin-bottom: var(--kt-ai-space-6);
|
||
}
|
||
.lang-badge {
|
||
padding: var(--kt-ai-space-2) var(--kt-ai-space-4);
|
||
border-radius: var(--kt-ai-radius-lg);
|
||
background: var(--kt-ai-bg-soft);
|
||
font-weight: var(--kt-ai-weight-semibold);
|
||
}
|
||
.arrow { color: var(--kt-ai-fg-muted); }
|
||
.translate-area {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-4);
|
||
}
|
||
.translate-box {
|
||
padding: var(--kt-ai-space-4);
|
||
border-radius: var(--kt-ai-radius-lg);
|
||
border: 1px solid var(--kt-ai-border);
|
||
min-height: 120px;
|
||
font-size: var(--kt-ai-text-lg);
|
||
}
|
||
.translate-label {
|
||
font-size: var(--kt-ai-text-sm);
|
||
color: var(--kt-ai-fg-muted);
|
||
margin-bottom: var(--kt-ai-space-2);
|
||
}
|
||
@media (max-width: 768px) {
|
||
.translate-area { grid-template-columns: 1fr; }
|
||
}
|
||
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
|
||
.reveal.in { opacity: 1; transform: none; }
|
||
</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="#features">Возможности</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#demo">Демо</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#connect">Подключить</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero hero-bg" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1 class="reveal">Корпоративный переводчик<br>қазақша ↔ орысша</h1>
|
||
<p class="kt-ai-hero-sub reveal">
|
||
Профессиональный инструмент для мгновенного перевода документов,<br>
|
||
писем и чатов между казахским и русским языками
|
||
</p>
|
||
<div class="kt-ai-hero-actions reveal">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#connect">Попробовать бесплатно</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#demo">Смотреть демо</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="features" 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 reveal">
|
||
<div class="feature-icon">
|
||
<svg class="kt-icon" width="24" height="24"><use href="design-system/icons/kt-ai-lucide-sprite.svg#fileText"/></svg>
|
||
</div>
|
||
<h3>Перевод документов</h3>
|
||
<p>Загружайте Word, Excel, PDF — получите перевод с сохранением форматирования</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="feature-icon">
|
||
<svg class="kt-icon" width="24" height="24"><use href="design-system/icons/kt-ai-lucide-sprite.svg#mail"/></svg>
|
||
</div>
|
||
<h3>Перевод писем</h3>
|
||
<p>Интеграция с корпоративной почтой — перевод входящих и исходящих писем</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="feature-icon">
|
||
<svg class="kt-icon" width="24" height="24"><use href="design-system/icons/kt-ai-lucide-sprite.svg#messageSquare"/></svg>
|
||
</div>
|
||
<h3>Перевод чатов</h3>
|
||
<p>Мгновенный перевод сообщений в рабочих чатах и мессенджерах</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="feature-icon">
|
||
<svg class="kt-icon" width="24" height="24"><use href="design-system/icons/kt-ai-lucide-sprite.svg#shield"/></svg>
|
||
</div>
|
||
<h3>Безопасность данных</h3>
|
||
<p>Перевод внутри контура компании — данные не покидают серверы Казахстан Телеком</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="feature-icon">
|
||
<svg class="kt-icon" width="24" height="24"><use href="design-system/icons/kt-ai-lucide-sprite.svg#zap"/></svg>
|
||
</div>
|
||
<h3>Мгновенный результат</h3>
|
||
<p>Перевод текста до 1000 символов за секунды, документы — до 2 минут</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="feature-icon">
|
||
<svg class="kt-icon" width="24" height="24"><use href="design-system/icons/kt-ai-lucide-sprite.svg#settings"/></svg>
|
||
</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="demo-window reveal">
|
||
<div class="lang-pair">
|
||
<span class="lang-badge">🇰🇿 Қазақша</span>
|
||
<svg class="kt-icon arrow" width="20" height="20"><use href="design-system/icons/kt-ai-lucide-sprite.svg#arrowRight"/></svg>
|
||
<span class="lang-badge">🇷🇺 Орысша</span>
|
||
</div>
|
||
<div class="translate-area">
|
||
<div>
|
||
<div class="translate-label">Исходный текст</div>
|
||
<textarea id="sourceText" class="kt-ai-input" style="width:100%;min-height:120px;resize:vertical" placeholder="Мәтінді енгізіңіз...">Сәлеметсіз бе! Бұл қазақ тіліндегі мәтін.</textarea>
|
||
</div>
|
||
<div>
|
||
<div class="translate-label">Перевод</div>
|
||
<div id="translatedText" class="translate-box" style="background:var(--kt-ai-bg-soft)">Здравствуйте! Это текст на казахском языке.</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:var(--kt-ai-space-4);text-align:center">
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="translateDemo()">
|
||
<svg class="kt-icon" width="16" height="16" style="margin-right:8px"><use href="design-system/icons/kt-ai-lucide-sprite.svg#arrowRightLeft"/></svg>
|
||
Перевести
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Готовы подключить переводчик?</h2>
|
||
<p>Оставьте заявку — мы свяжемся с вами и настроим доступ для вашей команды</p>
|
||
<form id="connectForm" style="max-width:420px;margin:var(--kt-ai-space-6) auto 0" onsubmit="submitForm(event)">
|
||
<div class="kt-ai-field">
|
||
<label>Ваше имя</label>
|
||
<input class="kt-ai-input" name="name" placeholder="Иван Петров" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Рабочая почта</label>
|
||
<input class="kt-ai-input" name="email" type="email" placeholder="ivan@kt.kz" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Компания</label>
|
||
<input class="kt-ai-input" name="company" placeholder="ТОО «Название»">
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" style="width:100%">
|
||
Оставить заявку
|
||
</button>
|
||
<p style="margin-top:var(--kt-ai-space-3);font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted);text-align:center">
|
||
Менеджер свяжется в течение рабочего дня
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Қазақша-Орысша | Казахстан Телеком</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-link" href="mailto:translate@kt.kz">translate@kt.kz</a>
|
||
</footer>
|
||
|
||
<script>
|
||
// Анимация появления при скролле
|
||
var io = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('in'); });
|
||
}, { threshold: 0.1 });
|
||
document.querySelectorAll('.reveal').forEach(function(el) { io.observe(el); });
|
||
|
||
// Демо-перевод
|
||
var demoPairs = {
|
||
'Сәлеметсіз бе! Бұл қазақ тіліндегі мәтін.': 'Здравствуйте! Это текст на казахском языке.',
|
||
'Құрметті әріптес! Хатты қарап шығыңыз.': 'Уважаемый коллега! Пожалуйста, ознакомьтесь с письмом.',
|
||
'Кездесу ертең сағат 10:00-де болады.': 'Встреча состоится завтра в 10:00.',
|
||
'Есептілікті жұмаға дейін тапсыру керек.': 'Отчёт нужно сдать до пятницы.',
|
||
'Hello! This is English text.': 'Сәлеметсіз бе! Бұл ағылшын тіліндегі мәтін.',
|
||
'Best regards, Team': 'С құрметом, Команда'
|
||
};
|
||
|
||
function translateDemo() {
|
||
var source = document.getElementById('sourceText').value.trim();
|
||
var target = document.getElementById('translatedText');
|
||
if (!source) { target.textContent = 'Введите текст для перевода'; return; }
|
||
|
||
target.style.opacity = '0.3';
|
||
setTimeout(function() {
|
||
var match = demoPairs[source];
|
||
target.textContent = match || 'Перевод: ' + source.split('').reverse().join('') + ' [демо]';
|
||
target.style.opacity = '1';
|
||
}, 400);
|
||
}
|
||
|
||
// Обработка формы
|
||
function submitForm(e) {
|
||
e.preventDefault();
|
||
var form = e.target;
|
||
var btn = form.querySelector('button[type="submit"]');
|
||
var original = btn.textContent;
|
||
btn.textContent = 'Отправка...';
|
||
btn.disabled = true;
|
||
|
||
setTimeout(function() {
|
||
form.innerHTML = '<div style="text-align:center;padding:var(--kt-ai-space-6)"><svg class="kt-icon" width="48" height="48" style="color:var(--kt-ai-primary)"><use href="design-system/icons/kt-ai-lucide-sprite.svg#checkCircle"/></svg><h3 style="margin-top:var(--kt-ai-space-4)">Заявка отправлена!</h3><p style="color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-2)">Менеджер свяжется с вами в течение рабочего дня</p></div>';
|
||
}, 800);
|
||
}
|
||
|
||
// Плавный скролл к якорям
|
||
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
||
anchor.addEventListener('click', function(e) {
|
||
var id = this.getAttribute('href');
|
||
if (id !== '#') {
|
||
e.preventDefault();
|
||
document.querySelector(id).scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|