nsfw
hai, aku ingin membuat fitur NSFW BY HHC, yang dimana fitur ini bisa menbuat efek blur diatas element yang di pilih (semacam overlay mengambang tepat diatas elementnya), terutama elemen img dan video, tetapi juga bisa berfungsi di elemen lainnya.
yang dimana efek blur ini menggunakan filter blur 12px, lalu dia posisinya mengambang diatas elemennya dengan posisi tetap, jadi walaupun layar bergeser itu efek blur tetap berada di atas elemennya.
untuk fitur blur di nsfw ini, bisa di nonaktifkan dan di aktifkan, bahkan ada settingan lainnya.
yang dimana fitur blur nsfw ini ada svg sebagai button : , yang dimana svg ini berfungsi kalau di klik akan memunculkan dropdown mengambang tepat di bawah elemennya.
untuk isian dropdownnya ada dibawah yaitu button nsfw nya dulu,
untuk desain button nsfw nya, menggunakan button dari svg kalau on pakai : , kalau off pakai : .
perlu diingat, ukuran button on off ini adalah 24px, yang dimana sebelah svg nya ada teks bertuliskan nsfw on dan nsfw off.
lalu isian dropdown keduanya adalah range blur nya, dimulai dari 2px sampai 30px, bisa di drag range nya ke kanan dan kiri.
lalu isian dropdown ketiganya adalah button switch mau on/off yang dimana untuk mengingat settingan ini, jadi kalau balik lagi akan otomatis pakai settingan ini tapi meresource ulang.
lalu isian selanjutnya bisa di tambahkan tanpa batas.
kemudian untuk desain dropdownnya simple saja, minimalis, menggunakan mode terang, dan pastinya di script ada konfigurasi nya sebagai mana berikut :
const KonfigurasiNSWFbyHHC :
AktifkanAwalBukaWebNSFWbyHHC = "true" (true berati aktif, false berarti tidak aktif)
ElementYangDiizinkanForBlurbyHHC = "img", "div", "label", "a", "dan lainnya" (bisa di tambahkan tanpa batas, jika di kasih "all", maka semua elemen dizinkan)
ElementWajibDiatasnyaForBlurbyHHC = "img", "video", "iframe", "dan lainnya bisa di tambahkan tanpa batas" (disini akan otomatis membuat efek blur diatas elementnya jika terdeketsi elemen diatas ada di web)
DeteksiClassWajibDiatasnyaForBlurbyHHC = "sepator", "img", "show-if-js", "imgThm", "lblr", "lazyloaded" (dan lainnya bisa di tambahkan tanpa batas, kalau terdeteksi ada nama class ini di dalam elemennya, maka diatas element ini akan ada efek blur jika aktif)
MendeteksiDanReplaceLinkImageforEnkripsibyHHC = "true" (true berarti aktif, false berarti nonaktif, yang dimana konfigurasi ini memiliki fungsi mendeteksi link src didalamnya berupa image maupun vidio, jika true maka akan di ganti jadi enkripsi teks acak tanpa api apapun, langsung aja di acak supaya tidak bisa terdeteksi, tetapi image maupun vidio aslinya masih bisa muncul dan enkripsi model ini tidak mengganggu web aslinya berjalan karena baru teracak saat di akhir loading webnya.)
ShowRangeBlurforHHC = "true", "1", "30" (true berarti aktif, 1 itu paling minim, 30 itu paling maksimal).
lalu untuk bagian nama css maupun nama di dalam script, pastikan murni, dengan tambahan akhiran NSFWbyHHC, contoh .kontainer jadi .kontainerNSFWbyHHC, begitu juga dengan class lainnya seperti id, for, dan nama fungsi di script juga lainnya.
nah dari fitur diatas, tolong buatkan kodenya yang lengkap, rapi, sangat responsif, menarik dan cantik, dan pastikan kodenya tidak membuat website lemot atau kodenya harus di optimasi dengan sangat baik.
===========
dari kodeku tersebut aku cek masih salah, saat layar gerak itu overlay blurnya telat banget, harusnya realtime tetap berada di atas elemennya terus, kamu coba pahamin kode dibawah mungkin bisa jadi bahan evaluasi :
/* Not Safe for Work */ .nsfw img{filter:blur(20px) saturate(1.1) brightness(90%)}.sfw .nsfw img{filter:none}.sfw .nsfw-mode .off,.nsfw-mode .on{display:none}.sfw .nsfw-mode .on{display:inline-block}@media (max-width:700px){.nsfw-mode-header{display:none}}.searchStyle{display:flex;align-items:center;gap:0.5em;background-color:ghostwhite;color:black;border-radius:3px;text-decoration:none;transition:transform 0.3s ease,box-shadow 0.3s ease;margin-left:15px}.searchStyle:hover{transform:translateY(-5px);box-shadow:0 8px 15px rgba(0,0,0,0.2)}