از ایده،
تا ساخته‌شدن.

# برنامه پیاده‌سازی وب‌سایت استودیوی معماری

## ۱) هدف و دامنه نسخه اول

وب‌سایتی فارسی، راست‌چین، روشن و مینیمال برای معرفی استودیوی معماری متخصص در بازطراحی فضاهای کوچک. مخاطب اصلی مالکان آپارتمان هستند و اقدام کلیدی سایت «ثبت درخواست مشاوره» است.

**معیارهای اصلی موفقیت:**
- فرم درخواست مشاوره واضح و قابل استفاده باشد.
- گالری پروژه‌ها سریع بارگذاری شود.
- محتوا در موبایل خوانا و پیمایش آسان باشد.
- کاربر از هر صفحه به‌سادگی به فرم مشاوره برسد.

> نام برند، اطلاعات تماس، تصاویر، پروژه‌ها، اعضای تیم و متن‌های نهایی هنوز ارائه نشده‌اند و در نسخه اولیه با برچسب «محتوای نمونه» نمایش داده می‌شوند.

---

## ۲) نقشه سایت

1. **خانه**
   - معرفی کوتاه و پیشنهاد اصلی
   - مزیت‌های استودیو
   - خدمات منتخب
   - پروژه‌های شاخص
   - فرایند همکاری
   - دعوت به ثبت درخواست مشاوره

2. **خدمات**
   - بازطراحی آپارتمان‌های کوچک
   - طراحی داخلی
   - بهینه‌سازی پلان و فضای ذخیره‌سازی
   - مشاوره معماری
   - مراحل و حدود هر خدمت

3. **پروژه‌ها**
   - گالری همه پروژه‌ها
   - فیلتر ساده بر اساس نوع یا متراژ، در صورت وجود داده کافی
   - صفحه جزئیات هر پروژه: مسئله، راه‌حل، مشخصات و تصاویر

4. **درباره ما**
   - رویکرد و تخصص استودیو
   - ارزش‌ها و روش کار
   - معرفی تیم، در صورت ارائه محتوا
   - دعوت به مشاوره

5. **تماس / درخواست مشاوره**
   - فرم درخواست
   - اطلاعات تماس
   - ساعات پاسخ‌گویی و محدوده خدمات
   - روش ارتباط جایگزین

6. **صفحات تکمیلی تولید**
   - سیاست حریم خصوصی
   - صفحه تشکر پس از ارسال فرم
   - صفحه ۴۰۴

---

## ۳) مسیر اصلی کاربر

1. ورود به خانه یا یکی از پروژه‌ها  
2. درک سریع تخصص استودیو در فضاهای کوچک  
3. مشاهده خدمات و نمونه‌کارهای مرتبط  
4. بررسی فرایند همکاری و جزئیات پروژه  
5. انتخاب «درخواست مشاوره»  
6. تکمیل فرم کوتاه  
7. دریافت تأیید ارسال و زمان تقریبی پاسخ‌گویی  

دکمه درخواست مشاوره در سربرگ، انتهای بخش‌های کلیدی و منوی موبایل تکرار می‌شود.

---

## ۴) اجزا

### اجزای سراسری
- سربرگ دارای نشان‌واره متنی، منوی اصلی و دکمه مشاوره
- منوی موبایل با دکمه باز و بسته‌شدن
- مسیر راهنما در صفحات داخلی
- پابرگ شامل دسترسی سریع، اطلاعات تماس و حریم خصوصی
- عنوان و مقدمه استاندارد صفحات
- بخش دعوت به اقدام
- پیام‌های وضعیت، خطا و موفقیت
- دکمه بازگشت به بالای صفحه

### اجزای محتوایی
- بخش اصلی خانه با تیتر، توضیح و دعوت به اقدام
- کارت خدمت
- کارت پروژه با تصویر، عنوان، متراژ و نوع مداخله
- گالری تصاویر با بارگذاری تدریجی
- نمای بزرگ تصویر با کنترل صفحه‌کلید
- بخش قبل/بعد، فقط در صورت وجود تصاویر معتبر
- فهرست مراحل همکاری
- آمار یا دستاوردها، فقط با داده تأییدشده
- معرفی عضو تیم
- پرسش‌های متداول
- فرم مشاوره

