TesteCountry/taskflow-pro-enhanced-modals-edition
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>TaskFlow Pro - Enhanced Modals</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');12 13 body {14 font-family: 'Inter', sans-serif;15 }16 17 .modal-backdrop {18 backdrop-filter: blur(8px);19 background: rgba(0, 0, 0, 0.4);20 }21 22 .modal-container {23 animation: modalSlideIn 0.3s ease-out;24 }25 26 @keyframes modalSlideIn {27 from {28 opacity: 0;29 transform: translateY(-20px) scale(0.95);30 }31 to {32 opacity: 1;33 transform: translateY(0) scale(1);34 }35 }36 37 .input-focus {38 transition: all 0.2s ease;39 }40 41 .input-focus:focus {42 transform: translateY(-1px);43 box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);44 }45 46 .btn-hover {47 transition: all 0.3s ease;48 position: relative;49 overflow: hidden;50 }51 52 .btn-hover:hover {53 transform: translateY(-2px);54 box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.4);55 }56 57 .btn-hover:active {58 transform: translateY(0);59 }60 61 .btn-hover::after {62 content: '';63 position: absolute;64 top: 50%;65 left: 50%;66 width: 5px;67 height: 5px;68 background: rgba(255, 255, 255, 0.5);69 opacity: 0;70 border-radius: 100%;71 transform: scale(1, 1) translate(-50%);72 transform-origin: 50% 50%;73 }74 75 .btn-hover:focus:not(:active)::after {76 animation: ripple 1s ease-out;77 }78 79 @keyframes ripple {80 0% {81 transform: scale(0, 0);82 opacity: 0.5;83 }84 100% {85 transform: scale(20, 20);86 opacity: 0;87 }88 }89 90 .gradient-border {91 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);92 padding: 2px;93 border-radius: 12px;94 }95 96 .gradient-border > div {97 background: white;98 border-radius: 10px;99 }100 </style>101</head>102<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-4">103 <!-- Demo buttons to trigger modals -->104 <div class="space-y-4 text-center">105 <button id="demo-task-btn" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-xl shadow-lg btn-hover">106 <i data-feather="plus" class="inline w-5 h-5 mr-2"></i>107 Open Task Modal108 </button>109 <button id="demo-status-btn" class="px-6 py-3 bg-gradient-to-r from-indigo-500 to-pink-500 text-white font-semibold rounded-xl shadow-lg btn-hover">110 <i data-feather="sliders" class="inline w-5 h-5 mr-2"></i>111 Open Status Modal112 </button>113 </div>114 115 <!-- Enhanced Task Modal -->116 <div id="task-modal" class="fixed inset-0 modal-backdrop overflow-y-auto h-full w-full z-50 hidden transition-all duration-300">117 <div class="flex items-center justify-center min-h-screen p-4">118 <div class="gradient-border modal-container max-w-md w-full">119 <div class="bg-white rounded-xl shadow-2xl overflow-hidden">120 <!-- Modal Header -->121 <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-6 text-white">122 <div class="flex justify-between items-center">123 <h3 id="modal-title" class="text-xl font-bold">Create New Task</h3>124 <button id="close-task-modal" class="text-white hover:text-blue-100 transition-colors">125 <i data-feather="x" class="w-6 h-6"></i>126 </button>127 </div>128 <p class="text-blue-100 text-sm mt-2">Organize your workflow with a new task</p>129 </div>130 131 <!-- Modal Body -->132 <div class="p-6 space-y-4">133 <div>134 <label for="task-title" class="block text-sm font-medium text-gray-700 mb-1">Task Title</label>135 <div class="relative">136 <i data-feather="edit-3" class="absolute left-3 top-3 text-gray-400 w-4 h-4"></i>137 <input id="task-title" type="text" placeholder="What needs to be done?" 138 class="pl-10 pr-4 py-3 w-full rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 input-focus transition-all">139 </div>140 </div>141 142 <div>143 <label for="task-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>144 <div class="relative">145 <i data-feather="file-text" class="absolute left-3 top-3 text-gray-400 w-4 h-4"></i>146 <textarea id="task-description" placeholder="Add details about this task..." 147 class="pl-10 pr-4 py-3 w-full rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 input-focus transition-all" rows="3"></textarea>148 </div>149 </div>150 151 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">152 <div>153 <label for="task-company" class="block text-sm font-medium text-gray-700 mb-1">Company</label>154 <div class="relative">155 <i data-feather="briefcase" class="absolute left-3 top-3 text-gray-400 w-4 h-4"></i>156 <select id="task-company" class="pl-10 pr-4 py-3 w-full rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 input-focus transition-all appearance-none">157 <option value="">Select Company</option>158 <option value="1">Acme Corp</option>159 <option value="2">Globex Industries</option>160 <option value="3">Stark Enterprises</option>161 </select>162 <i data-feather="chevron-down" class="absolute right-3 top-3 text-gray-400 w-4 h-4 pointer-events-none"></i>163 </div>164 </div>165 166 <div>167 <label for="task-status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>168 <div class="relative">169 <i data-feather="trending-up" class="absolute left-3 top-3 text-gray-400 w-4 h-4"></i>170 <select id="task-status" class="pl-10 pr-4 py-3 w-full rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 input-focus transition-all appearance-none">171 <option value="">Select Status</option>172 <option value="1">To Do</option>173 <option value="2">In Progress</option>174 <option value="3">Review</option>175 <option value="4">Completed</option>176 </select>177 <i data-feather="chevron-down" class="absolute right-3 top-3 text-gray-400 w-4 h-4 pointer-events-none"></i>178 </div>179 </div>180 </div>181 182 <div>183 <label for="task-due-date" class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>184 <div class="relative">185 <i data-feather="calendar" class="absolute left-3 top-3 text-gray-400 w-4 h-4"></i>186 <input id="task-due-date" type="date" 187 class="pl-10 pr-4 py-3 w-full rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 input-focus transition-all">188 </div>189 </div>190 </div>191 192 <!-- Modal Footer -->193 <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">194 <button id="cancel-task-btn" class="px-5 py-2 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition-colors btn-hover">195 Cancel196 </button>197 <button id="save-task-btn" class="px-5 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg shadow-md btn-hover">198 <i data-feather="check" class="inline w-4 h-4 mr-2"></i>199 Save Task200 </button>201 </div>202 </div>203 </div>204 </div>205 </div>206 207 <!-- Enhanced Status Modal -->208 <div id="status-modal" class="fixed inset-0 modal-backdrop overflow-y-auto h-full w-full z-50 hidden transition-all duration-300">209 <div class="flex items-center justify-center min-h-screen p-4">210 <div class="gradient-border modal-container max-w-md w-full">211 <div class="bg-white rounded-xl shadow-2xl overflow-hidden">212 <!-- Modal Header -->213 <div class="bg-gradient-to-r from-indigo-500 to-pink-500 p-6 text-white">214 <div class="flex justify-between items-center">215 <h3 class="text-xl font-bold">Create New Status</h3>216 <button id="close-status-modal" class="text-white hover:text-indigo-100 transition-colors">217 <i data-feather="x" class="w-6 h-6"></i>218 </button>219 </div>220 <p class="text-indigo-100 text-sm mt-2">Add a custom status to your workflow</p>221 </div>222 223 <!-- Modal Body -->224 <div class="p-6">225 <div class="mb-6">226 <label for="new-status-name" class="block text-sm font-medium text-gray-700 mb-3">Status Name</label>227 <div class="relative">228 <i data-feather="tag" class="absolute left-3 top-3 text-gray-400 w-4 h-4"></i>229 <input id="new-status-name" type="text" placeholder="Enter a descriptive status name" 230 class="pl-10 pr-4 py-3 w-full rounded-lg border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 input-focus transition-all">231 </div>232 <p class="text-xs text-gray-500 mt-2">This will appear in your status dropdown for task assignment</p>233 </div>234 235 <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100">236 <div class="flex items-start">237 <i data-feather="info" class="text-indigo-500 w-5 h-5 mr-2 mt-0.5 flex-shrink-0"></i>238 <div>239 <p class="text-sm text-indigo-800 font-medium">Pro Tip</p>240 <p class="text-xs text-indigo-600">Create statuses that represent your workflow stages, like "In Review", "Blocked", or "On Hold".</p>241 </div>242 </div>243 </div>244 </div>245 246 <!-- Modal Footer -->247 <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">248 <button id="cancel-status-btn" class="px-5 py-2 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition-colors btn-hover">249 Cancel250 </button>251 <button id="create-status-btn" class="px-5 py-2 bg-gradient-to-r from-indigo-500 to-pink-500 text-white font-medium rounded-lg shadow-md btn-hover">252 <i data-feather="plus" class="inline w-4 h-4 mr-2"></i>253 Create Status254 </button>255 </div>256 </div>257 </div>258 </div>259 </div>260 261 <script>262 // Modal functionality263 document.addEventListener('DOMContentLoaded', function() {264 feather.replace();265 266 const taskModal = document.getElementById('task-modal');267 const statusModal = document.getElementById('status-modal');268 const demoTaskBtn = document.getElementById('demo-task-btn');269 const demoStatusBtn = document.getElementById('demo-status-btn');270 const closeTaskModal = document.getElementById('close-task-modal');271 const closeStatusModal = document.getElementById('close-status-modal');272 const cancelTaskBtn = document.getElementById('cancel-task-btn');273 const cancelStatusBtn = document.getElementById('cancel-status-btn');274 275 // Open modals276 demoTaskBtn.addEventListener('click', () => {277 taskModal.classList.remove('hidden');278 document.body.style.overflow = 'hidden';279 });280 281 demoStatusBtn.addEventListener('click', () => {282 statusModal.classList.remove('hidden');283 document.body.style.overflow = 'hidden';284 });285 286 // Close modals287 const closeModal = (modal) => {288 modal.classList.add('hidden');289 document.body.style.overflow = 'auto';290 };291 292 closeTaskModal.addEventListener('click', () => closeModal(taskModal));293 closeStatusModal.addEventListener('click', () => closeModal(statusModal));294 cancelTaskBtn.addEventListener('click', () => closeModal(taskModal));295 cancelStatusBtn.addEventListener('click', () => closeModal(statusModal));296 297 // Close modal when clicking outside298 window.addEventListener('click', (event) => {299 if (event.target === taskModal) closeModal(taskModal);300 if (event.target === statusModal) closeModal(statusModal);301 });302 303 // Add ripple effect to buttons304 document.querySelectorAll('.btn-hover').forEach(button => {305 button.addEventListener('click', function(e) {306 e.preventDefault();307 // Ripple effect is handled by CSS308 });309 });310 });311 </script>312</body>313</html>314