diff --git a/certi.jpg.jpg b/certi.jpg.jpg
new file mode 100644
index 0000000..81bb404
Binary files /dev/null and b/certi.jpg.jpg differ
diff --git a/filesaver.js b/filesaver.js
new file mode 100644
index 0000000..11461ab
--- /dev/null
+++ b/filesaver.js
@@ -0,0 +1,188 @@
+(function (global, factory) {
+ if (typeof define === "function" && define.amd) {
+ define([], factory);
+ } else if (typeof exports !== "undefined") {
+ factory();
+ } else {
+ var mod = {
+ exports: {}
+ };
+ factory();
+ global.FileSaver = mod.exports;
+ }
+ })(this, function () {
+ "use strict";
+
+ /*
+ * FileSaver.js
+ * A saveAs() FileSaver implementation.
+ *
+ * By Eli Grey, http://eligrey.com
+ *
+ * License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
+ * source : http://purl.eligrey.com/github/FileSaver.js
+ */
+ // The one and only way of getting global scope in all environments
+ // https://stackoverflow.com/q/3277182/1008999
+ var _global = typeof window === 'object' && window.window === window ? window : typeof self === 'object' && self.self === self ? self : typeof global === 'object' && global.global === global ? global : void 0;
+
+ function bom(blob, opts) {
+ if (typeof opts === 'undefined') opts = {
+ autoBom: false
+ };else if (typeof opts !== 'object') {
+ console.warn('Deprecated: Expected third argument to be a object');
+ opts = {
+ autoBom: !opts
+ };
+ } // prepend BOM for UTF-8 XML and text/* types (including HTML)
+ // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
+
+ if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
+ return new Blob([String.fromCharCode(0xFEFF), blob], {
+ type: blob.type
+ });
+ }
+
+ return blob;
+ }
+
+ function download(url, name, opts) {
+ var xhr = new XMLHttpRequest();
+ xhr.open('GET', url);
+ xhr.responseType = 'blob';
+
+ xhr.onload = function () {
+ saveAs(xhr.response, name, opts);
+ };
+
+ xhr.onerror = function () {
+ console.error('could not download file');
+ };
+
+ xhr.send();
+ }
+
+ function corsEnabled(url) {
+ var xhr = new XMLHttpRequest(); // use sync to avoid popup blocker
+
+ xhr.open('HEAD', url, false);
+
+ try {
+ xhr.send();
+ } catch (e) {}
+
+ return xhr.status >= 200 && xhr.status <= 299;
+ } // `a.click()` doesn't work for all browsers (#465)
+
+
+ function click(node) {
+ try {
+ node.dispatchEvent(new MouseEvent('click'));
+ } catch (e) {
+ var evt = document.createEvent('MouseEvents');
+ evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+ node.dispatchEvent(evt);
+ }
+ } // Detect WebView inside a native macOS app by ruling out all browsers
+ // We just need to check for 'Safari' because all other browsers (besides Firefox) include that too
+ // https://www.whatismybrowser.com/guides/the-latest-user-agent/macos
+
+
+ var isMacOSWebView = /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent);
+ var saveAs = _global.saveAs || ( // probably in some web worker
+ typeof window !== 'object' || window !== _global ? function saveAs() {}
+ /* noop */
+ // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView
+ : 'download' in HTMLAnchorElement.prototype && !isMacOSWebView ? function saveAs(blob, name, opts) {
+ var URL = _global.URL || _global.webkitURL;
+ var a = document.createElement('a');
+ name = name || blob.name || 'download';
+ a.download = name;
+ a.rel = 'noopener'; // tabnabbing
+ // TODO: detect chrome extensions & packaged apps
+ // a.target = '_blank'
+
+ if (typeof blob === 'string') {
+ // Support regular links
+ a.href = blob;
+
+ if (a.origin !== location.origin) {
+ corsEnabled(a.href) ? download(blob, name, opts) : click(a, a.target = '_blank');
+ } else {
+ click(a);
+ }
+ } else {
+ // Support blobs
+ a.href = URL.createObjectURL(blob);
+ setTimeout(function () {
+ URL.revokeObjectURL(a.href);
+ }, 4E4); // 40s
+
+ setTimeout(function () {
+ click(a);
+ }, 0);
+ }
+ } // Use msSaveOrOpenBlob as a second approach
+ : 'msSaveOrOpenBlob' in navigator ? function saveAs(blob, name, opts) {
+ name = name || blob.name || 'download';
+
+ if (typeof blob === 'string') {
+ if (corsEnabled(blob)) {
+ download(blob, name, opts);
+ } else {
+ var a = document.createElement('a');
+ a.href = blob;
+ a.target = '_blank';
+ setTimeout(function () {
+ click(a);
+ });
+ }
+ } else {
+ navigator.msSaveOrOpenBlob(bom(blob, opts), name);
+ }
+ } // Fallback to using FileReader and a popup
+ : function saveAs(blob, name, opts, popup) {
+ // Open a popup immediately do go around popup blocker
+ // Mostly only available on user interaction and the fileReader is async so...
+ popup = popup || open('', '_blank');
+
+ if (popup) {
+ popup.document.title = popup.document.body.innerText = 'downloading...';
+ }
+
+ if (typeof blob === 'string') return download(blob, name, opts);
+ var force = blob.type === 'application/octet-stream';
+
+ var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari;
+
+ var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);
+
+ if ((isChromeIOS || force && isSafari || isMacOSWebView) && typeof FileReader !== 'undefined') {
+ // Safari doesn't allow downloading of blob URLs
+ var reader = new FileReader();
+
+ reader.onloadend = function () {
+ var url = reader.result;
+ url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;');
+ if (popup) popup.location.href = url;else location = url;
+ popup = null; // reverse-tabnabbing #460
+ };
+
+ reader.readAsDataURL(blob);
+ } else {
+ var URL = _global.URL || _global.webkitURL;
+ var url = URL.createObjectURL(blob);
+ if (popup) popup.location = url;else location.href = url;
+ popup = null; // reverse-tabnabbing #460
+
+ setTimeout(function () {
+ URL.revokeObjectURL(url);
+ }, 4E4); // 40s
+ }
+ });
+ _global.saveAs = saveAs.saveAs = saveAs;
+
+ if (typeof module !== 'undefined') {
+ module.exports = saveAs;
+ }
+ });
\ No newline at end of file
diff --git a/index.html b/index.html
index 7c198d5..e8e3d44 100644
--- a/index.html
+++ b/index.html
@@ -1,44 +1,33 @@
-
-
-
-
-
- Experience Certificate Generator
-
-
-
-
-
-
Experience Certificate Generator
-
-
This is to certify that ${employeeName} has worked as a ${designation} at ${companyName} for a duration of ${duration}.
- During their tenure, they have demonstrated excellent performance and contributed significantly to the success of our organization.
- We wish them all the best in their future endeavors.
- `;
+// const certificateContent = `
+// This is to certify that ${employeeName} has worked as a ${designation} at ${companyName} for a duration of ${duration}.
+// During their tenure, they have demonstrated excellent performance and contributed significantly to the success of our organization.
+// We wish them all the best in their future endeavors.
+// `;
- document.getElementById('certificateContent').innerHTML = certificateContent;
- document.getElementById('certificateOutput').classList.remove('hidden');
- document.getElementById('downloadBtn').classList.remove('hidden');
- });
+// document.getElementById('certificateContent').innerHTML = certificateContent;
+// document.getElementById('certificateOutput').classList.remove('hidden');
+// document.getElementById('downloadBtn').classList.remove('hidden');
+// });
- document.getElementById('downloadBtn').addEventListener('click', function() {
- var certificateText = document.getElementById('certificateContent').textContent;
- var blob = new Blob([certificateText], { type: 'text/plain' });
- var url = URL.createObjectURL(blob);
- var link = document.createElement('a');
+// document.getElementById('downloadBtn').addEventListener('click', function() {
+// const certificateText = document.getElementById('certificateContent').textContent;
+// const blob = new Blob([certificateText], { type: 'text/plain' });
+// const url = URL.createObjectURL(blob);
+// const link = document.createElement('a');
- link.href = url;
- link.download = 'experience_certificate.txt';
- link.click();
- });
\ No newline at end of file
+// link.href = url;
+// link.download = 'experience_certificate.txt';
+// link.click();
+// });
+const canvas = document.getElementById('canvas')
+const ctx = canvas.getContext('2d')
+const nameInput = document.getElementById('employeeName')
+const designationInput = document.getElementById('designation')
+const company = document.getElementById('companyName')
+const Duration = document.getElementById('duration')
+const downloadBtn = document.getElementById('download-btn')
+const image = new Image()
+
+image.src = "certi.jpg.jpg"
+image.onload = function () {
+ drawImage()
+}
+
+function drawImage() {
+ // ctx.clearRect(0, 0, canvas.width, canvas.height)
+ ctx.drawImage(image,-70, -14, canvas.width, canvas.height)
+ ctx.font = '10px sans-serif'
+ ctx.fillStyle = '#FFFFFF'
+ ctx.fillText(nameInput.value, 40, 180)
+ ctx.fillText(designationInput.value, 160, 200)
+ ctx.fillText(company.value,220,200 )
+
+}
+
+nameInput.addEventListener('input', function () {
+ drawImage()
+})
+company.addEventListener('input', function () {
+ drawImage()
+})
+designationInput.addEventListener('input', function () {
+ drawImage()
+})
+
+downloadBtn.addEventListener('click', function () {
+ downloadBtn.href = canvas.toDataURL('image/jpg')
+ downloadBtn.download = 'Certificate - ' + nameInput.value
+})
+
+
diff --git a/styles.css b/styles.css
index 7abe665..e32632e 100644
--- a/styles.css
+++ b/styles.css
@@ -10,64 +10,48 @@ body {
}
.container {
- background: #ffffff;
- padding: 20px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- border-radius: 8px;
- max-width: 400px;
- width: 100%;
- text-align: center;
-}
-h1 {
- margin-bottom: 20px;
- font-size: 24px;
- color: #333;
-}
+ max-width: 500px;
+ margin: 0 auto;
+ padding: 20px;
+ }
+
+ h1 {
+ text-align: center;
+ }
+
+ form {
+ margin-bottom: 20px;
+ }
+
+ label {
+ display: block;
+ margin-bottom: 5px;
+ }
+
+ input[type="text"] {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ margin-bottom: 10px;
+ }
+
+ button {
+ background-color: #4CAF50;
+ color: white;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ .certificate-preview {
+ margin-top: 20px;
+ border: 1px solid #ccc;
+ padding: 20px;
+ font-family: Arial, sans-serif;
+ }
+
-.form-group {
- margin-bottom: 15px;
- text-align: left;
- position: relative;
-}
-
-.form-group label {
- display: flex;
- align-items: center;
- margin-bottom: 5px;
- color: #555;
-}
-
-.form-group i {
- margin-right: 10px;
- color: #007BFF;
-}
-
-.form-group input {
- width: calc(100% - 20px);
- padding: 8px 10px;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 16px;
- outline: none;
- transition: border-color 0.3s;
-}
-
-.form-group input:focus {
- border-color: #007BFF;
-}
-
-button {
- background: #28a745;
- color: #fff;
- border: none;
- padding: 10px 15px;
- border-radius: 4px;
- cursor: pointer;
- font-size: 16px;
- transition: background 0.3s;
-}
-
-button:hover {
- background: #218838;
-}