nothing change

index.html

@@ -140,7 +140,7 @@
                 </div>
         <!-- Editable Name -->
         <div class="relative mb-3">
-            <h1 id="editableName" class="text-3xl font-bold gradient-text text-center min-h-[1.5em] px-2 py-1 rounded" contenteditable="true" data-placeholder="Tap to Add your Name">Tap to Add your Name</h1>
+            <h1 id="editableName" class="text-3xl font-bold text-white text-center min-h-[1.5em] px-2 py-1" contenteditable="true" data-placeholder="Tap to Add your Name">Tap to Add your Name</h1>
         </div>
 <!-- Contact Button -->
                 <div class="relative mb-4 w-3/5 mx-auto">
@@ -261,55 +261,7 @@
                 document.getElementById('socialDropdown').style.display = 'none';
             }
         });
-        // Social media platform selection
-        document.querySelectorAll('.social-option').forEach(option => {
-            option.addEventListener('click', function(e) {
-                e.preventDefault();
-                const platform = this.getAttribute('data-platform');
-                
-                // Create modal for handle input
-                const modal = document.createElement('div');
-                modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
-                modal.innerHTML = `
-                    <div class="bg-gray-800 p-6 rounded-lg max-w-sm w-full mx-4">
-                        <h3 class="text-lg font-medium mb-4">Add your ${platform} handle</h3>
-                        <input type="text" id="handleInput" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 mb-4 text-white" placeholder="Your handle">
-                        <div class="flex justify-end space-x-2">
-                            <button id="cancelHandle" class="px-4 py-2 text-gray-300 hover:text-white">Cancel</button>
-                            <button id="saveHandle" class="px-4 py-2 bg-indigo-600 rounded hover:bg-indigo-700">Add</button>
-                        </div>
-                    </div>
-                `;
-                document.body.appendChild(modal);
-                
-                const handleInput = document.getElementById('handleInput');
-                const cancelBtn = document.getElementById('cancelHandle');
-                const saveBtn = document.getElementById('saveHandle');
-                
-                handleInput.focus();
-                
-                cancelBtn.addEventListener('click', function() {
-                    document.body.removeChild(modal);
-                });
-                
-                saveBtn.addEventListener('click', function() {
-                    const handle = handleInput.value.trim();
-                    if (handle) {
-                        addSocialIcon(platform, handle);
-                    }
-                    document.body.removeChild(modal);
-                    document.getElementById('socialDropdown').style.display = 'none';
-                });
-                
-                // Close modal when clicking outside
-                modal.addEventListener('click', function(e) {
-                    if (e.target === modal) {
-                        document.body.removeChild(modal);
-                    }
-                });
-            });
-        });
-        // Initialize placeholder functionality for all editable elements except heading
+// Initialize placeholder functionality for all editable elements except heading
         document.querySelectorAll('.editable').forEach(editable => {
             // Clear placeholder text when focusing
             editable.addEventListener('focus', function() {
@@ -327,7 +279,6 @@
                 this.style.background = 'transparent';
             });
         });
-
         // Special handling for heading element
         const editableName = document.getElementById('editableName');
         editableName.addEventListener('focus', function() {
@@ -335,6 +286,8 @@
                 this.textContent = '';
             }
             this.style.background = 'transparent';
+            this.style.border = 'none';
+            this.style.outline = 'none';
         });
         
         editableName.addEventListener('blur', function() {
@@ -342,7 +295,14 @@
                 this.textContent = this.getAttribute('data-placeholder');
             }
             this.style.background = 'transparent';
+            this.style.border = 'none';
+            this.style.outline = 'none';
         });
+        
+        // Force clear any existing background/border styles
+        editableName.style.background = 'transparent';
+        editableName.style.border = 'none';
+        editableName.style.outline = 'none';
 function addSocialIcon(platform, handle) {
             const container = document.getElementById('socialIconsContainer');
             
@@ -477,7 +437,6 @@ function getSocialUrl(platform, handle) {
                 });
             });
         });
-
         function addSocialIcon(platform, handle) {
             const container = document.getElementById('socialIconsContainer');
             
@@ -504,14 +463,13 @@ function getSocialUrl(platform, handle) {
             iconWrapper.appendChild(icon);
             iconWrapper.appendChild(removeBtn);
             
-            // Insert before the plus button container
-            const addButtonContainer = container.querySelector('.relative');
-            container.insertBefore(iconWrapper, addButtonContainer);
+            // Insert before the plus button
+            const addButton = document.getElementById('addSocialButton').parentNode;
+            container.insertBefore(iconWrapper, addButton);
             
             feather.replace();
         }
-
-        function getFeatherIconName(platform) {
+function getFeatherIconName(platform) {
             const iconMap = {
                 instagram: 'instagram',
                 facebook: 'facebook',