تسجيل الدخول إلى بوابة الجامعة - الوضع الداكن والتصميم المغربي

Create a dark mode login page for a university student portal with 3D elements and additional features to enhance trustworthiness and functionality. The page should combine modern aesthetics with Moroccan cultural touches, including elegant fonts, a dual panel layout, and a welcoming Amazigh message. 1. Layout Design: Primary Components: Left Panel: The login form, described in detail below, remains the centerpiece of this panel. Above the login form: University Name: Display "كلية العلوم القانونية والاقتصادية والاجتماعية أيت ملول" using a sleek and distinct Arabic font like "Tajawal" or "Amiri" for an elegant yet modern feel. Student Affairs Wing: Add the section name "مصلحة الشؤون الطلابية", aligned below the university name, in a slightly smaller font size with a gold accent for emphasis. Welcome in Amazigh: Add "ⴰⵎⵓⵣⵉⵖ ⴰⴳⵯⵓⴷⵉⴼ" beneath the Arabic text in a contrasting font that stands out but complements the overall theme. Right Panel (New Feature for Trustworthiness): Add a semi transparent 3D glass like panel beside the login form to display: University Emblem or Logo: A large, glowing logo of the university in the top center, rendered in gold with 3D embossing, symbolizing authority and reliability. Short Statement: Include a motivational or welcoming phrase, such as: "معًا نحو مستقبل مشرق" (Together Toward a Bright Future) in a soft golden glow font. "Your Path to Excellence" (translated into Arabic below the English version). Contact Details: Add a contact icon with text: "تواصل معنا", followed by placeholders for phone, email, or office hours in smaller, legible text. Include a visual element such as: A subtle 3D animation of Moroccan zellige tiles that gently glows or rotates in the background of the panel. Or student silhouettes overlaid with a Moroccan geometric pattern for a more interactive look. 2. Login Form: The left side login panel remains the centerpiece and should include: Dark Mode Theme: Deep charcoal background with soft white or gray text. Input Fields: Rounded with a subtle glowing teal border on focus. Placeholder text such as "البريد الإلكتروني" and "كلمة المرور" in a refined Arabic font (e.g., "Cairo" for a bold, clean look). Submit Button: A 3D beveled button that lights up in gold or teal on hover. Forgot Password Link: Place "نسيت كلمة السر؟" in a minimalist, underlined style below the form, glowing slightly when hovered over. 3. Dark Mode Colors & Textures: Background: A rich, gradient dark mode palette (midnight blue to charcoal black). Accent Colors: Incorporate neon teal and gold for interactive elements (e.g., buttons, icons) to contrast with the dark theme. 3D Texture: Include subtle Zellige tile patterns on both panels, which become embossed or glowing on user interaction. 4. Typography: Use two distinct Arabic fonts for contrast: Primary Font: "Tajawal" or "Amiri" for headings and section titles (modern, elegant). Secondary Font: "Cairo" or "Scheherazade" for input fields, buttons, and smaller texts (clean and readable). Ensure text sizes are responsive and balanced between the two panels. 5. 3D Effects and Animations: Interactive Glow: Make buttons, fields, and icons subtly glow on hover. Glass Effect: Use a frosted glass texture for the right panel to enhance modernity while allowing Moroccan tile designs to show through. Animated Zellige Tiles: Add gentle 3D animations of Moroccan tiles that shift or rotate subtly on hover. 6. Footer Section (Optional): Place a thin footer bar at the bottom of the page with the following: Useful Links: Icons or text links to "Help," "Contact," and "FAQs." Moroccan Motifs: A repeating, minimalist Zellige border for decorative purposes. Key UX Enhancements: Dual Panel Layout: Enhances trust by providing context (e.g., logo, motivational message) and functionality (login form). Cultural Integration: Embeds Moroccan identity through Zellige designs, Arabic/Amazigh text, and subtle traditional motifs. Responsive Design: Optimized for desktop and mobile, ensuring both panels stack vertically on smaller devices.