Hugging Face's logo

Spaces:
samirerty
/
anycoder-142dea55
Running

App Files Community
samirerty commited on
Commit
a40b26b
·
verified ·
1 Parent(s): 14bd678

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +588 -453
index.html CHANGED
@@ -3,683 +3,818 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>صفحه کاربری مدرن</title>
 
 
 
 
 
 
 
7
  <style>
8
- /* --- Modern CSS Reset & Variables --- */
9
  :root {
10
- --primary-color: #2563eb; /* Modern Blue */
11
- --primary-hover: #1d4ed8;
12
- --text-dark: #1f2937;
13
- --text-gray: #6b7280;
14
- --bg-light: #f3f4f6;
 
15
  --card-bg: #ffffff;
16
- --border-radius: 12px;
17
- --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
18
- --font-family: 'Vazirmatn', 'Tahoma', sans-serif;
19
- --spacing-unit: 1rem;
 
 
 
20
  }
21
 
22
- /* Importing Vazirmatn Font for modern Persian styling */
23
- @import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');
24
-
25
  * {
26
  box-sizing: border-box;
27
  margin: 0;
28
  padding: 0;
 
29
  }
30
 
31
  body {
32
- font-family: var(--font-family);
33
- background-color: var(--bg-light);
34
- color: var(--text-dark);
35
- line-height: 1.8;
36
- padding-bottom: 50px;
37
  }
38
 
39
- a { text-decoration: none; color: inherit; }
40
- ul { list-style: none; }
41
- button { cursor: pointer; font-family: inherit; }
 
42
 
43
- /* --- Layout Containers --- */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  .container {
45
- max-width: 1000px;
46
  margin: 0 auto;
47
- padding: 20px;
 
 
 
48
  }
49
 
 
50
  .section-title {
51
- font-size: 1.5rem;
52
  font-weight: 800;
53
- margin-bottom: 24px;
54
- color: var(--text-dark);
55
- border-bottom: 2px solid var(--primary-color);
56
- display: inline-block;
57
- padding-bottom: 8px;
58
- border-radius: 8px;
59
  }
60
 
61
- /* --- Part 1: Popular Clips (Videos) --- */
62
- .videos-grid {
 
 
 
 
 
 
 
 
63
  display: grid;
64
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
65
- gap: 24px;
66
- margin-bottom: 48px;
67
  }
68
 
69
- .video-card {
70
  background: var(--card-bg);
71
  border-radius: var(--border-radius);
72
- box-shadow: var(--shadow);
73
  overflow: hidden;
74
- transition: transform 0.3s ease;
75
- display: flex;
76
- flex-direction: column;
 
77
  }
78
 
79
- .video-card:hover {
80
  transform: translateY(-5px);
 
81
  }
82
 
