feat: add colors

index.html

@@ -43,9 +43,19 @@
             Powered by <a href="https://muathye.com" target="_blank"
                 class="text-blue-500 hover:underline">muathye.com</a>
         </p>
-        <input type="text" id="text-input"
-            class="w-full p-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-            placeholder="Enter text to generate QR code">
+        <textarea  id="text-input" class="w-full p-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter text to generate QR code"></textarea>
+
+        <!-- Color Pickers -->
+        <div class="mb-4 flex items-center space-x-4">
+            <div class="flex">
+                <label for="foreground-color" class="inilne mr-1 text-gray-700">Foreground Color:</label>
+                <input type="color" id="foreground-color" value="#000000" class="inline p-1 border border-gray-300 rounded">
+            </div>
+            <div class="flex">
+                <label for="background-color" class="inilne mr-1 text-gray-700">Background Color:</label>
+                <input type="color" id="background-color" value="#FFFFFF" class="inline p-1 border border-gray-300 rounded">
+            </div>
+        </div>
         <button id="generate-btn"
             class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 w-full mb-4">Generate
             QR Code</button>