upgraded-memory/desktops.html at main · Denis254-bit/upgraded-memory · GitHub

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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Vince Investment & Solutions Ltd — Desktop Sales</title>
    <meta name="description" content="Desktop sales catalog for Vince Investment and Solutions Limited — up to 10 desktops with real images, specs and contact/buy options." />
    <style>
         :root {
            --accent: #0b74de;
            --bg: #f6f8fb;
            --card: #ffffff;
            --muted: #6b7280
        }

        * {
            box-sizing: border-box
        }

        body {
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
            margin: 0;
            background: var(--bg);
            color: #0f172a
        }

        header {
            background: linear-gradient(90deg, #072241 0%, #0b4b84 100%);
            color: #fff;
            padding: 28px 20px
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 24px
        }

        h1 {
            margin: 0;
            font-size: 24px
        }

        p.lead {
            margin: 6px 0 0;
            color: rgba(255, 255, 255, 0.9)
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 18px;
            margin-top: 20px
        }

        .card {
            background: var(--card);
            border-radius: 12px;
            box-shadow: 0 6px 18px rgba(12, 20, 30, 0.06);
            overflow: hidden;
            display: flex;
            flex-direction: column
        }

        .card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            display: block
        }

        .card-body {
            padding: 14px 16px;
            flex: 1;
            display: flex;
            flex-direction: column
        }

        .title {
            font-weight: 600;
            margin: 0 0 6px;
            font-size: 15px
        }

        .specs {
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 10px
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto
        }

        .price {
            font-weight: 700;
            font-size: 16px
        }

        .btn {
            background: var(--accent);
            color: #fff;
            padding: 8px 12px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-weight: 600
        }

        .btn.secondary {
            background: transparent;
            color: var(--accent);
            border: 1px solid rgba(11, 116, 222, 0.12)
        }

        .top-controls {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-top: 16px
        }

        .search {
            flex: 1;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid #e6eef9
        }

        footer {
            padding: 20px;
            text-align: center;
            color: var(--muted);
            font-size: 14px
        }
        /* modal */

        .modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(2, 6, 23, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px
        }

        .modal {
            background: #fff;
            max-width: 720px;
            width: 100%;
            border-radius: 12px;
            overflow: hidden
        }

        .modal .header {
            padding: 14px 18px;
            border-bottom: 1px solid #eef2f7;
            display: flex;
            justify-content: space-between
        }

        .modal .content {
            padding: 16px
        }

        @media (max-width:520px) {
            .card img {
                height: 150px
            }
        }
    </style>
</head>

