bonusmulesoft/postmaster-pro-form-wizard
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>PostMaster Pro - Create New Post</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">13</head>14<body class="bg-gray-50 font-inter">15 <div class="min-h-screen flex items-center justify-center p-4">16 <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg overflow-hidden animate__animated animate__fadeIn">17 <!-- Form Header -->18 <div class="bg-gradient-to-r from-indigo-500 to-purple-600 p-6 text-white">19 <div class="flex items-center justify-between">20 <div>21 <h1 class="text-2xl font-bold flex items-center gap-2">22 <i data-feather="edit-3" class="w-6 h-6"></i>23 Create New Post24 </h1>25 <p class="text-indigo-100 mt-1">Fill out the form below to create your post</p>26 </div>27 <div class="bg-white/20 rounded-full p-2">28 <i data-feather="file-text" class="w-6 h-6"></i>29 </div>30 </div>31 <div class="mt-4 flex overflow-x-auto pb-2">32 <div class="flex space-x-4">33 <div class="flex flex-col items-center">34 <div class="w-8 h-8 rounded-full bg-white text-indigo-600 flex items-center justify-center font-bold">1</div>35 <span class="text-xs mt-1">Basic Info</span>36 </div>37 <div class="flex flex-col items-center">38 <div class="w-8 h-8 rounded-full bg-white/30 text-white flex items-center justify-center font-bold">2</div>39 <span class="text-xs mt-1">Location</span>40 </div>41 <div class="flex flex-col items-center">42 <div class="w-8 h-8 rounded-full bg-white/30 text-white flex items-center justify-center font-bold">3</div>43 <span class="text-xs mt-1">Details</span>44 </div>45 <div class="flex flex-col items-center">46 <div class="w-8 h-8 rounded-full bg-white/30 text-white flex items-center justify-center font-bold">4</div>47 <span class="text-xs mt-1">Review</span>48 </div>49 </div>50 </div>51 </div>52 53 <!-- Form Body -->54 <form class="p-6 space-y-6">55 <!-- Basic Info Section -->56 <div class="space-y-6">57 <h2 class="text-xl font-semibold text-gray-800 border-b pb-2 flex items-center gap-2">58 <i data-feather="info" class="w-5 h-5"></i>59 Basic Information60 </h2>61 62 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">63 <div>64 <label class="block text-sm font-medium text-gray-700 mb-1" for="title">Post Title</label>65 <input type="text" id="title" name="title" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">66 </div>67 68 <div>69 <label class="block text-sm font-medium text-gray-700 mb-1" for="category">Category</label>70 <select id="category" name="category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 appearance-none bg-white">71 <option value="">Select a category</option>72 <option value="delivery">Delivery</option>73 <option value="service">Service</option>74 <option value="request">Request</option>75 <option value="other">Other</option>76 </select>77 </div>78 </div>79 80 <div>81 <label class="block text-sm font-medium text-gray-700 mb-1" for="content">Post Content</label>82 <textarea id="content" name="content" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"></textarea>83 </div>84 </div>85 86 <!-- Location Section -->87 <div class="space-y-6">88 <h2 class="text-xl font-semibold text-gray-800 border-b pb-2 flex items-center gap-2">89 <i data-feather="map-pin" class="w-5 h-5"></i>90 Location Details91 </h2>92 93 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">94 <div>95 <label class="block text-sm font-medium text-gray-700 mb-1" for="pickupLocation">Pickup Location</label>96 <div class="relative">97 <input type="text" id="pickupLocation" name="pickupLocation.address" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition pl-10">98 <i data-feather="map-pin" class="absolute left-3 top-3 text-gray-400 w-4 h-4"></i>99 </div>100 </div>101 102 <div>103 <label class="block text-sm font-medium text-gray-700 mb-1" for="dropoffLocation">Dropoff Location</label>104 <div class="relative">105 <input type="text" id="dropoffLocation" name="dropoffLocation.address" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition pl-10">106 <i data-feather="map-pin" class="absolute left-3 top-3 text-gray-400 w-4 h-4"></i>107 </div>108 </div>109 </div>110 </div>111 112 <!-- Price & Timing Section -->113 <div class="space-y-6">114 <h2 class="text-xl font-semibold text-gray-800 border-b pb-2 flex items-center gap-2">115 <i data-feather="dollar-sign" class="w-5 h-5"></i>116 Pricing & Timing117 </h2>118 119 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">120 <div>121 <label class="block text-sm font-medium text-gray-700 mb-1" for="priceMin">Minimum Price ($)</label>122 <input type="number" id="priceMin" name="price.min" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">123 </div>124 125 <div>126 <label class="block text-sm font-medium text-gray-700 mb-1" for="priceMax">Maximum Price ($)</label>127 <input type="number" id="priceMax" name="price.max" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">128 </div>129 130 <div>131 <label class="block text-sm font-medium text-gray-700 mb-1" for="currency">Currency</label>132 <select id="currency" name="price.currency" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 appearance-none bg-white">133 <option value="USD">USD</option>134 <option value="EUR">EUR</option>135 <option value="GBP">GBP</option>136 <option value="CAD">CAD</option>137 <option value="AUD">AUD</option>138 </select>139 </div>140 </div>141 142 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">143 <div>144 <label class="block text-sm font-medium text-gray-700 mb-1" for="activeFrom">Active From</label>145 <input type="datetime-local" id="activeFrom" name="activeFrom" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">146 </div>147 148 <div>149 <label class="block text-sm font-medium text-gray-700 mb-1" for="activeUntil">Active Until</label>150 <input type="datetime-local" id="activeUntil" name="activeUntil" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">151 </div>152 </div>153 </div>154 155 <!-- Attachments Section -->156 <div class="space-y-6">157 <h2 class="text-xl font-semibold text-gray-800 border-b pb-2 flex items-center gap-2">158 <i data-feather="paperclip" class="w-5 h-5"></i>159 Attachments160 </h2>161 162 <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">163 <div class="flex flex-col items-center justify-center space-y-2">164 <i data-feather="upload-cloud" class="w-12 h-12 text-gray-400"></i>165 <p class="text-sm text-gray-500">Drag & drop files here or click to browse</p>166 <button type="button" class="mt-2 px-4 py-2 bg-indigo-100 text-indigo-600 rounded-lg hover:bg-indigo-200 transition">167 Select Files168 </button>169 </div>170 <input type="file" id="attachments" name="attachments" multiple class="hidden">171 </div>172 173 <div id="file-list" class="hidden">174 <h3 class="text-sm font-medium text-gray-700 mb-2">Selected Files</h3>175 <ul class="space-y-2">176 <!-- Files will be listed here -->177 </ul>178 </div>179 </div>180 181 <!-- Form Actions -->182 <div class="flex flex-col sm:flex-row justify-between gap-4 pt-6 border-t">183 <button type="button" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">184 Cancel185 </button>186 <div class="flex gap-4">187 <button type="button" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">188 Save Draft189 </button>190 <button type="submit" class="px-6 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-lg hover:from-indigo-600 hover:to-purple-700 transition shadow-md flex items-center gap-2">191 <i data-feather="save" class="w-4 h-4"></i>192 Publish Post193 </button>194 </div>195 </div>196 </form>197 </div>198 </div>199 200 <script src="script.js"></script>201 <script>202 feather.replace();203 </script>204<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>205</body>206</html>