qr-code generator

tusuii · Jun 2, 2023 · 40cb8a7 · 40cb8a7
1 parent a6c590f
commit 40cb8a7
Show file tree

Hide file tree

Showing 7 changed files with 696 additions and 0 deletions.
diff --git a/qrgenerator/manifest.json b/qrgenerator/manifest.json
@@ -0,0 +1,11 @@
+{
+  "manifest_version": 2,
+  "name": "QR Code Generator",
+  "version": "1.0",
+  "browser_action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+    }
+  },
+  "permissions": ["activeTab"]
+}
diff --git a/qrgenerator/popup.html b/qrgenerator/popup.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>QR Generator</title>
+    <link rel="stylesheet" href="styles.css" />
+    <script src="qrcode.js"></script>
+    <script src="popup.js"></script>
+  </head>
+  <body>
+    <div class="button-container">
+      <input
+        type="text"
+        id="inputText"
+        placeholder="Enter text / Link"
+        class="input"
+      />
+      <button id="generateButton" class="button">Generate</button>
+    </div>
+    <div id="qrcode" class="qrcode"></div>
+  </body>
+</html>
diff --git a/qrgenerator/popup.js b/qrgenerator/popup.js
@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", function () {
+  var generateButton = document.getElementById("generateButton");
+
+  generateButton.addEventListener("click", function () {
+    var inputText = document.getElementById("inputText").value;
+    if (inputText) {
+      var qrcodeDiv = document.getElementById("qrcode");
+      qrcodeDiv.innerHTML = "";
+      new QRCode(qrcodeDiv, inputText);
+    }
+  });
+});
+
diff --git a/qrgenerator/qr_generation.png b/qrgenerator/qr_generation.png
diff --git a/qrgenerator/qrcode.js b/qrgenerator/qrcode.js
diff --git a/qrgenerator/start-screen.png b/qrgenerator/start-screen.png
diff --git a/qrgenerator/styles.css b/qrgenerator/styles.css
@@ -0,0 +1,37 @@
+body {
+  border: 1px solid black;
+  padding: 8px;
+}
+.button-container {
+  display: flex;
+}
+
+.input {
+  width: auto;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  font-size: 18px;
+  padding: 2px 2px;
+}
+
+.button {
+  display: inline-block;
+  margin-left: 5px;
+  padding: 2px 2px;
+  background: linear-gradient(to bottom, #004c63, #077379);
+  color: white;
+  font-size: 18px;
+  border-radius: 4px;
+  transition: background 0.3s ease;
+}
+
+.button:hover {
+  background: linear-gradient(to bottom, #022b2e, #074779);
+}
+
+.qrcode {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 15px;
+}