Skip to content

Instantly share code, notes, and snippets.

@izzatzr

izzatzr/pdf.html

Last active April 23, 2025 18:24
Show Gist options
  • Save izzatzr/3cb723c8b27de33cc9037046eea2ea6f to your computer and use it in GitHub Desktop.
Save izzatzr/3cb723c8b27de33cc9037046eea2ea6f to your computer and use it in GitHub Desktop.
Download ZIP
pdf.html
Raw
pdf.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: Founders Grotesk;
src: url('https://staging-api.nutriciaprofessional.id/nutrigain/uploads/Founders_Grotesk/FoundersGrotesk-Regular.otf');
}
@font-face {
font-family: Founders Grotesk Bold;
src: url('https://staging-api.nutriciaprofessional.id/nutrigain/uploads/Founders_Grotesk/FoundersGrotesk-Bold.otf.otf');
}
</style>
</head>
<body>
<div data-layer="Roboto 10PX & 8PX" class="Roboto10px8px" style="width: 339px; height: 196px; background: white">
<div data-layer="Header" class="Header"
style="width: 339px; height: 23px; left: 0px; top: 0px; position: absolute; overflow: hidden; border-radius: 2px; outline: 1px black solid; outline-offset: -1px">
<img style="width: 52.05px; height: 19px; left: 0px; top: 2px; position: absolute"
src="https://staging-api.nutriciaprofessional.id/nutrigain/uploads/logo_nutrigain.png" />
<div data-layer="Perempuan" class="Perempuan"
style="left: 87px; top: 9px; position: absolute; flex-direction: column; color: black; font-size: 8px; font-family: Roboto; font-weight: 600; word-wrap: break-word">
PEREMPUAN
</div>
<div data-layer="24 Bulan 1 Minggu 10 Hari" class="Bulan1Minggu10Hari"
style="left: 164px; top: 9px; position: absolute; flex-direction: column; color: black; font-size: 8px; font-family: Roboto; font-weight: 600; word-wrap: break-word">
12
</div>
<div data-layer="18/05/2025" class="052025"
style="left: 295px; top: 9px; position: absolute; flex-direction: column; color: black; font-size: 8px; font-family: Roboto; font-weight: 600; word-wrap: break-word">
13
</div>
</div>
<div class="Untukmengoptimalkan"
style="width: 11.5%; height: 70px; left: 228px; top: 31px; position: absolute; overflow: hidden; border-radius: 2px; outline: 1px black solid; outline-offset: -1px">
<div
class="UntukMengoptimalkanKejarTumbuhLakukanEvaluasiKenaikanStatusGiziBbDanTbMinimalSetelah3MingguPenggunaanPkmk"
style="text-align: left; padding: 5%; display: flex; flex-direction: column">
<span style="color: black; font-size: 8px; font-family: Roboto; font-weight: 400; ">Untuk
mengoptimalkan kejar tumbuh, lakukan evaluasi kenaikan status gizi (BB dan TB) minimal setelah</span>
<span style="color: black; font-size: 8px; font-family: Roboto; font-weight: 700;">
3</span>
<span style="color: black; font-size: 8px; font-family: Roboto; font-weight: 400; ">
minggu penggunaan PKMK.</span>
</div>
</div>
<div data-layer="BB" class="Bb"
style="width: 216px; height: 20px; top: 31px; position: absolute; border-radius: 2px; outline: 1px black solid; outline-offset: -1px">
<div data-layer="BB Kurang" class="BbKurang"
style="left: 159px; top: 7px; position: absolute; flex-direction: column; color: black; font-size: 10px; font-family: Roboto; font-weight: 600; word-wrap: break-word">
DODEDQE
</div>
<div data-layer="Z-Score : -5.2" class="ZScore52"
style="left: 75px; top: 6px; position: absolute; flex-direction: column; color: black; font-size: 10px; font-family: Roboto; font-weight: 400; word-wrap: break-word">
Z-Score : 3
</div>
<div data-layer="BB : 14 kg" class="Bb14Kg"
style="left: 5px; top: -5px; position: absolute; flex-direction: column">
<span style="color: black; font-size: 10px; font-family: Roboto; font-weight: 400; word-wrap: break-word">BB
: </span><span
style="color: black; font-size: 10px; font-family: Roboto; font-weight: 600; word-wrap: break-word">
213
kg
</span>
</div>
</div>
<div data-layer="TB" class="Tb"
style="width: 216px; height: 20px; top: 56px; position: absolute; border-radius: 2px; outline: 1px black solid; outline-offset: -1px">
<div data-layer="TB : 14 kg" class="Tb14Kg"
style="left: 5px; top: -5px; position: absolute; flex-direction: column">
<span style="color: black; font-size: 10px; font-family: Roboto; font-weight: 400; word-wrap: break-word">TB
: </span><span
style="color: black; font-size: 10px; font-family: Roboto; font-weight: 600; word-wrap: break-word">
123
kg
</span>
</div>
<div data-layer="Z-Score : -6.2" class="ZScore62"
style="left: 74px; top: 7px; position: absolute; flex-direction: column; color: black; font-size: 10px; font-family: Roboto; font-weight: 400; word-wrap: break-word">
Z-Score : 13
</div>
<div data-layer="PB Normal" class="PbNormal"
style="left: 157px; top: 7px; position: absolute; flex-direction: column; color: black; font-size: 10px; font-family: Roboto; font-weight: 600;word-wrap: break-word">
12
</div>
</div>
<div data-layer="BBTB" class="Bbtb"
style="width: 216px; height: 20px; top: 81px; position: absolute; border-radius: 2px; outline: 1px black solid; outline-offset: -1px">
<div data-layer="BB/TB Normal" class="BbTbNormal"
style="left: 141px; top: 6px; position: absolute; flex-direction: column; color: black; font-size: 10px; font-family: Roboto; font-weight: 600; word-wrap: break-word">
12
</div>
<div data-layer="Z-Score : -6.2" class="ZScore62"
style="left: 74px; top: 6px; position: absolute; flex-direction: column; color: black; font-size: 10px; font-family: Roboto; font-weight: 400; word-wrap: break-word">
Z-Score : 12
</div>
<div data-layer="BB/TB : 14 kg" class="BbTb14Kg"
style="left: 5px; top: -5px; position: absolute; flex-direction: column">
<span style="color: black; font-size: 10px; font-family: Roboto; font-weight: 400; word-wrap: break-word">BB/TB
: </span><span
style="color: black; font-size: 10px; font-family: Roboto; font-weight: 600; word-wrap: break-word">
<!-- <%= berat_badan %> / <%= tinggi_badan %> -->
12
kg
</span>
</div>
</div>
<div data-layer="Rekomendasi" class="Rekomendasi"
style="width: auto; height: auto; left: 6px; top: 110px; position: absolute; padding: 1.5%; border-radius: 2px; outline: 1px black solid; outline-offset: -1px">
<div data-layer="Rekomendasi Penggunaan PKMK" class="RekomendasiPenggunaanPkmk"
style=" text-align: center; justify-content: center; flex-direction: column; color: black; font-size: 10px; font-family: Roboto; font-weight: 700; word-wrap: break-word">
Rekomendasi Penggunaan PKMK</div>
<div data-layer="Nama PKMK:__________________________(isi rekomendasi produk PKMK)"
class="NamaPkmkIsiRekomendasiProdukPkmk"
style="justify-content: center; text-align: center; flex-direction: column">
<span style="color: black; font-size: 10px; font-family: Roboto; font-weight: 400; word-wrap: break-word">Nama
PKMK: pRODUK </span><span
style="color: black; font-size: 7px; font-family: Roboto; font-style: italic; font-weight: 400; word-wrap: break-word">(isi
rekomendasi produk PKMK)</span>
</div>
<div data-layer="PKMK diberikan 3 kali/hari Jumlah takaran per saji adalah 7 sendok takar dengan 252 ml air/saji"
class="PkmkDiberikan3KaliHariJumlahTakaranPerSajiAdalah7SendokTakarDengan252MlAirSaji"
style="text-box-trim: trim-both; text-box-edge: cap alphabetic; text-align: center; justify-content: center; flex-direction: column">
<span style="color: black; font-size: 10px; font-family: Roboto; font-weight: 400;word-wrap: break-word">PKMK
diberikan </span><span
style="color: black; font-size: 10px; font-family: Roboto; font-weight: 700;word-wrap: break-word">
12
</span><span style="color: black; font-size: 10px; font-family: Roboto; font-weight: 400;word-wrap: break-word">
kali/hari<br />Jumlah takaran per saji adalah </span><span
style="color: black; font-size: 10px; font-family: Roboto; font-weight: 700;word-wrap: break-word">
43
</span><span style="color: black; font-size: 10px; font-family: Roboto; font-weight: 400;word-wrap: break-word">
sendok takar dengan </span><span
style="color: black; font-size: 10px; font-family: Roboto; font-weight: 700;word-wrap: break-word">
12
</span><span
style="color: black; font-size: 10px; font-family: Roboto; font-weight: 400;word-wrap: break-word">ml
air/saji</span>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment