Skip to content

Instantly share code, notes, and snippets.

@armedi

armedi/index.html

Created October 31, 2020 05:12
Download ZIP
rescript-blurhash example
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Using rescript-blurhash</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link
rel="preload"
as="style"
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@800&display=swap"
/>
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@800&display=swap"
rel="stylesheet"
/>
<style>
:root {
font-size: 14px;
line-height: 1.5;
font-family: 'Nunito Sans', -apple-system, sans-serif;
color: rgba(49, 53, 59, 0.96);
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
section {
margin: 0 8px;
width: 150px;
}
@media (min-width: 332px) {
section {
width: 316px;
}
}
@media (min-width: 498px) {
section {
width: 482px;
}
}
@media (min-width: 664px) {
section {
width: 648px;
}
}
@media (min-width: 830px) {
section {
width: 814px;
}
}
@media (min-width: 996px) {
section {
width: 980px;
}
}
h2 {
font-size: 24px;
font-weight: 800;
line-height: 3rem;
margin: 0 0 8px;
}
.hscroll {
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.hscroll::-webkit-scrollbar {
display: none;
}
#categories {
width: 1660px;
display: flex;
flex-wrap: wrap;
margin: 0 -8px;
}
figure {
display: block;
width: 150px;
margin: 8px;
margin-bottom: 24px;
}
img {
width: 150px;
height: 150px;
border-radius: 8px;
}
figcaption {
font-size: 16px;
font-weight: 800;
line-height: 1.33;
text-align: center;
margin-top: 4px;
}
</style>
</head>
<body>
<section>
<h2>Cari Kategori Apa?</h2>
<!-- All images are from tokepedia categories images. Open https://tokopedia.com.
The hashes are generated using https://blurha.sh -->
<div class="hscroll">
<div id="categories" data-v-app="">
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_28956cd8-b606-4900-a9f1-6f806a4ff711.jpg.webp"
alt="Dapur"
title="Dapur"
data-blurhash="UT9]Q+yZkXX9OvbIaef6O^adV?oJ,*jsogbI"
/>
<figcaption>Dapur</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_61a83793-b168-4f20-96a2-3f1b2394dcf7.jpg.webp"
alt="Buku"
title="Buku"
data-blurhash="UFIrWoO.IUr;00%fRktS~Vn5%2NZ%MRjWUWB"
/>
<figcaption>Buku</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_6da6ce24-c161-4e14-960c-37795f3fc267.jpg.webp"
alt="Handphone &amp; Tablet"
title="Handphone &amp; Tablet"
data-blurhash="UdOKkXVa^0rsw]tQWXRk}naLEPW;kVRksmxa"
/>
<figcaption>Handphone &amp; Tablet</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/10/23/40768394/40768394_01b84f11-80c9-4131-bd11-7f8d6374d4c5.jpg.webp"
alt="Perawatan Tubuh"
title="Perawatan Tubuh"
data-blurhash="UMG^:|DONFlA?^VsMwi_P:bco}f+x]tRs;Vr"
/>
<figcaption>Perawatan Tubuh</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_11ec4837-7da7-494c-9424-269fc8e238d8.jpg.webp"
alt="Makanan &amp; Minuman"
title="Makanan &amp; Minuman"
data-blurhash="UXF*D[ogGwW=B@j?#5aex]R*NGt7n2ofozR*"
/>
<figcaption>Makanan &amp; Minuman</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_8e089c92-0ac6-4eae-9473-33dec16be4ab.jpg.webp"
alt="Mainan &amp; Hobi"
title="Mainan &amp; Hobi"
data-blurhash="UBG@Zg~BxBt8%WsuZ$-5QdO*N3T0Q_NhE-Ee"
/>
<figcaption>Mainan &amp; Hobi</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_ede704aa-ac09-4294-baf4-96bb8769242a.jpg.webp"
alt="Kesehatan"
title="Kesehatan"
data-blurhash="UBP_aX-V_OD%@tWBK%xuquWBPUxtyYofmlRP"
/>
<figcaption>Kesehatan</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_01e1d7fe-ec54-4c0a-a372-0d5cc34c4b88.jpg.webp"
alt="Kecantikan"
title="Kecantikan"
data-blurhash="UJRa|2I:{|$*-TxGjvWA|[soE#NaI@NGw[oz"
/>
<figcaption>Kecantikan</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_b6c1e193-b91f-4ac5-9013-672916f2bee8.jpg.webp"
alt="Kamera"
title="Kamera"
data-blurhash="UqPX~jof-NWB%1j[WCay}*aeI]ofRPWBofof"
/>
<figcaption>Kamera</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_199c682c-2ff3-4c9f-8a87-d71c54520c23.jpg.webp"
alt="Fashion Muslim"
title="Fashion Muslim"
data-blurhash="UgHntgxzD=s$Rtk8xsWYWaavadWGt7V[jYkC"
/>
<figcaption>Fashion Muslim</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_3c5fd787-61b5-4a16-ba45-93c54b6d1e43.jpg.webp"
alt="Elektronik"
title="Elektronik"
data-blurhash="UAJ[9c%z00xa49yD0KRP00ayxaRj7f9F^k%M"
/>
<figcaption>Elektronik</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_8d48c23a-3090-4c71-abfa-2c637003c1e2.jpg.webp"
alt="Olahraga"
title="Olahraga"
data-blurhash="UCEy$6Ni03%ht4~T?a01SltSacn|%iD%9Z_2"
/>
<figcaption>Olahraga</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_fd64954a-4e24-4b1a-ac19-be1d7a0fbaf8.jpg.webp"
alt="Fashion Pria"
title="Fashion Pria"
data-blurhash="UoMZD,Rk~1oy?9oeNfay-nWCIWj[M|j[s;ay"
/>
<figcaption>Fashion Pria</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_2c363cd5-ce78-4872-8304-f3b559aa9650.jpg.webp"
alt="Pertukangan"
title="Pertukangan"
data-blurhash="UJRa|2I:{|$*-TxGjvWA|[soE#NaI@NGw[oz"
/>
<figcaption>Pertukangan</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_920fddea-e74a-4be2-8a75-813a873116c3.jpg.webp"
alt="Fashion Anak &amp; Bayi"
title="Fashion Anak &amp; Bayi"
data-blurhash="UjEhOzHqT1krLNt7aKWX$$TKr=r;N{n$f+aK"
/>
<figcaption>Fashion Anak &amp; Bayi</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_732546f9-371d-45c6-a412-451ea50aa22c.jpg.webp"
alt="Fashion Wanita"
title="Fashion Wanita"
data-blurhash="UoDyeYs:Q7kCx]kCn%e.OXkWn%V@X8aenikC"
/>
<figcaption>Fashion Wanita</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_33234183-839a-4dca-bd05-0679fb475fa7.jpg.webp"
alt="Otomotif"
title="Otomotif"
data-blurhash="Us8kr5o|p@bFepj[fja{ueaLVue:f*a|fkf7"
/>
<figcaption>Otomotif</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_52efc3c1-34c2-460b-90d6-3a6e57210b17.jpg.webp"
alt="Gaming"
title="Gaming"
data-blurhash="ULQt^zR%-3V?9$nh$xXA{@xtJDkX^Hg4A0iv"
/>
<figcaption>Gaming</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/23/40768394/40768394_26a35061-a304-4240-a995-e2ade943d56c.jpg.webp"
alt="Rumah Tangga"
title="Rumah Tangga"
data-blurhash="UMN%$#]-n4-p{er?jsjt.nsokqIULLbwbHf6"
/>
<figcaption>Rumah Tangga</figcaption>
</figure>
<figure>
<img
src="https://ecs7-p.tokopedia.net/img/cache/350/attachment/2020/8/24/40768394/40768394_a550310e-61eb-478a-9349-305fa270c28d.jpg.webp"
alt="Komputer &amp; Laptop"
title="Komputer &amp; Laptop"
data-blurhash="UDCsqB^P0rNa01I[?IRP5FRjxC%3~BxAIot6"
/>
<figcaption>Komputer &amp; Laptop</figcaption>
</figure>
</div>
</div>
</section>
<script src="https://unpkg.com/rescript-blurhash@0.3.2/dist/production.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment