mix part and loader

public/userarea/photos_popup.php

@@ -73,6 +73,12 @@ $result->saveToFile($qrCodeFile);
 ?>
 
 <div class="popup-content">
+    <div id="loader" class="loader" style="display: none;">
+        <div style="text-align: center; color: white;">
+            <i class="fas fa-spinner fa-spin" style="font-size: 40px;"></i>
+            <p>Caricamento in corso...</p>
+        </div>
+    </div>
     <h3>Manage Photos</h3>
     <p><strong>ID Row:</strong> <?= htmlspecialchars($idriga) ?></p>
     <p><strong>Sample Code:</strong> <?= htmlspecialchars($sampleCode) ?></p>
@@ -91,7 +97,16 @@ $result->saveToFile($qrCodeFile);
         <p>Drag the photo here or click to select</p>
         <input type="file" id="photoInput" multiple accept="image/*" style="display: none;">
     </div>
-
+    <!-- Area per la webcam -->
+    <div id="webcamArea" style="display: none; text-align: center; margin-bottom: 20px;">
+        <p>Webcam Preview</p>
+        <video id="webcamVideo" autoplay playsinline style="max-width: 100%; max-height: 300px;"></video>
+        <div style="margin-top: 10px;">
+            <button id="captureBtn" style="padding: 10px 20px; background: #28a745; color: white; border: none; cursor: pointer;">Capture Photo</button>
+            <button id="closeWebcamBtn" style="padding: 10px 20px; background: #dc3545; color: white; border: none; cursor: pointer;">Close Webcam</button>
+        </div>
+    </div>
+    <button id="openWebcamBtn" style="padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; margin-bottom: 20px;">Take Photo with Webcam</button>
     <!-- Elenco delle foto -->
     <div id="photosList">
         <?php if (empty($photos)): ?>
@@ -149,7 +164,6 @@ $result->saveToFile($qrCodeFile);
         display: none;
         position: fixed;
         z-index: 1001;
-        /* Sopra il popup principale */
         left: 0;
         top: 0;
         width: 100%;
@@ -184,31 +198,30 @@ $result->saveToFile($qrCodeFile);
         color: #bbb;
         text-decoration: none;
     }
-</style>
 
-<script>
-    // Gestione del click sulle immagini per ingrandirle
-    document.querySelectorAll('.thumbnail').forEach(img => {
-        img.addEventListener('click', function() {
-            const modal = document.getElementById('imageModal');
-            const enlargedImage = document.getElementById('enlargedImage');
-            enlargedImage.src = this.src;
-            modal.style.display = 'block';
-        });
-    });
+    /* Stili per il loader */
+    .loader {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 1002;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 
-    // Gestione della chiusura del modale
-    const modal = document.getElementById('imageModal');
-    const closeBtn = document.querySelector('.image-modal-close');
+    .loader .fa-spinner {
+        font-size: 40px;
+        color: white;
+    }
 
-    closeBtn.addEventListener('click', function() {
-        modal.style.display = 'none';
-    });
-
-    // Chiudi il modale cliccando fuori dall'immagine
-    modal.addEventListener('click', function(event) {
-        if (event.target === modal) {
-            modal.style.display = 'none';
-        }
-    });
-</script>
+    .loader p {
+        margin-top: 10px;
+        font-size: 16px;
+        color: white;
+    }
+</style>