you can make it possible to edit player photos - Follow Up Deployment

index.html

@@ -18,6 +18,12 @@
         .edit-mode .editable:hover {
             background-color: rgba(255, 213, 79, 0.1);
         }
+        .edit-mode .editable-image:hover .edit-image-overlay {
+            opacity: 1;
+        }
+        .edit-image-overlay {
+            cursor: pointer;
+        }
         .edit-toolbar {
             position: fixed;
             top: 10px;
@@ -180,7 +186,12 @@
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                 <!-- Player 1 -->
                 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1570295999919-56ce3295bada?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Marco Menichelli" class="w-full player-image">
+                    <div class="editable-image relative">
+                        <img src="https://images.unsplash.com/photo-1570295999919-56ce3295bada?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Marco Menichelli" class="w-full player-image">
+                        <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
+                            <span class="text-white font-bold">Click to Change</span>
+                        </div>
+                    </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-1">Marco Menichelli</h3>
                         <p class="text-gray-600 mb-3">Midfielder</p>
@@ -193,7 +204,12 @@
                 
                 <!-- Player 2 -->
                 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Andrea Ventrice" class="w-full player-image">
+                    <div class="editable-image relative">
+                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Andrea Ventrice" class="w-full player-image">
+                        <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
+                            <span class="text-white font-bold">Click to Change</span>
+                        </div>
+                    </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-1">Andrea Ventrice</h3>
                         <p class="text-gray-600 mb-3">Forward</p>
@@ -206,7 +222,12 @@
                 
                 <!-- Player 3 -->
                 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Roberto Menichelli" class="w-full player-image">
+                    <div class="editable-image relative">
+                        <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Roberto Menichelli" class="w-full player-image">
+                        <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
+                            <span class="text-white font-bold">Click to Change</span>
+                        </div>
+                    </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-1">Roberto Menichelli</h3>
                         <p class="text-gray-600 mb-3">Defender</p>
@@ -219,7 +240,12 @@
                 
                 <!-- Player 4 -->
                 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Alessandro Sabia" class="w-full player-image">
+                    <div class="editable-image relative">
+                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Alessandro Sabia" class="w-full player-image">
+                        <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
+                            <span class="text-white font-bold">Click to Change</span>
+                        </div>
+                    </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-1">Alessandro Sabia</h3>
                         <p class="text-gray-600 mb-3">Goalkeeper</p>
@@ -232,7 +258,12 @@
                 
                 <!-- Player 5 -->
                 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Alessandro De Simone" class="w-full player-image">
+                    <div class="editable-image relative">
+                        <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Alessandro De Simone" class="w-full player-image">
+                        <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
+                            <span class="text-white font-bold">Click to Change</span>
+                        </div>
+                    </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-1">Alessandro De Simone</h3>
                         <p class="text-gray-600 mb-3">Midfielder</p>
@@ -245,7 +276,12 @@
                 
                 <!-- Player 6 -->
                 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Lorenzo Tomassini" class="w-full player-image">
+                    <div class="editable-image relative">
+                        <img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Lorenzo Tomassini" class="w-full player-image">
+                        <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
+                            <span class="text-white font-bold">Click to Change</span>
+                        </div>
+                    </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-1">Lorenzo Tomassini</h3>
                         <p class="text-gray-600 mb-3">Defender</p>
@@ -258,7 +294,12 @@
                 
                 <!-- Player 7 -->
                 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1564564244660-5d73c057f2d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1456&q=80" alt="Daniele Conti" class="w-full player-image">
+                    <div class="editable-image relative">
+                        <img src="https://images.unsplash.com/photo-1564564244660-5d73c057f2d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1456&q=80" alt="Daniele Conti" class="w-full player-image">
+                        <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
+                            <span class="text-white font-bold">Click to Change</span>
+                        </div>
+                    </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-1">Daniele Conti</h3>
                         <p class="text-gray-600 mb-3">Forward</p>
@@ -271,7 +312,7 @@
                 
                 <!-- Team Staff Card -->
                 <div class="player-card bg-blue-900 text-white rounded-lg overflow-hidden shadow-md transition duration-300">
-                    <div class="h-64 bg-blue-800 flex items-center justify-center">
+                    <div class="editable-image h-64 bg-blue-800 flex items-center justify-center relative">
                         <i class="fas fa-users text-6xl"></i>
                     </div>
                     <div class="p-6">
@@ -755,6 +796,26 @@
             
             // Load saved content
             loadContent();
+            
+            // Image change functionality
+            document.querySelectorAll('.editable-image').forEach(container => {
+                container.addEventListener('click', function(e) {
+                    if (!document.body.classList.contains('edit-mode')) return;
+                    
+                    const img = this.querySelector('img') || this;
+                    const newSrc = prompt('Enter new image URL:', img.src);
+                    
+                    if (newSrc && newSrc !== img.src) {
+                        if (img.tagName === 'IMG') {
+                            img.src = newSrc;
+                        } else {
+                            // For the team staff card that uses a div
+                            this.innerHTML = `<img src="${newSrc}" class="w-full h-full object-cover">`;
+                        }
+                        saveContent();
+                    }
+                });
+            });
         });
         
         // Mobile menu toggle