-
Notifications
You must be signed in to change notification settings - Fork 0
/
finishing.html
300 lines (275 loc) · 19.5 KB
/
finishing.html
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="2G9">
<link href="./output.css" rel="stylesheet">
<title>Finish Your ADs</title>
<link rel="icon" type="image/png" href="./images/logo.png">
<!-- Icons -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:[email protected]&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="./js/script.js"></script>
</head>
<style>
body {
font-family: "Noto Kufi Arabic", sans-serif;
}
</style>
<body class="bg-gray-50">
<!-- Start Navbar -->
<div id="navbar"></div>
<!-- End Navbar -->
<!-- Start Section -->
<div class="container mx-auto">
<div class="p-10">
<h2 class="text-[#C10D10] font-bold text-3xl">كدنا ننتهي !</h2>
</div>
<div class="p-4">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-start mb-6">
<h2 class="text-lg font-bold">الملخص السابق</h2>
<img src="./images/Group 105.svg" class="cursor-pointer" alt="pen">
</div>
<div class="grid grid-cols-1 gap-4 p-4 text-[#696969]">
<div class="flex">
<p class="font-semibold w-1/2">الشركة المصنعة</p>
<p class="w-1/2">اكورا</p>
</div>
<div class="flex">
<p class="font-semibold w-1/2">الموديل</p>
<p class="w-1/2">MDX</p>
</div>
<div class="flex">
<p class="font-semibold w-1/2">الفئة</p>
<p class="w-1/2">Advance Entertainment Package</p>
</div>
<div class="flex">
<p class="font-semibold w-1/2">المواصفات</p>
<p class="w-1/2">امريكي</p>
</div>
<div class="flex">
<p class="font-semibold w-1/2">سنة الصنع</p>
<p class="w-1/2">2018</p>
</div>
<div class="flex">
<p class="font-semibold w-1/2">كيلو مترات</p>
<p class="w-1/2">100000</p>
</div>
<div class="flex">
<p class="font-semibold w-1/2">السعر</p>
<p class="w-1/2">80.000</p>
</div>
<div class="flex">
<p class="font-semibold w-1/2">رقم التواصل</p>
<p class="w-1/2">056******</p>
</div>
</div>
</div>
</div>
<div class="flex justify-center items-center">
<div class="w-full max-w-lg px-4">
<form action="/upload" method="post" enctype="multipart/form-data" class="relative">
<div class="relative bg-white rounded-lg shadow-lg p-4 flex items-center">
<label for="imageUpload" class="flex-grow text-center cursor-pointer flex items-center justify-between space-x-2 gap-5">
<span class="">أضف الصور</span>
<ion-icon name="camera" class="text-[#C10D10]"></ion-icon>
</label>
<input
type="file"
id="imageUpload"
name="imageUpload"
accept="image/*"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
>
</div>
<p class="text-[12px] text-[#C10D10] font-bold mt-2 absolute ltr:left-[70%] rtl:left-[5%]">حد أدني 3 صور</p>
</form>
</div>
</div>
<div class="mt-10 p-10">
<form>
<div class="grid gap-6 mb-6 md:grid-cols-2">
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">ضع عنواناً مناسباً لإعلانك</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder="ضع عنواناً مناسباً لإعلانك" required />
</div>
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">وصف الاعلان</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder="وصف الاعلان" required />
</div>
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">نوع الوقود</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder="اختار نوع الوقود " required />
</div>
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">حالة الجسم</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder="اختار حالة الجسم " required />
</div>
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">الحالة الميكانيكية</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder="اختار الحالة الميكانيكية " required />
</div>
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">نوع ناقل الحركة</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder=" وصف الاعلان" required />
</div>
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">امكانية التصدير</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder="اختار امكانية التصدير " required />
</div>
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">سعة المحرك</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder=" اختار سعة المحرك" required />
</div>
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">القوة الحصانية</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder="اختار القوة الحصانية " required />
</div>
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">عدد الاسطونات</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder=" " required />
</div>
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">سعة البطارية ( كيلو وات / ساعة )</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder=" اختار سعة البطارية ( كيلو وات / ساعة )" required />
</div>
</div>
<div class="grid gap-6 mb-6 md:grid-cols-2">
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">اللون الخارجي</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder=" " required />
</div>
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">اللون الداخلي</label>
<input type="text" id="name" class="bg-white text-gray-900 text-sm rounded-lg block w-full p-2.5 shadow-md transition-all outline-none" placeholder=" " required />
</div>
</div>
</form>
</div>
<div class="p-10">
<div class="">
<h2 class="font-bold text-xl mb-5">مواصفات إضافية</h2>
</div>
<div class="grid lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-2 gap-4">
<div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div><div class="flex items-center gap-2">
<input type="checkbox" class="form-checkbox h-5 w-5 text-[#39CE8A]">
<label for="">مكيف هوائي</label>
</div>
</div>
</div>
<div class="mt-10 p-10">
<div>
<label for="countries" class="block mb-2 text-sm font-medium text-gray-900">قياس التصميم </label>
<select id="countries" class="bg-white text-[#929191] text-sm rounded-lg block shadow-md transition-all outline-none p-2.5 w-full lg:w-1/2">
<option selected>اختار قياس التصميم</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>
</div>
<div class="flex justify-center mt-10">
<button type="submit" class="text-white bg-[#C10D10] font-medium rounded-lg text-sm lg:w-1/2 px-5 py-2.5 text-center border hover:bg-white hover:text-[#C10D10] hover:border-[#C10D10]">التقديم للمراجعة و النشر</button>
</div>
</div>
<!-- End Section -->
<!-- Start Footer -->
<div id="footer"></div>
<!-- End Footer -->
</body>
</html>