add more features for generating qr codes

index.html

@@ -4,8 +4,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>QRGenX - Free QR Code Generator</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.tailwindcss.com">
+        // Get current location
+        function getCurrentLocation() {
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(
+                    function(position) {
+                        document.getElementById('locationLatitude').value = position.coords.latitude.toFixed(6);
+                        document.getElementById('locationLongitude').value = position.coords.longitude.toFixed(6);
+                    },
+                    function(error) {
+                        showError("Unable to get current location: " + error.message);
+                    }
+                );
+            } else {
+                showError("Geolocation is not supported by this browser");
+            }
+        }
+    </script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .qr-placeholder {
             background-image: 
@@ -106,10 +123,25 @@
                                 <i class="fas fa-user"></i>
                                 Contact
                             </button>
+                            <button type="button" data-type="email" class="qr-type-btn py-2 px-4 border rounded-lg font-medium flex items-center justify-center gap-2" onclick="setActiveType(this)">
+                                <i class="fas fa-envelope"></i>
+                                Email
+                            </button>
+                            <button type="button" data-type="sms" class="qr-type-btn py-2 px-4 border rounded-lg font-medium flex items-center justify-center gap-2" onclick="setActiveType(this)">
+                                <i class="fas fa-comment"></i>
+                                SMS
+                            </button>
+                            <button type="button" data-type="phone" class="qr-type-btn py-2 px-4 border rounded-lg font-medium flex items-center justify-center gap-2" onclick="setActiveType(this)">
+                                <i class="fas fa-phone"></i>
+                                Phone
+                            </button>
+                            <button type="button" data-type="location" class="qr-type-btn py-2 px-4 border rounded-lg font-medium flex items-center justify-center gap-2" onclick="setActiveType(this)">
+                                <i class="fas fa-map-marker-alt"></i>
+                                Location
+                            </button>
                         </div>
                     </div>
-                    
-                    <!-- URL Input (Default) -->
+<!-- URL Input (Default) -->
                     <div id="urlInput" class="content-input">
                         <label for="qrContent" class="block text-sm font-medium text-gray-700 mb-2">Website URL</label>
                         <div class="flex">
@@ -147,7 +179,6 @@
                             </div>
                         </div>
                     </div>
-                    
                     <!-- Contact Input -->
                     <div id="contactInput" class="content-input hidden">
                         <div class="space-y-4">
@@ -165,8 +196,68 @@
                             </div>
                         </div>
                     </div>
-                    
-                    <!-- Design Options -->
+
+                    <!-- Email Input -->
+                    <div id="emailInput" class="content-input hidden">
+                        <div class="space-y-4">
+                            <div>
+                                <label for="emailTo" class="block text-sm font-medium text-gray-700 mb-2">Recipient Email</label>
+                                <input type="email" id="emailTo" name="emailTo" placeholder="recipient@example.com" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
+                            </div>
+                            <div>
+                                <label for="emailSubject" class="block text-sm font-medium text-gray-700 mb-2">Subject</label>
+                                <input type="text" id="emailSubject" name="emailSubject" placeholder="Email Subject" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
+                            </div>
+                            <div>
+                                <label for="emailBody" class="block text-sm font-medium text-gray-700 mb-2">Message</label>
+                                <textarea id="emailBody" name="emailBody" rows="3" placeholder="Your message here..." class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"></textarea>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- SMS Input -->
+                    <div id="smsInput" class="content-input hidden">
+                        <div class="space-y-4">
+                            <div>
+                                <label for="smsNumber" class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
+                                <input type="tel" id="smsNumber" name="smsNumber" placeholder="+1234567890" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
+                            </div>
+                            <div>
+                                <label for="smsMessage" class="block text-sm font-medium text-gray-700 mb-2">Message</label>
+                                <textarea id="smsMessage" name="smsMessage" rows="3" placeholder="Your SMS message..." class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"></textarea>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Phone Input -->
+                    <div id="phoneInput" class="content-input hidden">
+                        <div>
+                            <label for="phoneNumber" class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
+                            <input type="tel" id="phoneNumber" name="phoneNumber" placeholder="+1234567890" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                    </div>
+
+                    <!-- Location Input -->
+                    <div id="locationInput" class="content-input hidden">
+                        <div class="space-y-4">
+                            <div class="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label for="locationLatitude" class="block text-sm font-medium text-gray-700 mb-2">Latitude</label>
+                                    <input type="number" id="locationLatitude" name="locationLatitude" step="0.000001" placeholder="40.7128" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
+                                </div>
+                                <div>
+                                    <label for="locationLongitude" class="block text-sm font-medium text-gray-700 mb-2">Longitude</label>
+                                    <input type="number" id="locationLongitude" name="locationLongitude" step="0.000001" placeholder="-74.0060" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
+                                </div>
+                            </div>
+                            <div>
+                                <button type="button" onclick="getCurrentLocation()" class="w-full py-2 px-4 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-gray-50 hover:bg-gray-100 flex items-center justify-center gap-2">
+                                    <i class="fas fa-location-arrow"></i> Use Current Location
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+<!-- Design Options -->
                     <div class="pt-4 border-t border-gray-200">
                         <h3 class="text-lg font-medium text-gray-800 mb-4">Design Options</h3>
                         
@@ -430,7 +521,6 @@
                 generateQRCode();
             }
         }
