Skip to content

Commit 041fdb3

Browse files
author
Vinod Gaur JD
committed
certificate changes
1 parent 0f3ba20 commit 041fdb3

File tree

3 files changed

+339
-43
lines changed
  • jobsdoor360-website/src/main/ejs/main-files/myaccount/certificate
  • myaccount/certificate
  • staticfiles/mainfiles/myaccount/test-report

3 files changed

+339
-43
lines changed

‎jobsdoor360-website/src/main/ejs/main-files/myaccount/certificate/index.ejs‎

Lines changed: 169 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,147 @@
66
name="description"
77
content="Certificate by JobsDoor360: Learn Full Stack, Java, and Web Development. Advance Your Career with Industry Professionals. Gain In-Demand Skills for Software Jobs. Practice Interviews and Perfect Your CV"
88
/>
9-
<link rel="stylesheet" href="style.css" />
9+
<link rel="stylesheet" href="/style.css" />
1010
<!--<link rel="stylesheet" href="/staticfiles/mainfiles/myaccount/certificate/style.css" />-->
1111
<link
1212
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
1313
rel="stylesheet"
1414
/>
1515
<%- include('../../../partials/head.ejs') %>
16+
<style>
17+
#certificate {
18+
width: 1100px; /* good width for A4 landscape cropping */
19+
max-width: 95%;
20+
background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
21+
border-radius: 12px;
22+
padding: 40px 60px;
23+
box-shadow: 0 10px 30px rgba(20,20,40,0.08);
24+
border: 6px solid #f1e7d6; /* subtle frame */
25+
position: relative;
26+
margin: 10px auto;
27+
}
28+
29+
/* decorative ribbon / badge */
30+
.badge {
31+
position: absolute;
32+
right: 48px;
33+
top: -26px;
34+
background: linear-gradient(180deg,#ffd57a,#ffb84d);
35+
color: #4a2b00;
36+
padding: 12px 18px;
37+
border-radius: 8px;
38+
font-weight: 700;
39+
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
40+
}
41+
42+
.title {
43+
text-align: center;
44+
color: #2b2b2b;
45+
margin-bottom: 12px;
46+
}
47+
.title h1 {
48+
margin: 0;
49+
font-size: 34px;
50+
letter-spacing: 0.6px;
51+
}
52+
.title p {
53+
margin: 6px 0 0;
54+
color: #6b6b6b;
55+
font-size: 14px;
56+
}
57+
58+
.content {
59+
margin-top: 28px;
60+
text-align: center;
61+
}
62+
.recipient {
63+
font-size: 44px;
64+
margin: 10px 0;
65+
font-weight: 700;
66+
color: #0f1724;
67+
letter-spacing: 0.4px;
68+
}
69+
.desc {
70+
font-size: 18px;
71+
color: #3b3b3b;
72+
margin-bottom: 28px;
73+
}
74+
75+
.meta {
76+
display:flex;
77+
justify-content: center;
78+
gap: 28px;
79+
margin-bottom: 28px;
80+
flex-wrap:wrap;
81+
}
82+
.meta .box {
83+
background: rgba(15,23,36,0.03);
84+
border-radius: 8px;
85+
padding: 12px 16px;
86+
min-width: 180px;
87+
text-align: left;
88+
}
89+
.meta .box label {
90+
display:block;
91+
font-size: 12px;
92+
color: #6b6b6b;
93+
}
94+
.meta .box .value {
95+
font-weight: 700;
96+
font-size: 16px;
97+
color: #111827;
98+
}
99+
100+
.footer {
101+
display: flex;
102+
justify-content: center; /* center horizontally */
103+
align-items: center; /* align vertically */
104+
gap: 40px; /* space between issuer and signature */
105+
margin-top: 30px;
106+
flex-wrap: wrap; /* allows stacking on small screens */
107+
}
108+
109+
.issuer {
110+
display: flex;
111+
align-items: center;
112+
gap: 12px;
113+
}
114+
115+
.signatures {
116+
display: flex;
117+
gap: 20px;
118+
}
119+
120+
.sign {
121+
text-align: center;
122+
}
123+
124+
.sign .name {
125+
font-weight: 700;
126+
font-size: 16px;
127+
}
128+
129+
.sign .role {
130+
font-size: 12px;
131+
color: #666;
132+
}
133+
134+
135+
/* small screens */
136+
@media (max-width:720px) {
137+
#certificate { padding: 24px; }
138+
.recipient { font-size:28px; }
139+
.title h1 { font-size:22px; }
140+
.meta { gap:12px; justify-content:center; }
141+
}
142+
143+
#btn {
144+
display: block;
145+
margin: 2px auto;
146+
background-color: #e0e0e0;
147+
}
148+
149+
</style>
16150
</head>
17151

