Cara Membuat Jadwal Sholat dengan ajax html

Detail Ornamen Islami yang Ditambahkan:
1.Latar Belakang (Background Pattern): Saya menambahkan pola geometris Islami yang sangat halus pada latar belakang halaman (<body>) dan pada popup Adzan, menggunakan SVG agar terlihat tajam.

2.Bingkai Utama (Main Frame): Seluruh konten dibungkus dalam bingkai tebal berwarna emas dengan sudut yang membulat dan bayangan hijau tua, memberikan kesan seperti pajangan dinding mewah.

3.Ornamen Sudut (Corner Flourishes): Di pojok kiri atas dan kanan atas bingkai utama, terdapat ornamen ukiran emas dan hijau.

4.Kubah & Lentera (Header Dome):

Bagian header (penghitung waktu mundur) dibuat melengkung di bagian bawah menyerupai bentuk kubah masjid (clip-path: ellipse…).

Saya menambahkan dua lentera gantung (fanoos) yang bergoyang perlahan di kiri dan kanan header untuk kesan hidup.

5.Tipografi & Ikon:

Menggunakan font Arab ‘Amiri’ untuk judul “Bismillah” dan “Allah Akbar”.

Menggunakan font ‘Reem Kufi’ untuk teks Latin agar serasi dengan gaya kaligrafi.

Menambahkan simbol ornamen kecil ۞ (Rub el Hizb) di samping setiap nama sholat.

6.Kartu Jadwal (Mihrab): Header pada kartu “HARI INI” dan “BESOK” memiliki bentuk lengkungan kecil di bagian bawahnya, meniru bentuk Mihrab (tempat imam) di masjid.

7.Warna Premium: Palet warna diperkaya menjadi Hijau Zamrud Tua (Dark Emerald), Emas Mewah (Rich Gold), dan Krem (Cream) untuk kesan yang lebih elegan dan hangat.

