307 lines
12 KiB
HTML
307 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Спасибо, Казахтелеком!</title>
|
||
<style>
|
||
:root{
|
||
--ink:#0F1218;
|
||
--cyan:#00E5FF;
|
||
--cyan-50:#E8FCFF;
|
||
--white:#fff;
|
||
--gray-500:#5B6573;
|
||
--gray-100:#F2F4F7;
|
||
--kt-blue:#0054A6;
|
||
--kt-light-blue:#0078D4;
|
||
--kt-warm:#FFB800;
|
||
--kt-light-warm:#FFF3D6;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{
|
||
font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
|
||
color:var(--ink);
|
||
background:var(--white);
|
||
}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
|
||
.hero{
|
||
background:linear-gradient(135deg,var(--kt-blue) 0%,#003d7a 100%);
|
||
color:var(--white);
|
||
text-align:center;
|
||
position:relative;
|
||
overflow:hidden;
|
||
}
|
||
.hero::before{
|
||
content:'';position:absolute;
|
||
top:-60px;right:-60px;
|
||
width:300px;height:300px;
|
||
background:rgba(255,255,255,.03);
|
||
border-radius:50%;
|
||
}
|
||
.hero::after{
|
||
content:'';position:absolute;
|
||
bottom:-40px;left:-40px;
|
||
width:200px;height:200px;
|
||
background:rgba(255,255,255,.04);
|
||
border-radius:50%;
|
||
}
|
||
.hero h1{
|
||
font-size:56px;font-weight:800;line-height:1.05;margin-bottom:16px;
|
||
position:relative;z-index:1;
|
||
}
|
||
.hero .sub{
|
||
font-size:22px;color:rgba(255,255,255,.75);
|
||
max-width:650px;margin:0 auto 32px;
|
||
position:relative;z-index:1;
|
||
}
|
||
.hero .btn{
|
||
display:inline-block;
|
||
background:var(--kt-warm);color:var(--ink);
|
||
padding:16px 36px;border-radius:8px;
|
||
font-weight:700;font-size:18px;
|
||
text-decoration:none;
|
||
position:relative;z-index:1;
|
||
transition:transform .2s,box-shadow .2s;
|
||
}
|
||
.hero .btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
|
||
|
||
.hero .counter{
|
||
margin-top:40px;font-size:48px;font-weight:800;
|
||
position:relative;z-index:1;
|
||
color:var(--kt-warm);
|
||
}
|
||
.hero .counter-label{font-size:16px;font-weight:400;color:rgba(255,255,255,.6);display:block}
|
||
|
||
.thank-wall{background:var(--white)}
|
||
.thank-wall h2{font-size:36px;font-weight:700;margin-bottom:8px}
|
||
.thank-wall .desc{color:var(--gray-500);margin-bottom:32px;font-size:18px}
|
||
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
|
||
.card{
|
||
background:var(--gray-100);
|
||
border-radius:16px;padding:32px;
|
||
transition:transform .2s;
|
||
}
|
||
.card:hover{transform:translateY(-4px)}
|
||
.card .icon{font-size:40px;margin-bottom:16px;display:block}
|
||
.card h3{font-size:20px;font-weight:700;margin-bottom:8px}
|
||
.card p{color:var(--gray-500);font-size:16px}
|
||
|
||
.thanks-section{background:var(--kt-light-warm)}
|
||
.thanks-section h2{font-size:36px;font-weight:700;margin-bottom:8px}
|
||
.thanks-section .desc{color:var(--gray-500);margin-bottom:24px;font-size:18px}
|
||
.messages{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
|
||
.msg{
|
||
background:var(--white);border-radius:12px;padding:24px;
|
||
border-left:4px solid var(--kt-warm);
|
||
}
|
||
.msg .name{font-weight:700;font-size:16px;margin-bottom:4px}
|
||
.msg .city{font-size:14px;color:var(--gray-500);margin-bottom:8px}
|
||
.msg .text{font-size:16px;line-height:1.5;color:var(--ink)}
|
||
.msg .stars{color:var(--kt-warm);font-size:16px;margin-bottom:8px}
|
||
|
||
.form-section{background:var(--kt-blue);color:var(--white);text-align:center}
|
||
.form-section h2{font-size:36px;font-weight:700;margin-bottom:8px}
|
||
.form-section .desc{color:rgba(255,255,255,.7);margin-bottom:32px;font-size:18px}
|
||
.form-section form{
|
||
max-width:520px;margin:0 auto;
|
||
display:flex;flex-direction:column;gap:16px;
|
||
position:relative;z-index:1;
|
||
}
|
||
.form-section input,.form-section textarea,.form-section select{
|
||
width:100%;padding:14px 18px;
|
||
border-radius:8px;border:none;
|
||
font-size:16px;font-family:inherit;
|
||
background:rgba(255,255,255,.95);
|
||
color:var(--ink);
|
||
outline:none;
|
||
}
|
||
.form-section textarea{resize:vertical;min-height:100px}
|
||
.form-section input:focus,.form-section textarea:focus,.form-section select:focus{
|
||
box-shadow:0 0 0 3px var(--kt-warm);
|
||
}
|
||
.form-section .btn{
|
||
display:inline-block;
|
||
background:var(--kt-warm);color:var(--ink);
|
||
padding:14px 32px;border-radius:8px;
|
||
font-weight:700;font-size:17px;
|
||
text-decoration:none;border:none;cursor:pointer;
|
||
transition:transform .2s;
|
||
font-family:inherit;
|
||
}
|
||
.form-section .btn:hover{transform:translateY(-2px)}
|
||
|
||
.stars-select{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
|
||
.stars-select button{
|
||
background:none;border:none;font-size:32px;cursor:pointer;
|
||
transition:transform .2s;padding:4px;
|
||
color:rgba(255,255,255,.4);
|
||
}
|
||
.stars-select button.active,.stars-select button:hover{transform:scale(1.2);color:var(--kt-warm)}
|
||
|
||
footer{
|
||
text-align:center;padding:32px 24px;
|
||
color:var(--gray-500);font-size:14px;
|
||
background:var(--gray-100);
|
||
}
|
||
footer .kt{font-weight:700;color:var(--kt-blue)}
|
||
footer a{color:var(--kt-blue);text-decoration:none}
|
||
footer a:hover{text-decoration:underline}
|
||
|
||
@media (max-width:640px){
|
||
.hero h1{font-size:36px}
|
||
.thank-wall h2,.thanks-section h2,.form-section h2{font-size:28px}
|
||
.container{padding:48px 20px}
|
||
.hero .counter{font-size:36px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Спасибо,<br>Казахтелеком!</h1>
|
||
<p class="sub">Сайт благодарности от абонентов. За надёжную связь, быстрый интернет и человеческое отношение.</p>
|
||
<a class="btn" href="#form">Оставить благодарность</a>
|
||
<div class="counter">
|
||
<span id="thankCount">12 847</span>
|
||
<span class="counter-label">спасибо уже сказано</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="thank-wall">
|
||
<div class="container">
|
||
<h2>За что мы благодарны</h2>
|
||
<p class="desc">Каждый день Казахтелеком делает жизнь лучше — вот что ценят абоненты.</p>
|
||
<div class="cards">
|
||
<div class="card">
|
||
<span class="icon">⚡</span>
|
||
<h3>Стабильный интернет</h3>
|
||
<p>Работа, учёба и кино без перебоев. Даже в самые важные моменты связь не подводит.</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="icon">📞</span>
|
||
<h3>Вежливая поддержка</h3>
|
||
<p>Операторы терпеливо объясняют, решают вопросы и никогда не бросают трубку.</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="icon">💰</span>
|
||
<h3>Честные тарифы</h3>
|
||
<p>Никаких скрытых платежей, прозрачные условия и выгодные пакетные предложения.</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="icon">🏡</span>
|
||
<h3>Достучались до каждого</h3>
|
||
<p>Интернет есть даже в отдалённых аулах. Там, где другие операторы не работают.</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="icon">🚀</span>
|
||
<h3>Скорость растёт</h3>
|
||
<p>Тарифы обновляются, скорость увеличивается — а цена остаётся доступной.</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="icon">🤝</span>
|
||
<h3>Социальная ответственность</h3>
|
||
<p>Поддержка школ, больниц и социальных проектов по всей стране.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="thanks-section">
|
||
<div class="container">
|
||
<h2>Тёплые слова абонентов</h2>
|
||
<p class="desc">Реальные истории и благодарности от людей по всему Казахстану.</p>
|
||
<div class="messages">
|
||
<div class="msg">
|
||
<div class="stars">★★★★★</div>
|
||
<div class="name">Айгуль М.</div>
|
||
<div class="city">г. Алматы</div>
|
||
<div class="text">Три года пользуюсь домашним интернетом — ни одного сбоя за это время. Отдельное спасибо за вежливых девушек на линии поддержки!</div>
|
||
</div>
|
||
<div class="msg">
|
||
<div class="stars">★★★★★</div>
|
||
<div class="name">Ерлан Т.</div>
|
||
<div class="city">г. Астана</div>
|
||
<div class="text">Перешли с женой на ID-пакет — реально выгодно! Интернет + ТВ + мобильная связь по одной квитанции. Очень удобно.</div>
|
||
</div>
|
||
<div class="msg">
|
||
<div class="stars">★★★★★</div>
|
||
<div class="name">Сауле К.</div>
|
||
<div class="city">г. Шымкент</div>
|
||
<div class="text">У нас в районе только Казахтелеком провёл оптоволокно. Теперь внуки на удалёнке учатся без проблем. Рахмет!</div>
|
||
</div>
|
||
<div class="msg">
|
||
<div class="stars">★★★★★</div>
|
||
<div class="name">Диас Н.</div>
|
||
<div class="city">г. Караганда</div>
|
||
<div class="text">Монтажники приехали на следующий день после заявки, всё аккуратно установили и настроили Wi-Fi. Сервис на высоте.</div>
|
||
</div>
|
||
<div class="msg">
|
||
<div class="stars">★★★★★</div>
|
||
<div class="name">Меруерт Ж.</div>
|
||
<div class="city">г. Актобе</div>
|
||
<div class="text">Поменяли старый роутер на новый бесплатно при продлении договора. Мелочь, а приятно. Спасибо за заботу об абонентах!</div>
|
||
</div>
|
||
<div class="msg">
|
||
<div class="stars">★★★★★</div>
|
||
<div class="name">Бауыржан С.</div>
|
||
<div class="city">г. Уральск</div>
|
||
<div class="text">Когда случилась авария, бригада работала до ночи и восстановила связь в тот же день. Настоящие профи!</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="form-section" id="form">
|
||
<div class="container">
|
||
<h2>Присоединяйтесь!</h2>
|
||
<p class="desc">Оставьте и вы тёплые слова — пусть Казахтелеком знает, что его ценят.</p>
|
||
<form action="https://formspree.io/f/placeholder" method="POST">
|
||
<input type="text" name="name" placeholder="Ваше имя" required>
|
||
<input type="text" name="city" placeholder="Ваш город" required>
|
||
<div class="stars-select" id="starRating">
|
||
<button type="button" data-star="1">☆</button>
|
||
<button type="button" data-star="2">☆</button>
|
||
<button type="button" data-star="3">☆</button>
|
||
<button type="button" data-star="4">☆</button>
|
||
<button type="button" data-star="5">☆</button>
|
||
</div>
|
||
<input type="hidden" name="rating" id="ratingInput" value="5">
|
||
<textarea name="message" placeholder="За что вы благодарны Казахтелекому? Напишите пару тёплых слов..." required></textarea>
|
||
<button type="submit" class="btn">Отправить благодарность</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>Этот сайт создан благодарными абонентами <span class="kt">Казахтелеком</span>.</p>
|
||
<p>Официальный сайт: <a href="https://telecom.kz" target="_blank">telecom.kz</a></p>
|
||
</footer>
|
||
|
||
<script>
|
||
(function(){
|
||
var count = 12847;
|
||
var el = document.getElementById('thankCount');
|
||
function fmt(n){return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g,' ')}
|
||
setInterval(function(){count++;el.textContent=fmt(count)},8000);
|
||
|
||
var stars = document.querySelectorAll('#starRating button');
|
||
var ratingInput = document.getElementById('ratingInput');
|
||
stars.forEach(function(btn){
|
||
btn.addEventListener('click',function(){
|
||
var v = parseInt(this.dataset.star);
|
||
ratingInput.value = v;
|
||
stars.forEach(function(s,i){
|
||
s.textContent = i < v ? '★' : '☆';
|
||
s.classList.toggle('active', i < v);
|
||
});
|
||
});
|
||
});
|
||
document.querySelector('#starRating button[data-star="5"]').click();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|