Hugging Face's logo

Spaces:
Alizare1
/
auto-2000
Running

App Files Community
Alizare1 commited on
Commit
38260f4
·
verified ·
1 Parent(s): f5c19b9

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +5 -3
  2. index.html +1024 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Auto 2000
3
- emoji: 👀
4
  colorFrom: red
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: auto-2000
3
+ emoji: 🐳
4
  colorFrom: red
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1024 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>اتوگالری 2000 | نمایشگاه خودروهای لوکس</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Noto Sans Arabic', sans-serif;
14
+ background-color: #f5f5f5;
15
+ }
16
+
17
+ .car-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
20
+ }
21
+
22
+ .admin-panel {
23
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
24
+ }
25
+
26
+ .tab-active {
27
+ border-bottom: 3px solid #3b82f6;
28
+ color: #3b82f6;
29
+ font-weight: bold;
30
+ }
31
+
32
+ .login-modal {
33
+ animation: fadeIn 0.3s ease-in-out;
34
+ }
35
+
36
+ @keyframes fadeIn {
37
+ from { opacity: 0; transform: translateY(-20px); }
38
+ to { opacity: 1; transform: translateY(0); }
39
+ }
40
+ </style>
41
+ </head>
42
+ <body>
43
+ <!-- Main Navigation -->
44
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
45
+ <div class="max-w-7xl mx-auto px-4">
46
+ <div class="flex justify-between items-center h-16">
47
+ <div class="flex items-center">
48
+ <a href="#" class="flex-shrink-0">
49
+ <img class="h-10" src="https://via.placeholder.com/150x50?text=AutoGallery2000" alt="AutoGallery 2000">
50
+ </a>
51
+ <div class="hidden md:block">
52
+ <div class="ml-10 flex items-baseline space-x-4 space-x-reverse">
53
+ <a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">صفحه اصلی</a>
54
+ <a href="#cars" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">خودروها</a>
55
+ <a href="#about" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">درباره ما</a>
56
+ <a href="#contact" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">تماس با ما</a>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ <div class="hidden md:block">
61
+ <button onclick="openAdminPanel()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
62
+ <i class="fas fa-user-shield ml-2"></i> پنل مدیریت
63
+ </button>
64
+ </div>
65
+ <div class="-mr-2 flex md:hidden">
66
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
67
+ <span class="sr-only">Open main menu</span>
68
+ <i class="fas fa-bars"></i>
69
+ </button>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </nav>
74
+
75
+ <!-- Hero Section -->
76
+ <div class="relative bg-gray-900 overflow-hidden">
77
+ <div class="max-w-7xl mx-auto">
78
+ <div class="relative z-10 pb-8 bg-gray-900 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
79
+ <div class="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
80
+ <div class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
81
+ <div class="sm:text-center lg:text-right">
82
+ <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl">
83
+ <span class="block">به نمایشگاه خودروهای لوکس</span>
84
+ <span class="block text-blue-400">اتوگالری 2000</span>
85
+ </h1>
86
+ <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
87
+ بهترین و جدیدترین خودروهای روز دنیا با گارانتی معتبر و قیمت مناسب
88
+ </p>
89
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
90
+ <div class="rounded-md shadow">
91
+ <a href="#cars" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
92
+ مشاهده خودروها
93
+ </a>
94
+ </div>
95
+ <div class="mt-3 sm:mt-0 sm:ml-3 sm:mr-3">
96
+ <a href="#contact" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
97
+ تماس با ما
98
+ </a>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <div class="lg:absolute lg:inset-y-0 lg:left-0 lg:w-1/2">
107
+ <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1494972308805-463bc619d34e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Luxury Cars">
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Featured Cars Section -->
112
+ <section id="cars" class="py-12 bg-white">
113
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
114
+ <div class="text-center">
115
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
116
+ خودروهای ویژه
117
+ </h2>
118
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
119
+ جدیدترین و لوکس ترین خودروهای موجود در نمایشگاه
120
+ </p>
121
+ </div>
122
+
123
+ <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3" id="cars-container">
124
+ <!-- Car cards will be loaded here dynamically -->
125
+ </div>
126
+ </div>
127
+ </section>
128
+
129
+ <!-- About Us Section -->
130
+ <section id="about" class="py-12 bg-gray-50">
131
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
132
+ <div class="lg:text-center">
133
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">درباره ما</h2>
134
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
135
+ اتوگالری 2000
136
+ </p>
137
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
138
+ پیشرو در ارائه خودروهای لوکس و با کیفیت
139
+ </p>
140
+ </div>
141
+
142
+ <div class="mt-10">
143
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
144
+ <div class="relative">
145
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
146
+ <i class="fas fa-medal text-xl"></i>
147
+ </div>
148
+ <p class="mr-16 text-lg leading-6 font-medium text-gray-900">کیفیت و اصالت</p>
149
+ <p class="mt-2 mr-16 text-base text-gray-500">
150
+ تمامی خودروهای موجود در نمایشگاه با گارانتی اصالت و سلامت فنی ارائه می‌شوند.
151
+ </p>
152
+ </div>
153
+
154
+ <div class="relative">
155
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
156
+ <i class="fas fa-hand-holding-usd text-xl"></i>
157
+ </div>
158
+ <p class="mr-16 text-lg leading-6 font-medium text-gray-900">قیمت مناسب</p>
159
+ <p class="mt-2 mr-16 text-base text-gray-500">
160
+ با حذف واسطه‌ها، خودروها را با مناسب‌ترین قیمت بازار به شما عرضه می‌کنیم.
161
+ </p>
162
+ </div>
163
+
164
+ <div class="relative">
165
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
166
+ <i class="fas fa-headset text-xl"></i>
167
+ </div>
168
+ <p class="mr-16 text-lg leading-6 font-medium text-gray-900">پشتیبانی 24 ساعته</p>
169
+ <p class="mt-2 mr-16 text-base text-gray-500">
170
+ تیم پشتیبانی ما به صورت 24 ساعته آماده پاسخگویی به سوالات و حل مشکلات شماست.
171
+ </p>
172
+ </div>
173
+
174
+ <div class="relative">
175
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
176
+ <i class="fas fa-shield-alt text-xl"></i>
177
+ </div>
178
+ <p class="mr-16 text-lg leading-6 font-medium text-gray-900">ضمانت بازگشت</p>
179
+ <p class="mt-2 mr-16 text-base text-gray-500">
180
+ در صورت عدم رضایت تا 7 روز امکان بازگشت خودرو و استرداد کامل وجه وجود دارد.
181
+ </p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </section>
187
+
188
+ <!-- Contact Us Section -->
189
+ <section id="contact" class="py-12 bg-white">
190
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
191
+ <div class="lg:text-center">
192
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">تماس با ما</h2>
193
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
194
+ راه‌های ارتباطی
195
+ </p>
196
+ </div>
197
+
198
+ <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
199
+ <div class="bg-gray-50 p-6 rounded-lg shadow">
200
+ <div class="flex items-center">
201
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
202
+ <i class="fas fa-map-marker-alt text-white text-xl"></i>
203
+ </div>
204
+ <div class="mr-3">
205
+ <h3 class="text-lg font-medium text-gray-900">آدرس نمایشگاه</h3>
206
+ <p class="mt-1 text-sm text-gray-500">
207
+ تهران، خیابان ولیعصر، بالاتر از میدان ولیعصر، پلاک 1234
208
+ </p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <div class="bg-gray-50 p-6 rounded-lg shadow">
214
+ <div class="flex items-center">
215
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
216
+ <i class="fas fa-phone-alt text-white text-xl"></i>
217
+ </div>
218
+ <div class="mr-3">
219
+ <h3 class="text-lg font-medium text-gray-900">تلفن تماس</h3>
220
+ <p class="mt-1 text-sm text-gray-500">
221
+ 021-12345678 <br>
222
+ 0912-345-6789
223
+ </p>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="bg-gray-50 p-6 rounded-lg shadow">
229
+ <div class="flex items-center">
230
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
231
+ <i class="fas fa-envelope text-white text-xl"></i>
232
+ </div>
233
+ <div class="mr-3">
234
+ <h3 class="text-lg font-medium text-gray-900">ایمیل</h3>
235
+ <p class="mt-1 text-sm text-gray-500">
236
+ [email protected] <br>
237
+ [email protected]
238
+ </p>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="mt-10 bg-gray-50 p-6 rounded-lg shadow">
245
+ <h3 class="text-lg font-medium text-gray-900 mb-4">فرم تماس با ما</h3>
246
+ <form class="space-y-4">
247
+ <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
248
+ <div>
249
+ <label for="name" class="block text-sm font-medium text-gray-700">نام و نام خانوادگی</label>
250
+ <input type="text" id="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
251
+ </div>
252
+ <div>
253
+ <label for="phone" class="block text-sm font-medium text-gray-700">شماره تماس</label>
254
+ <input type="tel" id="phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
255
+ </div>
256
+ </div>
257
+ <div>
258
+ <label for="email" class="block text-sm font-medium text-gray-700">ایمیل</label>
259
+ <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
260
+ </div>
261
+ <div>
262
+ <label for="message" class="block text-sm font-medium text-gray-700">پیام شما</label>
263
+ <textarea id="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
264
+ </div>
265
+ <div>
266
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
267
+ ارسال پیام
268
+ </button>
269
+ </div>
270
+ </form>
271
+ </div>
272
+ </div>
273
+ </section>
274
+
275
+ <!-- Footer -->
276
+ <footer class="bg-gray-900 text-white">
277
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
278
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
279
+ <div>
280
+ <h3 class="text-lg font-semibold mb-4">اتوگالری 2000</h3>
281
+ <p class="text-gray-400">
282
+ نمایشگاه تخصصی خودروهای لوکس و کلاسیک با بیش از 15 سال سابقه درخشان
283
+ </p>
284
+ <div class="mt-4 flex space-x-4 space-x-reverse">
285
+ <a href="#" class="text-gray-400 hover:text-white">
286
+ <i class="fab fa-instagram text-xl"></i>
287
+ </a>
288
+ <a href="#" class="text-gray-400 hover:text-white">
289
+ <i class="fab fa-telegram text-xl"></i>
290
+ </a>
291
+ <a href="#" class="text-gray-400 hover:text-white">
292
+ <i class="fab fa-whatsapp text-xl"></i>
293
+ </a>
294
+ </div>
295
+ </div>
296
+ <div>
297
+ <h3 class="text-lg font-semibold mb-4">لینک‌های سریع</h3>
298
+ <ul class="space-y-2">
299
+ <li><a href="#" class="text-gray-400 hover:text-white">صفحه اصلی</a></li>
300
+ <li><a href="#cars" class="text-gray-400 hover:text-white">خودروها</a></li>
301
+ <li><a href="#about" class="text-gray-400 hover:text-white">درباره ما</a></li>
302
+ <li><a href="#contact" class="text-gray-400 hover:text-white">تماس با ما</a></li>
303
+ </ul>
304
+ </div>
305
+ <div>
306
+ <h3 class="text-lg font-semibold mb-4">خدمات</h3>
307
+ <ul class="space-y-2">
308
+ <li><a href="#" class="text-gray-400 hover:text-white">فروش اقساطی</a></li>
309
+ <li><a href="#" class="text-gray-400 hover:text-white">کارشناسی خودرو</a></li>
310
+ <li><a href="#" class="text-gray-400 hover:text-white">بیمه خودرو</a></li>
311
+ <li><a href="#" class="text-gray-400 hover:text-white">نوسازی خودرو</a></li>
312
+ </ul>
313
+ </div>
314
+ <div>
315
+ <h3 class="text-lg font-semibold mb-4">عضویت در خبرنامه</h3>
316
+ <p class="text-gray-400 mb-4">
317
+ برای دریافت جدیدترین خودروها و تخفیف‌های ویژه در خبرنامه ما عضو شوید.
318
+ </p>
319
+ <form class="flex">
320
+ <input type="email" placeholder="ایمیل شما" class="px-4 py-2 w-full rounded-r-md focus:outline-none text-gray-900">
321
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-l-md">
322
+ <i class="fas fa-paper-plane"></i>
323
+ </button>
324
+ </form>
325
+ </div>
326
+ </div>
327
+ <div class="mt-12 pt-8 border-t border-gray-800">
328
+ <p class="text-gray-400 text-center">
329
+ © 2023 اتوگالری 2000. تمامی حقوق محفوظ است.
330
+ </p>
331
+ </div>
332
+ </div>
333
+ </footer>
334
+
335
+ <!-- Admin Panel Modal -->
336
+ <div id="admin-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
337
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
338
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
339
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
340
+ </div>
341
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
342
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full">
343
+ <div class="admin-panel px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
344
+ <div class="flex justify-between items-center">
345
+ <h3 class="text-lg leading-6 font-medium text-white">
346
+ پنل مدیریت اتوگالری 2000
347
+ </h3>
348
+ <button onclick="closeAdminPanel()" class="text-white hover:text-gray-200">
349
+ <i class="fas fa-times"></i>
350
+ </button>
351
+ </div>
352
+ </div>
353
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
354
+ <div class="w-full">
355
+ <div class="border-b border-gray-200">
356
+ <nav class="-mb-px flex space-x-8 space-x-reverse">
357
+ <button onclick="switchTab('cars-tab')" id="cars-tab-btn" class="tab-active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
358
+ مدیریت خودروها
359
+ </button>
360
+ <button onclick="switchTab('orders-tab')" id="orders-tab-btn" class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
361
+ سفارشات
362
+ </button>
363
+ <button onclick="switchTab('messages-tab')" id="messages-tab-btn" class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
364
+ پیام‌ها
365
+ </button>
366
+ <button onclick="switchTab('users-tab')" id="users-tab-btn" class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
367
+ کاربران
368
+ </button>
369
+ </nav>
370
+ </div>
371
+
372
+ <!-- Cars Management Tab -->
373
+ <div id="cars-tab" class="mt-4">
374
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
375
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
376
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
377
+ مدیریت خودروها
378
+ </h3>
379
+ <p class="mt-1 text-sm text-gray-500">
380
+ در این بخش می‌توانید خودروهای نمایشگاه را مدیریت کنید.
381
+ </p>
382
+ </div>
383
+ <div class="px-4 py-5 sm:p-6">
384
+ <button onclick="openAddCarModal()" class="mb-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
385
+ <i class="fas fa-plus ml-2"></i> افزودن خودرو جدید
386
+ </button>
387
+
388
+ <div class="overflow-x-auto">
389
+ <table class="min-w-full divide-y divide-gray-200">
390
+ <thead class="bg-gray-50">
391
+ <tr>
392
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
393
+ تصویر
394
+ </th>
395
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
396
+ نام خودرو
397
+ </th>
398
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
399
+ مدل
400
+ </th>
401
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
402
+ قیمت
403
+ </th>
404
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
405
+ موجودی
406
+ </th>
407
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
408
+ وضعیت
409
+ </th>
410
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
411
+ عملیات
412
+ </th>
413
+ </tr>
414
+ </thead>
415
+ <tbody class="bg-white divide-y divide-gray-200" id="admin-cars-table">
416
+ <!-- Cars will be loaded here dynamically -->
417
+ </tbody>
418
+ </table>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <!-- Orders Tab -->
425
+ <div id="orders-tab" class="mt-4 hidden">
426
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
427
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
428
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
429
+ مدیریت سفارشات
430
+ </h3>
431
+ <p class="mt-1 text-sm text-gray-500">
432
+ در این بخش می‌توانید سفارشات مشتریان را مدیریت کنید.
433
+ </p>
434
+ </div>
435
+ <div class="px-4 py-5 sm:p-6">
436
+ <div class="overflow-x-auto">
437
+ <table class="min-w-full divide-y divide-gray-200">
438
+ <thead class="bg-gray-50">
439
+ <tr>
440
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
441
+ شماره سفارش
442
+ </th>
443
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
444
+ مشتری
445
+ </th>
446
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
447
+ خودرو
448
+ </th>
449
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
450
+ تاریخ
451
+ </th>
452
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
453
+ مبلغ
454
+ </th>
455
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
456
+ وضعیت
457
+ </th>
458
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
459
+ عملیات
460
+ </th>
461
+ </tr>
462
+ </thead>
463
+ <tbody class="bg-white divide-y divide-gray-200">
464
+ <tr>
465
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
466
+ #ORD-2023-001
467
+ </td>
468
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
469
+ محمد رضایی
470
+ </td>
471
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
472
+ بنز کلاس S 2023
473
+ </td>
474
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
475
+ 1402/05/15
476
+ </td>
477
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
478
+ 4,500,000,000 تومان
479
+ </td>
480
+ <td class="px-6 py-4 whitespace-nowrap">
481
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
482
+ تکمیل شده
483
+ </span>
484
+ </td>
485
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
486
+ <a href="#" class="text-blue-600 hover:text-blue-900">مشاهده</a>
487
+ </td>
488
+ </tr>
489
+ <!-- More orders... -->
490
+ </tbody>
491
+ </table>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <!-- Messages Tab -->
498
+ <div id="messages-tab" class="mt-4 hidden">
499
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
500
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
501
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
502
+ پیام‌های دریافتی
503
+ </h3>
504
+ <p class="mt-1 text-sm text-gray-500">
505
+ در این بخش می‌توانید پیام‌های ارسال شده از طریق فرم تماس را مشاهده و مدیریت کنید.
506
+ </p>
507
+ </div>
508
+ <div class="px-4 py-5 sm:p-6">
509
+ <div class="overflow-x-auto">
510
+ <table class="min-w-full divide-y divide-gray-200">
511
+ <thead class="bg-gray-50">
512
+ <tr>
513
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
514
+ نام
515
+ </th>
516
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
517
+ ایمیل
518
+ </th>
519
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
520
+ موضوع
521
+ </th>
522
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
523
+ تاریخ
524
+ </th>
525
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
526
+ وضعیت
527
+ </th>
528
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
529
+ عملیات
530
+ </th>
531
+ </tr>
532
+ </thead>
533
+ <tbody class="bg-white divide-y divide-gray-200">
534
+ <tr>
535
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
536
+ علی محمدی
537
+ </td>
538
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
539
+ [email protected]
540
+ </td>
541
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
542
+ استعلام قیمت BMW X6
543
+ </td>
544
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
545
+ 1402/05/10
546
+ </td>
547
+ <td class="px-6 py-4 whitespace-nowrap">
548
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
549
+ پاسخ داده نشده
550
+ </span>
551
+ </td>
552
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
553
+ <a href="#" class="text-blue-600 hover:text-blue-900">پاسخ</a>
554
+ </td>
555
+ </tr>
556
+ <!-- More messages... -->
557
+ </tbody>
558
+ </table>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+
564
+ <!-- Users Tab -->
565
+ <div id="users-tab" class="mt-4 hidden">
566
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
567
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
568
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
569
+ مدیریت کاربران
570
+ </h3>
571
+ <p class="mt-1 text-sm text-gray-500">
572
+ در این بخش می‌توانید کاربران سیستم را مدیریت کنید.
573
+ </p>
574
+ </div>
575
+ <div class="px-4 py-5 sm:p-6">
576
+ <button class="mb-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
577
+ <i class="fas fa-user-plus ml-2"></i> افزودن کاربر جدید
578
+ </button>
579
+
580
+ <div class="overflow-x-auto">
581
+ <table class="min-w-full divide-y divide-gray-200">
582
+ <thead class="bg-gray-50">
583
+ <tr>
584
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
585
+ نام کاربری
586
+ </th>
587
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
588
+ نام کامل
589
+ </th>
590
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
591
+ ایمیل
592
+ </th>
593
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
594
+ نقش
595
+ </th>
596
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
597
+ وضعیت
598
+ </th>
599
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
600
+ عملیات
601
+ </th>
602
+ </tr>
603
+ </thead>
604
+ <tbody class="bg-white divide-y divide-gray-200">
605
+ <tr>
606
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
607
+ admin
608
+ </td>
609
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
610
+ مدیر سیستم
611
+ </td>
612
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
613
+ [email protected]
614
+ </td>
615
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
616
+ مدیر کل
617
+ </td>
618
+ <td class="px-6 py-4 whitespace-nowrap">
619
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
620
+ فعال
621
+ </span>
622
+ </td>
623
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
624
+ <a href="#" class="text-blue-600 hover:text-blue-900">ویرایش</a>
625
+ </td>
626
+ </tr>
627
+ <!-- More users... -->
628
+ </tbody>
629
+ </table>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+
640
+ <!-- Add Car Modal -->
641
+ <div id="add-car-modal" class="fixed z-50 inset-0 overflow-y-auto hidden">
642
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
643
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
644
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
645
+ </div>
646
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
647
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
648
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
649
+ <div class="sm:flex sm:items-start">
650
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-right w-full">
651
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
652
+ افزودن خودرو جدید
653
+ </h3>
654
+ <div class="mt-4">
655
+ <form id="add-car-form" class="space-y-4">
656
+ <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
657
+ <div>
658
+ <label for="car-name" class="block text-sm font-medium text-gray-700">نام خودرو</label>
659
+ <input type="text" id="car-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
660
+ </div>
661
+ <div>
662
+ <label for="car-model" class="block text-sm font-medium text-gray-700">مدل</label>
663
+ <input type="text" id="car-model" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
664
+ </div>
665
+ </div>
666
+ <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
667
+ <div>
668
+ <label for="car-year" class="block text-sm font-medium text-gray-700">سال ساخت</label>
669
+ <input type="number" id="car-year" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
670
+ </div>
671
+ <div>
672
+ <label for="car-price" class="block text-sm font-medium text-gray-700">قیمت (تومان)</label>
673
+ <input type="text" id="car-price" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
674
+ </div>
675
+ </div>
676
+ <div>
677
+ <label for="car-description" class="block text-sm font-medium text-gray-700">توضیحات</label>
678
+ <textarea id="car-description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
679
+ </div>
680
+ <div>
681
+ <label for="car-image" class="block text-sm font-medium text-gray-700">تصویر خودرو</label>
682
+ <input type="file" id="car-image" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
683
+ </div>
684
+ <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
685
+ <div>
686
+ <label for="car-stock" class="block text-sm font-medium text-gray-700">موجودی</label>
687
+ <input type="number" id="car-stock" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
688
+ </div>
689
+ <div>
690
+ <label for="car-status" class="block text-sm font-medium text-gray-700">وضعیت</label>
691
+ <select id="car-status" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
692
+ <option value="available">موجود</option>
693
+ <option value="sold-out">تمام شده</option>
694
+ <option value="coming-soon">به زودی</option>
695
+ </select>
696
+ </div>
697
+ </div>
698
+ </form>
699
+ </div>
700
+ </div>
701
+ </div>
702
+ </div>
703
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
704
+ <button type="button" onclick="addNewCar()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
705
+ ذخیره
706
+ </button>
707
+ <button type="button" onclick="closeAddCarModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
708
+ انصراف
709
+ </button>
710
+ </div>
711
+ </div>
712
+ </div>
713
+ </div>
714
+
715
+ <!-- Login Modal -->
716
+ <div id="login-modal" class="fixed z-50 inset-0 overflow-y-auto hidden">
717
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
718
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
719
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
720
+ </div>
721
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
722
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full">
723
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
724
+ <div class="sm:flex sm:items-start">
725
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-right w-full">
726
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
727
+ ورود به پنل مدیریت
728
+ </h3>
729
+ <div class="mt-4">
730
+ <form class="space-y-4">
731
+ <div>
732
+ <label for="username" class="block text-sm font-medium text-gray-700">نام کاربری</label>
733
+ <input type="text" id="username" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
734
+ </div>
735
+ <div>
736
+ <label for="password" class="block text-sm font-medium text-gray-700">رمز عبور</label>
737
+ <input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
738
+ </div>
739
+ </form>
740
+ </div>
741
+ </div>
742
+ </div>
743
+ </div>
744
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
745
+ <button type="button" onclick="login()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
746
+ ورود
747
+ </button>
748
+ <button type="button" onclick="closeLoginModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
749
+ انصراف
750
+ </button>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ </div>
755
+
756
+ <script>
757
+ // Sample car data
758
+ const cars = [
759
+ {
760
+ id: 1,
761
+ name: "مرسدس بنز کلاس S",
762
+ model: "S 500 4MATIC",
763
+ year: 2023,
764
+ price: "4,500,000,000",
765
+ description: "خودرویی لوکس با تمامی امکانات رفاهی و ایمنی روز دنیا",
766
+ image: "https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
767
+ stock: 3,
768
+ status: "available"
769
+ },
770
+ {
771
+ id: 2,
772
+ name: "بی ام و X6",
773
+ model: "M50i",
774
+ year: 2023,
775
+ price: "3,800,000,000",
776
+ description: "شاسی بلند اسپرت با طراحی منحصر به فرد و عملکرد خارق العاده",
777
+ image: "https://images.unsplash.com/photo-1618843479313-40f4afd4a8e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
778
+ stock: 2,
779
+ status: "available"
780
+ },
781
+ {
782
+ id: 3,
783
+ name: "پورشه 911",
784
+ model: "Turbo S",
785
+ year: 2023,
786
+ price: "5,200,000,000",
787
+ description: "اسپرت کوپه افسانه ای با شتاب و سرعت خیره کننده",
788
+ image: "https://images.unsplash.com/photo-1580273916550-e4c0b47e5a9e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
789
+ stock: 1,
790
+ status: "available"
791
+ },
792
+ {
793
+ id: 4,
794
+ name: "رنج روور",
795
+ model: "SVAutobiography",
796
+ year: 2023,
797
+ price: "4,200,000,000",
798
+ description: "شاسی بلند لوکس انگلیسی با فضای داخلی بی نظیر",
799
+ image: "https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
800
+ stock: 0,
801
+ status: "sold-out"
802
+ },
803
+ {
804
+ id: 5,
805
+ name: "لامبورگینی اوروس",
806
+ model: "Performante",
807
+ year: 2023,
808
+ price: "6,500,000,000",
809
+ description: "شاسی بلند اسپرت ایتالیایی با طراحی مهیج و عملکرد فوق العاده",
810
+ image: "https://images.unsplash.com/photo-1583121274602-3e2820c6988e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
811
+ stock: 5,
812
+ status: "available"
813
+ },
814
+ {
815
+ id: 6,
816
+ name: "فراری پوروفینو",
817
+ model: "F8 Tributo",
818
+ year: 2024,
819
+ price: "7,800,000,000",
820
+ description: "اسپرت ایتالیایی با طراحی خیره کننده و موتور پر قدرت",
821
+ image: "https://images.unsplash.com/photo-1580274455191-1c62238fa333?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80",
822
+ stock: 0,
823
+ status: "coming-soon"
824
+ }
825
+ ];
826
+
827
+ // Load cars on page load
828
+ document.addEventListener('DOMContentLoaded', function() {
829
+ renderCars();
830
+ renderAdminCarsTable();
831
+ });
832
+
833
+ // Render cars for main page
834
+ function renderCars() {
835
+ const container = document.getElementById('cars-container');
836
+ container.innerHTML = '';
837
+
838
+ cars.forEach(car => {
839
+ const statusBadge = car.status === 'available' ?
840
+ '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">موجود</span>' :
841
+ car.status === 'sold-out' ?
842
+ '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">تمام شده</span>' :
843
+ '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">به زودی</span>';
844
+
845
+ const card = `
846
+ <div class="car-card transition duration-300 ease-in-out">
847
+ <div class="bg-white rounded-lg overflow-hidden shadow-md">
848
+ <div class="h-48 overflow-hidden">
849
+ <img class="w-full h-full object-cover" src="${car.image}" alt="${car.name}">
850
+ </div>
851
+ <div class="p-4">
852
+ <div class="flex justify-between items-start">
853
+ <h3 class="text-lg font-semibold text-gray-900">${car.name}</h3>
854
+ ${statusBadge}
855
+ </div>
856
+ <p class="mt-1 text-sm text-gray-500">مدل: ${car.model} (${car.year})</p>
857
+ <p class="mt-2 text-gray-700">${car.description}</p>
858
+ <div class="mt-4 flex justify-between items-center">
859
+ <span class="text-lg font-bold text-gray-900">${car.price} تومان</span>
860
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
861
+ جزئیات بیشتر
862
+ </button>
863
+ </div>
864
+ </div>
865
+ </div>
866
+ </div>
867
+ `;
868
+
869
+ container.innerHTML += card;
870
+ });
871
+ }
872
+
873
+ // Render cars table for admin panel
874
+ function renderAdminCarsTable() {
875
+ const container = document.getElementById('admin-cars-table');
876
+ container.innerHTML = '';
877
+
878
+ cars.forEach(car => {
879
+ const statusBadge = car.status === 'available' ?
880
+ '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">موجود</span>' :
881
+ car.status === 'sold-out' ?
882
+ '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">تمام شده</span>' :
883
+ '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">به زودی</span>';
884
+
885
+ const row = `
886
+ <tr>
887
+ <td class="px-6 py-4 whitespace-nowrap">
888
+ <img class="h-10 w-16 object-cover rounded" src="${car.image}" alt="${car.name}">
889
+ </td>
890
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
891
+ ${car.name}
892
+ </td>
893
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
894
+ ${car.model}
895
+ </td>
896
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
897
+ ${car.price}
898
+ </td>
899
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
900
+ ${car.stock}
901
+ </td>
902
+ <td class="px-6 py-4 whitespace-nowrap">
903
+ ${statusBadge}
904
+ </td>
905
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
906
+ <button onclick="editCar(${car.id})" class="text-blue-600 hover:text-blue-900 ml-2">ویرایش</button>
907
+ <button onclick="deleteCar(${car.id})" class="text-red-600 hover:text-red-900">حذف</button>
908
+ </td>
909
+ </tr>
910
+ `;
911
+
912
+ container.innerHTML += row;
913
+ });
914
+ }
915
+
916
+ // Admin panel functions
917
+ function openAdminPanel() {
918
+ document.getElementById('admin-modal').classList.remove('hidden');
919
+ }
920
+
921
+ function closeAdminPanel() {
922
+ document.getElementById('admin-modal').classList.add('hidden');
923
+ }
924
+
925
+ function switchTab(tabId) {
926
+ // Hide all tabs
927
+ document.getElementById('cars-tab').classList.add('hidden');
928
+ document.getElementById('orders-tab').classList.add('hidden');
929
+ document.getElementById('messages-tab').classList.add('hidden');
930
+ document.getElementById('users-tab').classList.add('hidden');
931
+
932
+ // Remove active class from all tab buttons
933
+ document.getElementById('cars-tab-btn').classList.remove('tab-active');
934
+ document.getElementById('orders-tab-btn').classList.remove('tab-active');
935
+ document.getElementById('messages-tab-btn').classList.remove('tab-active');
936
+ document.getElementById('users-tab-btn').classList.remove('tab-active');
937
+
938
+ // Show selected tab and add active class to its button
939
+ document.getElementById(tabId).classList.remove('hidden');
940
+ document.getElementById(tabId + '-btn').classList.add('tab-active');
941
+ }
942
+
943
+ // Car management functions
944
+ function openAddCarModal() {
945
+ document.getElementById('add-car-modal').classList.remove('hidden');
946
+ }
947
+
948
+ function closeAddCarModal() {
949
+ document.getElementById('add-car-modal').classList.add('hidden');
950
+ document.getElementById('add-car-form').reset();
951
+ }
952
+
953
+ function addNewCar() {
954
+ const newCar = {
955
+ id: cars.length + 1,
956
+ name: document.getElementById('car-name').value,
957
+ model: document.getElementById('car-model').value,
958
+ year: parseInt(document.getElementById('car-year').value),
959
+ price: document.getElementById('car-price').value,
960
+ description: document.getElementById('car-description').value,
961
+ image: "https://via.placeholder.com/300x200?text=New+Car",
962
+ stock: parseInt(document.getElementById('car-stock').value),
963
+ status: document.getElementById('car-status').value
964
+ };
965
+
966
+ cars.push(newCar);
967
+ renderCars();
968
+ renderAdminCarsTable();
969
+ closeAddCarModal();
970
+
971
+ alert('خودرو با موفقیت اضافه شد!');
972
+ }
973
+
974
+ function editCar(id) {
975
+ const car = cars.find(c => c.id === id);
976
+ if (car) {
977
+ document.getElementById('car-name').value = car.name;
978
+ document.getElementById('car-model').value = car.model;
979
+ document.getElementById('car-year').value = car.year;
980
+ document.getElementById('car-price').value = car.price;
981
+ document.getElementById('car-description').value = car.description;
982
+ document.getElementById('car-stock').value = car.stock;
983
+ document.getElementById('car-status').value = car.status;
984
+
985
+ openAddCarModal();
986
+ }
987
+ }
988
+
989
+ function deleteCar(id) {
990
+ if (confirm('آیا از حذف این خودرو مطمئن هستید؟')) {
991
+ const index = cars.findIndex(c => c.id === id);
992
+ if (index !== -1) {
993
+ cars.splice(index, 1);
994
+ renderCars();
995
+ renderAdminCarsTable();
996
+ alert('خودرو با موفقیت حذف شد!');
997
+ }
998
+ }
999
+ }
1000
+
1001
+ // Login functions
1002
+ function openLoginModal() {
1003
+ document.getElementById('login-modal').classList.remove('hidden');
1004
+ }
1005
+
1006
+ function closeLoginModal() {
1007
+ document.getElementById('login-modal').classList.add('hidden');
1008
+ }
1009
+
1010
+ function login() {
1011
+ const username = document.getElementById('username').value;
1012
+ const password = document.getElementById('password').value;
1013
+
1014
+ // Simple validation (in a real app, this would be more secure)
1015
+ if (username === 'admin' && password === 'admin123') {
1016
+ closeLoginModal();
1017
+ openAdminPanel();
1018
+ } else {
1019
+ alert('نام کاربری یا رمز عبور اشتباه است!');
1020
+ }
1021
+ }
1022
+ </script>
1023
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Alizare1/auto-2000" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1024
+ </html>