Silakan dicoba. Tampilan ini akan terlihat sangat bagus jika dijadikan tampilan layar penuh (kiosk mode) pada monitor atau tablet.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jadwal Sholat Islami Premium</title>
    <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@700&family=Reem+Kufi:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --emerald: #044c2c;
            --dark-emerald: #02301c;
            --gold: #d4af37;
            --light-gold: #f3e5b5;
            --cream: #fbf7e6;
            --pattern-color: rgba(212, 175, 55, 0.1); /* Warna pola emas transparan */
        }

        body {
            font-family: 'Reem Kufi', sans-serif;
            /* Latar belakang pola geometris Islami halus */
            background-color: var(--cream);
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            margin: 0;
            padding: 20px;
            display: flex; flex-direction: column; align-items: center;
            min-height: 100vh;
        }

        /* --- Main Container Frame --- */
        .main-frame {
            max-width: 900px; width: 100%;
            background: rgba(255,255,255,0.95);
            border: 3px solid var(--gold);
            border-radius: 25px;
            box-shadow: 0 20px 40px rgba(4, 76, 44, 0.3);
            position: relative;
            overflow: hidden;
            padding-bottom: 30px;
        }

        /* Ornamen Sudut (Corner Flourishes) */
        .corner-ornament {
            position: absolute; width: 100px; height: 100px;
            pointer-events: none; opacity: 0.8;
            background-repeat: no-repeat;
        }
        .top-left { top:0; left:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23d4af37' d='M0 0v100c0-55.2 44.8-100 100-100H0z'/%3E%3Cpath fill='%23044c2c' d='M5 5v90c0-49.7 40.3-90 90-90H5z'/%3E%3C/svg%3E"); }
        .top-right { top:0; right:0; transform: scaleX(-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23d4af37' d='M0 0v100c0-55.2 44.8-100 100-100H0z'/%3E%3Cpath fill='%23044c2c' d='M5 5v90c0-49.7 40.3-90 90-90H5z'/%3E%3C/svg%3E"); }


        /* --- Header Section (Kubah & Lentera) --- */
        .header-dome {
            background: linear-gradient(135deg, var(--dark-emerald), var(--emerald));
            color: var(--gold);
            text-align: center;
            padding: 40px 20px 50px 20px;
            position: relative;
            /* Membuat bentuk lengkung seperti kubah di bawah */
            clip-path: ellipse(150% 100% at 50% 0%);
            border-bottom: 5px solid var(--gold);
        }

        /* Lentera Gantung (Hanging Lanterns) */
        .lantern {
            position: absolute; top: -10px; width: 40px; height: 80px;
            background-repeat: no-repeat; background-size: contain;
            animation: swing 3s infinite ease-in-out alternate;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 100'%3E%3Cpath fill='%23d4af37' d='M25 0c1 0 2 1 2 2v18h8l5 10v30l-5 10H15l-5-10V30l5-10h8V2c0-1 1-2 2-2z'/%3E%3Cpath fill='%23f3e5b5' d='M20 40h10v20H20z'/%3E%3C/svg%3E");
        }
        .l-left { left: 15%; animation-delay: 0.5s; }
        .l-right { right: 15%; }

        @keyframes swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); }}

        .arabic-title { font-family: 'Amiri', serif; font-size: 3rem; margin: 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
        #timer { font-size: 3.5rem; font-weight: 700; letter-spacing: 2px; margin: 15px 0; text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
        .location-badge { display: inline-block; background: var(--dark-emerald); padding: 5px 20px; border-radius: 50px; border: 1px solid var(--gold); font-size: 0.9rem; }

        /* Audio Button Styled */
        #audio-control {
            background: linear-gradient(to right, var(--gold), #eacda3);
            color: var(--dark-emerald); border: none; border-bottom: 3px solid #b89628;
            padding: 12px 25px; border-radius: 50px; cursor: pointer;
            font-weight: 700; transition: 0.3s; margin-top: 20px;
            box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
        }
        #audio-control:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(212, 175, 55, 0.5); }
        #audio-control.active { background: var(--emerald); color: var(--gold); border-color: var(--dark-emerald); }


        /* --- Content Cards Layout --- */
        .cards-wrapper {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 30px; padding: 40px; margin-top: -40px;
        }

        .prayer-card {
            background: white; border-radius: 20px;
            border: 2px solid var(--light-gold);
            overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }

        .card-header-mihrab {
            background: var(--emerald); color: var(--gold);
            padding: 15px; text-align: center; position: relative;
            border-bottom: 3px solid var(--gold);
        }
        /* Bentuk Mihrab kecil di header kartu */
        .card-header-mihrab::after {
            content: ""; position: absolute; bottom: -15px; left: 50%;
            transform: translateX(-50%);
            width: 50px; height: 25px; background: var(--emerald);
            clip-path: ellipse(50% 100% at 50% 100%);
            border-bottom: 3px solid var(--gold);
            z-index: 1;
        }

        .sholat-list-container { padding: 25px 15px 15px 15px; }
        
        .sholat-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 15px; margin-bottom: 8px;
            border-bottom: 1px dashed var(--light-gold);
            transition: 0.3s; position: relative;
        }
        
        /* Ornamen kecil di samping nama sholat */
        .sholat-name::before { content: "۞"; color: var(--gold); margin-right: 10px; font-size: 1.2rem; }
        .sholat-time { font-weight: 700; color: var(--emerald); font-size: 1.1rem; }

        /* Highlight Item Aktif */
        .sholat-item.active {
            background: var(--light-gold);
            border-radius: 10px; border: 2px solid var(--gold);
            transform: scale(1.02);
        }
        .sholat-item.active .sholat-time { color: var(--dark-emerald); }


        /* Popup Adzan Style */
        #adzan-popup {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(4, 76, 44, 0.95); z-index: 100; color: var(--gold);
            flex-direction: column; justify-content: center; align-items: center; text-align: center;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        #adzan-popup h1 { font-family: 'Amiri', serif; font-size: 4rem; margin-bottom: 10px; text-shadow: 0 0 20px rgba(212, 175, 55, 0.8); }
    </style>
</head>
<body>

    <div id="adzan-popup">
        <h1>اَللهُ اَكْبَرُ</h1>
        <h2 style="font-family: 'Reem Kufi';">WAKTU SHOLAT TELAH TIBA</h2>
        <p id="sholat-apa" style="font-size: 1.8rem; color:white; margin: 20px 0;"></p>
        <button onclick="stopAdzan()" style="background: var(--gold); border:none; padding: 12px 30px; border-radius:50px; font-weight:bold; cursor:pointer;">Matikan Suara</button>
    </div>

    <div class="main-frame">
        <div class="corner-ornament top-left"></div>
        <div class="corner-ornament top-right"></div>

        <div class="header-dome">
            <div class="lantern l-left"></div>
            <div class="lantern l-right"></div>

            <p class="arabic-title">بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيم</p>
            <div id="next-prayer-name" style="color:var(--light-gold); margin-top:15px; font-weight: 600; letter-spacing: 1px;">MEMUAT JADWAL...</div>
            <span id="timer">00:00:00</span>
            <div style="margin-top: 10px;">
                <span class="location-badge" id="lokasi">📍 Mencari Lokasi...</span>
            </div>
            
            <button id="audio-control" onclick="toggleAudio()">🔊 Izinkan Suara Adzan</button>
        </div>

        <div class="cards-wrapper">
            <div class="prayer-card">
                <div class="card-header-mihrab">
                    <h3 style="margin:0; font-size:1.4rem;">HARI INI</h3>
                    <span id="tgl-hari-ini" style="font-size:0.9rem; opacity:0.9;">-</span>
                </div>
                <div class="sholat-list-container" id="list-hari-ini">
                    <div style="text-align:center; color:var(--emerald);">Memuat data...</div>
                </div>
            </div>

            <div class="prayer-card">
                <div class="card-header-mihrab" style="background: var(--dark-emerald);">
                    <h3 style="margin:0; font-size:1.4rem;">BESOK</h3>
                    <span id="tgl-besok" style="font-size:0.9rem; opacity:0.9;">-</span>
                </div>
                <div class="sholat-list-container" id="list-besok">
                    <div style="text-align:center; color:var(--emerald);">Memuat data...</div>
                </div>
            </div>
        </div>
    </div>

    <audio id="adzan-audio" src="https://www.islamcan.com/audio/adzan/azan1.mp3" preload="auto"></audio>

