create this as a canvas fully functional drag and drop resize moving modern advance featur rich remove form instead of form make canvas fully flexible custoizbla using real canvas resources

templates.html

@@ -96,113 +96,105 @@
             </div>
 
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                <!-- Template Form -->
+                <!-- Export Section -->
                 <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6">
                     <h2 class="text-xl font-semibold mb-4 flex items-center">
-                        <i data-feather="edit-3" class="w-5 h-5 mr-2 text-primary-500"></i>
-                        Template Settings
+                        <i data-feather="download" class="w-5 h-5 mr-2 text-primary-500"></i>
+                        Export Options
                     </h2>
-                    <form>
-                        <div class="space-y-4">
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-300 mb-1">Export Format</label>
+                            <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
+                                <option>PNG</option>
+                                <option>JPG</option>
+                                <option>PDF</option>
+                                <option>SVG</option>
+                            </select>
+                        </div>
+                        
+                        <div>
+                            <label class="block text-sm font-medium text-gray-300 mb-1">DPI</label>
+                            <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
+                                <option>72 (Web)</option>
+                                <option selected>300 (Print)</option>
+                                <option>600 (High Quality Print)</option>
+                            </select>
+                        </div>
+                        
+                        <div class="grid grid-cols-2 gap-4">
                             <div>
-                                <label class="block text-sm font-medium text-gray-300 mb-1">Template Name</label>
-                                <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="My Awesome Template">
-                            </div>
-                            
-                            <div class="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-300 mb-1">DPI</label>
-                                    <input type="number" value="300" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-300 mb-1">Canvas Width (mm)</label>
-                                    <input type="number" value="65" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
-                                </div>
-                            </div>
-                            
-                            <div class="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-300 mb-1">Canvas Height (mm)</label>
-                                    <input type="number" value="140" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-300 mb-1">QR Box Width (mm)</label>
-                                    <input type="number" value="50" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
-                                </div>
-                            </div>
-                            
-                            <div class="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-300 mb-1">QR Box Height (mm)</label>
-                                    <input type="number" value="50" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-300 mb-1">QR Position X (mm)</label>
-                                    <input type="number" value="0" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
-                                </div>
+                                <label class="block text-sm font-medium text-gray-300 mb-1">Width (mm)</label>
+                                <input type="number" value="65" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
                             </div>
-                            
                             <div>
-                                <label class="block text-sm font-medium text-gray-300 mb-1">QR Position Y (mm)</label>
-                                <input type="number" value="0" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
-                            </div>
-                            
-                            <div class="pt-4">
-                                <button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
-                                    Save Template
-                                </button>
+                                <label class="block text-sm font-medium text-gray-300 mb-1">Height (mm)</label>
+                                <input type="number" value="140" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
                             </div>
                         </div>
-                    </form>
+                        
+                        <button id="exportCanvas" class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors flex items-center justify-center">
+                            <i data-feather="download" class="w-4 h-4 mr-2"></i>
+                            Export Design
+                        </button>
+                    </div>
                 </div>
 
-                <!-- Preview Section -->
+                <!-- Canvas Designer -->
                 <div class="space-y-6">
-                    <!-- QR Preview -->
                     <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6">
                         <h2 class="text-xl font-semibold mb-4 flex items-center">
-                            <i data-feather="eye" class="w-5 h-5 mr-2 text-primary-500"></i>
-                            Live Preview
+                            <i data-feather="edit-2" class="w-5 h-5 mr-2 text-primary-500"></i>
+                            Canvas Designer
                         </h2>
