AI Memory: RafeeqPro - Apr 27, 2026

  1. Overview
  2. AI
  3. AI Memory Notes
  4. AI Memory: RafeeqPro - Apr 27, 2026

This is the Master Project Blueprint. You can save this text as a PDF, a Markdown file, or a simple document.

When you start a new chat with me (or any AI), just paste this entire block and say:

"I am working on RafeeqPro. Here is the project memory and documentation. Please adhere strictly to these styles and logic."

RafeeqPro | Master Project Memory & Blueprint

1. Visual Identity & Brand Standards

  • Signature Theme: Permanent Midnight Green aesthetic. No "Light Mode."

  • Palette:

    • Background (Global): #0F2B22 (Midnight Green)

    • Background (Secondary/Cards): #1A3C32 (Forest Green)

    • Accents: #D4AF37 (Gold) for icons, toggles, borders, and active states.

    • Typography: #F5F5F5 (Cream) or White.

  • Typography Style: Elegant, premium feel. Use letter-spacing: 0.5px for all-caps titles.

2. Global Navigation & Header

  • Header: Metadata line stays on one line (CALGARY | DATE | TIME).

  • Icons: Top-right must only contain the Globe (Language) and Gear (Settings) icons. The Moon icon is removed.

  • Bottom Navigation: Standard fixed icons for Home, Masjids, and Settings.

3. Home Page Architecture

The vertical stack order is strictly maintained:

  1. Hero Timer Card: Displays "REMAINING" countdown and "at [Time]" on a single line.

  2. Daily Prayer Schedule: List of five prayer times.

  3. Quick Action Grid: Qibla, Tasbih, and Alerts.

  4. $1 Daily Challenge Banner: * Watermark: Golden Heart Icon inside the card at 0.08 opacity.

    • Spacing: 'Join Now' button must have right-side padding/margin so it doesn't touch the card edge.

4. Feature & Modal Logic

A. Alerts Modal

  • Visibility: Must have overflow-y: auto and max-height.

  • Order: 'Live Notification' toggle must be at the very top.

  • Padding: Must have 40px bottom padding so the final item (Isha) is fully visible.

B. Masjid & Map Tab

  • Map Styling: Use stable themes; avoid CSS filters that crash the app.

  • Selection: Clicking a masjid in the list centers the map and highlights the location with a Gold Pin.

  • Detail Card: Must feature a 'Navigate' button and a Favorite (Heart) icon that toggles to solid gold when active.

  • Alignment: Address text in the list must be perfectly left-aligned under the Masjid name.

C. Sign-Up (Join RafeeqPro)

  • Fields: Name, Email, Password, and Confirm Password.

  • UX Fix: Must have 80px bottom padding and scrollability to ensure the 'Create Account' button is never hidden by the bottom navigation bar.

D. Settings Page

  • Text Visibility: 'Settings' title and 'Calculation Method' label must be Cream (#F5F5F5).

  • Inputs: Calculation dropdown must have a Gold border and white text.

5. Technical Architecture

  • Stack: Laravel (Backend) + Vue.js (Frontend) using Inertia.js.

  • Logic: Use Laravel Sanctum for auth and Laravel Reverb for real-time notifications.

  • Stability: Prioritize padding and white space to maintain the "RafeeqPro Premium" look.

This document covers the DNA of RafeeqPro. Save this now, and I’ll be ready to pick up exactly where we left off whenever you are!