QR Codes

+ + Enter text to generate QR code: + +

+      
+      <div className="image-upload-section">
+        <label htmlFor="image-upload" className="image-upload-label">
+          Add custom image or SVG to QR code center:
+        </label>
+        <div className="image-upload-controls">
+          <input
+            id="image-upload"
+            type="file"
+            accept="image/*,.svg"
+            onChange={handleImageUpload}
+            className="image-upload-input"
+          />
+          {customImage && (
+            <button 
+              onClick={removeCustomImage}
+              className="remove-image-button"
+            >
+              Remove Image
+            </button>
+          )}
+        </div>
+        {customImage && (
+          <div className="image-preview">
+            <img 
+              src={customImageUrl} 
+              alt="Custom image preview" 
+              className="preview-image"
+            />
+            <span className="image-name">{customImage.name}</span>
+          </div>
+        )}
+        
+        {customImage && (
+          <div className="image-size-control">
+            <label htmlFor="image-size" className="size-label">
+              Image Size: {imageSize}%
+            </label>
+            <input
+              id="image-size"
+              type="range"
+              min="10"
+              max="40"
+              value={imageSize}
+              onChange={(e) => setImageSize(parseInt(e.target.value))}
+              className="size-slider"
+            />
+            <div className="size-labels">
+              <span>Small</span>
+              <span>Large</span>
+            </div>
+          </div>
+        )}
+      </div>
+      
+      <div className="textarea-actions">
+        <button 
+          onClick={handleClear}
+          className="clear-button"
+          disabled={!text}
+        >
+          Clear
+        </button>
+        <span className="character-count">
+          Characters: {text.length}
+        </span>
+      </div>
+      
+      {qrCodeUrl && (
+        <div className="qr-code-container">
+          <h3>QR Code {customImage && '(with custom image)'}</h3>
+          <img
+            src={qrCodeUrl}
+            alt="QR Code"
+            className="qr-code-image"
+          />
+          <p className="qr-code-info">
+            Scan this QR code with any QR code reader app
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TextAreaComponent 
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..4605133
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './style.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+) 
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..31ee4c3
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,405 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.App {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.textarea-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 2rem;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+.textarea-label {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: #e0e0e0;
+  text-align: left;
+}
+
+.textarea-input {
+  width: 100%;
+  min-height: 120px;
+  padding: 1rem;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  color: #ffffff;
+  font-size: 1rem;
+  font-family: inherit;
+  resize: vertical;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.textarea-input:focus {
+  outline: none;
+  border-color: #646cff;
+  box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.1);
+}
+
+.textarea-input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.textarea-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.clear-button {
+  padding: 0.75rem 1.5rem;
+  background: #646cff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.clear-button:hover:not(:disabled) {
+  background: #535bf2;
+  transform: translateY(-1px);
+}
+
+.clear-button:disabled {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.3);
+  cursor: not-allowed;
+}
+
+.character-count {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 500;
+}
+
+.image-upload-section {
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.image-upload-label {
+  display: block;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #e0e0e0;
+  margin-bottom: 1rem;
+}
+
+.image-upload-controls {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.image-upload-input {
+  flex: 1;
+  padding: 0.75rem;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  color: #ffffff;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.image-upload-input:hover {
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.image-upload-input:focus {
+  outline: none;
+  border-color: #646cff;
+  box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.1);
+}
+
+.remove-image-button {
+  padding: 0.75rem 1rem;
+  background: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.remove-image-button:hover {
+  background: #c82333;
+  transform: translateY(-1px);
+}
+
+.image-preview {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.preview-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.image-name {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 500;
+}
+
+.image-size-control {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.size-label {
+  display: block;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #e0e0e0;
+  margin-bottom: 0.5rem;
+}
+
+.size-slider {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.2);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-bottom: 0.5rem;
+}
+
+.size-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #646cff;
+  cursor: pointer;
+  border: 2px solid #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.size-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #646cff;
+  cursor: pointer;
+  border: 2px solid #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.size-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 500;
+}
+
+.qr-code-container {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  text-align: center;
+}
+
+.qr-code-container h3 {
+  margin: 0 0 1rem 0;
+  color: #e0e0e0;
+  font-size: 1.2rem;
+}
+
+.qr-code-image {
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  background: white;
+  margin: 0 auto;
+  display: block;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  height: auto;
+}
+
+.qr-code-info {
+  margin: 1rem 0 0 0;
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.7);
+  font-style: italic;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  .textarea-container {
+    background: rgba(0, 0, 0, 0.02);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .textarea-label {
+    color: #213547;
+  }
+  .textarea-input {
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    background: rgba(255, 255, 255, 0.8);
+    color: #213547;
+  }
+  .textarea-input::placeholder {
+    color: rgba(0, 0, 0, 0.5);
+  }
+  .clear-button:disabled {
+    background: rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.3);
+  }
+  .character-count {
+    color: rgba(0, 0, 0, 0.7);
+  }
+  
+  .image-upload-section {
+    background: rgba(0, 0, 0, 0.02);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  
+  .image-upload-label {
+    color: #213547;
+  }
+  
+  .image-upload-input {
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    background: rgba(255, 255, 255, 0.8);
+    color: #213547;
+  }
+  
+  .image-upload-input:hover {
+    border-color: rgba(0, 0, 0, 0.4);
+  }
+  
+  .image-preview {
+    background: rgba(0, 0, 0, 0.02);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  
+  .preview-image {
+    border: 2px solid rgba(0, 0, 0, 0.2);
+  }
+  
+  .image-name {
+    color: rgba(0, 0, 0, 0.8);
+  }
+  
+  .image-size-control {
+    background: rgba(0, 0, 0, 0.02);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  
+  .size-label {
+    color: #213547;
+  }
+  
+  .size-slider {
+    background: rgba(0, 0, 0, 0.2);
+  }
+  
+  .size-labels {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  
+  .qr-code-container {
+    background: rgba(0, 0, 0, 0.02);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  
+  .qr-code-container h3 {
+    color: #213547;
+  }
+  
+  .qr-code-image {
+    border: 2px solid rgba(0, 0, 0, 0.2);
+  }
+  
+  .qr-code-info {
+    color: rgba(0, 0, 0, 0.7);
+  }
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..f5d76d9
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+}) 
\ No newline at end of file

QR Code Generator