File size: 10,723 Bytes
bd6ef5e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ByteBazaar - Build Your Perfect PC</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
</head>
<body class="bg-gray-100">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<section id="hero" class="mb-16">
<div class="bg-yellow-500 rounded-xl p-8 md:p-12 shadow-lg">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="md:w-1/2">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Build Your Dream PC</h1>
<p class="text-xl text-gray-800 mb-6">Customize every component to create the perfect computer for your needs.</p>
<a href="#builder" class="bg-gray-900 hover:bg-gray-800 text-white px-6 py-3 rounded-lg font-medium transition-colors inline-block">Start Building</a>
</div>
<div class="md:w-1/2">
<img src="http://static.photos/technology/640x360/42" alt="Gaming PC" class="rounded-lg shadow-md w-full">
</div>
</div>
</div>
</section>
<!-- PC Builder Section -->
<section id="builder" class="mb-16">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="bg-gray-900 text-white px-6 py-4">
<h2 class="text-2xl font-bold">PC Configuration Tool</h2>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Component Selection -->
<div class="md:col-span-2">
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-gray-800">1. Select Processor (CPU)</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- CPU Cards will be populated by JavaScript -->
</div>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-gray-800">2. Select Graphics Card (GPU)</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- GPU Cards will be populated by JavaScript -->
</div>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-gray-800">3. Select Memory (RAM)</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- RAM Cards will be populated by JavaScript -->
</div>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-gray-800">4. Select Storage</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Storage Cards will be populated by JavaScript -->
</div>
</div>
</div>
<!-- Configuration Summary -->
<div class="md:col-span-1">
<div class="bg-gray-50 rounded-lg p-6 border border-gray-200 sticky top-4">
<h3 class="text-xl font-bold mb-4 text-gray-800">Your Build</h3>
<div id="build-summary" class="mb-6">
<p class="text-gray-500">Select components to see your build</p>
</div>
<div class="mb-4">
<h4 class="font-semibold text-gray-700 mb-2">Total Price:</h4>
<p id="total-price" class="text-3xl font-bold text-yellow-600">$0</p>
</div>
<button id="save-build" class="w-full bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-50" disabled>
Save Build
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Prebuilt Systems Section -->
<section id="prebuilt" class="mb-16">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Prebuilt Systems</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<img src="http://static.photos/technology/640x360/43" alt="Starter PC" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-gray-800">Starter PC</h3>
<p class="text-gray-600 mb-4">Perfect for everyday tasks and light gaming</p>
<ul class="space-y-2 mb-4">
<li class="flex items-center"><i data-feather="check" class="text-yellow-500 mr-2"></i> AMD Ryzen 5 5600G</li>
<li class="flex items-center"><i data-feather="check" class="text-yellow-500 mr-2"></i> 16GB DDR4 RAM</li>
<li class="flex items-center"><i data-feather="check" class="text-yellow-500 mr-2"></i> 512GB SSD</li>
</ul>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-yellow-600">$499</span>
<button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-medium py-2 px-4 rounded-lg transition-colors">
Customize
</button>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<img src="http://static.photos/technology/640x360/44" alt="Gaming PC" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-gray-800">Gaming PC</h3>
<p class="text-gray-600 mb-4">High performance for modern games</p>
<ul class="space-y-2 mb-4">
<li class="flex items-center"><i data-feather="check" class="text-yellow-500 mr-2"></i> Intel Core i7-12700K</li>
<li class="flex items-center"><i data-feather="check" class="text-yellow-500 mr-2"></i> NVIDIA RTX 3070</li>
<li class="flex items-center"><i data-feather="check" class="text-yellow-500 mr-2"></i> 32GB DDR4 RAM</li>
<li class="flex items-center"><i data-feather="check" class="text-yellow-500 mr-2"></i> 1TB NVMe SSD</li>
</ul>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-yellow-600">$1299</span>
<button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-medium py-2 px-4 rounded-lg transition-colors">
Customize
</button>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<img src="http://static.photos/technology/640x360/45" alt="Workstation" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-gray-800">Workstation</h3>
<p class="text-gray-600 mb-4">For content creators and professionals</p>
<ul class="space-y-2 mb-4">
<li class="flex items-center"><i data-feather="check" class="text-yellow-500 mr-2"></i> AMD Ryzen 9 7950X</li>
<li class="flex items-center"><i data-feather="check" class="text-yellow-500 mr-2"></i> NVIDIA RTX 4090</li>
<li class="flex items-center"><i data-feather="check" class="text-yellow-500 mr-2"></i> 64GB DDR5 RAM</li>
<li class="flex items-center"><i data-feather="check" class="text-yellow-500 mr-2"></i> 2TB NVMe SSD</li>
</ul>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-yellow-600">$2999</span>
<button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-medium py-2 px-4 rounded-lg transition-colors">
Customize
</button>
</div>
</div>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
VANTA.NET({
el: "#hero",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0xfbbf24,
backgroundColor: 0xf3f4f6,
points: 10.00,
maxDistance: 20.00,
spacing: 15.00
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |