# 🔥 Kalkulator Perencanaan Sistem Hydrant

Website kalkulator interaktif untuk perencanaan sistem hydrant berdasarkan standar SNI 03-1735-2000 dan NFPA 14.

## 📁 Struktur Folder

```
training/
├── index.html                 # Halaman utama website (perhitungan umum)
├── kampus-ruangan.html       # Halaman perhitungan per ruangan/kelas (kampus)
├── standar-sni.html          # Halaman dokumentasi standar SNI
├── tinjauan-pustaka.html     # Halaman tinjauan pustaka & materi pembelajaran
├── contoh-perhitungan.html   # Halaman contoh perhitungan lengkap dengan data nyata
├── README.md                  # Dokumentasi proyek
├── PANDUAN_PENGGUNAAN.md     # Panduan penggunaan
├── hydrant.pdf               # Dokumen referensi (PDF)
├── sni-03-1735-2000.pdf     # Dokumen standar SNI (PDF)
└── assets/                   # Folder untuk assets
    ├── css/
    │   ├── style.css         # File stylesheet utama
    │   ├── standar.css       # Stylesheet untuk halaman standar & tinjauan
    │   ├── kampus.css        # Stylesheet untuk halaman kampus
    │   ├── contoh.css        # Stylesheet untuk halaman contoh perhitungan
    │   └── sidebar.css       # Stylesheet untuk sidebar navigation
    ├── js/
    │   ├── script.js         # File JavaScript untuk logika utama
    │   ├── kampus.js         # File JavaScript untuk perhitungan kampus
    │   └── sidebar.js        # File JavaScript untuk sidebar navigation
    └── images/               # Folder untuk gambar (opsional)
```

## 🎯 Fitur Utama

### 1. **Input Nilai Umum** (Dapat Disesuaikan)
- ✅ Luas bangunan (m²)
- ✅ Tinggi bangunan (m)
- ✅ Jumlah lantai
- ✅ Jumlah hydrant outlet
- ✅ Jarak antar hydrant (m)
- ✅ Jarak hydrant dari dinding (m)
- ✅ Debit per hydrant outlet (LPM)
- ✅ Panjang pipa utama (m)
- ✅ Koefisien Hazen-Williams (C)

### 2. **Nilai Standar Tetap** (Tidak Dapat Diubah)
Berdasarkan **SNI 03-1735-2000** dan **NFPA 14**:
- 🔵 Tekanan minimum di hydrant outlet: **0.35 MPa (3.5 bar)**
- 🔴 Tekanan kerja maksimum: **1.2 MPa (12 bar)**
- 💧 Debit minimum per hydrant: **100 LPM**
- 🔩 Diameter pipa standar: **2.5" (65 mm)**
- 📏 Panjang selang: **30 meter**
- 📐 Jarak maksimum antar hydrant: **45 meter**
- ⚡ Kecepatan aliran maksimum: **3 m/s**
- ⏱️ Waktu cadangan air: **30 menit**

### 3. **Hasil Perhitungan Komprehensif**
- 💧 Debit total sistem (LPM, m³/jam)
- 🔩 Diameter pipa (minimum & yang digunakan)
- 📉 Kehilangan tekanan (head loss)
- 🔴 Tekanan yang dibutuhkan
- ⚡ Kecepatan aliran (dengan status validasi)
- ⚙️ Spesifikasi pompa (kapasitas, head, daya)
- 🏗️ Kapasitas tangki air

### 4. **Fitur Tambahan**
- 🎨 Desain modern dan colorful dengan animasi
- 📱 Fully responsive (Desktop, Tablet, Mobile)
- 🖼️ Gambar ilustratif dari Unsplash
- 🔔 Notifikasi interaktif
- ✨ Animasi smooth dan transisi
- 🖨️ Fitur cetak hasil perhitungan
- 📚 Halaman dokumentasi standar SNI 03-1735-2000 lengkap
- 📖 **Halaman Tinjauan Pustaka** - Materi pembelajaran dasar sistem hydrant & sprinkler
- 📐 **Halaman Contoh Perhitungan** - Contoh perhitungan lengkap dengan data nyata
- 🔗 Link navigasi antar halaman
- 🏫 **Mode Perhitungan per Ruangan/Kelas** - Khusus untuk gedung kampus dengan multiple ruangan
- 📱 **Sidebar Navigation** - Navigasi mudah di semua halaman dengan sidebar yang responsif

### 5. **Mode Perhitungan per Ruangan/Kelas** (Baru!)
Khusus untuk instalasi gedung kampus, sekolah, atau bangunan dengan banyak ruangan:
- ✅ Input dinamis untuk multiple ruangan/kelas
- ✅ Perhitungan detail per ruangan
- ✅ Tabel hasil per ruangan dengan semua detail
- ✅ Summary total untuk seluruh gedung
- ✅ Fleksibel untuk berbagai ukuran ruangan
- ✅ Rekomendasi distribusi hydrant optimal

### 6. **Halaman Tinjauan Pustaka** (Baru!)
Materi pembelajaran dan referensi sebelum melakukan perhitungan:
- ✅ **Definisi Hydrant & Sprinkler** - Pengertian dan karakteristik
- ✅ **Klasifikasi Sistem Hydrant** - Kelas 1, 2, dan 3 berdasarkan NFPA
- ✅ **Jenis-Jenis Hydrant** - Hydrant Box, Pillar, Wall Hydrant
- ✅ **Jenis Sprinkler** - Upright, Pendant, Sidewall
- ✅ **Klasifikasi Sprinkler berdasarkan Suhu** - Dari Ordinary hingga Very High
- ✅ **Istilah-Istilah Penting** - Glosarium lengkap dengan penjelasan
- ✅ **Rumus-Rumus Dasar** - Formula perhitungan dengan contoh
- ✅ **Sistem Proteksi Kebakaran** - Komponen dan penjelasan lengkap
- ✅ **Referensi Standar** - SNI, NFPA, dan pedoman terkait

### 7. **Halaman Contoh Perhitungan Lengkap** (Baru!)
Contoh perhitungan step-by-step dengan data nyata (Mode Umum):
- ✅ **Studi Kasus Gedung Perkantoran** - Data lengkap: luas, lantai, tinggi
- ✅ **8 Langkah Perhitungan Detail** - Dari jumlah hydrant hingga spesifikasi pompa
- ✅ **Rumus dengan Contoh** - Setiap langkah disertai perhitungan lengkap
- ✅ **Hasil Lengkap** - Ringkasan semua hasil perhitungan
- ✅ **Rekomendasi Teknis** - Spesifikasi pipa, pompa, tangki, dan hydrant
- ✅ **Data Nyata** - Menggunakan contoh gedung 5 lantai dengan spesifikasi real
- ✅ **Panduan Input** - Cara menggunakan kalkulator utama dengan data contoh
- ✅ **Perbandingan Mode** - Penjelasan perbedaan mode umum vs mode per ruangan

## 🚀 Cara Menggunakan

1. **Buka Website**
   - Buka file `index.html` di browser web modern (Chrome, Firefox, Edge, Safari)
   - Atau deploy ke web server (XAMPP, Apache, Nginx)

2. **Isi Formulir**
   - Masukkan nilai-nilai umum yang dapat disesuaikan
   - Nilai standar akan otomatis digunakan
   - Minimal isi: Jumlah Hydrant dan Debit per Hydrant

3. **Hitung**
   - Klik tombol "🧮 Hitung Perencanaan"
   - Tunggu proses perhitungan selesai

4. **Lihat Hasil**
   - Hasil perhitungan akan ditampilkan di bagian bawah
   - Scroll ke bawah untuk melihat semua hasil
   - Gunakan tombol "🖨️ Cetak Hasil" untuk mencetak

**Untuk Perhitungan per Ruangan/Kelas (Gedung Kampus):**
1. Klik "🏫 Mode Per Ruangan (Kampus)" di header
2. Isi data umum gedung (nama, jumlah lantai, tinggi)
3. Tambah ruangan/kelas menggunakan tombol "➕ Tambah Ruangan"
4. Isi data setiap ruangan (nama, lantai, luas, jumlah hydrant, dll)
5. Klik "🧮 Hitung Perencanaan untuk Semua Ruangan"
6. Lihat hasil per ruangan dalam tabel dan summary total gedung

