Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit de5bce0

Browse files
committed
7th Update
1 parent b9ec462 commit de5bce0

File tree

6 files changed

+1301
-17
lines changed

6 files changed

+1301
-17
lines changed

‎Certificate/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Beautiful Certificate</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="certificate">
11+
<div class="header">
12+
<h1>Certificate of Achievement</h1>
13+
</div>
14+
<div class="content">
15+
<p>This certificate is awarded to:</p>
16+
<h2 id="recipientName">[Recipient's Name]</h2>
17+
<p>For outstanding performance and dedication in the field of...</p>
18+
<p>Date: July 23, 2023</p>
19+
</div>
20+
<div class="signature">
21+
<p>Signature</p>
22+
</div>
23+
</div>
24+
25+
<button id="generateCertificate">Generate Certificate</button>
26+
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎Certificate/script.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Function to update the recipient's name dynamically
2+
function updateRecipientName() {
3+
const recipientNameElement = document.getElementById('recipientName');
4+
const recipientNameInput = prompt('Enter the recipient\'s name:');
5+
if (recipientNameInput) {
6+
recipientNameElement.textContent = recipientNameInput;
7+
}
8+
}
9+
10+
// Function to generate and download the certificate as a PDF
11+
function downloadCertificate() {
12+
const certificate = document.querySelector('.certificate');
13+
const opt = {
14+
margin: 0,
15+
filename: 'certificate.pdf',
16+
image: { type: 'jpeg', quality: 0.98 },
17+
html2canvas: { scale: 2 },
18+
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
19+
};
20+
21+
html2pdf().from(certificate).set(opt).outputPdf().then((pdf) => {
22+
pdf.save();
23+
});
24+
}
25+
26+
// Event listener to update recipient's name
27+
document.getElementById('generateCertificate').addEventListener('click', updateRecipientName);
28+
29+
// Event listener to generate and download the certificate as PDF
30+
document.getElementById('generateCertificate').addEventListener('click', downloadCertificate);

‎Certificate/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
background-color: #f0f0f0;
10+
}
11+
12+
.certificate {
13+
width: 80%;
14+
max-width: 600px;
15+
background-color: #f9f6f6;
16+
background-image: linear-gradient(147deg, #ff8a00 0%, #e52e71 100%);
17+
color: #fff;
18+
border: 2px solid #fff;
19+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
20+
padding: 20px;
21+
}
22+
23+
.header {
24+
text-align: center;
25+
margin-bottom: 20px;
26+
}
27+
28+
.header h1 {
29+
font-size: 24px;
30+
margin: 0;
31+
padding: 5px 0;
32+
color: #fff;
33+
border-bottom: 2px solid #fff;
34+
}
35+
36+
.content {
37+
text-align: center;
38+
}
39+
40+
.content p {
41+
font-size: 16px;
42+
color: #fff;
43+
}
44+
45+
.content h2 {
46+
font-size: 28px;
47+
color: #fff;
48+
margin-top: 10px;
49+
margin-bottom: 20px;
50+
}
51+
52+
.signature {
53+
text-align: center;
54+
margin-top: 30px;
55+
}
56+
57+
.signature p {
58+
font-size: 18px;
59+
font-style: italic;
60+
color: #fff;
61+
}
62+
63+
button {
64+
display: block;
65+
margin: 20px auto;
66+
padding: 10px 20px;
67+
font-size: 16px;
68+
border: none;
69+
background-color: #fff;
70+
color: #555;
71+
cursor: pointer;
72+
border-radius: 5px;
73+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
74+
transition: background-color 0.3s ease;
75+
}
76+
77+
button:hover {
78+
background-color: #ddd;
79+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /