sky-kuran
Hakan Turk**Rol:** Sen uzman bir Full-Stack Web Geliştiricisi ve UX/UI Tasarımcısısın. İslami eğitim ve ezber uygulamaları geliştirme konusunda tecrübelisin. **Görev:** Kullanıcının A'lâ Suresinden Nâs Suresine kadar olan sureleri kolayca ezberlemesini sağlayacak, interaktif, web tabanlı bir Kuran ezberleme uygulaması (HTML/CSS/JS veya React kullanarak) kodlamak. **Tasarım ve Arayüz (UI/UX):** * **Tema:** Geleneksel "Mushaf" teması. Arka planlar göz yormayan krem/parşömen renginde (#FDFBF7), yazılar okunaklı koyu kahverengi veya siyah olmalı. Arapça metinler için "Amiri", "Scheherazade" veya "Uthmani" gibi geleneksel fontlar kullanılmalı. * **Düzen:** Her ayet, sayfada ayrı bir blok/satır halinde alt alta sıralanmalı. Tasarım tamamen mobil uyumlu (responsive) olmalı. **Temel Özellikler:** 1. **Ayet İçeriği:** Her ayet bloğunda şunlar bulunmalı: * Arapça orijinal metin (Büyük ve okunaklı). * Türkçe okunuşu (Transliterasyon - alt kısımda daha küçük fontla). * Türkçe manası/meali (Diyanet veya benzeri güvenilir bir kaynak). 2. **İnteraktif Okuma:** Kullanıcı ekrandaki herhangi bir ayete dokunduğunda/tıkladığında sadece o ayetin okunuşu sesli olarak başlamalı. 3. **Çoklu Hafız Seçeneği:** Üst kısımda şık bir açılır menü (dropdown) olmalı. Kullanıcı buradan Ahmet el-Acemi, Mahir el-Muaykili, Mişari Raşid el-Afasi gibi farklı hafızları seçebilmeli. 4. **Senkronizasyon (Kalibrasyon) ve Takip:** * Ses ve metin tam senkronize çalışmalı. * Okunan ayet o an vurgulanmalı (highlight - arka planı hafifçe koyulaşmalı) ve okunan ayetin yanında kullanıcıyı yönlendiren hareketli bir ok (indicator) belirmelidir. Ayet bitince ok kaybolmalı veya sonraki ayete geçmelidir. 5. **Veri Kaynağı:** Tüm Arapça metinleri, mealleri ve hafızların ses dosyalarını statik olarak eklemek yerine ücretsiz ve stabil çalışan `api.alquran.cloud` (veya benzeri bir Kuran API'si) üzerinden çekmelisin. **Çıktı Formatı:** Bana öncelikle uygulamanın ana iskeletini (HTML), ardından Mushaf temasını yansıtan stil dosyasını (CSS) ve en son API entegrasyonunu, ses senkronizasyonunu ve ayet takibini yapacak JavaScript kodlarını eksiksiz, çalışır durumda ve açıklayıcı yorum satırlarıyla birlikte ver.
Comments (0)
Sign in to leave a comment
Project Tasks10
Uygula Tema ve Yapıyı
As a user, I want the application to have a consistent Mushaf-inspired theme so that the visual experience feels traditional and calming. Implement the color palette (#FDFBF7 background, #F7E9D7 surface, #3B2F2F text, #A67C52 accent, #D9CBB6 muted) across all pages. Set up global CSS variables, typography (Amiri/Scheherazade/Uthmani for Arabic text), and shared layout components. Remove any scaffold pages not needed (login, signup, welcome, ai-assistant, settings pages). Align all existing scaffold pages with the Mushaf theme. This task must be completed before any other page implementation.
Entegre Quran API Backend
As a user, I want the backend to serve Quranic verse data (Arabic text, transliteration, Turkish translation) so that the frontend can display accurate content. Implement FastAPI endpoints that fetch data from api.alquran.cloud for: list of Surahs (A'lâ to Nâs), verses per Surah with Arabic text, Turkish translation (Diyanet), and transliteration. Include caching to meet the <3s load time requirement.
Entegre Ses ve Hafız API
As a user, I want the backend to provide audio recitation URLs for multiple Qaris so that I can listen to verse recitations. Implement FastAPI endpoints to fetch audio URLs from api.alquran.cloud for reciters: Ahmet el-Acemi, Mahir el-Muaykili, Mişari Raşid el-Afasi. Support per-verse audio URL retrieval for synchronized playback.
Oluştur Ana Sayfa (Home)
As a user, I want to browse all Surahs (from A'lâ to Nâs) on the Home page so that I can select one to read or listen. Implement the Home page based on the existing JSX design (Home v2). Features include: interactive Mushaf Scroll design with dynamic scroll animation, parchment-like background, ambient Islamic geometric pattern animation, list/grid of Surahs navigating to the Surah page. Follows the user flow: Home → Surah page.
Oluştur Sure Sayfası (Surah)
As a user, I want to view all verses of a selected Surah with Arabic text, transliteration, and Turkish translation so that I can read and listen to them. Implement the Surah page based on the existing JSX design (Surah v2). Features include: display of verses in blocks (Arabic large font, transliteration, Turkish meaning), Qari dropdown selector, click/tap to play verse audio, real-time verse highlighting synchronized with audio, animated indicator arrow on currently playing verse, audio waveform visualization at bottom, mark verse as memorized button with celebratory animation. Follows user flow: Home → Surah → (listen/mark memorized) → Progress.
Oluştur İlerleme Sayfası (Progress)
As a user, I want to view my memorization progress statistics so that I can track how many verses I have memorized across all Surahs. Implement the Progress page based on the existing JSX design (Progress v2). Features include: progress bar/indicator showing percentage of memorized verses, per-Surah breakdown of memorization status, progressive golden glow effect representing completed verses, celebratory messages/animations for milestones. Data is read from localStorage. Follows user flow: Surah (Mark Memorized) → Progress.
Uygula LocalStorage İlerleme Takibi
As a user, I want my memorization progress to be saved locally on my device without requiring an account so that I can continue where I left off. Implement a localStorage service/hook to: save and retrieve memorized verse state per Surah, persist Qari preference, provide progress statistics (total verses memorized, per-Surah percentage). Integrate with the Surah and Progress pages.
Uygula Ses Senkronizasyonu
As a user, I want the currently playing verse to be highlighted in real-time as audio plays so that I can follow along easily. Implement audio-text synchronization on the Surah page: per-verse audio playback triggered by click/tap, real-time highlight of active verse (soft background glow), animated directional indicator arrow that follows the active verse, audio latency must be <200ms per NFR. Integrate with the Qari audio API.
Uygula Kutlama Animasyonları
As a user, I want to see a celebratory message or animation when I mark a verse as memorized so that I feel motivated to continue. Implement micro-animations: celebratory popup/toast on verse memorization, progressive golden glow spreading on the parchment as more verses are memorized, milestone messages (e.g., '10 ayet ezberlendi!'). Must be visually consistent with the Mushaf theme.
Optimize Performans ve Responsive
As a user, I want the application to load within 3 seconds on a 4G connection and work seamlessly on both desktop and mobile so that I have a smooth experience everywhere. Tasks: audit and optimize bundle size, lazy-load Surah content and audio, verify responsive layouts on mobile/tablet/desktop breakpoints, test load time against the <3s NFR, ensure Turkish language is used for all UI elements.
Memorize the Quran with Ease
An interactive Mushaf experience designed to guide you through memorization from Surah A'lā to Nās — verse by verse, at your own pace.
Memorization Progress
Track your path through the Surahs from Al-A'la to An-Nas
28
Total Surahs Available
7
Surahs Memorized
12 Days
Current Streak
Overall Completion
25%
Featured Surahs for Memorization
Begin your memorization journey with these carefully selected Surahs, ranging from short and accessible to longer, rewarding chapters.
Start Memorizing in 4 Easy Steps
A simple workflow designed to make Quran memorization effortless and enjoyable.
Tools Designed for Memorization
Every feature is thoughtfully crafted to support your Quran memorization journey from Surah Al-A’la to An-Nas.
Synchronized Audio & Text
Follow along as each verse highlights in real-time with the audio recitation. The synchronized display helps you connect pronunciation with the written Arabic, making memorization feel natural and effortless.
Multiple Reciters
Choose from a selection of renowned Qaris, each with a distinct recitation style. Hearing different Tajweed approaches deepens your understanding and strengthens retention of every Surah.
Local Progress Tracking
Your memorization journey is saved directly on your device with no account required. Mark verses as memorized, view your completion percentage, and pick up right where you left off every time.
Featured Reciter
Listen & Follow Along
Mishary Rashid Alafasy
Tajweed-focused RecitationExperience beautiful, clear recitation with precise Tajweed rules. Perfect for memorization of Surahs from Al-A'la to An-Nas.
Binlerce Kullanicinin Guvendigi Platform
sky-kuran ile Kur'an ezberleme yolculuguna baslayanlar deneyimlerini paylasti.
Join Thousands Memorizing the Quran Today
Listen to world-renowned reciters, follow along with synchronized text, and track your memorization journey — all from your browser, no account needed.
No comments yet. Be the first!