<script>
    // --- Konfigurasi ---
    const cityId = '1301'; // ID Kota Jakarta. Ganti jika perlu.
    
    // --- Variabel Global ---
    let prayerTimes = [];
    let isAudioEnabled = false;
    let adzanPlayed = false;
    const adzanAudio = document.getElementById('adzan-audio');

    // --- Fungsi Kontrol Audio ---
    function toggleAudio() {
        isAudioEnabled = !isAudioEnabled;
        const btn = document.getElementById('audio-control');
        if (isAudioEnabled) {
            btn.innerHTML = "🔔 Suara Adzan Aktif";
            btn.classList.add('active');
            // Trik untuk memancing izin browser (play sebentar lalu stop)
            adzanAudio.play().then(() => {
                adzanAudio.pause();
                adzanAudio.currentTime = 0;
            }).catch(e => console.log("Browser memblokir autoplay, perlu interaksi user."));
        } else {
            btn.innerHTML = "🔊 Izinkan Suara Adzan";
            btn.classList.remove('active');
        }
    }

    // --- Fungsi Utama Inisialisasi ---
    async function init() {
        const today = new Date();
        const tomorrow = new Date();
        tomorrow.setDate(today.getDate() + 1);

        // Ambil data hari ini dan besok
        const dataToday = await fetchJadwal(today);
        const dataTomorrow = await fetchJadwal(tomorrow);

        if (dataToday && dataTomorrow) {
            document.getElementById('lokasi').innerText = "📍 " + dataToday.lokasi;
            renderList('list-hari-ini', 'tgl-hari-ini', dataToday);
            renderList('list-besok', 'tgl-besok', dataTomorrow);
            
            // Siapkan data untuk countdown
            setupCountdown(dataToday.jadwal, dataTomorrow.jadwal);
        }
    }

    // --- Fungsi Fetch Data dari API ---
    async function fetchJadwal(date) {
        const y = date.getFullYear(), m = date.getMonth()+1, d = date.getDate();
        try {
            const r = await fetch(`https://api.myquran.com/v2/sholat/jadwal/${cityId}/${y}/${m}/${d}`);
            const res = await r.json();
            return res.data;
        } catch(e) { 
            console.error("Gagal mengambil data");
            return null; 
        }
    }

    // --- Fungsi Render HTML List Sholat ---
    function renderList(containerId, tglId, data) {
        const j = data.jadwal;
        document.getElementById(tglId).innerText = j.tanggal;
        
        const sholats = [
            {n:'Imsak', t:j.imsak}, {n:'Subuh', t:j.subuh}, {n:'Dzuhur', t:j.dzuhur},
            {n:'Ashar', t:j.ashar}, {n:'Maghrib', t:j.maghrib}, {n:'Isya', t:j.isya}
        ];

        let html = '';
        sholats.forEach(s => {
            // Tambahkan ID unik untuk setiap item agar bisa di-highlight nanti
            const itemId = containerId === 'list-hari-ini' ? `item-${s.n.toLowerCase()}` : '';
            
            html += `<div class="sholat-item" id="${itemId}">
                <span class="sholat-name">${s.n}</span>
                <span class="sholat-time">${s.t}</span>
            </div>`;
        });
        document.getElementById(containerId).innerHTML = html;
    }

    // --- Fungsi Logika Countdown ---
    function setupCountdown(jToday, jTomorrow) {
        const names = ['imsak', 'subuh', 'dzuhur', 'ashar', 'maghrib', 'isya'];
        prayerTimes = [];
        
        // Masukkan jadwal hari ini ke array
        names.forEach(name => {
            const [h, m] = jToday[name].split(':');
            const d = new Date(); d.setHours(h, m, 0, 0);
            prayerTimes.push({ name: name, time: d });
        });

        // Tambahkan Imsak besok untuk antisipasi setelah Isya
        const [hI, mI] = jTomorrow.imsak.split(':');
        const nextDay = new Date(); nextDay.setDate(nextDay.getDate() + 1);
        nextDay.setHours(hI, mI, 0, 0);
        prayerTimes.push({ name: 'imsak', time: nextDay });

        startTimer();
    }

    // --- Fungsi Timer Berjalan per Detik ---
    function startTimer() {
        setInterval(() => {
            const now = new Date();
            // Cari jadwal terdekat di masa depan
            const next = prayerTimes.find(p => p.time > now);

            // Reset highlight semua item
            document.querySelectorAll('.sholat-item').forEach(el => el.classList.remove('active'));

            if (next) {
                const diff = next.time - now;
                const h = Math.floor(diff / 3600000);
                const m = Math.floor((diff % 3600000) / 60000);
                const s = Math.floor((diff % 60000) / 1000);

                document.getElementById('next-prayer-name').innerText = `MENUJU WAKTU ${next.name.toUpperCase()}`;
                document.getElementById('timer').innerText = 
                    `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;

                // Highlight jadwal yang sedang dituju di kolom Hari Ini
                const activeItem = document.getElementById(`item-${next.name}`);
                if(activeItem) activeItem.classList.add('active');

                // --- LOGIKA ADZAN ---
                // Jika sisa waktu <= 1 detik DAN belum diputar DAN bukan Imsak
                if (diff <= 1000 && !adzanPlayed && next.name !== 'imsak') {
                    putarAdzan(next.name);
                }

                // Reset flag adzan setelah 1 menit berlalu
                if (diff > 60000) { adzanPlayed = false; }
            }
        }, 1000);
    }

    // --- Fungsi Memutar Adzan & Tampilkan Popup ---
    function putarAdzan(namaSholat) {
        if (isAudioEnabled) {
            adzanPlayed = true;
            adzanAudio.currentTime = 0;
            adzanAudio.play();
            document.getElementById('sholat-apa').innerText = "Waktu " + namaSholat.charAt(0).toUpperCase() + namaSholat.slice(1);
            document.getElementById('adzan-popup').style.display = 'flex';
        }
    }

    // --- Fungsi Stop Adzan ---
    function stopAdzan() {
        adzanAudio.pause();
        document.getElementById('adzan-popup').style.display = 'none';
    }

    // Jalankan aplikasi
    init();
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

<!DOCTYPE html>

<head>

<title>Jadwal Sholat Islami Premium</title>

<style>

:root {

--emerald: #044c2c;

--dark-emerald: #02301c;

--gold: #d4af37;

--light-gold: #f3e5b5;

--cream: #fbf7e6;

--pattern-color: rgba(212, 175, 55, 0.1); /* Warna pola emas transparan */

}

body {

font-family: 'Reem Kufi', sans-serif;

/* Latar belakang pola geometris Islami halus */

background-color: var(--cream);

background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

margin: 0;

padding: 20px;

display: flex; flex-direction: column; align-items: center;

min-height: 100vh;

}

/* --- Main Container Frame --- */

.main-frame {

max-width: 900px; width: 100%;

background: rgba(255,255,255,0.95);

border: 3px solid var(--gold);

border-radius: 25px;

box-shadow: 0 20px 40px rgba(4, 76, 44, 0.3);

position: relative;

overflow: hidden;

padding-bottom: 30px;

}

/* Ornamen Sudut (Corner Flourishes) */

.corner-ornament {

position: absolute; width: 100px; height: 100px;

pointer-events: none; opacity: 0.8;

background-repeat: no-repeat;

}

.top-left { top:0; left:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23d4af37' d='M0 0v100c0-55.2 44.8-100 100-100H0z'/%3E%3Cpath fill='%23044c2c' d='M5 5v90c0-49.7 40.3-90 90-90H5z'/%3E%3C/svg%3E"); }

.top-right { top:0; right:0; transform: scaleX(-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23d4af37' d='M0 0v100c0-55.2 44.8-100 100-100H0z'/%3E%3Cpath fill='%23044c2c' d='M5 5v90c0-49.7 40.3-90 90-90H5z'/%3E%3C/svg%3E"); }

/* --- Header Section (Kubah & Lentera) --- */

.header-dome {

background: linear-gradient(135deg, var(--dark-emerald), var(--emerald));

color: var(--gold);

text-align: center;

padding: 40px 20px 50px 20px;

position: relative;

/* Membuat bentuk lengkung seperti kubah di bawah */

clip-path: ellipse(150% 100% at 50% 0%);

border-bottom: 5px solid var(--gold);

}

/* Lentera Gantung (Hanging Lanterns) */

.lantern {

position: absolute; top: -10px; width: 40px; height: 80px;

background-repeat: no-repeat; background-size: contain;

animation: swing 3s infinite ease-in-out alternate;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 100'%3E%3Cpath fill='%23d4af37' d='M25 0c1 0 2 1 2 2v18h8l5 10v30l-5 10H15l-5-10V30l5-10h8V2c0-1 1-2 2-2z'/%3E%3Cpath fill='%23f3e5b5' d='M20 40h10v20H20z'/%3E%3C/svg%3E");

}

.l-left { left: 15%; animation-delay: 0.5s; }

.l-right { right: 15%; }

@keyframes swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); }}

.arabic-title { font-family: 'Amiri', serif; font-size: 3rem; margin: 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

#timer { font-size: 3.5rem; font-weight: 700; letter-spacing: 2px; margin: 15px 0; text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }

.location-badge { display: inline-block; background: var(--dark-emerald); padding: 5px 20px; border-radius: 50px; border: 1px solid var(--gold); font-size: 0.9rem; }

/* Audio Button Styled */

#audio-control {

background: linear-gradient(to right, var(--gold), #eacda3);

color: var(--dark-emerald); border: none; border-bottom: 3px solid #b89628;

padding: 12px 25px; border-radius: 50px; cursor: pointer;

font-weight: 700; transition: 0.3s; margin-top: 20px;

box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);

}

#audio-control:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(212, 175, 55, 0.5); }

#audio-control.active { background: var(--emerald); color: var(--gold); border-color: var(--dark-emerald); }

/* --- Content Cards Layout --- */

.cards-wrapper {

display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));

gap: 30px; padding: 40px; margin-top: -40px;

}

.prayer-card {

background: white; border-radius: 20px;

border: 2px solid var(--light-gold);

overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.05);

}

.card-header-mihrab {

background: var(--emerald); color: var(--gold);

padding: 15px; text-align: center; position: relative;

border-bottom: 3px solid var(--gold);

}

/* Bentuk Mihrab kecil di header kartu */

.card-header-mihrab::after {

content: ""; position: absolute; bottom: -15px; left: 50%;

transform: translateX(-50%);

width: 50px; height: 25px; background: var(--emerald);

clip-path: ellipse(50% 100% at 50% 100%);

border-bottom: 3px solid var(--gold);

z-index: 1;

}

.sholat-list-container { padding: 25px 15px 15px 15px; }

.sholat-item {

display: flex; justify-content: space-between; align-items: center;

padding: 12px 15px; margin-bottom: 8px;

border-bottom: 1px dashed var(--light-gold);

transition: 0.3s; position: relative;

}

/* Ornamen kecil di samping nama sholat */

.sholat-name::before { content: "۞"; color: var(--gold); margin-right: 10px; font-size: 1.2rem; }

.sholat-time { font-weight: 700; color: var(--emerald); font-size: 1.1rem; }

/* Highlight Item Aktif */

.sholat-item.active {

background: var(--light-gold);

border-radius: 10px; border: 2px solid var(--gold);

transform: scale(1.02);

}

.sholat-item.active .sholat-time { color: var(--dark-emerald); }

/* Popup Adzan Style */

#adzan-popup {

display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;

background: rgba(4, 76, 44, 0.95); z-index: 100; color: var(--gold);

flex-direction: column; justify-content: center; align-items: center; text-align: center;

background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}

#adzan-popup h1 { font-family: 'Amiri', serif; font-size: 4rem; margin-bottom: 10px; text-shadow: 0 0 20px rgba(212, 175, 55, 0.8); }

</style>

</head>

<body>

<h1>اَللهُ اَكْبَرُ</h1>

<h2 style="font-family: 'Reem Kufi';">WAKTU SHOLAT TELAH TIBA</h2>

<button onclick="stopAdzan()" style="background: var(--gold); border:none; padding: 12px 30px; border-radius:50px; font-weight:bold; cursor:pointer;">Matikan Suara</button>

</div>

<p class="arabic-title">بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيم</p>

<div id="next-prayer-name" style="color:var(--light-gold); margin-top:15px; font-weight: 600; letter-spacing: 1px;">MEMUAT JADWAL...</div>

<span class="location-badge" id="lokasi">📍 Mencari Lokasi...</span>

</div>

<button id="audio-control" onclick="toggleAudio()">🔊 Izinkan Suara Adzan</button>

</div>

</div>

<div style="text-align:center; color:var(--emerald);">Memuat data...</div>

</div>

<h3 style="margin:0; font-size:1.4rem;">BESOK</h3>

</div>

<div style="text-align:center; color:var(--emerald);">Memuat data...</div>

</div>

// --- Konfigurasi ---

const cityId = '1301'; // ID Kota Jakarta. Ganti jika perlu.

// --- Variabel Global ---

let prayerTimes = [];

let isAudioEnabled = false;

let adzanPlayed = false;

const adzanAudio = document.getElementById('adzan-audio');

// --- Fungsi Kontrol Audio ---

function toggleAudio() {

isAudioEnabled = !isAudioEnabled;

const btn = document.getElementById('audio-control');

if (isAudioEnabled) {

btn.innerHTML = "🔔 Suara Adzan Aktif";

btn.classList.add('active');

// Trik untuk memancing izin browser (play sebentar lalu stop)

adzanAudio.play().then(() => {

adzanAudio.pause();

adzanAudio.currentTime = 0;

}).catch(e => console.log("Browser memblokir autoplay, perlu interaksi user."));

} else {

btn.innerHTML = "🔊 Izinkan Suara Adzan";

btn.classList.remove('active');

}

// --- Fungsi Utama Inisialisasi ---

async function init() {

const today = new Date();

const tomorrow = new Date();

tomorrow.setDate(today.getDate() + 1);

// Ambil data hari ini dan besok

const dataToday = await fetchJadwal(today);

const dataTomorrow = await fetchJadwal(tomorrow);

if (dataToday && dataTomorrow) {

document.getElementById('lokasi').innerText = "📍 " + dataToday.lokasi;

renderList('list-hari-ini', 'tgl-hari-ini', dataToday);

renderList('list-besok', 'tgl-besok', dataTomorrow);

// Siapkan data untuk countdown

setupCountdown(dataToday.jadwal, dataTomorrow.jadwal);

}

// --- Fungsi Fetch Data dari API ---

async function fetchJadwal(date) {

const y = date.getFullYear(), m = date.getMonth()+1, d = date.getDate();

try {

const r = await fetch(`https://api.myquran.com/v2/sholat/jadwal/${cityId}/${y}/${m}/${d}`);

const res = await r.json();

return res.data;

} catch(e) {

console.error("Gagal mengambil data");

return null;

}

// --- Fungsi Render HTML List Sholat ---

function renderList(containerId, tglId, data) {

const j = data.jadwal;

document.getElementById(tglId).innerText = j.tanggal;

const sholats = [

{n:'Imsak', t:j.imsak}, {n:'Subuh', t:j.subuh}, {n:'Dzuhur', t:j.dzuhur},

{n:'Ashar', t:j.ashar}, {n:'Maghrib', t:j.maghrib}, {n:'Isya', t:j.isya}

];

let html = '';

sholats.forEach(s => {

// Tambahkan ID unik untuk setiap item agar bisa di-highlight nanti

const itemId = containerId === 'list-hari-ini' ? `item-${s.n.toLowerCase()}` : '';

html += `<div class="sholat-item" id="${itemId}">

</div>`;

});

document.getElementById(containerId).innerHTML = html;

}

// --- Fungsi Logika Countdown ---

function setupCountdown(jToday, jTomorrow) {

const names = ['imsak', 'subuh', 'dzuhur', 'ashar', 'maghrib', 'isya'];

prayerTimes = [];

// Masukkan jadwal hari ini ke array

names.forEach(name => {

const [h, m] = jToday[name].split(':');

const d = new Date(); d.setHours(h, m, 0, 0);

prayerTimes.push({ name: name, time: d });

});

// Tambahkan Imsak besok untuk antisipasi setelah Isya

const [hI, mI] = jTomorrow.imsak.split(':');

const nextDay = new Date(); nextDay.setDate(nextDay.getDate() + 1);

nextDay.setHours(hI, mI, 0, 0);

prayerTimes.push({ name: 'imsak', time: nextDay });

startTimer();

}

// --- Fungsi Timer Berjalan per Detik ---

function startTimer() {

setInterval(() => {

const now = new Date();

// Cari jadwal terdekat di masa depan

const next = prayerTimes.find(p => p.time > now);

// Reset highlight semua item

document.querySelectorAll('.sholat-item').forEach(el => el.classList.remove('active'));

if (next) {

const diff = next.time - now;

const h = Math.floor(diff / 3600000);

const m = Math.floor((diff % 3600000) / 60000);

const s = Math.floor((diff % 60000) / 1000);

document.getElementById('next-prayer-name').innerText = `MENUJU WAKTU ${next.name.toUpperCase()}`;

document.getElementById('timer').innerText =

`${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;

// Highlight jadwal yang sedang dituju di kolom Hari Ini

const activeItem = document.getElementById(`item-${next.name}`);

if(activeItem) activeItem.classList.add('active');

// --- LOGIKA ADZAN ---

// Jika sisa waktu <= 1 detik DAN belum diputar DAN bukan Imsak

if (diff <= 1000 && !adzanPlayed && next.name !== 'imsak') {

putarAdzan(next.name);

}

// Reset flag adzan setelah 1 menit berlalu

if (diff > 60000) { adzanPlayed = false; }

}

}, 1000);

}

// --- Fungsi Memutar Adzan & Tampilkan Popup ---

function putarAdzan(namaSholat) {

if (isAudioEnabled) {

adzanPlayed = true;

adzanAudio.currentTime = 0;

adzanAudio.play();

document.getElementById('sholat-apa').innerText = "Waktu " + namaSholat.charAt(0).toUpperCase() + namaSholat.slice(1);

document.getElementById('adzan-popup').style.display = 'flex';

}

// --- Fungsi Stop Adzan ---

function stopAdzan() {

adzanAudio.pause();

document.getElementById('adzan-popup').style.display = 'none';

}

// Jalankan aplikasi

init();

</script>

</body>

</html>

Dibaca: 64

Jangan Lewatkan

Komentar

Recent Post