Hugging Face's logo

Spaces:
dpr1360
/
q
Running

App Files Community
dpr1360 commited on
Commit
8cfd4d1
·
verified ·
1 Parent(s): 50945a5

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +328 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Q
3
- emoji: 😻
4
- colorFrom: green
5
- colorTo: red
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: q
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,328 @@
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>شرکت ناجی پاس - معاونت خدمات خودرویی</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+Naskh+Arabic:wght@400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Noto Naskh Arabic', serif;
14
+ }
15
+
16
+ .map-container {
17
+ height: 400px;
18
+ width: 100%;
19
+ border-radius: 15px;
20
+ overflow: hidden;
21
+ }
22
+
23
+ .service-card {
24
+ transition: all 0.3s ease;
25
+ }
26
+
27
+ .service-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
30
+ }
31
+
32
+ .price-badge {
33
+ position: absolute;
34
+ top: -10px;
35
+ left: -10px;
36
+ }
37
+
38
+ .floating-button {
39
+ position: fixed;
40
+ bottom: 30px;
41
+ left: 30px;
42
+ z-index: 100;
43
+ box-shadow: 0 4px 15px rgba(0,0,0,0.2);
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-50">
48
+ <!-- Header -->
49
+ <header class="bg-yellow-500 text-white shadow-md">
50
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
51
+ <div class="flex items-center space-x-2 space-x-reverse">
52
+ <img src="https://via.placeholder.com/50" alt="Logo" class="w-12 h-12 rounded-full border-2 border-white">
53
+ <div>
54
+ <h1 class="text-xl font-bold">شرکت ناجی پاس</h1>
55
+ <p class="text-sm">معاونت خدمات خودرویی</p>
56
+ </div>
57
+ </div>
58
+ <div class="flex items-center space-x-4 space-x-reverse">
59
+ <button class="p-2 rounded-full bg-yellow-600">
60
+ <i class="fas fa-bell text-white"></i>
61
+ </button>
62
+ <button class="p-2 rounded-full bg-yellow-600">
63
+ <i class="fas fa-user text-white"></i>
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </header>
68
+
69
+ <!-- Main Content -->
70
+ <main class="container mx-auto px-4 py-6">
71
+ <!-- Hero Section -->
72
+ <section class="mb-8 relative rounded-xl overflow-hidden">
73
+ <div class="absolute inset-0 bg-gradient-to-r from-yellow-500 to-yellow-300 opacity-90"></div>
74
+ <div class="relative z-10 p-6 md:p-10 flex flex-col md:flex-row items-center">
75
+ <div class="md:w-1/2 mb-6 md:mb-0">
76
+ <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">خدمات امداد جاده‌ای و حمل خودرو</h2>
77
+ <p class="text-white mb-6">با استفاده از جرثقیل‌های پالفینگر زرد رنگ ما، در هر نقطه از ایران به کمک شما می‌آییم</p>
78
+ <button class="bg-white text-yellow-600 px-6 py-3 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition">
79
+ درخواست امداد
80
+ </button>
81
+ </div>
82
+ <div class="md:w-1/2 flex justify-center">
83
+ <img src="https://via.placeholder.com/400x250?text=جرثقیل+پالفینگر+زرد" alt="جرثقیل پالفینگر زرد" class="rounded-lg shadow-xl border-4 border-white">
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Services Section -->
89
+ <section class="mb-10">
90
+ <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b-2 border-yellow-500 pb-2">خدمات ما</h2>
91
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
92
+ <!-- Service 1 -->
93
+ <div class="service-card bg-white p-6 rounded-xl shadow-md relative">
94
+ <div class="price-badge bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
95
+ از ۱۲۰,۰۰۰ تومان
96
+ </div>
97
+ <div class="flex items-center mb-4">
98
+ <div class="bg-yellow-100 p-3 rounded-full mr-3">
99
+ <i class="fas fa-truck-pickup text-yellow-600 text-xl"></i>
100
+ </div>
101
+ <h3 class="text-lg font-bold text-gray-800">حمل خودرو</h3>
102
+ </div>
103
+ <p class="text-gray-600 mb-4">حمل خودرو شما با جرثقیل‌های مجهز پالفینگر به مقصد مورد نظر</p>
104
+ <button class="w-full bg-yellow-500 text-white py-2 rounded-lg hover:bg-yellow-600 transition">
105
+ درخواست حمل
106
+ </button>
107
+ </div>
108
+
109
+ <!-- Service 2 -->
110
+ <div class="service-card bg-white p-6 rounded-xl shadow-md relative">
111
+ <div class="price-badge bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
112
+ از ۸۰,۰۰۰ تومان
113
+ </div>
114
+ <div class="flex items-center mb-4">
115
+ <div class="bg-yellow-100 p-3 rounded-full mr-3">
116
+ <i class="fas fa-tools text-yellow-600 text-xl"></i>
117
+ </div>
118
+ <h3 class="text-lg font-bold text-gray-800">تعمیرات جاده‌ای</h3>
119
+ </div>
120
+ <p class="text-gray-600 mb-4">تعمیرات اولیه خودرو در محل حادثه توسط مکانیک‌های مجرب</p>
121
+ <button class="w-full bg-yellow-500 text-white py-2 rounded-lg hover:bg-yellow-600 transition">
122
+ درخواست مکانیک
123
+ </button>
124
+ </div>
125
+
126
+ <!-- Service 3 -->
127
+ <div class="service-card bg-white p-6 rounded-xl shadow-md relative">
128
+ <div class="price-badge bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
129
+ از ۵۰,۰۰۰ تومان
130
+ </div>
131
+ <div class="flex items-center mb-4">
132
+ <div class="bg-yellow-100 p-3 rounded-full mr-3">
133
+ <i class="fas fa-gas-pump text-yellow-600 text-xl"></i>
134
+ </div>
135
+ <h3 class="text-lg font-bold text-gray-800">سوخت رسانی</h3>
136
+ </div>
137
+ <p class="text-gray-600 mb-4">ارسال سوخت به محل خودروی شما در صورت اتمام بنزین</p>
138
+ <button class="w-full bg-yellow-500 text-white py-2 rounded-lg hover:bg-yellow-600 transition">
139
+ درخواست سوخت
140
+ </button>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Map Section -->
146
+ <section class="mb-10">
147
+ <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b-2 border-yellow-500 pb-2">پوشش سراسری در ایران</h2>
148
+ <div class="map-container bg-gray-200 flex items-center justify-center">
149
+ <img src="https://via.placeholder.com/800x400?text=نقشه+ایران" alt="نقشه ایران" class="w-full h-full object-cover">
150
+ </div>
151
+ <div class="mt-4 text-center">
152
+ <p class="text-gray-600">ما در تمامی شهرها و جاده‌های کشور حاضریم و در کمترین زمان ممکن به شما خدمات می‌رسانیم</p>
153
+ </div>
154
+ </section>
155
+
156
+ <!-- Pricing Section -->
157
+ <section class="mb-10">
158
+ <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b-2 border-yellow-500 pb-2">تعرفه خدمات (سال ۱۴۰۳)</h2>
159
+ <div class="overflow-x-auto">
160
+ <table class="w-full bg-white rounded-xl overflow-hidden shadow-md">
161
+ <thead class="bg-yellow-500 text-white">
162
+ <tr>
163
+ <th class="py-3 px-4 text-right">خدمت</th>
164
+ <th class="py-3 px-4 text-right">حداقل قیمت</th>
165
+ <th class="py-3 px-4 text-right">قیمت هر کیلومتر</th>
166
+ <th class="py-3 px-4 text-right">زمان انتظار</th>
167
+ </tr>
168
+ </thead>
169
+ <tbody class="divide-y divide-gray-200">
170
+ <tr>
171
+ <td class="py-3 px-4">حمل خودرو (جرثقیل پالفینگر)</td>
172
+ <td class="py-3 px-4">120,000 تومان</td>
173
+ <td class="py-3 px-4">3,500 تومان</td>
174
+ <td class="py-3 px-4">30 دقیقه</td>
175
+ </tr>
176
+ <tr class="bg-gray-50">
177
+ <td class="py-3 px-4">تعمیرات جاده‌ای</td>
178
+ <td class="py-3 px-4">80,000 تومان</td>
179
+ <td class="py-3 px-4">2,500 تومان</td>
180
+ <td class="py-3 px-4">45 دقیقه</td>
181
+ </tr>
182
+ <tr>
183
+ <td class="py-3 px-4">سوخت رسانی</td>
184
+ <td class="py-3 px-4">50,000 تومان</td>
185
+ <td class="py-3 px-4">4,000 تومان</td>
186
+ <td class="py-3 px-4">60 دقیقه</td>
187
+ </tr>
188
+ <tr class="bg-gray-50">
189
+ <td class="py-3 px-4">باطری به باطری</td>
190
+ <td class="py-3 px-4">70,000 تومان</td>
191
+ <td class="py-3 px-4">3,000 تومان</td>
192
+ <td class="py-3 px-4">40 دقیقه</td>
193
+ </tr>
194
+ </tbody>
195
+ </table>
196
+ </div>
197
+ <div class="mt-4 text-sm text-gray-500">
198
+ <p>* قیمت‌ها بر اساس نرخ مصوب سال ۱۴۰۳ می‌باشد و ممکن است در شرایط خاص تغییر کند.</p>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- Testimonials -->
203
+ <section class="mb-10">
204
+ <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b-2 border-yellow-500 pb-2">نظرات کاربران</h2>
205
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
206
+ <div class="bg-white p-6 rounded-xl shadow-md">
207
+ <div class="flex items-center mb-4">
208
+ <img src="https://via.placeholder.com/50" alt="User" class="w-12 h-12 rounded-full mr-3">
209
+ <div>
210
+ <h4 class="font-bold">محمد رضایی</h4>
211
+ <div class="flex text-yellow-400">
212
+ <i class="fas fa-star"></i>
213
+ <i class="fas fa-star"></i>
214
+ <i class="fas fa-star"></i>
215
+ <i class="fas fa-star"></i>
216
+ <i class="fas fa-star"></i>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ <p class="text-gray-600">در جاده چالوس خودرویم دچار مشکل شد. در کمتر از 40 دقیقه جرثقیل پالفینگر زرد رنگ شرکت ناجی پاس به محل رسید و خدمات عالی ارائه داد.</p>
221
+ </div>
222
+ <div class="bg-white p-6 rounded-xl shadow-md">
223
+ <div class="flex items-center mb-4">
224
+ <img src="https://via.placeholder.com/50" alt="User" class="w-12 h-12 rounded-full mr-3">
225
+ <div>
226
+ <h4 class="font-bold">فاطمه محمدی</h4>
227
+ <div class="flex text-yellow-400">
228
+ <i class="fas fa-star"></i>
229
+ <i class="fas fa-star"></i>
230
+ <i class="fas fa-star"></i>
231
+ <i class="fas fa-star"></i>
232
+ <i class="fas fa-star-half-alt"></i>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ <p class="text-gray-600">خودرویم در شهر دچار نقص فنی شد. مکانیک‌های این شرکت بسیار حرفه‌ای بودند و مشکل را در محل حل کردند. قیمت‌ها هم منصفانه بود.</p>
237
+ </div>
238
+ </div>
239
+ </section>
240
+ </main>
241
+
242
+ <!-- Floating Action Button -->
243
+ <button class="floating-button bg-yellow-500 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl shadow-lg hover:bg-yellow-600 transition">
244
+ <i class="fas fa-plus"></i>
245
+ </button>
246
+
247
+ <!-- Footer -->
248
+ <footer class="bg-gray-800 text-white py-8">
249
+ <div class="container mx-auto px-4">
250
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
251
+ <div>
252
+ <h3 class="text-lg font-bold mb-4 text-yellow-400">شرکت ناجی پاس</h3>
253
+ <p class="text-gray-300">معاونت خدمات خودرویی</p>
254
+ <p class="text-gray-300 mt-2">ارائه دهنده خدمات امداد جاده‌ای و حمل خودرو با جرثقیل‌های پالفینگر زرد رنگ در سراسر ایران</p>
255
+ </div>
256
+ <div>
257
+ <h3 class="text-lg font-bold mb-4 text-yellow-400">لینک‌های مفید</h3>
258
+ <ul class="space-y-2">
259
+ <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">قوانین و مقررات</a></li>
260
+ <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">سوالات متداول</a></li>
261
+ <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">تماس با ما</a></li>
262
+ <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">همکاری با ما</a></li>
263
+ </ul>
264
+ </div>
265
+ <div>
266
+ <h3 class="text-lg font-bold mb-4 text-yellow-400">تماس با ما</h3>
267
+ <ul class="space-y-2">
268
+ <li class="flex items-center text-gray-300">
269
+ <i class="fas fa-phone ml-2 text-yellow-400"></i>
270
+ ۰۲۱-۱۲۳۴۵۶۷۸
271
+ </li>
272
+ <li class="flex items-center text-gray-300">
273
+ <i class="fas fa-envelope ml-2 text-yellow-400"></i>
274
+ info@najipass.ir
275
+ </li>
276
+ <li class="flex items-center text-gray-300">
277
+ <i class="fas fa-map-marker-alt ml-2 text-yellow-400"></i>
278
+ تهران، خیابان آزادی، پلاک ۱۲۳
279
+ </li>
280
+ </ul>
281
+ </div>
282
+ <div>
283
+ <h3 class="text-lg font-bold mb-4 text-yellow-400">دانلود اپلیکیشن</h3>
284
+ <div class="flex flex-col space-y-3">
285
+ <button class="bg-black text-white px-4 py-2 rounded-lg flex items-center justify-center">
286
+ <i class="fab fa-google-play ml-2"></i>
287
+ دانلود از گوگل پلی
288
+ </button>
289
+ <button class="bg-black text-white px-4 py-2 rounded-lg flex items-center justify-center">
290
+ <i class="fab fa-apple ml-2"></i>
291
+ دانلود از اپ استور
292
+ </button>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
297
+ <p>© ۱۴۰۳ کلیه حقوق برای شرکت ناجی پاس محفوظ است.</p>
298
+ </div>
299
+ </div>
300
+ </footer>
301
+
302
+ <script>
303
+ // Simple JavaScript for demo purposes
304
+ document.addEventListener('DOMContentLoaded', function() {
305
+ // Floating button click handler
306
+ const floatingBtn = document.querySelector('.floating-button');
307
+ floatingBtn.addEventListener('click', function() {
308
+ alert('درخواست امداد جاده‌ای شما ثبت شد. نزدیک‌ترین امدادگر به محل شما اعزام خواهد شد.');
309
+ });
310
+
311
+ // Service buttons click handlers
312
+ const serviceButtons = document.querySelectorAll('.service-card button');
313
+ serviceButtons.forEach(button => {
314
+ button.addEventListener('click', function() {
315
+ const serviceName = this.closest('.service-card').querySelector('h3').textContent;
316
+ alert(`درخواست ${serviceName} شما ثبت شد. لطفا موقعیت خود را روی نقشه مشخص کنید.`);
317
+ });
318
+ });
319
+
320
+ // Header request button
321
+ const headerRequestBtn = document.querySelector('.bg-white');
322
+ headerRequestBtn.addEventListener('click', function() {
323
+ alert('برای درخواست امداد جاده‌ای، لطفا موقعیت خود را روی نقشه مشخص کنید.');
324
+ });
325
+ });
326
+ </script>
327
+ <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=dpr1360/q" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
328
+ </html>