commit e88e72528a9164e2a8b0d57828f09d4d677c1ed2 Author: TolaMironcenko Date: Wed Mar 26 13:21:35 2025 +0700 pass template diff --git a/communityIcon_h3cvittvupi91.png b/communityIcon_h3cvittvupi91.png new file mode 100644 index 0000000..cda2555 Binary files /dev/null and b/communityIcon_h3cvittvupi91.png differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..ce30deb --- /dev/null +++ b/index.css @@ -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; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..b738250 --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..09b69dc --- /dev/null +++ b/index.js @@ -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 += `
+
+
+
+ ${jsondata.header.img.alt} +
+
+

${jsondata.header.desc.data}

+

${jsondata.header.data.data}

+
+
+ ${ + !jsondata.header.body + ? `` + : `
+ ${ + !jsondata.header.body.img + ? `` + : `${jsondata.header.body.img.alt}` + } + ${!jsondata.header.body.desc ? `` : `

${jsondata.header.body.desc.data}

`} + ${!jsondata.header.body.data ? `` : `

${jsondata.header.body.data.data}

`} +
` + } + ${ + !jsondata.body + ? `` + : `
+ ${jsondata.body.reduce((acc, block) => { + return ( + acc + + `
+
+ ${ + !block.left + ? `` + : `

${block.left.desc.data}

+

+ ${block.left.data.data} +

` + } +
+
+ ${ + !block.right + ? `` + : `

${block.right.desc.data}

+

+ ${block.right.data.data} +

` + } +
+
` + ); + }, "")} +
` + } +
+ + ${ + !jsondata.footer + ? `` + : `
+ ${ + !jsondata.footer.img + ? `` + : `
+ ${jsondata.footer.img.alt} +
` + } + ${ + !jsondata.footer.subimg + ? `` + : `
+ ${jsondata.footer.subimg.alt} +
` + } +
` + } +