-                        <div class="relative border-2 border-dashed border-gray-700 p-4 rounded-lg">
-                            <div class="bg-white relative" style="width: 300px; height: 646px;">
-                                <div style="position: absolute; left: 0px; top: 0px; width: 231px; height: 231px; border: 1px dashed gray;">
-                                    <div class="bg-gray-200 w-full h-full cursor-move flex items-center justify-center text-gray-600 text-sm">
-                                        QR Code Position
-                                        <div class="resize-handle"></div>
-                                    </div>
-                                </div>
+                        <div class="flex flex-col space-y-4">
+                            <div class="flex space-x-4">
+                                <button id="addQR" class="px-4 py-2 bg-primary-600 hover:bg-primary-700 rounded-lg flex items-center">
+                                    <i data-feather="plus" class="w-4 h-4 mr-2"></i> Add QR
+                                </button>
+                                <button id="addText" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center">
+                                    <i data-feather="type" class="w-4 h-4 mr-2"></i> Add Text
+                                </button>
+                                <button id="addImage" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center">
+                                    <i data-feather="image" class="w-4 h-4 mr-2"></i> Add Image
+                                </button>
+                            </div>
+                            <div class="flex space-x-4">
+                                <button id="deleteSelected" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg flex items-center">
+                                    <i data-feather="trash-2" class="w-4 h-4 mr-2"></i> Delete
+                                </button>
+                                <button id="clearCanvas" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center">
+                                    <i data-feather="x" class="w-4 h-4 mr-2"></i> Clear All
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="mt-6 relative">
+                            <div class="border-2 border-dashed border-gray-700 rounded-lg overflow-hidden">
+                                <canvas id="designCanvas" class="bg-white w-full" style="height: 600px;"></canvas>
                             </div>
                         </div>
                     </div>
-                    
-                    <!-- Upload Section -->
-                    <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6">
+
+                    <!-- Properties Panel -->
+                    <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6" id="propertiesPanel">
                         <h2 class="text-xl font-semibold mb-4 flex items-center">
-                            <i data-feather="upload" class="w-5 h-5 mr-2 text-primary-500"></i>
-                            Upload QR Codes
+                            <i data-feather="sliders" class="w-5 h-5 mr-2 text-primary-500"></i>
+                            Properties
                         </h2>
-                        <div class="dropzone rounded-lg p-8 text-center cursor-pointer mb-4">
-                            <input type="file" class="hidden" multiple accept="image/*">
-                            <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-primary-500 mb-3"></i>
-                            <p class="text-gray-400 mb-1">Drag & drop your QR code images here</p>
-                            <p class="text-sm text-gray-500">or click to select files</p>
-                        </div>
-                        
-                        <div class="border border-gray-700 rounded-lg p-4 mb-4">
-                            <h3 class="text-sm font-medium text-gray-300 mb-2">Selected Files</h3>
-                            <div class="text-sm text-gray-400 italic">No files selected</div>
+                        <div class="space-y-4" id="propertyControls">
+                            <div class="text-gray-400 italic text-center py-8">
+                                Select an element to edit its properties
+                            </div>
                         </div>
-                        
-                        <button class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors flex items-center justify-center">
-                            <i data-feather="zap" class="w-4 h-4 mr-2"></i>
-                            Process & Download
-                        </button>
                     </div>
                 </div>
             </div>
         </main>
 
+        <!-- Hidden elements for export -->
+        <a id="downloadLink" style="display: none;"></a>
+
         <!-- Footer -->
         <footer class="border-t border-gray-800 py-8 mt-12">
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -221,48 +213,296 @@
         </footer>
     </div>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
     <script>
         feather.replace();
         