-        
         // Generate QR code
         function generateQRCode() {
             let content = '';
@@ -485,9 +575,61 @@
                     if (email) content += `EMAIL:${email}\n`;
                     content += 'END:VCARD';
                     break;
+                case 'email':
+                    const emailTo = document.getElementById('emailTo').value;
+                    const emailSubject = document.getElementById('emailSubject').value || '';
+                    const emailBody = document.getElementById('emailBody').value || '';
+                    
+                    if (!emailTo) {
+                        showError("Please enter a recipient email address");
+                        return;
+                    }
+                    
+                    content = `mailto:${emailTo}`;
+                    if (emailSubject || emailBody) {
+                        content += '?';
+                        if (emailSubject) content += `subject=${encodeURIComponent(emailSubject)}`;
+                        if (emailSubject && emailBody) content += '&';
+                        if (emailBody) content += `body=${encodeURIComponent(emailBody)}`;
+                    }
+                    break;
+                case 'sms':
+                    const smsNumber = document.getElementById('smsNumber').value;
+                    const smsMessage = document.getElementById('smsMessage').value || '';
+                    
+                    if (!smsNumber) {
+                        showError("Please enter a phone number");
+                        return;
+                    }
+                    
+                    content = `smsto:${smsNumber}`;
+                    if (smsMessage) {
+                        content += `:${encodeURIComponent(smsMessage)}`;
+                    }
+                    break;
+                case 'phone':
+                    const phoneNumber = document.getElementById('phoneNumber').value;
+                    
+                    if (!phoneNumber) {
+                        showError("Please enter a phone number");
+                        return;
+                    }
+                    
+                    content = `tel:${phoneNumber}`;
+                    break;
+                case 'location':
+                    const latitude = document.getElementById('locationLatitude').value;
+                    const longitude = document.getElementById('locationLongitude').value;
+                    
+                    if (!latitude || !longitude) {
+                        showError("Please enter both latitude and longitude coordinates");
+                        return;
+                    }
+                    
+                    content = `geo:${latitude},${longitude}`;
+                    break;
             }
-            
-            // Get design options
+// Get design options
             const qrColor = document.getElementById('qrColor').value;
             const bgColor = document.getElementById('bgColor').value;
             const errorCorrection = document.getElementById('errorCorrection').value;
@@ -637,9 +779,20 @@
                             if (email) content += `EMAIL:${email}\n`;
                             content += 'END:VCARD';
                             break;
+                        case 'email':
+                            content = document.getElementById('emailTo').value;
+                            break;
+                        case 'sms':
+                            content = document.getElementById('smsNumber').value;
+                            break;
+                        case 'phone':
+                            content = document.getElementById('phoneNumber').value;
+                            break;
+                        case 'location':
+                            content = `${document.getElementById('locationLatitude').value},${document.getElementById('locationLongitude').value}`;
+                            break;
                     }
-                    
-                    QRCode.toString(content, {
+QRCode.toString(content, {
                         type: 'svg',
                         color: {
                             dark: document.getElementById('qrColor').value,
@@ -698,9 +851,30 @@
                                 pdfContent += `Email: ${document.getElementById('contactEmail').value}\n`;
                             }
                             break;
+                        case 'email':
+                            pdfContent += `To: ${document.getElementById('emailTo').value}\n`;
+                            if (document.getElementById('emailSubject').value) {
+                                pdfContent += `Subject: ${document.getElementById('emailSubject').value}\n`;
+                            }
+                            if (document.getElementById('emailBody').value) {
+                                pdfContent += `Message: ${document.getElementById('emailBody').value}\n`;
+                            }
+                            break;
+                        case 'sms':
+                            pdfContent += `To: ${document.getElementById('smsNumber').value}\n`;
+                            if (document.getElementById('smsMessage').value) {
+                                pdfContent += `Message: ${document.getElementById('smsMessage').value}\n`;
+                            }
+                            break;
+                        case 'phone':
+                            pdfContent += `Phone: ${document.getElementById('phoneNumber').value}\n`;
+                            break;
+                        case 'location':
+                            pdfContent += `Latitude: ${document.getElementById('locationLatitude').value}\n`;
+                            pdfContent += `Longitude: ${document.getElementById('locationLongitude').value}\n`;
+                            break;
                     }
-                    
-                    if (pdfContent) {
+if (pdfContent) {
                         pdf.setFontSize(10);
                         pdf.setTextColor(100);
                         pdf.text(pdfContent,