https://github.com/classyid/quran-viz

Visualisasi struktur dan statistik Al-Quran berbasis web. Aplikasi ini menyajikan data Al-Quran dalam bentuk grafik interaktif, tabel informatif, dan fakta menarik untuk mempermudah pemahaman struktur kitab suci umat Islam
https://github.com/classyid/quran-viz

api-quran classy-indonesia visualisasi-quran

Last synced: 3 months ago
JSON representation

Visualisasi struktur dan statistik Al-Quran berbasis web. Aplikasi ini menyajikan data Al-Quran dalam bentuk grafik interaktif, tabel informatif, dan fakta menarik untuk mempermudah pemahaman struktur kitab suci umat Islam

• Host: GitHub
• URL: https://github.com/classyid/quran-viz
• Owner: classyid
• Created: 2025-03-23T14:33:34.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-22T15:00:48.000Z (about 1 year ago)
• Last Synced: 2025-05-19T03:12:39.458Z (about 1 year ago)
• Topics: api-quran, classy-indonesia, visualisasi-quran
• Language: HTML
• Homepage: https://s.id/f8Dx3
• Size: 29.3 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Quran-Viz: Visualisasi Struktur Al-Quran

Aplikasi web yang menyajikan visualisasi interaktif tentang struktur dan statistik Al-Quran untuk memudahkan pemahaman terhadap kitab suci umat Islam.

![Quran-Viz Screenshot](https://blog.classy.id/upload/gambar_berita/781e2aff9a91fb5abc4041448667389f_20250323215700.png)

## Fitur

- 📊 Dashboard statistik dengan informasi jumlah surah dan ayat

- 📈 Visualisasi grafik perbandingan surah Makkiyah dan Madaniyah

- 📋 Daftar lengkap surah dengan fitur pencarian

- 📝 Fakta-fakta menarik tentang Al-Quran

- 🌙 Dukungan tema gelap/terang

- 📱 Responsif untuk berbagai ukuran layar

## Demo

Kunjungi [https://s.id/quran-viz](https://s.id/quran-viz) untuk melihat aplikasi dalam aksi.

## Teknologi yang Digunakan

- HTML, CSS, JavaScript

- [Chart.js](https://www.chartjs.org/) - Untuk visualisasi grafik

- [Tailwind CSS](https://tailwindcss.com/) - Framework CSS

- [Font Awesome](https://fontawesome.com/) - Icon

- [Google Apps Script](https://developers.google.com/apps-script) - Backend untuk mengakses API Al-Quran

## Cara Deploy

### Menggunakan Google Apps Script

1. Buat project baru di [Google Apps Script](https://script.google.com/)

2. Buat file `Code.gs` dan salin kode berikut:

```javascript

function doGet() {

  return HtmlService.createHtmlOutputFromFile('index')

    .setTitle('Al-Quran App')

    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

}

```

3. Buat file HTML baru dengan nama `index.html` dan salin kode HTML dari repository ini

4. Klik "Deploy" > "New deployment"

5. Pilih "Web app" sebagai tipe deployment

6. Atur akses ke "Anyone" dan klik "Deploy"

7. Salin URL yang dihasilkan untuk mengakses aplikasi

## Berkontribusi

Silakan berkontribusi untuk meningkatkan aplikasi ini! Buat fork repository, lakukan perubahan, dan ajukan pull request.

## Lisensi

MIT License

## Sumber Data

Data Al-Quran disediakan oleh [Sumber API Al-Quran Anda](https://api-alquran.com).

## Kontak

Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk [membuat issue](https://github.com/classyid/quran-viz/issues) atau hubungi saya di [kontak@classy.id](mailto:kontak@classy.id).