this is the version 2 code, but I do not have access to the node env

rnddave · May 14, 2024 · 5f3b7b0 · 5f3b7b0
1 parent 4023daf
commit 5f3b7b0
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!-- index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>QR Code Generator</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <h1>QR Code Generator</h1>
+    <form id="qrForm">
+      <div class="form-group">
+        <label for="url">URL:</label>
+        <input type="url" id="url" name="url" required>
+      </div>
+      <div class="form-group">
+        <label for="logo">Logo:</label>
+        <input type="file" id="logo" name="logo" accept="image/*" required>
+        <img id="logoPreview" src="" alt="Logo Preview" style="display: none;">
+      </div>
+      <button type="submit">Generate QR Code</button>
+    </form>
+    <div class="qr-preview">
+      <img id="qrCodeImage" src="" alt="QR Code Preview">
+      <div class="download-options">
+        <button id="downloadPNG">Download PNG</button>
+        <button id="downloadPDF">Download PDF</button>
+        <button id="downloadSVG">Download SVG</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,95 @@
+// script.js
+const form = document.getElementById('qrForm');
+const logoInput = document.getElementById('logo');
+const logoPreview = document.getElementById('logoPreview');
+const qrCodeImage = document.getElementById('qrCodeImage');
+const downloadPNG = document.getElementById('downloadPNG');
+const downloadPDF = document.getElementById('downloadPDF');
+const downloadSVG = document.getElementById('downloadSVG');
+
+logoInput.addEventListener('change', () => {
+  const file = logoInput.files[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = () => {
+      logoPreview.src = reader.result;
+      logoPreview.style.display = 'inline-block';
+    };
+    reader.readAsDataURL(file);
+  }
+});
+
+form.addEventListener('submit', async (event) => {
+  event.preventDefault();
+  const url = document.getElementById('url').value;
+  const logo = logoInput.files[0];
+
+  const formData = new FormData();
+  formData.append('url', url);
+  formData.append('logo', logo);
+
+  try {
+    const response = await fetch('/generate-qr-code', {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (response.ok) {
+      const blob = await response.blob();
+      const imageUrl = URL.createObjectURL(blob);
+      qrCodeImage.src = imageUrl;
+    } else {
+      console.error('Error generating QR code:', response.statusText);
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  }
+});
+
+downloadPNG.addEventListener('click', async () => {
+  try {
+    const response = await fetch('/download-qr-code?format=png');
+    const blob = await response.blob();
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'qr-code.png';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  } catch (error) {
+    console.error('Error:', error);
+  }
+});
+
+downloadPDF.addEventListener('click', async () => {
+  try {
+    const response = await fetch('/download-qr-code?format=pdf');
+    const blob = await response.blob();
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'qr-code.pdf';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  } catch (error) {
+    console.error('Error:', error);
+  }
+});
+
+downloadSVG.addEventListener('click', async () => {
+  try {
+    const response = await fetch('/download-qr-code?format=svg');
+    const blob = await response.blob();
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'qr-code.svg';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  } catch (error) {
+    console.error('Error:', error);
+  }
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,34 @@
+/* styles.css */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+  }
+
+  .container {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  .form-group {
+    margin-bottom: 10px;
+  }
+
+  #logoPreview {
+    max-width: 100px;
+    max-height: 100px;
+  }
+
+  .qr-preview {
+    text-align: center;
+    margin-top: 20px;
+  }
+
+  #qrCodeImage {
+    max-width: 300px;
+    max-height: 300px;
+  }
+
+  .download-options {
+    margin-top: 10px;
+  }