-        // Simple dropzone interaction
-        document.querySelectorAll('.dropzone').forEach(dropzone => {
-            const input = dropzone.querySelector('input');
-            
-            dropzone.addEventListener('click', () => {
-                input.click();
+        document.addEventListener('DOMContentLoaded', function() {
+            const canvas = new fabric.Canvas('designCanvas', {
+                backgroundColor: '#ffffff',
+                selection: true,
+                preserveObjectStacking: true
             });
-            
-            ['dragenter', 'dragover'].forEach(eventName => {
-                dropzone.addEventListener(eventName, (e) => {
-                    e.preventDefault();
-                    dropzone.classList.add('active');
+
+            // Add QR code element
+            document.getElementById('addQR').addEventListener('click', function() {
+                fabric.Image.fromURL('https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Example', function(img) {
+                    img.set({
+                        left: 50,
+                        top: 50,
+                        scaleX: 1,
+                        scaleY: 1,
+                        cornerStyle: 'circle',
+                        cornerColor: '#3b82f6',
+                        cornerSize: 10,
+                        transparentCorners: false,
+                        borderColor: '#3b82f6',
+                        borderScaleFactor: 1.5,
+                        hasRotatingPoint: true
+                    });
+                    canvas.add(img);
+                    canvas.setActiveObject(img);
+                    updatePropertiesPanel(img);
                 });
             });
-            
-            ['dragleave', 'drop'].forEach(eventName => {
-                dropzone.addEventListener(eventName, (e) => {
-                    e.preventDefault();
-                    dropzone.classList.remove('active');
+
+            // Add text element
+            document.getElementById('addText').addEventListener('click', function() {
+                const text = new fabric.Text('Double click to edit', {
+                    left: 100,
+                    top: 100,
+                    fontFamily: 'Inter',
+                    fontSize: 20,
+                    fill: '#000000',
+                    hasControls: true,
+                    cornerStyle: 'circle',
+                    cornerColor: '#3b82f6',
+                    cornerSize: 10,
+                    transparentCorners: false
+                });
+                canvas.add(text);
+                canvas.setActiveObject(text);
+                updatePropertiesPanel(text);
+                
+                text.on('editing:entered', function() {
+                    text.set('fill', '#3b82f6');
+                    canvas.renderAll();
+                });
+                
+                text.on('editing:exited', function() {
+                    text.set('fill', '#000000');
+                    canvas.renderAll();
                 });
             });
-            
-            input.addEventListener('change', () => {
-                const filesList = input.files;
-                if (filesList.length > 0) {
-                    const filesContainer = dropzone.nextElementSibling.querySelector('div');
-                    filesContainer.innerHTML = '';
+
+            // Add image element
+            document.getElementById('addImage').addEventListener('click', function() {
+                const input = document.createElement('input');
+                input.type = 'file';
+                input.accept = 'image/*';
+                input.onchange = function(e) {
+                    const file = e.target.files[0];
+                    if (file) {
+                        const reader = new FileReader();
+                        reader.onload = function(event) {
+                            fabric.Image.fromURL(event.target.result, function(img) {
+                                img.set({
+                                    left: 150,
+                                    top: 150,
+                                    scaleX: 0.5,
+                                    scaleY: 0.5,
+                                    hasControls: true,
+                                    cornerStyle: 'circle',
+                                    cornerColor: '#3b82f6',
+                                    cornerSize: 10,
+                                    transparentCorners: false
+                                });
+                                canvas.add(img);
+                                canvas.setActiveObject(img);
+                                updatePropertiesPanel(img);
+                            });
+                        };
+                        reader.readAsDataURL(file);
+                    }
+                };
+                input.click();
+            });
+
+            // Delete selected element
+            document.getElementById('deleteSelected').addEventListener('click', function() {
+                const activeObject = canvas.getActiveObject();
+                if (activeObject) {
+                    canvas.remove(activeObject);
+                    updatePropertiesPanel(null);
+                }
+            });
+
+            // Clear canvas
+            document.getElementById('clearCanvas').addEventListener('click', function() {
+                if (confirm('Are you sure you want to clear the canvas?')) {
+                    canvas.clear();
+                    updatePropertiesPanel(null);
+                }
+            });
+
+            // Canvas selection event
+            canvas.on('selection:created', function(options) {
+                updatePropertiesPanel(options.selected[0]);
+            });
+
+            canvas.on('selection:updated', function(options) {
+                updatePropertiesPanel(options.selected[0]);
+            });
+
+            canvas.on('selection:cleared', function() {
+                updatePropertiesPanel(null);
+            });
+
+            // Update properties panel based on selected object
+            function updatePropertiesPanel(obj) {
+                const panel = document.getElementById('propertyControls');
+                
+                if (!obj) {
+                    panel.innerHTML = `
+                        <div class="text-gray-400 italic text-center py-8">
+                            Select an element to edit its properties
+                        </div>
+                    `;
+                    return;
+                }
+
+                let controls = '';
+                
+                // Common properties
+                controls += `
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-1">Position</label>
+                        <div class="grid grid-cols-2 gap-2">
+                            <div>
+                                <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1" 
+                                    id="posX" value="${Math.round(obj.left)}" placeholder="X">
+                            </div>
+                            <div>
+                                <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1" 
+                                    id="posY" value="${Math.round(obj.top)}" placeholder="Y">
+                            </div>
+                        </div>
+                    </div>
                     
-                    Array.from(filesList).forEach(file => {
-                        const fileElement = document.createElement('div');
-                        fileElement.className = 'flex justify-between items-center py-1';
-                        fileElement.innerHTML = `
-                            <span class="truncate">${file.name}</span>
-                            <span class="text-gray-500 text-xs">${(file.size / 1024).toFixed(1)} KB</span>
-                        `;
-                        filesContainer.appendChild(fileElement);
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-1">Size</label>
+                        <div class="grid grid-cols-2 gap-2">
+                            <div>
+                                <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1" 
+                                    id="width" value="${Math.round(obj.width * obj.scaleX)}" placeholder="Width">
+                            </div>
+                            <div>
+                                <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1" 
+                                    id="height" value="${Math.round(obj.height * obj.scaleY)}" placeholder="Height">
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-1">Rotation</label>
+                        <input type="range" class="w-full bg-gray-800" id="rotation" 
+                            min="0" max="360" value="${Math.round(obj.angle || 0)}">
+                    </div>
+                `;
+
+                // Text specific properties
+                if (obj.type === 'text') {
+                    controls += `
+                        <div>
+                            <label class="block text-sm font-medium text-gray-300 mb-1">Text Content</label>
+                            <textarea class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1" 
+                                id="textContent" rows="2">${obj.text}</textarea>
+                        </div>
+                        
+                        <div>
+                            <label class="block text-sm font-medium text-gray-300 mb-1">Font Size</label>
+                            <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1" 
+                                id="fontSize" value="${obj.fontSize}">
+                        </div>
+                        
+                        <div>
+                            <label class="block text-sm font-medium text-gray-300 mb-1">Text Color</label>
+                            <input type="color" class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1" 
+                                id="textColor" value="${rgbToHex(obj.fill)}">
+                        </div>
+                    `;
+                }
+
+                // Image specific properties
+                if (obj.type === 'image') {
+                    controls += `
+                        <div>
+                            <label class="block text-sm font-medium text-gray-300 mb-1">Opacity</label>
+                            <input type="range" class="w-full bg-gray-800" id="opacity" 
+                                min="0" max="1" step="0.1" value="${obj.opacity}">
+                        </div>
+                    `;
+                }
+
+                panel.innerHTML = controls;
+
+                // Add event listeners for property changes
+                document.getElementById('posX')?.addEventListener('change', function(e) {
+                    obj.set('left', parseInt(e.target.value));
+                    canvas.renderAll();
+                });
+
+                document.getElementById('posY')?.addEventListener('change', function(e) {
+                    obj.set('top', parseInt(e.target.value));
+                    canvas.renderAll();
+                });
+
+                document.getElementById('width')?.addEventListener('change', function(e) {
+                    const scale = parseInt(e.target.value) / obj.width;
+                    obj.set('scaleX', scale);
+                    canvas.renderAll();
+                });
+
+                document.getElementById('height')?.addEventListener('change', function(e) {
+                    const scale = parseInt(e.target.value) / obj.height;
+                    obj.set('scaleY', scale);
+                    canvas.renderAll();
+                });
+
+                document.getElementById('rotation')?.addEventListener('input', function(e) {
+                    obj.set('angle', parseInt(e.target.value));
+                    canvas.renderAll();
+                });
+
+                if (obj.type === 'text') {
+                    document.getElementById('textContent')?.addEventListener('change', function(e) {
+                        obj.set('text', e.target.value);
+                        canvas.renderAll();
+                    });
+
+                    document.getElementById('fontSize')?.addEventListener('change', function(e) {
+                        obj.set('fontSize', parseInt(e.target.value));
+                        canvas.renderAll();
+                    });
+
+                    document.getElementById('textColor')?.addEventListener('change', function(e) {
+                        obj.set('fill', e.target.value);
+                        canvas.renderAll();
                     });
                 }
-            });
+
+                if (obj.type === 'image') {
+                    document.getElementById('opacity')?.addEventListener('input', function(e) {
+                        obj.set('opacity', parseFloat(e.target.value));
+                        canvas.renderAll();
+                    });
+                }
+            }
+
+            // Helper function to convert RGB to HEX
+            function rgbToHex(rgb) {
+                if (!rgb) return '#000000';
+                if (typeof rgb === 'string' && rgb.startsWith('#')) return rgb;
+                
+                return '#' + 
+                    (rgb[0] | 1 << 8).toString(16).slice(1) +
+                    (rgb[1] | 1 << 8).toString(16).slice(1) +
+                    (rgb[2] | 1 << 8).toString(16).slice(1);
+            }
+
+            // Set canvas size to fit container
+            function resizeCanvas() {
+                const container = document.querySelector('.border-2.border-dashed');
+                if (container) {
+                    const width = container.clientWidth;
+                    canvas.setWidth(width);
+                    canvas.setHeight(600); // Fixed height for demo
+                    canvas.renderAll();
+                }
+            }
+
+            window.addEventListener('resize', resizeCanvas);
+            resizeCanvas();
         });
     </script>
 </body>