-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathسيارات.html
227 lines (207 loc) · 9.08 KB
/
سيارات.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
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>زول للخدمات الإلكترونية - نموذج سيارات</title>
<link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Amiri', serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
direction: rtl;
color: black;
}
.header {
text-align: center;
padding: 50px 0;
background-color: #2C3E50;
color: white;
font-size: 36px;
}
.subheader {
text-align: center;
font-size: 18px;
margin-top: 10px;
color: #7F8C8D;
}
.form-container {
display: flex;
justify-content: center;
margin-top: 30px;
}
.form {
background-color: #ffffff;
border: 1px solid #BDC3C7;
padding: 30px;
border-radius: 10px;
width: 600px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.form input, .form select, .form textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #BDC3C7;
border-radius: 5px;
font-size: 16px;
}
.form label {
font-size: 16px;
margin-bottom: 5px;
display: block;
}
.form button {
padding: 10px;
background-color: #27AE60; /* اللون الأخضر */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
.image-upload-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.image-upload {
width: 30%;
}
.image-upload input {
width: 100%;
}
.image-upload label {
text-align: center;
margin-top: 5px;
display: block;
}
.showcase {
display: none;
text-align: center;
margin-top: 50px;
}
.showcase img {
width: 300px;
margin: 10px;
}
</style>
</head>
<body>
<div class="header">
زول للخدمات الإلكترونية - نموذج سيارات
</div>
<div class="subheader">
www.zol.com
</div>
<div class="form-container">
<div class="form">
<h2>إضافة سيارة جديدة</h2>
<form id="carForm">
<!-- نوع السيارة -->
<label for="carType">نوع السيارة:</label>
<select id="carType" required>
<option value="">اختر نوع السيارة</option>
<option value="سيارة سيدان">سيارة سيدان</option>
<option value="سيارة رياضية">سيارة رياضية</option>
<option value="سيارة SUV">سيارة SUV</option>
<option value="بيك أب">بيك أب</option>
<option value="شاحنة">شاحنة</option>
</select>
<!-- رقم هيكل السيارة -->
<label for="vin">رقم هيكل السيارة:</label>
<input type="text" id="vin" placeholder="أدخل رقم هيكل السيارة (VIN)" required>
<!-- اللون -->
<label for="color">اللون:</label>
<input type="text" id="color" placeholder="أدخل لون السيارة" required>
<!-- الموديل -->
<label for="model">الموديل:</label>
<input type="text" id="model" placeholder="أدخل موديل السيارة" required>
<!-- الشركة المصنعة -->
<label for="manufacturer">الشركة المصنعة:</label>
<select id="manufacturer" required>
<option value="">اختر الشركة المصنعة</option>
<option value="تويوتا">تويوتا</option>
<option value="فورد">فورد</option>
<option value="مرسيدس بنز">مرسيدس بنز</option>
<option value="BMW">BMW</option>
<option value="نيسان">نيسان</option>
<option value="هوندا">هوندا</option>
<option value="شيفروليه">شيفروليه</option>
<option value="كيا">كيا</option>
<option value="هيونداي">هيونداي</option>
<option value="أودي">أودي</option>
<option value="فولكس فاجن">فولكس فاجن</option>
<option value="بورش">بورش</option>
<option value="رينو">رينو</option>
<option value="ميني">ميني</option>
<option value="مازدا">مازدا</option>
<option value="بيجو">بيجو</option>
<option value="فيراري">فيراري</option>
<option value="لامبورغيني">لامبورغيني</option>
</select>
<!-- السعر -->
<label for="price">السعر:</label>
<input type="number" id="price" placeholder="أدخل سعر السيارة" required>
<!-- رقم التواصل -->
<label for="contactNumber">رقم التواصل:</label>
<input type="tel" id="contactNumber" placeholder="أدخل رقم الهاتف" required>
<!-- رفع صور السيارة -->
<label>رفع صور السيارة:</label>
<div class="image-upload-container">
<!-- الصور الأمامية -->
<div class="image-upload">
<label for="frontImage">صورة أمامية</label>
<input type="file" id="frontImage" accept="image/*" required>
</div>
<!-- الصور الجانبية -->
<div class="image-upload">
<label for="sideImage">صورة جانبية</label>
<input type="file" id="sideImage" accept="image/*" required>
</div>
<!-- الصور الخلفية -->
<div class="image-upload">
<label for="rearImage">صورة خلفية</label>
<input type="file" id="rearImage" accept="image/*" required>
</div>
<!-- الصورة الداخلية -->
<div class="image-upload">
<label for="interiorImage">صورة داخلية</label>
<input type="file" id="interiorImage" accept="image/*" required>
</div>
<!-- صورة إضافية -->
<div class="image-upload">
<label for="extraImage">صورة إضافية</label>
<input type="file" id="extraImage" accept="image/*" required>
</div>
</div>
<!-- زر إرسال الطلب -->
<button type="submit">رفع السيارة</button>
</form>
</div>
</div>
<div id="showcase" class="showcase">
<h2>سيارتك المعروضة للبيع</h2>
<div id="carDisplay">
<!-- يتم عرض السيارة هنا بعد رفع الطلب -->
</div>
</div>
<script>
document.getElementById('carForm').addEventListener('submit', function (event) {
event.preventDefault();
// الحصول على بيانات النموذج
const carType = document.getElementById('carType').value;
const vin = document.getElementById('vin').value;
const color = document.getElementById('color').value;
const model = document.getElementById('model').value;
const manufacturer = document.getElementById('manufacturer').value;
const price = document.getElementById('price').value;
const contactNumber = document.getElementById('contactNumber').value;
// الحصول على الصور
const frontImage = document.getElementById('frontImage').files[0];
const sideImage = document.getElementById('sideImage').files[0];
const rearImage = document.getElementById('rearImage').files[0];
const interiorImage = document.getElementById('interiorImage').files[0];
const extraImage = document.getElementById('extraImage').files[0];