CYBER VR — полный сайт: каталог, конструктор ПК, AI-помощник, корзина, сравнение, двуязычность KZ/RU
This commit is contained in:
parent
ffa5277d31
commit
f811d3cb0f
663
app.js
Normal file
663
app.js
Normal file
@ -0,0 +1,663 @@
|
||||
<!-- no-design-system -->
|
||||
var PRODUCTS=[
|
||||
{id:1,name:"Meta Quest 3",cat:"vr",brand:"Meta",price:299990,rating:4.8,specs:"128GB, Snapdragon XR2 Gen 2, Full HD+",img:"https://picsum.photos/seed/quest3/400/300",desc_kk:"VR көзілдіріктің ең жаңа нұсқасы. Жоғары сапалы виртуалды шындық тәжірибесі.",desc_ru:"Новейшая версия VR очков. Высококачественный опыт виртуальной реальности."},
|
||||
{id:2,name:"Meta Quest Pro",cat:"vr",brand:"Meta",price:799990,rating:4.6,specs:"256GB, Snapdragon XR2+, Mixed Reality",img:"https://picsum.photos/seed/questpro/400/300",desc_kk:"Кәсіби деңгейдегі VR/MR көзілдірік.",desc_ru:"VR/MR очки профессионального уровня."},
|
||||
{id:3,name:"PlayStation VR2",cat:"vr",brand:"Sony",price:349990,rating:4.5,specs:"OLED, 4K HDR, Eye Tracking",img:"https://picsum.photos/seed/psvr2/400/300",desc_kk:"PlayStation 5 үшін арналған VR көзілдірік.",desc_ru:"VR очки для PlayStation 5."},
|
||||
{id:4,name:"Samsung Galaxy AI Glasses",cat:"ai",brand:"Samsung",price:449990,rating:4.4,specs:"AI Assistant, AR Display, Camera",img:"https://picsum.photos/seed/samsungai/400/300",desc_kk:"AI функциялары бар ақылды көзілдірік.",desc_ru:"Умные очки с функциями AI."},
|
||||
{id:5,name:"Apple Vision Pro",cat:"ai",brand:"Apple",price:1999990,rating:4.9,specs:"M2 chip, 4K micro-OLED, Spatial Computing",img:"https://picsum.photos/seed/visionpro/400/300",desc_kk:"Ең озық кеңістіктік компьютер.",desc_ru:"Самый продвинутый пространственный компьютер."},
|
||||
{id:6,name:"Ray-Ban Meta Smart Glasses",cat:"ai",brand:"Meta",price:179990,rating:4.3,specs:"AI, Camera, Speakers, Meta AI",img:"https://picsum.photos/seed/raybanmeta/400/300",desc_kk:"AI функциялары бар ақылды көзілдірік.",desc_ru:"Умные очки с функциями AI."},
|
||||
{id:7,name:"NVIDIA RTX 4090",cat:"gpu",brand:"NVIDIA",price:899990,rating:4.9,specs:"24GB GDDR6X, 16384 CUDA, 450W",img:"https://picsum.photos/seed/rtx4090/400/300",desc_kk:"Ең қуатты ойын видеокартасы.",desc_ru:"Самая мощная игровая видеокарта."},
|
||||
{id:8,name:"NVIDIA RTX 4070 Ti Super",cat:"gpu",brand:"NVIDIA",price:499990,rating:4.7,specs:"16GB GDDR6X, 8448 CUDA, 285W",img:"https://picsum.photos/seed/rtx4070tis/400/300",desc_kk:"Жоғары өнімділік, қолайлы баға.",desc_ru:"Высокая производительность, доступная цена."},
|
||||
{id:9,name:"AMD Radeon RX 7900 XTX",cat:"gpu",brand:"AMD",price:699990,rating:4.6,specs:"24GB GDDR6, 6144 SP, 355W",img:"https://picsum.photos/seed/rx7900xtx/400/300",desc_kk:"AMD-дің ең қуатты видеокартасы.",desc_ru:"Самая мощная видеокарта от AMD."},
|
||||
{id:10,name:"Intel Core i9-14900K",cat:"cpu",brand:"Intel",price:349990,rating:4.8,specs:"24 ядро, 32 ағын, 6.0 GHz",img:"https://picsum.photos/seed/i914900k/400/300",desc_kk:"Intel-дің ең жылдам процессоры.",desc_ru:"Самый быстрый процессор Intel."},
|
||||
{id:11,name:"AMD Ryzen 9 7950X",cat:"cpu",brand:"AMD",price:329990,rating:4.7,specs:"16 ядро, 32 ағын, 5.7 GHz",img:"https://picsum.photos/seed/r97950x/400/300",desc_kk:"AMD-дің флагмандық процессоры.",desc_ru:"Флагманский процессор AMD."},
|
||||
{id:12,name:"Intel Core i5-14600K",cat:"cpu",brand:"Intel",price:179990,rating:4.5,specs:"14 ядро, 20 ағын, 5.3 GHz",img:"https://picsum.photos/seed/i514600k/400/300",desc_kk:"Ойын үшін ең тиімді процессор.",desc_ru:"Самый эффективный процессор для игр."},
|
||||
{id:13,name:"Corsair Vengeance DDR5 32GB",cat:"ram",brand:"Corsair",price:89990,rating:4.6,specs:"DDR5-6000, CL30, 2x16GB",img:"https://picsum.photos/seed/corsair32/400/300",desc_kk:"Жоғары жылдамдықты DDR5 жад.",desc_ru:"Высокоскоростная DDR5 память."},
|
||||
{id:14,name:"G.Skill Trident Z5 64GB",cat:"ram",brand:"G.Skill",price:189990,rating:4.8,specs:"DDR5-6400, CL32, 2x32GB",img:"https://picsum.photos/seed/gskill64/400/300",desc_kk:"Кәсіби деңгейдегі жедел жад.",desc_ru:"Оперативная память профессионального уровня."},
|
||||
{id:15,name:"Samsung 990 Pro 2TB",cat:"ssd",brand:"Samsung",price:129990,rating:4.9,specs:"NVMe M.2, 7450 MB/s оқу",img:"https://picsum.photos/seed/990pro/400/300",desc_kk:"Ең жылдам NVMe SSD.",desc_ru:"Самый быстрый NVMe SSD."},
|
||||
{id:16,name:"WD Black SN850X 1TB",cat:"ssd",brand:"Western Digital",price:79990,rating:4.7,specs:"NVMe M.2, 7300 MB/s оқу",img:"https://picsum.photos/seed/sn850x/400/300",desc_kk:"Ойынға арналған жылдам SSD.",desc_ru:"Быстрый SSD для игр."},
|
||||
{id:17,name:"ASUS ROG Strix G16",cat:"laptop",brand:"ASUS",price:899990,rating:4.7,specs:"RTX 4070, i9-14900HX, 32GB, 16\" 240Hz",img:"https://picsum.photos/seed/rogstrix/400/300",desc_kk:"Ойын ноутбугының флагманы.",desc_ru:"Флагманский игровой ноутбук."},
|
||||
{id:18,name:"MSI Titan 18 HX",cat:"laptop",brand:"MSI",price:1999990,rating:4.8,specs:"RTX 4090, i9-14900HX, 64GB, 18\" 4K",img:"https://picsum.photos/seed/msititan/400/300",desc_kk:"Ең қуатты ойын ноутбугы.",desc_ru:"Самый мощный игровой ноутбук."},
|
||||
{id:19,name:"Sony DualSense Edge",cat:"accessory",brand:"Sony",price:109990,rating:4.5,specs:"PS5, Adaptive Triggers, Haptic Feedback",img:"https://picsum.photos/seed/dualsense/400/300",desc_kk:"PlayStation 5 үшін премиум контроллер.",desc_ru:"Премиум контроллер для PlayStation 5."},
|
||||
{id:20,name:"Corsair K100 RGB",cat:"accessory",brand:"Corsair",price:129990,rating:4.6,specs:"Mechanical, OPX Switches, iCUE",img:"https://picsum.photos/seed/k100/400/300",desc_kk:"Премиум механикалық пернетақта.",desc_ru:"Премиум механическая клавиатура."},
|
||||
{id:21,name:"PlayStation 5 Pro",cat:"console",brand:"Sony",price:399990,rating:4.8,specs:"Custom AMD, 2TB SSD, 8K Support",img:"https://picsum.photos/seed/ps5pro/400/300",desc_kk:"Sony-дің ең озық консолі.",desc_ru:"Самая продвинутая консоль Sony."},
|
||||
{id:22,name:"NVIDIA RTX 4080 Super",cat:"gpu",brand:"NVIDIA",price:649990,rating:4.7,specs:"16GB GDDR6X, 10240 CUDA, 320W",img:"https://picsum.photos/seed/rtx4080s/400/300",desc_kk:"Жоғары деңгейдегі ойын видеокартасы.",desc_ru:"Высококлассная игровая видеокарта."},
|
||||
{id:23,name:"AMD Ryzen 7 7800X3D",cat:"cpu",brand:"AMD",price:229990,rating:4.9,specs:"8 ядро, 16 ағын, 5.0 GHz, 3D V-Cache",img:"https://picsum.photos/seed/7800x3d/400/300",desc_kk:"Ойын үшін ең үздік процессор.",desc_ru:"Лучший процессор для игр."},
|
||||
{id:24,name:"Meta Quest 3S",cat:"vr",brand:"Meta",price:149990,rating:4.4,specs:"128GB, Snapdragon XR2 Gen 2",img:"https://picsum.photos/seed/quest3s/400/300",desc_kk:"Қолайлы бағадағы VR көзілдірік.",desc_ru:"VR очки по доступной цене."}
|
||||
];
|
||||
|
||||
var BUILDER_STEPS=[
|
||||
{key:"cpu",label_kk:"Процессор",label_ru:"Процессор",icon:"⚡",cat:"cpu"},
|
||||
{key:"mobo",label_kk:"Аналық плата",label_ru:"Материнская плата",icon:"🔲",cat:"mobo"},
|
||||
{key:"gpu",label_kk:"Видеокарта",label_ru:"Видеокарта",icon:"🎮",cat:"gpu"},
|
||||
{key:"ram",label_kk:"Жедел жад",label_ru:"Оперативная память",icon:"💾",cat:"ram"},
|
||||
{key:"ssd",label_kk:"SSD / HDD",label_ru:"SSD / HDD",icon:"💿",cat:"ssd"},
|
||||
{key:"psu",label_kk:"Блок питания",label_ru:"Блок питания",icon:"🔌",cat:"psu"},
|
||||
{key:"cool",label_kk:"Салқындату жүйесі",label_ru:"Система охлаждения",icon:"❄️",cat:"cool"},
|
||||
{key:"case",label_kk:"Корпус",label_ru:"Корпус",icon:"🖥️",cat:"case"}
|
||||
];
|
||||
|
||||
var MOBOS=[
|
||||
{id:101,name:"ASUS ROG Maximus Z790",brand:"ASUS",price:299990,socket:"LGA1700",specs:"DDR5, PCIe 5.0, WiFi 7",img:"https://picsum.photos/seed/rogz790/100/100"},
|
||||
{id:102,name:"MSI MEG X670E ACE",brand:"MSI",price:349990,socket:"AM5",specs:"DDR5, PCIe 5.0, 10GbE",img:"https://picsum.photos/seed/msix670e/100/100"},
|
||||
{id:103,name:"Gigabyte B650 AORUS Elite",brand:"Gigabyte",price:129990,socket:"AM5",specs:"DDR5, PCIe 4.0, WiFi 6E",img:"https://picsum.photos/seed/b650aorus/100/100"},
|
||||
{id:104,name:"ASRock B760M Pro RS",brand:"ASRock",price:79990,socket:"LGA1700",specs:"DDR5, PCIe 4.0",img:"https://picsum.photos/seed/b760m/100/100"}
|
||||
];
|
||||
var PSUS=[
|
||||
{id:201,name:"Corsair RM1000x",brand:"Corsair",price:109990,watt:1000,specs:"80+ Gold, Full Modular",img:"https://picsum.photos/seed/rm1000x/100/100"},
|
||||
{id:202,name:"Seasonic PRIME TX-1300",brand:"Seasonic",price:199990,watt:1300,specs:"80+ Titanium, Full Modular",img:"https://picsum.photos/seed/tx1300/100/100"},
|
||||
{id:203,name:"be quiet! Dark Power 850W",brand:"be quiet!",price:89990,watt:850,specs:"80+ Platinum, Fully Modular",img:"https://picsum.photos/seed/dp850/100/100"},
|
||||
{id:204,name:"EVGA SuperNOVA 750 G7",brand:"EVGA",price:69990,watt:750,specs:"80+ Gold, Full Modular",img:"https://picsum.photos/seed/evga750/100/100"}
|
||||
];
|
||||
var COOLERS=[
|
||||
{id:301,name:"NZXT Kraken X73",brand:"NZXT",price:129990,type:"AIO",specs:"360mm, RGB, 280W TDP",img:"https://picsum.photos/seed/krakenx73/100/100"},
|
||||
{id:302,name:"Noctua NH-D15",brand:"Noctua",price:69990,type:"Tower",specs:"250W TDP, Ultra Quiet",img:"https://picsum.photos/seed/nhd15/100/100"},
|
||||
{id:303,name:"Corsair iCUE H150i Elite",brand:"Corsair",price:149990,type:"AIO",specs:"360mm, LCD Display, 280W TDP",img:"https://picsum.photos/seed/h150i/100/100"},
|
||||
{id:304,name:"DeepCool AK620",brand:"DeepCool",price:39990,type:"Tower",specs:"200W TDP, Dual Fan",img:"https://picsum.photos/seed/ak620/100/100"}
|
||||
];
|
||||
var CASES=[
|
||||
{id:401,name:"Lian Li O11 Dynamic EVO",brand:"Lian Li",price:109990,specs:"Mid Tower, Tempered Glass, ATX",img:"https://picsum.photos/seed/o11evo/100/100"},
|
||||
{id:402,name:"NZXT H9 Elite",brand:"NZXT",price:129990,specs:"Mid Tower, Dual Chamber, ATX",img:"https://picsum.photos/seed/h9elite/100/100"},
|
||||
{id:403,name:"Fractal Design Torrent",brand:"Fractal",price:149990,specs:"Mid Tower, High Airflow, ATX",img:"https://picsum.photos/seed/torrent/100/100"},
|
||||
{id:404,name:"Corsair 4000D Airflow",brand:"Corsair",price:69990,specs:"Mid Tower, Airflow, ATX",img:"https://picsum.photos/seed/4000d/100/100"}
|
||||
];
|
||||
|
||||
var lang=localStorage.getItem('cybervr-lang')||'kk';
|
||||
var favorites=JSON.parse(localStorage.getItem('cybervr-favs')||'[]');
|
||||
var cart=JSON.parse(localStorage.getItem('cybervr-cart')||'[]');
|
||||
var buildSelections={};
|
||||
var currentCat='all';
|
||||
var builds=JSON.parse(localStorage.getItem('cybervr-builds')||'[]');
|
||||
var compareList=JSON.parse(localStorage.getItem('cybervr-compare')||'[]');
|
||||
|
||||
var T={
|
||||
kk:{
|
||||
nav_home:"Басты бет",nav_catalog:"Каталог",nav_vrai:"VR & AI",nav_builder:"Компьютер құрастыру",
|
||||
nav_compare:"Салыстыру",nav_ai:"AI көмекші",nav_favs:"Таңдаулылар",nav_cart:"Себет",nav_profile:"Профиль",
|
||||
hero_badge:"Жаңа буын технологиялар",
|
||||
hero_title:'Болашақ технологиялары — <span class="neon">қазір қолжетімді</span>',
|
||||
hero_sub:"VR, AI және ойын технологияларын бір жерден зерттеңіз, салыстырыңыз және өзіңізге лайық шешімді таңдаңыз.",
|
||||
hero_cta1:"Каталогты көру",hero_cta2:"Компьютер құрастыру",
|
||||
cat_title:'Негізгі <span class="neon">бағыттар</span>',cat_sub:"Өзіңізге қызықты бағытты таңдаңыз",
|
||||
cat_vr:"VR құрылғылары",cat_vr_desc:"Виртуалды шындық әлеміне еніңіз.",
|
||||
cat_ai:"AI құрылғылары",cat_ai_desc:"Күнделікті өмірге арналған жаңа буын AI технологиялары.",
|
||||
cat_gaming:"Gaming",cat_gaming_desc:"Ойынға арналған заманауи құрылғылар мен аксессуарлар.",
|
||||
cat_builder:"PC Builder",cat_builder_desc:"Өзіңізге қажетті компьютерді жинаңыз.",
|
||||
pop_title:'Танымал <span class="neon">өнімдер</span>',pop_sub:"Ең көп сатылатын құрылғылар",
|
||||
feat_title:'Неліктен <span class="neon">CYBER VR</span>?',
|
||||
feat1_title:"Жылдам жеткізу",feat1_desc:"Қазақстан бойынша тегін жеткізу",
|
||||
feat2_title:"Кепілдік",feat2_desc:"Барлық өнімдерге 2 жыл кепілдік",
|
||||
feat3_title:"AI көмекші",feat3_desc:"Таңдауға көмектесетін ақылды жүйе",
|
||||
feat4_title:"PC Builder",feat4_desc:"Компьютерді өзіңіз жинаңыз",
|
||||
catalog_title:"Каталог",catalog_sub:"Барлық құрылғылар бір жерде",
|
||||
cat_all:"Барлығы",search_ph:"Өнімді іздеу...",filter_brand:"Бренд",filter_price:"Баға",filter_rating:"Рейтинг",
|
||||
no_results:"Нәтиже табылмады",no_results_desc:"Басқа сөздермен іздеп көріңіз",
|
||||
vrai_title:"технологиялары",vrai_sub:"Виртуалды шындық және жасанды интеллект құрылғылары",
|
||||
builder_title:'Компьютер <span class="neon">құрастыру</span>',builder_sub:"Өзіңізге қажетті компьютерді жинаңыз",
|
||||
builder_your:"Сіздің жинағыңыз",compat_ok:"Компоненттер үйлесімді",
|
||||
compat_warn:"Кейбір компоненттер арасында үйлесімділік мәселесі болуы мүмкін",
|
||||
total_price:"Жалпы баға:",builder_save:"Құрастыруды сақтау",builder_clear:"Құрастыруды тазарту",
|
||||
builder_buy:"Сатып алу",builder_select:"Таңдау",
|
||||
compare_title:'Құрылғыларды <span class="neon">салыстыру</span>',compare_sub:"Бірнеше өнімді салыстырыңыз",
|
||||
ai_desc:"Сізге қажетті технологияны таңдауға көмектесетін ақылды көмекші.",
|
||||
ai_welcome:"Сәлеметсіз бе! Мен CYBER AI көмекшісімін. Сізге қандай құрылғы керек екенін айтыңыз, мен көмектесемін. 🎮",
|
||||
ai_sug1:"600 000 ₸ ойын компьютері",ai_sug2:"VR көзілдірік таңдау",ai_sug3:"Видеокарта салыстыру",
|
||||
ai_ph:"Сұрағыңызды жазыңыз...",ai_send:"Жіберу",
|
||||
fav_title:"Таңдаулылар",fav_sub:"Сіз сақтаған өнімдер",fav_empty:"Таңдаулылар бос",
|
||||
fav_empty_desc:"Каталогтан ұнаған өнімдерді қосыңыз",go_catalog:"Каталогқа өту",
|
||||
cart_title:"Себет",cart_empty:"Себет бос",cart_empty_desc:"Каталогтан өнімдерді қосыңыз",
|
||||
cart_order:"Тапсырыс беру",cart_remove:"Өшіру",
|
||||
profile_title:"Менің профилім",my_builds:"Менің жинақтарым",my_compares:"Салыстырулар",
|
||||
buy_history:"Сатып алу тарихы",settings:"Баптаулар",
|
||||
details:"Толығырақ",add_cart:"Себетке қосу",added_cart:"Себетке қосылды!",
|
||||
added_fav:"Таңдаулыларға қосылды!",removed_fav:"Таңдаулылардан алынды",
|
||||
build_saved:"Жинақ сақталды!",build_cleared:"Жинақ тазартылды",
|
||||
build_empty:"Компоненттерді таңдаңыз",build_bought:"Тапсырыс рәсімделді!",
|
||||
compare_empty:"Салыстыру үшін өнімдерді қосыңыз",compare_add:"Салыстыруға қосу",compare_remove:"Салыстырудан алу",
|
||||
footer_desc:"Қазақстандағы VR, AI және ойын технологияларының ең үлкен платформасы.",
|
||||
footer_catalog:"Каталог",footer_services:"Қызметтер",footer_contact:"Байланыс",
|
||||
footer_addr:"Алматы, Қазақстан",footer_rights:"Барлық құқықтар қорғалған.",
|
||||
footer_made:"Қазақстанда жасалған 🇰🇿",
|
||||
price:"Баға",rating:"Рейтинг",specs:"Сипаттамалар",brand_l:"Бренд",
|
||||
qty:"Саны",total:"Жалпы",socket_t:"Сокет",watt_t:"Қуат",type_t:"Тип",
|
||||
profile_favs:"Таңдаулылар",profile_builds:"Менің жинақтарым",no_builds:"Жинақтар жоқ",
|
||||
no_history:"Сатып алу тарихы бос",select_component:"Компонентті таңдаңыз"
|
||||
},
|
||||
ru:{
|
||||
nav_home:"Главная",nav_catalog:"Каталог",nav_vrai:"VR & AI",nav_builder:"Сборка ПК",
|
||||
nav_compare:"Сравнение",nav_ai:"AI помощник",nav_favs:"Избранное",nav_cart:"Корзина",nav_profile:"Профиль",
|
||||
hero_badge:"Технологии нового поколения",
|
||||
hero_title:'Технологии будущего — <span class="neon">доступны уже сейчас</span>',
|
||||
hero_sub:"Исследуйте, сравнивайте и выбирайте VR, AI и игровые технологии в одном месте.",
|
||||
hero_cta1:"Смотреть каталог",hero_cta2:"Собрать компьютер",
|
||||
cat_title:'Основные <span class="neon">направления</span>',cat_sub:"Выберите интересующее направление",
|
||||
cat_vr:"VR устройства",cat_vr_desc:"Погрузитесь в мир виртуальной реальности.",
|
||||
cat_ai:"AI устройства",cat_ai_desc:"Технологии AI нового поколения для повседневной жизни.",
|
||||
cat_gaming:"Gaming",cat_gaming_desc:"Современные игровые устройства и аксессуары.",
|
||||
cat_builder:"PC Builder",cat_builder_desc:"Соберите нужный вам компьютер.",
|
||||
pop_title:'Популярные <span class="neon">товары</span>',pop_sub:"Самые продаваемые устройства",
|
||||
feat_title:'Почему <span class="neon">CYBER VR</span>?',
|
||||
feat1_title:"Быстрая доставка",feat1_desc:"Бесплатная доставка по Казахстану",
|
||||
feat2_title:"Гарантия",feat2_desc:"2 года гарантии на все товары",
|
||||
feat3_title:"AI помощник",feat3_desc:"Умная система для помощи в выборе",
|
||||
feat4_title:"PC Builder",feat4_desc:"Соберите компьютер сами",
|
||||
catalog_title:"Каталог",catalog_sub:"Все устройства в одном месте",
|
||||
cat_all:"Все",search_ph:"Поиск товаров...",filter_brand:"Бренд",filter_price:"Цена",filter_rating:"Рейтинг",
|
||||
no_results:"Ничего не найдено",no_results_desc:"Попробуйте другие слова",
|
||||
vrai_title:"технологии",vrai_sub:"Устройства виртуальной реальности и искусственного интеллекта",
|
||||
builder_title:'Сборка <span class="neon">компьютера</span>',builder_sub:"Соберите нужный вам компьютер",
|
||||
builder_your:"Ваша сборка",compat_ok:"Компоненты совместимы",
|
||||
compat_warn:"Возможны проблемы совместимости некоторых компонентов",
|
||||
total_price:"Итого:",builder_save:"Сохранить сборку",builder_clear:"Очистить сборку",
|
||||
builder_buy:"Купить",builder_select:"Выбрать",
|
||||
compare_title:'<span class="neon">Сравнение</span> устройств',compare_sub:"Сравните несколько товаров",
|
||||
ai_desc:"Умный помощник для выбора нужной вам технологии.",
|
||||
ai_welcome:"Здравствуйте! Я CYBER AI помощник. Расскажите, какое устройство вам нужно, и я помогу. 🎮",
|
||||
ai_sug1:"Игровой ПК за 600 000 ₸",ai_sug2:"Выбрать VR очки",ai_sug3:"Сравнить видеокарты",
|
||||
ai_ph:"Напишите ваш вопрос...",ai_send:"Отправить",
|
||||
fav_title:"Избранное",fav_sub:"Сохранённые вами товары",fav_empty:"Избранное пусто",
|
||||
fav_empty_desc:"Добавьте понравившиеся товары из каталога",go_catalog:"Перейти в каталог",
|
||||
cart_title:"Корзина",cart_empty:"Корзина пуста",cart_empty_desc:"Добавьте товары из каталога",
|
||||
cart_order:"Оформить заказ",cart_remove:"Удалить",
|
||||
profile_title:"Мой профиль",my_builds:"Мои сборки",my_compares:"Сравнения",
|
||||
buy_history:"История покупок",settings:"Настройки",
|
||||
details:"Подробнее",add_cart:"В корзину",added_cart:"Добавлено в корзину!",
|
||||
added_fav:"Добавлено в избранное!",removed_fav:"Удалено из избранного",
|
||||
build_saved:"Сборка сохранена!",build_cleared:"Сборка очищена",
|
||||
build_empty:"Выберите компоненты",build_bought:"Заказ оформлен!",
|
||||
compare_empty:"Добавьте товары для сравнения",compare_add:"Добавить к сравнению",compare_remove:"Убрать из сравнения",
|
||||
footer_desc:"Крупнейшая платформа VR, AI и игровых технологий в Казахстане.",
|
||||
footer_catalog:"Каталог",footer_services:"Услуги",footer_contact:"Контакты",
|
||||
footer_addr:"Алматы, Казахстан",footer_rights:"Все права защищены.",
|
||||
footer_made:"Сделано в Казахстане 🇰🇿",
|
||||
price:"Цена",rating:"Рейтинг",specs:"Характеристики",brand_l:"Бренд",
|
||||
qty:"Количество",total:"Итого",socket_t:"Сокет",watt_t:"Мощность",type_t:"Тип",
|
||||
profile_favs:"Избранное",profile_builds:"Мои сборки",no_builds:"Нет сборок",
|
||||
no_history:"История покупок пуста",select_component:"Выберите компонент"
|
||||
}
|
||||
};
|
||||
|
||||
function t(key){return(T[lang]&&T[lang][key])||T.kk[key]||key}
|
||||
|
||||
function setLang(l){
|
||||
lang=l;localStorage.setItem('cybervr-lang',l);
|
||||
document.documentElement.lang=l==='kk'?'kk':'ru';
|
||||
document.querySelectorAll('.lang-switch button').forEach(function(b){
|
||||
var txt=b.textContent.trim();
|
||||
b.classList.toggle('active',(l==='kk'&&txt==='KZ')||(l==='ru'&&txt==='RU')||(l==='kk'&&txt==='Қазақша')||(l==='ru'&&txt==='Русский'));
|
||||
});
|
||||
applyLang();
|
||||
}
|
||||
|
||||
function applyLang(){
|
||||
document.querySelectorAll('[data-i18n]').forEach(function(el){
|
||||
var key=el.getAttribute('data-i18n');
|
||||
if(T[lang]&&T[lang][key])el.innerHTML=T[lang][key];
|
||||
});
|
||||
document.querySelectorAll('[data-i18n-placeholder]').forEach(function(el){
|
||||
var key=el.getAttribute('data-i18n-placeholder');
|
||||
if(T[lang]&&T[lang][key])el.placeholder=T[lang][key];
|
||||
});
|
||||
renderPopular();
|
||||
var activePage=document.querySelector('.page.active');
|
||||
if(activePage){
|
||||
var pid=activePage.id.replace('page-','');
|
||||
if(pid==='catalog')filterCatalog();
|
||||
if(pid==='builder')renderBuilder();
|
||||
if(pid==='compare')renderCompare();
|
||||
if(pid==='favorites')renderFavorites();
|
||||
if(pid==='cart')renderCart();
|
||||
if(pid==='profile')renderProfile();
|
||||
if(pid==='vrai')filterVRAI('all');
|
||||
}
|
||||
}
|
||||
|
||||
function fmt(n){return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g,' ')+' ₸'}
|
||||
|
||||
function navigateTo(page,extra){
|
||||
document.querySelectorAll('.page').forEach(function(p){p.classList.remove('active')});
|
||||
var el=document.getElementById('page-'+page);
|
||||
if(el)el.classList.add('active');
|
||||
document.querySelectorAll('.nav a,.mobile-nav a').forEach(function(a){
|
||||
a.classList.toggle('active',a.getAttribute('data-page')===page);
|
||||
});
|
||||
window.scrollTo(0,0);closeMobile();
|
||||
if(page==='catalog'){filterCatalog(extra)}
|
||||
if(page==='vrai')filterVRAI('all');
|
||||
if(page==='builder')renderBuilder();
|
||||
if(page==='compare')renderCompare();
|
||||
if(page==='favorites')renderFavorites();
|
||||
if(page==='cart')renderCart();
|
||||
if(page==='profile')renderProfile();
|
||||
if(page==='home')renderPopular();
|
||||
}
|
||||
|
||||
function toggleMobile(){document.getElementById('mobileNav').classList.toggle('open')}
|
||||
function closeMobile(){document.getElementById('mobileNav').classList.remove('open')}
|
||||
|
||||
window.addEventListener('scroll',function(){
|
||||
document.getElementById('header').classList.toggle('scrolled',window.scrollY>20);
|
||||
});
|
||||
|
||||
function toast(msg){
|
||||
var d=document.createElement('div');d.className='toast';d.textContent=msg;
|
||||
document.getElementById('toastContainer').appendChild(d);
|
||||
setTimeout(function(){d.remove()},3000);
|
||||
}
|
||||
|
||||
function toggleFav(id){
|
||||
var i=favorites.indexOf(id);
|
||||
if(i>-1){favorites.splice(i,1);toast(t('removed_fav'))}
|
||||
else{favorites.push(id);toast(t('added_fav'))}
|
||||
localStorage.setItem('cybervr-favs',JSON.stringify(favorites));
|
||||
updateBadges();
|
||||
var ap=document.querySelector('.page.active');
|
||||
if(ap){var pid=ap.id.replace('page-','');
|
||||
if(pid==='catalog')filterCatalog();
|
||||
if(pid==='favorites')renderFavorites();
|
||||
if(pid==='profile')renderProfile();
|
||||
if(pid==='vrai')filterVRAI('all');
|
||||
}
|
||||
}
|
||||
function isFav(id){return favorites.indexOf(id)>-1}
|
||||
|
||||
function addToCart(id){
|
||||
var found=cart.find(function(c){return c.id===id});
|
||||
if(found)found.qty++;else cart.push({id:id,qty:1});
|
||||
localStorage.setItem('cybervr-cart',JSON.stringify(cart));
|
||||
updateBadges();toast(t('added_cart'));
|
||||
}
|
||||
function removeFromCart(id){
|
||||
cart=cart.filter(function(c){return c.id!==id});
|
||||
localStorage.setItem('cybervr-cart',JSON.stringify(cart));
|
||||
updateBadges();renderCart();
|
||||
}
|
||||
function changeQty(id,d){
|
||||
var item=cart.find(function(c){return c.id===id});
|
||||
if(item){item.qty=Math.max(1,item.qty+d);localStorage.setItem('cybervr-cart',JSON.stringify(cart));renderCart()}
|
||||
}
|
||||
function getProduct(id){return PRODUCTS.find(function(p){return p.id===id})}
|
||||
|
||||
function updateBadges(){
|
||||
var fb=document.getElementById('favBadge');
|
||||
var cb=document.getElementById('cartBadge');
|
||||
if(favorites.length>0){fb.style.display='flex';fb.textContent=favorites.length}else fb.style.display='none';
|
||||
var totalItems=cart.reduce(function(s,c){return s+c.qty},0);
|
||||
if(totalItems>0){cb.style.display='flex';cb.textContent=totalItems}else cb.style.display='none';
|
||||
}
|
||||
|
||||
function renderProductCard(p){
|
||||
var favClass=isFav(p.id)?' active':'';
|
||||
return '<div class="product-card">'+
|
||||
'<img class="product-img" src="'+p.img+'" alt="'+p.name+'" loading="lazy">'+
|
||||
'<div class="product-body">'+
|
||||
'<span class="product-cat">'+p.cat.toUpperCase()+'</span>'+
|
||||
'<div class="product-name">'+p.name+'</div>'+
|
||||
'<div class="product-specs">'+p.specs+'</div>'+
|
||||
'<div class="product-bottom">'+
|
||||
'<span class="product-price">'+fmt(p.price)+'</span>'+
|
||||
'<span class="product-rating">★ '+p.rating+'</span>'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'<div class="product-actions">'+
|
||||
'<button class="btn btn-primary btn-sm" onclick="showProduct('+p.id+')">'+t('details')+'</button>'+
|
||||
'<button class="btn btn-ghost btn-sm" onclick="addToCart('+p.id+')">'+t('add_cart')+'</button>'+
|
||||
'<button class="fav-btn'+favClass+'" onclick="toggleFav('+p.id+')">♡</button>'+
|
||||
'</div>'+
|
||||
'</div>';
|
||||
}
|
||||
|
||||
function showProduct(id){
|
||||
var p=getProduct(id);if(!p)return;
|
||||
var desc=lang==='kk'?p.desc_kk:p.desc_ru;
|
||||
document.getElementById('modalTitle').textContent=p.name;
|
||||
document.getElementById('modalBody').innerHTML=
|
||||
'<img src="'+p.img+'" alt="'+p.name+'" style="width:100%;border-radius:12px;margin-bottom:16px">'+
|
||||
'<p style="color:var(--cyber-text2);margin-bottom:12px">'+desc+'</p>'+
|
||||
'<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px">'+
|
||||
'<div style="padding:10px;background:rgba(255,255,255,0.03);border-radius:8px"><span style="color:var(--cyber-text2);font-size:12px">'+t('brand_l')+'</span><br><strong>'+p.brand+'</strong></div>'+
|
||||
'<div style="padding:10px;background:rgba(255,255,255,0.03);border-radius:8px"><span style="color:var(--cyber-text2);font-size:12px">'+t('rating')+'</span><br><strong>★ '+p.rating+'</strong></div>'+
|
||||
'<div style="padding:10px;background:rgba(255,255,255,0.03);border-radius:8px;grid-column:span 2"><span style="color:var(--cyber-text2);font-size:12px">'+t('specs')+'</span><br><strong>'+p.specs+'</strong></div>'+
|
||||
'</div>'+
|
||||
'<div style="font-size:24px;font-weight:800;color:var(--cyber-neon);margin-bottom:16px">'+fmt(p.price)+'</div>'+
|
||||
'<div style="display:flex;gap:8px">'+
|
||||
'<button class="btn btn-primary" onclick="addToCart('+p.id+');closeModal(\'productModal\')">'+t('add_cart')+'</button>'+
|
||||
'<button class="btn btn-ghost" onclick="toggleFav('+p.id+')">'+(isFav(p.id)?'♥':'♡')+'</button>'+
|
||||
'<button class="btn btn-ghost" onclick="addToCompare('+p.id+')">'+t('compare_add')+'</button>'+
|
||||
'</div>';
|
||||
document.getElementById('productModal').classList.add('open');
|
||||
}
|
||||
function closeModal(id){document.getElementById(id).classList.remove('open')}
|
||||
document.querySelectorAll('.modal-overlay').forEach(function(m){
|
||||
m.addEventListener('click',function(e){if(e.target===m)m.classList.remove('open')});
|
||||
});
|
||||
|
||||
function filterCatalog(catOverride){
|
||||
if(catOverride&&typeof catOverride==='string')currentCat=catOverride;
|
||||
var search=(document.getElementById('searchInput').value||'').toLowerCase();
|
||||
var brand=document.getElementById('filterBrand').value;
|
||||
var priceRange=document.getElementById('filterPrice').value;
|
||||
var minRating=parseFloat(document.getElementById('filterRating').value)||0;
|
||||
document.querySelectorAll('#catalogTabs .tab-btn').forEach(function(b){
|
||||
b.classList.toggle('active',b.getAttribute('data-cat')===currentCat);
|
||||
});
|
||||
var filtered=PRODUCTS.filter(function(p){
|
||||
if(currentCat!=='all'&&p.cat!==currentCat)return false;
|
||||
if(search&&p.name.toLowerCase().indexOf(search)===-1&&p.specs.toLowerCase().indexOf(search)===-1)return false;
|
||||
if(brand&&p.brand!==brand)return false;
|
||||
if(priceRange){var parts=priceRange.split('-');if(p.price<parseInt(parts[0])||p.price>parseInt(parts[1]))return false}
|
||||
if(minRating&&p.rating<minRating)return false;
|
||||
return true;
|
||||
});
|
||||
var grid=document.getElementById('catalogProducts');
|
||||
var empty=document.getElementById('catalogEmpty');
|
||||
if(filtered.length===0){grid.innerHTML='';empty.style.display='block'}
|
||||
else{empty.style.display='none';grid.innerHTML=filtered.map(renderProductCard).join('')}
|
||||
}
|
||||
|
||||
function filterVRAI(type){
|
||||
var filtered=PRODUCTS.filter(function(p){return p.cat==='vr'||p.cat==='ai'});
|
||||
if(type!=='all')filtered=filtered.filter(function(p){return p.cat===type});
|
||||
document.querySelectorAll('#page-vrai .tab-btn').forEach(function(b,i){
|
||||
b.classList.toggle('active',(i===0&&type==='all')||(i===1&&type==='vr')||(i===2&&type==='ai'));
|
||||
});
|
||||
document.getElementById('vraiProducts').innerHTML=filtered.map(renderProductCard).join('');
|
||||
}
|
||||
|
||||
function renderPopular(){
|
||||
var popular=PRODUCTS.filter(function(p){return p.rating>=4.7}).slice(0,8);
|
||||
var el=document.getElementById('popularProducts');
|
||||
if(el)el.innerHTML=popular.map(renderProductCard).join('');
|
||||
}
|
||||
|
||||
function renderBuilder(){
|
||||
var container=document.getElementById('builderSteps');
|
||||
var html='';
|
||||
BUILDER_STEPS.forEach(function(step,i){
|
||||
var selected=buildSelections[step.key];
|
||||
var statusClass=selected?' completed':(i===getActiveStep()?' active':'');
|
||||
var label=lang==='kk'?step.label_kk:step.label_ru;
|
||||
html+='<div class="builder-step'+statusClass+'" id="step-'+step.key+'">'+
|
||||
'<div class="builder-step-header" onclick="toggleStep(\''+step.key+'\')">'+
|
||||
'<div class="step-num">'+(selected?'✓':(i+1))+'</div>'+
|
||||
'<div class="step-title">'+step.icon+' '+label+'</div>'+
|
||||
(selected?'<div class="step-selected">'+selected.name+' — '+fmt(selected.price)+'</div>':'')+
|
||||
'<div class="step-arrow">▼</div>'+
|
||||
'</div>'+
|
||||
'<div class="step-options" id="opts-'+step.key+'">'+getOptionsHTML(step)+'</div>'+
|
||||
'</div>';
|
||||
});
|
||||
container.innerHTML=html;
|
||||
updateSummary();
|
||||
}
|
||||
|
||||
function getActiveStep(){
|
||||
for(var i=0;i<BUILDER_STEPS.length;i++){if(!buildSelections[BUILDER_STEPS[i].key])return i}
|
||||
return 0;
|
||||
}
|
||||
function toggleStep(key){
|
||||
var el=document.getElementById('step-'+key);
|
||||
document.querySelectorAll('.builder-step').forEach(function(s){if(s.id!=='step-'+key)s.classList.remove('active')});
|
||||
el.classList.toggle('active');
|
||||
}
|
||||
|
||||
function getOptionsHTML(step){
|
||||
var items=[];
|
||||
if(step.cat==='cpu')items=PRODUCTS.filter(function(p){return p.cat==='cpu'});
|
||||
else if(step.cat==='gpu')items=PRODUCTS.filter(function(p){return p.cat==='gpu'});
|
||||
else if(step.cat==='ram')items=PRODUCTS.filter(function(p){return p.cat==='ram'});
|
||||
else if(step.cat==='ssd')items=PRODUCTS.filter(function(p){return p.cat==='ssd'});
|
||||
else if(step.cat==='mobo')items=MOBOS;
|
||||
else if(step.cat==='psu')items=PSUS;
|
||||
else if(step.cat==='cool')items=COOLERS;
|
||||
else if(step.cat==='case')items=CASES;
|
||||
return items.map(function(item){
|
||||
var sel=buildSelections[step.key]&&buildSelections[step.key].id===item.id?' selected':'';
|
||||
return '<div class="option-card'+sel+'" onclick="selectComponent(\''+step.key+'\','+item.id+',\''+step.cat+'\')">'+
|
||||
'<div class="option-img">🔧</div>'+
|
||||
'<div class="option-info"><div class="option-name">'+item.name+'</div><div class="option-spec">'+(item.specs||'')+'</div></div>'+
|
||||
'<div class="option-price">'+fmt(item.price)+'</div>'+
|
||||
'</div>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function selectComponent(stepKey,itemId,cat){
|
||||
var item;
|
||||
if(cat==='mobo')item=MOBOS.find(function(i){return i.id===itemId});
|
||||
else if(cat==='psu')item=PSUS.find(function(i){return i.id===itemId});
|
||||
else if(cat==='cool')item=COOLERS.find(function(i){return i.id===itemId});
|
||||
else if(cat==='case')item=CASES.find(function(i){return i.id===itemId});
|
||||
else item=PRODUCTS.find(function(i){return i.id===itemId});
|
||||
if(item)buildSelections[stepKey]=item;
|
||||
renderBuilder();
|
||||
}
|
||||
|
||||
function updateSummary(){
|
||||
var container=document.getElementById('summaryItems');
|
||||
var total=0;var html='';
|
||||
BUILDER_STEPS.forEach(function(step){
|
||||
var sel=buildSelections[step.key];
|
||||
var label=lang==='kk'?step.label_kk:step.label_ru;
|
||||
if(sel){total+=sel.price;html+='<div class="summary-item"><span class="summary-label">'+step.icon+' '+label+'</span><span class="summary-value">'+fmt(sel.price)+'</span></div>'}
|
||||
else{html+='<div class="summary-item"><span class="summary-label" style="opacity:0.5">'+step.icon+' '+label+'</span><span class="summary-value" style="opacity:0.3">—</span></div>'}
|
||||
});
|
||||
container.innerHTML=html;
|
||||
document.getElementById('totalPrice').textContent=fmt(total);
|
||||
var cpu=buildSelections.cpu;var mobo=buildSelections.mobo;
|
||||
var status=document.getElementById('compatStatus');
|
||||
if(cpu&&mobo){
|
||||
var cpuSocket=cpu.brand==='Intel'?'LGA1700':'AM5';
|
||||
if(mobo.socket!==cpuSocket){
|
||||
status.className='compat-status compat-err';
|
||||
status.innerHTML='⚠ '+(lang==='kk'?'Таңдалған аналық плата бұл процессормен үйлесімді емес.':'Выбранная материнская плата несовместима с этим процессором.');
|
||||
}else{status.className='compat-status compat-ok';status.innerHTML='✓ '+t('compat_ok')}
|
||||
}else if(Object.keys(buildSelections).length>0){status.className='compat-status compat-ok';status.innerHTML='✓ '+t('compat_ok')}
|
||||
}
|
||||
|
||||
function saveBuild(){
|
||||
if(Object.keys(buildSelections).length===0){toast(t('build_empty'));return}
|
||||
builds.push(JSON.parse(JSON.stringify(buildSelections)));
|
||||
localStorage.setItem('cybervr-builds',JSON.stringify(builds));
|
||||
toast(t('build_saved'));
|
||||
}
|
||||
function clearBuild(){buildSelections={};renderBuilder();toast(t('build_cleared'))}
|
||||
function buyBuild(){
|
||||
if(Object.keys(buildSelections).length===0){toast(t('build_empty'));return}
|
||||
Object.keys(buildSelections).forEach(function(key){
|
||||
var item=buildSelections[key];
|
||||
if(item&&item.id){var found=cart.find(function(c){return c.id===item.id});if(found)found.qty++;else cart.push({id:item.id,qty:1})}
|
||||
});
|
||||
localStorage.setItem('cybervr-cart',JSON.stringify(cart));
|
||||
updateBadges();toast(t('build_bought'));navigateTo('cart');
|
||||
}
|
||||
|
||||
function addToCompare(id){
|
||||
if(compareList.indexOf(id)>-1)return;
|
||||
if(compareList.length>=4){toast(lang==='kk'?'4 құрылғыға дейін салыстыруға болады':'Можно сравнить до 4 устройств');return}
|
||||
compareList.push(id);localStorage.setItem('cybervr-compare',JSON.stringify(compareList));
|
||||
toast(t('compare_add'));renderCompare();
|
||||
}
|
||||
function removeFromCompare(id){
|
||||
compareList=compareList.filter(function(c){return c!==id});
|
||||
localStorage.setItem('cybervr-compare',JSON.stringify(compareList));renderCompare();
|
||||
}
|
||||
function renderCompare(){
|
||||
var container=document.getElementById('compareContent');
|
||||
if(compareList.length===0){
|
||||
container.innerHTML='<div class="empty-state"><div class="icon">⚖️</div><h3>'+t('compare_empty')+'</h3>'+
|
||||
'<p style="margin-bottom:16px">'+(lang==='kk'?'Каталогтан өнімдерді салыстыруға қосыңыз':'Добавьте товары из каталога для сравнения')+'</p>'+
|
||||
'<button class="btn btn-primary" onclick="navigateTo(\'catalog\')">'+t('go_catalog')+'</button></div>';
|
||||
return;
|
||||
}
|
||||
var products=compareList.map(getProduct).filter(Boolean);
|
||||
if(products.length<2){
|
||||
container.innerHTML='<div class="empty-state"><div class="icon">⚖️</div><h3>'+(lang==='kk'?'Кемінде 2 өнім қосыңыз':'Добавьте минимум 2 товара')+'</h3></div>';
|
||||
return;
|
||||
}
|
||||
var fields=[
|
||||
{label:t('price'),key:'price',fmt:fmt},
|
||||
{label:t('brand_l'),key:'brand'},
|
||||
{label:t('rating'),key:'rating',prefix:'★ '},
|
||||
{label:t('specs'),key:'specs'}
|
||||
];
|
||||
var html='<div class="compare-table-wrap"><table class="compare-table"><thead><tr><th></th>';
|
||||
products.forEach(function(p){
|
||||
html+='<th class="product-col-header"><img src="'+p.img+'" alt="'+p.name+'"><div class="name">'+p.name+'</div><div class="price">'+fmt(p.price)+'</div>'+
|
||||
'<button class="btn btn-danger btn-sm" style="margin-top:8px" onclick="removeFromCompare('+p.id+')">'+t('compare_remove')+'</button></th>';
|
||||
});
|
||||
html+='</tr></thead><tbody>';
|
||||
fields.forEach(function(f){
|
||||
html+='<tr><td style="color:var(--cyber-text2);font-weight:600">'+f.label+'</td>';
|
||||
products.forEach(function(p){
|
||||
var val=p[f.key];if(f.fmt)val=f.fmt(val);if(f.prefix)val=f.prefix+val;
|
||||
html+='<td>'+val+'</td>';
|
||||
});
|
||||
html+='</tr>';
|
||||
});
|
||||
html+='</tbody></table></div>';
|
||||
container.innerHTML=html;
|
||||
}
|
||||
|
||||
function renderFavorites(){
|
||||
var container=document.getElementById('favProducts');
|
||||
var empty=document.getElementById('favEmpty');
|
||||
var items=favorites.map(getProduct).filter(Boolean);
|
||||
if(items.length===0){container.innerHTML='';empty.style.display='block'}
|
||||
else{empty.style.display='none';container.innerHTML=items.map(renderProductCard).join('')}
|
||||
}
|
||||
|
||||
function renderCart(){
|
||||
var container=document.getElementById('cartContent');
|
||||
if(cart.length===0){
|
||||
container.innerHTML='<div class="cart-empty"><div class="empty-icon">🛒</div><h3>'+t('cart_empty')+'</h3><p>'+t('cart_empty_desc')+'</p>'+
|
||||
'<button class="btn btn-primary" style="margin-top:16px" onclick="navigateTo(\'catalog\')">'+t('go_catalog')+'</button></div>';
|
||||
return;
|
||||
}
|
||||
var total=0;var html='';
|
||||
cart.forEach(function(ci){
|
||||
var p=getProduct(ci.id);if(!p)return;
|
||||
var lineTotal=p.price*ci.qty;total+=lineTotal;
|
||||
html+='<div class="cart-item">'+
|
||||
'<div class="cart-img">📦</div>'+
|
||||
'<div class="cart-info"><div class="cart-name">'+p.name+'</div><div class="cart-spec">'+p.specs+'</div></div>'+
|
||||
'<div class="cart-qty">'+
|
||||
'<button onclick="changeQty('+p.id+',-1)">−</button>'+
|
||||
'<span>'+ci.qty+'</span>'+
|
||||
'<button onclick="changeQty('+p.id+',1)">+</button>'+
|
||||
'</div>'+
|
||||
'<div class="cart-price">'+fmt(lineTotal)+'</div>'+
|
||||
'<button class="cart-remove" onclick="removeFromCart('+p.id+')">✕</button>'+
|
||||
'</div>';
|
||||
});
|
||||
html+='<div class="cart-total-bar"><span class="total-label">'+t('total')+':</span><span class="total-price">'+fmt(total)+'</span></div>';
|
||||
html+='<div style="margin-top:16px;text-align:right"><button class="btn btn-primary btn-lg" onclick="placeOrder()">'+t('cart_order')+'</button></div>';
|
||||
container.innerHTML=html;
|
||||
}
|
||||
|
||||
function placeOrder(){
|
||||
toast(t('build_bought'));cart=[];
|
||||
localStorage.setItem('cybervr-cart',JSON.stringify(cart));
|
||||
updateBadges();renderCart();
|
||||
}
|
||||
|
||||
function renderProfile(){showProfileTab('favorites')}
|
||||
|
||||
function showProfileTab(tab){
|
||||
var content=document.getElementById('profileContent');
|
||||
document.querySelectorAll('.profile-menu a').forEach(function(a,i){
|
||||
var tabs=['favorites','builds','compares','history','settings'];
|
||||
a.classList.toggle('active',tabs[i]===tab);
|
||||
});
|
||||
if(tab==='favorites'){
|
||||
var items=favorites.map(getProduct).filter(Boolean);
|
||||
content.innerHTML='<h2>'+t('profile_favs')+'</h2>'+
|
||||
(items.length?'<div class="products-grid">'+items.map(renderProductCard).join('')+'</div>':
|
||||
'<div class="empty-state"><div class="icon">♡</div><h3>'+t('fav_empty')+'</h3></div>');
|
||||
}else if(tab==='builds'){
|
||||
content.innerHTML='<h2>'+t('profile_builds')+'</h2>'+
|
||||
(builds.length?builds.map(function(b,i){
|
||||
var total=0;var items='';
|
||||
BUILDER_STEPS.forEach(function(step){if(b[step.key]){total+=b[step.key].price;items+='<div>'+step.icon+' '+b[step.key].name+'</div>'}});
|
||||
return '<div style="padding:16px;background:rgba(255,255,255,0.03);border:1px solid var(--cyber-border);border-radius:12px;margin-bottom:12px">'+
|
||||
'<div style="display:flex;justify-content:space-between;margin-bottom:8px"><strong>'+(lang==='kk'?'Жинақ':'Сборка')+' #'+(i+1)+'</strong><span style="color:var(--cyber-neon);font-weight:700">'+fmt(total)+'</span></div>'+items+'</div>';
|
||||
}).join(''):'<div class="empty-state"><div class="icon">🖥️</div><h3>'+t('no_builds')+'</h3></div>');
|
||||
}else if(tab==='compares'){
|
||||
var citems=compareList.map(getProduct).filter(Boolean);
|
||||
content.innerHTML='<h2>'+t('my_compares')+'</h2>'+
|
||||
(citems.length?'<div class="products-grid">'+citems.map(renderProductCard).join('')+'</div>':
|
||||
'<div class="empty-state"><div class="icon">⚖️</div><h3>'+t('compare_empty')+'</h3></div>');
|
||||
}else if(tab==='history'){
|
||||
content.innerHTML='<h2>'+t('buy_history')+'</h2><div class="empty-state"><div class="icon">📦</div><h3>'+t('no_history')+'</h3></div>';
|
||||
}else if(tab==='settings'){
|
||||
content.innerHTML='<h2>'+t('settings')+'</h2>'+
|
||||
'<div style="max-width:400px">'+
|
||||
'<div style="margin-bottom:16px"><label style="display:block;margin-bottom:6px;color:var(--cyber-text2);font-size:14px">Email</label><input value="user@cybervr.kz" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid var(--cyber-border);border-radius:10px;color:var(--cyber-text);font-size:14px"></div>'+
|
||||
'<div style="margin-bottom:16px"><label style="display:block;margin-bottom:6px;color:var(--cyber-text2);font-size:14px">'+(lang==='kk'?'Аты':'Имя')+'</label><input value="Пайдаланушы" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid var(--cyber-border);border-radius:10px;color:var(--cyber-text);font-size:14px"></div>'+
|
||||
'<div style="margin-bottom:16px"><label style="display:block;margin-bottom:6px;color:var(--cyber-text2);font-size:14px">'+(lang==='kk'?'Тіл':'Язык')+'</label>'+
|
||||
'<div class="lang-switch" style="display:inline-flex"><button class="'+(lang==='kk'?'active':'')+'" onclick="setLang(\'kk\')">Қазақша</button><button class="'+(lang==='ru'?'active':'')+'" onclick="setLang(\'ru\')">Русский</button></div></div>'+
|
||||
'<button class="btn btn-primary" style="margin-top:8px">'+(lang==='kk'?'Сақтау':'Сохранить')+'</button>'+
|
||||
'</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// AI Chat
|
||||
var AI_RESPONSES={
|
||||
kk:{
|
||||
gaming_pc:'600 000 ₸ бюджетке мынадай жинақ ұсынамын:\n\n⚡ Процессор: AMD Ryzen 7 7800X3D — 229 990 ₸\n🎮 Видеокарта: NVIDIA RTX 4070 Ti Super — 499 990 ₸\n💾 Жад: Corsair Vengeance DDR5 32GB — 89 990 ₸\n💿 SSD: WD Black SN850X 1TB — 79 990 ₸\n\nБұл жинақ барлық заманауи ойындарды жоғары сапада ойнатуға мүмкіндік береді. Толық жинақты «Компьютер құрастыру» бөлімінен жасай аласыз!',
|
||||
vr_pick:'VR көзілдірік таңдау үшін бірнеше нұсқа бар:\n\n🥇 Meta Quest 3 — 299 990 ₸ (ең танымал, сымсыз)\n🥈 Meta Quest 3S — 149 990 ₸ (бюджет нұсқасы)\n🥉 PlayStation VR2 — 349 990 ₸ (PS5 үшін)\n\nЕгер жаңадан бастасаңыз, Meta Quest 3 ұсынамын — ол сымсыз және өте ыңғайлы.',
|
||||
gpu_compare:'Видеокарта салыстыру:\n\n🏆 NVIDIA RTX 4090 — 899 990 ₸ (ең қуатты)\n⭐ NVIDIA RTX 4080 Super — 649 990 ₸ (жоғары деңгей)\n💎 NVIDIA RTX 4070 Ti Super — 499 990 ₸ (тиімді)\n🔴 AMD RX 7900 XTX — 699 990 ₸ (AMD флагманы)\n\nОйын үшін RTX 4070 Ti Super ең тиімді. Жұмыс үшін RTX 4090.',
|
||||
default:'Сұрағыңызға рахмет! Мен келесі тақырыптарда көмектесе аламын:\n\n• VR және AI көзілдірік таңдау\n• Ойын компьютерін жинау\n• Видеокарта және процессор салыстыру\n• Бюджетке сай құрылғылар\n\nНақты сұрақ қойыңыз!'
|
||||
},
|
||||
ru:{
|
||||
gaming_pc:'Для бюджета 600 000 ₸ рекомендую такую сборку:\n\n⚡ Процессор: AMD Ryzen 7 7800X3D — 229 990 ₸\n🎮 Видеокарта: NVIDIA RTX 4070 Ti Super — 499 990 ₸\n💾 Память: Corsair Vengeance DDR5 32GB — 89 990 ₸\n💿 SSD: WD Black SN850X 1TB — 79 990 ₸\n\nЭта сборка позволит играть во все современные игры на высоких настройках. Полную сборку можно сделать в разделе «Сборка ПК»!',
|
||||
vr_pick:'Для выбора VR очков есть несколько вариантов:\n\n🥇 Meta Quest 3 — 299 990 ₸ (самый популярный, беспроводной)\n🥈 Meta Quest 3S — 149 990 ₸ (бюджетный вариант)\n🥉 PlayStation VR2 — 349 990 ₸ (для PS5)\n\nЕсли вы новичок, рекомендую Meta Quest 3 — он беспроводной и очень удобный.',
|
||||
gpu_compare:'Сравнение видеокарт:\n\n🏆 NVIDIA RTX 4090 — 899 990 ₸ (самая мощная)\n⭐ NVIDIA RTX 4080 Super — 649 990 ₸ (высокий уровень)\n💎 NVIDIA RTX 4070 Ti Super — 499 990 ₸ (выгодная)\n🔴 AMD RX 7900 XTX — 699 990 ₸ (флагман AMD)\n\nДля игр лучшая по цене — RTX 4070 Ti Super. Для работы — RTX 4090.',
|
||||
default:'Спасибо за вопрос! Я могу помочь с:\n\n• Выбором VR и AI очков\n• Сборкой игрового компьютера\n• Сравнением видеокарт и процессоров\n• Устройствами под бюджет\n\nЗадайте конкретный вопрос!'
|
||||
}
|
||||
};
|
||||
|
||||
function sendAI(){
|
||||
var input=document.getElementById('aiInput');
|
||||
var msg=input.value.trim();if(!msg)return;
|
||||
addAIMsg(msg,'user');input.value='';
|
||||
setTimeout(function(){
|
||||
var response=AI_RESPONSES[lang].default;
|
||||
var ml=msg.toLowerCase();
|
||||
if(ml.indexOf('600')>-1||ml.indexOf('ойын')>-1||ml.indexOf('компьютер')>-1||ml.indexOf('игров')>-1||ml.indexOf('пк')>-1||ml.indexOf('сборк')>-1)
|
||||
response=AI_RESPONSES[lang].gaming_pc;
|
||||
else if(ml.indexOf('vr')>-1||ml.indexOf('көзілдірік')>-1||ml.indexOf('очки')>-1)
|
||||
response=AI_RESPONSES[lang].vr_pick;
|
||||
else if(ml.indexOf('видео')>-1||ml.indexOf('gpu')>-1||ml.indexOf('rtx')>-1||ml.indexOf('карта')>-1)
|
||||
response=AI_RESPONSES[lang].gpu_compare;
|
||||
addAIMsg(response,'bot');
|
||||
},800);
|
||||
}
|
||||
|
||||
function aiSuggest(btn){
|
||||
var msg=btn.textContent;
|
||||
document.getElementById('aiInput').value=msg;
|
||||
sendAI();
|
||||
}
|
||||
|
||||
function addAIMsg(text,type){
|
||||
var container=document.getElementById('aiMessages');
|
||||
var div=document.createElement('div');
|
||||
div.className='ai-msg '+type;
|
||||
var avatar=type==='bot'?'🧠':'👤';
|
||||
div.innerHTML='<div class="avatar">'+avatar+'</div><div class="bubble">'+text.replace(/\n/g,'<br>')+'</div>';
|
||||
container.appendChild(div);
|
||||
container.scrollTop=container.scrollHeight;
|
||||
}
|
||||
|
||||
// Init
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
setLang(lang);
|
||||
updateBadges();
|
||||
renderPopular();
|
||||
|
||||
// Scroll reveal
|
||||
var io=new IntersectionObserver(function(entries){
|
||||
entries.forEach(function(e){if(e.isIntersecting)e.target.classList.add('in')});
|
||||
},{threshold:0.15});
|
||||
document.querySelectorAll('.reveal').forEach(function(el){io.observe(el)});
|
||||
});
|
||||
414
index.html
Normal file
414
index.html
Normal file
@ -0,0 +1,414 @@
|
||||
<!-- 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>
|
||||
298
styles.css
Normal file
298
styles.css
Normal file
@ -0,0 +1,298 @@
|
||||
<!-- no-design-system -->
|
||||
:root {
|
||||
--cyber-bg: #0a0e17;
|
||||
--cyber-bg2: #111827;
|
||||
--cyber-card: rgba(17,24,39,0.8);
|
||||
--cyber-border: rgba(0,230,230,0.15);
|
||||
--cyber-border-hover: rgba(0,230,230,0.4);
|
||||
--cyber-neon: #00e6e6;
|
||||
--cyber-neon2: #00bfff;
|
||||
--cyber-green: #10b981;
|
||||
--cyber-text: #e2e8f0;
|
||||
--cyber-text2: #94a3b8;
|
||||
--cyber-glow: 0 0 20px rgba(0,230,230,0.3), 0 0 40px rgba(0,230,230,0.1);
|
||||
--cyber-glow-sm: 0 0 10px rgba(0,230,230,0.2);
|
||||
--cyber-radius: 16px;
|
||||
--cyber-transition: 0.3s cubic-bezier(0.4,0,0.2,1);
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
html{scroll-behavior:smooth}
|
||||
body{font-family:'Inter',system-ui,sans-serif;background:var(--cyber-bg);color:var(--cyber-text);line-height:1.6;overflow-x:hidden;min-height:100vh}
|
||||
a{color:inherit;text-decoration:none}
|
||||
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}
|
||||
img{max-width:100%;display:block}
|
||||
ul{list-style:none}
|
||||
input,select,textarea{font-family:inherit}
|
||||
::-webkit-scrollbar{width:6px}
|
||||
::-webkit-scrollbar-track{background:var(--cyber-bg)}
|
||||
::-webkit-scrollbar-thumb{background:rgba(0,230,230,0.3);border-radius:3px}
|
||||
|
||||
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(10,14,23,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--cyber-border);transition:var(--cyber-transition)}
|
||||
.header.scrolled{background:rgba(10,14,23,0.95);box-shadow:0 4px 30px rgba(0,0,0,0.5)}
|
||||
.header-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:64px;gap:16px}
|
||||
.logo{font-size:22px;font-weight:800;letter-spacing:-0.5px;background:linear-gradient(135deg,var(--cyber-neon),var(--cyber-neon2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap;flex-shrink:0}
|
||||
.logo span{font-weight:400;opacity:0.7;-webkit-text-fill-color:var(--cyber-text2)}
|
||||
.nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
|
||||
.nav a{padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--cyber-text2);transition:var(--cyber-transition);white-space:nowrap}
|
||||
.nav a:hover,.nav a.active{color:var(--cyber-neon);background:rgba(0,230,230,0.08)}
|
||||
.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
|
||||
.header-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--cyber-text2);transition:var(--cyber-transition);position:relative;font-size:18px}
|
||||
.header-icon:hover{color:var(--cyber-neon);background:rgba(0,230,230,0.08)}
|
||||
.header-icon .badge{position:absolute;top:4px;right:4px;width:18px;height:18px;background:var(--cyber-neon);color:var(--cyber-bg);font-size:10px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center}
|
||||
.lang-switch{display:flex;align-items:center;gap:0;background:rgba(255,255,255,0.05);border-radius:8px;overflow:hidden;border:1px solid var(--cyber-border);margin-left:4px}
|
||||
.lang-switch button{padding:6px 10px;font-size:12px;font-weight:600;color:var(--cyber-text2);transition:var(--cyber-transition)}
|
||||
.lang-switch button.active{background:var(--cyber-neon);color:var(--cyber-bg)}
|
||||
.lang-switch button:hover:not(.active){color:var(--cyber-text)}
|
||||
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;font-size:22px;color:var(--cyber-text)}
|
||||
.mobile-nav{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(10,14,23,0.98);backdrop-filter:blur(20px);z-index:999;padding:24px;flex-direction:column;gap:8px;overflow-y:auto}
|
||||
.mobile-nav.open{display:flex}
|
||||
.mobile-nav a{padding:14px 16px;border-radius:12px;font-size:16px;font-weight:500;color:var(--cyber-text2);transition:var(--cyber-transition);border:1px solid transparent}
|
||||
.mobile-nav a:hover,.mobile-nav a.active{color:var(--cyber-neon);background:rgba(0,230,230,0.06);border-color:var(--cyber-border)}
|
||||
|
||||
.hero{padding:120px 24px 80px;position:relative;overflow:hidden;min-height:85vh;display:flex;align-items:center}
|
||||
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(0,230,230,0.08) 0%,transparent 60%),radial-gradient(ellipse at 30% 80%,rgba(124,58,237,0.06) 0%,transparent 50%)}
|
||||
.hero-grid{position:absolute;inset:0;opacity:0.03;background-image:linear-gradient(rgba(0,230,230,0.5) 1px,transparent 1px),linear-gradient(90deg,rgba(0,230,230,0.5) 1px,transparent 1px);background-size:60px 60px}
|
||||
.hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1;width:100%}
|
||||
.hero-content{display:flex;flex-direction:column;gap:24px}
|
||||
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:600;background:rgba(0,230,230,0.1);color:var(--cyber-neon);border:1px solid rgba(0,230,230,0.2);width:fit-content}
|
||||
.hero h1{font-size:clamp(36px,5vw,56px);font-weight:800;line-height:1.1;letter-spacing:-1px;color:#fff}
|
||||
.hero h1 .neon{background:linear-gradient(135deg,var(--cyber-neon),var(--cyber-neon2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
||||
.hero-sub{font-size:18px;color:var(--cyber-text2);max-width:500px;line-height:1.7}
|
||||
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
|
||||
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
|
||||
.hero-img-container{position:relative;width:100%;max-width:500px;aspect-ratio:1;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,rgba(0,230,230,0.1),rgba(124,58,237,0.1));border:1px solid var(--cyber-border);box-shadow:var(--cyber-glow)}
|
||||
.hero-img-container::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,var(--cyber-bg) 100%)}
|
||||
.hero-img-container img{width:100%;height:100%;object-fit:cover}
|
||||
.hero-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:var(--cyber-neon);opacity:0.08;filter:blur(80px);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
|
||||
|
||||
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:12px;font-size:15px;font-weight:600;transition:var(--cyber-transition);border:1px solid transparent;white-space:nowrap}
|
||||
.btn-primary{background:linear-gradient(135deg,var(--cyber-neon),var(--cyber-neon2));color:var(--cyber-bg);box-shadow:var(--cyber-glow-sm)}
|
||||
.btn-primary:hover{box-shadow:var(--cyber-glow);transform:translateY(-2px)}
|
||||
.btn-outline{background:transparent;color:var(--cyber-text);border-color:var(--cyber-border-hover)}
|
||||
.btn-outline:hover{border-color:var(--cyber-neon);color:var(--cyber-neon);background:rgba(0,230,230,0.05)}
|
||||
.btn-ghost{background:rgba(255,255,255,0.05);color:var(--cyber-text);border:1px solid var(--cyber-border)}
|
||||
.btn-ghost:hover{background:rgba(255,255,255,0.1);border-color:var(--cyber-border-hover)}
|
||||
.btn-sm{padding:8px 18px;font-size:13px;border-radius:8px}
|
||||
.btn-lg{padding:16px 36px;font-size:16px;border-radius:14px}
|
||||
.btn-danger{background:rgba(239,68,68,0.15);color:#ef4444;border-color:rgba(239,68,68,0.3)}
|
||||
.btn-danger:hover{background:rgba(239,68,68,0.25)}
|
||||
.btn-neon{background:transparent;color:var(--cyber-neon);border:1px solid var(--cyber-neon)}
|
||||
.btn-neon:hover{background:rgba(0,230,230,0.1);box-shadow:var(--cyber-glow-sm)}
|
||||
|
||||
.section{padding:80px 24px;position:relative}
|
||||
.section-header{text-align:center;margin-bottom:48px}
|
||||
.section-header h2{font-size:clamp(28px,3.5vw,40px);font-weight:700;margin-bottom:12px;color:#fff}
|
||||
.section-header p{color:var(--cyber-text2);font-size:16px;max-width:600px;margin:0 auto}
|
||||
.section-header .neon{background:linear-gradient(135deg,var(--cyber-neon),var(--cyber-neon2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
||||
.container{max-width:1280px;margin:0 auto}
|
||||
|
||||
.categories-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
|
||||
.category-card{position:relative;padding:32px 24px;border-radius:var(--cyber-radius);background:var(--cyber-card);border:1px solid var(--cyber-border);transition:var(--cyber-transition);cursor:pointer;overflow:hidden}
|
||||
.category-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyber-neon),var(--cyber-neon2));opacity:0;transition:var(--cyber-transition)}
|
||||
.category-card:hover{border-color:var(--cyber-border-hover);transform:translateY(-4px);box-shadow:0 8px 40px rgba(0,230,230,0.1)}
|
||||
.category-card:hover::before{opacity:1}
|
||||
.category-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px;background:rgba(0,230,230,0.1);border:1px solid rgba(0,230,230,0.15)}
|
||||
.category-card h3{font-size:18px;font-weight:700;margin-bottom:8px;color:#fff}
|
||||
.category-card p{font-size:14px;color:var(--cyber-text2);line-height:1.6}
|
||||
.category-card .arrow{position:absolute;bottom:20px;right:20px;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(0,230,230,0.1);color:var(--cyber-neon);font-size:16px;transition:var(--cyber-transition)}
|
||||
.category-card:hover .arrow{background:var(--cyber-neon);color:var(--cyber-bg)}
|
||||
|
||||
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
|
||||
.product-card{background:var(--cyber-card);border:1px solid var(--cyber-border);border-radius:var(--cyber-radius);overflow:hidden;transition:var(--cyber-transition);display:flex;flex-direction:column}
|
||||
.product-card:hover{border-color:var(--cyber-border-hover);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,0.3)}
|
||||
.product-img{width:100%;aspect-ratio:4/3;object-fit:cover;background:linear-gradient(135deg,rgba(0,230,230,0.05),rgba(124,58,237,0.05))}
|
||||
.product-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:8px}
|
||||
.product-cat{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--cyber-neon);letter-spacing:0.5px}
|
||||
.product-name{font-size:16px;font-weight:700;color:#fff}
|
||||
.product-specs{font-size:12px;color:var(--cyber-text2);line-height:1.5}
|
||||
.product-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
|
||||
.product-price{font-size:18px;font-weight:700;color:var(--cyber-neon)}
|
||||
.product-rating{display:flex;align-items:center;gap:4px;font-size:13px;color:#fbbf24}
|
||||
.product-actions{display:flex;gap:8px;padding:0 16px 16px}
|
||||
.product-actions .btn{flex:1;justify-content:center;font-size:13px;padding:8px 12px}
|
||||
.fav-btn{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;background:rgba(255,255,255,0.05);color:var(--cyber-text2);transition:var(--cyber-transition);flex-shrink:0}
|
||||
.fav-btn:hover,.fav-btn.active{color:#ef4444;background:rgba(239,68,68,0.1)}
|
||||
|
||||
.filters-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:24px;padding:16px;background:var(--cyber-card);border-radius:var(--cyber-radius);border:1px solid var(--cyber-border)}
|
||||
.search-box{flex:1;min-width:200px;position:relative}
|
||||
.search-box input{width:100%;padding:10px 16px 10px 40px;background:rgba(255,255,255,0.05);border:1px solid var(--cyber-border);border-radius:10px;color:var(--cyber-text);font-size:14px;transition:var(--cyber-transition);outline:none}
|
||||
.search-box input:focus{border-color:var(--cyber-neon);box-shadow:0 0 0 3px rgba(0,230,230,0.1)}
|
||||
.search-box input::placeholder{color:var(--cyber-text2)}
|
||||
.search-box .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--cyber-text2);font-size:14px;pointer-events:none}
|
||||
.filter-select{padding:10px 32px 10px 14px;background:rgba(255,255,255,0.05);border:1px solid var(--cyber-border);border-radius:10px;color:var(--cyber-text);font-size:14px;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:var(--cyber-transition)}
|
||||
.filter-select:focus{border-color:var(--cyber-neon)}
|
||||
.filter-select option{background:var(--cyber-bg2)}
|
||||
|
||||
.builder-layout{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}
|
||||
.builder-steps{display:flex;flex-direction:column;gap:16px}
|
||||
.builder-step{background:var(--cyber-card);border:1px solid var(--cyber-border);border-radius:var(--cyber-radius);padding:20px;transition:var(--cyber-transition)}
|
||||
.builder-step.active{border-color:var(--cyber-neon);box-shadow:0 0 20px rgba(0,230,230,0.1)}
|
||||
.builder-step.completed{border-color:var(--cyber-green)}
|
||||
.builder-step-header{display:flex;align-items:center;gap:12px;cursor:pointer}
|
||||
.step-num{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:rgba(0,230,230,0.1);color:var(--cyber-neon);flex-shrink:0}
|
||||
.builder-step.completed .step-num{background:rgba(16,185,129,0.15);color:var(--cyber-green)}
|
||||
.step-title{font-size:15px;font-weight:600;flex:1}
|
||||
.step-selected{font-size:13px;color:var(--cyber-neon)}
|
||||
.step-arrow{color:var(--cyber-text2);transition:var(--cyber-transition)}
|
||||
.builder-step.active .step-arrow{transform:rotate(180deg)}
|
||||
.step-options{display:none;margin-top:16px;border-top:1px solid var(--cyber-border);padding-top:16px}
|
||||
.builder-step.active .step-options{display:block}
|
||||
.option-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;border:1px solid var(--cyber-border);margin-bottom:8px;cursor:pointer;transition:var(--cyber-transition)}
|
||||
.option-card:hover{border-color:var(--cyber-border-hover);background:rgba(0,230,230,0.03)}
|
||||
.option-card.selected{border-color:var(--cyber-neon);background:rgba(0,230,230,0.06)}
|
||||
.option-img{width:48px;height:48px;border-radius:8px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
|
||||
.option-info{flex:1;min-width:0}
|
||||
.option-name{font-size:14px;font-weight:600;color:#fff}
|
||||
.option-spec{font-size:12px;color:var(--cyber-text2)}
|
||||
.option-price{font-size:14px;font-weight:700;color:var(--cyber-neon);white-space:nowrap}
|
||||
|
||||
.builder-summary{background:var(--cyber-card);border:1px solid var(--cyber-border);border-radius:var(--cyber-radius);padding:24px;position:sticky;top:80px}
|
||||
.builder-summary h3{font-size:18px;font-weight:700;margin-bottom:16px;color:#fff}
|
||||
.summary-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--cyber-border);font-size:14px}
|
||||
.summary-item:last-of-type{border-bottom:none}
|
||||
.summary-label{color:var(--cyber-text2)}
|
||||
.summary-value{font-weight:600;color:#fff}
|
||||
.summary-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0;margin-top:8px;border-top:2px solid var(--cyber-border)}
|
||||
.summary-total .label{font-size:16px;font-weight:600}
|
||||
.summary-total .price{font-size:24px;font-weight:800;color:var(--cyber-neon)}
|
||||
.compat-status{display:flex;align-items:center;gap:8px;padding:12px;border-radius:10px;margin:12px 0;font-size:13px;font-weight:600}
|
||||
.compat-ok{background:rgba(16,185,129,0.1);color:var(--cyber-green);border:1px solid rgba(16,185,129,0.2)}
|
||||
.compat-warn{background:rgba(245,158,11,0.1);color:#f59e0b;border:1px solid rgba(245,158,11,0.2)}
|
||||
.compat-err{background:rgba(239,68,68,0.1);color:#ef4444;border:1px solid rgba(239,68,68,0.2)}
|
||||
.builder-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}
|
||||
|
||||
.compare-table-wrap{overflow-x:auto;border-radius:var(--cyber-radius)}
|
||||
.compare-table{width:100%;border-collapse:collapse;background:var(--cyber-card);border:1px solid var(--cyber-border);border-radius:var(--cyber-radius)}
|
||||
.compare-table th,.compare-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--cyber-border);font-size:14px}
|
||||
.compare-table th{background:rgba(0,230,230,0.05);color:var(--cyber-text2);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.5px}
|
||||
.compare-table td{color:var(--cyber-text)}
|
||||
.compare-table .product-col-header{text-align:center;padding:20px 16px}
|
||||
.compare-table .product-col-header img{width:80px;height:80px;object-fit:cover;border-radius:10px;margin:0 auto 8px;background:rgba(255,255,255,0.05)}
|
||||
.compare-table .product-col-header .name{font-weight:700;color:#fff;font-size:14px}
|
||||
.compare-table .product-col-header .price{color:var(--cyber-neon);font-weight:700;font-size:16px}
|
||||
.compare-table .winner{background:rgba(0,230,230,0.05);color:var(--cyber-neon);font-weight:600}
|
||||
|
||||
.ai-section{background:linear-gradient(180deg,var(--cyber-bg) 0%,rgba(0,230,230,0.03) 50%,var(--cyber-bg) 100%)}
|
||||
.ai-container{max-width:800px;margin:0 auto}
|
||||
.ai-header{text-align:center;margin-bottom:32px}
|
||||
.ai-header .ai-icon{width:72px;height:72px;border-radius:20px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,rgba(0,230,230,0.15),rgba(124,58,237,0.15));border:1px solid var(--cyber-border);box-shadow:var(--cyber-glow)}
|
||||
.ai-chat{background:var(--cyber-card);border:1px solid var(--cyber-border);border-radius:var(--cyber-radius);overflow:hidden}
|
||||
.ai-messages{height:400px;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
|
||||
.ai-msg{display:flex;gap:12px;max-width:85%;animation:fadeUp 0.3s ease}
|
||||
.ai-msg.user{align-self:flex-end;flex-direction:row-reverse}
|
||||
.ai-msg .avatar{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
|
||||
.ai-msg.bot .avatar{background:linear-gradient(135deg,rgba(0,230,230,0.2),rgba(124,58,237,0.2))}
|
||||
.ai-msg.user .avatar{background:rgba(99,102,241,0.2)}
|
||||
.ai-msg .bubble{padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.6}
|
||||
.ai-msg.bot .bubble{background:rgba(255,255,255,0.05);border:1px solid var(--cyber-border);border-top-left-radius:4px}
|
||||
.ai-msg.user .bubble{background:linear-gradient(135deg,var(--cyber-neon),var(--cyber-neon2));color:var(--cyber-bg);border-top-right-radius:4px}
|
||||
.ai-input-area{display:flex;gap:8px;padding:16px 20px;border-top:1px solid var(--cyber-border);background:rgba(0,0,0,0.2)}
|
||||
.ai-input-area input{flex:1;padding:12px 16px;background:rgba(255,255,255,0.05);border:1px solid var(--cyber-border);border-radius:12px;color:var(--cyber-text);font-size:14px;outline:none;transition:var(--cyber-transition)}
|
||||
.ai-input-area input:focus{border-color:var(--cyber-neon)}
|
||||
.ai-input-area input::placeholder{color:var(--cyber-text2)}
|
||||
.ai-suggestions{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 16px}
|
||||
.ai-suggest-btn{padding:6px 14px;border-radius:100px;font-size:12px;background:rgba(0,230,230,0.08);color:var(--cyber-neon);border:1px solid rgba(0,230,230,0.15);transition:var(--cyber-transition)}
|
||||
.ai-suggest-btn:hover{background:rgba(0,230,230,0.15)}
|
||||
|
||||
.cart-page{max-width:900px;margin:0 auto}
|
||||
.cart-item{display:flex;gap:16px;align-items:center;padding:16px;background:var(--cyber-card);border:1px solid var(--cyber-border);border-radius:var(--cyber-radius);margin-bottom:12px;transition:var(--cyber-transition)}
|
||||
.cart-item:hover{border-color:var(--cyber-border-hover)}
|
||||
.cart-img{width:80px;height:80px;border-radius:10px;background:rgba(255,255,255,0.05);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:28px}
|
||||
.cart-info{flex:1;min-width:0}
|
||||
.cart-name{font-size:15px;font-weight:600;color:#fff;margin-bottom:4px}
|
||||
.cart-spec{font-size:12px;color:var(--cyber-text2)}
|
||||
.cart-qty{display:flex;align-items:center;border:1px solid var(--cyber-border);border-radius:8px;overflow:hidden}
|
||||
.cart-qty button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);color:var(--cyber-text);font-size:16px;transition:var(--cyber-transition)}
|
||||
.cart-qty button:hover{background:rgba(0,230,230,0.1);color:var(--cyber-neon)}
|
||||
.cart-qty span{width:36px;text-align:center;font-size:14px;font-weight:600}
|
||||
.cart-price{font-size:16px;font-weight:700;color:var(--cyber-neon);white-space:nowrap;min-width:100px;text-align:right}
|
||||
.cart-remove{color:var(--cyber-text2);font-size:18px;padding:8px;transition:var(--cyber-transition)}
|
||||
.cart-remove:hover{color:#ef4444}
|
||||
.cart-total-bar{display:flex;justify-content:space-between;align-items:center;padding:20px;background:var(--cyber-card);border:1px solid var(--cyber-border);border-radius:var(--cyber-radius);margin-top:20px}
|
||||
.cart-total-bar .total-label{font-size:16px;color:var(--cyber-text2)}
|
||||
.cart-total-bar .total-price{font-size:28px;font-weight:800;color:var(--cyber-neon)}
|
||||
.cart-empty{text-align:center;padding:60px 20px;color:var(--cyber-text2)}
|
||||
.cart-empty .empty-icon{font-size:48px;margin-bottom:16px;opacity:0.5}
|
||||
|
||||
.profile-layout{display:grid;grid-template-columns:260px 1fr;gap:24px}
|
||||
.profile-sidebar{background:var(--cyber-card);border:1px solid var(--cyber-border);border-radius:var(--cyber-radius);padding:20px}
|
||||
.profile-avatar{width:80px;height:80px;border-radius:20px;margin:0 auto 12px;background:linear-gradient(135deg,rgba(0,230,230,0.2),rgba(124,58,237,0.2));display:flex;align-items:center;justify-content:center;font-size:32px;border:2px solid var(--cyber-border)}
|
||||
.profile-name{text-align:center;font-size:18px;font-weight:700;color:#fff;margin-bottom:4px}
|
||||
.profile-email{text-align:center;font-size:13px;color:var(--cyber-text2);margin-bottom:20px}
|
||||
.profile-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14px;color:var(--cyber-text2);transition:var(--cyber-transition);margin-bottom:4px}
|
||||
.profile-menu a:hover,.profile-menu a.active{color:var(--cyber-neon);background:rgba(0,230,230,0.06)}
|
||||
.profile-content{background:var(--cyber-card);border:1px solid var(--cyber-border);border-radius:var(--cyber-radius);padding:24px}
|
||||
.profile-content h2{font-size:20px;font-weight:700;color:#fff;margin-bottom:20px}
|
||||
|
||||
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px)}
|
||||
.modal-overlay.open{display:flex}
|
||||
.modal{background:var(--cyber-bg2);border:1px solid var(--cyber-border);border-radius:var(--cyber-radius);max-width:500px;width:100%;max-height:80vh;overflow-y:auto;animation:fadeUp 0.3s ease}
|
||||
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--cyber-border)}
|
||||
.modal-header h3{font-size:18px;font-weight:700;color:#fff}
|
||||
.modal-close{font-size:20px;color:var(--cyber-text2);padding:4px;transition:var(--cyber-transition)}
|
||||
.modal-close:hover{color:var(--cyber-text)}
|
||||
.modal-body{padding:20px}
|
||||
|
||||
.footer{border-top:1px solid var(--cyber-border);padding:48px 24px 24px;background:rgba(0,0,0,0.3)}
|
||||
.footer-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
|
||||
.footer-brand .logo{font-size:20px;margin-bottom:12px}
|
||||
.footer-brand p{font-size:14px;color:var(--cyber-text2);line-height:1.7;max-width:300px}
|
||||
.footer-col h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px}
|
||||
.footer-col a{display:block;padding:4px 0;font-size:14px;color:var(--cyber-text2);transition:var(--cyber-transition)}
|
||||
.footer-col a:hover{color:var(--cyber-neon)}
|
||||
.footer-bottom{max-width:1280px;margin:32px auto 0;padding-top:20px;border-top:1px solid var(--cyber-border);display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--cyber-text2)}
|
||||
|
||||
.page{display:none}
|
||||
.page.active{display:block}
|
||||
|
||||
.toast{position:fixed;bottom:24px;right:24px;z-index:3000;padding:14px 20px;border-radius:12px;font-size:14px;font-weight:500;background:var(--cyber-bg2);border:1px solid var(--cyber-neon);color:var(--cyber-text);box-shadow:var(--cyber-glow);animation:slideIn 0.3s ease,fadeOut 0.3s ease 2.7s forwards;display:flex;align-items:center;gap:10px}
|
||||
|
||||
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
|
||||
@keyframes slideIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
|
||||
@keyframes fadeOut{to{opacity:0;transform:translateY(10px)}}
|
||||
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
|
||||
.reveal.in{opacity:1;transform:none}
|
||||
|
||||
.empty-state{text-align:center;padding:60px 20px;color:var(--cyber-text2)}
|
||||
.empty-state .icon{font-size:48px;margin-bottom:16px;opacity:0.5}
|
||||
.empty-state h3{font-size:18px;color:var(--cyber-text);margin-bottom:8px}
|
||||
|
||||
.tabs{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap}
|
||||
.tab-btn{padding:8px 18px;border-radius:8px;font-size:14px;font-weight:500;color:var(--cyber-text2);transition:var(--cyber-transition);border:1px solid transparent}
|
||||
.tab-btn:hover{color:var(--cyber-text);background:rgba(255,255,255,0.05)}
|
||||
.tab-btn.active{color:var(--cyber-neon);background:rgba(0,230,230,0.08);border-color:rgba(0,230,230,0.2)}
|
||||
|
||||
@media(max-width:1024px){
|
||||
.hero-inner{grid-template-columns:1fr;text-align:center}
|
||||
.hero-content{align-items:center}
|
||||
.hero-sub{margin:0 auto}
|
||||
.hero-actions{justify-content:center}
|
||||
.hero-visual{display:none}
|
||||
.categories-grid{grid-template-columns:repeat(2,1fr)}
|
||||
.builder-layout{grid-template-columns:1fr}
|
||||
.builder-summary{position:static}
|
||||
.profile-layout{grid-template-columns:1fr}
|
||||
.footer-grid{grid-template-columns:1fr 1fr}
|
||||
}
|
||||
@media(max-width:768px){
|
||||
.nav{display:none}
|
||||
.burger{display:flex}
|
||||
.header-inner{height:56px}
|
||||
.hero{min-height:auto;padding:100px 16px 60px}
|
||||
.hero h1{font-size:28px}
|
||||
.hero-sub{font-size:15px}
|
||||
.section{padding:48px 16px}
|
||||
.categories-grid{grid-template-columns:1fr}
|
||||
.products-grid{grid-template-columns:1fr 1fr}
|
||||
.filters-bar{flex-direction:column}
|
||||
.search-box{min-width:100%}
|
||||
.cart-item{flex-wrap:wrap}
|
||||
.footer-grid{grid-template-columns:1fr;gap:24px}
|
||||
.footer-bottom{flex-direction:column;gap:8px;text-align:center}
|
||||
}
|
||||
@media(max-width:480px){
|
||||
.products-grid{grid-template-columns:1fr}
|
||||
.hero-actions{flex-direction:column}
|
||||
.hero-actions .btn{width:100%;justify-content:center}
|
||||
.lang-switch{display:none}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user