Abyss هي صفحة هبوط جاهزة للتحويل مصممة للاستوديوهات المستقلة وحملات Kickstarter RPG ومواقع متاجر Steam المرافقة. أضفها، استبدل النصوص، وستحصل على صفحة ترويجية جديرة بالمقطورة دون لمس bundler.
ما بداخلها
- 9 أقسام مصممة بالكامل: شريط تنقل ثابت مع قائمة، بطل ملء منفذ العرض مع لوحة جزيئات متحركة + علامة مائية مبالغ فيها، شريط عداد 5 إحصائيات مع رسم متحرك في العرض، قسم قصة مقسم مع "تشغيل المقطورة" overlay، شبكة ميزات لعب بـ 6 بطاقات، معرض لقطات شاشة ينزلق أفقياً، شبكة بطل أحرف 4 مع توهجات عنصرية، لافتة مقطورة سينمائية مع overlay scanline، CTA مع معاملة سعر $49.99، وتذييل موحي بالعلامة التجارية.
- لوحة خيال مظلم — أسود حبر عميق (
#04040a)، أحمر قاني مميز (#e8193c)، تمييزات ذهبية (#f5a623)، وشدات زرقاء كهربائية. كل لون عبارة عن متغير CSS مخصص؛ لون الموقع بالكامل من ثلاثة متغيرات. - نظام خط نوع ثلاثي — Orbitron (العرض)، Rajdhani (واجهة المستخدم / الأزرار)، Inter (النص الأساسي). محملة في طلب preconnected واحد من Google Fonts؛ استبدل بخطوط الويب الخاصة بك بتحرير سطر واحد.
- بطل جزيئات حي — 80 جمرة قانية + ذهبية تنجرف على لوحة HTML، احترم تفضيلات الحركة المخفضة. خفيف الوزن: ~30 سطراً من vanilla JS، بدون مكتبات.
- عدادات مشغلة الحريقة — شريط إحصائي ينتقل من صفر إلى الهدف في اللحظة التي يدخل فيها منفذ العرض. سلس، رخيص، بدون مكتبة مخطط.
- IntersectionObserver reveal animations على كل كتلة رئيسية — opacity + translate صديق GPU، بدون trash تخطيط.
- مستجيب حتى 375 بكسل، مع ثلاث نقاط فاصلة مدروسة (1024، 900، 640). تنقل hamburger للهواتف، شبكة قصة مكدسة للأجهزة اللوحية، شبكة ميزات مطوية للشاشات الصغيرة.
- modal مقطورة مع escape-to-close و click-outside-to-dismiss. أسقط YouTube
<iframe>لشحن.
لماذا يبيع
كل لعبة خيال مظلم على Kickstarter أو Steam Next Fest أو Indiegogo تحتاج إلى صفحة ترويجية تشعر بأنها لا تزال مقطورة. يصل Abyss إلى هذه الملاحظة من الصندوق — تباين عالي، لكنات حمراء قانية، طباعة بجودة ألعاب — ويشحن كملف واحد يمكن لشخص التسويق الخاص بك تحريره بدون dev.
تفاصيل التكنولوجيا
- ملف HTML واحد، تقريباً 1030 سطراً، ~55 KB بدون ضغط
- خطوة بناء صفر، أطر عمل صفر، تبعيات وقت التشغيل صفر (خطوط preconnected من Google Fonts)
- vanilla JS فقط من أجل: nav الحريقة المشغلة الحريقة، hamburger، modal، reveal observer، رسم متحرك عداد، حلقة لوحة جزيئات
- دلالية بالكامل —
nav،section،footer، صحيحh1/h2الهرمية، pictograms وصفية بدون alt عبر emoji للنموذج السريع - آمن على كل متصفح حديث — اختبر في Chrome و Safari و Firefox و Edge
من أجله
استوديوهات ألعاب مستقلة تعد صفحة إطلاق، منشئو Kickstarter يشحنون RPG، وكالات تبني موقع ترويجي صغير لعميل في مساحة الألعاب، وهواة مطورون يريدون صفحة "قريباً" مصقولة تفوق قوالب Unity.
التخصيص في أقل من ساعة
- استبدل متغيرات اللون الثلاثة في كتلة
:root— أعد تلوين كل بطاقة وزر وحد وتوهج. - استبدل emoji pictograms بفنك الخاص PNG / SVG (إنها مستقلة، بدون خرائط sprite).
- غير أهداف الإحصائيات عبر
data-targetعلى أرقام شريط الإحصائيات. - أسقط iframe مقطورة YouTube الخاص بك داخل modal لاستبدال بطاقة العنصر النائب.
- استبدل ستة دعائم لعب، أربعة أحرف، وخمسة بلاطات معرض — كل منها يسكن في كتل معلقة بوضوح.
ما تحصل عليه
- عرض توضيحي HTML مشفر بالكامل — معاينة الصفحة الكاملة في عارض السوق قبل الشراء
- مصدر HTML غير مضغوط بالكامل عند الشراء
- 12 شهراً من التحديثات البسيطة (إصلاحات الأخطاء وتعديلات توافق المتصفح)
- دعم البريد الإلكتروني خلال 48 ساعة
نسخة العرض التوضيحي عبارة عن عنصر نائب لـ RPG خيالي مظلم افتراضي يسمى ABYSS. كل سطر — اسم اللعبة وأرقام الإحصائيات ووصف الأحرف والتسعير — قابل للتحرير من نفس الملف. اعتبره بناءً معدولاً لإطلاقك الخاص.