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 Template3(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: "#0d1117", |
| #14 | fontFamily: "'JetBrains Mono', 'Fira Code', monospace", |
| #15 | display: "flex", |
| #16 | flexDirection: "column", |
| #17 | alignItems: "center", |
| #18 | justifyContent: "center", |
| #19 | position: "relative", |
| #20 | boxSizing: "border-box", |
| #21 | overflow: "hidden", |
| #22 | }} |
| #23 | > |
| #24 | {/* Circuit border SVG */} |
| #25 | <svg |
| #26 | style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }} |
| #27 | viewBox="0 0 1056 816" |
| #28 | fill="none" |
| #29 | > |
| #30 | <rect x="20" y="20" width="1016" height="776" rx="4" stroke="#00d8ff" strokeWidth="1" opacity="0.3" /> |
| #31 | <line x1="20" y1="60" x2="100" y2="60" stroke="#00d8ff" strokeWidth="1" opacity="0.5" /> |
| #32 | <line x1="956" y1="60" x2="1036" y2="60" stroke="#00d8ff" strokeWidth="1" opacity="0.5" /> |
| #33 | <line x1="20" y1="756" x2="100" y2="756" stroke="#00d8ff" strokeWidth="1" opacity="0.5" /> |
| #34 | <line x1="956" y1="756" x2="1036" y2="756" stroke="#00d8ff" strokeWidth="1" opacity="0.5" /> |
| #35 | <circle cx="60" cy="60" r="3" fill="#00d8ff" opacity="0.6" /> |
| #36 | <circle cx="996" cy="60" r="3" fill="#00d8ff" opacity="0.6" /> |
| #37 | <circle cx="60" cy="756" r="3" fill="#00d8ff" opacity="0.6" /> |
| #38 | <circle cx="996" cy="756" r="3" fill="#00d8ff" opacity="0.6" /> |
| #39 | <line x1="50" y1="20" x2="50" y2="40" stroke="#22c55e" strokeWidth="1" opacity="0.4" /> |
| #40 | <line x1="1006" y1="20" x2="1006" y2="40" stroke="#22c55e" strokeWidth="1" opacity="0.4" /> |
| #41 | </svg> |
| #42 | |
| #43 | <div style={{ textAlign: "center", padding: "40px 80px", zIndex: 1 }}> |
| #44 | <p style={{ fontSize: 11, letterSpacing: 6, textTransform: "uppercase", color: "#22c55e", marginBottom: 8 }}> |
| #45 | // Certificate of Completion |
| #46 | </p> |
| #47 | <h1 style={{ fontSize: 40, color: "#00d8ff", margin: "0 0 16px", fontWeight: 700 }}> |
| #48 | {cert.courseTitle} |
| #49 | </h1> |
| #50 | <div style={{ width: 200, height: 1, background: "linear-gradient(90deg, transparent, #00d8ff, transparent)", margin: "0 auto 24px" }} /> |
| #51 | <p style={{ fontSize: 16, color: "#8b949e", marginBottom: 8 }}>Awarded to</p> |
| #52 | <h2 style={{ fontSize: 48, color: "#e6edf3", margin: "0 0 20px", fontWeight: 600 }}> |
| #53 | {cert.recipientName} |
| #54 | </h2> |
| #55 | <p style={{ fontSize: 14, color: "#8b949e", maxWidth: 550, margin: "0 auto 32px", lineHeight: 1.7 }}> |
| #56 | {cert.customText || `Successfully demonstrated proficiency in the required skill set and completed all course objectives.`} |
| #57 | </p> |
| #58 | <div style={{ display: "flex", justifyContent: "center", gap: 60, marginTop: 24 }}> |
| #59 | <div style={{ textAlign: "center" }}> |
| #60 | <p style={{ fontSize: 10, color: "#484f58", textTransform: "uppercase", letterSpacing: 2 }}>Issuer</p> |
| #61 | <p style={{ fontSize: 14, color: "#e6edf3", marginTop: 4 }}>{cert.organization}</p> |
| #62 | </div> |
| #63 | <div style={{ textAlign: "center" }}> |
| #64 | <p style={{ fontSize: 10, color: "#484f58", textTransform: "uppercase", letterSpacing: 2 }}>Date</p> |
| #65 | <p style={{ fontSize: 14, color: "#e6edf3", marginTop: 4 }}>{issueStr}</p> |
| #66 | </div> |
| #67 | <div style={{ textAlign: "center" }}> |
| #68 | <p style={{ fontSize: 10, color: "#484f58", textTransform: "uppercase", letterSpacing: 2 }}>Cert ID</p> |
| #69 | <p style={{ fontSize: 14, color: "#00d8ff", marginTop: 4 }}>{cert.id}</p> |
| #70 | </div> |
| #71 | </div> |
| #72 | </div> |
| #73 | </div> |
| #74 | ); |
| #75 | } |
| #76 |