<body>

    <nav>

        <h1> SPECIAL OFFERS </h1>
        <ul class="nav__links" id="nav-links">
            <a href="Laptops.html">Laptops</a>
            <a href="Accessories.html">Accessories</a>
            <a href="Printers.html">Printers</a>
            <a href="Desktops.html">Desktops</a>
            <a href="Business Solutions.html">Business Solutions</a>


        </ul>
    </nav>
    <header>
        <div class="container">
            <h1>Vince Investment & Solutions Ltd — Desktop Sales</h1>
            <p class="lead">Curated desktop PCs — real photos, clear specs, and easy contact/buy options.</p>
        </div>
    </header>

    <main class="container">
        <div class="top-controls">
            <input id="search" class="search" placeholder="Search model, CPU, RAM, price..." />
            <button class="btn" id="viewAll">View all</button>
            <button class="btn secondary" id="contactBtn">Contact Sales</button>
        </div>

        <!-- Product grid (10 desktops) -->
        <section class="grid" id="productGrid">

            <!-- Product template: each product uses a real image URL from Unsplash (free-to-use). -->

            <article class="card" data-name="Aegis Pro" data-price="120000" data-specs="Intel i7-9700, 16GB RAM, 512GB SSD, GTX 1660">
                <img src="https://hp.widen.net/content/8xq4kbk4i9/webp/8xq4kbk4i9.png?dpi=72&color=ffffff00&w=270" alt="Gaming desktop tower on desk">
                <div class="card-body">
                    <h3 class="title">Aegis Pro — Gaming Desktop</h3>
                    <div class="specs">Intel i7-9700 · 16GB RAM · 512GB NVMe SSD · GTX 1660</div>
                    <div class="price-row">
                        <div class="price">KSh 120,000</div>
                        <div>
                            <button class="btn" onclick="openModal(0)">View</button>
                            <button class="btn secondary" onclick="addToCart(0)">Buy</button>
                        </div>
                    </div>
                </div>
            </article>

            <article class="card" data-name="OfficeMax 240" data-price="45000" data-specs="Intel i5-10400, 8GB RAM, 256GB SSD, Integrated Graphics">
                <img src="https://hp.widen.net/content/tc3sjy32fc/webp/tc3sjy32fc.png?dpi=72&color=ffffff00&w=270" alt="Office desktop computer on white desk">
                <div class="card-body">
                    <h3 class="title">OfficeMax 240 — Workstation</h3>
                    <div class="specs">Intel i5-10400 · 8GB RAM · 256GB SSD · Integrated Graphics</div>
                    <div class="price-row">
                        <div class="price">KSh 45,000</div>
                        <div>
                            <button class="btn" onclick="openModal(1)">View</button>
                            <button class="btn secondary" onclick="addToCart(1)">Buy</button>
                        </div>
                    </div>
                </div>
            </article>

            <article class="card" data-name="Creator X" data-price="180000" data-specs="AMD Ryzen 9 3900X, 32GB RAM, 1TB SSD, RTX 3070">
                <img src="https://hp.widen.net/content/uaozmrtodg/webp/uaozmrtodg.png?dpi=72&color=ffffff00&w=270" alt="High-end desktop for creators">
                <div class="card-body">
                    <h3 class="title">Creator X — Content PC</h3>
                    <div class="specs">HP OmniStudio X All-in-One Desktop Next Gen AI 27-cs1065t PC, Windows 11 Home, 27", Intel® Core™ Ultra 7, 16GB RAM, 1TB SSD, FHD, Meteor silver</div>
                    <div class="price-row">
                        <div class="price">KSh 180,000</div>
                        <div>
                            <button class="btn" onclick="openModal(2)">View</button>
                            <button class="btn secondary" onclick="addToCart(2)">Buy</button>
                        </div>
                    </div>
                </div>
            </article>

            <article class="card" data-name="MiniPro S" data-price="65000" data-specs="Intel i3-10100, 8GB RAM, 256GB SSD, Small Form Factor">
                <img src="https://www.hp.com/wcsstore/hpusstore/Banners/bundles/A1VE5UA_Monitor_Kit_573x430.png?imwidth=270&imdensity=1" alt="Small form factor desktop setup">
                <div class="card-body">
                    <h3 class="title">HP Elite Mini 800 G9 Desktop PC + HP Series 3 Pro 23.8 inch FHD Monitor - 324pv Bundle</h3>
                    <div class="specs">Intel i3-10100 · 8GB RAM · 256GB SSD · SFF</div>
                    <div class="price-row">
                        <div class="price">KSh 65,000</div>
                        <div>
                            <button class="btn" onclick="openModal(3)">View</button>
                            <button class="btn secondary" onclick="addToCart(3)">Buy</button>
                        </div>
                    </div>
                </div>
            </article>

            <article class="card" data-name="EcoWork 500" data-price="38000" data-specs="Intel Pentium Gold, 4GB RAM, 128GB SSD">
                <img src="https://hp.widen.net/content/0d17ksgqlj/webp/0d17ksgqlj.png?dpi=72&color=ffffff00&w=270" alt="Affordable desktop PC in office">
                <div class="card-body">
                    <h3 class="title">HP All-in-One 27-cr0015m PC, Windows 11 Home, 27", AMD Ryzen™ 3, 8GB RAM, 256GB SSD, FHD, Jet black Windows 11 HomeAMD Ryzen™ 3 processorAMD Radeon™ Graphics8 GB memory;256 GB SSD storage27" diagonal FHD display B91P9AA#ABA
                    </h3>
                    <div class="specs">Intel Pentium Gold · 4GB RAM · 128GB SSD</div>
                    <div class="price-row">
                        <div class="price">KSh 38,000</div>
                        <div>
                            <button class="btn" onclick="openModal(4)">View</button>
                            <button class="btn secondary" onclick="addToCart(4)">Buy</button>
                        </div>
                    </div>
                </div>
            </article>

            <article class="card" data-name="Workhorse Z" data-price="95000" data-specs="Intel i7-10700, 16GB RAM, 1TB HDD + 256GB SSD">
                <img src="https://hp.widen.net/content/mr6rxb8teq/webp/mr6rxb8teq.png?dpi=72&color=ffffff00&w=270" alt="Reliable desktop workstation">
                <div class="card-body">
                    <h3 class="title">HP Elite Mini 800 G9 Desktop PC + HP Series 7 Pro 27 inch QHD Monitor - 727pq Bundle</h3>
                    <div class="specs">Intel i7-10700 · 16GB RAM · 1TB HDD + 256GB SSD</div>
                    <div class="price-row">
                        <div class="price">KSh 95,000</div>
                        <div>
                            <button class="btn" onclick="openModal(5)">View</button>
                            <button class="btn secondary" onclick="addToCart(5)">Buy</button>
                        </div>
                    </div>
                </div>
            </article>

            <article class="card" data-name="SilverLine 2" data-price="72000" data-specs="AMD Ryzen 5 3600, 16GB RAM, 512GB SSD, GTX 1650">
                <img src="https://hp.widen.net/content/lr7o2k7nxz/webp/lr7o2k7nxz.png?dpi=72&color=ffffff00&w=270" alt="Modern desktop tower with RGB">
                <div class="card-body">
                    <h3 class="title">HP EliteOne 840 G9 All-in-One PC Wolf Pro Security Edition Windows 11 ProIntel® Core™ i7-14700 (up to 5.4 GHz with Intel® Turbo Boost Technology, 33 MB L3 cache, 20 cores, 28 threads)16 GB memory; 512 GB SSD storage23.8" diagonal FHD
                        displayIntel® UHD Graphics A27JKUA#ABA
                    </h3>
                    <div class="specs">AMD Ryzen 5 3600 · 16GB RAM · 512GB NVMe · GTX 1650</div>
                    <div class="price-row">
                        <div class="price">KSh 72,000</div>
                        <div>
                            <button class="btn" onclick="openModal(6)">View</button>
                            <button class="btn secondary" onclick="addToCart(6)">Buy</button>
                        </div>
                    </div>
                </div>
            </article>

            <article class="card" data-name="Enterprise Q" data-price="220000" data-specs="Intel Xeon W, 64GB RAM, 2TB SSD, Quadro RTX 4000">
                <img src="https://hp.widen.net/content/zudehdceyf/webp/zudehdceyf.png?dpi=72&color=ffffff00&w=270" alt="High-end workstation for enterprise tasks">
                <div class="card-body">
                    <h3 class="title">HP OmniDesk Desktop AI M03-0173t PC, Windows 11 Home, Intel® Core™ Ultra 7, 16GB RAM, 2TB SSD, Dark wood Windows 11 HomeIntel® Core™ Ultra 7 processorIntel® Graphics16 GB memory;2 TB SSD storage B6NG2AA#ABA
                    </h3>
                    <div class="specs">Intel Xeon W · 64GB RAM · 2TB NVMe · Quadro RTX 4000</div>
                    <div class="price-row">
                        <div class="price">KSh 220,000</div>
                        <div>
                            <button class="btn" onclick="openModal(7)">View</button>
                            <button class="btn secondary" onclick="addToCart(7)">Buy</button>
                        </div>
                    </div>
                </div>
            </article>

            <article class="card" data-name="RetroBuild" data-price="54000" data-specs="Custom build, AMD Ryzen 3, 8GB RAM, 256GB SSD">
                <img src="https://www.hp.com/wcsstore/hpusstore/Banners/bundles/A1VF4UA_Monitor_Kit_573x430.png?imwidth=270&imdensity=1" alt="Custom built desktop PC on table">
                <div class="card-body">
                    <h3 class="title">HP Elite Mini 800 G9 Desktop PC + HP Series 7 Pro 27 inch QHD Monitor - 727pq Bundle HP Elite Mini 800 G9 Desktop PC, Windows 11 Pro, Intel® Core™ i5, 32GB RAM, 1TB SSD (A1VF4UA#ABA)HP Series 7 Pro 27 inch QHD Monitor - 727pq - 5ms
                        GtG (with overdrive); HDMI; DisplayPort; AMD FreeSync™; Adjustable stand; VESA mountable; Sustainable; Adaptive Sync; HP Eye Ease; IPS Black; HDR; Ambient light sensor (8J4D8AA#ABA) A1VF4UA_Monitor_Kit
                    </h3>
                    <div class="specs">AMD Ryzen 3 · 8GB RAM · 256GB SSD · Custom Case</div>
                    <div class="price-row">
                        <div class="price">KSh 54,000</div>
                        <div>
                            <button class="btn" onclick="openModal(8)">View</button>
                            <button class="btn secondary" onclick="addToCart(8)">Buy</button>
                        </div>
                    </div>
                </div>
            </article>

            <article class="card" data-name="SilentOne" data-price="88000" data-specs="Intel i5-12400, 16GB RAM, 1TB SSD, Silent cooled">
                <img src="https://hp.widen.net/content/uaozmrtodg/webp/uaozmrtodg.png?dpi=72&color=ffffff00&w=270" alt="Sleek silent desktop tower">
                <div class="card-body">
                    <h3 class="title">HP OmniStudio X All-in-One Desktop Next Gen AI 27-cs0000t PC 27" Copilot+ PCCopilot+ PC Windows 11 Home StandardIntel® Core™ Ultra 5 226V (up to 4.5 GHz, 8 MB L3 cache, 8 cores, 8 threads) Intel® AI Boost (40 NPU TOPS) + Intel® Arc™
                        Graphics + 16 GB LPDDR5X-8533 MT/s68.6 cm (27") diagonal, FHD (1920 x 1080), IPS, thre</h3>
                    <div class="specs">Intel i5-12400 · 16GB RAM · 1TB SSD · Quiet Cooling</div>
                    <div class="price-row">
                        <div class="price">KSh 88,000</div>
                        <div>
                            <button class="btn" onclick="openModal(9)">View</button>
                            <button class="btn secondary" onclick="addToCart(9)">Buy</button>
                        </div>
                    </div>
                </div>
            </article>

        </section>
    </main>

    <!-- modal + simple cart feedback -->
    <div id="modalBackdrop" class="modal-backdrop" onclick="closeModal(event)">
        <div class="modal" role="dialog" aria-modal="true" onclick="event.stopPropagation()">
            <div class="header">
                <strong id="modalTitle">Product</strong>
                <button class="btn secondary" onclick="closeModal()">Close</button>
            </div>
            <div class="content" id="modalContent">
                <!-- populated by JS -->
            </div>
        </div>
    </div>

    <footer>
        <div class="container">Vince Investment & Solutions Ltd — Contact: +254 796411804 | Email: okothden99@gmail.com</div>
    </footer>

    <script>
        const products = Array.from(document.querySelectorAll('#productGrid .card'));

        function openModal(index) {
            const p = products[index];
            const title = p.dataset.name;
            const price = p.dataset.price;
            const specs = p.dataset.specs;
            const img = p.querySelector('img').src;
            document.getElementById('modalTitle').textContent = title;
            document.getElementById('modalContent').innerHTML = `
        <div style="display:flex;gap:14px;flex-wrap:wrap">
          <img src="${img}" alt="${title}" style="width:280px;height:180px;object-fit:cover;border-radius:8px">
          <div style="flex:1;min-width:220px">
            <p style="margin:0 0 8px;font-weight:600">${title}</p>
            <p style="margin:0 0 8px;color:var(--muted)">${specs}</p>
            <p style="margin:0 0 12px;font-weight:700">KSh ${Number(price).toLocaleString('en-KE')}</p>
            <p style="margin:0 0 12px">For purchases, contact our sales team or click Buy to add to cart.</p>
            <div style="display:flex;gap:8px">
              <button class="btn" onclick="checkout(${index})">Buy now</button>
              <button class="btn secondary" onclick="contactSales()">Contact Sales</button>
            </div>
          </div>
        </div>
      `;
            document.getElementById('modalBackdrop').style.display = 'flex';
        }

        function closeModal(e) {
            if (e && e.target && e.target.id !== 'modalBackdrop') return;
            document.getElementById('modalBackdrop').style.display = 'none';
        }

        function addToCart(index) {
            const p = products[index];
            alert(`${p.dataset.name} added to cart. Contact sales to complete payment.`);
        }

        function checkout(index) {
            const p = products[index];
            // In a real site you'd connect to payment / order system. We'll open mailto with prefilled details.
            const subject = encodeURIComponent(`Order enquiry: ${p.dataset.name}`);
            const body = encodeURIComponent(`Hello Vince sales team,%0D%0A%0D%0AI'd like to purchase the following desktop:%0D%0A%0D%0AProduct: ${p.dataset.name}%0D%0ASpecs: ${p.dataset.specs}%0D%0AUnit price: KSh ${p.dataset.price}%0D%0AQuantity: 1%0D%0A%0D%0APlease advise on payment & delivery.%0D%0A%0D%0AThank you.`);
            window.location.href = `mailto:sales@vinceinvest.co.ke?subject=${subject}&body=${body}`;
        }

        function contactSales() {
            window.location.href = 'mailto:okothden99@gmail.com?subject=Sales%20Enquiry';
        }

        // Search/filter
        document.getElementById('search').addEventListener('input', (e) => {
            const q = e.target.value.toLowerCase();
            products.forEach(card => {
                const name = card.dataset.name.toLowerCase();
                const specs = card.dataset.specs.toLowerCase();
                const price = card.dataset.price.toLowerCase();
                card.style.display = (name.includes(q) || specs.includes(q) || price.includes(q)) ? '' : 'none';
            })
        });

        document.getElementById('contactBtn').addEventListener('click', contactSales);
        document.getElementById('viewAll').addEventListener('click', () => {
            document.getElementById('search').value = '';
            document.getElementById('search').dispatchEvent(new Event('input'));
        });
    </script>
</body>

</html>