pass template
This commit is contained in:
wt committed
commit
e88e72528a
5 files changed
+566
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
@@ -0,0 +1,121 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pass {
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pass-header-v {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.pass-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pass-header-img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pass-header-img > img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pass-header-text {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.pass-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pass-body-img {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.pass-body-img > img {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.pass-body-img-data {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.pass-body-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pass-desc {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.pass-footer {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.pass-footer-img {
|
||||
overflow: hidden;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.pass-footer-img > img {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.pass-footer-subimg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.pass-footer-subimg > img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body class="body">
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,103 @@
|
||||
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`;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,330 @@
|
||||
[
|
||||
{
|
||||
"background": "black",
|
||||
"header": {
|
||||
"img": {
|
||||
"alt": "header-img-alt",
|
||||
"src": "communityIcon_h3cvittvupi91.png"
|
||||
},
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "PASSPORT"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "asdfasdf"
|
||||
},
|
||||
"body": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "header-body-desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "header-body-data"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
"left": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
},
|
||||
"right": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"left": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
},
|
||||
"right": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"footer": {
|
||||
"img": {
|
||||
"alt": "footer-img",
|
||||
"src": "communityIcon_h3cvittvupi91.png",
|
||||
"type": "rectangle"
|
||||
},
|
||||
"subimg": {
|
||||
"alt": "footer-subimg",
|
||||
"src": "communityIcon_h3cvittvupi91.png"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"background": "rgb(120, 23, 23)",
|
||||
"header": {
|
||||
"img": {
|
||||
"alt": "header-img-alt",
|
||||
"src": "communityIcon_h3cvittvupi91.png"
|
||||
},
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "PASSPORT"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "pspspspspspspsp"
|
||||
},
|
||||
"body": {
|
||||
"img": {
|
||||
"alt": "header-body-img-alt",
|
||||
"src": "communityIcon_h3cvittvupi91.png"
|
||||
},
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "header-body-desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "header-body-data"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
"left": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
},
|
||||
"right": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"left": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
},
|
||||
"right": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"left": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
},
|
||||
"right": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"left": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
},
|
||||
"right": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"footer": {
|
||||
"img": {
|
||||
"alt": "footer-img",
|
||||
"src": "communityIcon_h3cvittvupi91.png",
|
||||
"type": "square"
|
||||
},
|
||||
"subimg": {
|
||||
"alt": "footer-subimg",
|
||||
"src": "communityIcon_h3cvittvupi91.png"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"background": "blue",
|
||||
"header": {
|
||||
"img": {
|
||||
"alt": "header-img-alt",
|
||||
"src": "communityIcon_h3cvittvupi91.png"
|
||||
},
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "PASSPORT"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "asdfasdf"
|
||||
},
|
||||
"body": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "header-body-desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "header-body-data"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
"left": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
},
|
||||
"right": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"left": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
},
|
||||
"right": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "data"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"footer": {
|
||||
"subimg": {
|
||||
"alt": "footer-subimg",
|
||||
"src": "communityIcon_h3cvittvupi91.png"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"background": "green",
|
||||
"header": {
|
||||
"img": {
|
||||
"alt": "header-img-alt",
|
||||
"src": "communityIcon_h3cvittvupi91.png"
|
||||
},
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "PASSPORT"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "asdfasdf"
|
||||
},
|
||||
"body": {
|
||||
"desc": {
|
||||
"color": "white",
|
||||
"data": "header-body-desc"
|
||||
},
|
||||
"data": {
|
||||
"color": "white",
|
||||
"data": "header-body-data"
|
||||
}
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"subimg": {
|
||||
"alt": "footer-subimg",
|
||||
"src": "communityIcon_h3cvittvupi91.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
Reference in new issue
Block a user