Sertifikat Generator ini dapat membantu teman-teman untuk membuat e sertifikat pelatihan dengan cara mudah dan ribet. fitur ini dapat melengkapi website pelatihan atau hanya sebagai media pengcopy sertifikat yang bisa ditulis sendiri identitasnya oleh peserta pelatihan. fitur ini merupakan versi pertama dari generator dan nantinya akan diupgrade bila ada perkembangan. untuk lebih jelasnya silahkan tontong video dari go for edu disini
Silahkan Isi Form untuk mendapatkan kode embed di google site
Warna Background :Font diisi 2 kali cari di google fontAwali dengan huruf besar :Besar Font (contoh : 80) :Tebal Huruf (normal = 400, Tebal = 700) :kode Warna Font (contoh : #000000) :ID gambar dari google drive :Generate
Reset Kode
Copy Kodenya
Setelah memasukkan Kode silahkan klik Generate, Copy Semua Code jika telah di generatedan reset kode bisa ingin memasukkan kode atau salah memasukkan kode
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sertifikat Generator Go For Edu</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=micro ">
</head>
<body>
<div id="content-desktop">
<div class="label">
<label><a class="fa fa-pencil-square"></a> Nama Peserta :</label>
<input id="name" type='text' placeholder="Nama Di Sertifikat">
<label> | <a class="fa fa-floppy-o"></a> Klik Kanan Pada Gambar Untuk Menyimpan Sertifikat</label>
</div>
<br>
<div>
<canvas id="canvas" height="1050 mm" width="1485 mm" style="width:100%;"></canvas>
</div>
<br>
<div class="copyright">
<label><a class="fa fa-copyright"></a> Sertifikat 1.0 Ini Didukung Oleh <a href="https://www.youtube.com/c/GoForEdu">Go For Edu</a></label>
</div>
</div>
<div id="content-mobile">
<a class="fa fa-picture-o" id="icon"></a> <br>Maaf !!! Sertifikat Hanya Bisa Diakses Menggunakan Komputer/ laptop
</div>
<script src="script.js"></script>
</body>
<style type="text/css">
#content-desktop {display: block;}
#content-mobile {display: none;}
@media screen and (max-width: 768px) {
#content-desktop {display: none;}
#content-mobile {display: block;}
}
body {
color: black;
font-family: Poppins;
font-weight: bold;
text-align: center;
}
.label {
background-color: micro ;
padding: 10px 30px;
}
.copyright {
font-size: 12px;
}
#icon {
font-size: 100px;
}
</style>
<script type="text/javascript">
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const nameInput = document.getElementById('name')
const image = new Image()
image.src = 'https://drive.google.com/uc?export=view&id=micro '
image.onload = function () {
drawImage()
}
function drawImage() {
// ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
ctx.font = 'micro micropx micro '
ctx.fillStyle = 'micro '
ctx.fillText(nameInput.value, 742.5, 450)
ctx.textAlign = 'center'
}
nameInput.addEventListener('input', function () {
drawImage()
})
</script>
oke terima kasih telah berkunjung dan semoga bermanfaat
Posting Komentar
Posting Komentar