415 lines
22 KiB
HTML
415 lines
22 KiB
HTML
<!-- no-design-system -->
|
||
<!DOCTYPE html>
|
||
<html lang="kk" data-theme="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>CYBER VR — Болашақ технологиялары</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="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- HEADER -->
|
||
<header class="header" id="header">
|
||
<div class="header-inner">
|
||
<a href="#" class="logo" onclick="navigateTo('home');return false">CYBER <span>VR</span></a>
|
||
<nav class="nav" id="mainNav">
|
||
<a href="#" class="active" data-page="home" data-i18n="nav_home" onclick="navigateTo('home');return false">Басты бет</a>
|
||
<a href="#" data-page="catalog" data-i18n="nav_catalog" onclick="navigateTo('catalog');return false">Каталог</a>
|
||
<a href="#" data-page="vrai" data-i18n="nav_vrai" onclick="navigateTo('vrai');return false">VR & AI</a>
|
||
<a href="#" data-page="builder" data-i18n="nav_builder" onclick="navigateTo('builder');return false">Компьютер құрастыру</a>
|
||
<a href="#" data-page="compare" data-i18n="nav_compare" onclick="navigateTo('compare');return false">Салыстыру</a>
|
||
<a href="#" data-page="ai" data-i18n="nav_ai" onclick="navigateTo('ai');return false">AI көмекші</a>
|
||
</nav>
|
||
<div class="header-right">
|
||
<button class="header-icon" onclick="navigateTo('catalog');setTimeout(function(){document.getElementById('searchInput').focus()},100)" title="Іздеу">🔍</button>
|
||
<button class="header-icon" onclick="navigateTo('favorites')" title="Таңдаулылар">
|
||
♡<span class="badge" id="favBadge" style="display:none">0</span>
|
||
</button>
|
||
<button class="header-icon" onclick="navigateTo('cart')" title="Себет">
|
||
🛒<span class="badge" id="cartBadge" style="display:none">0</span>
|
||
</button>
|
||
<button class="header-icon" onclick="navigateTo('profile')" title="Профиль">👤</button>
|
||
<div class="lang-switch">
|
||
<button class="active" onclick="setLang('kk')">KZ</button>
|
||
<button onclick="setLang('ru')">RU</button>
|
||
</div>
|
||
<button class="burger" id="burgerBtn" onclick="toggleMobile()">☰</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Mobile Nav -->
|
||
<div class="mobile-nav" id="mobileNav">
|
||
<a href="#" data-page="home" onclick="navigateTo('home');closeMobile();return false" data-i18n="nav_home">Басты бет</a>
|
||
<a href="#" data-page="catalog" onclick="navigateTo('catalog');closeMobile();return false" data-i18n="nav_catalog">Каталог</a>
|
||
<a href="#" data-page="vrai" onclick="navigateTo('vrai');closeMobile();return false" data-i18n="nav_vrai">VR & AI</a>
|
||
<a href="#" data-page="builder" onclick="navigateTo('builder');closeMobile();return false" data-i18n="nav_builder">Компьютер құрастыру</a>
|
||
<a href="#" data-page="compare" onclick="navigateTo('compare');closeMobile();return false" data-i18n="nav_compare">Салыстыру</a>
|
||
<a href="#" data-page="ai" onclick="navigateTo('ai');closeMobile();return false" data-i18n="nav_ai">AI көмекші</a>
|
||
<a href="#" data-page="favorites" onclick="navigateTo('favorites');closeMobile();return false" data-i18n="nav_favs">Таңдаулылар</a>
|
||
<a href="#" data-page="cart" onclick="navigateTo('cart');closeMobile();return false" data-i18n="nav_cart">Себет</a>
|
||
<a href="#" data-page="profile" onclick="navigateTo('profile');closeMobile();return false" data-i18n="nav_profile">Профиль</a>
|
||
<div class="lang-switch lang-switch-mobile" style="margin-top:16px;align-self:flex-start">
|
||
<button class="active" onclick="setLang('kk')">Қазақша</button>
|
||
<button onclick="setLang('ru')">Русский</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HOME PAGE -->
|
||
<div class="page active" id="page-home">
|
||
<section class="hero">
|
||
<div class="hero-grid"></div>
|
||
<div class="hero-glow"></div>
|
||
<div class="hero-inner">
|
||
<div class="hero-content">
|
||
<div class="hero-badge">🚀 <span data-i18n="hero_badge">Жаңа буын технологиялар</span></div>
|
||
<h1 data-i18n="hero_title">Болашақ технологиялары — <span class="neon">қазір қолжетімді</span></h1>
|
||
<p class="hero-sub" data-i18n="hero_sub">VR, AI және ойын технологияларын бір жерден зерттеңіз, салыстырыңыз және өзіңізге лайық шешімді таңдаңыз.</p>
|
||
<div class="hero-actions">
|
||
<button class="btn btn-primary btn-lg" onclick="navigateTo('catalog')" data-i18n="hero_cta1">Каталогты көру</button>
|
||
<button class="btn btn-outline btn-lg" onclick="navigateTo('builder')" data-i18n="hero_cta2">Компьютер құрастыру</button>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="hero-img-container">
|
||
<img src="https://picsum.photos/seed/cybervr-hero/600/600" alt="CYBER VR">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="categories">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<h2 data-i18n="cat_title">Негізгі <span class="neon">бағыттар</span></h2>
|
||
<p data-i18n="cat_sub">Өзіңізге қызықты бағытты таңдаңыз</p>
|
||
</div>
|
||
<div class="categories-grid reveal">
|
||
<div class="category-card" onclick="navigateTo('catalog','vr')">
|
||
<div class="category-icon">🥽</div>
|
||
<h3 data-i18n="cat_vr">VR құрылғылары</h3>
|
||
<p data-i18n="cat_vr_desc">Виртуалды шындық әлеміне еніңіз.</p>
|
||
<div class="arrow">→</div>
|
||
</div>
|
||
<div class="category-card" onclick="navigateTo('catalog','ai')">
|
||
<div class="category-icon">🤖</div>
|
||
<h3 data-i18n="cat_ai">AI құрылғылары</h3>
|
||
<p data-i18n="cat_ai_desc">Күнделікті өмірге арналған жаңа буын AI технологиялары.</p>
|
||
<div class="arrow">→</div>
|
||
</div>
|
||
<div class="category-card" onclick="navigateTo('catalog','gaming')">
|
||
<div class="category-icon">🎮</div>
|
||
<h3 data-i18n="cat_gaming">Gaming</h3>
|
||
<p data-i18n="cat_gaming_desc">Ойынға арналған заманауи құрылғылар мен аксессуарлар.</p>
|
||
<div class="arrow">→</div>
|
||
</div>
|
||
<div class="category-card" onclick="navigateTo('builder')">
|
||
<div class="category-icon">🖥️</div>
|
||
<h3 data-i18n="cat_builder">PC Builder</h3>
|
||
<p data-i18n="cat_builder_desc">Өзіңізге қажетті компьютерді жинаңыз.</p>
|
||
<div class="arrow">→</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<h2 data-i18n="pop_title">Танымал <span class="neon">өнімдер</span></h2>
|
||
<p data-i18n="pop_sub">Ең көп сатылатын құрылғылар</p>
|
||
</div>
|
||
<div class="products-grid reveal" id="popularProducts"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<h2 data-i18n="feat_title">Неліктен <span class="neon">CYBER VR</span>?</h2>
|
||
</div>
|
||
<div class="categories-grid reveal">
|
||
<div class="category-card" style="cursor:default">
|
||
<div class="category-icon">🚚</div>
|
||
<h3 data-i18n="feat1_title">Жылдам жеткізу</h3>
|
||
<p data-i18n="feat1_desc">Қазақстан бойынша тегін жеткізу</p>
|
||
</div>
|
||
<div class="category-card" style="cursor:default">
|
||
<div class="category-icon">🛡️</div>
|
||
<h3 data-i18n="feat2_title">Кепілдік</h3>
|
||
<p data-i18n="feat2_desc">Барлық өнімдерге 2 жыл кепілдік</p>
|
||
</div>
|
||
<div class="category-card" style="cursor:default">
|
||
<div class="category-icon">💬</div>
|
||
<h3 data-i18n="feat3_title">AI көмекші</h3>
|
||
<p data-i18n="feat3_desc">Таңдауға көмектесетін ақылды жүйе</p>
|
||
</div>
|
||
<div class="category-card" style="cursor:default">
|
||
<div class="category-icon">🔧</div>
|
||
<h3 data-i18n="feat4_title">PC Builder</h3>
|
||
<p data-i18n="feat4_desc">Компьютерді өзіңіз жинаңыз</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- CATALOG PAGE -->
|
||
<div class="page" id="page-catalog">
|
||
<div style="padding-top:80px">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 data-i18n="catalog_title">Каталог</h2>
|
||
<p data-i18n="catalog_sub">Барлық құрылғылар бір жерде</p>
|
||
</div>
|
||
<div class="tabs" id="catalogTabs">
|
||
<button class="tab-btn active" data-cat="all" onclick="filterCatalog('all')" data-i18n="cat_all">Барлығы</button>
|
||
<button class="tab-btn" data-cat="vr" onclick="filterCatalog('vr')">VR көзілдіріктері</button>
|
||
<button class="tab-btn" data-cat="ai" onclick="filterCatalog('ai')">AI көзілдіріктері</button>
|
||
<button class="tab-btn" data-cat="gpu" onclick="filterCatalog('gpu')">Видеокарталар</button>
|
||
<button class="tab-btn" data-cat="cpu" onclick="filterCatalog('cpu')">Процессорлар</button>
|
||
<button class="tab-btn" data-cat="ram" onclick="filterCatalog('ram')">Жедел жад</button>
|
||
<button class="tab-btn" data-cat="ssd" onclick="filterCatalog('ssd')">SSD</button>
|
||
<button class="tab-btn" data-cat="laptop" onclick="filterCatalog('laptop')">Ноутбуктер</button>
|
||
<button class="tab-btn" data-cat="accessory" onclick="filterCatalog('accessory')">Аксессуарлар</button>
|
||
<button class="tab-btn" data-cat="console" onclick="filterCatalog('console')">Ойын құрылғылары</button>
|
||
</div>
|
||
<div class="filters-bar">
|
||
<div class="search-box">
|
||
<span class="search-icon">🔍</span>
|
||
<input type="text" id="searchInput" placeholder="Өнімді іздеу..." data-i18n-placeholder="search_ph" oninput="filterCatalog()">
|
||
</div>
|
||
<select class="filter-select" id="filterBrand" onchange="filterCatalog()">
|
||
<option value="" data-i18n="filter_brand">Бренд</option>
|
||
<option value="NVIDIA">NVIDIA</option><option value="AMD">AMD</option><option value="Intel">Intel</option>
|
||
<option value="Meta">Meta</option><option value="Samsung">Samsung</option><option value="Apple">Apple</option>
|
||
<option value="Sony">Sony</option><option value="Corsair">Corsair</option><option value="ASUS">ASUS</option><option value="MSI">MSI</option>
|
||
</select>
|
||
<select class="filter-select" id="filterPrice" onchange="filterCatalog()">
|
||
<option value="" data-i18n="filter_price">Баға</option>
|
||
<option value="0-100000">100 000 ₸ дейін</option>
|
||
<option value="100000-300000">100 000 — 300 000 ₸</option>
|
||
<option value="300000-500000">300 000 — 500 000 ₸</option>
|
||
<option value="500000-1000000">500 000 — 1 000 000 ₸</option>
|
||
<option value="1000000-99999999">1 000 000 ₸ жоғары</option>
|
||
</select>
|
||
<select class="filter-select" id="filterRating" onchange="filterCatalog()">
|
||
<option value="" data-i18n="filter_rating">Рейтинг</option>
|
||
<option value="4.5">4.5+ ★</option><option value="4">4+ ★</option><option value="3.5">3.5+ ★</option>
|
||
</select>
|
||
</div>
|
||
<div class="products-grid" id="catalogProducts"></div>
|
||
<div class="empty-state" id="catalogEmpty" style="display:none">
|
||
<div class="icon">🔍</div>
|
||
<h3 data-i18n="no_results">Нәтиже табылмады</h3>
|
||
<p data-i18n="no_results_desc">Басқа сөздермен іздеп көріңіз</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VR & AI PAGE -->
|
||
<div class="page" id="page-vrai">
|
||
<div style="padding-top:80px">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>VR & <span class="neon">AI</span> <span data-i18n="vrai_title">технологиялары</span></h2>
|
||
<p data-i18n="vrai_sub">Виртуалды шындық және жасанды интеллект құрылғылары</p>
|
||
</div>
|
||
<div class="tabs">
|
||
<button class="tab-btn active" onclick="filterVRAI('all')" data-i18n="cat_all">Барлығы</button>
|
||
<button class="tab-btn" onclick="filterVRAI('vr')">VR</button>
|
||
<button class="tab-btn" onclick="filterVRAI('ai')">AI</button>
|
||
</div>
|
||
<div class="products-grid" id="vraiProducts"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PC BUILDER PAGE -->
|
||
<div class="page" id="page-builder">
|
||
<div style="padding-top:80px">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 data-i18n="builder_title">Компьютер <span class="neon">құрастыру</span></h2>
|
||
<p data-i18n="builder_sub">Өзіңізге қажетті компьютерді жинаңыз</p>
|
||
</div>
|
||
<div class="builder-layout">
|
||
<div class="builder-steps" id="builderSteps"></div>
|
||
<div class="builder-summary" id="builderSummary">
|
||
<h3 data-i18n="builder_your">Сіздің жинағыңыз</h3>
|
||
<div id="summaryItems"></div>
|
||
<div class="compat-status compat-ok" id="compatStatus">✓ <span data-i18n="compat_ok">Компоненттер үйлесімді</span></div>
|
||
<div class="summary-total">
|
||
<span class="label" data-i18n="total_price">Жалпы баға:</span>
|
||
<span class="price" id="totalPrice">0 ₸</span>
|
||
</div>
|
||
<div class="builder-actions">
|
||
<button class="btn btn-primary" onclick="saveBuild()" data-i18n="builder_save">Құрастыруды сақтау</button>
|
||
<button class="btn btn-ghost" onclick="clearBuild()" data-i18n="builder_clear">Құрастыруды тазарту</button>
|
||
<button class="btn btn-neon" onclick="buyBuild()" data-i18n="builder_buy">Сатып алу</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- COMPARE PAGE -->
|
||
<div class="page" id="page-compare">
|
||
<div style="padding-top:80px">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 data-i18n="compare_title">Құрылғыларды <span class="neon">салыстыру</span></h2>
|
||
<p data-i18n="compare_sub">Бірнеше өнімді салыстырыңыз</p>
|
||
</div>
|
||
<div id="compareContent"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI PAGE -->
|
||
<div class="page" id="page-ai">
|
||
<div style="padding-top:80px" class="ai-section">
|
||
<div class="container ai-container">
|
||
<div class="ai-header">
|
||
<div class="ai-icon">🧠</div>
|
||
<h2>CYBER <span class="neon">AI</span></h2>
|
||
<p data-i18n="ai_desc">Сізге қажетті технологияны таңдауға көмектесетін ақылды көмекші.</p>
|
||
</div>
|
||
<div class="ai-chat">
|
||
<div class="ai-messages" id="aiMessages">
|
||
<div class="ai-msg bot">
|
||
<div class="avatar">🧠</div>
|
||
<div class="bubble" data-i18n="ai_welcome">Сәлеметсіз бе! Мен CYBER AI көмекшісімін. Сізге қандай құрылғы керек екенін айтыңыз, мен көмектесемін. 🎮</div>
|
||
</div>
|
||
</div>
|
||
<div class="ai-suggestions">
|
||
<button class="ai-suggest-btn" onclick="aiSuggest(this)" data-i18n="ai_sug1">600 000 ₸ ойын компьютері</button>
|
||
<button class="ai-suggest-btn" onclick="aiSuggest(this)" data-i18n="ai_sug2">VR көзілдірік таңдау</button>
|
||
<button class="ai-suggest-btn" onclick="aiSuggest(this)" data-i18n="ai_sug3">Видеокарта салыстыру</button>
|
||
</div>
|
||
<div class="ai-input-area">
|
||
<input type="text" id="aiInput" placeholder="Сұрағыңызды жазыңыз..." data-i18n-placeholder="ai_ph" onkeydown="if(event.key==='Enter')sendAI()">
|
||
<button class="btn btn-primary btn-sm" onclick="sendAI()" data-i18n="ai_send">Жіберу</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FAVORITES PAGE -->
|
||
<div class="page" id="page-favorites">
|
||
<div style="padding-top:80px">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 data-i18n="fav_title">Таңдаулылар</h2>
|
||
<p data-i18n="fav_sub">Сіз сақтаған өнімдер</p>
|
||
</div>
|
||
<div class="products-grid" id="favProducts"></div>
|
||
<div class="empty-state" id="favEmpty">
|
||
<div class="icon">♡</div>
|
||
<h3 data-i18n="fav_empty">Таңдаулылар бос</h3>
|
||
<p data-i18n="fav_empty_desc">Каталогтан ұнаған өнімдерді қосыңыз</p>
|
||
<button class="btn btn-primary" style="margin-top:16px" onclick="navigateTo('catalog')" data-i18n="go_catalog">Каталогқа өту</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CART PAGE -->
|
||
<div class="page" id="page-cart">
|
||
<div style="padding-top:80px">
|
||
<div class="container cart-page">
|
||
<div class="section-header">
|
||
<h2 data-i18n="cart_title">Себет</h2>
|
||
</div>
|
||
<div id="cartContent"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PROFILE PAGE -->
|
||
<div class="page" id="page-profile">
|
||
<div style="padding-top:80px">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 data-i18n="profile_title">Менің профилім</h2>
|
||
</div>
|
||
<div class="profile-layout">
|
||
<div class="profile-sidebar">
|
||
<div class="profile-avatar">👤</div>
|
||
<div class="profile-name">Пайдаланушы</div>
|
||
<div class="profile-email">user@cybervr.kz</div>
|
||
<nav class="profile-menu">
|
||
<a href="#" class="active" onclick="showProfileTab('favorites');return false">♡ <span data-i18n="nav_favs">Таңдаулылар</span></a>
|
||
<a href="#" onclick="showProfileTab('builds');return false">🖥️ <span data-i18n="my_builds">Менің жинақтарым</span></a>
|
||
<a href="#" onclick="showProfileTab('compares');return false">⚖️ <span data-i18n="my_compares">Салыстырулар</span></a>
|
||
<a href="#" onclick="showProfileTab('history');return false">📦 <span data-i18n="buy_history">Сатып алу тарихы</span></a>
|
||
<a href="#" onclick="showProfileTab('settings');return false">⚙️ <span data-i18n="settings">Баптаулар</span></a>
|
||
</nav>
|
||
</div>
|
||
<div class="profile-content" id="profileContent">
|
||
<h2 data-i18n="nav_favs">Таңдаулылар</h2>
|
||
<div id="profileFavs"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PRODUCT MODAL -->
|
||
<div class="modal-overlay" id="productModal">
|
||
<div class="modal" style="max-width:600px">
|
||
<div class="modal-header">
|
||
<h3 id="modalTitle">Өнім</h3>
|
||
<button class="modal-close" onclick="closeModal('productModal')">✕</button>
|
||
</div>
|
||
<div class="modal-body" id="modalBody"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="footer" id="siteFooter">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<div class="logo">CYBER <span>VR</span></div>
|
||
<p data-i18n="footer_desc">Қазақстандағы VR, AI және ойын технологияларының ең үлкен платформасы.</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4 data-i18n="footer_catalog">Каталог</h4>
|
||
<a href="#" onclick="navigateTo('catalog','vr');return false">VR көзілдіріктері</a>
|
||
<a href="#" onclick="navigateTo('catalog','ai');return false">AI көзілдіріктері</a>
|
||
<a href="#" onclick="navigateTo('catalog','gpu');return false">Видеокарталар</a>
|
||
<a href="#" onclick="navigateTo('catalog','cpu');return false">Процессорлар</a>
|
||
<a href="#" onclick="navigateTo('catalog','laptop');return false">Ноутбуктер</a>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4 data-i18n="footer_services">Қызметтер</h4>
|
||
<a href="#" onclick="navigateTo('builder');return false" data-i18n="nav_builder">Компьютер құрастыру</a>
|
||
<a href="#" onclick="navigateTo('compare');return false" data-i18n="nav_compare">Салыстыру</a>
|
||
<a href="#" onclick="navigateTo('ai');return false" data-i18n="nav_ai">AI көмекші</a>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4 data-i18n="footer_contact">Байланыс</h4>
|
||
<a href="#">info@cybervr.kz</a>
|
||
<a href="#">+7 (777) 123-45-67</a>
|
||
<a href="#" data-i18n="footer_addr">Алматы, Қазақстан</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<span>© 2026 CYBER VR. <span data-i18n="footer_rights">Барлық құқықтар қорғалған.</span></span>
|
||
<span data-i18n="footer_made">Қазақстанда жасалған 🇰🇿</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<div id="toastContainer"></div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|