Help
RSS
API
Feed
Maltego
Contact
Domain > bintangcollection.com
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2015-07-13
54.84.74.52
(
ClassC
)
2026-01-05
103.229.73.37
(
ClassC
)
Port 80
HTTP/1.1 200 OKConnection: Keep-AliveKeep-Alive: timeout5, max100Cache-Control: public, max-age0Expires: Mon, 05 Jan 2026 02:19:04 GMTContent-Type: text/htmlLast-Modified: Tue, 11 Nov 2025 08:04:47 GMTAccept-Ranges: bytesContent-Length: 50939Date: Mon, 05 Jan 2026 02:19:04 GMTServer: LiteSpeedX-Powered-By: ExabytesVary: User-Agent,Accept-Encoding !DOCTYPE html>html langid>head> meta charsetUTF-8> meta nameviewport contentwidthdevice-width, initial-scale1.0> title>Bintang Collection - Katalog/title> script srchttps://cdn.tailwindcss.com>/script> link hrefhttps://fonts.googleapis.com/css2?familyPoppins:wght@300;400;500;600;700&displayswap relstylesheet> style> /* */ /* 1. KONFIGURASI TAILWIND & CSS KUSTOM */ /* */ html { font-family: Poppins, sans-serif; } .modal-blur { background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } .product-image { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; transition: transform 0.3s ease; } .product-card:hover .product-image { transform: scale(1.05); } /* ... kode CSS yang sudah ada ... */ .product-card:hover .product-image { transform: scale(1.05); } /* */ /* PERBAIKAN: TAMPILAN KHUSUS LAYAR TV POTRET (Max Width 1080px) */ /* */ /* Aturan ini menargetkan layar dengan lebar lebih dari 1024px tetapi lebih kecil dari batas max-w-7xl, dan orientasi potret. Kondisi ini mencakup TV 1080x1920 Anda. */ @media (max-width: 1344px) and (min-width: 1024px) and (orientation: portrait) { .container-full-tv { /* Memaksa konten menggunakan lebar penuh (100%) di TV Potret */ max-width: 100% !important; /* Menambahkan padding agar konten tidak mepet ke tepi layar 1080px */ padding-left: 2rem !important; padding-right: 2rem !important; } } /* Tambahkan aturan ini untuk layar Desktop/TV Horizontal yang sangat lebar (opsional) */ @media (min-width: 1920px) { .container-full-tv { max-width: 90% !important; padding-left: 4rem !important; padding-right: 4rem !important; } } /style> script> tailwind.config { theme: { extend: { colors: { navy: #0A1931, emas: #B8860B, }, } } } /script>/head>body classbg-gray-50 text-gray-800> header classsticky top-0 z-50 bg-white shadow-md/50> div classcontainer mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0 w-full> div classflex items-center space-x-2> div classflex items-center> img srcimages/logobintang.png altLogo Bintang Collection classh-8 md:h-10 w-auto mr-2> span classtext-xl md:text-2xl font-bold text-navy tracking-wider>Bintang Collection/span> /div> /div> div classflex items-center space-x-4 w-full md:w-auto> div classrelative flex-grow> input typetext idsearch-input placeholderCari produk... classw-full p-2 pl-4 border border-gray-200 rounded-lg text-sm md:text-base focus:ring-navy focus:border-navy transition duration-200 onkeyupfilterProducts()> /div> select idcategory-filter classp-2 border border-gray-200 rounded-lg text-sm md:text-base focus:ring-navy focus:border-navy transition duration-200 cursor-pointer> option valueSemua>Semua Kategori/option> /select> /div> /div> /header> main classcontainer mx-auto px-4 py-8 w-full> h1 classtext-3xl font-semibold mb-8 text-navy>Koleksi Katalog/h1> div idproduct-catalog classgrid gap-8 grid-cols-2 md:grid-cols-3 lg:grid-cols-4> /div> div idempty-message classtext-center py-20 hidden> p classtext-2xl font-semibold text-gray-600>Produk tidak ditemukan. 😥/p> p classtext-gray-500 mt-2>Coba kata kunci lain atau ubah filter kategori./p> /div> div idpagination-controls classflex justify-center items-center mt-12 space-x-4> button idprev-btn classpx-6 py-2 bg-white border border-gray-300 rounded-full text-navy font-medium shadow-sm hover:bg-gray-100 transition duration-300 disabled:opacity-50 disabled> ← Sebelumnya /button> div idpage-numbers classflex space-x-2> /div> button idnext-btn classpx-6 py-2 bg-navy text-white rounded-full font-medium shadow-md hover:bg-opacity-90 transition duration-300 disabled:opacity-50> Selanjutnya → /button> /div> /main> div idproduct-modal classfixed inset-0 hidden items-center justify-center z-100 modal-blur p-4 transition-opacity duration-300 opacity-0 onclickcloseModal(event)> div classbg-white rounded-xl shadow-2xl w-full max-w-5xl h-auto max-h-90vh overflow-y-auto transform scale-95 transition-all duration-300 onclickevent.stopPropagation()> button onclickcloseModal() classabsolute top-4 right-4 text-gray-700 hover:text-navy transition duration-200 z-50 p-2 bg-white rounded-full shadow-lg> svg classh-6 w-6 fillnone strokecurrentColor viewBox0 0 24 24 xmlnshttp://www.w3.org/2000/svg>path stroke-linecapround stroke-linejoinround stroke-width2 dM6 18L18 6M6 6l12 12>/path>/svg> /button> div idmodal-content classp-8 md:p-12> /div> /div> /div> script> // Data produk baru yang Anda berikan (RAW DATA) const newRawProducts { name: Kebaya Bordir, price: Rp 174.000, size: S-XXL, images: kebaya bordir w 1.jpg,kebaya bordir w 1.jpg,kebaya bordir w 2.jpg }, { name: Kebaya Metalik, price: Rp 185.000, size: S-XXL, images: kebaya metalik j 1.jpg,kebaya metalik j 1.jpg,kebaya metalik j 2.jpg,kebaya metalik j 3.jpg,kebaya metalik j 4.jpg,kebaya metalik j 5.jpg,kebaya metalik j 6.jpg,kebaya metalik j 7.jpg,kebaya metalik j 8.jpg,kebaya metalik j 9.jpg,kebaya metalik j 10.jpg,kebaya metalik j 11.jpg,kebaya metalik j 12.jpg,kebaya metalik j 13.jpg,kebaya metalik j 14.jpg,kebaya metalik j 15.jpg,kebaya metalik j 16.jpg,kebaya metalik j 17.jpg,kebaya metalik j 18.jpg }, { name: Kebaya hamil, price: Rp 149.000, size: S-XXL, images: kebaya hamil a 1.jpg,kebaya hamil a 1.jpg,kebaya hamil a 2.jpg,kebaya hamil a 3.jpg,kebaya hamil a 4.jpg,kebaya hamil a 5.jpg,kebaya hamil a 6.jpg,kebaya hamil a 7.jpg,kebaya hamil a 8.jpg,kebaya hamil a 9.jpg,kebaya hamil a 10.jpg,kebaya hamil a 11.jpg,kebaya hamil a 12.jpg,kebaya hamil a 13.jpg,kebaya hamil a 14.jpg,kebaya hamil a 15.jpg,kebaya hamil a 16.jpg }, { name: Kebaya hamil, price: Rp 149.000, size: M-XXL, images: kebaya hamil b 1.jpg,kebaya hamil b 1.jpg,kebaya hamil b 2.jpg,kebaya hamil b 3.jpg,kebaya hamil b 4.jpg }, { name: Kebaya Metalik, price: Rp 135.000, size: S-XXXL, images: kebaya metalik k 1.jpg,kebaya metalik k 1.jpg,kebaya metalik k 2.jpg }, { name: Selendang Obi, price: Rp 75.000, size: All Size, images: obi bordir a 1.jpg, obi bordir a 2.jpg,obi bordir a 3.jpg,obi bordir a 4.jpg,obi bordir a 5.jpg,obi bordir a 6.jpg,obi bordir a 7.jpg,obi bordir a 8.jpg,obi bordir a 9.jpg, obi bordir a 10.jpg,obi bordir a 11.jpg,obi bordir a 12.jpg }, { name: Kamen jadi Bordir, price: Rp 169.000, size: M-XXL, images: Kamen Bordir jadi g 1.jpg,Kamen Bordir jadi g 1.jpg, Kamen Bordir jadi g 2.jpg,Kamen Bordir jadi g 3.jpg,Kamen Bordir jadi g 4.jpg,Kamen Bordir jadi g 5.jpg,Kamen Bordir jadi g 6.jpg,Kamen Bordir jadi g 7.jpg,Kamen Bordir jadi g 8.jpg,Kamen Bordir jadi g 9.jpg, Kamen Bordir jadi g 10.jpg,Kamen Bordir jadi g 11.jpg,kamen bordir jadi g 12.jpg,Kamen Bordir jadi g 13.jpg,Kamen Bordir jadi g 14.jpg,Kamen Bordir jadi g 15.jpg,Kamen Bordir jadi g 16.jpg }, { name: Kebaya payet, price: Rp 199.000, size: S-XXL, images: kebaya payet metalik pdk a 1.jpg,kebaya payet metalik pdk a 1.jpg, kebaya payet metalik pdk a 2.jpg,kebaya payet metalik pdk a 3.jpg, kebaya payet metalik pdk a 4.jpg,kebaya payet metalik pdk a 5.jpg,kebaya payet metalik pdk a 6.jpg, kebaya payet metalik pdk a 7.jpg,kebaya payet metalik pdk a 8.jpg, kebaya payet metalik pdk a 9.jpg,kebaya payet metalik pdk a 10.jpg, kebaya payet metalik pdk a 11.jpg,kebaya payet metalik pdk a 12.jpg,kebaya payet metalik pdk a 13.jpg, kebaya payet metalik pdk a 14.jpg,kebaya payet metalik pdk a 15.jpg, kebaya payet metalik pdk a 16.jpg }, { name: Kamen Jaguar, price: Rp 99.000, size: L-XXXL, images: Kamen Jaguar a 1.jpg,Kamen Jaguar a 1.jpg, Kamen Jaguar a 2.jpg, Kamen Jaguar a 3.jpg, Kamen Jaguar a 4.jpg, Kamen Jaguar a 5.jpg, Kamen Jaguar a 6.jpg, Kamen Jaguar a 7.jpg, Kamen Jaguar a 8.jpg }, { name: Kamen Bordir, price: Rp 315.000, size: Lembaran, images: kamen bordir lem e 1.jpg,kamen bordir lem e 1.jpg, kamen bordir lem e 2.jpg,kamen bordir lem e 3.jpg, kamen bordir lem e 4.jpg,kamen bordir lem e 5.jpg, kamen bordir lem e 6.jpg,kamen bordir lem e 7.jpg, kamen bordir lem e 8.jpg,kamen bordir lem e 9.jpg, kamen bordir lem e 10.jpg,kamen bordir lem e 11.jpg, kamen bordir lem e 12.jpg,kamen bordir lem e 13.jpg, kamen bordir lem e 14.jpg,kamen bordir lem e 15.jpg, kamen bordir lem e 16.jpg,kamen bordir lem e 17.jpg, kamen bordir lem e 18.jpg,kamen bordir lem e 19.jpg, kamen bordir lem e 20.jpg }, { name: Kebaya Metalik, price: Rp 139.000, size: S-XXL, images: KEBAYA METALIK I 1.jpg,KEBAYA METALIK I 1.jpg,KEBAYA METALIK I 2.jpg }, { name: kebaya Metalik, price: Rp 144.000, size: S-XXL, images: kebaya santili b 1.jpg,kebaya santili b 1.jpg,kebaya santili b 2.jpg,kebaya santili b 3.jpg,kebaya santili b 4.jpg,kebaya santili b 5.jpg,kebaya santili b 6.jpg,kebaya santili b 7.jpg,kebaya santili b 8.jpg,kebaya santili b 9.jpg,kebaya santili b 10.jpg,kebaya santili b 11.jpg,kebaya santili b 12.jpg,kebaya santili b 13.jpg,kebaya santili b 14.jpg,kebaya santili b 15.jpg,kebaya santili b 16.jpg }, { name: kebaya santili, price: Rp 135.000, size: S-XXL, images: kebaya santili c 1.jpg,kebaya santili c 1.jpg,kebaya santili c 2.jpg,kebaya santili c 3.jpg,kebaya santili c 4.jpg,kebaya santili c 5.jpg,kebaya santili c 6.jpg,kebaya santili c 7.jpg,kebaya santili c 8.jpg,kebaya santili c 9.jpg,kebaya santili c 10.jpg,kebaya santili c 11.jpg,kebaya santili c 12.jpg,kebaya santili c 13.jpg,kebaya santili c 14.jpg,kebaya santili c 15.jpg,kebaya santili c 16.jpg }, { name: Kebaya Bordir, price: Rp 108.000, size: S-XXL, images: KEBAYA BORDIR V 1.jpg,KEBAYA BORDIR V 1.jpg,KEBAYA BORDIR V 2.jpg }, { name: Kebaya Brokat, price: Sold, size: M-XXL, images: KEBAYA BROKAT A 1.jpg,KEBAYA BROKAT A 1.jpg,KEBAYA BROKAT A 2.jpg,KEBAYA BROKAT A 3.jpg,KEBAYA BROKAT A 4.jpg }, { name: Kebaya Sifon, price: Rp 92.000, size: S-XXL, images: Kebaya Sifon a 1.jpg,Kebaya Sifon a 1.jpg, Kebaya Sifon a 2.jpg, Kebaya Sifon a 3.jpg, Kebaya Sifon a 4.jpg }, { name: Kebaya Sifon, price: Rp 92.000, size: S-XXL, images: Kebaya Sifon b 1.jpg,Kebaya Sifon b 1.jpg, Kebaya Sifon b 2.jpg, Kebaya Sifon b 3.jpg, Kebaya Sifon b 4.jpg }, { name: Kebaya Sifon, price: Rp 92.000, size: S-XXL, images: Kebaya Sifon c 1.jpg,Kebaya Sifon c 1.jpg }, { name: Kebaya Sifon, price: Rp 110.000, size: S-XXL, images: Kebaya Sifon D 1.jpg }, { name: kebaya santili, price: Rp 160.000, size: S-XXL, images: kebaya santili a 1.jpg }, { name: Kebaya Metalik, price: Rp 139.000, size: S-XXL, images: kebaya metalik a 1.jpg }, { name: Kebaya Metalik, price: Rp 139.000, size: S-XXL, images: KEBAYA METALIK B 1.jpg }, { name: Kebaya Metalik, price: Rp 141.000, size: S-XXL, images: KEBAYA METALIK C 1.jpg,KEBAYA METALIK C 1.jpg,KEBAYA METALIK C 2.jpg,KEBAYA METALIK C 3.jpg,KEBAYA METALIK C 4.jpg,KEBAYA METALIK C 5.jpg,KEBAYA METALIK C 6.jpg,KEBAYA METALIK C 7.jpg,KEBAYA METALIK C 8.jpg,KEBAYA METALIK C 9.jpg }, { name: Kebaya Metalik, price: Rp 158.000, size: S-XXL, images: KEBAYA METALIK D 1.jpg }, // Contoh diskon 15% { name: Kebaya Metalik, price: Rp 174.000, size: S-XXL, images: KEBAYA METALIK E 1.jpg,KEBAYA METALIK E 1.jpg,KEBAYA METALIK E 2.jpg,KEBAYA METALIK E 3.jpg,KEBAYA METALIK E 4.jpg,KEBAYA METALIK E 5.jpg,KEBAYA METALIK E 6.jpg,KEBAYA METALIK E 7.jpg,KEBAYA METALIK E 8.jpg,KEBAYA METALIK E 9.jpg }, { name: Kebaya Metalik, price: Rp 145.000, size: S-XXL, images: KEBAYA METALIK F 1.jpg,KEBAYA METALIK F 1.jpg,KEBAYA METALIK F 2.jpg,KEBAYA METALIK F 3.jpg,KEBAYA METALIK F 4.jpg }, { name: Kebaya Metalik, price: Rp 145.000, size: S-XXL, images: KEBAYA METALIK G 1.jpg }, { name: Kebaya Metalik, price: Rp 154.000, size: S-XXL, images: KEBAYA METALIK H 1.jpg,KEBAYA METALIK H 1.jpg,KEBAYA METALIK H 2.jpg }, { name: Fiori Anabella, price: Rp 595.000, size: Size : 32-42 (44 : Rp 654.500), images: anabella 1.jpg,anabella 1.jpg, anabella 2.jpg,anabella 3.jpg,anabella 4.jpg, anabella 5.jpg,anabella 6.jpg,anabella 7.jpg, anabella 8.jpg,anabella 9.jpg }, { name: Fiori Grazelia, price: Rp 790.000, size: Size : 32-42 (44 : Rp 869.000), images: grazelia 1.jpg,grazelia 1.jpg, grazelia 2.jpg,grazelia 3.jpg }, { name: Fiori Victoria, price: Rp 695.000, size: Size : 32-42 (44 : Rp 764.500), images: victoria 1.jpg,victoria 1.jpg, victoria 2.jpg,victoria 3.jpg,victoria 4.jpg }, { name: Fiori Lindia, price: Rp 575.000, size: Size : 32-42 (44 : Rp 620.000), images: lindia 1.jpg,lindia 1.jpg, lindia 2.jpg,lindia 3.jpg }, { name: Fiori Saskia, price: Rp 390.000, size: Size : 32-42 (44 : Rp 420.000), images: saskia 1.jpg,saskia 1.jpg, saskia 2.jpg }, // Contoh diskon 10% { name: Kamen jadi Bordir, price: Rp 158.000, size: M-XXXL, images: Kamen Bordir jadi a 1.jpg,Kamen Bordir jadi a 1.jpg, Kamen Bordir jadi a 2.jpg,Kamen Bordir jadi a 3.jpg,Kamen Bordir jadi a 4.jpg,Kamen Bordir jadi a 5.jpg,Kamen Bordir jadi a 6.jpg,Kamen Bordir jadi a 7.jpg,Kamen Bordir jadi a 8.jpg,Kamen Bordir jadi a 9.jpg, Kamen Bordir jadi a 10.jpg,Kamen Bordir jadi a 11.jpg,kamen bordir jadi a 12.jpg,Kamen Bordir jadi a 13.jpg,Kamen Bordir jadi a 14.jpg,Kamen Bordir jadi a 15.jpg }, { name: Kamen jadi Bordir, price: Rp 165.000, size: M-XXL, images: Kamen jadi Bordir b 1.jpg,Kamen jadi Bordir b 1.jpg, Kamen jadi Bordir b 2.jpg,Kamen jadi Bordir b 3.jpg,Kamen jadi Bordir b 4.jpg,Kamen jadi Bordir b 5.jpg,Kamen jadi Bordir b 6.jpg,Kamen jadi Bordir b 7.jpg,Kamen jadi Bordir b 8.jpg }, { name: Kamen jadi Bordir, price: Rp 175.000, size: M-XXL, images: KAMEN BORDIR JADI C 1.jpg,KAMEN BORDIR JADI C 1.jpg, KAMEN BORDIR JADI C 2.jpg,KAMEN BORDIR JADI C 3.jpg,KAMEN BORDIR JADI C 4.jpg,KAMEN BORDIR JADI C 5.jpg,KAMEN BORDIR JADI C 6.jpg,KAMEN BORDIR JADI C 7.jpg }, { name: Kamen jadi Bordir, price: Rp 175.000, size: M-XXL, images: KAMEN BORDIR JADI D 1.jpg,KAMEN BORDIR JADI D 1.jpg, KAMEN BORDIR JADI D 2.jpg,KAMEN BORDIR JADI D 3.jpg,KAMEN BORDIR JADI D 4.jpg,KAMEN BORDIR JADI D 5.jpg }, { name: Kamen jadi Bordir, price: Rp 184.000, size: M-XXL, images: KAMEN BORDIR JADI E 1.jpg,KAMEN BORDIR JADI E 1.jpg, KAMEN BORDIR JADI E 2.jpg,KAMEN BORDIR JADI E 3.jpg,KAMEN BORDIR JADI E 4.jpg,KAMEN BORDIR JADI E 5.jpg,KAMEN BORDIR JADI E 6.jpg,KAMEN BORDIR JADI E 7.jpg,KAMEN BORDIR JADI E 8.jpg }, { name: Kamen jadi Bordir, price: Rp 179.000, size: M-XXL, images: KAMEN BORDIR JADI F 1.jpg,KAMEN BORDIR JADI F 1.jpg, KAMEN BORDIR JADI F 2.jpg,KAMEN BORDIR JADI F 3.jpg,KAMEN BORDIR JADI F 4.jpg,KAMEN BORDIR JADI F 5.jpg,KAMEN BORDIR JADI F 6.jpg,KAMEN BORDIR JADI F 7.jpg,KAMEN BORDIR JADI F 8.jpg }, { name: Kamen Jaguar, price: Rp 99.000, size: L-XXXL, images: Kamen Jaguar bunga 1.jpg,Kamen Jaguar bunga 1.jpg, Kamen Jaguar bunga 2.jpg, Kamen Jaguar bunga 3.jpg, Kamen Jaguar bunga 4.jpg, Kamen Jaguar bunga 5.jpg, Kamen Jaguar bunga 6.jpg, Kamen Jaguar bunga 7.jpg, Kamen Jaguar bunga 8.jpg, Kamen Jaguar bunga 9.jpg, Kamen Jaguar bunga 10.jpg, Kamen Jaguar bunga 11.jpg, Kamen Jaguar bunga 12.jpg }, { name: Kamen Jaguar, price: Rp 99.000, size: L-XXXL, images: Kamen Jaguar mawar 1.jpg,Kamen Jaguar mawar 1.jpg, Kamen Jaguar mawar 2.jpg, Kamen Jaguar mawar 3.jpg, Kamen Jaguar mawar 4.jpg, Kamen Jaguar mawar 5.jpg, Kamen Jaguar mawar 6.jpg }, { name: Kamen Jaguar, price: Rp 99.000, size: L-XXL, images: Kamen Jaguar jepun 1.jpg,Kamen Jaguar jepun 1.jpg, Kamen Jaguar jepun 2.jpg, Kamen Jaguar jepun 3.jpg, Kamen Jaguar jepun 4.jpg, Kamen Jaguar jepun 5.jpg, Kamen Jaguar jepun 6.jpg, Kamen Jaguar jepun 7.jpg, Kamen Jaguar jepun 8.jpg, Kamen Jaguar jepun 9.jpg, Kamen Jaguar jepun 10.jpg, Kamen Jaguar jepun 11.jpg, Kamen Jaguar jepun 12.jpg }, { name: Couple Bangket, price: Rp 419.000, size: All Size, images: Couple blangket 1.jpg, Couple blangket 2.jpg, Couple blangket 3.jpg, Couple blangket 4.jpg }, { name: Couple Batik, price: Rp 189.000, size: All Size, images: Couple Batik a 1.jpg,Couple Batik a 1.jpg, Couple Batik a 2.jpg, Couple Batik a 3.jpg, Couple Batik a 4.jpg, Couple Batik a 5.jpg, Couple Batik a 6.jpg }, { name: Couple Batik, price: Rp 184.000, size: All Size, images: COUPLE BATIK C 1.jpg,COUPLE BATIK C 1.jpg, COUPLE BATIK C 2.jpg, COUPLE BATIK C 3.jpg, COUPLE BATIK C 4.jpg }, { name: Couple Batik, price: Rp 184.000, size: All Size, images: COUPLE BATIK D 1.jpg,COUPLE BATIK D 1.jpg, COUPLE BATIK D 2.jpg, COUPLE BATIK D 3.jpg }, { name: Couple Batik, price: Rp 184.000, size: All Size, images: COUPLE BATIK E 1.jpg,COUPLE BATIK E 1.jpg, COUPLE BATIK E 2.jpg, COUPLE BATIK E 3.jpg, COUPLE BATIK E 4.jpg }, { name: Couple Bordir, price: Rp 325.000, size: All Size, images: Couple Bordir a 1.jpg,Couple Bordir a 1.jpg, Couple Bordir a 2.jpg, Couple Bordir a 3.jpg, Couple Bordir a 4.jpg, Couple Bordir a 5.jpg, Couple Bordir a 6.jpg, Couple Bordir a 7.jpg }, { name: Saput Udeng Bordir, price: Rp 190.000, size: All Size, images: Saput Udeng bordir a 1.jpg,Saput Udeng bordir a 1.jpg, Saput Udeng bordir a 2.jpg, Saput Udeng bordir a 3.jpg, Saput Udeng bordir a 4.jpg, Saput Udeng bordir a 5.jpg }, { name: Kain Bordir, price: Rp 132.000, size: All Size, images: Kain Bordir a 1.jpg,Kain Bordir a 1.jpg, Kain Bordir a 2.jpg, Kain Bordir a 3.jpg, Kain Bordir a 4.jpg, Kain Bordir a 5.jpg }, { name: Kain Bordir, price: Rp 92.000, size: All Size, images: KAIN BORDIR B 1.jpg,KAIN BORDIR B 1.jpg, KAIN BORDIR B 2.jpg, KAIN BORDIR B 3.jpg, KAIN BORDIR B 4.jpg, KAIN BORDIR B 5.jpg }, { name: Kain Bordir, price: Rp 92.000, size: All Size, images: KAIN BORDIR C 1.jpg,KAIN BORDIR C 1.jpg, KAIN BORDIR C 2.jpg, KAIN BORDIR C 3.jpg, KAIN BORDIR C 4.jpg, KAIN BORDIR C 5.jpg }, { name: Kain Bordir, price: Rp 92.000, size: All Size, images: KAIN BORDIR D 1.jpg,KAIN BORDIR D 1.jpg, KAIN BORDIR D 2.jpg, KAIN BORDIR D 3.jpg, KAIN BORDIR D 4.jpg, KAIN BORDIR D 5.jpg }, { name: Kain Metalik, price: Rp 179.000, size: All Size, images: KAIN METALIK A 1.jpg,KAIN METALIK A 1.jpg, KAIN METALIK A 2.jpg, KAIN METALIK A 3.jpg, KAIN METALIK A 4.jpg, KAIN METALIK A 5.jpg,KAIN METALIK A 6.jpg, KAIN METALIK A 7.jpg, KAIN METALIK A 8.jpg, KAIN METALIK A 9.jpg }, { name: Kain Metalik, price: Rp 182.000, size: All Size, images: KAIN METALIK B 1.jpg,KAIN METALIK B 1.jpg, KAIN METALIK B 2.jpg }, { name: Kebaya Bordir, price: Rp 165.000, size: S-XXL, images: kebaya bordir a 1.jpg,kebaya bordir a 1.jpg, kebaya bordir a 2.jpg, kebaya bordir a 3.jpg, kebaya bordir a 4.jpg, kebaya bordir a 5.jpg, kebaya bordir a 6.jpg, kebaya bordir a 7.jpg, kebaya bordir a 8.jpg, kebaya bordir a 9.jpg, kebaya bordir a 10.jpg, kebaya bordir a 11.jpg, kebaya bordir a 12.jpg }, { name: Kebaya Bordir, price: Rp 174.000, size: S-XXL, images: kebaya bordir b 1.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: kebaya bordir c 1.jpg,kebaya bordir c 1.jpg,kebaya bordir c 2.jpg,kebaya bordir c 3.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: kebaya bordir d 1.jpg,kebaya bordir d 1.jpg, kebaya bordir d 2.jpg, kebaya bordir d 3.jpg, kebaya bordir d 4.jpg, kebaya bordir d 5.jpg, kebaya bordir d 6.jpg, kebaya bordir d 7.jpg, kebaya bordir d 8.jpg, kebaya bordir d 9.jpg, kebaya bordir d 10.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: kebaya bordir e 1.jpg }, { name: Kebaya Bordir, price: Rp 174.000, size: S-XXL, images: kebaya bordir f 1.jpg,kebaya bordir f 1.jpg, kebaya bordir f 2.jpg, kebaya bordir f 3.jpg, kebaya bordir f 4.jpg, kebaya bordir f 5.jpg, kebaya bordir f 6.jpg }, { name: Kebaya Bordir, price: Rp 119.000, size: S-XXL, images: kebaya bordir g 1.jpg,kebaya bordir g 1.jpg, kebaya bordir g 2.jpg, kebaya bordir g 3.jpg, kebaya bordir g 4.jpg }, { name: Kebaya Bordir, price: Rp 182.000, size: S-XXL, images: KEBAYA BORDIR I 1.jpg,KEBAYA BORDIR I 1.jpg, KEBAYA BORDIR I 2.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: KEBAYA BORDIR J 1.jpg }, { name: Kebaya Bordir, price: Rp 168.000, size: S-XXL, images: KEBAYA BORDIR K 1.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: KEBAYA BORDIR L 1.jpg }, { name: Kebaya Bordir, price: Rp 99.000, size: S-XXL, images: KEBAYA BORDIR M 1.jpg,KEBAYA BORDIR M 1.jpg,KEBAYA BORDIR M 2.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: KEBAYA BORDIR N 1.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: KEBAYA BORDIR O 1.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: KEBAYA BORDIR P 1.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: KEBAYA BORDIR Q 1.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: KEBAYA BORDIR R 1.jpg }, { name: Kebaya Bordir, price: Sold, size: S-XXL, images: KEBAYA BORDIR S 1.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: KEBAYA BORDIR T 1.jpg }, { name: Kebaya Bordir, price: Rp 139.000, size: S-XXL, images: KEBAYA BORDIR U 1.jpg }, { name: Kebaya Lukis, price: Rp 108.000, size: S-XXL, images: kebaya lukis a 1.jpg,kebaya lukis a 1.jpg, kebaya lukis a 2.jpg }, { name: Kebaya Lukis, price: Rp 149.000, size: S-XXL, images: kebaya lukis b 1.jpg,kebaya lukis b 1.jpg, kebaya lukis b 2.jpg,kebaya lukis b 3.jpg, kebaya lukis b 4.jpg,kebaya lukis b 5.jpg, kebaya lukis b 6.jpg }, { name: Kebaya Lukis, price: Rp 129.000, size: S-XXL, images: KEBAYA LUKIS C 1.jpg,KEBAYA LUKIS C 1.jpg, KEBAYA LUKIS C 2.jpg,KEBAYA LUKIS C 3.jpg, KEBAYA LUKIS C 4.jpg,KEBAYA LUKIS C 5.jpg, KEBAYA LUKIS C 6.jpg, KEBAYA LUKIS C 7.jpg }, { name: Kebaya payet kartini, price: Rp 285.000, size: S-XL, images: kebaya payet metalik kartini a 1.jpg,kebaya payet metalik kartini a 1.jpg, kebaya payet metalik kartini a 2.jpg,kebaya payet metalik kartini a 3.jpg, kebaya payet metalik kartini a 4.jpg,kebaya payet metalik kartini a 5.jpg,kebaya payet metalik kartini a 6.jpg,kebaya payet metalik kartini a 7.jpg }, { name: Kebaya payet kartini, price: Rp 215.000, size: S-XL, images: kebaya payet metalik kartini b 1.jpg,kebaya payet metalik kartini b 1.jpg, kebaya payet metalik kartini b 2.jpg,kebaya payet metalik kartini b 3.jpg, kebaya payet metalik kartini b 4.jpg,kebaya payet metalik kartini b 5.jpg }, { name: Kamen Sutra Paris, price: Rp 99.000, size: Lembaran, images: kamen sutra paris a 1.jpg,kamen sutra paris a 1.jpg, kamen sutra paris a 2.jpg,kamen sutra paris a 3.jpg, kamen sutra paris a 4.jpg }, { name: Kamen Sutra Paris, price: Rp 199.000, size: Lembaran, images: kamen sutra paris b 1.jpg,kamen sutra paris b 1.jpg, kamen sutra paris b 2.jpg,kamen sutra paris b 3.jpg, kamen sutra paris b 4.jpg,kamen sutra paris b 5.jpg, kamen sutra paris b 6.jpg }, { name: Kamen Sutra Paris, price: Rp 195.000, size: Lembaran, images: kamen sutra paris c 1.jpg,kamen sutra paris c 1.jpg, kamen sutra paris c 2.jpg,kamen sutra paris c 3.jpg, kamen sutra paris c 4.jpg,kamen sutra paris c 5.jpg, kamen sutra paris c 6.jpg,kamen sutra paris c 7.jpg, kamen sutra paris c 8.jpg,kamen sutra paris c 9.jpg, kamen sutra paris c 10.jpg,kamen sutra paris c 11.jpg, kamen sutra paris c 12.jpg }, { name: Kamen Sutra Paris, price: Rp 99.000, size: Lembaran, images: kamen sutra paris d 1.jpg,kamen sutra paris d 1.jpg, kamen sutra paris d 2.jpg,kamen sutra paris d 3.jpg, kamen sutra paris d 4.jpg,kamen sutra paris d 5.jpg, kamen sutra paris d 6.jpg,kamen sutra paris d 7.jpg, kamen sutra paris d 8.jpg,kamen sutra paris d 9.jpg, kamen sutra paris d 10.jpg,kamen sutra paris d 11.jpg, kamen sutra paris d 12.jpg,kamen sutra paris d 13.jpg, kamen sutra paris d 14.jpg }, { name: Kamen Sutra Paris, price: Rp 99.000, size: Lembaran, images: kamen sutra paris e 1.jpg,kamen sutra paris e 1.jpg, kamen sutra paris e 2.jpg,kamen sutra paris e 3.jpg, kamen sutra paris e 4.jpg,kamen sutra paris e 5.jpg }, { name: Kamen Sutra Paris, price: Rp 225.000, size: Lembaran, images: KAMEN SUTRA PARIS F 1.jpg }, { name: Kamen Bordir, price: Rp 228.000, size: Lembaran, images: kamen bordir lem a 1.jpg,kamen bordir lem a 1.jpg, kamen bordir lem a 2.jpg,kamen bordir lem a 3.jpg, kamen bordir lem a 4.jpg,kamen bordir lem a 5.jpg, kamen bordir lem a 6.jpg,kamen bordir lem a 7.jpg, kamen bordir lem a 8.jpg,kamen bordir lem a 9.jpg, kamen bordir lem a 10.jpg,kamen bordir lem a 11.jpg, kamen bordir lem a 12.jpg,kamen bordir lem a 13.jpg, kamen bordir lem a 14.jpg,kamen bordir lem a 15.jpg, kamen bordir lem a 16.jpg }, { name: Kamen Bordir, price: Rp 385.000, size: Lembaran, images: kamen bordir lem b 1.jpg,kamen bordir lem b 1.jpg, kamen bordir lem b 2.jpg,kamen bordir lem b 3.jpg }, { name: Kamen Bordir, price: Rp 149.000, size: Lembaran, images: KAMEN LEM BORDIR C 1.jpg,KAMEN LEM BORDIR C 1.jpg, KAMEN LEM BORDIR C 2.jpg,KAMEN LEM BORDIR C 3.jpg,KAMEN LEM BORDIR C 4.jpg, KAMEN LEM BORDIR C 5.jpg,KAMEN LEM BORDIR C 6.jpg,KAMEN LEM BORDIR C 7.jpg }, { name: Kamen Bordir, price: Rp 165.000, size: Lembaran, images: KAMEN LEM BORDIR D 1.jpg,KAMEN LEM BORDIR D 1.jpg, KAMEN LEM BORDIR D 2.jpg,KAMEN LEM BORDIR D 3.jpg,KAMEN LEM BORDIR D 4.jpg, KAMEN LEM BORDIR D 5.jpg, discount_percent: 5 }, { name: Kamen Endek tretes, price: Rp 199.000, size: Lembaran, images: KAMEN ENDEK TRETES B 1.jpg,KAMEN ENDEK TRETES B 1.jpg, KAMEN ENDEK TRETES B 2.jpg,KAMEN ENDEK TRETES B 3.jpg, KAMEN ENDEK TRETES B 4.jpg,KAMEN ENDEK TRETES B 5.jpg, KAMEN ENDEK TRETES B 6.jpg,KAMEN ENDEK TRETES B 7.jpg, KAMEN ENDEK TRETES B 8.jpg }, { name: Kamen Endek, price: Rp 435.000, size: Lembaran, images: kamen endek a 1.jpg,kamen endek a 1.jpg, kamen endek a 2.jpg }, { name: Kamen Plisket, price: Rp 110.000, size: M-XXL, images: KAMEN PLISKET A 1.jpg,KAMEN PLISKET A 1.jpg, KAMEN PLISKET A 2.jpg,KAMEN PLISKET A 3.jpg, KAMEN PLISKET A 4.jpg,KAMEN PLISKET A 5.jpg, KAMEN PLISKET A 6.jpg }, { name: Safari Premium, price: Rp 465.000, size: M-XXL, images: SAFARI PREMIUM A 1.jpg,SAFARI PREMIUM A 1.jpg,SAFARI PREMIUM A 2.jpg }, { name: Safari Premium, price: Rp 465.000, size: M-XXL, images: SAFARI PREMIUM B 1.jpg,SAFARI PREMIUM B 1.jpg,SAFARI PREMIUM B 2.jpg }, { name: Safari Premium, price: Rp 165.000, size: M-XXL, images: SAFARI PREMIUM C 1.jpg,SAFARI PREMIUM C 1.jpg,SAFARI PREMIUM C 1.jpg,SAFARI PREMIUM C 2.jpg,SAFARI PREMIUM C 3.jpg,SAFARI PREMIUM C 4.jpg }, { name: KEMEJA DEWASA, price: Rp 149.000, size: M-XXXL, images: KEMEJA DEWASA A 1.jpg,KEMEJA DEWASA A 1.jpg,KEMEJA DEWASA A 2.jpg }, { name: KEMEJA DEWASA, price: Rp 132.000, size: M-XXL, images: KEMEJA DEWASA B 1.jpg,KEMEJA DEWASA B 1.jpg,KEMEJA DEWASA B 2.jpg }, { name: KEMEJA DEWASA, price: Rp 141.000, size: M-XXL, images: KEMEJA DEWASA C 1.jpg,KEMEJA DEWASA C 1.jpg,KEMEJA DEWASA C 2.jpg,KEMEJA DEWASA C 3.jpg,KEMEJA DEWASA C 4.jpg,KEMEJA DEWASA C 5.jpg,KEMEJA DEWASA C 6.jpg }, { name: KEMEJA DEWASA, price: Rp 158.000, size: M-XXL, images: KEMEJA DEWASA D 1.jpg,KEMEJA DEWASA D 1.jpg,KEMEJA DEWASA D 2.jpg,KEMEJA DEWASA D 3.jpg,KEMEJA DEWASA D 4.jpg,KEMEJA DEWASA D 5.jpg,KEMEJA DEWASA D 6.jpg }, ; // --- 1. Fungsi Konversi Data Baru --- const convertSizeToArray (sizeString) > { if (sizeString.includes(-)) { const start, end sizeString.split(-); if (start S && end XXL) return S, M, L, XL, XXL; if (start M && end XXL) return M, L, XL, XXL; if (start M && end XXXL) return M, L, XL, XXL, XXXL; if (start S && end XL) return S, M, L, XL; if (start L && end XXXL) return L, XL, XXL, XXXL; if (start L && end XXL) return L, XL, XXL; } return sizeString; // Contoh: All Size, Lembaran }; const guessCategory (name) > { const lowerName name.toLowerCase(); if (lowerName.includes(kebaya)) return Kebaya; if (lowerName.includes(kamen)) return Kamen; if (lowerName.includes(kain)) return kain; if (lowerName.includes(fiori)) return longtorso; if (lowerName.includes(couple)) return Set Couple; if (lowerName.includes(udeng) || lowerName.includes(saput)) return Udeng; if (lowerName.includes(safari) || lowerName.includes(kemeja)) return Pria; return Lainnya; }; const formatImagePath (imgName) > { const cleanName imgName.startsWith(images/) ? imgName.substring(7) : imgName; return `images/${cleanName}`; }; let nextId 1; const productsData newRawProducts.map(raw > { const isSold raw.price.toLowerCase() sold; const discount raw.discount_percent || 0; const priceString raw.price.split(-)0.trim(); const priceClean isSold ? 0 : parseInt(priceString.replace(Rp, ).replace(/\./g, ).trim()); let discountedPrice priceClean; if (priceClean > 0 && discount > 0) { discountedPrice Math.round(priceClean * (1 - discount / 100)); } const product { id: nextId++, nama: raw.name + (isSold ? (SOLD OUT) : ), jenis: guessCategory(raw.name), harga_normal: priceClean, diskon_persen: discount, harga_diskon: discountedPrice, ukuran_tersedia: convertSizeToArray(raw.size), // Variasi tetap disimpan meskipun produk sold foto_utama: raw.images.length > 0 ? formatImagePath(raw.images0) : https://via.placeholder.com/400x500/A9A9A9/FFFFFF?textNO+IMAGE, foto_varian: raw.images.slice(1).map(formatImagePath) }; if (isSold && raw.images.length 0) { product.foto_utama https://via.placeholder.com/400x500/A9A9A9/FFFFFF?textSOLD+OUT; } return product; }); // --- Akhir Pemrosesan Data Produk --- const catalogElement document.getElementById(product-catalog); const modalElement document.getElementById(product-modal); const modalContentElement document.getElementById(modal-content); const emptyMessageElement document.getElementById(empty-message); const prevBtn document.getElementById(prev-btn); const nextBtn document.getElementById(next-btn); const categoryFilter document.getElementById(category-filter); const searchInput document.getElementById(search-input); const pageNumbersContainer document.getElementById(page-numbers); const productsPerPage 20; let currentPage 1; let filteredProducts productsData; const waNumber 6287798799100; // --- 5.0. FUNGSI FILTER UTAMA --- window.filterProducts () > { const selectedCategory categoryFilter.value; const searchTerm searchInput.value.toLowerCase().trim(); let results productsData; // 1. Filter Kategori if (selectedCategory ! Semua) { results results.filter(p > p.jenis selectedCategory); } // 2. Filter Pencarian Teks if (searchTerm) { results results.filter(p > p.nama.toLowerCase().includes(searchTerm) || p.jenis.toLowerCase().includes(searchTerm) ); } filteredProducts results; currentPage 1; renderCatalog(filteredProducts); }; // --- 5.1. Fungsi Format Harga (Rupiah) --- const formatRupiah (number) > { if (number 0) return SOLD OUT; return new Intl.NumberFormat(id-ID, { style: currency, currency: IDR, minimumFractionDigits: 0 }).format(number); }; // --- 5.2. Render Card Produk --- const renderProductCard (product) > { const isDiscount product.diskon_persen > 0; const isSold product.harga_normal 0; let priceDisplay; if (isSold) { priceDisplay `p classtext-xl font-bold text-red-600>SOLD OUT/p>`; } else if (isDiscount) { priceDisplay `p classtext-sm text-gray-500 line-through>${formatRupiah(product.harga_normal)}/p> div classflex items-center justify-between> p classtext-xl font-bold text-red-600>${formatRupiah(product.harga_diskon)}/p> /div>`; } else { priceDisplay `p classtext-xl font-bold text-navy>${formatRupiah(product.harga_normal)}/p>`; } const discountBadge (isDiscount && !isSold) ? `span classabsolute top-2 right-2 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg>DISC ${product.diskon_persen}%/span>` : (isSold ? span classabsolute top-2 right-2 bg-gray-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg>HABIS/span> : ); return ` div classproduct-card bg-white p-3 cursor-pointer ${isSold ? opacity-70 : } onclickopenModal(${product.id})> div classoverflow-hidden mb-3 relative> img src${product.foto_utama} alt${product.nama} classproduct-image w-full> ${discountBadge} /div> div classspace-y-1> p classtext-sm font-medium text-gray-500>${product.jenis}/p> h3 classtext-lg font-semibold text-gray-800 truncate>${product.nama.replace( (SOLD OUT), )}/h3> div classflex space-x-1.5 pt-1 flex-wrap> ${product.ukuran_tersedia.map(size > `span classtext-xs font-medium px-2 py-0.5 border border-gray-300 rounded-md text-gray-700 mb-1>${size}/span>`).join()} /div> div classpt-2>${priceDisplay}/div> /div> /div> `; }; // --- 5.3.1. Fungsi Render Penomoran Halaman (DIREVISI) --- const renderPageNumbers (totalPages) > { pageNumbersContainer.innerHTML ; const maxPageButtons 7; // Batas maksimal tombol nomor halaman yang terlihat // Helper untuk membuat tombol nomor halaman const createPageButton (pageNumber, isActive false) > { const button document.createElement(button); button.textContent pageNumber; button.className `px-3 py-1 rounded-lg text-sm font-semibold transition duration-200`; if (isActive) { button.classList.add(bg-navy, text-white, shadow-md); } else { button.classList.add(bg-gray-200, text-gray-700, hover:bg-gray-300); button.onclick () > goToPage(pageNumber); } return button; }; // Helper untuk membuat titik-titik const createEllipsis () > { const span document.createElement(span); span.textContent ...; span.className px-3 py-1 text-gray-500 font-semibold; return span; }; // Jika total halaman kecil, tampilkan semua if (totalPages maxPageButtons) { for (let i 1; i totalPages; i++) { pageNumbersContainer.appendChild(createPageButton(i, i currentPage)); } return; } // Logic untuk pagination singkat (ketika halaman banyak) // 1. Tampilkan Halaman 1 pageNumbersContainer.appendChild(createPageButton(1, 1 currentPage)); // 2. Logika Penempatan Ellipsis Kiri if (currentPage > 3) { pageNumbersContainer.appendChild(createEllipsis()); } // 3. Tampilkan halaman di sekitar halaman aktif let start Math.max(2, currentPage - 1); let end Math.min(totalPages - 1, currentPage + 1); // Sesuaikan jendela tampilan agar tombol tidak melebihi batas dan terpotong if (currentPage 3) { end 4; // Tampilkan 1, 2, 3, 4, ..., Last } else if (currentPage > totalPages - 2) { start totalPages - 3; // Tampilkan 1, ..., Last-3, Last-2, Last-1, Last } // Pastikan start tidak kurang dari 2 dan end tidak lebih dari totalPages - 1 start Math.max(start, 2); end Math.min(end, totalPages - 1); for (let i start; i end; i++) { pageNumbersContainer.appendChild(createPageButton(i, i currentPage)); } // 4. Logika Penempatan Ellipsis Kanan if (currentPage totalPages - 2) { pageNumbersContainer.appendChild(createEllipsis()); } // 5. Tampilkan Halaman Terakhir if (totalPages > 1 && totalPages ! 1) { pageNumbersContainer.appendChild(createPageButton(totalPages, totalPages currentPage)); } }; // --- 5.3. Render Katalog & Paginasi Dinamis --- const renderCatalog (products) > { const startIndex (currentPage - 1) * productsPerPage; const endIndex startIndex + productsPerPage; const currentProducts products.slice(startIndex, endIndex); const totalPages Math.ceil(products.length / productsPerPage); catalogElement.style.opacity 0; setTimeout(() > { catalogElement.innerHTML currentProducts.map(renderProductCard).join(); catalogElement.style.opacity 1; // Tampilkan/Sembunyikan pesan kosong dan kontrol paginasi if (products.length 0) { emptyMessageElement.classList.remove(hidden); document.getElementById(pagination-controls).classList.add(hidden); } else { emptyMessageElement.classList.add(hidden); document.getElementById(pagination-controls).classList.remove(hidden); } }, 200); // Panggil fungsi penomoran halaman renderPageNumbers(totalPages); prevBtn.disabled currentPage 1; nextBtn.disabled currentPage totalPages || currentProducts.length 0 || totalPages 0; if (window.scrollY > catalogElement.offsetTop - 100) { window.scrollTo({ top: catalogElement.offsetTop - 100, behavior: smooth }); } }; // --- 5.4. Fungsi Paginasi Handler --- const goToPage (page) > { currentPage page; renderCatalog(filteredProducts); }; prevBtn.addEventListener(click, () > { if (currentPage > 1) goToPage(currentPage - 1); }); nextBtn.addEventListener(click, () > { const totalPages Math.ceil(filteredProducts.length / productsPerPage); if (currentPage totalPages) goToPage(currentPage + 1); }); // --- 5.5. Fungsi Filter Kategori --- const updateCategoryFilterOptions () > { const uniqueCategories ...new Set(productsData.map(p > p.jenis)).sort(); categoryFilter.innerHTML option valueSemua>Semua Kategori/option>; uniqueCategories.forEach(cat > { const option document.createElement(option); option.value cat; option.textContent cat; categoryFilter.appendChild(option); }); }; // Hubungkan event change filter kategori ke fungsi filter utama document.getElementById(category-filter).addEventListener(change, window.filterProducts); // --- 5.6. Render Detail Modal --- const renderModalContent (product) > { const isDiscount product.diskon_persen > 0; const isSold product.harga_normal 0; const finalPriceDisplay formatRupiah(isDiscount ? product.harga_diskon : product.harga_normal); const waText isSold ? `Halo Bintang Collection, saya tertarik dengan produk *${product.nama.replace( (SOLD OUT), )}* (ID ${product.id}), apakah ada kemungkinan restock?` : `Halo Bintang Collection! Saya ingin beli *${product.nama.replace( (SOLD OUT), )}* (ID ${product.id})`; const waLink `https://wa.me/${waNumber}?text${encodeURIComponent(waText)}`; const variantThumbnails product.foto_varian.map(url > ` img src${url} altVarian classh-16 w-auto rounded-md cursor-pointer border-2 border-gray-200 hover:border-navy transition duration-200 onclickdocument.getElementById(main-modal-image).src${url}> `).join(); modalContentElement.innerHTML ` div classgrid md:grid-cols-2 gap-8 md:gap-12> div> img idmain-modal-image src${product.foto_utama} alt${product.nama} classw-full h-auto rounded-lg shadow-xl mb-4 aspect-4/5 object-cover> div classflex space-x-2 overflow-x-auto p-1> ${variantThumbnails} /div> /div> div classspace-y-6> p classtext-sm font-medium text-navy uppercase tracking-widest>${product.jenis}/p> h2 classtext-4xl font-extrabold text-gray-900>${product.nama.replace( (SOLD OUT), )}/h2> div classspace-y-1> ${(isDiscount && !isSold) ? `p classtext-xl text-gray-500 line-through>${formatRupiah(product.harga_normal)}/p>` : } div classflex items-center space-x-3> p classtext-5xl font-extrabold ${isSold ? text-red-600 : (isDiscount ? text-red-600 : text-navy)}>${isSold ? SOLD OUT : finalPriceDisplay}/p> ${(isDiscount && !isSold) ? `span classbg-red-600 text-white text-base font-bold px-3 py-1 rounded-full shadow-lg>Diskon ${product.diskon_persen}%/span>` : } /div> /div> div> h3 classtext-lg font-semibold mb-2 text-gray-700>Ukuran Tersedia:/h3> div classflex space-x-3 flex-wrap> ${product.ukuran_tersedia.map(size > `span classtext-base font-semibold px-4 py-2 border border-navy rounded-lg bg-navy/5 text-navy mb-2>${size}/span>`).join()} /div> /div> /div> /div> `; }; // --- 5.7. Buka dan Tutup Modal (dengan Animasi) --- window.openModal (productId) > { const product productsData.find(p > p.id productId); if (!product) return; renderModalContent(product); modalElement.classList.remove(hidden); modalElement.classList.remove(opacity-0); modalElement.classList.remove(scale-95); modalElement.classList.add(flex, opacity-100, scale-100); document.body.style.overflow hidden; }; window.closeModal (event) > { if (event && event.target ! modalElement) return; modalElement.classList.remove(opacity-100, scale-100); modalElement.classList.add(opacity-0, scale-95); setTimeout(() > { modalElement.classList.add(hidden); document.body.style.overflow auto; }, 300); }; // --- 5.8. Inisialisasi --- document.addEventListener(DOMContentLoaded, () > { updateCategoryFilterOptions(); renderCatalog(productsData); }); /script>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]