Skip to content

Latest commit

 

History

History
65 lines (52 loc) · 3.99 KB

File metadata and controls

65 lines (52 loc) · 3.99 KB

تصميم موقع Cyberpunk Code Hub

الفكرة المختارة: Cyberpunk Neon Dark Mode

Design Movement

Cyberpunk Dystopian Futurism - نمط مستوحى من أفلام السايبر بانك والألعاب الحديثة مثل Cyberpunk 2077. يجمع بين الظلام الدرامي والنيون الساطع لخلق جو مستقبلي وتكنولوجي.

Core Principles

  1. الظلام المطلق مع النيون الحاد: خلفيات سوداء عميقة مع ألوان نيون ساطعة (أزرق، بنفسجي، وردي، أخضر)
  2. الحدة والتكنولوجيا: استخدام خطوط حادة، زوايا حادة، وعناصر هندسية قاسية
  3. الحركة والطاقة: تأثيرات متحركة سلسة تعطي شعور بالطاقة والحيوية
  4. الشفافية والطبقات: استخدام الشفافية والظلال لإنشاء عمق بصري

Color Philosophy

  • الخلفية الأساسية: أسود عميق جداً (#0a0e27 أو أعمق)
  • الألوان الأساسية (النيون):
    • الأزرق الساطع: #00d9ff (Cyan) - للعناصر الرئيسية
    • البنفسجي الحار: #d946ef (Magenta) - للتفاعلات والتأثيرات
    • الوردي الساطع: #ff006e (Hot Pink) - للتحذيرات والتركيز
    • الأخضر المشع: #39ff14 (Neon Green) - للعناصر الثانوية
  • النصوص: أبيض نقي مع ظلال خفيفة
  • الحدود والخطوط: نيون بألوان مختلفة مع توهج (glow effect)

Layout Paradigm

  • تخطيط غير متماثل: استخدام شبكة غير متوازنة مع عناصر معلقة
  • الشرائط المائلة: استخدام أشكال مائلة وقطرية لتقسيم الأقسام
  • الشبكة الهندسية: خطوط شبكة خفيفة في الخلفية لإضافة عمق تكنولوجي
  • الأعمدة المتعددة: تخطيط ديناميكي يتغير حسب حجم الشاشة

Signature Elements

  1. الحدود المتوهجة: حدود نيون حول الأزرار والبطاقات مع تأثير توهج
  2. الخطوط المائلة والزوايا: استخدام clip-path لإنشاء أشكال هندسية حادة
  3. الشبكة الخلفية: نمط شبكة خفيف في الخلفية لتعزيز الشعور التكنولوجي

Interaction Philosophy

  • الأزرار: تتغير ألوانها وتتوهج عند التمرير
  • الانتقالات: حركات سلسة وسريعة تعكس الطاقة
  • التأثيرات: ظهور وتلاشي سلس مع تأثيرات الضوء

Animation

  • الدخول: عناصر تظهر بتأثير "scan" من الأعلى أو الجانب
  • التمرير: ألوان تتغير بسلاسة مع ظل متوهج يزداد
  • الحركة المستمرة: خطوط شبكة تتحرك ببطء في الخلفية (parallax)
  • النبض: بعض العناصر تنبض بخفة لإضافة حيوية

Typography System

  • العناوين الكبيرة: Space Mono أو Courier Prime - خط monospace جريء وحاد
  • النصوص العادية: Roboto Mono أو IBM Plex Mono - خط monospace قابل للقراءة
  • الأكواد: Fira Code - خط متخصص للأكواد
  • الهرمية:
    • H1: 48px، bold، مع تأثير توهج
    • H2: 32px، semi-bold
    • H3: 24px، medium
    • Body: 16px، regular
    • Small: 14px، light

الخيارات الأخرى (غير مختارة)

Option 2: Minimalist Tech (احتمالية منخفضة)

تصميم بسيط وأنظف مع ألوان محدودة وتركيز على الوضوح.

Option 3: Retro Arcade (احتمالية منخفضة)

نمط قديم مستوحى من الألعاب القديمة مع ألوان زاهية وتأثيرات بكسل.