🫀 The Quran Heart

The Quran Heart is an interactive visual experience designed to help Muslims track their Quran memorization journey in a meaningful and inspiring way.

Each Surah of the Quran is represented as a part of a heart.
As you memorize a Surah, its corresponding section lights up — symbolizing that the Quran is being engraved into the heart, not just memorized by the mind.

---

✨ Features

• 🫀 Heart-shaped Quran visualization

  • Each section represents one Surah
  • Clicking a section marks it as memorized

• 📊 Real-time progress tracking

  • Memorized Surahs count
  • Remaining Surahs count
  • Animated progress bar with percentage

• 💾 Persistent progress

  • Progress is saved automatically using localStorage
  • Your memorization state remains even after refreshing the page

• 🔍 Smooth zoom & pan

  • Mouse drag
  • Mouse wheel zoom
  • Touch support for mobile devices
  • Reset zoom anytime

• 🖼️ High-quality export

  • Download your Quran Heart as an image:
    • Desktop (1920×1080)
    • Mobile (1080×1920)
    • Custom resolution
  • Perfect for wallpapers or sharing progress

• 📱 Responsive & mobile-friendly

  • Works smoothly on desktop and mobile devices

---

🧠 Concept & Philosophy

The Quran is not meant to stay on shelves — it belongs in the heart.

This project transforms memorization progress into a visual, emotional journey, reinforcing consistency and motivation through design and interaction.

It is not just a tracker — it is a reminder.

---

🛠️ Built With

• HTML5
• CSS3 (Modern UI, glassmorphism, responsive design)
• Vanilla JavaScript
• SVG (Interactive heart illustration)
• Canvas API (High-quality image export)
• LocalStorage API (Persistent state)

No external libraries.
No frameworks.
Pure, clean web technologies.

---

🚀 How to Use

1. Open index.html in your browser
2. Click on heart sections to mark Surahs as memorized
3. Track your progress in real-time
4. Zoom and explore the heart freely
5. Download your progress as an image anytime

---

🔒 Privacy

• No data is sent anywhere
• No tracking
• All progress is stored locally on your device

---

🌱 Future Ideas

• Tooltip showing Surah name & order
• Cloud sync across devices
• Light / Dark theme toggle
• Export as SVG
• Public shareable progress link

---

🤍 Final Note

This project was built with intention, not just code.

If it helps even one person stay connected to the Quran —
then it has already succeeded.