Finflowsystem/pixel-pawn-shop
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>Sell Your Digital Products - Pixel Pawn Shop</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <style>12 .gradient-text {13 background: linear-gradient(90deg, #3b82f6, #8b5cf6);14 -webkit-background-clip: text;15 background-clip: text;16 color: transparent;17 }18 .form-input:focus {19 border-color: #818cf8;20 box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.5);21 }22 </style>23</head>24<body class="bg-gray-50">25 <!-- Navigation -->26 <nav class="bg-white border-b border-gray-200">27 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">28 <div class="flex justify-between h-16">29 <div class="flex items-center">30 <div class="flex-shrink-0 flex items-center">31 <i data-feather="shopping-bag" class="h-6 w-6 text-indigo-600"></i>32 <span class="ml-2 text-xl font-bold text-gray-900">Pixel Pawn Shop</span>33 </div>34 </div>35 <div class="flex items-center space-x-4">36 <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:bg-indigo-50 hover:text-indigo-700">Home</a>37 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-900 hover:bg-indigo-50 hover:text-indigo-700">Sell</a>38 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:bg-indigo-50 hover:text-indigo-700">Dashboard</a>39 <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition-colors">Sign In</button>40 </div>41 </div>42 </div>43 </nav>44 45 <!-- Sell Form Section -->46 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">47 <div class="bg-white rounded-xl shadow-md overflow-hidden">48 <div class="md:flex">49 <div class="md:w-1/3 bg-gradient-to-br from-indigo-500 to-purple-600 p-8 flex flex-col justify-center">50 <div class="text-white">51 <h2 class="text-2xl font-bold mb-4">Turn Your Skills Into Profit</h2>52 <p class="mb-6">Join thousands of creators earning passive income by selling their digital products.</p>53 <div class="space-y-4">54 <div class="flex items-start">55 <i data-feather="check-circle" class="flex-shrink-0 h-5 w-5 text-white mr-3 mt-0.5"></i>56 <p class="text-sm">Get paid instantly when your product sells</p>57 </div>58 <div class="flex items-start">59 <i data-feather="check-circle" class="flex-shrink-0 h-5 w-5 text-white mr-3 mt-0.5"></i>60 <p class="text-sm">Reach millions of potential customers</p>61 </div>62 <div class="flex items-start">63 <i data-feather="check-circle" class="flex-shrink-0 h-5 w-5 text-white mr-3 mt-0.5"></i>64 <p class="text-sm">Keep 85% of every sale</p>65 </div>66 </div>67 </div>68 </div>69 <div class="md:w-2/3 p-8">70 <h1 class="text-3xl font-bold text-gray-900 mb-6">List Your Digital Product</h1>71 72 <form class="space-y-6">73 <div>74 <label for="product-name" class="block text-sm font-medium text-gray-700 mb-1">Product Name</label>75 <input type="text" id="product-name" name="product-name" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 py-2 px-3 border" placeholder="e.g. Ultimate Photoshop Brush Pack">76 </div>77 78 <div>79 <label for="product-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>80 <textarea id="product-description" name="product-description" rows="4" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 py-2 px-3 border" placeholder="Describe your product in detail..."></textarea>81 </div>82 83 <div>84 <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>85 <div class="grid grid-cols-2 gap-3 mt-1">86 <div>87 <input type="radio" id="category-design" name="category" value="design" class="hidden peer" checked>88 <label for="category-design" class="inline-flex items-center justify-between w-full p-3 text-gray-700 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-indigo-400 peer-checked:bg-indigo-50 hover:bg-gray-50">89 <div class="flex items-center">90 <i data-feather="image" class="h-5 w-5 text-indigo-600 mr-2"></i>91 <span>Design Assets</span>92 </div>93 <i data-feather="check" class="h-4 w-4 text-indigo-600 hidden peer-checked:block"></i>94 </label>95 </div>96 <div>97 <input type="radio" id="category-course" name="category" value="course" class="hidden peer">98 <label for="category-course" class="inline-flex items-center justify-between w-full p-3 text-gray-700 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-indigo-400 peer-checked:bg-indigo-50 hover:bg-gray-50">99 <div class="flex items-center">100 <i data-feather="video" class="h-5 w-5 text-indigo-600 mr-2"></i>101 <span>Course</span>102 </div>103 <i data-feather="check" class="h-4 w-4 text-indigo-600 hidden peer-checked:block"></i>104 </label>105 </div>106 <div>107 <input type="radio" id="category-code" name="category" value="code" class="hidden peer">108 <label for="category-code" class="inline-flex items-center justify-between w-full p-3 text-gray-700 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-indigo-400 peer-checked:bg-indigo-50 hover:bg-gray-50">109 <div class="flex items-center">110 <i data-feather="code" class="h-5 w-5 text-indigo-600 mr-2"></i>111 <span>Code/Templates</span>112 </div>113 <i data-feather="check" class="h-4 w-4 text-indigo-600 hidden peer-checked:block"></i>114 </label>115 </div>116 <div>117 <input type="radio" id="category-other" name="category" value="other" class="hidden peer">118 <label for="category-other" class="inline-flex items-center justify-between w-full p-3 text-gray-700 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-indigo-400 peer-checked:bg-indigo-50 hover:bg-gray-50">119 <div class="flex items-center">120 <i data-feather="box" class="h-5 w-5 text-indigo-600 mr-2"></i>121 <span>Other</span>122 </div>123 <i data="feather-check" class="h-4 w-4 text-indigo-600 hidden peer-checked:block"></i>124 </label>125 </div>126 </div>127 </div>128 129 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">130 <div>131 <label for="price" class="block text-sm font-medium text-gray-700 mb-1">Price ($)</label>132 <input type="number" id="price" name="price" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 py-2 px-3 border" placeholder="0.00" min="0" step="0.01">133 </div>134 <div>135 <label for="product-file" class="block text-sm font-medium text-gray-700 mb-1">Product File</label>136 <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">137 <div class="space-y-1 text-center">138 <div class="flex text-sm text-gray-600">139 <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none">140 <span>Upload a file</span>141 <input id="file-upload" name="file-upload" type="file" class="sr-only">142 </label>143 <p class="pl-1">or drag and drop</p>144 </div>145 <p class="text-xs text-gray-500">ZIP, PDF, MP4 up to 100MB</p>146 </div>147 </div>148 </div>149 </div>150 151 <div>152 <label for="preview-images" class="block text-sm font-medium text-gray-700 mb-1">Preview Images</label>153 <div class="mt-1 flex space-x-2">154 <div class="w-24 h-24 rounded-md bg-gray-100 flex items-center justify-center">155 <i data-feather="plus" class="h-8 w-8 text-gray-400"></i>156 </div>157 <div class="w-24 h-24 rounded-md bg-gray-100 flex items-center justify-center">158 <i data-feather="plus" class="h-8 w-8 text-gray-400"></i>159 </div>160 <div class="w-24 h-24 rounded-md bg-gray-100 flex items-center justify-center">161 <i data-feather="plus" class="h-8 w-8 text-gray-400"></i>162 </div>163 </div>164 </div>165 166 <div class="flex items-center justify-between">167 <div class="flex items-center">168 <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">169 <label for="terms" class="ml-2 block text-sm text-gray-700">170 I agree to the <a href="#" class="text-indigo-600 hover:text-indigo-500">terms and conditions</a>171 </label>172 </div>173 <button type="submit" class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">174 Publish Product175 </button>176 </div>177 </form>178 </div>179 </div>180 </div>181 </main>182 183 <!-- Footer -->184 <footer class="bg-white border-t border-gray-200">185 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">186 <div class="md:flex md:items-center md:justify-between">187 <div class="flex justify-center md:order-2 space-x-6">188 <a href="#" class="text-gray-400 hover:text-gray-500">189 <i data-feather="twitter" class="h-6 w-6"></i>190 </a>191 <a href="#" class="text-gray-400 hover:text-gray-500">192 <i data-feather="instagram" class="h-6 w-6"></i>193 </a>194 <a href="#" class="text-gray-400 hover:text-gray-500">195 <i data-feather="facebook" class="h-6 w-6"></i>196 </a>197 </div>198 <div class="mt-8 md:mt-0 md:order-1">199 <p class="text-center text-base text-gray-500">© 2023 Pixel Pawn Shop. All rights reserved.</p>200 </div>201 </div>202 </div>203 </footer>204 205 <script>206 // Initialize feather icons207 feather.replace();208 </script>209</body>210</html>211