Delete Confirmation Modal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<!-- Delete Confirmation Modal -->
<div id="delete-modal" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" onclick="closeModal('delete-modal')"></div>
  
  <!-- Modal Container -->
  <div class="fixed inset-0 flex items-center justify-center p-4">
    <div class="relative bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-lg transform transition-all" role="alertdialog" aria-modal="true" aria-labelledby="delete-modal-title" aria-describedby="delete-modal-desc">
      
      <!-- Danger Header Bar -->
      <div class="bg-gradient-to-r from-red-500 to-rose-600 p-4 rounded-t-2xl">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
            </svg>
          </div>
          <h3 id="delete-modal-title" class="text-lg font-semibold text-white">Delete Item Permanently</h3>
        </div>
      </div>
      
      <!-- Content -->
      <div class="p-6">
        <p id="delete-modal-desc" class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">You are about to permanently delete this item from your account. This action cannot be reversed and all associated data will be lost.</p>
        
        <!-- Item Preview -->
        <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-4 mb-4">
          <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
              </svg>
            </div>
            <div class="flex-1">
              <p class="font-medium text-gray-900 dark:text-white">Project_Documents_v2.zip</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">245.8 MB • Last modified 3 days ago</p>
            </div>
          </div>
        </div>
        
        <!-- Checkbox Confirmation -->
        <label class="flex items-start gap-3 cursor-pointer">
          <input type="checkbox" id="delete-confirm-checkbox" class="mt-1 w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500">
          <span class="text-sm text-gray-600 dark:text-gray-400">I understand that this action is irreversible and I want to proceed with deletion.</span>
        </label>
      </div>
      
      <!-- Actions -->
      <div class="flex items-center justify-end gap-3 p-6 pt-0">
        <button onclick="closeModal('delete-modal')" class="px-5 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-300">Keep Item</button>
        <button onclick="closeModal('delete-modal')" class="px-5 py-2.5 text-sm font-medium text-white bg-red-600 rounded-xl hover:bg-red-700 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 shadow-lg shadow-red-500/30 disabled:opacity-50 disabled:cursor-not-allowed" id="delete-btn" disabled>Delete Forever</button>
      </div>
    </div>
  </div>
</div>

<!-- Demo Trigger Button -->
<button onclick="openModal('delete-modal')" class="px-6 py-3 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Open Delete Modal</button>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const checkbox = document.getElementById('delete-confirm-checkbox');
    const deleteBtn = document.getElementById('delete-btn');
    if (checkbox && deleteBtn) {
      checkbox.addEventListener('change', function() {
        deleteBtn.disabled = !this.checked;
      });
    }
  });
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# Delete Confirmation Modal

Destructive delete confirmation dialog.

## Usage
```bash
npx devsnips add Tailwind/Components/Modals/delete-confirmation-modal
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`