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 Template6(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: "conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000)", |
| #14 | display: "flex", |
| #15 | alignItems: "center", |
| #16 | justifyContent: "center", |
| #17 | fontFamily: "'Inter', 'Segoe UI', sans-serif", |
| #18 | boxSizing: "border-box", |
| #19 | }} |
| #20 | > |
| #21 | <div |
| #22 | style={{ |
| #23 | width: 1032, |
| #24 | height: 792, |
| #25 | background: "#ffffff", |
| #26 | borderRadius: 4, |
| #27 | display: "flex", |
| #28 | flexDirection: "column", |
| #29 | alignItems: "center", |
| #30 | justifyContent: "center", |
| #31 | padding: "40px 80px", |
| #32 | textAlign: "center", |
| #33 | }} |
| #34 | > |
| #35 | <p style={{ fontSize: 13, letterSpacing: 8, textTransform: "uppercase", color: "#aaa", marginBottom: 12 }}> |
| #36 | Certificate of Completion |
| #37 | </p> |
| #38 | <h1 style={{ fontSize: 44, fontWeight: 800, margin: "0 0 8px", background: "linear-gradient(135deg, #ff0000, #ff8800, #00aaff, #8800ff)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}> |
| #39 | {cert.courseTitle} |
| #40 | </h1> |
| #41 | <div style={{ width: 160, height: 3, background: "linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff)", margin: "0 auto 28px", borderRadius: 2 }} /> |
| #42 | <p style={{ fontSize: 16, color: "#777", marginBottom: 8 }}>This certifies that</p> |
| #43 | <h2 style={{ fontSize: 52, fontWeight: 700, color: "#222", margin: "0 0 16px" }}> |
| #44 | {cert.recipientName} |
| #45 | </h2> |
| #46 | <p style={{ fontSize: 15, color: "#666", maxWidth: 550, margin: "0 auto 32px", lineHeight: 1.7 }}> |
| #47 | {cert.customText || "Has successfully completed all course requirements and demonstrated outstanding competency."} |
| #48 | </p> |
| #49 | <div style={{ display: "flex", justifyContent: "center", gap: 80, marginTop: 24 }}> |
| #50 | <div style={{ textAlign: "center" }}> |
| #51 | <p style={{ fontSize: 11, color: "#bbb", textTransform: "uppercase", letterSpacing: 2 }}>Organization</p> |
| #52 | <p style={{ fontSize: 15, color: "#333", fontWeight: 600, marginTop: 4 }}>{cert.organization}</p> |
| #53 | </div> |
| #54 | <div style={{ textAlign: "center" }}> |
| #55 | <p style={{ fontSize: 11, color: "#bbb", textTransform: "uppercase", letterSpacing: 2 }}>Date</p> |
| #56 | <p style={{ fontSize: 15, color: "#333", fontWeight: 600, marginTop: 4 }}>{issueStr}</p> |
| #57 | </div> |
| #58 | </div> |
| #59 | <p style={{ fontSize: 10, color: "#ddd", marginTop: 36 }}> |
| #60 | ID: {cert.id} |
| #61 | </p> |
| #62 | </div> |
| #63 | </div> |
| #64 | ); |
| #65 | } |
| #66 |