Updates

thierryc · Jul 5, 2024 · e1d12f7 · e1d12f7
1 parent f8d57ad
commit e1d12f7
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 23 deletions.
diff --git a/assets/index-DS1TjvAw.css → assets/index-B72vUZpj.css b/assets/index-DS1TjvAw.css → assets/index-B72vUZpj.css
diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -1,13 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Penpot plugin example</title>
-    <script type="module" crossorigin src="/index.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DS1TjvAw.css">
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Penpot plugin example</title>
+  <script type="module" crossorigin src="/index.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-B72vUZpj.css">
+</head>
+
+<body>
+  <form class="sections-wrapper">
+    <section class="regular-generate">
+      <label for="qrContent" class="body-s">Enter QR Code Content:</label>
+      <input type="text" id="qrContent" name="qrContent" placeholder="Enter content for QR code"
+        aria-label="QR code content" value="https://ap.cx/" class="input qrcode-input">
+      <div class="preview-container">
+        <div id="app" class="svg-preview"></div>
+      </div>
+      <button type="button" id="generateBtn" aria-label="Generate QR code" data-appearance="primary">Generate QR
+        Code</button>
+    </section>
+    <section class="extra-options">
+      <div class="select-container">
+        <label for="correctionLevel" class="body-s">Select QR Code Correction Level</label>
+        <select id="correctionLevel" name="correctionLevel" class="select">
+          <option value="L">Low (7%)</option>
+          <option value="M" selected>Medium (15%)</option>
+          <option value="Q">Quartile (25%)</option>
+          <option value="H">High (30%)</option>
+        </select>
+      </div>
+    </section>
+  </form>
+</body>
+
+</html>
diff --git a/index.js b/index.js
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,11 @@
 {
-  "name": "Penpot starter plugin",
+  "name": "QRcode",
   "host": "http://localhost:4400",
   "code": "plugin.js",
-  "description": "This is a starter plugin for Penpot",
-  "permissions": ["page:read", "file:read", "selection:read"]
+  "description": "QR code generator plugin for Penpot by thierryc on github.com",
+  "icon": "/icon.png",
+  "permissions": [
+    "content:read",
+    "content:write"
+  ]
 }
diff --git a/manifest.local.json b/manifest.local.json
@@ -0,0 +1,11 @@
+{
+  "name": "QRcode",
+  "host": "http://localhost:4400",
+  "code": "plugin.js",
+  "description": "QR code generator plugin for Penpot by thierryc on github.com",
+  "icon": "/icon.png",
+  "permissions": [
+    "content:read",
+    "content:write"
+  ]
+}
diff --git a/plugin.js b/plugin.js