## 📋 Standar yang Digunakan

### SNI 03-1735-2000
Tata Cara Perencanaan Sistem Pipa Tegak dan Selang untuk Pencegahan Kebakaran

**📚 Dokumentasi Lengkap:** Website ini menyediakan halaman dokumentasi lengkap standar SNI 03-1735-2000 yang dapat diakses melalui:
- Link di header halaman utama
- Link di bagian nilai standar
- Langsung buka file `standar-sni.html`

Halaman dokumentasi berisi:
- ✅ Informasi umum standar
- ✅ Standar tekanan lengkap
- ✅ Standar debit air
- ✅ Standar pipa dan fitting
- ✅ Standar hydrant outlet
- ✅ Standar selang (hose)
- ✅ Standar pompa
- ✅ Standar tangki air
- ✅ Standar instalasi
- ✅ Persyaratan khusus untuk berbagai jenis bangunan
- ✅ Referensi dan catatan penting

### NFPA 14
Standard for the Installation of Standpipe and Hose Systems

## 💻 Teknologi yang Digunakan

- **HTML5** - Struktur website
- **CSS3** - Styling dengan Grid Layout, Flexbox, Animations
- **JavaScript (Vanilla JS)** - Logika perhitungan
- **Google Fonts (Poppins)** - Typography
- **Unsplash** - Gambar ilustratif

## 📐 Formula Perhitungan

### 1. Debit Total
```
Q_total = jumlah_hydrant × debit_per_hydrant
```

### 2. Diameter Pipa Minimum
```
d_min = √(4Q / (π × v_max))
```

### 3. Head Loss (Hazen-Williams)
```
hf = 10.67 × L × (Q^1.852) / (C^1.852 × D^4.871)
```

### 4. Tekanan Pompa
```
P_pompa = P_outlet + P_head_loss + P_statis
```

### 5. Daya Pompa
```
Power = (Q × H × ρ × g) / (1000 × η)
```

## 🎨 Fitur Desain

- ✨ **Animasi Gradient Background** - Background bergerak secara dinamis
- 🎯 **Smooth Animations** - Transisi halus pada semua elemen
- 🌈 **Colorful Design** - Skema warna modern dengan gradient
- 📱 **Responsive Layout** - Optimal di semua perangkat
- 🔔 **Interactive Notifications** - Notifikasi dengan animasi
- 🎭 **Hover Effects** - Efek hover pada semua elemen interaktif

## 📝 Catatan Penting

⚠️ **DISCLAIMER:**
- Semua nilai standar mengikuti peraturan yang berlaku
- Perhitungan menggunakan formula standar teknik sipil
- Hasil perhitungan hanya sebagai **acuan** dan **estimasi**
- **WAJIB** dikonsultasikan dengan ahli perencana sistem proteksi kebakaran sebelum implementasi
- Untuk sertifikasi resmi, perlu konsultasi dengan ahli yang bersertifikat

## 🛠️ Pengembangan

### Menjalankan Lokal

1. Clone atau download repository ini
2. Buka file `index.html` di browser
3. Atau gunakan web server lokal:
   ```bash
   # XAMPP
   Copy folder ke C:\xampp\htdocs\training\
   
   # Python Simple Server
   python -m http.server 8000
   
   # Node.js http-server
   npx http-server
   ```

### Struktur File

- `index.html` - Halaman utama dengan struktur HTML
- `assets/css/style.css` - Styling dan layout
- `assets/js/script.js` - Logika perhitungan dan interaktivitas

## 📞 Kontak & Support

Untuk pertanyaan, saran, atau masalah teknis:
- Buat issue di repository (jika menggunakan Git)
- Konsultasikan dengan ahli perencana sistem proteksi kebakaran

## 📄 Lisensi

Website ini dibuat untuk keperluan perencanaan sistem hydrant berdasarkan standar yang berlaku.

---

**Dibuat dengan ❤️ untuk memudahkan perencanaan sistem proteksi kebakaran**

**Versi:** 2.0 | **Update:** Desember 2024