Add functions to allow you to upload template files next js and their format, such as typescript and so on. - Follow Up Deployment

index.html

@@ -112,6 +112,16 @@
                         <span>Categories</span>
                     </a>
                     
+                    <div class="py-2 mt-4 text-gray-400 uppercase text-xs font-semibold tracking-wider">Templates</div>
+                    <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
+                        <i class="fas fa-file-code mr-3"></i>
+                        <span>Template Files</span>
+                    </a>
+                    <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
+                        <i class="fas fa-upload mr-3"></i>
+                        <span>Upload Templates</span>
+                    </a>
+                    
                     <div class="py-2 mt-4 text-gray-400 uppercase text-xs font-semibold tracking-wider">System</div>
                     <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
                         <i class="fas fa-users mr-3"></i>
@@ -343,6 +353,13 @@
                                 </div>
                                 <i class="fas fa-chevron-right"></i>
                             </button>
+                            <button class="w-full flex items-center justify-between px-4 py-3 bg-indigo-50 text-indigo-600 rounded-lg hover:bg-indigo-100">
+                                <div class="flex items-center">
+                                    <i class="fas fa-file-code mr-3"></i>
+                                    <span>Upload Template</span>
+                                </div>
+                                <i class="fas fa-chevron-right"></i>
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -463,7 +480,91 @@
         </div>
     </div>
 
+    <!-- Template Upload Modal -->
+    <div id="templateModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
+            <div class="p-6 border-b border-gray-200">
+                <h3 class="text-lg font-semibold text-gray-800">Upload Template Files</h3>
+            </div>
+            <div class="p-6">
+                <div class="mb-4">
+                    <label class="block text-gray-700 text-sm font-medium mb-2">Template Type</label>
+                    <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option>Next.js</option>
+                        <option>React</option>
+                        <option>Vue</option>
+                        <option>Angular</option>
+                    </select>
+                </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 text-sm font-medium mb-2">File Format</label>
+                    <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option>TypeScript (.tsx)</option>
+                        <option>JavaScript (.jsx)</option>
+                        <option>CSS Modules (.module.css)</option>
+                        <option>SCSS (.scss)</option>
+                    </select>
+                </div>
+                <div class="mb-6">
+                    <label class="block text-gray-700 text-sm font-medium mb-2">Upload Files</label>
+                    <div class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center">
+                        <i class="fas fa-file-upload text-3xl text-gray-400 mb-2"></i>
+                        <p class="text-sm text-gray-500">Drag and drop files here or click to browse</p>
+                        <input type="file" class="hidden" id="templateUpload" multiple>
+                        <button class="mt-3 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm" onclick="document.getElementById('templateUpload').click()">
+                            Select Files
+                        </button>
+                    </div>
+                </div>
+                <div class="flex justify-end space-x-3">
+                    <button onclick="document.getElementById('templateModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
+                        Cancel
+                    </button>
+                    <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
+                        Upload Templates
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script>
+        // Template upload functionality
+        document.querySelectorAll('[href="#"], button').forEach(btn => {
+            if (btn.textContent.includes('Upload Template') || btn.textContent.includes('Upload Templates')) {
+                btn.addEventListener('click', () => {
+                    document.getElementById('templateModal').classList.remove('hidden');
+                });
+            }
+        });
+
+        // Handle file selection display
+        document.getElementById('templateUpload').addEventListener('change', function(e) {
+            const files = e.target.files;
+            if (files.length > 0) {
+                const fileList = document.createElement('div');
+                fileList.className = 'mt-3 text-sm text-left';
+                
+                for (let i = 0; i < files.length; i++) {
+                    const fileItem = document.createElement('div');
+                    fileItem.className = 'flex items-center py-1';
+                    fileItem.innerHTML = `
+                        <i class="fas fa-file-code text-gray-500 mr-2"></i>
+                        <span>${files[i].name}</span>
+                        <span class="ml-auto text-xs text-gray-500">${(files[i].size / 1024).toFixed(2)} KB</span>
+                    `;
+                    fileList.appendChild(fileItem);
+                }
+                
+                const uploadContainer = document.querySelector('.border-dashed');
+                const existingList = uploadContainer.querySelector('.text-left');
+                if (existingList) {
+                    uploadContainer.replaceChild(fileList, existingList);
+                } else {
+                    uploadContainer.appendChild(fileList);
+                }
+            }
+        });
         // Toggle sidebar collapse
         const sidebarToggle = document.getElementById('sidebarToggle');
         const sidebar = document.querySelector('.sidebar');