01 · نظرة عامة
غرفة مظلمة، لا معرض
مواقع المصوّرين تقع عادةً في أحد خطأين: شبكة lightbox تعامل كل صورة كأنها بديلة عن غيرها، أو عرض شرائح بملء الشاشة لا يدعك تتأمل شيئًا طويلًا. في هذا التصوُّر، تخيّلت Noctis استوديو يدرّج كل لقطة يدويًا ولا يقبل سوى ثمانية عشر زفافًا في السنة. كان على الموقع أن يكون انتقائيًا بقدر دفتر الحجوزات نفسه.
لذا يتصرف الموقع كغرفة مظلمة: الأرضية شبه سوداء، واللون الوحيد أحمر إشاري يُستخدم كما تستخدمه الكاميرا، والظهورات تصل كمسحة غالقٍ لا كتلاشٍ، والأعمال معروضة على شريط تسحبه بيدك — ورقة كونتاكت، لا كاروسيل.
02 · الفكرة
ضوء متاح، وتدريج يدوي
الأحمر إشارة
نقاط التسجيل، وعدّادات الكادرات، وزر دعوة واحد. لا خلفية أبدًا ولا زخرفة — الانضباط نفسه الذي تفرضه المعدات.
مسحات، لا تلاشيات
كل ظهور هو clip-path يتحرك في اتجاه واحد. يُقرأ كغالق كاميرا، وهي الاستعارة الوحيدة التي استحقتها هذه العلامة.
مؤشر يعرف حدوده
نقطة مخصصة، على المؤشرات الدقيقة فقط، لا تحل أبدًا محل مؤشر النظام فوق النصوص أو حقول النماذج.
03 · الأهداف
ما كان على الصفحة فعله
عرض الأعمال بحجم يليق بها
شريط أفقي كل كادر فيه كبير بما يكفي للحكم عليه، والتنقّل خلاله فعل مقصود.
شرح ثلاثة تخصصات دون ثلاث صفحات
الأعراس والتحريري والتجاري في قسم واحد بتدريج لوني واحد، لأن الاستوديو يعاملها جميعًا بالطريقة نفسها.
نشر التوافر الحقيقي
مفكرة حجوزات تُفتح في أول الشهر، بدل نموذج يعدك بأن أحدهم سيتواصل معك.
ألّا يُحبس القارئ في العتمة
إذا فشل السكربت، يزيل معالج
onerrorصنف JS حتى لا يبقى شيء مخفيًا خلف مسحة لن تعمل أبدًا.
04 · ترتيب البناء
عشر وحدات، بالترتيب
التدريج اللوني
تسع عشرة خاصية مخصصة: أسود شبه كامل، وأسود مرفوع للّوحات، وثلاثة رماديات، والأحمران. الأسود المرفوع موجود كي تُقرأ اللوحات بلا إطار.
الترويسة والقائمة الطبقية
ترويسة تنكمش وقائمة بملء الشاشة مع مصيدة Tab — أول وحدتين، لأن كل ما عداهما يقع تحتهما.
المسحة
منحنى تخفيف واحد واتجاه clip-path واحد، يُطبَّقان عبر صنف واحد كي يظهر كل قسم بالطريقة نفسها.
شريط السحب
التقاط المؤشر، وأزرار الأسهم، وعدّاد حي، وأمان تركيز للوحة المفاتيح — أكبر وحدة منفردة في البناء.
المفكرة والنموذج
توافر يُحسب من التاريخ الحالي، ثم استفسار حجز من خمسة حقول يعيد إليك رقمًا مرجعيًا.
05 · البنية
ثلاثة ملفات
├── index.html 29.8 KB — 6 أقسام، 10 صور فوتوغرافية
├── styles.css 39.4 KB — 19 خاصية مخصصة، 19 استعلام وسائط
└── script.js 25.6 KB — 795 سطرًا، 10 وحدات مرقّمة
الحزمة التقنية
- Pointer capture
- clip-path
- Custom cursor
- IntersectionObserver
- Date maths
- Marcellus
- Figtree
إتاحة الوصول
- Tab trap
- Offset anchors
- Keyboard rail
- onerror fallback
- Reduced motion
- pointer: fine gate
06 · ما عاندني
ما عاندني
سحبٌ للتمرير مبني على مستمعي mousemove على مستوى المستند ينكسر لحظة يغادر المؤشر العنصر، ويسرّب مستمعًا في كل مرة يُفقد فيها المؤشر.
setPointerCapture. يواصل العنصر استقبال الأحداث أينما ذهب المؤشر، ويحرّر المتصفح الالتقاط عند pointerup أو pointercancel دون أي كود تنظيف.
سحبة تنتهي فوق رابط تُطلق نقرة، فإفلات الفأرة بعد تحريك الشريط يغادر بك الصفحة.
تتبُّع مجموع المسافة المقطوعة وابتلاع النقرة في طور الالتقاط إذا تجاوزت بضع بكسلات. دون العتبة هي نقرة؛ وفوقها كانت سحبة.
المؤشر المخصص أسرع طريقة ليبدو الموقع معطوبًا: يتأخر على لوحة اللمس، ويختفي فوق الحقول، ولا معنى له على شاشات اللمس.
محكوم ببوابة (pointer: fine)، فلا وجود له على اللمس إطلاقًا، ويُستعاد المؤشر الحقيقي فوق كل عنصر تفاعلي بدل إخفائه في كل مكان.
ظهورات clip-path تخفي المحتوى افتراضيًا، وهذه الصفحة الأشد قتامة في المجموعة — سكربت فاشل كان سيترك شاشة سوداء بلا تفسير.
وسم السكربت يحمل onerror يزيل صنف JS، فأي تحميل فاشل يعيد كل مسحة إلى حالتها المستقرة بدل إخفاء أعمال الاستوديو كلها.
07 · ما يستحق البقاء
الأجزاء التي تستحق البقاء
Selected Works
شريط سحب بأسهم وعدّاد وتقليب بلوحة المفاتيح. كل وسيلة إدخال تصل إلى كل كادر.
مفكرة الحجوزات
توافر مشتق من التاريخ الفعلي، يُفتح في أول الشهر — ندرة حقيقية لا مزعومة.
واجهة HUD للكاميرا
قراءة كادر في الواجهة الافتتاحية تستعير طباعة معيّن الرؤية نفسها. CSS خالص، بلا canvas.
نُبقي الأضواء مطفأة
قسم أتيلييه يشرح التدريج اللوني — المكان الوحيد الذي يتحدث فيه الاستوديو عن المنهج بدل عرض النتائج.
08 · شغّله مباشرة
شغّله هنا
البناء الحقيقي، مضمَّن ويعمل. يُحمَّل عند الطلب — لا يُجلَب شيء حتى تطلبه.
تخطَّ المعاينة المباشرة
البناء الحقيقي يعمل داخل الصفحة. المعاينة المباشرة صفحة مضمَّنة؛ اضغط Escape لمغادرتها.
افتح بملء الشاشة ↗