### فیلدهای پیشنهادی فرم
- نام و نام خانوادگی*
- شماره تماس*
- ایمیل
- شهر یا محدوده پروژه
- نوع ملک
- متراژ تقریبی
- خدمت موردنیاز
- بودجه تقریبی، اختیاری
- زمان مطلوب شروع، اختیاری
- توضیح پروژه*
- رضایت با سیاست حریم خصوصی*

فرم باید اعتبارسنجی سمت کاربر و سمت سرور، پیام خطای دقیق و وضعیت ارسال داشته باشد.

---

## ۵) نقشه محتوا

| بخش | محتوای موردنیاز | وضعیت |
|---|---|---|
| هویت برند | نام، لوگو، شعار و معرفی کوتاه | ارائه نشده |
| خدمات | عنوان، شرح، محدوده و خروجی هر خدمت | نیازمند تدوین |
| پروژه‌ها | عنوان، موقعیت کلی، متراژ، مسئله، راه‌حل و تصاویر | ارائه نشده |
| درباره | داستان استودیو، رویکرد، سابقه و تیم | ارائه نشده |
| تماس | تلفن، ایمیل، نشانی، ساعات پاسخ‌گویی | ارائه نشده |
| اعتمادسازی | نظر مشتری، جوایز، رسانه‌ها یا آمار | ارائه نشده |
| حقوقی | حریم خصوصی و رضایت پردازش اطلاعات | نیازمند تأیید |

تا زمان دریافت محتوا، همه متن‌ها، تصاویر و مشخصات فرضی باید آشکارا با عنوان «محتوای نمونه» مشخص شوند. ادعاهای عددی یا نظر مشتری ساختگی استفاده نشود.

---

## ۶) توکن‌های بصری پیشنهادی

### رنگ
- پس‌زمینه اصلی: `#F7F7F3`
- سطح کارت: `#FFFFFF`
- متن اصلی: `#20221F`
- متن ثانویه: `#62675F`
- رنگ تأکیدی: `#536755`
- تأکید روشن: `#E4E9E1`
- مرز: `#D9DDD6`
- خطا: `#B3261E`
- موفقیت: `#2F6B45`

نسبت کنتراست همه ترکیب‌های متنی پیش از تولید بررسی شود.

### تایپوگرافی
- قلم فارسی خوانا با مجوز وب؛ در نمونه اولیه از فونت سیستمی استفاده شود.
- متن پایه: ۱۶ تا ۱۸ پیکسل
- فاصله خطوط: حداقل ۱٫۷
- طول مطلوب سطر: ۴۵ تا ۷۵ نویسه
- تیترها با وزن متوسط و اختلاف اندازه روشن، بدون تزئینات سنگین

### فاصله و فرم
- مقیاس فاصله: ۴، ۸، ۱۲، ۱۶، ۲۴، ۳۲، ۴۸، ۶۴ و ۹۶ پیکسل
- شعاع گوشه: ۸ تا ۱۲ پیکسل
- مرزهای ظریف و سایه بسیار محدود
- شبکه دسکتاپ: حداکثر عرض ۱۲۰۰ پیکسل، ۱۲ ستون
- حداقل سطح لمس: ۴۴×۴۴ پیکسل

### تصویر
- عکاسی روشن، طبیعی و با خطوط معماری واضح
- نسبت‌های ثابت برای جلوگیری از جابه‌جایی چیدمان
- خروجی AVIF/WebP همراه با جایگزین مناسب
- تصاویر بندانگشتی و اندازه‌های واکنش‌گرا

---

## ۷) دسترس‌پذیری

- سند فارسی با جهت راست‌به‌چپ
- ساختار معنایی صحیح و تنها یک عنوان سطح اول در هر صفحه
- پیوند «پرش به محتوای اصلی»
- امکان استفاده کامل با صفحه‌کلید
- فوکوس واضح و پرکنتراست
- نام قابل فهم برای دکمه‌ها و کنترل‌های آیکونی
- متن جایگزین توصیفی برای تصاویر پروژه؛ تصاویر تزئینی با متن جایگزین خالی
- برچسب دائمی برای همه فیلدهای فرم
- اتصال خطاها به فیلد مربوط و ارائه خلاصه خطا
- عدم اتکا به رنگ برای انتقال مفهوم
- احترام به تنظیم «کاهش حرکت»
- گالری و پنجره تصویر دارای مدیریت فوکوس، دکمه بستن و کلید Escape
- هدف تولید: انطباق با WCAG 2.2 سطح AA

---

## ۸) رفتار واکنش‌گرا

- طراحی از موبایل به دسکتاپ
- نقاط شکست پیشنهادی: ۴۸۰، ۷۶۸ و ۱۰۲۴ پیکسل
- منوی افقی در دسکتاپ و منوی جمع‌شونده در موبایل
- کارت‌ها: یک ستون در موبایل، دو ستون در تبلت و دو یا سه ستون در دسکتاپ
- فرم: تک‌ستونه در موبایل و حداکثر دو ستون در نمایشگر بزرگ
- تیترها و فاصله‌ها با مقیاس سیال
- گالری بدون اسکرول افقی ناخواسته
- کنترل عرض متن برای حفظ خوانایی
- تصاویر پایین صفحه با بارگذاری تنبل
- دکمه مشاوره در موبایل همواره در دسترس باشد، بدون پوشاندن محتوا

---

## ۹) مرزهای یکپارچه‌سازی

در نسخه نمونه، هیچ سرویس خارجی واقعاً متصل نیست.

- **فرم:** رابط آماده اتصال به API امن یا سامانه مدیریت ارتباط با مشتری؛ ارسال واقعی، ذخیره‌سازی و ایمیل غیرفعال و مشخصاً برچسب‌گذاری شوند.
- **ضدهرزنامه:** انتخاب سرویس و سیاست جایگزین دسترس‌پذیر در مرحله تولید.
- **مدیریت محتوا:** ساختار پروژه‌ها و خدمات مستقل از ارائه‌دهنده طراحی شود؛ CMS هنوز تعیین نشده است.
- **تحلیل رفتار:** تنها پس از انتخاب ابزار، تنظیم رضایت کاربر و بررسی حریم خصوصی.
- **نقشه، پیام‌رسان و شبکه اجتماعی:** فقط پس از ارائه حساب‌ها و نشانی‌های رسمی.
- هیچ کلید API یا اطلاعات محرمانه‌ای در کد سمت کاربر قرار نگیرد.

---

## ۱۰) چک‌لیست پذیرش

- [ ] هر پنج صفحه اصلی و صفحات تکمیلی ضروری موجودند.
- [ ] درخواست مشاوره از تمام صفحات حداکثر با دو اقدام قابل دسترسی است.
- [ ] فرم دارای برچسب، اعتبارسنجی، پیام خطا، وضعیت ارسال و تأیید موفقیت است.
- [ ] عملکرد واقعی یا نمایشی فرم به‌وضوح مشخص شده است.
- [ ] پروژه‌ها در موبایل و دسکتاپ بدون شکست چیدمان نمایش داده می‌شوند.
- [ ] تصاویر بهینه، واکنش‌گرا و دارای ابعاد مشخص هستند.
- [ ] محتوای پایین صفحه به‌صورت تنبل بارگذاری می‌شود.
- [ ] همه صفحات با صفحه‌کلید قابل استفاده‌اند.
- [ ] کنتراست، ترتیب تیترها، فوکوس و متن جایگزین بررسی شده‌اند.
- [ ] در عرض ۳۲۰ پیکسل اسکرول افقی ناخواسته وجود ندارد.
- [ ] حالت کاهش حرکت پشتیبانی می‌شود.
- [ ] محتوای نمونه از محتوای تأییدشده قابل تشخیص است.
- [ ] هیچ ادعای تأییدنشده، اطلاعات محرمانه یا کلید سرویس در خروجی نیست.
- [ ] صفحات دارای عنوان و توضیح متای منحصربه‌فرد هستند.
- [ ] عملکرد با شبکه کند و دستگاه موبایل واقعی آزمایش شده است.
- [ ] پیش از انتشار، مقصد فرم، حریم خصوصی، دامنه، هاست، محتوای نهایی و مالک نگهداری تعیین شده‌اند.

<!doctype html>
<html lang="fa" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>آرا | معماری برای زندگی</title><meta name="description" content="نمونه نمایشی استودیوی معماری آرا؛ طراحی داخلی و بازآفرینی فضاهای کوچک."><link rel="stylesheet" href="styles.css"></head><body>
<header><a class="brand" href="#home">آرا<span>معماری برای زندگی</span></a><nav aria-label="منوی اصلی"><a href="#projects">پروژه‌ها</a><a href="#services">خدمات</a><a href="#about">درباره ما</a><a href="#contact">شروع همکاری</a></nav></header>
<main id="home"><section class="hero"><div class="hero-copy"><p class="eyebrow">ARA ARCHITECTURE STUDIO</p><h1>فضای کمتر.<br>زندگی بیشتر.</h1><p class="lead">خانه خوب، فقط بزرگ نیست. روشن، آرام و متناسب با زندگی شماست. با طراحی دقیق، هر متر از خانه را به فرصتی برای بهتر زندگی‌کردن تبدیل می‌کنیم.</p><div class="actions"><a class="button" href="#projects">کشف پروژه‌ها</a><a class="text-link" href="#contact">از خانه‌تان بگویید ←</a></div><p class="fine">طراحی داخلی · بازسازی · بهینه‌سازی فضا</p></div><figure class="hero-image"><img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=1400&q=85" width="1400" height="1000" alt="نشیمن روشن با مبلمان طبیعی و رنگ‌های گرم"><figcaption>نور، بافت و آرامش؛ نقطه شروع طراحی ما</figcaption></figure></section>
<section id="projects"><div class="section-head"><div><p class="eyebrow">SELECTED SPACES</p><h2>هر خانه، یک داستان تازه.</h2></div><p>سه کانسپت برای دیدن رویکرد ما به فضا. تصاویر مرجع‌اند و پروژه اجراشده واقعی نیستند.</p></div><div class="projects"><article><img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?w=900&q=85" width="900" height="700" alt="فضای داخلی روشن با جزئیات مینیمال" loading="lazy"><div><span>کانسپت مسکونی · نور طبیعی</span><h3>خانه روشن</h3><p>بازکردن مسیر نور، انتخاب رنگ‌های ملایم و فضایی منعطف برای لحظه‌های روزمره.</p></div></article><article><img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=900&q=85" width="900" height="700" alt="طراحی داخلی با متریال طبیعی و رنگ‌های خنثی" loading="lazy"><div><span>کانسپت داخلی · متریال طبیعی</span><h3>آرامش در جزئیات</h3><p>ترکیب بافت چوب، خطوط ساده و نور نرم برای خانه‌ای که فرصت استراحت می‌دهد.</p></div></article><article><img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=900&q=85" width="900" height="700" alt="نشیمن چندمنظوره با چیدمان متعادل" loading="lazy"><div><span>کانسپت آپارتمان · چیدمان هوشمند</span><h3>یک فضا، چند امکان</h3><p>چیدمانی که میان کار، پذیرایی و زندگی روزانه تعادل برقرار می‌کند.</p></div></article></div></section>
<section id="services" class="services"><div class="section-head"><div><p class="eyebrow">WHAT WE DO</p><h2>از اولین ایده تا جزئیات نهایی.</h2></div><p>یک مسیر روشن برای تبدیل نیازهای شما به تصمیم‌های قابل اجرا.</p></div><div class="service-grid"><article><span>۰۱</span><h3>طراحی داخلی</h3><p>چیدمان، نورپردازی، رنگ و متریال؛ با توجه به سبک زندگی و ویژگی‌های خانه شما.</p></article><article><span>۰۲</span><h3>بازسازی هوشمند</h3><p>شناسایی ظرفیت‌های پنهان فضا و اولویت‌بندی تغییرات بر اساس نیاز و بودجه.</p></article><article><span>۰۳</span><h3>مشاوره معماری</h3><p>بررسی نقشه، تعریف مسئله و پیشنهاد مسیر مناسب پیش از شروع پروژه.</p></article></div></section>
<section id="about" class="about"><div><p class="eyebrow">OUR APPROACH</p><h2>طراحی از شنیدن<br>شروع می‌شود.</h2></div><div><p class="lead">پیش از انتخاب رنگ یا کشیدن اولین خط، درباره شما می‌پرسیم: روزتان چطور می‌گذرد؟ کدام گوشه خانه را دوست دارید؟ چه چیزی باید تغییر کند؟</p><p>پاسخ این سؤال‌ها، پایه طراحی است. سپس ایده را به نقشه، انتخاب متریال و جزئیات روشن تبدیل می‌کنیم؛ تا نتیجه، هم زیبا باشد و هم برای زندگی واقعی کار کند.</p><ol><li><b>شناخت:</b> نیازها، محدودیت‌ها و اولویت‌های شما</li><li><b>طراحی:</b> کانسپت، چیدمان و زبان بصری</li><li><b>تکمیل:</b> نقشه‌ها، متریال و جزئیات اجرایی</li></ol></div></section>
<section class="faq"><div class="section-head"><h2>پیش از شروع بدانید.</h2></div><details><summary>برای شروع چه اطلاعاتی لازم است؟</summary><p>عکس فضا، نقشه یا ابعاد تقریبی، هدف شما و بازه بودجه کمک می‌کند گفت‌وگو دقیق‌تر شروع شود.</p></details><details><summary>آیا برای خانه‌های کوچک هم طراحی انجام می‌شود؟</summary><p>بله؛ تمرکز این نمونه بر نور، چیدمان چندمنظوره و استفاده بهتر از فضاهای محدود است.</p></details><details><summary>مدت و هزینه پروژه چگونه مشخص می‌شود؟</summary><p>پس از بررسی متراژ، دامنه تغییرات و سطح جزئیات، برنامه و هزینه متناسب پیشنهاد می‌شود.</p></details></section>
<section id="contact" class="contact"><p class="eyebrow">LET’S CREATE YOUR SPACE</p><h2>خانه بعدی شما،<br>از یک گفت‌وگو شروع می‌شود.</h2><p>درباره فضا و تغییراتی که در ذهن دارید بنویسید.</p><form id="contact-form"><label for="name">نام شما</label><input id="name" autocomplete="name" required placeholder="نام و نام خانوادگی"><label for="message">چه فضایی را می‌خواهید تغییر دهید؟</label><textarea id="message" required rows="4" placeholder="نوع فضا، نیازها و ایده‌های شما"></textarea><button class="button" type="submit">بررسی درخواست نمونه</button><p id="form-status" role="status">فرم نمایشی است؛ اطلاعات ارسال یا ذخیره نمی‌شوند.</p></form></section></main>
<footer><a class="brand" href="#home">آرا<span>معماری برای زندگی</span></a><p>نمونه طراحی استودیو هوش مصنوعی · نام برند و پروژه‌ها فرضی‌اند؛ تصاویر مرجع از Unsplash.</p><a href="#home">بازگشت به بالا ↑</a></footer><script src="app.js"></script></body></html>

