repositories
loading repo index
repositories
loading repo index
repository
loading code, commits, and activity
certificates
stars
latest
clone command
git clone gitlawb://did:key:z6Mkqhmm...XL9c/certificatesgit clone gitlawb://did:key:z6Mkqhmm.../certificates019974a8sync from playground16h ago| #1 | import type { CertificateProps } from "../types"; |
| #2 | |
| #3 | export default function Template1(cert: CertificateProps) { |
| #4 | const d = cert.issueDate ? new Date(cert.issueDate) : new Date(); |
| #5 | const issueStr = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }); |
| #6 | |
| #7 | return ( |
| #8 | <div |
| #9 | id="cert-render" |
| #10 | style={{ |
| #11 | width: 1056, |
| #12 | height: 816, |
| #13 | background: "#fdf8ee", |
| #14 | fontFamily: "'EB Garamond', 'Georgia', serif", |
| #15 | display: "flex", |
| #16 | flexDirection: "column", |
| #17 | alignItems: "center", |
| #18 | justifyContent: "center", |
| #19 | position: "relative", |
| #20 | boxSizing: "border-box", |
| #21 | }} |
| #22 | > |
| #23 | {/* Outer border */} |
| #24 | <div |
| #25 | style={{ |
| #26 | position: "absolute", |
| #27 | inset: 16, |
| #28 | border: "4px double #1a2744", |
| #29 | pointerEvents: "none", |
| #30 | }} |
| #31 | /> |
| #32 | {/* Inner border */} |
| #33 | <div |
| #34 | style={{ |
| #35 | position: "absolute", |
| #36 | inset: 32, |
| #37 | border: "1px solid #1a2744", |
| #38 | pointerEvents: "none", |
| #39 | }} |
| #40 | /> |
| #41 | |
| #42 | <div style={{ textAlign: "center", padding: "40px 80px", zIndex: 1 }}> |
| #43 | <p style={{ fontSize: 14, letterSpacing: 6, textTransform: "uppercase", color: "#666", marginBottom: 8 }}> |
| #44 | Certificate of Achievement |
| #45 | </p> |
| #46 | <h1 style={{ fontSize: 42, color: "#1a2744", margin: "0 0 16px", fontWeight: 700 }}> |
| #47 | {cert.courseTitle} |
| #48 | </h1> |
| #49 | <div style={{ width: 120, height: 2, background: "#c9a84c", margin: "0 auto 24px" }} /> |
| #50 | <p style={{ fontSize: 18, color: "#555", marginBottom: 8 }}>This is proudly presented to</p> |
| #51 | <h2 style={{ fontSize: 52, color: "#1a2744", margin: "0 0 16px", fontWeight: 600, fontStyle: "italic" }}> |
| #52 | {cert.recipientName} |
| #53 | </h2> |
| #54 | <p style={{ fontSize: 16, color: "#555", maxWidth: 600, margin: "0 auto 24px", lineHeight: 1.6 }}> |
| #55 | {cert.customText || `For the successful completion of the above course of study, demonstrating exceptional knowledge and skill.`} |
| #56 | </p> |
| #57 | <div style={{ display: "flex", justifyContent: "center", gap: 80, marginTop: 32 }}> |
| #58 | <div style={{ textAlign: "center" }}> |
| #59 | <p style={{ fontSize: 13, color: "#888" }}>Issued by</p> |
| #60 | <p style={{ fontSize: 16, color: "#1a2744", fontWeight: 600, borderBottom: "1px solid #1a2744", paddingBottom: 4 }}> |
| #61 | {cert.organization} |
| #62 | </p> |
| #63 | </div> |
| #64 | <div style={{ textAlign: "center" }}> |
| #65 | <p style={{ fontSize: 13, color: "#888" }}>Date of Issue</p> |
| #66 | <p style={{ fontSize: 16, color: "#1a2744", fontWeight: 600, borderBottom: "1px solid #1a2744", paddingBottom: 4 }}> |
| #67 | {issueStr} |
| #68 | </p> |
| #69 | </div> |
| #70 | </div> |
| #71 | |
| #72 | {/* Gold seal */} |
| #73 | <div style={{ marginTop: 32 }}> |
| #74 | <svg width="80" height="80" viewBox="0 0 80 80" fill="none"> |
| #75 | <circle cx="40" cy="40" r="36" fill="#c9a84c" opacity="0.2" /> |
| #76 | <circle cx="40" cy="40" r="28" fill="none" stroke="#c9a84c" strokeWidth="2" /> |
| #77 | <circle cx="40" cy="40" r="22" fill="none" stroke="#c9a84c" strokeWidth="1" /> |
| #78 | <text x="40" y="38" textAnchor="middle" fontSize="10" fill="#c9a84c" fontWeight="bold">CERTIFIED</text> |
| #79 | <text x="40" y="50" textAnchor="middle" fontSize="8" fill="#c9a84c">AUTHENTIC</text> |
| #80 | </svg> |
| #81 | </div> |
| #82 | |
| #83 | <p style={{ fontSize: 11, color: "#999", marginTop: 16 }}> |
| #84 | Certificate ID: {cert.id} |
| #85 | </p> |
| #86 | </div> |
| #87 | </div> |
| #88 | ); |
| #89 | } |
| #90 |