18152
<body>
@@ -21,66 +155,61 @@
21155
<button id="btn" class="btn">Download Certificate</button>
22156
<br>
23157

24-
<div id="pdfContent">
158+
<div id="pdfContent" style="padding-top:50px">
25159
<div id="certificate" role="document" aria-label="Certificate of Completion">
26-
<div class="badge">DSA QUIZ</div>
160+
<div class="badge">JobsDoor360</div>
27161

28162
<div class="title">
29163
<h1>Certificate of Completion</h1>
30164
<p>This certificate is proudly presented to</p>
31165
</div>
32166

33167
<div class="content">
34-
<div class="recipient" id="cert-name">[Participant Name]</div>
168+
<div class="recipient" id="cert-name"></div>
35169
<div class="desc" id="cert-desc">
36-
For successfully passing the <strong>Data Structures & Algorithms (DSA)</strong> quiz with outstanding performance.
170+
For successfully passing the <strong><span id="course"></span></strong> quiz with outstanding performance.
37171
</div>
38172

39173
<div class="meta" aria-hidden="false">
40174
<div class="box">
41175
<label>Score</label>
42-
<div class="value" id="cert-score">95%</div>
176+
<div class="value" id="cert-score"></div>
43177
</div>
44178

45179
<div class="box">
46180
<label>Quiz</label>
47-
<div class="value" id="cert-quiz">DSA Fundamentals — Quiz #3</div>
181+
<div class="value" id="cert-quiz"></div>
48182
</div>
49183

50184
<div class="box">
51185
<label>Date</label>
52-
<div class="value" id="cert-date">Nov 20, 2025</div>
186+
<div class="value" id="cert-date"></div>
53187
</div>
54188

55189
<div class="box">
56190
<label>Duration</label>
57-
<div class="value" id="cert-duration">30 minutes</div>
191+
<div class="value" id="cert-duration"></div>
58192
</div>
59193
</div>
60194

61195
<div class="footer">
62196
<div class="issuer">
63-
<img src="https://via.placeholder.com/56x56.png?text=Logo" alt="Issuer logo" />
197+
<img src="/assets/Jobsdoor360%20-logos__black.png" alt="Jobsdoor360 logo" />
64198
<div class="info">
65-
<div class="org">Jobsdoor360 Academy</div>
66-
<div class="small">Verified by the DSA assessment team</div>
199+
<div class="org" style="visibility: hidden;">Jobsdoor360</div>
67200
</div>
68201
</div>
69202

70203
<div class="signatures" aria-hidden="true">
71204
<div class="sign">
72-
<div class="line"></div>
73-
<div class="name">Shivpriya Gaur</div>
74-
<div class="role">Course Lead</div>
75-
</div>
76-
77-
<div class="sign">
78-
<div class="line"></div>
79205
<div class="name">Vinod Gaur</div>
80-
<div class="role">Head — Assessments</div>
206+
<div class="role">Course Lead</div>
81207
</div>
82208
</div>
83209
</div>
210+
211+
212+
84213
</div>
85214
</div>
86215
</div>
@@ -101,9 +230,28 @@
101230
getData().then(data => {
102231
let name = getLoggedInUserName();
103232
104-
console.log(data, name);
233+
fillCertificate(name, data.percentage, data.course)
105234
});
106235
236+
function fillCertificate(name, percentage, course) {
237+
// sample data — replace with your real data or get from query params
238+
const sample = {
239+
name: name,
240+
score: percentage+" %",
241+
quiz: course,
242+
date: new Date().toLocaleDateString(),
243+
duration: "25 minutes"
244+
};
245+
246+
document.getElementById('course').textContent = sample.quiz.toUpperCase();
247+
248+
document.getElementById('cert-name').textContent = sample.name;
249+
document.getElementById('cert-score').textContent = sample.score;
250+
document.getElementById('cert-quiz').textContent = sample.quiz.toUpperCase();
251+
document.getElementById('cert-date').textContent = sample.date;
252+
document.getElementById('cert-duration').textContent = sample.duration;
253+
}
254+
107255
108256
document.getElementById('btn').addEventListener('click', async () => {
109257
const { jsPDF } = window.jspdf;

0 commit comments

Comments
 (0)