Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>پلتفرم محتوایی مدرن</title> | |
| <!-- Font Awesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Vazirmatn Font for Persian --> | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| /* Modern Color Palette */ | |
| --primary-color: #1a1a1a; | |
| --secondary-color: #2c2c2c; | |
| --accent-color: #3b82f6; /* Soft Blue */ | |
| --accent-hover: #2563eb; | |
| --bg-color: #f8fafc; | |
| --card-bg: #ffffff; | |
| --text-main: #334155; | |
| --text-light: #64748b; | |
| --border-radius: 16px; | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); | |
| --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); | |
| --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| outline: none; | |
| } | |
| body { | |
| font-family: 'Vazirmatn', sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| /* --- Header --- */ | |
| header { | |
| background-color: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(10px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| padding: 1rem 5%; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 900; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { | |
| color: var(--accent-color); | |
| } | |
| .built-with { | |
| font-size: 0.85rem; | |
| color: var(--text-light); | |
| background: #f1f5f9; | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .built-with:hover { | |
| background: #e2e8f0; | |
| color: var(--accent-color); | |
| } | |
| /* --- Layout Container --- */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3rem; | |
| } | |
| /* --- Section Titles --- */ | |
| .section-title { | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| color: var(--primary-color); | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .section-title::before { | |
| content: ''; | |
| width: 6px; | |
| height: 24px; | |
| background: var(--accent-color); | |
| border-radius: 3px; | |
| } | |
| /* --- Part 1: Most Viewed Clips --- */ | |
| .clips-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .clip-card { | |
| background: var(--card-bg); | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-md); | |
| transition: var(--transition); | |
| position: relative; | |
| group: hover; | |
| } | |
| .clip-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .clip-thumbnail { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| position: relative; | |
| } | |
| .view-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: rgba(0,0,0,0.6); | |
| color: white; | |
| padding: 4px 10px; | |
| border-radius: 8px; | |
| font-size: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| backdrop-filter: blur(4px); | |
| } | |
| .clip-content { | |
| padding: 1.5rem; | |
| } | |
| .clip-title { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| color: var(--primary-color); | |
| } | |
| .clip-desc { | |
| font-size: 0.9rem; | |
| color: var(--text-light); | |
| margin-bottom: 1.5rem; | |
| } | |
| .clip-stats { | |
| display: flex; | |
| justify-content: space-between; | |
| padding-top: 1rem; | |
| border-top: 1px solid #f1f5f9; | |
| } | |
| .stat-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: var(--text-light); | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .stat-item:hover { | |
| color: var(--accent-color); | |
| } | |
| /* --- Part 2 & 4: User Profiles & Intro --- */ | |
| .profile-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| } | |
| @media (max-width: 768px) { | |
| .profile-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .info-card { | |
| background: var(--card-bg); | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow-md); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .avatar-lg { | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| margin-bottom: 1rem; | |
| border: 4px solid #eff6ff; | |
| } | |
| .user-name { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| .user-role { | |
| color: var(--accent-color); | |
| font-weight: 500; | |
| margin-bottom: 1rem; | |
| background: #eff6ff; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| } | |
| .user-bio { | |
| color: var(--text-main); | |
| font-size: 0.95rem; | |
| margin-bottom: 2rem; | |
| line-height: 1.8; | |
| } | |
| /* Comments Section */ | |
| .comments-section { | |
| background: #f8fafc; | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| width: 100%; | |
| } | |
| .comments-header { | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .comment-form textarea { | |
| width: 100%; | |
| padding: 1rem; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 12px; | |
| resize: vertical; | |
| min-height: 80px; | |
| font-family: inherit; | |
| margin-bottom: 1rem; | |
| transition: var(--transition); | |
| } | |
| .comment-form textarea:focus { | |
| border-color: var(--accent-color); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .btn-primary { | |
| background: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 0.8rem 2rem; | |
| border-radius: 12px; | |
| font-family: inherit; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary:hover { | |
| background: var(--secondary-color); | |
| transform: scale(1.02); | |
| } | |
| /* --- Part 3: FAQ & Contact --- */ | |
| .faq-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| } | |
| @media (max-width: 768px) { | |
| .faq-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* FAQ Accordion */ | |
| .faq-item { | |
| background: var(--card-bg); | |
| border-radius: 12px; | |
| margin-bottom: 1rem; | |
| box-shadow: var(--shadow-sm); | |
| overflow: hidden; | |
| } | |
| .faq-question { | |
| width: 100%; | |
| text-align: right; | |
| padding: 1.2rem; | |
| background: none; | |
| border: none; | |
| font-family: inherit; | |
| font-weight: 700; | |
| font-size: 1rem; | |
| color: var(--primary-color); | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .faq-question i { | |
| transition: transform 0.3s ease; | |
| } | |
| .faq-item.active .faq-question i { | |
| transform: rotate(180deg); | |
| } | |
| .faq-answer { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| padding: 0 1.2rem; | |
| color: var(--text-light); | |
| font-size: 0.95rem; | |
| background: #f8fafc; | |
| } | |
| .faq-item.active .faq-answer { | |
| padding: 1.2rem; | |
| border-top: 1px solid #f1f5f9; | |
| } | |
| /* Contact Info */ | |
| .contact-card { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| color: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| height: 100%; | |
| } | |
| .contact-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| font-size: 0.95rem; | |
| transition: transform 0.2s; | |
| } | |
| .contact-item:hover { | |
| transform: translateX(-5px); | |
| } | |
| .contact-item i { | |
| width: 30px; | |
| height: 30px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: var(--accent-color); | |
| } | |
| .social-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: white; | |
| font-weight: 700; | |
| margin-top: 1rem; | |
| } | |
| .social-link:hover { | |
| color: var(--accent-color); | |
| } | |
| /* --- Part 4: Ahuora Niazi Profile (Distinct Style) --- */ | |
| .ahaora-section { | |
| background: var(--card-bg); | |
| border-radius: 24px; | |
| padding: 3rem 2rem; | |
| box-shadow: var(--shadow-lg); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ahaora-header { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| margin-bottom: 2.5rem; | |
| } | |
| .ahaora-image { | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| margin-bottom: 1rem; | |
| border: 4px solid var(--accent-color); | |
| box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); | |
| } | |
| .ahaora-stats { | |
| display: flex; | |
| gap: 2rem; | |
| margin: 1.5rem 0; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .stat-box { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .stat-number { | |
| font-size: 1.25rem; | |
| font-weight: 900; | |
| color: var(--primary-color); | |
| } | |
| .stat-label { | |
| font-size: 0.8rem; | |
| color: var(--text-light); | |
| } | |
| /* Chips / Categories */ | |
| .tags-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 0.8rem; | |
| margin-bottom: 2.5rem; | |
| } | |
| .tag { | |
| background: #f1f5f9; | |
| color: var(--text-main); | |
| padding: 8px 16px; | |
| border-radius: 50px; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| cursor: default; | |
| } | |
| .tag:hover { | |
| background: var(--accent-color); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--text-light); | |
| font-size: 0.9rem; | |
| border-top: 1px solid #e2e8f0; | |
| margin-top: 2rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="logo"> | |
| <i class="fa-solid fa-play-circle"></i> | |
| <span>ویوپلاس</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <main class="container"> | |
| <!-- Part 1: Most Viewed Clips --> | |
| <section id="clips"> | |
| <h2 class="section-title">پربازدیدترین کلیپها</h2> | |
| <div class="clips-grid"> | |
| <!-- Card 1 --> | |
| <div class="clip-card"> | |
| <div class="clip-thumbnail"> | |
| <img src="https://picsum.photos/seed/clip1/400/250" alt="Clip Thumbnail" style="width:100%; height:100%; object-fit:cover;"> | |
| <div class="view-badge"><i class="fa-regular fa-eye"></i> ۳۶,۰۰۰</div> | |
| </div> | |
| <div class="clip-content"> | |
| <h3 class="clip-title">بستن اپهای گوشی خوبه؟</h3> | |
| <p class="clip-desc">اپهای آفیون رو بندیم یا نبندیم؟ چرا؟</p> | |
| <div class="clip-stats"> | |
| <div class="stat-item" onclick="toggleLike(this)"> | |
| <i class="fa-regular fa-heart"></i> <span class="like-count">۱۲,۳۴۵</span> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fa-regular fa-comment"></i> <span>۱۰۹</span> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fa-solid fa-share-nodes"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="clip-card"> | |
| <div class="clip-thumbnail"> | |
| <img src="https://picsum.photos/seed/clip2/400/250" alt="Clip Thumbnail" style="width:100%; height:100%; object-fit:cover;"> | |
| <div class="view-badge"><i class="fa-regular fa-eye"></i> ۱۲,۵۰۰</div> | |
| </div> | |
| <div class="clip-content"> | |
| <h3 class="clip-title">مزایای هوش مصنوعی</h3> | |
| <p class="clip-desc">چطور هوش مصنوعی میتونه زندگی ما رو عوض کنه؟</p> | |
| <div class="clip-stats"> | |
| <div class="stat-item" onclick="toggleLike(this)"> | |
| <i class="fa-regular fa-heart"></i> <span class="like-count">۸,۲۱۰</span> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fa-regular fa-comment"></i> <span>۴۵</span> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fa-solid fa-share-nodes"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Part 2: Intro & Comments --> | |
| <section id="intro-comments"> | |
| <div class="profile-grid"> | |
| <!-- Ali Khormandel --> | |
| <div class="info-card"> | |
| <img src="https://picsum.photos/seed/ali/200/200" alt="Ali Khormandel" class="avatar-lg"> | |
| <h3 class="user-name">علی خرمدل</h3> | |
| <p class="user-role">مدیر محتوا</p> | |
| <p class="user-bio"> | |
| مطالبتان به شدت مفید است. من همیشه منتظر ویدیوها و پستهای جدیدتون هستم تا با دوستانم به اشتراک بذارم. | |
| </p> | |
| </div> | |
| <!-- Comments Section --> | |
| <div class="comments-section"> | |
| <div class="comments-header"> | |
| <span>کامنتهای شما</span> | |
| <i class="fa-regular fa-comments" style="font-size: 1.2rem; color: var(--accent-color);"></i> | |
| </div> | |
| <div class="comment-form"> | |
| <textarea placeholder="نظر خود را بنویسید..."></textarea> | |
| <button class="btn-primary" onclick="submitComment()"> | |
| ارسال پیام <i class="fa-solid fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <!-- Simulated Comment List --> | |
| <div style="margin-top: 1.5rem; border-top: 1px solid #e2e8f0; padding-top: 1rem;"> | |
| <div style="display: flex; gap: 10px; margin-bottom: 10px;"> | |
| <img src="https://picsum.photos/seed/user1/40/40" style="border-radius: 50%;"> | |
| <div> | |
| <p style="font-weight: 700; font-size: 0.9rem;">کاربر مهمان</p> | |
| <p style="font-size: 0.85rem; color: var(--text-light);">عالی بود! خیلی به من کمک کرد.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Part 3: FAQ & Contact --> | |
| <section id="faq-contact"> | |
| <div class="faq-grid"> | |
| <!-- FAQ List --> | |
| <div class="faq-container"> | |
| <h2 class="section-title">سوالات متداول</h2> | |
| <div class="faq-item"> | |
| <button class="faq-question"> | |
| چطور میتوانم از فروشگاه خرید کنم؟ | |
| <i class="fa-solid fa-chevron-down"></i> | |
| </button> | |
| <div class="faq-answer"> | |
| برای خرید، روی دکمههای "خرید" در محصولات کلیک کنید و مراحل را در سبد خرید دنبال کنید. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <button class="faq-question"> | |
| آیا میتوانم با هاتون همکاری داشته باشم؟ | |
| <i class="fa-solid fa-chevron-down"></i> | |
| </button> | |
| <div class="faq-answer"> | |
| بله، لطفا ایمیل info@view.com را ارسال کنید و پروژه خود را توضیح دهید. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <button class="faq-question"> | |
| نمیتوانم توی وبسایت ثبت نام کنم. | |
| <i class="fa-solid fa-chevron-down"></i> | |
| </button> | |
| <div class="faq-answer"> | |
| اگر مشکل ایجاد شده است، لطفاً صفحه را رفرش کنید یا از مرورگر دیگری استفاده کنید. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Info --> | |
| <div class="contact-card"> | |
| <h3 style="margin-bottom: 1rem; color: white;">تماس با ما</h3> | |
| <a href="#" class="social-link"> | |
| <i class="fa-brands fa-instagram"></i> ما را در اینستاگرام دنبال کنید | |
| </a> | |
| <div class="contact-item"> | |
| <i class="fa-solid fa-location-dot"></i> | |
| ایران، تهران، میدان آزادی، کوچه ۳۴ متر مربع، پلاک ۲۴ | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fa-solid fa-phone"></i> | |
| ۰۶۱ ۴۳۲۱ ۸۷۵۶ | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fa-solid fa-envelope"></i> | |
| info@view.com | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Part 4: Ahuora Niazi Profile --> | |
| <section id="ahuora-profile"> | |
| <h2 class="section-title">پروفایل اهـــورا نیــــازی</h2> | |
| <div class="ahaora-section"> | |
| <div class="ahaora-header"> | |
| <img src="https://picsum.photos/seed/ahuora/300/300" alt="Ahuora Niazi" class="ahaora-image"> | |
| <h3 class="user-name">اهـــورا نیــــازی</h3> | |
| <span class="user-role" style="background: #e0e7ff; color: #4338ca;">فعال حوزه فناوری — روشن باشید و آگاه</span> | |
| <div class="ahaora-stats"> | |
| <div class="stat-box"> | |
| <span class="stat-number">۱.۸م</span> | |
| <span class="stat-label">دنبالشونده</span> | |
| </div> | |
| <div class="stat-box"> | |
| <span class="stat-number">۱,۵۲۸</span> | |
| <span class="stat-label">پستها</span> | |
| </div> | |
| <div class="stat-box"> | |
| <span class="stat-number">۴۶۷</span> | |
| <span class="stat-label">دنبالکننده</span> | |
| </div> | |
| </div> | |
| <button class="btn-primary" onclick="alert('پیام برای Ahuora ارسال شد!')"> | |
| <i class="fa-brands fa-instagram"></i> اینستاگرام | |
| </button> | |
| <button class="btn-primary" style="background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); margin-top: 10px;" onclick="alert('پیام برای Ahuora ارسال شد!')"> | |
| <i class="fa-regular fa-paper-plane"></i> ارسال پیام | |
| </button> | |
| </div> | |
| <div class="tags-container"> | |
| <span class="tag">هوش مصنوعی</span> | |
| <span class="tag">معرفی محصول</span> | |
| <span class="tag">سفر</span> | |
| <span class="tag">درباره من</span> | |
| <span class="tag">تکنولوژی</span> | |
| <span class="tag">Seoul 2023</span> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>تمامی حقوق این وبسایت محفوظ میباشد © ۲۰۲۳</p> | |
| </footer> | |
| <script> | |
| // FAQ Accordion Logic | |
| const faqItems = document.querySelectorAll('.faq-item'); | |
| faqItems.forEach(item => { | |
| const question = item.querySelector('.faq-question'); | |
| const answer = item.querySelector('.faq-answer'); | |
| question.addEventListener('click', () => { | |
| // Close other items (optional, for accordion effect) | |
| faqItems.forEach(otherItem => { | |
| if (otherItem !== item) { | |
| otherItem.classList.remove('active'); | |
| otherItem.querySelector('.faq-answer').style.maxHeight = null; | |
| } | |
| }); | |
| // Toggle current item | |
| item.classList.toggle('active'); | |
| // Set max-height for animation | |
| if (item.classList.contains('active')) { | |
| answer.style.maxHeight = answer.scrollHeight + "px"; | |
| } else { | |
| answer.style.maxHeight = null; | |
| } | |
| }); | |
| }); | |
| // Like Interaction Logic | |
| function toggleLike(element) { | |
| const icon = element.querySelector('i'); | |
| const countSpan = element.querySelector('.like-count'); | |
| let count = parseInt(countSpan.innerText.replace(/,/g, '')); | |
| if (icon.classList.contains('fa-regular')) { | |
| // Like | |
| icon.classList.remove('fa-regular'); | |
| icon.classList.add('fa-solid'); | |
| icon.style.color = '#ef4444'; // Red color | |
| count++; | |
| } else { | |
| // Unlike | |
| icon.classList.remove('fa-solid'); | |
| icon.classList.add('fa-regular'); | |
| icon.style.color = 'inherit'; | |
| count--; | |
| } | |
| // Update number with Persian digits formatting simulation | |
| countSpan.innerText = count.toLocaleString('fa-IR'); | |
| } | |
| // Comment Submission Logic | |
| function submitComment() { | |
| const textarea = document.querySelector('.comment-form textarea'); | |
| const content = textarea.value.trim(); | |
| if (content) { | |
| // Visual feedback | |
| const btn = document.querySelector('.comment-form button'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="fa-solid fa-check"></i> ارسال شد!'; | |
| btn.style.background = '#22c55e'; // Green | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| btn.style.background = ''; | |
| textarea.value = ''; | |
| }, 2000); | |
| } else { | |
| // Shake animation or simple alert replacement | |
| textarea.style.borderColor = '#ef4444'; | |
| setTimeout(() => { | |
| textarea.style.borderColor = '#e2e8f0'; | |
| }, 1000); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |