104 lines
4.1 KiB
JavaScript
104 lines
4.1 KiB
JavaScript
const body = document.querySelector(".body");
|
|
console.log(document.body.innerHTML);
|
|
|
|
fetch(window.location.origin + "/pass.json")
|
|
.then((data) => data.json())
|
|
.then((jsondata1) => {
|
|
console.log(jsondata1);
|
|
jsondata1.map((jsondata) => {
|
|
body.innerHTML += `<div ${!jsondata.background ? `style="background: black"` : `style="background: ${jsondata.background}"`} class="pass">
|
|
<div class="pass-header-v">
|
|
<div class="pass-header">
|
|
<div class="pass-header-img">
|
|
<img
|
|
src="${jsondata.header.img.src}"
|
|
alt="${jsondata.header.img.alt}"
|
|
/>
|
|
</div>
|
|
<div class="pass-header-text">
|
|
<p ${!jsondata.header.desc.color ? "" : `style="color: ${jsondata.header.desc.color}"`} class="pass-desc">${jsondata.header.desc.data}</p>
|
|
<h2 ${!jsondata.header.data.color ? "" : `style="color: ${jsondata.header.data.color}"`} class="pass-name">${jsondata.header.data.data}</h2>
|
|
</div>
|
|
</div>
|
|
${
|
|
!jsondata.header.body
|
|
? ``
|
|
: `<div ${!jsondata.header.body.img ? `style="height: max-content"` : ``} class="pass-body-img">
|
|
${
|
|
!jsondata.header.body.img
|
|
? ``
|
|
: `<img
|
|
src="${jsondata.header.body.img.src}"
|
|
alt="${jsondata.header.body.img.alt}"
|
|
/>`
|
|
}
|
|
${!jsondata.header.body.desc ? `` : `<p ${!jsondata.header.body.desc.color ? "" : `style="color: ${jsondata.header.body.desc.color}"`} class="pass-desc">${jsondata.header.body.desc.data}</p>`}
|
|
${!jsondata.header.body.data ? `` : `<p ${!jsondata.header.body.data.color ? "" : `style="color: ${jsondata.header.body.data.color}"`} class="pass-body-img-data"><b>${jsondata.header.body.data.data}</b></p>`}
|
|
</div>`
|
|
}
|
|
${
|
|
!jsondata.body
|
|
? ``
|
|
: `<div class="pass-body">
|
|
${jsondata.body.reduce((acc, block) => {
|
|
return (
|
|
acc +
|
|
`<div class="pass-body-text">
|
|
<div>
|
|
${
|
|
!block.left
|
|
? ``
|
|
: `<p ${!block.left.desc.color ? `` : `style="color: ${block.left.desc.color}"`} class="pass-desc">${block.left.desc.data}</p>
|
|
<p ${!block.left.data.color ? `` : `style="color: ${block.left.data.color}"`}>
|
|
${block.left.data.data}
|
|
</p>`
|
|
}
|
|
</div>
|
|
<div>
|
|
${
|
|
!block.right
|
|
? ``
|
|
: `<p ${!block.right.desc.color ? `` : `style="color: ${block.right.desc.color}"`} class="pass-desc">${block.right.desc.data}</p>
|
|
<p ${!block.right.data.color ? `` : `style="color: ${block.right.data.color}"`}>
|
|
${block.right.data.data}
|
|
</p>`
|
|
}
|
|
</div>
|
|
</div>`
|
|
);
|
|
}, "")}
|
|
</div>`
|
|
}
|
|
</div>
|
|
|
|
${
|
|
!jsondata.footer
|
|
? ``
|
|
: `<div class="pass-footer">
|
|
${
|
|
!jsondata.footer.img
|
|
? ``
|
|
: `<div ${jsondata.footer.img.type === "rectangle" ? `style="width: 80%;height: 80px;"` : `style="width: 100px; height: 100px"`} class="pass-footer-img">
|
|
<img
|
|
${jsondata.footer.img.type === "rectangle" ? `style="width: 100%;height: 80px;"` : `style="width: 100px; height: 100px"`}
|
|
src="${jsondata.footer.img.src}"
|
|
alt="${jsondata.footer.img.alt}"
|
|
/>
|
|
</div>`
|
|
}
|
|
${
|
|
!jsondata.footer.subimg
|
|
? ``
|
|
: `<div class="pass-footer-subimg">
|
|
<img
|
|
src="${jsondata.footer.subimg.src}"
|
|
alt="${jsondata.footer.subimg.alt}"
|
|
/>
|
|
</div>`
|
|
}
|
|
</div>`
|
|
}
|
|
</div`;
|
|
});
|
|
});
|