Checkout 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

<!-- Checkout Modal -->
<div id="checkout-modal" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black/60 backdrop-blur-sm" onclick="closeModal('checkout-modal')"></div>
  
  <!-- Modal Container -->
  <div class="fixed inset-4 md:inset-auto md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:w-full md:max-w-4xl md:max-h-[90vh] bg-white dark:bg-gray-900 rounded-2xl shadow-2xl flex flex-col transform transition-all overflow-hidden" role="dialog" aria-modal="true" aria-labelledby="checkout-modal-title">
    
    <!-- Header -->
    <div class="flex-shrink-0 flex items-center justify-between p-6 border-b border-gray-100 dark:border-gray-800">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl flex items-center justify-center">
          <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
          </svg>
        </div>
        <div>
          <h3 id="checkout-modal-title" class="text-lg font-semibold text-gray-900 dark:text-white">Checkout</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Review your order</p>
        </div>
      </div>
      <button onclick="closeModal('checkout-modal')" class="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
    
    <!-- Content -->
    <div class="flex-1 overflow-y-auto">
      <div class="grid md:grid-cols-2 gap-6 p-6">
        <!-- Order Items -->
        <div class="space-y-4">
          <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Order Items</h4>
          
          <!-- Item 1 -->
          <div class="flex gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
            <div class="w-20 h-20 bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-indigo-900/30 dark:to-purple-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-10 h-10 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
              </svg>
            </div>
            <div class="flex-1">
              <h5 class="font-medium text-gray-900 dark:text-white">Pro Subscription</h5>
              <p class="text-sm text-gray-500 dark:text-gray-400">Annual plan • Billed yearly</p>
              <p class="mt-1 font-semibold text-indigo-600 dark:text-indigo-400">$99.00</p>
            </div>
            <button class="self-start p-1.5 text-gray-400 hover:text-red-500 transition-colors">
              <svg class="w-5 h-5" 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>
            </button>
          </div>
          
          <!-- Item 2 -->
          <div class="flex gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
            <div class="w-20 h-20 bg-gradient-to-br from-amber-100 to-orange-100 dark:from-amber-900/30 dark:to-orange-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-10 h-10 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
              </svg>
            </div>
            <div class="flex-1">
              <h5 class="font-medium text-gray-900 dark:text-white">Developer Course</h5>
              <p class="text-sm text-gray-500 dark:text-gray-400">Complete Web Development</p>
              <p class="mt-1 font-semibold text-amber-600 dark:text-amber-400">$49.00</p>
            </div>
            <button class="self-start p-1.5 text-gray-400 hover:text-red-500 transition-colors">
              <svg class="w-5 h-5" 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>
            </button>
          </div>
        </div>
        
        <!-- Order Summary -->
        <div class="space-y-4">
          <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Order Summary</h4>
          
          <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl p-6 text-white">
            <div class="space-y-3">
              <div class="flex justify-between text-sm opacity-90">
                <span>Subtotal</span>
                <span>$148.00</span>
              </div>
              <div class="flex justify-between text-sm opacity-90">
                <span>Discount (20%)</span>
                <span>-$29.60</span>
              </div>
              <div class="flex justify-between text-sm opacity-90">
                <span>Tax</span>
                <span>$11.84</span>
              </div>
              <div class="border-t border-white/20 pt-3 mt-3">
                <div class="flex justify-between">
                  <span class="font-semibold">Total</span>
                  <span class="text-2xl font-bold">$130.24</span>
                </div>
              </div>
            </div>
            
            <!-- Promo Code -->
            <div class="mt-6">
              <div class="flex gap-2">
                <input type="text" placeholder="Promo code" class="flex-1 px-4 py-2 bg-white/20 backdrop-blur rounded-lg text-white placeholder-white/60 border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/50">
                <button class="px-4 py-2 bg-white text-indigo-600 font-medium rounded-lg hover:bg-white/90 transition-colors">Apply</button>
              </div>
            </div>
          </div>
          
          <!-- Payment Method -->
          <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-4">
            <div class="flex items-center justify-between mb-3">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Payment Method</span>
              <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">Change</button>
            </div>
            <div class="flex items-center gap-3">
              <div class="w-12 h-8 bg-gradient-to-r from-blue-600 to-blue-800 rounded flex items-center justify-center text-white text-xs font-bold">VISA</div>
              <div class="flex-1">
                <p class="text-sm font-medium text-gray-900 dark:text-white">•••• •••• •••• 4242</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">Expires 12/28</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Footer -->
    <div class="flex-shrink-0 p-6 border-t border-gray-100 dark:border-gray-800">
      <div class="flex gap-3">
        <button onclick="closeModal('checkout-modal')" class="flex-1 py-3 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">Continue Shopping</button>
        <button onclick="closeModal('checkout-modal')" class="flex-1 py-3 text-sm font-medium text-white bg-indigo-600 rounded-xl hover:bg-indigo-700 transition-colors flex items-center justify-center gap-2">
          <span>Complete Purchase</span>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

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

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

# Checkout Modal

Checkout flow modal.

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

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