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 Template10(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: "linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%)", |
| #14 | display: "flex", |
| #15 | alignItems: "center", |
| #16 | justifyContent: "center", |
| #17 | fontFamily: "'Inter', 'Segoe UI', sans-serif", |
| #18 | boxSizing: "border-box", |
| #19 | }} |
| #20 | > |
| #21 | {/* Frosted glass card */} |
| #22 | <div |
| #23 | style={{ |
| #24 | width: 960, |
| #25 | height: 720, |
| #26 | background: "rgba(255, 255, 255, 0.15)", |
| #27 | backdropFilter: "blur(20px)", |
| #28 | WebkitBackdropFilter: "blur(20px)", |
| #29 | borderRadius: 24, |
| #30 | border: "1px solid rgba(255, 255, 255, 0.3)", |
| #31 | display: "flex", |
| #32 | flexDirection: "column", |
| #33 | alignItems: "center", |
| #34 | justifyContent: "center", |
| #35 | padding: "40px 80px", |
| #36 | textAlign: "center", |
| #37 | boxShadow: "0 8px 32px rgba(0, 0, 0, 0.1)", |
| #38 | }} |
| #39 | > |
| #40 | <p style={{ fontSize: 12, letterSpacing: 6, textTransform: "uppercase", color: "rgba(255,255,255,0.6)", marginBottom: 12 }}> |
| #41 | Certificate of Completion |
| #42 | </p> |
| #43 | <h1 style={{ fontSize: 40, fontWeight: 700, color: "#ffffff", margin: "0 0 8px", textShadow: "0 2px 10px rgba(0,0,0,0.1)" }}> |
| #44 | {cert.courseTitle} |
| #45 | </h1> |
| #46 | <div style={{ width: 100, height: 2, background: "rgba(255,255,255,0.4)", margin: "0 auto 28px", borderRadius: 1 }} /> |
| #47 | <p style={{ fontSize: 15, color: "rgba(255,255,255,0.7)", marginBottom: 8 }}>Awarded to</p> |
| #48 | <h2 style={{ fontSize: 50, fontWeight: 600, color: "#ffffff", margin: "0 0 16px", textShadow: "0 2px 8px rgba(0,0,0,0.1)" }}> |
| #49 | {cert.recipientName} |
| #50 | </h2> |
| #51 | <p style={{ fontSize: 14, color: "rgba(255,255,255,0.6)", maxWidth: 500, margin: "0 auto 32px", lineHeight: 1.7 }}> |
| #52 | {cert.customText || "For the successful completion of all program requirements with demonstrated excellence."} |
| #53 | </p> |
| #54 | <div style={{ display: "flex", justifyContent: "center", gap: 80, marginTop: 20 }}> |
| #55 | <div style={{ textAlign: "center" }}> |
| #56 | <p style={{ fontSize: 11, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", letterSpacing: 2 }}>Organization</p> |
| #57 | <p style={{ fontSize: 15, color: "#fff", fontWeight: 600, marginTop: 4 }}>{cert.organization}</p> |
| #58 | </div> |
| #59 | <div style={{ textAlign: "center" }}> |
| #60 | <p style={{ fontSize: 11, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", letterSpacing: 2 }}>Date</p> |
| #61 | <p style={{ fontSize: 15, color: "#fff", fontWeight: 600, marginTop: 4 }}>{issueStr}</p> |
| #62 | </div> |
| #63 | </div> |
| #64 | <p style={{ fontSize: 10, color: "rgba(255,255,255,0.3)", marginTop: 36 }}> |
| #65 | ID: {cert.id} |
| #66 | </p> |
| #67 | </div> |
| #68 | </div> |
| #69 | ); |
| #70 | } |
| #71 |