@font-face{font-family:Vazir;src:url(fonts/Vazirmatn-variable.woff2) format('woff2');font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#f5f4ef;color:#252d27;font:16px/1.9 Vazir,Tahoma,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #597258;outline-offset:4px}header,footer{max-width:1300px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 40px}.brand{font-size:36px;font-weight:800;line-height:1.3}.brand span{display:block;font-size:11px;font-weight:400;letter-spacing:.02em}nav{display:flex;gap:28px;flex-wrap:wrap}nav a{min-height:44px;display:flex;align-items:center;font-size:14px}main{max-width:1300px;margin:auto;padding:0 40px}section{padding:80px 0;scroll-margin-top:20px}.hero{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:64px;padding:40px 0 90px}.hero h1{font-size:clamp(48px,6vw,82px);line-height:1.35;letter-spacing:-2px;margin:20px 0 24px;font-weight:650}h2{font-size:clamp(30px,4vw,48px);line-height:1.5;margin:12px 0 24px;font-weight:650}h3{font-size:22px;margin:12px 0}.eyebrow{font-size:11px;letter-spacing:.17em;direction:ltr;text-align:start;color:#52644f}.lead{font-size:18px;color:#5e655d;line-height:2;max-width:580px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:28px 0}.button{background:#384e3c;color:#fff;border:0;border-radius:6px;padding:12px 22px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;font:inherit;cursor:pointer}.button:hover{background:#253c29}.text-link{border-bottom:1px solid #8a9788;padding-block:10px}.fine{font-size:12px;color:#626a60}.hero-image{margin:0}.hero-image img{width:100%;height:620px;object-fit:cover;border-radius:8px}.hero-image figcaption{font-size:12px;color:#626a60;margin-top:12px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:32px}.section-head>p{max-width:390px;color:#626a60}.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.projects article{background:#fff;border-radius:8px;overflow:hidden}.projects img{width:100%;height:290px;object-fit:cover}.projects article>div{padding:24px}.projects span{font-size:12px;color:#687565}.projects p,.service-grid p{color:#626a60;font-size:14px}.services{border-block:1px solid #d9dfd4}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.service-grid span{color:#64775f;font-size:14px}.about{display:grid;grid-template-columns:1fr 1.2fr;gap:80px}.about ol{padding-inline-start:24px}.about li{padding-block:10px;border-bottom:1px solid #d9dfd4}.faq{max-width:850px;margin:auto}.faq details{border-bottom:1px solid #d9dfd4;padding:16px 0}.faq summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;font-weight:600}.contact{background:#e7ecdf;border-radius:12px;text-align:center;padding:60px 24px;margin-block:50px 80px}.contact .eyebrow{text-align:center}.contact form{max-width:600px;margin:32px auto;text-align:start}.contact label{display:block;margin:14px 0 8px}.contact input,.contact textarea{display:block;width:100%;border:1px solid #c4cebd;background:#fdfefb;border-radius:6px;padding:12px;font:inherit}.contact button{width:100%;margin-top:20px}.contact #form-status{font-size:13px;color:#52644f}footer{border-top:1px solid #d9dfd4}footer p{max-width:580px;font-size:12px;color:#626a60}footer>a:last-child{font-size:13px;min-height:44px;display:flex;align-items:center}@media(max-width:850px){header,footer{padding:20px 24px;flex-wrap:wrap}main{padding:0 24px}.hero{gap:32px;grid-template-columns:1fr}.hero-image img{height:450px}.projects{grid-template-columns:1fr 1fr}.service-grid{gap:24px}.about{gap:32px;grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column;gap:8px}section{padding:50px 0}}@media(max-width:550px){main{padding:0 18px}nav{gap:16px}.hero{padding-top:24px}.hero-image img{height:380px}.projects,.service-grid{grid-template-columns:1fr}.projects img{height:260px}.contact{padding:40px 18px}footer{align-items:start}.hero h1{font-size:52px}.lead{font-size:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

document.getElementById('contact-form')?.addEventListener('submit',function(event){event.preventDefault();document.getElementById('form-status').textContent='این یک نمونه طراحی است؛ درخواست شما ارسال یا ذخیره نشده است. برای راه‌اندازی واقعی باید فرم به سرویس امن متصل شود.';});

# راهنمای نمونه وب‌سایت استودیوی معماری

این پروژه نمونه‌ای فارسی، راست‌چین و واکنش‌گرا برای معرفی استودیوی معماری متخصص در بازطراحی فضاهای کوچک است. اقدام اصلی کاربر، ثبت درخواست مشاوره است.

> **وضعیت:** نمونه اولیه؛ منتشر یا به سرویس خارجی متصل نشده است.

## نقشه فایل‌ها

```text
/
├── index.html       # ساختار صفحات، محتوای نمونه و فرم مشاوره
├── styles.css       # طراحی روشن، واکنش‌گرایی و حالت‌های دسترس‌پذیری
├── script.js        # منوی موبایل، گالری و اعتبارسنجی نمایشی فرم
└── README.md        # راه‌اندازی، محدودیت‌ها و الزامات تولید
```

اگر نمونه به‌صورت تک‌فایلی تحویل شده باشد، CSS و JavaScript داخل `index.html` قرار دارند.

## پیش‌نمایش محلی

بدون نصب ابزار، `index.html` را در مرورگر باز کنید. برای پیش‌نمایش مطمئن‌تر از یک وب‌سرور محلی استفاده کنید:

```bash
python3 -m http.server 8080
```

سپس نشانی زیر را باز کنید:

```text
http://localhost:8080
```

این دستور فقط پیش‌نمایش محلی ایجاد می‌کند و به‌معنای استقرار عمومی نیست.

## محتوای جایگزین

موارد دارای برچسب «محتوای نمونه» باید پیش از انتشار جایگزین شوند:

- نام، لوگو و معرفی نهایی برند
- تلفن، ایمیل، نشانی و ساعات پاسخ‌گویی
- تصاویر و مشخصات واقعی پروژه‌ها
- شرح دقیق خدمات و فرایند همکاری
- اطلاعات اعضای تیم
- متن حریم خصوصی و شرایط رضایت
- عنوان‌ها، توضیحات متا و اطلاعات اشتراک‌گذاری اجتماعی

هیچ آمار، نظر مشتری یا ادعای تأییدنشده‌ای نباید به نسخه نهایی افزوده شود.

## یکپارچه‌سازی‌ها

تمام یکپارچه‌سازی‌های نمونه **غیرفعال و غیرعملیاتی** هستند:

- فرم اطلاعات را ارسال، ذخیره یا ایمیل نمی‌کند.
- API، CRM، CMS و سرویس ضدهرزنامه متصل نیستند.
- تحلیل رفتار، نقشه، پیام‌رسان و شبکه اجتماعی تنظیم نشده‌اند.
- پیام موفقیت فرم صرفاً رفتار نمایشی سمت مرورگر است.

برای تولید، فرم باید به یک API امن با اعتبارسنجی سمت سرور، محدودسازی نرخ، کنترل هرزنامه و ثبت خطای مناسب متصل شود. هیچ کلید API یا اطلاعات محرمانه‌ای نباید در HTML یا JavaScript سمت کاربر قرار گیرد.

## بررسی دسترس‌پذیری

پیش از انتشار بررسی شود:

- زبان فارسی و جهت `rtl`
- ترتیب منطقی تیترها و تنها یک `h1` در هر نما
- پیمایش کامل با صفحه‌کلید و فوکوس واضح
- عملکرد پیوند پرش به محتوای اصلی
- برچسب دائمی و پیام خطای قابل فهم برای فرم
- مدیریت فوکوس گالری و بسته‌شدن آن با `Escape`
- متن جایگزین مناسب تصاویر واقعی
- کنتراست رنگ مطابق WCAG 2.2 AA
- حداقل اندازه هدف لمسی ۴۴×۴۴ پیکسل
- پشتیبانی از `prefers-reduced-motion`
- آزمایش با صفحه‌خوان و بزرگ‌نمایی ۲۰۰٪

## بررسی موبایل و کارایی

- آزمایش در عرض ۳۲۰ پیکسل و جلوگیری از اسکرول افقی
- بررسی منوی موبایل و دسترسی مداوم به دکمه مشاوره
- آزمایش فرم با صفحه‌کلید نرم‌افزاری
- تعیین `width` و `height` تصاویر برای کاهش جابه‌جایی چیدمان
- استفاده از AVIF/WebP، `srcset` و اندازه‌های مناسب
- بارگذاری تنبل تصاویر پایین صفحه
- آزمایش روی دستگاه واقعی و شبکه کند
- فشرده‌سازی CSS، JavaScript و تصاویر در تولید

## بررسی امنیت و حریم خصوصی

- اعتبارسنجی و پاک‌سازی همه ورودی‌ها در سرور
- استفاده اجباری از HTTPS
- محافظت CSRF متناسب با معماری بک‌اند
- محدودسازی نرخ و راهکار دسترس‌پذیر مقابله با هرزنامه
- تنظیم هدرهای CSP، HSTS، `X-Content-Type-Options` و سیاست ارجاع
- ثبت حداقلی داده‌ها و تعیین دوره نگهداری
- دریافت رضایت روشن برای پردازش اطلاعات
- جلوگیری از درج اطلاعات حساس در کد، مخزن یا گزارش مرورگر
- بررسی وابستگی‌ها و به‌روزرسانی منظم آن‌ها

## مراحل آماده‌سازی تولید

1. محتوای نمونه را با محتوای تأییدشده جایگزین کنید.
2. تصاویر را با مجوز معتبر، متن جایگزین و خروجی‌های بهینه آماده کنید.
3. مقصد فرم و قرارداد API را تعیین و پیاده‌سازی کنید.
4. حریم خصوصی، رضایت، دوره نگهداری داده و روش حذف اطلاعات را تأیید کنید.
5. دامنه، هاست، HTTPS و مسئول نگهداری را مشخص کنید.
6. متادیتای منحصربه‌فرد، آیکن سایت، نقشه سایت و `robots.txt` را اضافه کنید.
7. دسترس‌پذیری، امنیت، اعتبارسنجی HTML و عملکرد را آزمایش کنید.
8. فرم را در محیط آزمایشی و تولید، بدون استفاده از داده حساس واقعی، بررسی کنید.
9. پشتیبان‌گیری، پایش خطا و فرایند به‌روزرسانی محتوا را تعریف کنید.
10. تنها پس از تأیید محتوا، مقصد فرم و الزامات حقوقی، نسخه نهایی را منتشر کنید.