83
- .video-thumb-placeholder {
84
  width: 100%;
85
  height: 200px;
86
- background: linear-gradient(45deg, #a0a0a0, #e0e0e0);
87
  position: relative;
 
 
 
 
 
 
 
 
 
 
 
88
  display: flex;
89
  align-items: center;
90
- justify-content: center;
91
- color: #888;
92
- }
93
-
94
- .video-thumb-placeholder::after {
95
- content: '▶';
96
- font-size: 3rem;
97
- color: rgba(255,255,255,0.8);
98
- background: rgba(0,0,0,0.3);
99
- width: 60px;
100
- height: 60px;
101
- border-radius: 50%;
102
- display: flex;
103
- align-items: center;
104
- justify-content: center;
105
  }
106
 
107
- .video-content {
108
- padding: 20px;
109
- flex-grow: 1;
110
- display: flex;
111
- flex-direction: column;
112
  }
113
 
114
- .video-stats {
115
- display: flex;
116
- gap: 15px;
 
 
 
 
 
117
  font-size: 0.9rem;
118
- color: var(--text-gray);
119
- margin-bottom: 10px;
 
 
 
 
 
 
 
120
  }
121
 
122
  .stat-item {
123
  display: flex;
124
  align-items: center;
125
- gap: 5px;
 
 
 
 
126
  }
127
 
128
- .video-title {
129
- font-size: 1.25rem;
130
- font-weight: 700;
131
- margin-bottom: 8px;
132
- color: var(--text-dark);
133
  }
134
 
135
- .video-desc {
136
- font-size: 0.95rem;
137
- color: var(--text-gray);
138
- margin-bottom: 15px;
139
- flex-grow: 1;
140
  }
141
 
142
- .video-actions {
143
- display: flex;
144
- justify-content: space-between;
145
- border-top: 1px solid #eee;
146
- padding-top: 15px;
147
- font-size: 0.9rem;
148
- color: var(--text-gray);
149
  }
150
 
151
- /* --- Part 2: User Info & Comments --- */
152
- .user-section {
153
  background: var(--card-bg);
 
154
  border-radius: var(--border-radius);
155
- box-shadow: var(--shadow);
156
- padding: 30px;
157
- margin-bottom: 48px;
158
  display: flex;
159
  flex-direction: column;
160
  align-items: center;
161
  text-align: center;
162
- position: relative;
163
  }
164
 
165
- .user-avatar {
166
- width: 80px;
167
- height: 80px;
168
  border-radius: 50%;
169
- background: #e5e7eb;
170
- margin-bottom: 15px;
171
- display: flex;
172
- align-items: center;
173
- justify-content: center;
174
- font-size: 2rem;
175
- color: var(--primary-color);
176
- border: 3px solid var(--primary-color);
177
  }
178
 
179
  .user-name {
180
  font-size: 1.5rem;
181
  font-weight: 800;
182
- margin-bottom: 8px;
 
183
  }
184
 
185
- .user-quote {
186
- font-style: italic;
187
- color: var(--text-gray);
188
- background: var(--bg-light);
189
- padding: 15px;
190
- border-radius: 8px;
191
- width: 100%;
192
- margin-bottom: 25px;
193
- border-right: 4px solid var(--primary-color);
194
  }
195
 
196
- .comments-box {
197
- width: 100%;
198
- background: #f9fafb;
199
- padding: 20px;
 
 
 
 
 
 
200
  border-radius: var(--border-radius);
201
- border: 1px dashed #d1d5db;
 
202
  }
203
 
204
  .comments-header {
205
  font-weight: 700;
206
- margin-bottom: 15px;
207
- color: var(--primary-color);
 
 
208
  }
209
 
210
- .comment-item {
211
- background: white;
212
- padding: 10px 15px;
213
- border-radius: 8px;
214
- margin-bottom: 10px;
215
- font-size: 0.9rem;
216
- box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
217
  }
218
 
219
  /* --- Part 3: FAQ & Contact --- */
220
- .faq-section {
221
- margin-bottom: 48px;
 
 
222
  }
223
 
224
- .faq-list {
225
- display: flex;
226
- flex-direction: column;
227
- gap: 15px;
228
- margin-bottom: 30px;
229
  }
230
 
 
231
  .faq-item {
232
  background: var(--card-bg);
233
- padding: 20px;
234
- border-radius: var(--border-radius);
235
- box-shadow: var(--shadow);
236
- transition: all 0.3s ease;
237
- }
238
-
239
- .faq-item:hover {
240
- border: 1px solid var(--primary-color);
241
  }
242
 
243
  .faq-question {
 
 
 
 
 
 
244
  font-weight: 700;
245
- font-size: 1.1rem;
246
- margin-bottom: 8px;
247
- color: var(--text-dark);
 
 
 
 
 
 
 
 
 
 
 
248
  }
249
 
250
  .faq-answer {
251
- color: var(--text-gray);
 
 
 
 
252
  font-size: 0.95rem;
 
253
  }
254
 
 
 
 
 
 
 
255
  .contact-card {
256
- background: var(--primary-color);
257
  color: white;
258
- padding: 30px;
259
  border-radius: var(--border-radius);
260
- text-align: center;
261
- }
262
-
263
- .contact-info {
264
  display: flex;
265
- flex-wrap: wrap;
266
  justify-content: center;
267
- gap: 25px;
268
- margin-top: 20px;
269
  }
270
 
271
  .contact-item {
272
  display: flex;
273
  align-items: center;
274
- gap: 8px;
275
  font-size: 0.95rem;
 
276
  }
277
 
278
- .social-link {
279
- background: rgba(255,255,255,0.2);
280
- padding: 8px 16px;
281
- border-radius: 20px;
282
- font-weight: 600;
283
- transition: background 0.3s;
284
- }
285
- .social-link:hover { background: rgba(255,255,255,0.4); }
286
-
287
- /* --- Part 4: Profile (Ahuora Niazi) --- */
288
- .profile-section {
289
- background: #f8f9fa;
290
- border-radius: var(--border-radius);
291
- padding: 40px;
292
- margin-bottom: 48px;
293
- text-align: center;
294
  }
295
 
296
- .profile-header {
 
 
 
 
297
  display: flex;
298
- flex-direction: column;
299
  align-items: center;
300
- margin-bottom: 30px;
301
  }
302
 
303
- .profile-avatar {
304
- width: 120px;
305
- height: 120px;
306
- border-radius: 50%;
307
- background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
308
- color: white;
309
- font-size: 3rem;
310
  display: flex;
311
  align-items: center;
312
- justify-content: center;
313
- margin-bottom: 15px;
314
- box-shadow: 0 10px 15px -3px rgba(245, 87, 108, 0.4);
315
- }
316
-
317
- .profile-name {
318
- font-size: 2rem;
319
- font-weight: 900;
320
- margin-bottom: 5px;
321
- line-height: 1.4;
322
- }
323
-
324
- .profile-role {
325
- color: var(--primary-color);
326
- font-weight: 600;
327
- background: rgba(37, 99, 235, 0.1);
328
- padding: 4px 12px;
329
- border-radius: 20px;
330
- font-size: 0.9rem;
331
  }
332
 
333
- .stats-grid {
334
- display: grid;
335
- grid-template-columns: repeat(3, 1fr);
336
- gap: 20px;
337
- margin: 30px 0;
338
  }
339
 
340
- .stat-box {
341
- background: white;
342
- padding: 15px;
343
- border-radius: var(--border-radius);
344
- box-shadow: var(--shadow);
 
 
 
345
  }
346
 
347
- .stat-number {
348
- display: block;
349
- font-size: 1.5rem;
350
- font-weight: 800;
351
- color: var(--text-dark);
 
352
  }
353
 
354
- .stat-label {
355
- font-size: 0.85rem;
356
- color: var(--text-gray);
 
 
 
 
357
  }
358
 
359
- .profile-actions {
360
  display: flex;
 
 
 
361
  justify-content: center;
362
- gap: 15px;
363
- margin-bottom: 30px;
364
  }
365
 
366
- .btn {
367
- padding: 10px 24px;
368
- border-radius: 8px;
369
- font-weight: 700;
370
- transition: all 0.3s;
371
  }
372
 
373
- .btn-primary {
374
- background: var(--text-dark);
375
- color: white;
376
- border: 2px solid var(--text-dark);
377
  }
378
- .btn-primary:hover { background: white; color: var(--text-dark); }
379
 
380
- .btn-outline {
381
- background: transparent;
382
- color: var(--primary-color);
383
- border: 2px solid var(--primary-color);
384
  }
385
- .btn-outline:hover { background: var(--primary-color); color: white; }
386
 
 
387
  .tags-container {
388
  display: flex;
389
  flex-wrap: wrap;
390
  justify-content: center;
391
- gap: 10px;
 
392
  }
393
 
394
  .tag {
395
- background: white;
396
- color: var(--text-gray);
397
  padding: 8px 16px;
398
- border-radius: 20px;
399
  font-size: 0.9rem;
400
- border: 1px solid #e5e7eb;
401
- transition: all 0.3s;
 
402
  }
403
 
404
  .tag:hover {
405
- background: var(--primary-color);
406
  color: white;
407
- border-color: var(--primary-color);
408
  }
409
 
410
- /* --- Footer --- */
411
  footer {
412
  text-align: center;
413
- color: var(--text-gray);
414
- padding: 40px 0;
415
- border-top: 1px solid #e5e7eb;
416
  font-size: 0.9rem;
417
- }
418
-
419
- .footer-link {
420
- color: var(--primary-color);
421
- font-weight: 700;
422
  }
423
 
424
- /* Responsive Adjustments */
425
- @media (max-width: 768px) {
426
- .profile-name { font-size: 1.5rem; }
427
- .stats-grid { grid-template-columns: 1fr; }
428
- .videos-grid { grid-template-columns: 1fr; }
429
- }
430
  </style>
431
  </head>
432
  <body>
433
 
434
- <!-- Header Section with Requested Link -->
435
- <header style="background: white; padding: 15px; text-align: center; border-bottom: 1px solid #e5e7eb;">
436
- <h1 style="font-size: 1.5rem; color: var(--text-dark);">پنل مدیریت محتوا</h1>
437
- <div style="margin-top: 10px; font-size: 0.9rem;">
438
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="footer-link" style="text-decoration: underline; color: #6b7280;">
439
- Built with anycoder
440
- </a>
441
  </div>
 
 
 
442
  </header>
443
 
444
- <div class="container">
445
-
446
- <!-- Part 1: Popular Clips -->
447
- <section id="popular-clips">
448
- <div class="section-title">پربازدیدترین کلیپ‌ها</div>
449
-
450
- <div class="videos-grid">
451
- <!-- Video Card 1 -->
452
- <article class="video-card">
453
- <div class="video-thumb-placeholder">
454
- <!-- Placeholder for video thumbnail -->
455
  </div>
456
- <div class="video-content">
457
- <div class="video-stats">
458
- <span class="stat-item">👁️ ۳۶,۰۰۰ بازدید</span>
459
- <span class="stat-item">📅 ۲ روز پیش</span>
460
- </div>
461
- <h3 class="video-title">بستن اپ‌های گوشی خوبه؟</h3>
462
- <p class="video-desc">اپ‌های آفیون رو بندیم یا نبندیم؟ چرا باید فضای ذخیره‌سازی رو آزاد کنیم؟ تاثیر اپ‌ه��ی پس‌زمینه بر سرعت گوشی.</p>
463
-
464
- <div class="video-actions">
465
- <span>👍 <span id="likes-1">12,345</span></span>
466
- <span>💬 <span id="comments-1">109</span></span>
467
- <span>📌 ذخیره</span>
 
468
  </div>
469
  </div>
470
- </article>
471
 
472
- <!-- Video Card 2 -->
473
- <article class="video-card">
474
- <div class="video-thumb-placeholder">
475
- <!-- Placeholder for video thumbnail -->
 
476
  </div>
477
- <div class="video-content">
478
- <div class="video-stats">
479
- <span class="stat-item">👁️ ۱۲۵,۴۳۰ بازدید</span>
480
- <span class="stat-item">📅 ۱ هفته پیش</span>
481
- </div>
482
- <h3 class="video-title">بهترین ترفند برای اقتصاد خانه</h3>
483
- <p class="video-desc">چطور می‌توانیم با خریدهای هوشمند، هزینه‌های ماهانه خود را کاهش دهیم؟ نکات طلایی برای مدیریت بودجه شخصی.</p>
484
-
485
- <div class="video-actions">
486
- <span>👍 <span id="likes-2">45,200</span></span>
487
- <span>💬 <span id="comments-2">856</span></span>
488
- <span>📌 ذخیره</span>
 
489
  </div>
490
  </div>
491
- </article>
492
  </div>
493
  </section>
494
 
495
- <!-- Part 2: User Info & Comments -->
496
- <section id="user-info">
497
- <div class="user-section">
498
- <div class="user-avatar">AK</div>
499
- <h2 class="user-name">علی خرمدل</h2>
500
- <p style="color: var(--text-gray); margin-bottom: 15px;">@alikhalmdel</p>
501
-
502
- <div class="user-quote">
503
- "مطالب‌تان به شدت مفید است. من همیشه منتظر ویدیوها و پست‌های جدیدتون هستم تا با دوستانم به اشتراک بذارم. سبک تدریس شما واقعاً جذابه."
 
 
504
  </div>
505
 
506
- <div class="comments-box">
507
- <div class="comments-header">کامنت‌های شما (۳)</div>
508
- <div class="comment-item">
509
- <strong>علی:</strong> ممنون از تلاش‌های عالیتون. امیدوارم سلامتی داشته باشید.
 
510
  </div>
511
- <div class="comment-item">
512
- <strong>سارا:</strong> ویدیوی دیروز درباره فناوری خیلی کاربردی بود. یاد گرفتم!
 
 
 
513
  </div>
514
- <div class="comment-item">
515
- <strong>مهدی:</strong> اگر می‌تونید در مورد آینده اینترنت حرف بزنید، عالی میشه.
 
 
 
 
 
 
 
516
  </div>
517
  </div>
518
  </div>
519
  </section>
520
 
521
  <!-- Part 3: FAQ & Contact -->
522
- <section id="faq-contact" class="faq-section">
523
- <div class="section-title">سوالات متداول</div>
524
-
525
- <div class="faq-list">
526
- <div class="faq-item">
527
- <div class="faq-question">۱. چطور می‌توانم از فروشگاه خرید کنم؟</div>
528
- <div class="faq-answer">برای خرید، کافیست محصول مورد نظر را انتخاب کرده، در سبد خرید اضافه کنید و سپس به بخش پرداخت مراجعه کنید. پس از تایید آدرس، کد پیگیری برای شما ارسال می‌شود.</div>
529
- </div>
530
- <div class="faq-item">
531
- <div class="faq-question">۲. آیا می‌توانم با هاتون همکاری داشته باشم؟</div>
532
- <div class="faq-answer">بله، ما همیشه به دنبال همکاری با متخصصان و محتوا سازان باکیفیت هستیم. لطفاً فایل رزومه و نمونه کارهای خود را به ایمیل info@view.com ارسال کنید.</div>
533
- </div>
534
- <div class="faq-item">
535
- <div class="faq-question">۳. نمی‌توانم توی وبسایت ثبت نام کنم.</div>
536
- <div class="faq-answer">ممکن است به دلیل اتصال اینترنت یا آپدیت سیستم رخ داده باشد. ابتدا مرورگر خود را رفرش کنید. اگر مشکل ادامه داشت، لطفاً با پشتیبانی تماس بگیرید.</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
537
  </div>
538
- </div>
539
 
540
- <div class="contact-card">
541
- <h3 style="margin-bottom: 15px;">ارتباط با ما</h3>
542
- <p style="opacity: 0.9;">ما در اینستاگرام فعالیم و جواب سوالاتتون رو میدیم</p>
543
-
544
- <div class="contact-info">
545
- <a href="https://instagram.com" target="_blank" class="social-link" style="display: flex; align-items: center; gap: 8px;">
546
- <!-- Instagram Icon SVG -->
547
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
548
- <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
549
- <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
550
- <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
551
- </svg>
552
- ما را در اینستاگرام دنبال کنید
553
  </a>
554
 
555
  <div class="contact-item">
556
- <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
557
- <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
558
- <circle cx="12" cy="10" r="3"></circle>
559
- </svg>
560
  ایران، تهران، میدان آزادی، کوچه ۳۴ متر مربع، پلاک ۲۴
561
  </div>
562
 
563
  <div class="contact-item">
564
- <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
565
- <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
566
- </svg>
567
  ۰۶۱ ۴۳۲۱ ۸۷۵۶
568
  </div>
569
 
570
  <div class="contact-item">
571
- <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
572
- <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
573
- <polyline points="22,6 12,13 2,6"></polyline>
574
- </svg>
575
  info@view.com
576
  </div>
577
  </div>
578
  </div>
579
  </section>
580
 
581
- <!-- Part 4: Profile (Ahuora Niazi) -->
582
- <section id="profile" class="profile-section">
583
- <div class="profile-header">
584
- <div class="profile-avatar">AN</div>
585
- <h2 class="profile-name">اهـــورا نیــــازی</h2>
586
- <span class="profile-role">فعال حوزه فناوری (Technology) — روشن باشید و آگاه</span>
587
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
588
 
589
- <div class="stats-grid">
590
- <div class="stat-box">
591
- <span class="stat-number">۱.۸ میلیون</span>
592
- <span class="stat-label">دنبال‌شونده</span>
 
 
593
  </div>
594
- <div class="stat-box">
595
- <span class="stat-number">۱,۵۲۸</span>
596
- <span class="stat-label">پست‌ها</span>
597
- </div>
598
- <div class="stat-box">
599
- <span class="stat-number">۴۶۷</span>
600
- <span class="stat-label">دنبال‌کننده</span>
601
- </div>
602
- </div>
603
-
604
- <div class="profile-actions">
605
- <button class="btn btn-primary">
606
- <!-- Instagram Icon -->
607
- <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-left: 8px; vertical-align: middle;">
608
- <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
609
- <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
610
- <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
611
- </svg>
612
- اینستاگرام
613
- </button>
614
- <button class="btn btn-outline">
615
- <!-- Message Icon -->
616
- <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-left: 8px; vertical-align: middle;">
617
- <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
618
- </svg>
619
- ارسال پیام
620
- </button>
621
- </div>
622
-
623
- <h4 style="margin-bottom: 15px; text-align: center;">دسته‌بندی‌ها و علایق</h4>
624
- <div class="tags-container">
625
- <span class="tag">هوش مصنوعی</span>
626
- <span class="tag">معرفی محصول</span>
627
- <span class="tag">سفر</span>
628
- <span class="tag">درباره من</span>
629
- <span class="tag">تکنولوژی</span>
630
- <span class="tag">Seoul 2023</span>
631
- <span class="tag">برنامه‌نویسی</span>
632
- <span class="tag">طراحی</span>
633
- </div>
634
 
635
- <div style="margin-top: 30px; text-align: center;">
636
- <h4 style="margin-bottom: 15px;">هایلایت‌ها</h4>
637
- <div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
638
- <div style="width: 80px; height: 80px; background: #ddd; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #666;">AI</div>
639
- <div style="width: 80px; height: 80px; background: #ddd; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #666;">Tech</div>
640
- <div style="width: 80px; height: 80px; background: #ddd; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #666;">Travel</div>
 
641
  </div>
642
  </div>
643
  </section>
644
 
645
- </div>
646
 
647
  <footer>
648
- <p>&copy; ۱۴۰۳ تمامی حقوق این وبسایت محفوظ می‌باشد. طراحی و توسعه با تکنولوژی مدرن.</p>
649
  </footer>
650
 
651
  <script>
652
- // Simple script to handle interactions
653
- document.addEventListener('DOMContentLoaded', () => {
654
-
655
- // Example: Add click event to like buttons
656
- const likeButtons = document.querySelectorAll('.video-actions span:first-child');
657
-
658
- likeButtons.forEach((button, index) => {
659
- button.addEventListener('click', () => {
660
- // Find the span inside the button that contains the number
661
- const countSpan = button.querySelector('span');
662
- let currentCount = parseInt(countSpan.innerText.replace(/,/g, ''));
663
-
664
- // Increment logic
665
- currentCount++;
666
-
667
- // Format number with commas (Persian/Arabic numerals could be added here)
668
- // For simplicity, using standard comma separation
669
- countSpan.innerText = currentCount.toLocaleString('fa-IR');
670
-
671
- // Visual feedback
672
- button.style.color = '#2563eb';
673
- button.style.fontWeight = 'bold';
674
- setTimeout(() => {
675
- button.style.color = 'var(--text-gray)';
676
- button.style.fontWeight = 'normal';
677
- }, 300);
678
  });
679
- });
680
 
681
- console.log("صفحه با موفقیت بارگذاری شد.");
 
 
 
 
 
 
 
 
 
682
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
683
  </script>
684
  </body>
685
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>پلتفرم محتوایی مدرن</title>
7
+
8
+ <!-- Font Awesome for Icons -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+
11
+ <!-- Vazirmatn Font for Persian -->
12
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap" rel="stylesheet">
13
+
14
  <style>
 
15
  :root {
16
+ /* Modern Color Palette */
17
+ --primary-color: #1a1a1a;
18
+ --secondary-color: #2c2c2c;
19
+ --accent-color: #3b82f6; /* Soft Blue */
20
+ --accent-hover: #2563eb;
21
+ --bg-color: #f8fafc;
22
  --card-bg: #ffffff;
23
+ --text-main: #334155;
24
+ --text-light: #64748b;
25
+ --border-radius: 16px;
26
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
27
+ --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
28
+ --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
29
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
30
  }
31
 
 
 
 
32
  * {
33
  box-sizing: border-box;
34
  margin: 0;
35
  padding: 0;
36
+ outline: none;
37
  }
38
 
39
  body {
40
+ font-family: 'Vazirmatn', sans-serif;
41
+ background-color: var(--bg-color);
42
+ color: var(--text-main);
43
+ line-height: 1.6;
44
+ overflow-x: hidden;
45
  }
46
 
47
+ a {
48
+ text-decoration: none;
49
+ color: inherit;
50
+ }
51
 
52
+ ul {
53
+ list-style: none;
54
+ }
55
+
56
+ /* --- Header --- */
57
+ header {
58
+ background-color: rgba(255, 255, 255, 0.9);
59
+ backdrop-filter: blur(10px);
60
+ position: sticky;
61
+ top: 0;
62
+ z-index: 100;
63
+ padding: 1rem 5%;
64
+ display: flex;
65
+ justify-content: space-between;
66
+ align-items: center;
67
+ box-shadow: var(--shadow-sm);
68
+ }
69
+
70
+ .logo {
71
+ font-size: 1.5rem;
72
+ font-weight: 900;
73
+ color: var(--primary-color);
74
+ display: flex;
75
+ align-items: center;
76
+ gap: 10px;
77
+ }
78
+
79
+ .logo i {
80
+ color: var(--accent-color);
81
+ }
82
+
83
+ .built-with {
84
+ font-size: 0.85rem;
85
+ color: var(--text-light);
86
+ background: #f1f5f9;
87
+ padding: 6px 12px;
88
+ border-radius: 20px;
89
+ font-weight: 500;
90
+ transition: var(--transition);
91
+ }
92
+
93
+ .built-with:hover {
94
+ background: #e2e8f0;
95
+ color: var(--accent-color);
96
+ }
97
+
98
+ /* --- Layout Container --- */
99
  .container {
100
+ max-width: 1200px;
101
  margin: 0 auto;
102
+ padding: 2rem 1rem;
103
+ display: flex;
104
+ flex-direction: column;
105
+ gap: 3rem;
106
  }
107
 
108
+ /* --- Section Titles --- */
109
  .section-title {
110
+ font-size: 1.8rem;
111
  font-weight: 800;
112
+ color: var(--primary-color);
113
+ margin-bottom: 1.5rem;
114
+ display: flex;
115
+ align-items: center;
116
+ gap: 10px;
 
117
  }
118
 
119
+ .section-title::before {
120
+ content: '';
121
+ width: 6px;
122
+ height: 24px;
123
+ background: var(--accent-color);
124
+ border-radius: 3px;
125
+ }
126
+
127
+ /* --- Part 1: Most Viewed Clips --- */
128
+ .clips-grid {
129
  display: grid;
130
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
131
+ gap: 2rem;
 
132
  }
133
 
134
+ .clip-card {
135
  background: var(--card-bg);
136
  border-radius: var(--border-radius);
 
137
  overflow: hidden;
138
+ box-shadow: var(--shadow-md);
139
+ transition: var(--transition);
140
+ position: relative;
141
+ group: hover;
142
  }
143
 
144
+ .clip-card:hover {
145
  transform: translateY(-5px);
146
+ box-shadow: var(--shadow-lg);
147
  }
148
 
149
+ .clip-thumbnail {
150
  width: 100%;
151
  height: 200px;
152
+ object-fit: cover;
153
  position: relative;
154
+ }
155
+
156
+ .view-badge {
157
+ position: absolute;
158
+ top: 10px;
159
+ right: 10px;
160
+ background: rgba(0,0,0,0.6);
161
+ color: white;
162
+ padding: 4px 10px;
163
+ border-radius: 8px;
164
+ font-size: 0.75rem;
165
  display: flex;
166
  align-items: center;
167
+ gap: 5px;
168
+ backdrop-filter: blur(4px);
 
 
 
 
 
 
 
 
 
 
 
 
 
169
  }
170
 
171
+ .clip-content {
172
+ padding: 1.5rem;
 
 
 
173
  }
174
 
175
+ .clip-title {
176
+ font-size: 1.1rem;
177
+ font-weight: 700;
178
+ margin-bottom: 0.5rem;
179
+ color: var(--primary-color);
180
+ }
181
+
182
+ .clip-desc {
183
  font-size: 0.9rem;
184
+ color: var(--text-light);
185
+ margin-bottom: 1.5rem;
186
+ }
187
+
188
+ .clip-stats {
189
+ display: flex;
190
+ justify-content: space-between;
191
+ padding-top: 1rem;
192
+ border-top: 1px solid #f1f5f9;
193
  }
194
 
195
  .stat-item {
196
  display: flex;
197
  align-items: center;
198
+ gap: 6px;
199
+ color: var(--text-light);
200
+ font-size: 0.9rem;
201
+ cursor: pointer;
202
+ transition: var(--transition);
203
  }
204
 
205
+ .stat-item:hover {
206
+ color: var(--accent-color);
 
 
 
207
  }
208
 
209
+ /* --- Part 2 & 4: User Profiles & Intro --- */
210
+ .profile-grid {
211
+ display: grid;
212
+ grid-template-columns: 1fr 1fr;
213
+ gap: 2rem;
214
  }
215
 
216
+ @media (max-width: 768px) {
217
+ .profile-grid {
218
+ grid-template-columns: 1fr;
219
+ }
 
 
 
220
  }
221
 
222
+ .info-card {
 
223
  background: var(--card-bg);
224
+ padding: 2rem;
225
  border-radius: var(--border-radius);
226
+ box-shadow: var(--shadow-md);
 
 
227
  display: flex;
228
  flex-direction: column;
229
  align-items: center;
230
  text-align: center;
 
231
  }
232
 
233
+ .avatar-lg {
234
+ width: 100px;
235
+ height: 100px;
236
  border-radius: 50%;
237
+ object-fit: cover;
238
+ margin-bottom: 1rem;
239
+ border: 4px solid #eff6ff;
 
 
 
 
 
240
  }
241
 
242
  .user-name {
243
  font-size: 1.5rem;
244
  font-weight: 800;
245
+ color: var(--primary-color);
246
+ margin-bottom: 0.5rem;
247
  }
248
 
249
+ .user-role {
250
+ color: var(--accent-color);
251
+ font-weight: 500;
252
+ margin-bottom: 1rem;
253
+ background: #eff6ff;
254
+ padding: 4px 12px;
255
+ border-radius: 20px;
256
+ font-size: 0.9rem;
 
257
  }
258
 
259
+ .user-bio {
260
+ color: var(--text-main);
261
+ font-size: 0.95rem;
262
+ margin-bottom: 2rem;
263
+ line-height: 1.8;
264
+ }
265
+
266
+ /* Comments Section */
267
+ .comments-section {
268
+ background: #f8fafc;
269
  border-radius: var(--border-radius);
270
+ padding: 1.5rem;
271
+ width: 100%;
272
  }
273
 
274
  .comments-header {
275
  font-weight: 700;
276
+ margin-bottom: 1rem;
277
+ display: flex;
278
+ justify-content: space-between;
279
+ align-items: center;
280
  }
281
 
282
+ .comment-form textarea {
283
+ width: 100%;
284
+ padding: 1rem;
285
+ border: 1px solid #e2e8f0;
286
+ border-radius: 12px;
287
+ resize: vertical;
288
+ min-height: 80px;
289
+ font-family: inherit;
290
+ margin-bottom: 1rem;
291
+ transition: var(--transition);
292
+ }
293
+
294
+ .comment-form textarea:focus {
295
+ border-color: var(--accent-color);
296
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
297
+ }
298
+
299
+ .btn-primary {
300
+ background: var(--primary-color);
301
+ color: white;
302
+ border: none;
303
+ padding: 0.8rem 2rem;
304
+ border-radius: 12px;
305
+ font-family: inherit;
306
+ font-weight: 700;
307
+ cursor: pointer;
308
+ transition: var(--transition);
309
+ display: inline-flex;
310
+ align-items: center;
311
+ gap: 8px;
312
+ }
313
+
314
+ .btn-primary:hover {
315
+ background: var(--secondary-color);
316
+ transform: scale(1.02);
317
  }
318
 
319
  /* --- Part 3: FAQ & Contact --- */
320
+ .faq-grid {
321
+ display: grid;
322
+ grid-template-columns: 1fr 1fr;
323
+ gap: 2rem;
324
  }
325
 
326
+ @media (max-width: 768px) {
327
+ .faq-grid {
328
+ grid-template-columns: 1fr;
329
+ }
 
330
  }
331
 
332
+ /* FAQ Accordion */
333
  .faq-item {
334
  background: var(--card-bg);
335
+ border-radius: 12px;
336
+ margin-bottom: 1rem;
337
+ box-shadow: var(--shadow-sm);
338
+ overflow: hidden;
 
 
 
 
339
  }
340
 
341
  .faq-question {
342
+ width: 100%;
343
+ text-align: right;
344
+ padding: 1.2rem;
345
+ background: none;
346
+ border: none;
347
+ font-family: inherit;
348
  font-weight: 700;
349
+ font-size: 1rem;
350
+ color: var(--primary-color);
351
+ cursor: pointer;
352
+ display: flex;
353
+ justify-content: space-between;
354
+ align-items: center;
355
+ }
356
+
357
+ .faq-question i {
358
+ transition: transform 0.3s ease;
359
+ }
360
+
361
+ .faq-item.active .faq-question i {
362
+ transform: rotate(180deg);
363
  }
364
 
365
  .faq-answer {
366
+ max-height: 0;
367
+ overflow: hidden;
368
+ transition: max-height 0.3s ease-out;
369
+ padding: 0 1.2rem;
370
+ color: var(--text-light);
371
  font-size: 0.95rem;
372
+ background: #f8fafc;
373
  }
374
 
375
+ .faq-item.active .faq-answer {
376
+ padding: 1.2rem;
377
+ border-top: 1px solid #f1f5f9;
378
+ }
379
+
380
+ /* Contact Info */
381
  .contact-card {
382
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
383
  color: white;
384
+ padding: 2rem;
385
  border-radius: var(--border-radius);
 
 
 
 
386
  display: flex;
387
+ flex-direction: column;
388
  justify-content: center;
389
+ gap: 1.5rem;
390
+ height: 100%;
391
  }
392
 
393
  .contact-item {
394
  display: flex;
395
  align-items: center;
396
+ gap: 15px;
397
  font-size: 0.95rem;
398
+ transition: transform 0.2s;
399
  }
400
 
401
+ .contact-item:hover {
402
+ transform: translateX(-5px);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
403
  }
404
 
405
+ .contact-item i {
406
+ width: 30px;
407
+ height: 30px;
408
+ background: rgba(255,255,255,0.1);
409
+ border-radius: 50%;
410
  display: flex;
411
+ justify-content: center;
412
  align-items: center;
413
+ color: var(--accent-color);
414
  }
415
 
416
+ .social-link {
 
 
 
 
 
 
417
  display: flex;
418
  align-items: center;
419
+ gap: 10px;
420
+ color: white;
421
+ font-weight: 700;
422
+ margin-top: 1rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
423
  }
424
 
425
+ .social-link:hover {
426
+ color: var(--accent-color);
 
 
 
427
  }
428
 
429
+ /* --- Part 4: Ahuora Niazi Profile (Distinct Style) --- */
430
+ .ahaora-section {
431
+ background: var(--card-bg);
432
+ border-radius: 24px;
433
+ padding: 3rem 2rem;
434
+ box-shadow: var(--shadow-lg);
435
+ position: relative;
436
+ overflow: hidden;
437
  }
438
 
439
+ .ahaora-header {
440
+ display: flex;
441
+ flex-direction: column;
442
+ align-items: center;
443
+ text-align: center;
444
+ margin-bottom: 2.5rem;
445
  }
446
 
447
+ .ahaora-image {
448
+ width: 120px;
449
+ height: 120px;
450
+ border-radius: 50%;
451
+ margin-bottom: 1rem;
452
+ border: 4px solid var(--accent-color);
453
+ box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
454
  }
455
 
456
+ .ahaora-stats {
457
  display: flex;
458
+ gap: 2rem;
459
+ margin: 1.5rem 0;
460
+ flex-wrap: wrap;
461
  justify-content: center;
 
 
462
  }
463
 
464
+ .stat-box {
465
+ display: flex;
466
+ flex-direction: column;
467
+ align-items: center;
 
468
  }
469
 
470
+ .stat-number {
471
+ font-size: 1.25rem;
472
+ font-weight: 900;
473
+ color: var(--primary-color);
474
  }
 
475
 
476
+ .stat-label {
477
+ font-size: 0.8rem;
478
+ color: var(--text-light);
 
479
  }
 
480
 
481
+ /* Chips / Categories */
482
  .tags-container {
483
  display: flex;
484
  flex-wrap: wrap;
485
  justify-content: center;
486
+ gap: 0.8rem;
487
+ margin-bottom: 2.5rem;
488
  }
489
 
490
  .tag {
491
+ background: #f1f5f9;
492
+ color: var(--text-main);
493
  padding: 8px 16px;
494
+ border-radius: 50px;
495
  font-size: 0.9rem;
496
+ font-weight: 500;
497
+ transition: var(--transition);
498
+ cursor: default;
499
  }
500
 
501
  .tag:hover {
502
+ background: var(--accent-color);
503
  color: white;
504
+ transform: translateY(-2px);
505
  }
506
 
507
+ /* Footer */
508
  footer {
509
  text-align: center;
510
+ padding: 2rem;
511
+ color: var(--text-light);
 
512
  font-size: 0.9rem;
513
+ border-top: 1px solid #e2e8f0;
514
+ margin-top: 2rem;
 
 
 
515
  }
516
 
 
 
 
 
 
 
517
  </style>
518
  </head>
519
  <body>
520
 
521
+ <!-- Header -->
522
+ <header>
523
+ <div class="logo">
524
+ <i class="fa-solid fa-play-circle"></i>
525
+ <span>ویوپلاس</span>
 
 
526
  </div>
527
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
528
+ Built with anycoder
529
+ </a>
530
  </header>
531
 
532
+ <main class="container">
533
+
534
+ <!-- Part 1: Most Viewed Clips -->
535
+ <section id="clips">
536
+ <h2 class="section-title">پربازدیدترین کلیپ‌ها</h2>
537
+ <div class="clips-grid">
538
+ <!-- Card 1 -->
539
+ <div class="clip-card">
540
+ <div class="clip-thumbnail">
541
+ <img src="https://picsum.photos/seed/clip1/400/250" alt="Clip Thumbnail" style="width:100%; height:100%; object-fit:cover;">
542
+ <div class="view-badge"><i class="fa-regular fa-eye"></i> ۳۶,۰۰۰</div>
543
  </div>
544
+ <div class="clip-content">
545
+ <h3 class="clip-title">بستن اپ‌های گوشی خوبه؟</h3>
546
+ <p class="clip-desc">اپ‌های آفیون رو بندیم یا نبندیم؟ چرا؟</p>
547
+ <div class="clip-stats">
548
+ <div class="stat-item" onclick="toggleLike(this)">
549
+ <i class="fa-regular fa-heart"></i> <span class="like-count">۱۲,۳۴۵</span>
550
+ </div>
551
+ <div class="stat-item">
552
+ <i class="fa-regular fa-comment"></i> <span>۱۰۹</span>
553
+ </div>
554
+ <div class="stat-item">
555
+ <i class="fa-solid fa-share-nodes"></i>
556
+ </div>
557
  </div>
558
  </div>
559
+ </div>
560
 
561
+ <!-- Card 2 -->
562
+ <div class="clip-card">
563
+ <div class="clip-thumbnail">
564
+ <img src="https://picsum.photos/seed/clip2/400/250" alt="Clip Thumbnail" style="width:100%; height:100%; object-fit:cover;">
565
+ <div class="view-badge"><i class="fa-regular fa-eye"></i> ۱۲,۵۰۰</div>
566
  </div>
567
+ <div class="clip-content">
568
+ <h3 class="clip-title">مزایای هوش مصنوعی</h3>
569
+ <p class="clip-desc">چطور هوش مصنوعی می‌تونه زندگی ما رو عوض کنه؟</p>
570
+ <div class="clip-stats">
571
+ <div class="stat-item" onclick="toggleLike(this)">
572
+ <i class="fa-regular fa-heart"></i> <span class="like-count">۸,۲۱۰</span>
573
+ </div>
574
+ <div class="stat-item">
575
+ <i class="fa-regular fa-comment"></i> <span>۴۵</span>
576
+ </div>
577
+ <div class="stat-item">
578
+ <i class="fa-solid fa-share-nodes"></i>
579
+ </div>
580
  </div>
581
  </div>
582
+ </div>
583
  </div>
584
  </section>
585
 
586
+ <!-- Part 2: Intro & Comments -->
587
+ <section id="intro-comments">
588
+ <div class="profile-grid">
589
+ <!-- Ali Khormandel -->
590
+ <div class="info-card">
591
+ <img src="https://picsum.photos/seed/ali/200/200" alt="Ali Khormandel" class="avatar-lg">
592
+ <h3 class="user-name">علی خرمدل</h3>
593
+ <p class="user-role">مدیر محتوا</p>
594
+ <p class="user-bio">
595
+ م��الب‌تان به شدت مفید است. من همیشه منتظر ویدیوها و پست‌های جدیدتون هستم تا با دوستانم به اشتراک بذارم.
596
+ </p>
597
  </div>
598
 
599
+ <!-- Comments Section -->
600
+ <div class="comments-section">
601
+ <div class="comments-header">
602
+ <span>کامنت‌های شما</span>
603
+ <i class="fa-regular fa-comments" style="font-size: 1.2rem; color: var(--accent-color);"></i>
604
  </div>
605
+ <div class="comment-form">
606
+ <textarea placeholder="نظر خود را بنویسید..."></textarea>
607
+ <button class="btn-primary" onclick="submitComment()">
608
+ ارسال پیام <i class="fa-solid fa-paper-plane"></i>
609
+ </button>
610
  </div>
611
+ <!-- Simulated Comment List -->
612
+ <div style="margin-top: 1.5rem; border-top: 1px solid #e2e8f0; padding-top: 1rem;">
613
+ <div style="display: flex; gap: 10px; margin-bottom: 10px;">
614
+ <img src="https://picsum.photos/seed/user1/40/40" style="border-radius: 50%;">
615
+ <div>
616
+ <p style="font-weight: 700; font-size: 0.9rem;">کاربر مهمان</p>
617
+ <p style="font-size: 0.85rem; color: var(--text-light);">عالی بود! خیلی به من کمک کرد.</p>
618
+ </div>
619
+ </div>
620
  </div>
621
  </div>
622
  </div>
623
  </section>
624
 
625
  <!-- Part 3: FAQ & Contact -->
626
+ <section id="faq-contact">
627
+ <div class="faq-grid">
628
+ <!-- FAQ List -->
629
+ <div class="faq-container">
630
+ <h2 class="section-title">سوالات متداول</h2>
631
+
632
+ <div class="faq-item">
633
+ <button class="faq-question">
634
+ چطور می‌توانم از فروشگاه خرید کنم؟
635
+ <i class="fa-solid fa-chevron-down"></i>
636
+ </button>
637
+ <div class="faq-answer">
638
+ برای خرید، روی دکمه‌های "خرید" در محصولات کلیک کنید و مراحل را در سبد خرید دنبال کنید.
639
+ </div>
640
+ </div>
641
+
642
+ <div class="faq-item">
643
+ <button class="faq-question">
644
+ آیا می‌توانم با هاتون همکاری داشته باشم؟
645
+ <i class="fa-solid fa-chevron-down"></i>
646
+ </button>
647
+ <div class="faq-answer">
648
+ بله، لطفا ایمیل info@view.com را ارسال کنید و پروژه خود را توضیح دهید.
649
+ </div>
650
+ </div>
651
+
652
+ <div class="faq-item">
653
+ <button class="faq-question">
654
+ نمی‌توانم توی وبسایت ثبت نام کنم.
655
+ <i class="fa-solid fa-chevron-down"></i>
656
+ </button>
657
+ <div class="faq-answer">
658
+ اگر مشکل ایجاد شده است، لطفاً صفحه را رفرش کنید یا از مرورگر دیگری استفاده کنید.
659
+ </div>
660
+ </div>
661
  </div>
 
662
 
663
+ <!-- Contact Info -->
664
+ <div class="contact-card">
665
+ <h3 style="margin-bottom: 1rem; color: white;">تماس با ما</h3>
666
+
667
+ <a href="#" class="social-link">
668
+ <i class="fa-brands fa-instagram"></i> ما را در اینستاگرام دنبال کنید
 
 
 
 
 
 
 
669
  </a>
670
 
671
  <div class="contact-item">
672
+ <i class="fa-solid fa-location-dot"></i>
 
 
 
673
  ایران، تهران، میدان آزادی، کوچه ۳۴ متر مربع، پلاک ۲۴
674
  </div>
675
 
676
  <div class="contact-item">
677
+ <i class="fa-solid fa-phone"></i>
 
 
678
  ۰۶۱ ۴۳۲۱ ۸۷۵۶
679
  </div>
680
 
681
  <div class="contact-item">
682
+ <i class="fa-solid fa-envelope"></i>
 
 
 
683
  info@view.com
684
  </div>
685
  </div>
686
  </div>
687
  </section>
688
 
689
+ <!-- Part 4: Ahuora Niazi Profile -->
690
+ <section id="ahuora-profile">
691
+ <h2 class="section-title">پروفایل اهـــورا نیــــازی</h2>
692
+
693
+ <div class="ahaora-section">
694
+ <div class="ahaora-header">
695
+ <img src="https://picsum.photos/seed/ahuora/300/300" alt="Ahuora Niazi" class="ahaora-image">
696
+ <h3 class="user-name">اهـــورا نیــــازی</h3>
697
+ <span class="user-role" style="background: #e0e7ff; color: #4338ca;">فعال حوزه فناوری — روشن باشید و آگاه</span>
698
+
699
+ <div class="ahaora-stats">
700
+ <div class="stat-box">
701
+ <span class="stat-number">۱.۸م</span>
702
+ <span class="stat-label">دنبال‌شونده</span>
703
+ </div>
704
+ <div class="stat-box">
705
+ <span class="stat-number">۱,۵۲۸</span>
706
+ <span class="stat-label">پست‌ها</span>
707
+ </div>
708
+ <div class="stat-box">
709
+ <span class="stat-number">۴۶۷</span>
710
+ <span class="stat-label">دنبال‌کننده</span>
711
+ </div>
712
+ </div>
713
 
714
+ <button class="btn-primary" onclick="alert('پیام برای Ahuora ارسال شد!')">
715
+ <i class="fa-brands fa-instagram"></i> اینستاگرام
716
+ </button>
717
+ <button class="btn-primary" style="background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); margin-top: 10px;" onclick="alert('پیام برای Ahuora ارسال شد!')">
718
+ <i class="fa-regular fa-paper-plane"></i> ارسال پیام
719
+ </button>
720
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
721
 
722
+ <div class="tags-container">
723
+ <span class="tag">هوش مصنوعی</span>
724
+ <span class="tag">معرفی محصول</span>
725
+ <span class="tag">سفر</span>
726
+ <span class="tag">درباره من</span>
727
+ <span class="tag">تکنولوژی</span>
728
+ <span class="tag">Seoul 2023</span>
729
  </div>
730
  </div>
731
  </section>
732
 
733
+ </main>
734
 
735
  <footer>
736
+ <p>تمامی حقوق این وبسایت محفوظ می‌باشد &copy; ۲۰۲۳</p>
737
  </footer>
738
 
739
  <script>
740
+ // FAQ Accordion Logic
741
+ const faqItems = document.querySelectorAll('.faq-item');
742
+
743
+ faqItems.forEach(item => {
744
+ const question = item.querySelector('.faq-question');
745
+ const answer = item.querySelector('.faq-answer');
746
+
747
+ question.addEventListener('click', () => {
748
+ // Close other items (optional, for accordion effect)
749
+ faqItems.forEach(otherItem => {
750
+ if (otherItem !== item) {
751
+ otherItem.classList.remove('active');
752
+ otherItem.querySelector('.faq-answer').style.maxHeight = null;
753
+ }
 
 
 
 
 
 
 
 
 
 
 
 
754
  });
 
755
 
756
+ // Toggle current item
757
+ item.classList.toggle('active');
758
+
759
+ // Set max-height for animation
760
+ if (item.classList.contains('active')) {
761
+ answer.style.maxHeight = answer.scrollHeight + "px";
762
+ } else {
763
+ answer.style.maxHeight = null;
764
+ }
765
+ });
766
  });
767
+
768
+ // Like Interaction Logic
769
+ function toggleLike(element) {
770
+ const icon = element.querySelector('i');
771
+ const countSpan = element.querySelector('.like-count');
772
+ let count = parseInt(countSpan.innerText.replace(/,/g, ''));
773
+
774
+ if (icon.classList.contains('fa-regular')) {
775
+ // Like
776
+ icon.classList.remove('fa-regular');
777
+ icon.classList.add('fa-solid');
778
+ icon.style.color = '#ef4444'; // Red color
779
+ count++;
780
+ } else {
781
+ // Unlike
782
+ icon.classList.remove('fa-solid');
783
+ icon.classList.add('fa-regular');
784
+ icon.style.color = 'inherit';
785
+ count--;
786
+ }
787
+
788
+ // Update number with Persian digits formatting simulation
789
+ countSpan.innerText = count.toLocaleString('fa-IR');
790
+ }
791
+
792
+ // Comment Submission Logic
793
+ function submitComment() {
794
+ const textarea = document.querySelector('.comment-form textarea');
795
+ const content = textarea.value.trim();
796
+
797
+ if (content) {
798
+ // Visual feedback
799
+ const btn = document.querySelector('.comment-form button');
800
+ const originalText = btn.innerHTML;
801
+
802
+ btn.innerHTML = '<i class="fa-solid fa-check"></i> ارسال شد!';
803
+ btn.style.background = '#22c55e'; // Green
804
+
805
+ setTimeout(() => {
806
+ btn.innerHTML = originalText;
807
+ btn.style.background = '';
808
+ textarea.value = '';
809
+ }, 2000);
810
+ } else {
811
+ // Shake animation or simple alert replacement
812
+ textarea.style.borderColor = '#ef4444';
813
+ setTimeout(() => {
814
+ textarea.style.borderColor = '#e2e8f0';
815
+ }, 1000);
816
+ }
817
+ }
818
  </script>
819
  </body>
820
  </html>