131 lines
6.3 KiB
HTML
131 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="kk" data-theme="auto">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Құттықтау өлеңдері — Туған күн және мерейтойлар</title>
|
|
<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>">
|
|
<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>
|
|
.poem-card { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
|
|
.poem-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
|
|
.poem-text { font-size: 1.1rem; line-height: 1.8; white-space: pre-line; }
|
|
.category-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
|
|
.search-box { width: 100%; margin-bottom: 24px; }
|
|
.copy-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--kt-ai-bg); border: 1px solid var(--kt-ai-border); padding: 12px 24px; border-radius: var(--kt-ai-radius-xl); box-shadow: 0 8px 24px rgba(0,0,0,0.15); transition: transform 0.3s ease; z-index: 1000; }
|
|
.copy-toast.show { transform: translateX(-50%) translateY(0); }
|
|
.hero-emoji { font-size: 3rem; margin-bottom: 16px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<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="#poems">Өлеңдер</a>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="kt-ai-hero" data-align="center">
|
|
<div class="kt-ai-wrap">
|
|
<div class="hero-emoji">🎂🎈🎁</div>
|
|
<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="#poems">Өлеңдерді көру</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">
|
|
<div class="kt-ai-tile-icon">🎂</div>
|
|
<h3>Туған күн</h3>
|
|
<p>Жақын адамдарыңыздың туған күніне әдемі тілектер</p>
|
|
</article>
|
|
<article class="kt-ai-tile">
|
|
<div class="kt-ai-tile-icon">🎉</div>
|
|
<h3>Мерейтой</h3>
|
|
<p>50, 60, 70 жас мерейтойларына салтанатты құттықтаулар</p>
|
|
</article>
|
|
<article class="kt-ai-tile">
|
|
<div class="kt-ai-tile-icon">💍</div>
|
|
<h3>Үйлену той</h3>
|
|
<p>Жас жұбайларға арналған жылы лебіздер</p>
|
|
</article>
|
|
<article class="kt-ai-tile">
|
|
<div class="kt-ai-tile-icon">👶</div>
|
|
<h3>Бесік той</h3>
|
|
<p>Сәбидің дүниеге келуімен құттықтаулар</p>
|
|
</article>
|
|
<article class="kt-ai-tile">
|
|
<div class="kt-ai-tile-icon">🎓</div>
|
|
<h3>Түлектер кеші</h3>
|
|
<p>Мектеп бітірушілерге арналған тілектер</p>
|
|
</article>
|
|
<article class="kt-ai-tile">
|
|
<div class="kt-ai-tile-icon">🌸</div>
|
|
<h3>8 Наурыз</h3>
|
|
<p>Әйелдер күніне арналған құттықтаулар</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="poems" class="kt-ai-section" data-divider="true">
|
|
<div class="kt-ai-wrap" data-width="wide">
|
|
<div class="kt-ai-section-head">
|
|
<h2>Құттықтау өлеңдері</h2>
|
|
<p>Іздеңіз, таңдаңыз және көшіріп алыңыз</p>
|
|
</div>
|
|
|
|
<div class="search-box" style="margin-top:var(--kt-ai-space-6)">
|
|
<input id="searchInput" class="kt-ai-input" placeholder="Өлеңнен сөз іздеу... (мысалы: бақыт, денсаулық, ұзақ ғұмыр)" type="text">
|
|
</div>
|
|
|
|
<div class="category-filter">
|
|
<button class="kt-ai-btn" data-variant="primary" data-category="all">Барлығы</button>
|
|
<button class="kt-ai-btn" data-variant="ghost" data-category="tugankun">🎂 Туған күн</button>
|
|
<button class="kt-ai-btn" data-variant="ghost" data-category="mereitoy">🎉 Мерейтой</button>
|
|
<button class="kt-ai-btn" data-variant="ghost" data-category="uileny">💍 Үйлену</button>
|
|
<button class="kt-ai-btn" data-variant="ghost" data-category="besik">👶 Бесік той</button>
|
|
<button class="kt-ai-btn" data-variant="ghost" data-category="tulek">🎓 Түлектер</button>
|
|
<button class="kt-ai-btn" data-variant="ghost" data-category="nauryz">🌸 8 Наурыз</button>
|
|
</div>
|
|
|
|
<div id="poemsGrid" class="kt-ai-grid" style="margin-top:var(--kt-ai-space-6)">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="kt-ai-cta">
|
|
<div class="kt-ai-wrap">
|
|
<h2>Ерекше күніңізбен! 🎊</h2>
|
|
<p>Бұл құттықтауларды туыстарыңызға, достарыңызға және әріптестеріңізбен бөлісіңіз. Әр мереке есте қаларлық болсын!</p>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
|
<span>© 2026 Құттықтау — Мереке порталы</span>
|
|
<span class="kt-ai-spacer"></span>
|
|
<span>Барлық құқықтар қорғалған</span>
|
|
</footer>
|
|
|
|
<div id="copyToast" class="copy-toast">✅ Өлең көшірілді!</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|