{"id":27836,"date":"2025-07-01T13:43:15","date_gmt":"2025-07-01T13:43:15","guid":{"rendered":"https:\/\/thegamingsolutions.com\/?page_id=27836"},"modified":"2025-07-01T19:07:02","modified_gmt":"2025-07-01T19:07:02","slug":"27836-2","status":"publish","type":"page","link":"https:\/\/thegamingsolutions.com\/?page_id=27836","title":{"rendered":"Customize PC"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Custom Gaming PC Builder | The Gaming Solutions<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Rajdhani', 'Segoe UI', sans-serif;\r\n }\r\n \r\n body {\r\n background: radial-gradient(circle at center, #0a0a0a 0%, #000 100%);\r\n color: #fff;\r\n min-height: 100vh;\r\n overflow-x: hidden;\r\n background-image: \r\n radial-gradient(circle at 10% 20%, rgba(230, 0, 0, 0.05) 0%, transparent 20%),\r\n radial-gradient(circle at 90% 80%, rgba(230, 0, 0, 0.05) 0%, transparent 20%);\r\n }\r\n \r\n \/* Header styles *\/\r\n .header {\r\n text-align: center;\r\n padding: 70px 20px 60px;\r\n background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);\r\n position: relative;\r\n overflow: hidden;\r\n border-bottom: 2px solid #e60000;\r\n background-image: \r\n linear-gradient(45deg, rgba(20, 20, 20, 0.8) 0%, rgba(10, 10, 10, 0.9) 100%),\r\n url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\"><rect fill=\"rgba(230,0,0,0.05)\" width=\"100\" height=\"100\"\/><\/svg>');\r\n background-size: 100% 100%, 30px 30px;\r\n box-shadow: 0 5px 30px rgba(0, 0, 0, 0.7);\r\n }\r\n \r\n .header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, transparent, #e60000, transparent);\r\n }\r\n \r\n .header::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80%;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(230, 0, 0, 0.5), transparent);\r\n }\r\n \r\n .welcome-heading {\r\n font-size: 4.2rem;\r\n margin-bottom: 15px;\r\n color: #fff;\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n font-weight: 900;\r\n text-shadow: 0 0 20px rgba(230, 0, 0, 0.7);\r\n position: relative;\r\n z-index: 2;\r\n background: linear-gradient(to right, #fff 0%, #ddd 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: glow 2s ease-in-out infinite alternate;\r\n }\r\n \r\n .main-heading {\r\n font-size: 3.2rem;\r\n color: #e60000;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n position: relative;\r\n z-index: 2;\r\n text-shadow: 0 0 15px rgba(230, 0, 0, 0.5);\r\n animation: pulse 2s infinite;\r\n }\r\n \r\n .sub-heading {\r\n font-size: 1.4rem;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n color: #bbb;\r\n position: relative;\r\n z-index: 2;\r\n line-height: 1.7;\r\n }\r\n \r\n \/* Categories container *\/\r\n .categories-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 40px;\r\n max-width: 1600px;\r\n margin: 50px auto;\r\n padding: 0 20px;\r\n }\r\n \r\n .category {\r\n background: rgba(15, 15, 15, 0.95);\r\n border-radius: 15px;\r\n overflow: hidden;\r\n width: 100%;\r\n max-width: 750px;\r\n box-shadow: \r\n 0 8px 25px rgba(0, 0, 0, 0.6),\r\n 0 0 0 1px rgba(230, 0, 0, 0.1);\r\n border: 1px solid rgba(70, 70, 70, 0.5);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n \r\n .category:hover {\r\n transform: translateY(-8px);\r\n box-shadow: \r\n 0 15px 35px rgba(230, 0, 0, 0.2),\r\n 0 0 20px rgba(230, 0, 0, 0.1);\r\n }\r\n \r\n .category::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #e60000, #b30000);\r\n z-index: 2;\r\n }\r\n \r\n .category-header {\r\n padding: 25px 30px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n \r\n .category-title {\r\n font-size: 2.4rem;\r\n color: #fff;\r\n text-align: center;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-shadow: 0 0 10px rgba(230, 0, 0, 0.3);\r\n position: relative;\r\n display: inline-block;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n padding: 0 20px;\r\n }\r\n \r\n .category-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -8px;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: linear-gradient(90deg, transparent, #e60000, transparent);\r\n }\r\n \r\n .category-image {\r\n width: 100%;\r\n height: 320px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n overflow: hidden;\r\n position: relative;\r\n background: #000;\r\n }\r\n \r\n .category-image::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(to bottom, transparent 60%, rgba(15, 15, 15, 0.95));\r\n z-index: 1;\r\n }\r\n \r\n .category-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.5s ease;\r\n }\r\n \r\n .category:hover .category-image img {\r\n transform: scale(1.05);\r\n }\r\n \r\n \/* Components section *\/\r\n .components {\r\n padding: 25px 30px 30px;\r\n }\r\n \r\n .component-group {\r\n margin-bottom: 30px;\r\n }\r\n \r\n .group-title {\r\n font-size: 1.7rem;\r\n margin-bottom: 20px;\r\n color: #e60000;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid rgba(230, 0, 0, 0.3);\r\n display: flex;\r\n align-items: center;\r\n text-shadow: 0 0 8px rgba(230, 0, 0, 0.3);\r\n }\r\n \r\n .group-title i {\r\n margin-right: 12px;\r\n color: #e60000;\r\n font-size: 1.4rem;\r\n text-shadow: 0 0 10px rgba(230, 0, 0, 0.5);\r\n }\r\n \r\n .component-options {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n gap: 20px;\r\n }\r\n \r\n .component-option {\r\n background: rgba(25, 25, 25, 0.8);\r\n border: 1px solid rgba(70, 70, 70, 0.5);\r\n border-radius: 10px;\r\n padding: 20px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);\r\n }\r\n \r\n .component-option:hover {\r\n background: rgba(35, 35, 35, 0.8);\r\n border-color: rgba(230, 0, 0, 0.5);\r\n transform: translateY(-5px);\r\n box-shadow: 0 8px 20px rgba(230, 0, 0, 0.2);\r\n }\r\n \r\n .component-option.selected {\r\n background: rgba(50, 0, 0, 0.3);\r\n border-color: #e60000;\r\n box-shadow: \r\n 0 0 25px rgba(230, 0, 0, 0.4),\r\n inset 0 0 10px rgba(230, 0, 0, 0.2);\r\n }\r\n \r\n .component-option::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: rgba(230, 0, 0, 0.3);\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .component-option:hover::before {\r\n transform: scaleX(1);\r\n }\r\n \r\n .component-option.selected::before {\r\n background: #e60000;\r\n transform: scaleX(1);\r\n }\r\n \r\n .option-name {\r\n font-weight: 700;\r\n margin-bottom: 12px;\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 1.25rem;\r\n color: #fff;\r\n text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n .option-price {\r\n color: #e60000;\r\n font-weight: 800;\r\n font-size: 1.3rem;\r\n text-shadow: 0 0 8px rgba(230, 0, 0, 0.5);\r\n }\r\n \r\n .option-details {\r\n font-size: 1rem;\r\n color: #bbb;\r\n line-height: 1.6;\r\n }\r\n \r\n \/* Order summary *\/\r\n .order-summary {\r\n background: rgba(15, 15, 15, 0.95);\r\n max-width: 1200px;\r\n margin: 50px auto;\r\n padding: 35px;\r\n border-radius: 15px;\r\n border: 1px solid rgba(70, 70, 70, 0.5);\r\n box-shadow: \r\n 0 8px 25px rgba(0, 0, 0, 0.6),\r\n 0 0 0 1px rgba(230, 0, 0, 0.1);\r\n position: relative;\r\n z-index: 2;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .order-summary:hover {\r\n transform: translateY(-5px);\r\n box-shadow: \r\n 0 15px 35px rgba(230, 0, 0, 0.2),\r\n 0 0 20px rgba(230, 0, 0, 0.1);\r\n }\r\n \r\n .order-summary::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #e60000, #b30000);\r\n z-index: 2;\r\n }\r\n \r\n .summary-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 25px;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(230, 0, 0, 0.3);\r\n }\r\n \r\n .summary-title {\r\n font-size: 2rem;\r\n color: #fff;\r\n font-weight: 700;\r\n text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);\r\n }\r\n \r\n .total-price {\r\n font-size: 2.5rem;\r\n color: #e60000;\r\n font-weight: 800;\r\n text-shadow: 0 0 15px rgba(230, 0, 0, 0.5);\r\n }\r\n \r\n .selected-items {\r\n margin-bottom: 30px;\r\n max-height: 300px;\r\n overflow-y: auto;\r\n padding-right: 10px;\r\n }\r\n \r\n .selected-items::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .selected-items::-webkit-scrollbar-track {\r\n background: rgba(30, 30, 30, 0.5);\r\n border-radius: 4px;\r\n }\r\n \r\n .selected-items::-webkit-scrollbar-thumb {\r\n background: #e60000;\r\n border-radius: 4px;\r\n }\r\n \r\n .selected-item {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 15px;\r\n border-bottom: 1px solid rgba(70, 70, 70, 0.5);\r\n transition: all 0.2s ease;\r\n border-radius: 5px;\r\n }\r\n \r\n .selected-item:hover {\r\n background: rgba(40, 40, 40, 0.5);\r\n transform: translateX(5px);\r\n }\r\n \r\n .item-name {\r\n display: flex;\r\n align-items: center;\r\n font-size: 1.1rem;\r\n }\r\n \r\n .item-price {\r\n color: #e60000;\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n }\r\n \r\n .order-btn {\r\n display: block;\r\n width: 100%;\r\n padding: 18px;\r\n background: linear-gradient(90deg, #e60000, #b30000);\r\n color: white;\r\n border: none;\r\n border-radius: 10px;\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n box-shadow: 0 5px 15px rgba(230, 0, 0, 0.4);\r\n position: relative;\r\n overflow: hidden;\r\n z-index: 1;\r\n }\r\n \r\n .order-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n transition: 0.5s;\r\n z-index: -1;\r\n }\r\n \r\n .order-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 25px rgba(230, 0, 0, 0.6);\r\n }\r\n \r\n .order-btn:hover::before {\r\n left: 100%;\r\n }\r\n \r\n .order-btn:active {\r\n transform: translateY(0);\r\n }\r\n \r\n \/* Footer *\/\r\n .footer {\r\n text-align: center;\r\n padding: 30px 20px;\r\n color: #777;\r\n font-size: 1rem;\r\n margin-top: 20px;\r\n border-top: 1px solid rgba(70, 70, 70, 0.5);\r\n position: relative;\r\n }\r\n \r\n .footer::before {\r\n content: '';\r\n position: absolute;\r\n top: -1px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 200px;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, #e60000, transparent);\r\n }\r\n \r\n .currency-note {\r\n text-align: center;\r\n color: #999;\r\n font-size: 0.9rem;\r\n margin: 10px 0 30px;\r\n }\r\n \r\n \/* Animations *\/\r\n @keyframes glow {\r\n from {\r\n text-shadow: 0 0 10px rgba(230, 0, 0, 0.7);\r\n }\r\n to {\r\n text-shadow: 0 0 25px rgba(230, 0, 0, 0.9), 0 0 35px rgba(230, 0, 0, 0.6);\r\n }\r\n }\r\n \r\n @keyframes pulse {\r\n 0% {\r\n transform: scale(1);\r\n opacity: 0.8;\r\n }\r\n 50% {\r\n transform: scale(1.03);\r\n opacity: 1;\r\n }\r\n 100% {\r\n transform: scale(1);\r\n opacity: 0.8;\r\n }\r\n }\r\n \r\n @keyframes float {\r\n 0% {\r\n transform: translateY(0px);\r\n }\r\n 50% {\r\n transform: translateY(-10px);\r\n }\r\n 100% {\r\n transform: translateY(0px);\r\n }\r\n }\r\n \r\n \/* Floating elements *\/\r\n .floating {\r\n position: absolute;\r\n z-index: 0;\r\n opacity: 0.1;\r\n }\r\n \r\n .floating.circle {\r\n width: 200px;\r\n height: 200px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, #e60000 0%, transparent 70%);\r\n animation: float 8s ease-in-out infinite;\r\n }\r\n \r\n .floating.rect {\r\n width: 150px;\r\n height: 150px;\r\n background: linear-gradient(45deg, #e60000, transparent);\r\n transform: rotate(45deg);\r\n animation: float 10s ease-in-out infinite;\r\n }\r\n \r\n \/* Responsive design *\/\r\n @media (max-width: 1200px) {\r\n .categories-container {\r\n max-width: 1000px;\r\n }\r\n }\r\n \r\n @media (max-width: 992px) {\r\n .categories-container {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .category {\r\n max-width: 700px;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .welcome-heading {\r\n font-size: 3rem;\r\n }\r\n \r\n .main-heading {\r\n font-size: 2.4rem;\r\n }\r\n \r\n .component-options {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .category-image {\r\n height: 250px;\r\n }\r\n }\r\n \r\n @media (max-width: 576px) {\r\n .header {\r\n padding: 40px 15px;\r\n }\r\n \r\n .welcome-heading {\r\n font-size: 2.4rem;\r\n }\r\n \r\n .main-heading {\r\n font-size: 2rem;\r\n }\r\n \r\n .summary-header {\r\n flex-direction: column;\r\n gap: 15px;\r\n text-align: center;\r\n }\r\n }\r\n <\/style>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n <!-- Floating decorative elements -->\r\n <div class=\"floating circle\" style=\"top: 10%; left: 5%;\"><\/div>\r\n <div class=\"floating rect\" style=\"top: 15%; right: 8%;\"><\/div>\r\n <div class=\"floating circle\" style=\"bottom: 20%; right: 10%; width: 150px; height: 150px;\"><\/div>\r\n \r\n <!-- Header Section -->\r\n <header class=\"header\">\r\n <h1 class=\"welcome-heading\">Welcome to The Gaming Solutions<\/h1>\r\n <h2 class=\"main-heading\">Customize your PC according to your needs<\/h2>\r\n <p class=\"sub-heading\">Build your ultimate gaming rig with premium components. Select each part below to create a personalized gaming experience.<\/p>\r\n <\/header>\r\n \r\n <p class=\"currency-note\">All prices are shown in Pakistani Rupees (PKR)<\/p>\r\n \r\n <div class=\"categories-container\">\r\n <!-- Category 1: PC Components -->\r\n <div class=\"category\">\r\n <div class=\"category-header\">\r\n <h3 class=\"category-title\">PC Components<\/h3>\r\n <\/div>\r\n <div class=\"category-image\">\r\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcR7aQc7wzqiY29wRjUph-yazt_QUJzds3iDSQ&s\">\r\n <\/div>\r\n <div class=\"components\">\r\n <!-- Processor Group -->\r\n <div class=\"component-group\">\r\n <h4 class=\"group-title\"><i class=\"fas fa-microchip\"><\/i> Processor (CPU)<\/h4>\r\n <div class=\"component-options\">\r\n <div class=\"component-option\" data-price=\"82200\" data-name=\"AMD Ryzen 5 5600X\">\r\n <div class=\"option-name\">\r\n <span>AMD Ryzen 5 5600X<\/span>\r\n <span class=\"option-price\">Rs. 82,200<\/span>\r\n <\/div>\r\n <div class=\"option-details\">6-Core, 12-Thread, 3.7GHz Base, 4.6GHz Boost<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"123400\" data-name=\"Intel Core i7-12700K\">\r\n <div class=\"option-name\">\r\n <span>Intel Core i7-12700K<\/span>\r\n <span class=\"option-price\">Rs. 123,400<\/span>\r\n <\/div>\r\n <div class=\"option-details\">12-Core (8P+4E), 20-Thread, 3.6GHz Base, 5.0GHz Boost<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"191700\" data-name=\"AMD Ryzen 9 7950X\">\r\n <div class=\"option-name\">\r\n <span>AMD Ryzen 9 7950X<\/span>\r\n <span class=\"option-price\">Rs. 191,700<\/span>\r\n <\/div>\r\n <div class=\"option-details\">16-Core, 32-Thread, 4.5GHz Base, 5.7GHz Boost<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Graphics Card Group -->\r\n <div class=\"component-group\">\r\n <h4 class=\"group-title\"><i class=\"fas fa-gamepad\"><\/i> Graphics Card (GPU)<\/h4>\r\n <div class=\"component-options\">\r\n <div class=\"component-option\" data-price=\"137000\" data-name=\"NVIDIA RTX 3060 Ti\">\r\n <div class=\"option-name\">\r\n <span>NVIDIA RTX 3060 Ti<\/span>\r\n <span class=\"option-price\">Rs. 137,000<\/span>\r\n <\/div>\r\n <div class=\"option-details\">8GB GDDR6, 4864 CUDA Cores, 1665 MHz Boost<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"219100\" data-name=\"AMD Radeon RX 6800 XT\">\r\n <div class=\"option-name\">\r\n <span>AMD Radeon RX 6800 XT<\/span>\r\n <span class=\"option-price\">Rs. 219,100<\/span>\r\n <\/div>\r\n <div class=\"option-details\">16GB GDDR6, 4608 Stream Processors, 2250 MHz Boost<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"438600\" data-name=\"NVIDIA RTX 4090\">\r\n <div class=\"option-name\">\r\n <span>NVIDIA RTX 4090<\/span>\r\n <span class=\"option-price\">Rs. 438,600<\/span>\r\n <\/div>\r\n <div class=\"option-details\">24GB GDDR6X, 16384 CUDA Cores, 2520 MHz Boost<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- RAM Group -->\r\n <div class=\"component-group\">\r\n <h4 class=\"group-title\"><i class=\"fas fa-memory\"><\/i> Memory (RAM)<\/h4>\r\n <div class=\"component-options\">\r\n <div class=\"component-option\" data-price=\"24400\" data-name=\"16GB DDR4 3200MHz\">\r\n <div class=\"option-name\">\r\n <span>16GB DDR4 3200MHz<\/span>\r\n <span class=\"option-price\">Rs. 24,400<\/span>\r\n <\/div>\r\n <div class=\"option-details\">2x8GB, CL16, RGB Lighting<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"43600\" data-name=\"32GB DDR5 5600MHz\">\r\n <div class=\"option-name\">\r\n <span>32GB DDR5 5600MHz<\/span>\r\n <span class=\"option-price\">Rs. 43,600<\/span>\r\n <\/div>\r\n <div class=\"option-details\">2x16GB, CL36, High Performance<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"81800\" data-name=\"64GB DDR5 6000MHz\">\r\n <div class=\"option-name\">\r\n <span>64GB DDR5 6000MHz<\/span>\r\n <span class=\"option-price\">Rs. 81,800<\/span>\r\n <\/div>\r\n <div class=\"option-details\">2x32GB, CL30, Optimized for Ryzen<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Category 2: Peripherals -->\r\n <div class=\"category\">\r\n <div class=\"category-header\">\r\n <h3 class=\"category-title\">Gaming Peripherals<\/h3>\r\n <\/div>\r\n <div class=\"category-image\">\r\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcRrtGy8mTWn11gbTX26Me8AwtoWIbTyeRcPpw&s\">\r\n <\/div>\r\n <div class=\"components\">\r\n <!-- Monitor Group -->\r\n <div class=\"component-group\">\r\n <h4 class=\"group-title\"><i class=\"fas fa-desktop\"><\/i> Gaming Monitor<\/h4>\r\n <div class=\"component-options\">\r\n <div class=\"component-option\" data-price=\"68300\" data-name=\"24\u2033 1080p 144Hz\">\r\n <div class=\"option-name\">\r\n <span>24\u2033 1080p 144Hz<\/span>\r\n <span class=\"option-price\">Rs. 68,300<\/span>\r\n <\/div>\r\n <div class=\"option-details\">IPS Panel, 1ms Response, AMD FreeSync<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"123100\" data-name=\"27\u2033 1440p 165Hz\">\r\n <div class=\"option-name\">\r\n <span>27\u2033 1440p 165Hz<\/span>\r\n <span class=\"option-price\">Rs. 123,100<\/span>\r\n <\/div>\r\n <div class=\"option-details\">Nano IPS, 1ms, G-SYNC Compatible<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"246200\" data-name=\"34\u2033 Ultrawide 1440p\">\r\n <div class=\"option-name\">\r\n <span>34\u2033 Ultrawide 1440p<\/span>\r\n <span class=\"option-price\">Rs. 246,200<\/span>\r\n <\/div>\r\n <div class=\"option-details\">Curved, 144Hz, HDR600, USB-C<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Keyboard Group -->\r\n <div class=\"component-group\">\r\n <h4 class=\"group-title\"><i class=\"fas fa-keyboard\"><\/i> Mechanical Keyboard<\/h4>\r\n <div class=\"component-options\">\r\n <div class=\"component-option\" data-price=\"24400\" data-name=\"TKL Mechanical\">\r\n <div class=\"option-name\">\r\n <span>TKL Mechanical<\/span>\r\n <span class=\"option-price\">Rs. 24,400<\/span>\r\n <\/div>\r\n <div class=\"option-details\">RGB Backlit, Red Switches, Detachable Cable<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"35300\" data-name=\"Wireless Mechanical\">\r\n <div class=\"option-name\">\r\n <span>Wireless Mechanical<\/span>\r\n <span class=\"option-price\">Rs. 35,300<\/span>\r\n <\/div>\r\n <div class=\"option-details\">Bluetooth\/2.4Ghz, Brown Switches, PBT Keycaps<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"54500\" data-name=\"Premium Aluminum\">\r\n <div class=\"option-name\">\r\n <span>Premium Aluminum<\/span>\r\n <span class=\"option-price\">Rs. 54,500<\/span>\r\n <\/div>\r\n <div class=\"option-details\">CNC Aluminum Frame, Hot-Swappable, Per-Key RGB<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Mouse Group -->\r\n <div class=\"component-group\">\r\n <h4 class=\"group-title\"><i class=\"fas fa-mouse\"><\/i> Gaming Mouse<\/h4>\r\n <div class=\"component-options\">\r\n <div class=\"component-option\" data-price=\"13400\" data-name=\"Wired Gaming Mouse\">\r\n <div class=\"option-name\">\r\n <span>Wired Gaming Mouse<\/span>\r\n <span class=\"option-price\">Rs. 13,400<\/span>\r\n <\/div>\r\n <div class=\"option-details\">16000 DPI, 6 Buttons, RGB Lighting<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"27100\" data-name=\"Wireless Gaming Mouse\">\r\n <div class=\"option-name\">\r\n <span>Wireless Gaming Mouse<\/span>\r\n <span class=\"option-price\">Rs. 27,100<\/span>\r\n <\/div>\r\n <div class=\"option-details\">Lightweight 65g, 25K DPI, 70hr Battery<\/div>\r\n <\/div>\r\n <div class=\"component-option\" data-price=\"40800\" data-name=\"MMO Gaming Mouse\">\r\n <div class=\"option-name\">\r\n <span>MMO Gaming Mouse<\/span>\r\n <span class=\"option-price\">Rs. 40,800<\/span>\r\n <\/div>\r\n <div class=\"option-details\">19 Programmable Buttons, Weight Tuning, OLED Display<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Order Summary -->\r\n <div class=\"order-summary\">\r\n <div class=\"summary-header\">\r\n <h3 class=\"summary-title\">Your Custom Build<\/h3>\r\n <div class=\"total-price\">Rs. <span id=\"total\">0<\/span><\/div>\r\n <\/div>\r\n \r\n <div class=\"selected-items\" id=\"selected-items\">\r\n <div class=\"selected-item\">\r\n <div class=\"item-name\">No items selected yet<\/div>\r\n <div class=\"item-price\">Rs. 0<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <button class=\"order-btn\" id=\"order-btn\">Proceed to Order<\/button>\r\n <\/div>\r\n \r\n <!-- Footer -->\r\n <div class=\"footer\">\r\n <p>\u00a9 2023 The Gaming Solutions. All Rights Reserved. | Premium Gaming Equipment & Custom PC Builds<\/p>\r\n <\/div>\r\n \r\n <script>\r\n \/\/ Initialize variables\r\n let total = 0;\r\n let selectedItems = [];\r\n const totalElement = document.getElementById('total');\r\n const selectedItemsContainer = document.getElementById('selected-items');\r\n const orderBtn = document.getElementById('order-btn');\r\n \r\n \/\/ Format number to Pakistani Rupees\r\n function formatRupees(amount) {\r\n return amount.toLocaleString('en-PK', {\r\n maximumFractionDigits: 0\r\n });\r\n }\r\n \r\n \/\/ Add click event to all component options\r\n const componentOptions = document.querySelectorAll('.component-option');\r\n componentOptions.forEach(option => {\r\n option.addEventListener('click', () => {\r\n \/\/ Toggle selection\r\n option.classList.toggle('selected');\r\n \r\n \/\/ Get item data\r\n const price = parseInt(option.dataset.price);\r\n const name = option.dataset.name;\r\n \r\n \/\/ Check if item is selected\r\n if (option.classList.contains('selected')) {\r\n \/\/ Add to total\r\n total += price;\r\n \/\/ Add to selected items\r\n selectedItems.push({ name, price });\r\n \r\n \/\/ Add selection animation\r\n option.style.animation = \"pulse 0.5s\";\r\n setTimeout(() => {\r\n option.style.animation = \"\";\r\n }, 500);\r\n } else {\r\n \/\/ Remove from total\r\n total -= price;\r\n \/\/ Remove from selected items\r\n selectedItems = selectedItems.filter(item => item.name !== name);\r\n }\r\n \r\n \/\/ Update UI\r\n updateTotal();\r\n updateSelectedItems();\r\n });\r\n });\r\n \r\n \/\/ Update total display\r\n function updateTotal() {\r\n totalElement.textContent = formatRupees(total);\r\n totalElement.classList.add('pulse');\r\n setTimeout(() => totalElement.classList.remove('pulse'), 500);\r\n }\r\n \r\n \/\/ Update selected items list\r\n function updateSelectedItems() {\r\n \/\/ Clear current items\r\n selectedItemsContainer.innerHTML = '';\r\n \r\n if (selectedItems.length === 0) {\r\n selectedItemsContainer.innerHTML = `\r\n <div class=\"selected-item\">\r\n <div class=\"item-name\">No items selected yet<\/div>\r\n <div class=\"item-price\">Rs. 0<\/div>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n \r\n \/\/ Add each selected item\r\n selectedItems.forEach(item => {\r\n const itemElement = document.createElement('div');\r\n itemElement.className = 'selected-item';\r\n itemElement.innerHTML = `\r\n <div class=\"item-name\">${item.name}<\/div>\r\n <div class=\"item-price\">Rs. ${formatRupees(item.price)}<\/div>\r\n `;\r\n selectedItemsContainer.appendChild(itemElement);\r\n });\r\n }\r\n \r\n \/\/ Order button functionality\r\n orderBtn.addEventListener('click', () => {\r\n if (selectedItems.length === 0) {\r\n alert('Please select at least one component before placing an order!');\r\n return;\r\n }\r\n \r\n \/\/ Create a nice confirmation message\r\n const confirmationMessage = `\r\n <div style=\"text-align:center; padding:20px;\">\r\n <h2 style=\"color:#e60000; margin-bottom:15px;\">Order Confirmed!<\/h2>\r\n <p style=\"font-size:1.2rem; margin-bottom:20px;\">Thank you for choosing The Gaming Solutions!<\/p>\r\n <div style=\"background:rgba(20,20,20,0.8); padding:15px; border-radius:10px; max-width:500px; margin:0 auto;\">\r\n <h3 style=\"color:#fff; margin-bottom:15px;\">Order Summary<\/h3>\r\n <div style=\"margin-bottom:15px; text-align:left;\">\r\n ${selectedItems.map(item => `\r\n <div style=\"display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(70,70,70,0.5);\">\r\n <span>${item.name}<\/span>\r\n <span style=\"color:#e60000; font-weight:bold;\">Rs. ${formatRupees(item.price)}<\/span>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <div style=\"display:flex; justify-content:space-between; font-size:1.3rem; font-weight:bold; padding:10px 0;\">\r\n <span>Total:<\/span>\r\n <span style=\"color:#e60000;\">Rs. ${formatRupees(total)}<\/span>\r\n <\/div>\r\n <\/div>\r\n <p style=\"margin-top:20px;\">Your custom PC will be built and shipped within 5-7 business days.<\/p>\r\n <\/div>\r\n `;\r\n \r\n \/\/ Create modal\r\n const modal = document.createElement('div');\r\n modal.style.position = 'fixed';\r\n modal.style.top = '0';\r\n modal.style.left = '0';\r\n modal.style.width = '100%';\r\n modal.style.height = '100%';\r\n modal.style.backgroundColor = 'rgba(0,0,0,0.9)';\r\n modal.style.display = 'flex';\r\n modal.style.justifyContent = 'center';\r\n modal.style.alignItems = 'center';\r\n modal.style.zIndex = '1000';\r\n modal.innerHTML = confirmationMessage;\r\n \r\n \/\/ Add close button\r\n const closeButton = document.createElement('button');\r\n closeButton.textContent = 'Close';\r\n closeButton.style.marginTop = '20px';\r\n closeButton.style.padding = '10px 30px';\r\n closeButton.style.background = '#e60000';\r\n closeButton.style.color = 'white';\r\n closeButton.style.border = 'none';\r\n closeButton.style.borderRadius = '5px';\r\n closeButton.style.cursor = 'pointer';\r\n closeButton.style.fontWeight = 'bold';\r\n closeButton.style.transition = 'all 0.3s';\r\n closeButton.addEventListener('click', () => {\r\n document.body.removeChild(modal);\r\n });\r\n \r\n modal.querySelector('div').appendChild(closeButton);\r\n \r\n document.body.appendChild(modal);\r\n });\r\n \r\n \/\/ Initialize the page\r\n updateSelectedItems();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Custom Gaming PC Builder | The Gaming Solutions Welcome to The Gaming Solutions Customize your PC according to your needs<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-27836","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thegamingsolutions.com\/index.php?rest_route=\/wp\/v2\/pages\/27836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thegamingsolutions.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thegamingsolutions.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thegamingsolutions.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thegamingsolutions.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=27836"}],"version-history":[{"count":34,"href":"https:\/\/thegamingsolutions.com\/index.php?rest_route=\/wp\/v2\/pages\/27836\/revisions"}],"predecessor-version":[{"id":27963,"href":"https:\/\/thegamingsolutions.com\/index.php?rest_route=\/wp\/v2\/pages\/27836\/revisions\/27963"}],"wp:attachment":[{"href":"https:\/\/thegamingsolutions.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=27836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}