-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemp.txt
191 lines (171 loc) · 10.3 KB
/
temp.txt
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<form id="create-form" method="POST" enctype="multipart/form-data" action="/product/create/<%= user %>">
<div class="border-b border-white/10 pb-12">
<h2 class="text-base font-semibold leading-7 text-white">Product Information</h2>
<p class="mt-1 text-sm leading-6 text-white">Create Your Product</p>
<!-- Images Section -->
<div class="flex flex-wrap gap-4">
<div class="sm:col-span-1">
<label for="thumbnail" class="block text-sm font-medium leading-6 text-white">Thumbnail Image*</label>
<div class="mt-2">
<input id="thumbnail" type="file" name="thumbnail" class="hidden" required />
<label for="thumbnail">
<img id="preview1" src="https://i.ibb.co/kSZwvxX/addLogo.png" alt="Add thumbnail"
class="cursor-pointer bg-gray-700 border py-3 my-2 mx-3 px-5 text-grey-darkest text-white rounded hover:bg-gray-900 h-32 w-32 object-cover" />
</label>
</div>
</div>
<div class="sm:col-span-1">
<label for="gallery1" class="block text-sm font-medium leading-6 text-white">Gallery Image 1</label>
<div class="mt-2">
<input id="gallery1" type="file" name="gallery1" class="hidden" />
<label for="gallery1">
<img id="preview2" src="https://i.ibb.co/hdMGGR4/carousel-1-1.png" alt="Add gallery image 1"
class="cursor-pointer bg-gray-700 border py-3 my-2 mx-3 px-5 text-grey-darkest text-white rounded hover:bg-gray-900 h-32 w-32 object-cover" />
</label>
</div>
</div>
<div class="sm:col-span-1">
<label for="gallery2" class="block text-sm font-medium leading-6 text-white">Gallery Image 2</label>
<div class="mt-2">
<input id="gallery2" type="file" name="gallery2" class="hidden" />
<label for="gallery2">
<img id="preview3" src="https://i.ibb.co/hdMGGR4/carousel-1-1.png" alt="Add gallery image 2"
class="cursor-pointer bg-gray-700 border py-3 my-2 mx-3 px-5 text-grey-darkest text-white rounded hover:bg-gray-900 h-32 w-32 object-cover" />
</label>
</div>
</div>
</div>
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<!-- Basic Information -->
<div class="sm:col-span-3">
<label for="productName" class="block text-sm font-medium leading-6 text-white">Product Name*</label>
<div class="mt-2">
<input type="text" name="productName" id="productName" required
class="bg-gray-900 p-2 block w-full rounded-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<div class="sm:col-span-3">
<label for="brand" class="block text-sm font-medium leading-6 text-white">Brand</label>
<div class="mt-2">
<input type="text" name="brand" id="brand"
class="bg-gray-900 p-2 block w-full rounded-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<!-- Pricing -->
<div class="sm:col-span-2">
<label for="basePrice" class="block text-sm font-medium leading-6 text-white">Base Price*</label>
<div class="mt-2">
<input type="number" name="basePrice" id="basePrice" min="0" step="0.01" required
class="bg-gray-900 p-2 block w-full rounded-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<div class="sm:col-span-2">
<label for="discountedPrice" class="block text-sm font-medium leading-6 text-white">Discounted Price</label>
<div class="mt-2">
<input type="number" name="discountedPrice" id="discountedPrice" min="0" step="0.01"
class="bg-gray-900 p-2 block w-full rounded-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<div class="sm:col-span-2">
<label for="currency" class="block text-sm font-medium leading-6 text-white">Currency</label>
<div class="mt-2">
<select name="currency" id="currency"
class="bg-gray-900 p-2 block w-full rounded-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="INR">INR</option>
</select>
</div>
</div>
<!-- Categories and Tags -->
<div class="sm:col-span-3">
<label for="category" class="block text-sm font-medium leading-6 text-white">Category*</label>
<div class="mt-2">
<select name="category" id="category" required
class="bg-gray-900 p-2 block w-full rounded-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<option value="">Select a category</option>
<option value="electronics">Electronics</option>
<option value="clothing">Clothing</option>
<option value="home">Home & Garden</option>
<option value="sports">Sports</option>
<option value="books">Books</option>
<option value="food">Food & Beverages</option>
<option value="services">Services</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="sm:col-span-3">
<label for="tags" class="block text-sm font-medium leading-6 text-white">Tags (comma-separated)</label>
<div class="mt-2">
<input type="text" name="tags" id="tags" placeholder="e.g., organic, handmade, premium"
class="bg-gray-900 p-2 block w-full rounded-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<!-- Additional Information -->
<div class="sm:col-span-3">
<label for="sku" class="block text-sm font-medium leading-6 text-white">SKU</label>
<div class="mt-2">
<input type="text" name="sku" id="sku"
class="bg-gray-900 p-2 block w-full rounded-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<div class="sm:col-span-3">
<label for="weight" class="block text-sm font-medium leading-6 text-white">Weight (in kg)</label>
<div class="mt-2">
<input type="number" name="weight" id="weight" min="0" step="0.01"
class="bg-gray-900 p-2 block w-full rounded-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<div class="sm:col-span-6">
<label for="description" class="block text-sm font-medium leading-6 text-white">Description*</label>
<div class="mt-2">
<textarea name="description" id="description" rows="4" required
class="bg-gray-900 p-2 block w-full rounded-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"></textarea>
</div>
</div>
<div class="sm:col-span-6">
<label for="specifications" class="block text-sm font-medium leading-6 text-white">Specifications</label>
<div class="mt-2">
<textarea name="specifications" id="specifications" rows="4"
class="bg-gray-900 p-2 block w-full rounded-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
placeholder="Enter product specifications..."></textarea>
</div>
</div>
</div>
</div>
<div class="mt-6 flex items-center justify-end gap-x-6">
<button type="button" class="text-sm font-semibold leading-6 text-white">Cancel</button>
<button type="submit"
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
</div>
</form>
<script>
document.querySelectorAll('input[type=file]').forEach(input => {
input.addEventListener('change', function () {
const file = this.files[0];
const reader = new FileReader();
const previewId = this.id === 'thumbnail' ? 'preview1' :
this.id === 'gallery1' ? 'preview2' : 'preview3';
reader.onloadend = function () {
document.getElementById(previewId).src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
document.getElementById(previewId).src = this.id === 'thumbnail' ?
"https://i.ibb.co/kSZwvxX/addLogo.png" :
"https://i.ibb.co/hdMGGR4/carousel-1-1.png";
}
});
});
// Optional: Add validation for discounted price
document.getElementById('discountedPrice').addEventListener('change', function() {
const basePrice = parseFloat(document.getElementById('basePrice').value);
const discountedPrice = parseFloat(this.value);
if (discountedPrice > basePrice) {
alert('Discounted price cannot be higher than base price');
this.value = '';
}
});