ChromeGaming · StutiS0004 · Jun 20, 2024 · Jun 20, 2024 · Jun 20, 2024 · Jun 20, 2024
diff --git a/certi.jpg.jpg b/certi.jpg.jpg
diff --git a/filesaver.js 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;
+    }
+  });
diff --git a/index.html b/index.html
@@ -1,44 +1,33 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset=""UTF-8>
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <title>Experience Certificate Generator</title>
-  <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-</head>
-<body>
-    <div class="container">
-        <h1>Experience Certificate Generator</h1>
-        <form>
-            <div class="form-group">
-                <label for="employee-name">
-                    <i class="fas fa-user"></i> Employee Name:
-                </label>
-                <input type="text" id="employee-name" name="employee-name">
-            </div>
-            <div class="form-group">
-                <label for="company-name">
-                    <i class="fas fa-building"></i> Company Name:
-                </label>
-                <input type="text" id="company-name" name="company-name">
-            </div>
-            <div class="form-group">
-                <label for="duration">
-                    <i class="fas fa-calendar-alt"></i> Duration:
-                </label>
-                <input type="text" id="duration" name="duration">
-            </div>
-            <div class="form-group">
-                <label for="designation">
-                    <i class="fas fa-user-tie"></i> Designation:
-                </label>
-                <input type="text" id="designation" name="designation">
-            </div>
-            <button type="submit">Generate Certificate</button>
-        </form>
-    </div>
-
-  <script src="script.js"></script>
-</body>
-</html>
+ certificate
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Experience Certificate Generator</title>
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Experience Certificate Generator</h1>
+    <form id="certificateForm">
+      <label for="employeeName">Employee Name:</label>
+      <input type="text" id="employeeName" required>
+
+      <label for="companyName">Company Name:</label>
+      <input type="text" id="companyName" required>
+
+      <label for="duration">Duration:</label>
+      <input type="text" id="duration" required>
+
+      <label for="designation">Designation:</label>
+      <input type="text" id="designation" required>
+      <canvas id="canvas" height="350px" width="500px"></canvas>
+    </form>
+    <a href="#" id="download-btn"><button >Download Generated Certificate</button></a>
+
+
+      </div>     
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -1,29 +1,70 @@
-document.getElementById('certificateForm').addEventListener('submit', function(e) {
-    e.preventDefault();
+// document.getElementById('certificateForm').addEventListener('submit', function(e) {
+//     e.preventDefault();
 
-    var employeeName = document.getElementById('employeeName').value;
-    var companyName = document.getElementById('companyName').value;
-    var duration = document.getElementById('duration').value;
-    var designation = document.getElementById('designation').value;
+//     const employeeName = document.getElementById('employeeName').value;
+//     const companyName = document.getElementById('companyName').value;
+//     const duration = document.getElementById('duration').value;
+//     const designation = document.getElementById('designation').value;
 
-    var certificateContent = `
-      <p>This is to certify that <strong>${employeeName}</strong> has worked as a <strong>${designation}</strong> at <strong>${companyName}</strong> for a duration of <strong>${duration}</strong>.</p>
-      <p>During their tenure, they have demonstrated excellent performance and contributed significantly to the success of our organization.</p>
-      <p>We wish them all the best in their future endeavors.</p>
-    `;
+//     const certificateContent = `
+//       <p>This is to certify that <strong>${employeeName}</strong> has worked as a <strong>${designation}</strong> at <strong>${companyName}</strong> for a duration of <strong>${duration}</strong>.</p>
+//       <p>During their tenure, they have demonstrated excellent performance and contributed significantly to the success of our organization.</p>
+//       <p>We wish them all the best in their future endeavors.</p>
+//     `;
 
-    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();
-  });
+//     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
+})
+
+