From e88e72528a9164e2a8b0d57828f09d4d677c1ed2 Mon Sep 17 00:00:00 2001
From: TolaMironcenko <mironcenkotola@gmail.com>
Date: Wed, 26 Mar 2025 13:21:35 +0700
Subject: [PATCH] pass template

---
 communityIcon_h3cvittvupi91.png | Bin 0 -> 7113 bytes
 index.css                       | 121 ++++++++++++
 index.html                      |  12 ++
 index.js                        | 103 ++++++++++
 pass.json                       | 330 ++++++++++++++++++++++++++++++++
 5 files changed, 566 insertions(+)
 create mode 100644 communityIcon_h3cvittvupi91.png
 create mode 100644 index.css
 create mode 100644 index.html
 create mode 100644 index.js
 create mode 100644 pass.json

diff --git a/communityIcon_h3cvittvupi91.png b/communityIcon_h3cvittvupi91.png
new file mode 100644
index 0000000000000000000000000000000000000000..cda2555b8becb6ae9e5b82e8b3601a9dbda42324
GIT binary patch
literal 7113
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

literal 0
HcmV?d00001

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 @@
+<!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>
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 += `<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`;
+    });
+  });
diff --git a/pass.json b/pass.json
new file mode 100644
index 0000000..cce6e1d
--- /dev/null
+++ b/pass.json
@@ -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"
+      }
+    }
+  }
+]