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 Template8(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: "#ffffff", |
| #14 | fontFamily: "'Segoe UI', 'Helvetica Neue', sans-serif", |
| #15 | display: "flex", |
| #16 | flexDirection: "column", |
| #17 | position: "relative", |
| #18 | boxSizing: "border-box", |
| #19 | overflow: "hidden", |
| #20 | }} |
| #21 | > |
| #22 | {/* Emerald header */} |
| #23 | <div |
| #24 | style={{ |
| #25 | background: "linear-gradient(135deg, #1a6b3c 0%, #0d4f2a 100%)", |
| #26 | padding: "36px 60px", |
| #27 | display: "flex", |
| #28 | alignItems: "center", |
| #29 | gap: 20, |
| #30 | }} |
| #31 | > |
| #32 | {/* Leaf SVG */} |
| #33 | <svg width="48" height="48" viewBox="0 0 48 48" fill="none" opacity="0.8"> |
| #34 | <path d="M24 4C24 4 8 16 8 28C8 36 15 44 24 44C33 44 40 36 40 28C40 16 24 4 24 4Z" fill="#4ade80" opacity="0.3" /> |
| #35 | <path d="M24 8C24 8 12 18 12 28C12 34 17 40 24 40C31 40 36 34 36 28C36 18 24 8 24 8Z" fill="none" stroke="#86efac" strokeWidth="1.5" /> |
| #36 | <line x1="24" y1="44" x2="24" y2="16" stroke="#86efac" strokeWidth="1" /> |
| #37 | <path d="M24 28 Q18 22 14 18" fill="none" stroke="#86efac" strokeWidth="0.8" /> |
| #38 | <path d="M24 32 Q30 26 34 22" fill="none" stroke="#86efac" strokeWidth="0.8" /> |
| #39 | </svg> |
| #40 | <div> |
| #41 | <p style={{ fontSize: 11, letterSpacing: 4, textTransform: "uppercase", color: "#86efac", marginBottom: 4 }}> |
| #42 | Sustainability Certificate |
| #43 | </p> |
| #44 | <h1 style={{ fontSize: 32, fontWeight: 700, color: "#ffffff", margin: 0 }}> |
| #45 | {cert.courseTitle} |
| #46 | </h1> |
| #47 | </div> |
| #48 | </div> |
| #49 | |
| #50 | <div style={{ flex: 1, textAlign: "center", padding: "40px 80px" }}> |
| #51 | <p style={{ fontSize: 16, color: "#666", marginBottom: 8 }}>Awarded to</p> |
| #52 | <h2 style={{ fontSize: 48, color: "#1a6b3c", margin: "0 0 16px", fontWeight: 600 }}> |
| #53 | {cert.recipientName} |
| #54 | </h2> |
| #55 | <div style={{ width: 80, height: 2, background: "#4ade80", margin: "0 auto 24px" }} /> |
| #56 | <p style={{ fontSize: 15, color: "#555", maxWidth: 550, margin: "0 auto 36px", lineHeight: 1.7 }}> |
| #57 | {cert.customText || "For demonstrating commitment to sustainable practices and completing all certification requirements with distinction."} |
| #58 | </p> |
| #59 | <div style={{ display: "flex", justifyContent: "center", gap: 80, marginTop: 24 }}> |
| #60 | <div style={{ textAlign: "center" }}> |
| #61 | <p style={{ fontSize: 11, color: "#aaa", textTransform: "uppercase", letterSpacing: 2 }}>Organization</p> |
| #62 | <p style={{ fontSize: 15, color: "#1a6b3c", fontWeight: 600, marginTop: 4 }}>{cert.organization}</p> |
| #63 | </div> |
| #64 | <div style={{ textAlign: "center" }}> |
| #65 | <p style={{ fontSize: 11, color: "#aaa", textTransform: "uppercase", letterSpacing: 2 }}>Date</p> |
| #66 | <p style={{ fontSize: 15, color: "#1a6b3c", fontWeight: 600, marginTop: 4 }}>{issueStr}</p> |
| #67 | </div> |
| #68 | </div> |
| #69 | </div> |
| #70 | |
| #71 | <div style={{ textAlign: "center", paddingBottom: 20 }}> |
| #72 | <p style={{ fontSize: 10, color: "#ccc" }}>ID: {cert.id}</p> |
| #73 | </div> |
| #74 | </div> |
| #75 | ); |
| #76 | } |
| #77 |