Code Monkey home page Code Monkey logo

colorful-quran's Introduction

Holy Quran with Colorful Tajweed Anotation

This project is still on progress. The main goal is to make Static Quran website complete with tajweed anotation.

Source

For now we use Quran data from kemenag. We will add other version later.

Developing

Package Manager

We are using pnpm for node package manager, so you should install it first to run this project. npm install -g pnpm

Once you've created a project and installed dependencies with pnpm install (or pnpm i), start a development server:

pnpm dev

Building

This project using svelte-kit and @sveltejs/adapter-static for easy deployment on cloudflare page. To build on your local macine, please run

pnpm build

Then just serve the /build folder

Contibuting

Please read contributing section

colorful-quran's People

Contributors

axmad386 avatar deepsourcebot avatar falentio avatar hilmiardani avatar sangvictim avatar yudianwebdev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

colorful-quran's Issues

[Feature Request] add feature last reading

last reading feature, to help users remember their last reading.
you can use asyncstorage to save the last surah and ayat, and displayed on the home page.
and then the link can be clicked and redirected to the last page.

thank's

[Tajweed] Auto Tajweed Generator

I found good algoritm on other repo, but on python language. We can refactor it to fit our project.
So the goal is to make script that can generate tajweed rule json like we did earlier, but automatic. I hope we can make the Tajweed Generator that can run automatically to determine which is ghunnah, ikhfa, etc. I will make the template of this script soon. Please wait for me ๐Ÿ˜ƒ
This is the repo, you can check it https://github.com/cpfair/quran-tajweed
But that repo use data from recite quran. Our data is from kemenag, so wes must rebuild the algorithm from scratch

Progress

[Feature Request] About Us Link

About Us Feature

When user visit the website, they didn't know about this app, who made this app, etc.
So I propose there is link with question icon (?) on home page (may be on top right). When it's clicked, the pop up appear.

Content

Inside popup, should includes:

  • about us, simple description about this app, app version
  • contributors, we can use this github api
  • link to this repo (user can submit issue here)
  • change log
  • license

Warna Font dalam TextArea pada Modal Dialog Go to Ayat dalam tema gelap kurang jelas

image

Adakalanya ketika membaca suatu surat terjeda (tidak sampai tuntas satu surat). Sehingga saya menyimpan titik surat dan ayat terakhir yang saya baca dalam catatan saya sendiri, misal 9:28 (At Taubah, ayat ke 28).
Lalu disaat ketika ingin lanjut membaca lagi, saya membuka surat tersebut dan mengklik Go To Ayat untuk mengetik ayatnya. Nah, dalam dark mode, ketikan font angka yang tampil kurang terang/jelas.
Apakah bisa style font tersebut dijadikan semisal bold atau lebih darker agar lebih jelas?

[Tajweed] Complete Tajweed Anotation Kemenag Version

Tajweed Anotation Kemenag Version

Description

Progress to complete tajweed anotation for kemenag version
For more detail, install this Kemenag Quran App. Open Quran per Halaman page
For now, we use recitequran.com for tajweed reference.

How to Contirbute

All anotation listed on json file under /src/db/kemenag/surah/x.json, where x is id of surah.
See example for surah 1.json
Example of tajweed json structure

"tajweed": [
   {
      "class": "madd-6",
     "start": 0,
     "end": 2
   }
]

start and end is start and end of selected arabic character.
Use tajweed generator tool to generate the json. see contributing section

Known Issue

Currently we cannot styling for harakat only. So we must syling huruf + harakat

List of completed tajweed anotation

  • #5
  • #6
  • surah 3
  • surah 4
  • surah 5
  • surah 6
  • surah 7
  • surah 8
  • surah 9
  • surah 10
  • surah 11
  • surah 12
  • surah 13
  • surah 14
  • surah 15
  • surah 16
  • surah 17
  • surah 18
  • surah 19
  • surah 20

Warna Untuk Qalqalah Terlalu Gelap

image

Apakah warna untuk qalqalah bisa diganti dengan yang agak terang? Karena sangat mengganggu saat membaca ketika bertemu dengan qalqalah, huruf tidak kelihatan.

[Feature Request] Go to Aya number

Need tools like button or dropdown to go to specific aya number. I think this is necessary for long surah like Al Baqarah etc that has hundred of aya

[Docs] Add info about Tajweed Generator is deprecated

Tajweed Generator v1 and v2 is now deprecated, we are using tajweed rule and generator script instead. Need to add this info to Contributing section. We also need to explain how to add or update Tajweed rules and how to generate json from them.

[Feature Request] PWA Support

It will be awesome if we can install this app via pwa support.

Todo

  • set manifest correctly with icons
  • set service-worker (offline mode)
  • make sure PWA is installable

[Feature Request] page tasbih

add layout for tasbih page, in there any counter button and reset button,
counter button count from 1 to 9999, and can't be minus like -1,
reset button set counter button to 0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.