Form 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

<!-- Form Modal -->
<div id="form-modal" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeModal('form-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-2xl max-h-[90vh] overflow-y-auto transform transition-all" role="dialog" aria-modal="true" aria-labelledby="form-modal-title">
      
      <!-- Header -->
      <div class="sticky top-0 bg-white dark:bg-gray-900 z-10 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-orange-100 dark:bg-orange-900/30 rounded-xl flex items-center justify-center">
            <svg class="w-5 h-5 text-orange-600 dark:text-orange-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>
            <h3 id="form-modal-title" class="text-lg font-semibold text-gray-900 dark:text-white">Submit Project Proposal</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Fill out the details below</p>
          </div>
        </div>
        <button onclick="closeModal('form-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>
      
      <!-- Form -->
      <form class="p-6 space-y-6" onsubmit="event.preventDefault(); closeModal('form-modal');">
        <!-- Project Name -->
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Name *</label>
          <input type="text" placeholder="E-commerce Platform Redesign" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all" required>
        </div>
        
        <!-- Category & Budget -->
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category *</label>
            <select class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all">
              <option>Web Development</option>
              <option>Mobile App</option>
              <option>UI/UX Design</option>
              <option>Consulting</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Budget Range</label>
            <select class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all">
              <option>$5,000 - $10,000</option>
              <option>$10,000 - $25,000</option>
              <option>$25,000 - $50,000</option>
              <option>$50,000+</option>
            </select>
          </div>
        </div>
        
        <!-- Description -->
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Description *</label>
          <textarea rows="4" placeholder="Describe your project goals, requirements, and timeline..." class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all resize-none" required></textarea>
        </div>
        
        <!-- Timeline -->
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expected Timeline</label>
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Start Date</label>
              <input type="date" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all">
            </div>
            <div>
              <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">End Date</label>
              <input type="date" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all">
            </div>
          </div>
        </div>
        
        <!-- Attachments -->
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Attachments</label>
          <div class="border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-xl p-6 text-center hover:border-orange-400 dark:hover:border-orange-600 transition-colors cursor-pointer">
            <svg class="w-10 h-10 text-gray-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
            </svg>
            <p class="text-sm text-gray-600 dark:text-gray-400">Drop files here or <span class="text-orange-600 dark:text-orange-400 font-medium">browse</span></p>
            <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">PDF, DOCX, or images up to 10MB</p>
          </div>
        </div>
        
        <!-- Checkbox -->
        <label class="flex items-start gap-3 cursor-pointer">
          <input type="checkbox" class="mt-1 w-4 h-4 text-orange-600 border-gray-300 rounded focus:ring-orange-500">
          <span class="text-sm text-gray-600 dark:text-gray-400">I agree to the <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline">terms and conditions</a> and understand the proposal process.</span>
        </label>
        
        <!-- Actions -->
        <div class="flex items-center gap-3 pt-4 border-t border-gray-100 dark:border-gray-800">
          <button type="button" onclick="closeModal('form-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">Cancel</button>
          <button type="submit" class="flex-1 py-3 text-sm font-medium text-white bg-gradient-to-r from-orange-500 to-amber-500 rounded-xl hover:from-orange-600 hover:to-amber-600 transition-colors shadow-lg shadow-orange-500/30">Submit Proposal</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Demo Trigger Button -->
<button onclick="openModal('form-modal')" class="px-6 py-3 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-medium rounded-xl hover:from-orange-600 hover:to-amber-600 transition-all focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2">Open Form Modal</button>

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

# Form Modal

Form inside a modal.

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

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