طراحی صفحه اصلی (تصویر ساختمان با طبقات مختلف)

---

شرح پروژه

1. طراحی صفحه اصلی (تصویر ساختمان با طبقات مختلف)
   تصویر ساختمان: در صفحه اول سایت باید یک تصویر واضح و دقیق از نمای ساختمان به نمایش گذاشته شود که طبقات مختلف به وضوح در آن مشخص باشد.
   تعریف هر طبقه به‌عنوان یک ناحیه قابل کلیک:
   این تصویر باید به‌گونه‌ای طراحی شود که هر طبقه از ساختمان به‌عنوان یک "ناحیه فعال" تعریف شود. این نواحی باید به صورت شفاف و با قابلیت کلیک در تصویر مشخص باشند.
   تکنولوژی‌های مورد استفاده:
   برای این کار، از HTML برای ایجاد تصویر و از CSS یا JavaScript برای ایجاد افکت‌های کلیک روی نواحی مختلف (طبقات) استفاده می‌شود.
   افزودن قابلیت‌های تعاملی (Interactivity):
   هر ناحیه از تصویر (که نمایانگر یک طبقه است) باید در HTML با استفاده از تگ <area> یا به‌طور خاص‌تر با استفاده از CSS (برای ایجاد نواحی قابل کلیک روی تصویر) تعریف شود. وقتی کاربر روی یکی از این نواحی کلیک کند، باید به صفحه‌ای خاص هدایت شود که پلان آن طبقه را نمایش دهد.
   2. نمایش پلان معماری هر طبقه
   صفحه پلان هر طبقه:
   پس از کلیک روی یک طبقه از ساختمان، صفحه جدیدی باید باز شود که پلان معماری آن طبقه را به نمایش بگذارد. این پلان باید شامل جزئیات فضاها و مغازه‌ها باشد.
   تعریف هر مغازه به‌عنوان ناحیه قابل کلیک:
   مانند مرحله اول، هر مغازه در پلان باید به‌عنوان یک ناحیه فعال تعریف شود که کاربر بتواند روی آن کلیک کند.
   تکنولوژی‌های مورد استفاده:
   صفحه این پلان می‌تواند به صورت تصویر ثابت (مانند یک نقشه) یا با استفاده از فایل‌های SVG (برای تعامل بیشتر با پلان) طراحی شود. در اینجا می‌توان از JavaScript و CSS برای طراحی پلان‌های تعاملی استفاده کرد.
   3. نمایش تصاویر داخلی مغازه
   صفحه جدید برای هر مغازه:
   وقتی کاربر روی یک مغازه در پلان کلیک می‌کند، صفحه جدیدی باز می‌شود که تصاویر داخلی آن مغازه را نمایش دهد. این صفحه باید تصاویری از فضای داخلی مغازه به همراه توضیحات و ویژگی‌ها (مانند مساحت، نوع کاربرد، و غیره) داشته باشد.
   ویژگی‌های مورد نیاز برای نمایش تصاویر داخلی:گالری تصویری: تصاویر داخلی مغازه باید به‌صورت گالری قابل پیمایش یا اسلایدشو نمایش داده شوند تا کاربر بتواند بین تصاویر مختلف جابجا شود.
   جزئیات مربوط به مغازه: در کنار گالری تصاویر، اطلاعاتی مانند مساحت، نوع مغازه، و ویژگی‌های خاص نیز باید در صفحه گنجانده شوند.
   4. اتصال صفحات و منطق ناوبری
   انتقال بین صفحات:
   هر صفحه باید به‌گونه‌ای طراحی شود که انتقال از صفحه به صفحه دیگر به‌طور روان و بدون مشکل انجام شود. برای این کار، باید از لینک‌ها (با استفاده از تگ <a> در HTML) یا روش‌های AJAX (برای بارگذاری صفحات بدون رفرش کردن صفحه) استفاده شود.
   URLهای مناسب برای هر طبقه و مغازه:
   برای دسترسی آسان و به‌خاطر سپردن بهتر، باید URLهای واضحی برای هر طبقه و هر مغازه در نظر گرفته شود. به عنوان مثال:/floor-1 برای پلان طبقه اول
   /shop-1 برای نمایش تصویر داخلی مغازه شماره 1
   5. طراحی واکنش‌گرا (Responsive Design)
   واکنش‌گرایی طراحی:
   سایت باید به‌گونه‌ای طراحی شود که در دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ) به خوبی نمایش داده شود. این کار می‌تواند با استفاده از CSS Media Queries برای تنظیم اندازه و نحوه نمایش تصاویر و نواحی قابل کلیک انجام شود.
   نواحی قابل کلیک روی موبایل:
   برای دستگاه‌های لمسی مانند موبایل، باید اطمینان حاصل شود که نواحی قابل کلیک (طبقات و مغازه‌ها) به اندازه کافی بزرگ و قابل دسترسی باشند.
   6. چگونگی بارگذاری تصاویر و محتوا
   
   
   صفحه اول سایت مثل https://3dplans.com/ باشه نمونه اجرا شده تا حدودی 

یه صفحه ضمیمه شده که  تصاویر در نمونه جاگذاری شده 

این پروژه شامل 1 فایل مهم است، لطفا قبل از ارسال پیشنهاد حتما نسبت به بررسی این فایل اقدام فرمایید.

مهارت ها و تخصص های مورد نیاز

---

---