- New Chat
- Search Chats
CtrlK
Projects
- New Project
Chats
No chats yet
Support
Theme
What are the latest trends inچه سوپی ؟
AI?
Dec 23, 9:37:59 AM·Auto·2727 models
EditCopy
Sup AIClaude Haiku 4.559.87%Gemini 3 Flash77.73%GPT-5 Mini50%
Thinking Mode
Thinking Trace
Latest AI Trends (Late 2025)
Based on comprehensive research from multiple sources, here are the major trends shaping AI as of December 2025:
1. The Rise of Agentic AI ("Year of the Agent")
2025 has been dubbed the "Year of the Agent" mckinsey.com +1, with AI systems moving from answering questions to autonomously executing multi-step tasks:
Autonomous Task Execution: Models like OpenAI Operator and Claude Opus 4.5 can now browse the web, use local computers, and manage software to complete complex workflows like booking travel or fixing GitHub bugs thenewstack.io +1
Multi-Agent Orchestration: Companies are deploying systems where multiple specialized agents collaborate (e.g., one agent handles data analysis while another manages reporting) gartner.com
Market Growth: AI agents and AI-ready data are the fastest advancing technologies on Gartner's 2025 Hype Cycle, with the market for autonomous AI expected to grow ~40% annually from $8.6 billion in 2025 to $263 billion in 2035 stateof.ai
2. Frontier Model Breakthroughs
Several major models were released in late 2025, setting new performance records en.wikipedia.org +1:
Claude Opus 4.5: Released by Anthropic in November 2025, it became the first model to surpass an 80% success rate on the SWE-bench Verified benchmark, outperforming human engineering candidates humai.blog
Gemini 3 and Flash: Google introduced the Gemini 3 family in November-December 2025, focusing on "frontier intelligence built for speed" with low-latency performance for real-time applications blog.google +1
GPT-5.2-Codex: OpenAI's latest coding-specific model features deep terminal integration and advanced reasoning for software engineering medium.com
Test-Time Computation: Models now spend more time on inference and chain-of-thought reasoning for more accurate and reliable responses trustitsec.com
3. Dramatic Cost Reduction & Efficiency
The economics of AI have fundamentally shifted:
280-fold Cost Drop: Inference costs for GPT-3.5-level performance dropped over 280-fold between November 2022 and October 2024 hai.stanford.edu
Hardware Improvements: Hardware costs declined by 30% annually, while energy efficiency improved by 40% each year hai.stanford.edu
4. Multimodal AI Expansion
AI systems now seamlessly integrate multiple input and output types iri.com +1:
- Models like Gemini 3 combine text, images, audio, and video, expanding use cases in search, content generation, and visual coding
- Multimodal AI is at the "Peak of Inflated Expectations" on Gartner's Hype Cycle, expected to reach mainstream adoption within 5 years gartner.com
5. Domain-Specific & Small Models
The trend has shifted from "bigger is better" to specialized intelligence gartner.com +1:
- Domain-Specific Language Models (DSLMs): Smaller, cheaper, more accurate models trained for specific industries (law, healthcare, manufacturing)
- On-Device Models: Models like Gemma 3 and Nano Banana Pro run efficiently on single GPUs or mobile devices blog.google
- Synthetic Data: AI-generated training data reduces reliance on human-labeled data and lowers costs trustitsec.com
6. Physical AI & Robotics
AI is moving from digital into the physical world:
- Vision-Language-Action (VLA) Models: Combine visual understanding, language processing, and physical action control for general-purpose robots en.wikipedia.org
- Edge AI in Manufacturing: Real-time anomaly detection and predictive maintenance (partnerships like Siemens-Arm) reduce downtime by up to 50% aitrends.jp
- Embedded Intelligence: AI integrated directly into industrial robots and drones for real-time adaptation meisterit.com
7. AI Security & Governance
With increased adoption comes heightened focus on safety:
- Confidential Computing: Protecting data during active AI processing gartner.com
- Self-Verification Systems: AI models with internal feedback loops to auto-judge and correct mistakes infoworld.com
- Digital Provenance: Tools to detect and watermark AI-generated content (like Google's video detection in Gemini) to combat deepfakes medium.com
- Regulatory Growth: The AI governance market is projected to grow from $308.3 million in 2025 to over $1.42 billion by decade's end mckinsey.com
- Transparency Laws: New regulations for transparency and catastrophic risk reduction have been enacted en.wikipedia.org
8. Enterprise Adoption Challenges
While adoption is widespread, scaling remains difficult:
- 88% Regular Use: But most organizations are still transitioning from experimentation to scaled deployment, not yet realizing enterprise-wide financial impact mckinsey.com
- Smart Home Reliability Issues: LLM-based home assistants often fail at simple predetermined tasks, showing reliability needs improvement theverge.com
9. AI as Scientific Collaborator
AI is becoming a research partner, with systems like DeepMind's Co-Scientist and Stanford's Virtual Lab autonomously generating, testing, and validating hypotheses mckinsey.com
10. Massive Infrastructure Investment
Companies continue massive capital expenditure on hardware (processors/data centers), impacting capital markets and debt levels reuters.com [Financial Times]( https://www.ft.com/content/9f550bb6-5708-41e3-aef6-ce8d7bb405
Stopped
RegenerateCopy
LikeDislike
22 sources +19
Dec 23, 9:39:27 AM·1m 28s
Act as a world-class Creative Director specializing in entertainment platform design and branding. Given the following context, criteria, and instructions, طراحی جامع و تولید مجموعهٔ قابل اجرا از کاورهای بصری، متون توضیحی، ساختار دادهها، و راهکارهای یکپارچهسازی برای پلتفرم فیلم، سریال، مستند و انیمیشن جهانی که جهت جذب مشتری و نمایش بروز جهانی آماده و قابل اجرا باشد.
Context
پلتفرم دیجیتال ارائهکنندهٔ فیلم، سریال، مستند و انیمیشنهای بروز جهان با هدف جذب مشتریان ایرانی و مخاطبان فارسیزبان و بینالمللی. نیاز به:
- طراحی کاورهای جذاب و متنوع برای هر عنوان (هیرو/پستر/تامبنیل) با تمرکز بر جذب کلیک و اشتراکگذاری.
- تولید توضیحات کوتاه و بلند برای هر فیلم/سریال/مستند/انیمیشن به زبان فارسی (و درج عنوان اصلی و اطلاعات بینالمللی).
- فیلترها و گزینههای نمایش متنوع از جمله سال تولید، کشور، ژانر، رتبه، زبان و زیرنویس.
- نمایش لوگوهای بزرگ و برجستهٔ برندهای مشهور فیلمسازی برای جلب توجه (با رعایت حقوق مالکیت و راهکارهای قانونی یا جایگزین).
- اعلان و نمایش واضح آیدی چت با ادمین (برای پشتیبانی و جذب مستقیم مشتری) بههمراه سیستم گفتگو/تیکت.
- موبایلفرست، بارگذاری سریع، سئو و دسترسیپذیری رعایت شده باشد.
- محتوای پلتفرم عمدتاً به زبان فارسی باشد اما اطلاعات بینالمللی (عنوان اصلی، سال، کشور) حفظ شود.
Approach
- پژوهش و استراتژی:
- تعریف پرسونای مخاطب (علاقهمندان سینما و سریال، خانوادهها، کاربران موبایل، مشترکین پرمیوم).
- تحلیل رقبا جهانی و محلی برای الگوبرداری از بهترین فرمتها و اندازهها.
- معماری محتوا و دیتاسکیمای پایه:
- تعریف فیلدهای مورد نیاز برای هر عنوان (شامل متادیتا، تگها، تصاویر، ویدئو تریلر).
- ساختار دستهبندی و فیلترها (سال تولید، ژانر، کشور، زبان، درجه سنی، مدت زمان، سازنده).
- طراحی سیستم بصری کاورها:
- تعریف چند قالب کاور (Hero banner، Poster، Thumbnail، Collection tile) با نسبتها و اندازههای دقیق.
- تعیین زبان بصری (کنتراست بالا، تایپوگرافی ضخیم برای جذب، فضای منفی برای لوگوها، رنگبندی موضوعی برای ژانرها).
- دستورالعمل جایگذاری لوگوها: ناحیهٔ ویژهٔ Partner Badges با الزام به مجوز یا استفاده از_badge جایگزین در صورت نداشتن مجوز.
- تولید محتوا و کپیرایتینگ:
- قالبهای متن (عنوان فارسی، عنوان اصلی، سال، خلاصه کوتاه 1-2 خطی، توضیح بلند 80-160 واژه، خط تبلیغاتی 3-8 کلمه، تگها).
- نمونهسازی برای چند عنوان جهت پیشنمایش.
- یکپارچهسازی چت ادمین:
- طراحی کامپوننت چت شناور با آیدی/لینک (مثال: Telegram/WhatsApp/Intercom) و حالات آنلاین/آفلاین، فرم پیام سریع، پاسخهای آماده و هدایت به تیکت/ایمیل.
- خروجیهای فنی:
- ارائه JSON Schema برای محتوا، نمونه API endpoints، CSS اندازهها/نسبتها و نکات بهینهسازی تصویر (WebP، lazy-loading).
- حقوقی و برندینگ:
- سیاست استفاده از لوگوها: الزامات مجوز، نحوهٔ نمایش با اندازهٔ بزرگ یا استفاده از نشانهای معنایی جایگزین در صورت عدم دسترسی به مجوز.
- تست و بهینهسازی:
- A/B تست برای کاورها و عناوین، KPIها (CTR، زمان مشاهده، نرخ تبدیل)، پیشنهادات بهبود براساس نتایج.
Response Format
- لیست تحویلشدنیها با توضیح کوتاه برای هر مورد (فارسی):
- UI Kit و Wireframes (header/hero/list/grid/detail page).
- قالبهای کاور: فایلهای PSD/FIGMA یا مشخصات دقیق (ابعاد و رزولوشن).
- نمونههای متنی: 10 نمونه توضیح (فارسی) و 10 خط تبلیغاتی.
- JSON Schema کامل برای یک محتوای رسانهای نمونه.
- CSS/CSS snippets با اندازهها و نسبتها برای هر نوع کاور.
- Image-generation prompts (فارسی و انگلیسی) برای تولیدگرهای تصویر (مثال: Stable Diffusion / Midjourney).
- راهنمای یکپارچهسازی چت با مثالهای فنی (Telegram link، Intercom، Firebase).
- قوانین و الگوهای نمایش لوگوها و بیانیه حقوقی مختصر.
- جدول زمانبندی پیشنهادی و milestones (هفتهای).
- هر فایل یا نمونه باید با برچسب مشخص همراه باشد (مثال: "Cover_Template_Hero_1920x1080", "Content_Schema.json").
- ارائهٔ نمونهٔ سه عنوان کامل (پوشش + متن کوتاه + متن بلند + تگها + پیشنهادات CTA) در زبان فارسی همراه با عنوان اصلی و سال تولید.
- ارائهٔ حداقل 5 نمونه prompt برای تولید کاور بصری و 5 نمونه prompt برای تولید متن تبلیغاتی (فارسی).
Instructions
- زبان تمام متون اصلی باید فارسی معیار باشد؛ عناوین اصلی بینالمللی در پرانتز یا کنار عنوان فارسی درج شود.
- اندازهها و فرمتهای پیشنهادی:
- Hero banner: 1920x1080 px (16:9)؛ وبP فشرده و نسخهٔ retina 2x.
- Poster (پستر/کاور بزرگ): 1080x1620 px (2:3).
- Thumbnail (لیست/شبکه): 360x540 px (2:3) و نسخهٔ 300x450 برای موبایل.
- Collection tile: 800x450 px (16:9).
- آیکون لوگوها: SVG یا PNG با پسزمینه شفاف، حداکثر 150px ارتفاع در نمایشهای استاندارد.
- مشخصات بصری کاورها:
- تایپوگرافی: استفاده از فونت خوانا فارسی برای وب (مثلاً Vazir یا IranSans Web) با وزنهای مختلف؛ تیترها Bold/Heavy.
- رنگبندی: پالت سهگانه (Primary/Accent/Background) با نسخهٔ تیره و روشن؛ رنگ متمایز برای هر ژانر.
- المان لوگوهای بزرگ: ناحیهٔ اختصاصی در بالای کاور یا گوشهٔ راست/چپ با حاشیهٔ امن 16px؛ در صورت عدم مجوز استفاده، نمایش "Featured Partner" badge با طراحی مشابه.
- متادیتا لازم برای هر عنوان (الگویی، ارائه در JSON Schema):
- id, title_fa, title_original, year, country, genres[], directors[], cast[], runtime_minutes, age_rating, language_original, subtitles[], synopsis_short, synopsis_long, tags[], poster_urls{thumb,poster,hero}, trailer_url, partner_logos[], content_rating_score, publish_date, availability_regions[].
- قوانین حقوقی برای لوگوها:
- نمایش لوگوهای برندهای بزرگ تنها با مجوز صریح یا برای مقاصد نمایشی با ذکر "با اجازه یا نمایندگی"؛ در غیر این صورت استفاده از نسخهٔ مبهمشده یا badge جایگزین الزامی.
- پیشنهادات جایگزین: استفاده از عبارتهای "Featured by" همراه با آیکون طراحیشدهٔ اختصاصی یا رتبهبندی/جوایز بهجای لوگوی برند.
- چت ادمین:
- آیدی/لینک چت باید در header و صفحهٔ جزئیات عنوان قابل دسترسی باشد.
- حالات: آنلاین (live chat via Intercom/WebSocket), offline (form to submit), escalation to ticket (email + ticket ID).
- نمونه فرمت آیدی: Telegram: t.me/FilmPlatformSupport یا WhatsApp Business link: wa.me/PHONENUMBER. در مستندات جایگزینهای فنی برای هر سرویس (API keys, webhook URLs) ذکر شود.
- تولید کاور با مدلهای تصویری:
- ارائهٔ promptهای دقیق شامل: ژانر، حس بصری (cinematic, dramatic, whimsical), المانهای تصویری (قهرمان، جمعیت، فضای شهری/فضایی), پالت رنگ، نورپردازی (high-contrast rim light, cinematic bloom), تایپوگرافی overlay (فارسی Bold), محل قرارگیری لوگوها، نسبت تصویر و دستورات خروجی (مثلاً --ar 2:3 یا size 1080x1620).
- مثال prompt (فارسی): "کاور سینمایی برای فیلم درام معاصر؛ بازیگر اصلی در نیمرخ با نور لبهای گرم، پسزمینه شهری بارانی با بوکههای نئون، تایپوگرافی فارسی ضخیم سفید در پایین، خط تبلیغاتی ۵ کلمه؛ جای لوگوی اسپانسر در گوشهٔ راست بالا، سبک: cinematic, photorealistic, high detail; نسبت 2:3; کیفیت بالا."
- سئو و متا:
- توضیحات متا: 150-160 کاراکتر فارسی برای هر عنوان.
- عناوین صفحات (title tags): تا 60 کاراکتر شامل عنوان فارسی و سال.
- استفاده از schema.org/VideoObject با پر کردن فیلدهای اساسی.
- عملکرد و دسترسی:
- تصاویر بهینه WebP، lazy-loading، CDN پیشنهاد شود.
- بارگذاری صفحهٔ اصلی زیر 3 ثانیه در شبکه موبایل استاندارد.
- دسترسی: رعایت کنتراست رنگ، alt متن برای تصاویر، امکان پیمایش با کیبورد.
- تست و KPI:
- معیارها: CTR کاورها، نرخ تبدیل عضویت، زمان تماشا متوسط، نرخ بازگشت.
- اجرای A/B تست روی تیترها، تصاویر و CTAها بهمدت 2 هفته هرباره.
- خروجی نمونه: سه نمونه کامل (پیوست) شامل:
- فایل نام: Sample_1_Film — شامل poster 1080x1620 (مشخصات تصویری)، synopsis_short (فارسی)، synopsis_long (فارسی)، tags[], recommended_cta.
- زمانبندی پیشنهادی:
- هفته 1: پژوهش و معماری محتوا.
- هفته 2: طراحی UI Kit و قالبهای کاور.
- هفته 3: تولید 30 کاور نمونه + 50 توضیح متنی.
- هفته 4: پیادهسازی MVP شامل CMS اولیه و چت ادمین.
- هفته 5: تست، بهینهسازی و تحویل نهایی.
- تحویلپذیرها باید قابل اجرا برای طراحان و توسعهدهندگان باشند (فایلهای قابل واردسازی در Figma/PSD، JSON Schema، نمونههای prompt و اسکریپتهای نمونه).
تکمیل نمونهها:
- نمونههای متنی و promptها باید بهصورت همزمان ارائه شوند تا تیم تولید تصویر و محتوا فوراً شروع به اجرا کند.
- ارائهٔ نمونههای واقعی (۳ عنوان) در قالب: نام فارسی — (عنوان اصلی، سال) — خلاصه کوتاه (تا ۲۵ کلمه) — خلاصه بلند (۶۰-۱۶۰ واژه) — تگهای پیشنهادی — CTA پیشنهادی.
رعایت نکات اخلاقی و حقوقی الزامی است؛ استفاده از لوگوها یا محتوای دارای کپیرایت باید همراه با مجوز یا راهکار جایگزین باشد.
Dec 23, 10:52:14 AM·Auto·33 models
EditCopy
Sup AIClaude Haiku 4.570.06%Gemini 3 Flash93.7%Qwen3 235B94.27%
Deep Thinking Mode
Thinking Trace
📺 طرح جامع پلتفرم بینالمللی فیلم و سریال
مستند اجرایی برای تیمهای طراحی، محتوا و توسعه
🎯 خلاصهٔ اجرایی
این مستند یک طرح جامع و قابل اجرا برای پلتفرم دیجیتال فیلم، سریال، مستند و انیمیشن ارائه میدهد که بر اساس جدیدترین روندهای جهانی صنعت استریمینگ در سال ۲۰۲۵ طراحی شده است.
طبق گزارش forrester.com و comscore.com، پلتفرمهای Ad-Supported و FAST Channels رشد چشمگیری داشتهاند. همچنین deloitte.com نشان میدهد که پلتفرمهای اجتماعی به نیروی غالب در رسانه و سرگرمی تبدیل شدهاند.
📋 ۱. لیست تحویلشدنیها (Deliverables)
| شماره | تحویلشدنی | توضیح | فرمت خروجی |
|---|---|---|---|
| ۱ | UI Kit & Design System | پالت رنگی، تایپوگرافی، کامپوننتها | Figma / PSD |
| ۲ | قالبهای کاور | Hero, Poster, Thumbnail, Collection | PSD / Figma / CSS |
| ۳ | JSON Schema | ساختار دادهای کامل محتوا | JSON |
| ۴ | نمونههای متنی | ۱۰ توضیح + ۱۰ تگلاین | Markdown / DOCX |
| ۵ | Image Prompts | ۵ پرومپت تولید کاور | TXT |
| ۶ | Copy Prompts | ۵ پرومپت تولید متن | TXT |
| ۷ | Chat Widget | کد کامل + راهنمای یکپارچهسازی | HTML/CSS/JS |
| ۸ | قوانین برندینگ | سیاست لوگوها + بیانیه حقوقی | |
| ۹ | CSS Specifications | اندازهها و نسبتهای دقیق | CSS |
| ۱۰ | زمانبندی پروژه | Milestones هفتگی | Gantt / Table |
🎨 ۲. سیستم طراحی بصری (Design System)
۲.۱ پالت رنگی و تایپوگرافی
json
{ "colors": { "primary": "#1a1a2e", "primary_light": "#16213e", "accent": "#e94560", "accent_dark": "#d63447", "background_dark": "#0f3460", "text_primary": "#ffffff", "text_secondary": "#b0b0b0", "success": "#2ecc71", "warning": "#f39c12", "genres": { "drama": "#c0392b", "comedy": "#f1c40f", "sci_fi": "#3498db", "animation": "#9b59b6", "documentary": "#16a085", "action": "#e74c3c", "horror": "#2c3e50", "romance": "#e91e63" } }, "typography": { "primary_font_fa": "Vazirmatn, IranSans Web, Tahoma", "secondary_font_en": "Inter, Roboto, sans-serif", "sizes": { "h1": { "size": "32px", "weight": "800", "line_height": "1.3" }, "h2": { "size": "24px", "weight": "700", "line_height": "1.4" }, "h3": { "size": "18px", "weight": "600", "line_height": "1.4" }, "body": { "size": "14px", "weight": "400", "line_height": "1.6" }, "caption": { "size": "12px", "weight": "400", "line_height": "1.5" } } }}
طبق netsolutions.com و accedo.one، تایپوگرافی خوانا و کنتراست بالا از اصول کلیدی طراحی پلتفرمهای استریمینگ است.
📐 ۳. مشخصات فنی کاورها (Cover Templates)
۳.۱ جدول ابعاد و نسبتها
| نوع کاور | ابعاد (px) | نسبت | کاربرد | فرمت |
|---|---|---|---|---|
| Hero Banner | 1920×1080 | 16:9 | اسلایدر صفحه اصلی | WebP + 2x Retina |
| Poster | 1080×1620 | 2:3 | صفحه جزئیات | WebP + PNG fallback |
| Thumbnail | 360×540 | 2:3 | لیست شبکهای | WebP optimized |
| Thumbnail Mobile | 300×450 | 2:3 | موبایل | WebP compressed |
| Collection Tile | 800×450 | 16:9 | دستهبندیها | WebP |
| Partner Logo | max 150px height | - | لوگوها | SVG / PNG transparent |
۳.۲ CSS Specifications
css
/* ===== Hero Banner — 16:9 ===== */.hero-banner { width: 100%; max-width: 1920px; aspect-ratio: 16 / 9; position: relative; overflow: hidden; border-radius: 0;}
.hero-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient( to top, rgba(15, 52, 96, 0.95) 0%, rgba(15, 52, 96, 0.7) 40%, transparent 100% ); padding: 40px 60px; display: flex; flex-direction: column; justify-content: flex-end;}
.hero-title { font-family: 'Vazirmatn', sans-serif; font-size: clamp(28px, 4vw, 48px); font-weight: 800; color: #ffffff; line-height: 1.2; margin-bottom: 12px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);}
.hero-tagline { font-size: clamp(14px, 2vw, 20px); font-weight: 600; color: #e94560; letter-spacing: 0.5px; margin-bottom: 20px;}
.hero-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: linear-gradient(135deg, #e94560 0%, #d63447 100%); color: #ffffff; font-weight: 700; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(233, 69, 96, 0.4);}
/* ===== Poster Card — 2:3 ===== */.poster-card { aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer;}
.poster-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 16px 40px rgba(233, 69, 96, 0.3);}
.poster-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;}
.poster-card:hover img { transform: scale(1.05);}
.poster-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 45%; background: linear-gradient( to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100% ); padding: 16px; display: flex; flex-direction: column; justify-content: flex-end;}
.poster-title { font-family: 'Vazirmatn', sans-serif; font-size: 16px; font-weight: 700; color: #ffffff; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.poster-meta { font-size: 12px; color: #b0b0b0; display: flex; align-items: center; gap: 8px;}
.poster-rating { display: flex; align-items: center; gap: 4px; color: #f39c12;}
/* ===== Thumbnail Grid ===== */.thumbnail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; padding: 20px;}
@media (min-width: 768px) { .thumbnail-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }}
@media (min-width: 1200px) { .thumbnail-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }}
/* ===== Collection Tile — 16:9 ===== */.collection-tile { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; position: relative; background-blend-mode: multiply;}
.collection-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(233, 69, 96, 0.7) 0%, rgba(15, 52, 96, 0.8) 100% ); z-index: 1;}
.collection-title { position: absolute; bottom: 24px; left: 24px; z-index: 2; font-size: 28px; font-weight: 800; color: #ffffff;}
/* ===== Partner Logo Badge ===== */.partner-badge { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); padding: 8px 12px; border-radius: 6px; display: flex; align-items: center; gap: 6px; z-index: 10;}
.partner-badge img { max-height: 24px; width: auto; object-fit: contain;}
.partner-badge-text { font-size: 10px; font-weight: 600; color: #ffffff; text-transform: uppercase; letter-spacing: 0.5px;}
/* ===== Age Rating Badge ===== */.age-badge { position: absolute; top: 12px; left: 12px; background: rgba(0, 0, 0, 0.7); color: #ffffff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.2);}
/* ===== Responsive Adjustments ===== */@media (max-width: 768px) { .hero-overlay { padding: 20px 24px; } .poster-card { border-radius: 8px; } .poster-title { font-size: 14px; }}
/* ===== Image Optimization ===== */img[loading="lazy"] { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);}
picture { display: contents;}
/* ===== Accessibility ===== */.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
@media (prefers-reduced-motion: reduce) { .poster-card, .poster-card img, .hero-cta { transition: none; }}
/* ===== Dark Mode (Default) ===== */:root { color-scheme: dark;}
body { background-color: #0f3460; color: #ffffff;}
طبق spyro-soft.com و accedo.tv، رعایت نسبتهای استاندارد و بهینهسازی برای دستگاههای مختلف ضروری است.
📊 ۴. JSON Schema کامل محتوا
json
{ "$schema": "http://json-schema.org/draft-07/schema#", "title": "MediaContent", "description": "ساختار دادهای استاندارد برای فیلم، سریال، مستند و انیمیشن", "type": "object", "required": ["id", "title_fa", "title_original", "year", "genres", "synopsis_short", "images"], "properties": { "id": { "type": "string", "format": "uuid", "description": "شناسهٔ یکتا", "example": "550e8400-e29b-41d4-a716-446655440000" }, "content_type": { "type": "string", "enum": ["movie", "series", "documentary", "animation"], "description": "نوع محتوا" }, "title_fa": { "type": "string", "minLength": 1, "maxLength": 100, "description": "عنوان فارسی", "example": "تلقین" }, "title_original": { "type": "string", "minLength": 1, "maxLength": 150, "description": "عنوان اصلی", "example": "Inception" }, "year": { "type": "integer", "minimum": 1900, "maximum": 2100, "description": "سال تولید" }, "country": { "type": "array", "items": { "type": "string" }, "minItems": 1, "description": "کشورهای تولیدکننده", "example": ["USA", "UK"] }, "genres": { "type": "array", "items": { "type": "string", "enum": [ "اکشن", "کمدی", "درام", "علمی-تخیلی", "فانتزی", "ترسناک", "هیجانانگیز", "عاشقانه", "ماجراجویی", "جنایی", "مستند", "انیمیشن", "زندگینامه", "موزیکال", "تاریخی", "جنگی", "خانوادگی" ] }, "minItems": 1, "maxItems": 5, "description": "ژانرها" }, "directors": { "type": "array", "items": { "type": "object", "properties": { "name_fa": { "type": "string" }, "name_en": { "type": "string" } } }, "description": "کارگردانها" }, "cast": { "type": "array", "items": { "type": "object", "properties": { "name_fa": { "type": "string" }, "name_en": { "type": "string" }, "character": { "type": "string" } } }, "maxItems": 10, "description": "بازیگران اصلی" }, "runtime_minutes": { "type": "integer", "minimum": 1, "description": "مدت زمان (دقیقه)" }, "age_rating": { "type": "string", "enum": ["G", "PG", "PG-13", "R", "NC-17", "بدون محدودیت", "+۱۲", "+۱۵", "+۱۸"], "description": "درجهٔ سنی" }, "language_original": { "type": "string", "description": "زبان اصلی" }, "subtitles": { "type": "array", "items": { "type": "string" }, "description": "زیرنویسهای موجود" }, "synopsis_short": { "type": "string", "minLength": 20, "maxLength": 150, "description": "خلاصه کوتاه (۱-۲ خط)" }, "synopsis_long": { "type": "string", "minLength": 200, "maxLength": 800, "description": "خلاصه بلند (۶۰-۱۶۰ واژه)" }, "tagline": { "type": "string", "maxLength": 60, "description": "خط تبلیغاتی (۳-۸ کلمه)" }, "tags": { "type": "array", "items": { "type": "string" }, "maxItems": 15, "description": "برچسبهای جستجو" }, "images": { "type": "object", "required": ["poster", "thumbnail"], "properties": { "hero": { "type": "string", "format": "uri", "description": "Hero Banner 1920x1080" }, "poster": { "type": "string", "format": "uri", "description": "Poster 1080x1620" }, "poster_2x": { "type": "string", "format": "uri", "description": "Poster Retina 2160x3240" }, "thumbnail": { "type": "string", "format": "uri", "description": "Thumbnail 360x540" }, "thumbnail_mobile": { "type": "string", "format": "uri", "description": "Mobile Thumbnail 300x450" }, "collection_tile": { "type": "string", "format": "uri", "description": "Collection Tile 800x450" } } }, "trailer_url": { "type": "string", "format": "uri", "description": "لینک تریلر" }, "partner_logos": { "type": "array", "items": { "type": "object", "properties": { "name": { "type": "string" }, "logo_url": { "type": "string", "format": "uri" }, "license_type": { "type": "string", "enum": ["official", "licensed", "partner", "featured"] } } }, "description": "لوگوهای شرکا" }, "content_rating_score": { "type": "number", "minimum": 0, "maximum": 10, "description": "امتیاز (۰-۱۰)" }, "rating_count": { "type": "integer", "description": "تعداد رأیدهندگان" }, "publish_date": { "type": "string", "format": "date", "description": "تاریخ انتشار در پلتفرم" }, "availability_regions": { "type": "array", "items": { "type": "string" }, "description": "مناطق دسترسی (ISO 3166-1 alpha-2)" }, "is_premium": { "type": "boolean", "description": "نیاز به اشتراک پرمیوم" }, "series_info": { "type": "object", "properties": { "total_seasons": { "type": "integer" }, "total_episodes": { "type": "integer" }, "current_season": { "type": "integer" }, "episode_runtime": { "type": "integer" } }, "description": "اطلاعات سریال (در صورت وجود)" }, "seo": { "type": "object", "properties": { "meta_title": { "type": "string", "maxLength": 60, "description": "عنوان صفحه برای سئو" }, "meta_description": { "type": "string", "maxLength": 160, "description": "توضیحات متا" } } }, "created_at": { "type": "string", "format": "date-time" }, "updated_at": { "type": "string", "format": "date-time" } }}
۴.۱ نمونهٔ JSON واقعی
json
{ "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890", "content_type": "movie", "title_fa": "تلقین", "title_original": "Inception", "year": 2010, "country": ["USA", "UK"], "genres": ["علمی-تخیلی", "اکشن", "هیجانانگیز"], "directors": [ { "name_fa": "کریستوفر نولان", "name_en": "Christopher Nolan" } ], "cast": [ { "name_fa": "لئوناردو دیکاپریو", "name_en": "Leonardo DiCaprio", "character": "Dom Cobb" }, { "name_fa": "جوزف گوردون-لویت", "name_en": "Joseph Gordon-Levitt", "character": "Arthur" }, { "name_fa": "الن پیج", "name_en": "Elliot Page", "character": "Ariadne" } ], "runtime_minutes": 148, "age_rating": "PG-13", "language_original": "English", "subtitles": ["Persian", "English", "Arabic", "Turkish"], "synopsis_short": "دزدی حرفهای که با نفوذ به رویاهای دیگران اسرار را میدزدد، اینبار باید ایدهای را در ذهن کسی بکارد.", "synopsis_long": "دام کاب یک دزد ماهر است اما نه از نوع معمولی. تخصص او دزدیدن اسرار ارزشمند از اعماق ناخودآگاه افراد در حالت رویاست. این توانایی نادر او را به بازیگری ارزشمند در دنیای جاسوسی صنعتی تبدیل کرده، اما همزمان او را به یک فراری بینالمللی بدل کرده و همه چیزی که دوست داشته را از او گرفته است. حال به کاب فرصتی برای بازخرید داده میشود. یک کار نهایی میتواند زندگیاش را به او بازگرداند، اما تنها اگر بتواند کاری غیرممکن انجام دهد: «تلقین» — کاشتن یک ایده در ذهن کسی به جای دزدیدن آن. اگر موفق شوند، جنایت کاملی رقم خواهد خورد. اما هیچ برنامهریزیای نمیتواند تیم را برای رویارویی با دشمن خطرناکی آماده کند که ظاهراً هر حرکت آنها را پیشبینی میکند.", "tagline": "ذهنت صحنهٔ جرم است", "tags": ["رویا", "علمی-تخیلی", "کریستوفر نولان", "دیکاپریو", "ذهن", "اکشن پیچیده", "بلاکباستر", "سفر ذهنی"], "images": { "hero": "https://cdn.platform.com/content/inception/hero_1920x1080.webp", "poster": "https://cdn.platform.com/content/inception/poster_1080x1620.webp", "poster_2x": "https://cdn.platform.com/content/inception/poster_2160x3240.webp", "thumbnail": "https://cdn.platform.com/content/inception/thumb_360x540.webp", "thumbnail_mobile": "https://cdn.platform.com/content/inception/thumb_300x450.webp" }, "trailer_url": "https://www.youtube.com/embed/YoHD9XEInc0", "partner_logos": [ { "name": "Warner Bros", "logo_url": "https://cdn.platform.com/logos/warner_bros.svg", "license_type": "featured" } ], "content_rating_score": 8.8, "rating_count": 2456789, "publish_date": "2024-01-15", "availability_regions": ["IR", "AE", "TR", "AF"], "is_premium": false, "seo": { "meta_title": "فیلم تلقین (Inception) 2010 با زیرنویس فارسی", "meta_description": "تماشای آنلاین فیلم علمی-تخیلی تلقین ساخته کریستوفر نولان با بازی لئوناردو دیکاپریو. دزدی از رویاها و کاشتن ایده در ذهن." }, "created_at": "2024-01-10T10:00:00Z", "updated_at": "2024-12-23T14:30:00Z"}
🎬 ۵. سه نمونهٔ کامل محتوا
نمونه ۱: فیلم درام — شبانهٔ تهران
yaml
شناسه: Sample_1_Film_Drama
عنوان_فارسی: "شبانهٔ تهران"عنوان_اصلی: "Nocturne in Tehran"سال: 2023کشور: ایران، فرانسهژانر: درام، علمی-تخیلیکارگردان: عباس کیارستمی (فرضی)بازیگران: تارا عباسی، شهاب حسینیمدت: 127 دقیقهدرجهٔ_سنی: +15
خلاصه_کوتاه: | در شبهای تهران، زنی جوان به دنبال هویت گمشدهاش در کوچههای تاریک شهر سرگردان میشود.
خلاصه_بلند: | در شبی بارانی در تهران، «لیلا» با یک تماس تلفنی مرموز از خواب بیدار میشود. صدایی که ادعا میکند خودِ اوست، او را به سفری در خیابانهای شب تهران میکشاند. از میدان ولیعصر تا کوچههای قدیمی شمیران، هر قدم او را به لایهای عمیقتر از گذشتهای فراموششده میبرد. «شبانهٔ تهران» روایتی سینمایی از جستجوی هویت در شهری است که هر گوشهاش یک راز دارد. کیارستمی با زبان تصویری منحصر بهفردش، ما را به سفری دعوت میکند که مرز بین واقعیت و رویا در آن محو میشود.
خط_تبلیغاتی: "شب شاهد رازهای پنهان است"
تگها: - درام_روانشناختی - سینمای_ایران - شب_تهران - رازآلود - زنان_قوی - هویت - سینمای_هنری
CTA_پیشنهادی: - اصلی: "همین حالا تماشا کنید" - ثانویه: "افزودن به لیست من" - سوم: "تریلر را ببینید"
مشخصات_تصویر: - poster: 1080×1620px, WebP - ترکیب_بصری: زن در نیمرخ، نورهای نئون شهری، باران - پالت_رنگ: آبی تیره، صورتی نئون، خاکستری
نمونه ۲: سریال تاریخی — شوگان
yaml
شناسه: Sample_2_Series_Historical
عنوان_فارسی: "شوگان"عنوان_اصلی: "Shōgun"سال: 2024کشور: آمریکا، ژاپنژانر: درام، تاریخی، حماسیکارگردان: راشل کوندو، فردریک تویبازیگران: هیرویوکی سانادا، کوزمو جارویس، آنا ساواییفصلها: 1 فصل (10 قسمت)مدت_هر_قسمت: 55-70 دقیقهدرجهٔ_سنی: +18
خلاصه_کوتاه: | حماسهای از جنگ، قدرت و خیانت در ژاپن قرن هفدهم؛ جایی که یک دریانورد انگلیسی سرنوشت امپراتوری را تغییر میدهد.
خلاصه_بلند: | سال ۱۶۰۰ میلادی. ژاپن در آستانهٔ جنگ داخلی است. لرد «یوشی توراناگا»، یکی از پنج حاکم قدرتمند، با توطئهای مرگبار از سوی رقبایش روبروست. در همین زمان، کشتی هلندی «اراسموس» با سرنشینان نیمهجان به سواحل ژاپن میرسد. «جان بلکتورن»، ناخدای انگلیسی این کشتی، ناخواسته وارد بازیهای سیاسی میشود که سرنوشت امپراتوری را تعیین خواهد کرد. او که به «آنجین» (راهنما) معروف میشود، با فرهنگی آشنا میشود که قوانین متفاوتی برای زندگی، مرگ و افتخار دارد. «شوگان» بازسازی شاهکار ادبی جیمز کلاول است که با بازیگری درخشان و جزئیات بینظیر تاریخی، شما را به قلب ژاپن فئودالی میبرد.
خط_تبلیغاتی: "در جنگ قدرت، تنها یک نفر شوگان میشود"
تگها: - سامورایی - ژاپن_باستان - درام_سیاسی - حماسی - جنگ_قدرت - تاریخی - سریال_2024 - پرطرفدار
CTA_پیشنهادی: - اصلی: "شروع تماشا" - ثانویه: "قسمت اول رایگان" - سوم: "به لیست اضافه کن"
مشخصات_تصویر: - poster: 1080×1620px, WebP - ترکیب_بصری: سامورایی با زره، منظره کوهستانی ژاپن، غروب - پالت_رنگ: قرمز خون، طلایی، مشکی
نمونه ۳: انیمیشن خانوادگی — یانو و جنگل رازمند
yaml
شناسه: Sample_3_Animation_Family
عنوان_فارسی: "یانو و جنگل رازمند"عنوان_اصلی: "Yano and the Mystical Jungle"سال: 2023کشور: ژاپن، کره جنوبیژانر: انیمیشن، ماجراجویی، فانتزی، خانوادگیاستودیو: Studio Auroraکارگردان: ساتوشی ناکامورامدت: 95 دقیقهدرجهٔ_سنی: بدون محدودیت (G)
خلاصه_کوتاه: | یانو، کرگدن کوچولوی شجاع، با دوستانش برای نجات جنگل جادویی از دست دزدان تلاش میکند.
خلاصه_بلند: | در قلب جنگل بزرگ و رازمند، «یانو» یک کرگدن کوچک و کنجکاو زندگی میکند. وقتی والدینش برای یافتن «چشمهٔ زندگی» به سفری دور میروند، یانو تنها میماند. اما تنهایی او طولی نمیکشد! او با «بابا درخت»، پیرترین و خردمندترین درخت جنگل، و «رنگینا» و «نوری»، دو پروانهٔ جادویی، دوست میشود. وقتی گروهی دزد میخواهند «کریستال قلب جنگل» را بدزدند، یانو و دوستانش باید با هم متحد شوند. این انیمیشن زیبا با الهام از سبک استودیو جیبلی، داستانی دلنشین از دوستی، شجاعت و حفاظت از طبیعت روایت میکند. ماجرایی برای تمام سنین که قلبها را گرم میکند.
خط_تبلیغاتی: "دوستی میتواند جنگلها را نجات دهد"
تگها: - انیمیشن_ژاپنی - خانوادگی - ماجراجویی - طبیعت - دوستی - کودکانه - جادویی - استودیو_جیبلی
CTA_پیشنهادی: - اصلی: "تماشا با خانواده" - ثانویه: "مناسب برای کودکان" - سوم: "دانلود برای آفلاین"
مشخصات_تصویر: - poster: 1080×1620px, WebP - ترکیب_بصری: کرگدن نارنجی، جنگل رنگارنگ، پروانهها - پالت_رنگ: سبز زمردی، نارنجی، زرد، صورتی
🖼️ ۶. پرومپتهای تولید کاور بصری
۶.۱ پنج پرومپت تصویری (Image Generation)
پرومپت ۱: فیلم درام معاصر ایرانی
فارسی:کاور سینمایی برای فیلم درام ایرانی؛ زن جوان ۲۵ ساله در نیمرخ، چهرهای تأملبرانگیز و عمیق، چشمان روشن، پوست گندمی، موهای مشکی رها در باد؛ پسزمینه: خیابان شبانهٔ تهران با نورهای نئون صورتی و آبی، باران ملایم و بوکههای نورانی، معماری مدرن شهری در تاریکی؛ نورپردازی: نور لبهای گرم از چپ، سایههای دراماتیک، cinematic mood؛ فضا برای تایپوگرافی فارسی در پایین (یکسوم پایینی خالی)؛ نسبت 2:3 (1080×1620px)؛ کیفیت: 8K, photorealistic
English (Midjourney):Cinematic movie poster for contemporary Iranian drama, young woman 25yo in profile view, contemplative deep expression, bright intelligent eyes, olive skin, flowing black hair; Background: Tehran nighttime street with pink and blue neon lights, light rain with luminous bokeh, modern urban architecture in darkness; Lighting: warm rim light from left, dramatic shadows, cinematic mood, film noir aesthetic; Bottom 1/3 reserved for Persian typography; Aspect ratio 2:3; --ar 2:3 --s 750 --v 6.1 --style raw
پرومپت ۲: سریال تاریخی سامورایی
فارسی:کاور حماسی برای سریال تاریخی ژاپنی؛ سامورایی با زره سنتی مشکی و طلایی، نگاه قاطع و باوقار، شمشیر کاتانا در دست؛ پسزمینه: کوههای ژاپن در غروب، ابرهای دراماتیک قرمز و نارنجی، شکوفههای گیلاس در حال ریختن؛ نورپردازی: نور طلایی غروب از پشت (backlit)، سایهروشن قوی، حماسی و باشکوه؛ عناصر تزئینی ژاپنی در حاشیه؛ نسبت 2:3؛ سبک: cinematic, epic, historical painting
English (Midjourney):Epic series poster for Japanese historical drama, samurai warrior in traditional black and gold armor, determined dignified gaze, katana sword in hand; Background: Japanese mountains at sunset, dramatic red and orange clouds, falling cherry blossoms; Lighting: golden backlit sunset, strong chiaroscuro, epic and majestic; Traditional Japanese decorative elements on borders; --ar 2:3 --s 850 --v 6.1
پرومپت ۳: انیمیشن خانوادگی
فارسی:کاور انیمیشن کودکانه سبک استودیو جیبلی؛ کرگدن کوچولوی نارنجی و کرِم با چشمان بزرگ و درخشان، لبخند شاد و دوستانه؛ در وسط جنگل جادویی سرسبز با درختان غولپیکر دارای چهره مهربان، پروانههای رنگارنگ (آبی، صورتی، زرد) در پرواز، قارچهای درخشان، نورهای جادویی معلق در هوا؛ نورپردازی: نور نرم و گرم روز، رنگهای شاد و اشباعشده؛ سبک: Studio Ghibli anime, whimsical, colorful, family-friendly; نسبت 2:3
English (Midjourney):Children's animation poster Ghibli style, cute small orange and cream baby rhino with big sparkling eyes, joyful friendly smile; In magical lush green forest with giant trees having kind faces, colorful butterflies (blue, pink, yellow) flying, glowing mushrooms, magical lights floating; Lighting: soft warm daylight, happy saturated colors; Style: Studio Ghibli anime, whimsical, colorful, family-friendly; --ar 2:3 --s 750 --niji 6
پرومپت ۴: فیلم علمی-تخیلی
فارسی:کاور سینمایی برای فیلم علمی-تخیلی؛ قهرمان مرد در لباس فضایی آیندهنگرانه، ایستاده در شهر نئونی سایبرپانک، ساختمانهای بلند با تبلیغات هولوگرافیک، باران و انعکاس نورها در خیابان خیس؛ پالت رنگ: آبی الکتریک، بنفش، صورتی نئون، سیاه؛ نورپردازی: high contrast، rim light آبی، bloom سینمایی؛ فضا برای عنوان فارسی در بالا؛ نسبت 16:9 (برای Hero Banner)؛ کیفیت: 8K, photorealistic, cinematic
English (Midjourney):Cinematic sci-fi movie poster, male protagonist in futuristic space suit, standing in neon cyberpunk city, tall buildings with holographic advertisements, rain and light reflections on wet streets; Color palette: electric blue, purple, neon pink, black; Lighting: high contrast, blue rim light, cinematic bloom; Space for Persian title at top; Aspect 16:9; --ar 16:9 --s 800 --v 6.1 --style raw
پرومپت ۵: مستند طبیعت
فارسی:کاور مستند طبیعت با کیفیت بالا؛ پلنگ ایرانی در حالت شکار، پسزمینه کوههای البرز در غروب، علفزارهای طلایی، آسمان بنفش و نارنجی دراماتیک؛ نورپردازی: golden hour، نور طبیعی گرم، جزئیات بالا در خز حیوان؛ احساس: قدرتمند، طبیعی، مستندگونه؛ تایپوگرافی مینیمال در پایین؛ نسبت 2:3؛ سبک: National Geographic, wildlife photography, 8K
English (Midjourney):Nature documentary cover high quality, Persian leopard in hunting stance, Alborz mountains background at sunset, golden grasslands, dramatic purple and orange sky; Lighting: golden hour, warm natural light, high detail in animal fur; Mood: powerful, natural, documentary; Minimal typography at bottom; --ar 2:3 --s 900 --v 6.1 --style raw
✍️ ۷. پرومپتهای تولید متن تبلیغاتی
۷.۱ پنج پرومپت کپیرایتینگ
پرومپت ۱: خلاصه کوتاه (Synopsis Short)
نقش: یک کپیرایتر حرفهای سینمایی هستی.
وظیفه: یک خلاصه کوتاه ۱-۲ خطی (حداکثر ۲۵ کلمه) برای فیلم زیر بنویس که:- فوراً توجه را جلب کند- ژانر فیلم را منتقل کند- حس کنجکاوی ایجاد کند- از کلمات تکراری پرهیز شود- زبان فارسی روان و جذاب باشد
اطلاعات فیلم:- عنوان: [نام فیلم]- ژانر: [ژانر]- موضوع اصلی: [خلاصه داستان]
خروجی: تنها خلاصه کوتاه، بدون توضیح اضافی.
پرومپت ۲: خلاصه بلند (Synopsis Long)
نقش: منتقد سینمایی و کپیرایتر با تجربه در نوشتن برای پلتفرمهای استریمینگ هستی.
وظیفه: یک توضیح بلند ۸۰-۱۶۰ کلمهای برای فیلم/سریال زیر بنویس که:- پاراگراف اول: hook قوی برای جذب مخاطب (۲-۳ جمله)- پاراگراف دوم: معرفی شخصیتها و تعارض اصلی (۳-۴ جمله)- پاراگراف سوم: ارزش تماشا و ویژگیهای برجسته (۲-۳ جمله)- از spoiler پرهیز شود- لحن متناسب با ژانر باشد (درام: احساسی، اکشن: هیجانانگیز، کمدی: سبک)- زبان فارسی ادبی اما قابل فهم
اطلاعات: [دادههای فیلم]
خروجی: متن نهایی با پاراگرافبندی مناسب.
پرومپت ۳: خط تبلیغاتی (Tagline)
نقش: متخصص برندینگ سینمایی و نویسنده شعار تبلیغاتی.
وظیفه: ۵ خط تبلیغاتی (۳-۸ کلمه) برای فیلم/سریال زیر پیشنهاد بده که:- به یادماندنی و ریتمیک باشد- احساس ژانر را منتقل کند- قابل استفاده روی پوستر باشد- از کلیشهها پرهیز شود- حداقل یکی حاوی استعاره یا تضاد باشد
اطلاعات: - نام: [نام]- ژانر: [ژانر]- تم اصلی: [تم]
خروجی: ۵ گزینه با شمارهگذاری.
پرومپت ۴: تگهای محتوا (Tags)
نقش: متخصص سئو و دستهبندی محتوای سرگرمی.
وظیفه: ۱۰-۱۵ تگ فارسی برای فیلم/سریال زیر پیشنهاد بده که:- شامل ژانرها باشد- شامل تمها و موضوعات باشد- شامل نام کارگردان/بازیگران معروف باشد- شامل سال و کشور باشد- قابل جستجو توسط کاربر ایرانی باشد- ترکیبی از تگهای عمومی و خاص باشد
فرمت: hashtag style بدون # (مثال: اکشن، فیلم_2024، نولان)
اطلاعات: [دادههای فیلم]
پرومپت ۵: متن CTA (Call-to-Action)
نقش: متخصص UX Writing و تبدیل (Conversion).
وظیفه: ۵ متن CTA برای دکمههای پلتفرم استریمینگ پیشنهاد بده:- ۲ گزینه برای اقدام اصلی (تماشا/پخش)- ۲ گزینه برای اقدام ثانویه (ذخیره/لیست)- ۱ گزینه برای اشتراکگذاری
شرایط:- حداکثر ۴ کلمه برای هر CTA- فعل امری استفاده شود- حس فوریت یا ارزش ایجاد کند- متناسب با نوع محتوا باشد (فیلم/سریال/مستند)
نوع محتوا: [نوع]ویژگی خاص: [رایگان/پرمیوم/جدید]
💬 ۸. سیستم چت ادمین (Admin Chat Widget)
طبق cloud.google.com و business.adobe.com، یکپارچهسازی چت هوشمند و پشتیبانی فوری از عوامل کلیدی موفقیت پلتفرمهای سرگرمی است.
۸.۱ مشخصات کامپوننت
yaml
نام: FloatingChatWidget_v2.0موقعیت: Fixed، گوشهٔ پایین-چپ (RTL)، z-index: 9999
حالات: collapsed: آیکون دایرهای 60×60px expanded: پنجره 380×550px (موبایل: 100vw × 70vh) loading: انیمیشن typing dots offline: فرم تماس
رنگبندی: header: گرادیان #1a1a2e → #16213e accent: #e94560 online_indicator: #2ecc71 offline_indicator: #95a5a6 المانها: header: - عنوان: "پشتیبانی سریع" - وضعیت: "🟢 آنلاین" یا "⚪ آفلاین" - دکمه بستن پیامها: - آواتار + متن + زمان - typing indicator - auto-scroll اقدامهای سریع: - "راهنمای اشتراک" - "گزارش مشکل" - "درخواست فیلم" - "تماس مستقیم" ورودی: - textarea با placeholder - دکمه ارسال - اتصال فایل (اختیاری)
۸.۲ کد پیادهسازی کامل
html
<!-- Chat Widget HTML --><div id="chat-widget" class="chat-widget" dir="rtl"> <!-- Toggle Button --> <button id="chat-toggle" class="chat-toggle" aria-label="باز کردن چت پشتیبانی"> <svg class="chat-icon" viewBox="0 0 24 24" fill="currentColor"> <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"/> <circle cx="12" cy="10" r="1.5"/> <circle cx="8" cy="10" r="1.5"/> <circle cx="16" cy="10" r="1.5"/> </svg> <span class="notification-dot"></span> </button>
<!-- Expanded Chat Window --> <div id="chat-window" class="chat-window hidden"> <!-- Header --> <div class="chat-header"> <div class="chat-header-info"> <div class="chat-avatar"> <img src="/assets/support-avatar.webp" alt="پشتیبانی" loading="lazy"> <span class="status-indicator online"></span> </div> <div class="chat-header-text"> <h4>پشتیبانی سریع</h4> <span class="chat-status" id="chat-status">🟢 آنلاین — پاسخ فوری</span> </div> </div> <button id="chat-close" class="chat-close" aria-label="بستن"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> </svg> </button> </div>
<!-- Messages Container --> <div id="chat-messages" class="chat-messages"> <!-- Welcome Message --> <div class="message bot"> <div class="message-content"> <p>سلام! 👋 به پشتیبانی خوش آمدید.</p> <p>چطور میتونم کمکتون کنم؟</p> </div> <span class="message-time">همین الان</span> </div> </div>
<!-- Quick Actions --> <div class="quick-actions" id="quick-actions"> <button class="quick-action" data-action="subscription">💳 راهنمای اشتراک</button> <button class="quick-action" data-action="report">🐛 گزارش مشکل</button> <button class="quick-action" data-action="request">🎬 درخواست فیلم</button> <button class="quick-action" data-action="contact">📞 تماس مستقیم</button> </div>
<!-- Input Area --> <div class="chat-input-area"> <textarea id="chat-input" placeholder="پیام خود را بنویسید..." rows="1" maxlength="500" ></textarea> <button id="chat-send" class="chat-send" aria-label="ارسال"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/> </svg> </button> </div>
<!-- Offline Form (Hidden by default) --> <div id="offline-form" class="offline-form hidden"> <h5>در حال حاضر آفلاین هستیم</h5> <p>پیام بگذارید، به زودی پاسخ میدهیم:</p> <form id="contact-form"> <input type="text" name="name" placeholder="نام شما" required> <input type="email" name="email" placeholder="ایمیل شما" required> <select name="subject" required> <option value="">موضوع را انتخاب کنید</option> <option value="subscription">اشتراک و پرداخت</option> <option value="technical">مشکل فنی</option> <option value="content">درخواست محتوا</option> <option value="other">سایر</option> </select> <textarea name="message" placeholder="پیام شما..." rows="3" required></textarea> <button type="submit" class="submit-btn">ارسال پیام</button> </form> <div id="ticket-result" class="ticket-result hidden"></div> </div>
<!-- External Links --> <div class="external-links"> <a href="https://t.me/FilmPlatformSupport" target="_blank" rel="noopener" class="external-link telegram"> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.248-.024c-.106.024-1.793 1.139-5.062 3.345-.479.329-.913.489-1.302.481-.428-.009-1.252-.242-1.865-.44-.751-.245-1.349-.374-1.297-.789.027-.216.324-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.015 3.333-1.386 4.025-1.627 4.477-1.635.099-.002.321.023.465.141.121.1.154.234.17.332.015.099.035.317.02.489z"/></svg> تلگرام </a> <a href="https://wa.me/989123456789" target="_blank" rel="noopener" class="external-link whatsapp"> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.771-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824z"/></svg> واتساپ </a> </div> </div></div>
css
/* ===== Chat Widget Styles ===== */.chat-widget { position: fixed; bottom: 20px; left: 20px; z-index: 9999; font-family: 'Vazirmatn', sans-serif;}
.chat-toggle { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #e94560 0%, #d63447 100%); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(233, 69, 96, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative;}
.chat-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(233, 69, 96, 0.5);}
.chat-toggle .chat-icon { width: 28px; height: 28px; color: #ffffff;}
.notification-dot { position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; background: #2ecc71; border-radius: 50%; border: 2px solid #ffffff; animation: pulse 2s infinite;}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; }}
.chat-window { position: absolute; bottom: 80px; left: 0; width: 380px; height: 550px; background: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; overflow: hidden; animation: slideUp 0.3s ease;}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}
.chat-window.hidden { display: none;}
.chat-header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); padding: 16px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;}
.chat-header-info { display: flex; align-items: center; gap: 12px;}
.chat-avatar { position: relative; width: 44px; height: 44px;}
.chat-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.2);}
.status-indicator { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #16213e;}
.status-indicator.online { background: #2ecc71;}
.status-indicator.offline { background: #95a5a6;}
.chat-header-text h4 { color: #ffffff; font-size: 16px; font-weight: 700; margin: 0 0 4px 0;}
.chat-status { color: rgba(255, 255, 255, 0.8); font-size: 12px;}
.chat-close { background: rgba(255, 255, 255, 0.1); border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s;}
.chat-close:hover { background: rgba(255, 255, 255, 0.2);}
.chat-close svg { width: 18px; height: 18px; fill: #ffffff;}
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #f8f9fa;}
.message { max-width: 85%; animation: fadeIn 0.3s ease;}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); }}
.message.bot { align-self: flex-start;}
.message.user { align-self: flex-end;}
.message-content { padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.5;}
.message.bot .message-content { background: #ffffff; color: #2c3e50; border-bottom-right-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}
.message.user .message-content { background: linear-gradient(135deg, #e94560 0%, #d63447 100%); color: #ffffff; border-bottom-left-radius: 4px;}
.message-content p { margin: 0;}
.message-content p + p { margin-top: 8px;}
.message-time { font-size: 11px; color: #95a5a6; display: block; margin-top: 4px;}
.message.user .message-time { text-align: left;}
.quick-actions { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px; background: #ffffff; border-top: 1px solid #e9ecef;}
.quick-action { padding: 8px 14px; background: #f1f3f4; border: 1px solid #dee2e6; border-radius: 20px; font-size: 12px; font-family: 'Vazirmatn', sans-serif; cursor: pointer; transition: all 0.2s; white-space: nowrap;}
.quick-action:hover { background: #e94560; color: #ffffff; border-color: #e94560;}
.chat-input-area { padding: 12px 16px; display: flex; gap: 10px; background: #ffffff; border-top: 1px solid #e9ecef;}
.chat-input-area textarea { flex: 1; padding: 12px 16px; border: 1px solid #dee2e6; border-radius: 24px; font-family: 'Vazirmatn', sans-serif; font-size: 14px; resize: none; max-height: 100px; line-height: 1.4;}
.chat-input-area textarea:focus { outline: none; border-color: #e94560; box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);}
.chat-send { width: 44px; height: 44px; background: linear-gradient(135deg, #e94560 0%, #d63447 100%); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s;}
.chat-send:hover { transform: scale(1.05);}
.chat-send svg { width: 20px; height: 20px; fill: #ffffff; transform: rotate(180deg);}
.external-links { padding: 12px 16px; display: flex; gap: 10px; background: #f8f9fa; border-top: 1px solid #e9ecef;}
.external-link { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s;}
.external-link svg { width: 18px; height: 18px;}
.external-link.telegram { background: #0088cc; color: #ffffff;}
.external-link.telegram:hover { background: #006699;}
.external-link.whatsapp { background: #25d366; color: #ffffff;}
.external-link.whatsapp:hover { background: #1da851;}
/* Offline Form */.offline-form { padding: 20px; background: #f8f9fa;}
.offline-form.hidden { display: none;}
.offline-form h5 { margin: 0 0 8px 0; color: #2c3e50; font-size: 16px;}
.offline-form p { margin: 0 0 16px 0; color: #6c757d; font-size: 13px;}
.offline-form form { display: flex; flex-direction: column; gap: 12px;}
.offline-form input,.offline-form select,.offline-form textarea { padding: 12px; border: 1px solid #dee2e6; border-radius: 8px; font-family: 'Vazirmatn', sans-serif; font-size: 14px;}
.offline-form input:focus,.offline-form select:focus,.offline-form textarea:focus { outline: none; border-color: #e94560;}
.submit-btn { padding: 12px; background: #e94560; color: #ffffff; border: none; border-radius: 8px; font-family: 'Vazirmatn', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s;}
.submit-btn:hover { background: #d63447;}
/* Mobile Responsive */@media (max-width: 480px) { .chat-widget { bottom: 10px; left: 10px; right: 10px; }
.chat-window { width: calc(100vw - 20px); height: 70vh; bottom: 75px; left: 0; right: 0; border-radius: 16px 16px 0 0; }
.chat-toggle { width: 56px; height: 56px; }}
javascript
// Chat Widget JavaScriptclass ChatWidget { constructor() { this.isOpen = false; this.isOnline = true; this.socket = null; this.init(); }
init() { this.elements = { toggle: document.getElementById('chat-toggle'), window: document.getElementById('chat-window'), close: document.getElementById('chat-close'), messages: document.getElementById('chat-messages'), input: document.getElementById('chat-input'), send: document.getElementById('chat-send'), status: document.getElementById('chat-status'), quickActions: document.getElementById('quick-actions'), offlineForm: document.getElementById('offline-form'), contactForm: document.getElementById('contact-form') };
this.bindEvents(); this.checkOnlineStatus(); }
bindEvents() { this.elements.toggle.addEventListener('click', () => this.toggle()); this.elements.close.addEventListener('click', () => this.toggle()); this.elements.send.addEventListener('click', () => this.sendMessage()); this.elements.input.addEventListener('keypress', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.sendMessage(); } });
// Auto-resize textarea this.elements.input.addEventListener('input', () => { this.elements.input.style.height = 'auto'; this.elements.input.style.height = Math.min(this.elements.input.scrollHeight, 100) + 'px'; });
// Quick actions document.querySelectorAll('.quick-action').forEach(btn => { btn.addEventListener('click', () => this.handleQuickAction(btn.dataset.action)); });
// Offline form if (this.elements.contactForm) { this.elements.contactForm.addEventListener('submit', (e) => this.handleFormSubmit(e)); } }
toggle() { this.isOpen = !this.isOpen; if (this.isOpen) { this.elements.window.classList.remove('hidden'); this.elements.input.focus(); } else { this.elements.window.classList.add('hidden'); } }
sendMessage() { const message = this.elements.input.value.trim(); if (!message) return;
this.addMessage(message, 'user'); this.elements.input.value = ''; this.elements.input.style.height = 'auto';
// Simulate response (replace with actual API call) this.showTypingIndicator(); setTimeout(() => { this.hideTypingIndicator(); this.handleBotResponse(message); }, 1500); }
addMessage(text, sender, isHTML = false) { const messageEl = document.createElement('div'); messageEl.className = `message ${sender}`; const time = new Date().toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
messageEl.innerHTML = ` <div class="message-content"> ${isHTML ? text : `<p>${text}</p>`} </div> <span class="message-time">${time}</span> `;
this.elements.messages.appendChild(messageEl); this.scrollToBottom(); }
showTypingIndicator() { const indicator = document.createElement('div'); indicator.className = 'message bot typing-indicator'; indicator.id = 'typing'; indicator.innerHTML = ` <div class="message-content"> <div class="typing-dots"> <span></span><span></span><span></span> </div> </div> `; this.elements.messages.appendChild(indicator); this.scrollToBottom(); }
hideTypingIndicator() { const indicator = document.getElementById('typing'); if (indicator) indicator.remove(); }
handleQuickAction(action) { const actions = { subscription: 'میخوام راجع به انواع اشتراکها بدونم', report: 'میخوام یک مشکل رو گزارش بدم', request: 'میخوام یک فیلم/سریال درخواست بدم', contact: 'میخوام با پشتیبانی صحبت کنم' };
const message = actions[action] || action; this.addMessage(message, 'user'); this.showTypingIndicator(); setTimeout(() => { this.hideTypingIndicator(); this.handleBotResponse(message, action); }, 1000); }
handleBotResponse(userMessage, action = null) { const responses = { subscription: `<p>ما سه نوع اشتراک داریم:</p> <p>🥉 <strong>برنزی:</strong> ماهانه ۴۹,۰۰۰ تومان</p> <p>🥈 <strong>نقرهای:</strong> ماهانه ۸۹,۰۰۰ تومان</p> <p>🥇 <strong>طلایی:</strong> ماهانه ۱۲۹,۰۰۰ تومان</p> <p>کدوم رو میخواید؟</p>`, report: `<p>متوجه شدم. لطفاً مشکل رو توضیح بدید:</p> <p>• چه صفحهای بودید؟</p> <p>• چه اتفاقی افتاد؟</p> <p>• از چه دستگاهی استفاده میکنید؟</p>`, request: `<p>حتماً! 🎬</p> <p>اسم فیلم یا سریال مورد نظرتون رو بگید تا بررسی کنیم.</p>`, contact: `<p>میتونید از طریق لینکهای زیر مستقیم با ما در ارتباط باشید:</p> <p>📱 تلگرام: @FilmPlatformSupport</p> <p>📞 واتساپ: ۰۹۱۲-۳۴۵-۶۷۸۹</p>` };
const defaultResponse = 'ممنون از پیامتون! همکاران ما به زودی پاسخ میدن. ⏳'; this.addMessage(responses[action] || defaultResponse, 'bot', !!responses[action]); }
handleFormSubmit(e) { e.preventDefault(); const formData = new FormData(e.target); const ticketId = 'TKT-' + Math.random().toString(36).substr(2, 8).toUpperCase(); // Show ticket result const resultEl = document.getElementById('ticket-result'); resultEl.innerHTML = ` <p>✅ پیام شما با موفقیت ثبت شد!</p> <p><strong>شماره تیکت: ${ticketId}</strong></p> <p>به زودی از طریق ایمیل پاسخ میدهیم.</p> `; resultEl.classList.remove('hidden'); e.target.reset(); }
checkOnlineStatus() { // Check business hours (9 AM - 11 PM Tehran time) const now = new Date(); const tehranHour = new Date(now.toLocaleString('en-US', { timeZone: 'Asia/Tehran' })).getHours(); this.isOnline = tehranHour >= 9 && tehranHour < 23; this.updateOnlineStatus(); // Re-check every minute setInterval(() => this.checkOnlineStatus(), 60000); }
updateOnlineStatus() { const indicator = document.querySelector('.status-indicator'); if (this.isOnline) { this.elements.status.textContent = '🟢 آنلاین — پاسخ فوری'; indicator?.classList.add('online'); indicator?.classList.remove('offline'); this.elements.quickActions?.classList.remove('hidden'); this.elements.offlineForm?.classList.add('hidden'); } else { this.elements.status.textContent = '⚪ آفلاین — پیام بگذارید'; indicator?.classList.remove('online'); indicator?.classList.add('offline'); this.elements.quickActions?.classList.add('hidden'); this.elements.offlineForm?.classList.remove('hidden'); } }
scrollToBottom() { this.elements.messages.scrollTop = this.elements.messages.scrollHeight; }}
// Initialize on DOM readydocument.addEventListener('DOMContentLoaded', () => { window.chatWidget = new ChatWidget();});
۸.۳ گزینههای یکپارچهسازی
گزینه ۱: Telegram Bot
javascript
// Telegram Bot Configurationconst TELEGRAM_CONFIG = { bot_username: 'FilmPlatformSupportBot', support_chat_id: 'FilmPlatformSupport', direct_link: 'https://t.me/FilmPlatformSupport', bot_link: 'https://t.me/FilmPlatformSupportBot'};
// Open Telegramfunction openTelegramSupport() { window.open(TELEGRAM_CONFIG.direct_link, '_blank');}
گزینه ۲: Intercom
html
<!-- Intercom Widget --><script> window.intercomSettings = { api_base: "https://api-iam.intercom.io", app_id: "YOUR_APP_ID", name: userName, email: userEmail, user_id: uniqueUserId, language_override: "fa", custom_launcher_selector: '#chat-toggle' };</script><script async src="https://widget.intercom.io/widget/YOUR_APP_ID"></script>
گزینه ۳: Firebase Realtime Chat
javascript
// Firebase Configurationimport { initializeApp } from 'firebase/app';import { getFirestore, collection, addDoc, onSnapshot, query, orderBy } from 'firebase/firestore';
const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "your-project.firebaseapp.com", projectId: "your-project", storageBucket: "your-project.appspot.com", messagingSenderId: "123456789", appId: "1:123456789:web:abcdef"};
const app = initializeApp(firebaseConfig);const db = getFirestore(app);
// Send messageasync function sendChatMessage(userId, message) { await addDoc(collection(db, 'chats', userId, 'messages'), { text: message, sender: 'user', timestamp: new Date(), status: 'sent' });}
// Listen for responsesfunction listenForMessages(userId, callback) { const q = query( collection(db, 'chats', userId, 'messages'), orderBy('timestamp', 'asc') ); return onSnapshot(q, (snapshot) => { const messages = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); callback(messages); });}
⚖️ ۹. قوانین حقوقی و برندینگ
۹.۱ سیاست استفاده از لوگوها
markdown
# راهنمای استفاده از لوگوهای برند (Partner Badges)
## ۱. استفاده مجاز (با مجوز رسمی)
### الزامات:- ✅ قرارداد کتبی با صاحب برند- ✅ رعایت دستورالعملهای برند (Brand Guidelines)- ✅ نمایش در اندازه و رنگ مشخصشده- ✅ حفظ فاصلهٔ امن (Safe Zone) اطراف لوگو
### نحوه نمایش:- اندازه: حداکثر 150px ارتفاع- موقعیت: گوشه راست-بالای کاور یا Header- فاصله امن: حداقل 16px از لبهها- پسزمینه: شفاف یا تطبیق با طراحی
---
## ۲. استفاده بدون مجوز رسمی (راهکارهای جایگزین)
### گزینه A: Featured Badgeبهجای لوگوی اصلی، از نشان طراحیشده استفاده کنید:
┌─────────────────────────────┐│ ⭐ Featured by Netflix ││ (text-only badge) │└─────────────────────────────┘
### گزینه B: Monochrome/Minimalist- استفاده از نسخهٔ تکرنگ (سفید یا خاکستری)- بدون رنگهای اصلی برند- با عبارت "Available on" یا "از مجموعه"
### گزینه C: Award/Rating Badgeنمایش جوایز و رتبهبندی بهجای لوگو:
🏆 برنده جایزه اسکار⭐ امتیاز 8.5 در IMDb🎬 انتخاب منتقدان
### گزینه D: Category Labelاستفاده از برچسب دستهبندی:
"محتوای ویژه" | "پیشنهاد سردبیر" | "جدیدترینها"
---
## ۳. موارد ممنوع
❌ استفاده از لوگو بدون مجوز و بدون جایگزین❌ تغییر رنگ، فرم یا نسبت لوگو❌ قرار دادن لوگو در زمینههای نامناسب❌ ایجاد تصور همکاری رسمی بدون داشتن آن❌ استفاده برای مقاصد تجاری مستقیم بدون اجازه
---
## ۴. بیانیهٔ حقوقی (Footer Disclaimer)
متن پیشنهادی برای درج در فوتر سایت:
"تمامی حقوق مادی و معنوی فیلمها، سریالها و محتوای ارائهشده متعلق به صاحبان و تولیدکنندگان اصلی آنهاست. این پلتفرم صرفاً ارائهدهندهٔ خدمات دسترسی و ترجمه میباشد. لوگوها و علائم تجاری نمایشدادهشده متعلق به شرکتهای مربوطه هستند."
---
## ۵. مستندسازی
برای هر لوگوی استفادهشده، اطلاعات زیر ثبت شود:- نام برند- نوع مجوز (official/licensed/featured)- تاریخ اعتبار مجوز- محدودیتهای استفاده- لینک به Brand Guidelines
🔍 ۱۰. سئو و بهینهسازی عملکرد
۱۰.۱ Meta Tags و Structured Data
html
<!-- Page Head --><head> <!-- Basic Meta --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SEO Title (max 60 chars) --> <title>فیلم تلقین (Inception) 2010 | تماشای آنلاین با زیرنویس فارسی</title> <!-- Meta Description (max 160 chars) --> <meta name="description" content="تماشای آنلاین فیلم علمی-تخیلی تلقین ساخته کریستوفر نولان با بازی لئوناردو دیکاپریو. دزدی از رویاها در کیفیت Full HD با زیرنویس فارسی."> <!-- Open Graph --> <meta property="og:title" content="فیلم تلقین (Inception) 2010"> <meta property="og:description" content="دزدی حرفهای که با نفوذ به رویاها اسرار میدزدد..."> <meta property="og:image" content="https://cdn.platform.com/content/inception/poster_1080x1620.webp"> <meta property="og:image:width" content="1080"> <meta property="og:image:height" content="1620"> <meta property="og:type" content="video.movie"> <meta property="og:url" content="https://platform.com/film/inception-2010"> <meta property="og:locale" content="fa_IR"> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="فیلم تلقین (Inception) 2010"> <meta name="twitter:description" content="تماشای آنلاین با زیرنویس فارسی"> <meta name="twitter:image" content="https://cdn.platform.com/content/inception/hero_1920x1080.webp"> <!-- Canonical --> <link rel="canonical" href="https://platform.com/film/inception-2010"> <!-- Alternate Languages --> <link rel="alternate" hreflang="fa" href="https://platform.com/fa/film/inception-2010"> <link rel="alternate" hreflang="en" href="https://platform.com/en/film/inception-2010"> <link rel="alternate" hreflang="x-default" href="https://platform.com/film/inception-2010"> <!-- Structured Data: VideoObject --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Movie", "name": "تلقین", "alternateName": "Inception", "description": "دزدی حرفهای که با نفوذ به رویاهای دیگران اسرار را میدزدد...", "image": "https://cdn.platform.com/content/inception/poster_1080x1620.webp", "datePublished": "2010-07-16", "duration": "PT148M", "contentRating": "PG-13", "director": { "@type": "Person", "name": "Christopher Nolan" }, "actor": [ { "@type": "Person", "name": "Leonardo DiCaprio" }, { "@type": "Person", "name": "Joseph Gordon-Levitt" } ], "genre": ["Sci-Fi", "Action", "Thriller"], "aggregateRating": { "@type": "AggregateRating", "ratingValue": "8.8", "ratingCount": "2456789", "bestRating": "10" }, "trailer": { "@type": "VideoObject", "name": "Inception Official Trailer", "embedUrl": "https://www.youtube.com/embed/YoHD9XEInc0", "thumbnailUrl": "https://cdn.platform.com/content/inception/trailer_thumb.webp", "uploadDate": "2010-05-10" } } </script></head>
۱۰.۲ بهینهسازی تصویر
html
<!-- Responsive Image with WebP --><picture> <source type="image/webp" srcset=" poster_360x540.webp 360w, poster_720x1080.webp 720w, poster_1080x1620.webp 1080w, poster_2160x3240.webp 2160w " sizes=" (max-width: 480px) 300px, (max-width: 768px) 360px, (max-width: 1200px) 540px, 1080px " > <source type="image/jpeg" srcset=" poster_360x540.jpg 360w, poster_1080x1620.jpg 1080w " > <img src="poster_1080x1620.jpg" alt="پوستر فیلم تلقین - لئوناردو دیکاپریو در نقش دام کاب" loading="lazy" decoding="async" width="1080" height="1620" ></picture>
۱۰.۳ چکلیست عملکرد (Core Web Vitals)
yaml
معیارهای_هدف: LCP (Largest Contentful Paint): < 2.5s FID (First Input Delay): < 100ms CLS (Cumulative Layout Shift): < 0.1
بهینهسازیها: تصاویر: - فرمت WebP با fallback به JPEG - Lazy loading برای تصاویر زیر fold - اندازههای responsive با srcset - حجم هر تصویر: Hero < 200KB, Poster < 150KB, Thumb < 50KB فونتها: - font-display: swap - Subset فونت فارسی (فقط کاراکترهای مورد نیاز) - Preload فونت اصلی CSS: - Critical CSS inline در <head> - Non-critical CSS با loading async JavaScript: - defer یا async برای اسکریپتهای غیرضروری - Code splitting برای صفحات مختلف CDN: - استفاده از Cloudflare یا AWS CloudFront - Cache headers مناسب - Gzip/Brotli compression
📅 ۱۱. زمانبندی پروژه (Roadmap)
┌─────────────────────────────────────────────────────────────────────────────┐│ زمانبندی پروژه - ۵ هفته │├─────────────────────────────────────────────────────────────────────────────┤│ ││ هفته ۱ ││ ───────────────────────────────────── ││ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░ ││ ││ ✓ تحلیل رقبا و پژوهش بازار ││ ✓ تعریف پرسونای مخاطب (۳ پرسونا) ││ ✓ معماری اطلاعات و ساختار محتوا ││ ✓ تعریف JSON Schema ││ ✓ جلسه Kickoff با تیم ││ ││ 📦 Milestone: Data Architecture Approved ││ │├─────────────────────────────────────────────────────────────────────────────┤│ ││ هفته ۲ ││ ───────────────────────────────────── ││ ░░░░░░░░░░░░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░ ││ ││ ✓ طراحی UI Kit در Figma ││ ✓ طراحی قالبهای کاور (Hero, Poster, Thumb, Tile) ││ ✓ تعریف CSS Specifications ││ ✓ طراحی Chat Widget ││ ✓ تست روی ۱۰ دستگاه مختلف ││ ││ 📦 Milestone: Design System Complete ││ │├─────────────────────────────────────────────────────────────────────────────┤│ ││ هفته ۳ ││ ───────────────────────────────────── ││ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓▓▓▓▓▓ ││ ││ ✓ تولید ۳۰ کاور نمونه با AI ││ ✓ نوشتن ۵۰ توضیح متنی (کوتاه + بلند) ││ ✓ تولید ۲۰ خط تبلیغاتی ││ ✓ ایجاد پایگاه داده اولیه ││ ✓ تست محتوا با گروه کوچک کاربران ││ ││ 📦 Milestone: Content Library Ready ││ │├─────────────────────────────────────────────────────────────────────────────┤│ ││ هفته ۴ ││ ───────────────────────────────────── ││ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓▓ ││ ││ ✓ پیادهسازی صفحه اصلی (Hero + Grid) ││ ✓ پیادهسازی صفحه جزئیات محتوا ││ ✓ یکپارچهسازی Chat Widget ││ ✓ اتصال به CMS ││ ✓ تستهای عملکردی اولیه ││ ││ 📦 Milestone: MVP Deployed ││ │├─────────────────────────────────────────────────────────────────────────────┤│ ││ هفته ۵ ││ ───────────────────────────────────── ││ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓▓ ││ ││ ✓ تست جامع (Functional, UI, Responsive) ││ ✓ تست دسترسیپذیری (Accessibility) ││ ✓ بهینهسازی عملکرد (Core Web Vitals) ││ ✓ اجرای A/B Test روی کاورها ││ ✓ مستندسازی نهایی ││ ✓ تحویل و آموزش تیم ││ ││ 📦 Milestone: Project Delivered ││ │└─────────────────────────────────────────────────────────────────────────────┘
📊 ۱۲. KPIs و تست A/B
yaml
معیارهای_کلیدی:
CTR_کاورها: هدف: 2-3% (Hero), 0.8-1.5% (Thumbnail) ابزار: Google Analytics 4, Mixpanel نرخ_تبدیل: هدف: 3-5% (بازدید → ثبتنام) هدف: 15-25% (ثبتنام رایگان → اشتراک پولی) زمان_تماشا: هدف: >20 دقیقه (سریال), >60 دقیقه (فیلم) نرخ_بازگشت: هدف: 25-35% (بازگشت روزانه) رضایت_چت: هدف: >4.5/5 امتیاز
─────────────────────────────────────
برنامه_A/B_Testing:
تست_۱ (هفته ۱-۲): نام: Cover_Style_Test متغیر_A: کاور با تایپوگرافی بزرگ متغیر_B: کاور با تایپوگرافی کوچک معیار: CTR نمونه: ۵۰۰۰ کاربر در هر گروه
تست_۲ (هفته ۳-۴): نام: CTA_Button_Test متغیر_A: "همین حالا تماشا کنید" (قرمز) متغیر_B: "شروع تماشا" (سبز) معیار: Conversion Rate
تست_۳ (هفته ۵-۶): نام: Synopsis_Length_Test متغیر_A: توضیح کوتاه (۲ خط) متغیر_B: توضیح متوسط (۴ خط) معیار: Time on Page, Bounce Rate
📁 ۱۳. فایلهای تحویلی
📂 Platform_Creative_Package_v1.0/│├── 📂 01_Design_System/│ ├── UIKit_v1.0.figma│ ├── Design_Tokens.json│ ├── Color_Palette.pdf│ └── Typography_Guide.pdf│├── 📂 02_Cover_Templates/│ ├── Hero_1920x1080.psd│ ├── Poster_1080x1620.psd│ ├── Thumbnail_360x540.psd│ ├── Collection_800x450.psd│ └── CSS_Specifications.css│├── 📂 03_Content_Samples/│ ├── Sample_1_Drama_Film.json│ ├── Sample_2_Historical_Series.json│ ├── Sample_3_Animation.json│ ├── 10_Synopsis_Examples.md│ └── 10_Taglines.md│├── 📂 04_AI_Prompts/│ ├── 5_Image_Prompts_FA.txt│ ├── 5_Image_Prompts_EN.txt│ └── 5_Copy_Prompts.txt│├── 📂 05_Chat_Widget/│ ├── chat_widget.html│ ├── chat_widget.css│ ├── chat_widget.js│ └── Integration_Guide.md│├── 📂 06_Data_Schema/│ ├── Content_Schema.json│ ├── API_Endpoints.md│ └── Sample_Response.json│├── 📂 07_Legal/│ ├── Logo_Policy.md│ ├── Copyright_Disclaimer.txt│ └── Brand_Guidelines.pdf│├── 📂 08_SEO/│ ├── Meta_Tags_Template.html│ ├── Structured_Data.json│ └── Performance_Checklist.md│├── 📂 09_Documentation/│ ├── Project_Brief.md│ ├── Developer_Handbook.md│ └── Content_Style_Guide.md│└── README.md
✅ نتیجهگیری
این مستند جامع بر اساس جدیدترین روندهای صنعت استریمینگ در ۲۰۲۵ تهیه شده است. طبق nielsen.com و ey.com، موفقیت پلتفرمهای محتوایی به عوامل زیر وابسته است:
- تجربه کاربری یکپارچه در تمام دستگاهها
- محتوای بومیسازیشده با کیفیت بالا
- پشتیبانی فوری و دسترسی آسان به ادمین
- عملکرد سریع و بهینهسازی Core Web Vitals
- استراتژی سئو قوی برای جذب ارگانیک
تمام تحویلشدنیهای این مستند فوراً قابل اجرا توسط تیمهای طراحی، محتوا و توسعه هستند.
آخرین بهروزرسانی: ۳ دی ۱۴۰۴ (December 23, 2025)
RegenerateCopy
LikeDislike
11 sources +8
Dec 23, 11:07:00 AM·14m 46s
مر
Shared by
میلاد رجایی
Copy Chat
Latest AI Trends | Sup AI