diff --git a/app.js b/app.js new file mode 100644 index 0000000..eef06f0 --- /dev/null +++ b/app.js @@ -0,0 +1,663 @@ + +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:'Болашақ технологиялары — қазір қолжетімді', + hero_sub:"VR, AI және ойын технологияларын бір жерден зерттеңіз, салыстырыңыз және өзіңізге лайық шешімді таңдаңыз.", + hero_cta1:"Каталогты көру",hero_cta2:"Компьютер құрастыру", + cat_title:'Негізгі бағыттар',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:'Танымал өнімдер',pop_sub:"Ең көп сатылатын құрылғылар", + feat_title:'Неліктен CYBER VR?', + 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:'Компьютер құрастыру',builder_sub:"Өзіңізге қажетті компьютерді жинаңыз", + builder_your:"Сіздің жинағыңыз",compat_ok:"Компоненттер үйлесімді", + compat_warn:"Кейбір компоненттер арасында үйлесімділік мәселесі болуы мүмкін", + total_price:"Жалпы баға:",builder_save:"Құрастыруды сақтау",builder_clear:"Құрастыруды тазарту", + builder_buy:"Сатып алу",builder_select:"Таңдау", + compare_title:'Құрылғыларды салыстыру',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:'Технологии будущего — доступны уже сейчас', + hero_sub:"Исследуйте, сравнивайте и выбирайте VR, AI и игровые технологии в одном месте.", + hero_cta1:"Смотреть каталог",hero_cta2:"Собрать компьютер", + cat_title:'Основные направления',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:'Популярные товары',pop_sub:"Самые продаваемые устройства", + feat_title:'Почему CYBER VR?', + 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:'Сборка компьютера',builder_sub:"Соберите нужный вам компьютер", + builder_your:"Ваша сборка",compat_ok:"Компоненты совместимы", + compat_warn:"Возможны проблемы совместимости некоторых компонентов", + total_price:"Итого:",builder_save:"Сохранить сборку",builder_clear:"Очистить сборку", + builder_buy:"Купить",builder_select:"Выбрать", + compare_title:'Сравнение устройств',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 '
'+ + ''+p.name+''+ + '
'+ + ''+p.cat.toUpperCase()+''+ + '
'+p.name+'
'+ + '
'+p.specs+'
'+ + '
'+ + ''+fmt(p.price)+''+ + '★ '+p.rating+''+ + '
'+ + '
'+ + '
'+ + ''+ + ''+ + ''+ + '
'+ + '
'; +} + +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= + ''+p.name+''+ + '

'+desc+'

'+ + '
'+ + '
'+t('brand_l')+'
'+p.brand+'
'+ + '
'+t('rating')+'
★ '+p.rating+'
'+ + '
'+t('specs')+'
'+p.specs+'
'+ + '
'+ + '
'+fmt(p.price)+'
'+ + '
'+ + ''+ + ''+ + ''+ + '
'; + 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.priceparseInt(parts[1]))return false} + if(minRating&&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+='
'+ + '
'+ + '
'+(selected?'✓':(i+1))+'
'+ + '
'+step.icon+' '+label+'
'+ + (selected?'
'+selected.name+' — '+fmt(selected.price)+'
':'')+ + '
▼
'+ + '
'+ + '
'+getOptionsHTML(step)+'
'+ + '
'; + }); + container.innerHTML=html; + updateSummary(); +} + +function getActiveStep(){ + for(var i=0;i'+ + '
🔧
'+ + '
'+item.name+'
'+(item.specs||'')+'
'+ + '
'+fmt(item.price)+'
'+ + ''; + }).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+='
'+step.icon+' '+label+''+fmt(sel.price)+'
'} + else{html+='
'+step.icon+' '+label+'—
'} + }); + 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='
⚖️

'+t('compare_empty')+'

'+ + '

'+(lang==='kk'?'Каталогтан өнімдерді салыстыруға қосыңыз':'Добавьте товары из каталога для сравнения')+'

'+ + '
'; + return; + } + var products=compareList.map(getProduct).filter(Boolean); + if(products.length<2){ + container.innerHTML='
⚖️

'+(lang==='kk'?'Кемінде 2 өнім қосыңыз':'Добавьте минимум 2 товара')+'

'; + 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='
'; + products.forEach(function(p){ + html+=''; + }); + html+=''; + fields.forEach(function(f){ + html+=''; + products.forEach(function(p){ + var val=p[f.key];if(f.fmt)val=f.fmt(val);if(f.prefix)val=f.prefix+val; + html+=''; + }); + html+=''; + }); + html+='
'+p.name+'
'+p.name+'
'+fmt(p.price)+'
'+ + '
'+f.label+''+val+'
'; + 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='
🛒

'+t('cart_empty')+'

'+t('cart_empty_desc')+'

'+ + '
'; + 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+='
'+ + '
📦
'+ + '
'+p.name+'
'+p.specs+'
'+ + '
'+ + ''+ + ''+ci.qty+''+ + ''+ + '
'+ + '
'+fmt(lineTotal)+'
'+ + ''+ + '
'; + }); + html+='
'+t('total')+':'+fmt(total)+'
'; + html+='
'; + 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='

'+t('profile_favs')+'

'+ + (items.length?'
'+items.map(renderProductCard).join('')+'
': + '
♡

'+t('fav_empty')+'

'); + }else if(tab==='builds'){ + content.innerHTML='

'+t('profile_builds')+'

'+ + (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+='
'+step.icon+' '+b[step.key].name+'
'}}); + return '
'+ + '
'+(lang==='kk'?'Жинақ':'Сборка')+' #'+(i+1)+''+fmt(total)+'
'+items+'
'; + }).join(''):'
🖥️

'+t('no_builds')+'

'); + }else if(tab==='compares'){ + var citems=compareList.map(getProduct).filter(Boolean); + content.innerHTML='

'+t('my_compares')+'

'+ + (citems.length?'
'+citems.map(renderProductCard).join('')+'
': + '
⚖️

'+t('compare_empty')+'

'); + }else if(tab==='history'){ + content.innerHTML='

'+t('buy_history')+'

📦

'+t('no_history')+'

'; + }else if(tab==='settings'){ + content.innerHTML='

'+t('settings')+'

'+ + '
'+ + '
'+ + '
'+ + '
'+ + '
'+ + ''+ + '
'; + } +} + +// 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='
'+avatar+'
'+text.replace(/\n/g,'
')+'
'; + 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)}); +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..7566dd6 --- /dev/null +++ b/index.html @@ -0,0 +1,414 @@ + + + + + + +CYBER VR — Болашақ технологиялары + + + + + + + + + + + + + + +
+
+
+
+
+
+
🚀 Жаңа буын технологиялар
+

Болашақ технологиялары — қазір қолжетімді

+

VR, AI және ойын технологияларын бір жерден зерттеңіз, салыстырыңыз және өзіңізге лайық шешімді таңдаңыз.

+
+ + +
+
+
+
+ CYBER VR +
+
+
+
+ +
+
+
+

Негізгі бағыттар

+

Өзіңізге қызықты бағытты таңдаңыз

+
+
+
+
🥽
+

VR құрылғылары

+

Виртуалды шындық әлеміне еніңіз.

+
→
+
+
+
🤖
+

AI құрылғылары

+

Күнделікті өмірге арналған жаңа буын AI технологиялары.

+
→
+
+
+
🎮
+

Gaming

+

Ойынға арналған заманауи құрылғылар мен аксессуарлар.

+
→
+
+
+
🖥️
+

PC Builder

+

Өзіңізге қажетті компьютерді жинаңыз.

+
→
+
+
+
+
+ +
+
+
+

Танымал өнімдер

+

Ең көп сатылатын құрылғылар

+
+
+
+
+ +
+
+
+

Неліктен CYBER VR?

+
+
+
+
🚚
+

Жылдам жеткізу

+

Қазақстан бойынша тегін жеткізу

+
+
+
🛡️
+

Кепілдік

+

Барлық өнімдерге 2 жыл кепілдік

+
+
+
💬
+

AI көмекші

+

Таңдауға көмектесетін ақылды жүйе

+
+
+
🔧
+

PC Builder

+

Компьютерді өзіңіз жинаңыз

+
+
+
+
+
+ + +
+
+
+
+

Каталог

+

Барлық құрылғылар бір жерде

+
+
+ + + + + + + + + + +
+
+
+ 🔍 + +
+ + + +
+
+ +
+
+
+ + +
+
+
+
+

VR & AI технологиялары

+

Виртуалды шындық және жасанды интеллект құрылғылары

+
+
+ + + +
+
+
+
+
+ + +
+
+
+
+

Компьютер құрастыру

+

Өзіңізге қажетті компьютерді жинаңыз

+
+
+
+
+

Сіздің жинағыңыз

+
+
✓ Компоненттер үйлесімді
+
+ Жалпы баға: + 0 ₸ +
+
+ + + +
+
+
+
+
+
+ + +
+
+
+
+

Құрылғыларды салыстыру

+

Бірнеше өнімді салыстырыңыз

+
+
+
+
+
+ + +
+
+
+
+
🧠
+

CYBER AI

+

Сізге қажетті технологияны таңдауға көмектесетін ақылды көмекші.

+
+
+
+
+
🧠
+
Сәлеметсіз бе! Мен CYBER AI көмекшісімін. Сізге қандай құрылғы керек екенін айтыңыз, мен көмектесемін. 🎮
+
+
+
+ + + +
+
+ + +
+
+
+
+
+ + +
+
+
+
+

Таңдаулылар

+

Сіз сақтаған өнімдер

+
+
+
+
♡
+

Таңдаулылар бос

+

Каталогтан ұнаған өнімдерді қосыңыз

+ +
+
+
+
+ + +
+
+
+
+

Себет

+
+
+
+
+
+ + +
+
+
+
+

Менің профилім

+
+
+
+
👤
+
Пайдаланушы
+
user@cybervr.kz
+ +
+
+

Таңдаулылар

+
+
+
+
+
+
+ + + + + + + +
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..8ae1b82 --- /dev/null +++ b/styles.css @@ -0,0 +1,298 @@ + +: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} +}