IQOMAH
-
00:00
Masjid Al Muttaqin
Jl. Merah Putih Buper Waena
☀️ --°C
Memuat cuaca...
Memuat tanggal...
Memuat tanggal Hijriah...
00:00:00
WAKTU SHOLAT BERIKUTNYA : Memuat... | --:--:-- ☁ API
Subuh
03:56
Terbit
05:15
Dzuhur
11:21
Ashar
14:39
Maghrib
17:27
Isya
18:38
INFO
/* ========================================================= MOBILE MODE DISPLAY INFORMASI MASJID <= 650px ========================================================= */ @media (max-width: 650px) { /* ===================================================== BODY / DISPLAY ====================================================== */ html, body { width: 100%; height: 100%; overflow: hidden; } .display { width: 100vw; height: 100vh; min-height: 100vh; background-position: center; } /* ===================================================== TOP AREA ====================================================== */ .top-area { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: auto; padding: 10px 12px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; z-index: 5; } /* ===================================================== IDENTITAS MASJID ====================================================== */ .mosque-info { width: 58%; max-width: 58%; display: flex; align-items: center; gap: 7px; } .mosque-info .logo { width: 42px; height: 42px; min-width: 42px; padding: 4px; border-radius: 9px; } .mosque-name { font-size: 14px; line-height: 1.15; font-weight: 900; white-space: normal; } .mosque-address { margin-top: 3px; font-size: 8px; line-height: 1.25; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ===================================================== CUACA + TANGGAL ====================================================== */ .weather-area { width: 42%; max-width: 42%; min-width: 0; padding: 0; text-align: right; } .weather-main { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .weather-icon { font-size: 18px; } .weather-temperature { font-size: 21px; line-height: 1; font-weight: 900; } .weather-description { margin-top: 3px; font-size: 8px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .weather-area .date { margin-top: 3px; font-size: 8px; line-height: 1.2; white-space: nowrap; } .hijri-date { margin-top: 2px; font-size: 8px; line-height: 1.2; white-space: nowrap; } /* ===================================================== CENTER / JAM ====================================================== */ .center-area { position: absolute; top: 15.5%; left: 0; width: 100%; transform: none; text-align: center; z-index: 3; } /* * Pada mobile jam dibuat besar tetapi * tidak mengambil terlalu banyak tinggi. */ .center-area .clock { font-size: clamp( 58px, 17vw, 92px ); line-height: .88; letter-spacing: 2px; font-weight: 900; white-space: nowrap; text-shadow: 0 4px 14px rgba(0,0,0,.75); } /* ===================================================== COUNTDOWN ====================================================== */ .countdown-box { position: absolute; top: 19%; left: 10px; right: 10px; bottom: auto; width: auto; min-width: 0; min-height: 42px; margin: 0; padding: 7px 9px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; border-radius: 9px; background: rgba(0,0,0,.68); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 5px 15px rgba(0,0,0,.30); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 8; } .countdown-label { margin: 0; font-size: 7px; letter-spacing: .5px; line-height: 1; white-space: nowrap; } .countdown-colon, .countdown-divider { font-size: 13px; line-height: 1; } .next-prayer { font-size: 15px; line-height: 1; font-weight: 900; white-space: nowrap; } .countdown-time { margin: 0; font-size: 21px; line-height: 1; font-weight: 900; letter-spacing: 1px; white-space: nowrap; } .countdown-finished { margin: 0; font-size: 8px; line-height: 1.2; white-space: nowrap; } /* ===================================================== SUMBER JADWAL ====================================================== */ .schedule-source-inline { margin-left: 3px; min-height: 20px; padding: 2px 5px; gap: 2px; border-radius: 999px; font-size: 6px; line-height: 1; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; } .schedule-source-inline .schedule-source-icon { font-size: 7px; } /* ===================================================== AREA JADWAL SHOLAT MOBILE ====================================================== */ .prayer-area { position: absolute; top: 26.5%; left: 10px; right: 10px; bottom: 48px; width: auto; height: auto; margin: 0; padding: 0 2px; display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(43px, auto); gap: 5px; overflow-y: auto; overflow-x: hidden; z-index: 4; scrollbar-width: none; } .prayer-area::-webkit-scrollbar { display: none; } /* ===================================================== KARTU SHOLAT ====================================================== */ .prayer-card { width: 100%; min-height: 43px; height: 43px; padding: 5px 12px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; justify-content: initial; gap: 7px; border-radius: 9px; text-align: left; background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.20); box-shadow: 0 4px 12px rgba(0,0,0,.22); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transform: none; } /* ===================================================== ICON SHOLAT ====================================================== */ .prayer-icon { width: 30px; height: 30px; margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.10); font-size: 16px; line-height: 1; } /* ===================================================== NAMA SHOLAT ====================================================== */ .prayer-name { margin: 0; font-size: 14px; line-height: 1; font-weight: 800; white-space: nowrap; } /* ===================================================== WAKTU SHOLAT DIBUAT BESAR DAN JELAS ====================================================== */ .prayer-time { margin: 0; font-size: 25px; line-height: 1; font-weight: 900; letter-spacing: .5px; white-space: nowrap; text-align: right; text-shadow: 0 2px 8px rgba(0,0,0,.65); } /* ===================================================== SHOLAT BERIKUTNYA ====================================================== */ .prayer-card.next-prayer-card { min-height: 45px; height: 45px; transform: none; background: rgba(22,163,74,.78); border: 1px solid rgba(255,255,255,.60); box-shadow: 0 5px 16px rgba(22,163,74,.30); } .prayer-card.next-prayer-card .prayer-time { font-size: 27px; text-shadow: 0 0 10px rgba(255,255,255,.65); } /* ===================================================== SHOLAT YANG SUDAH LEWAT ====================================================== */ .prayer-card.passed { opacity: .60; } /* ===================================================== TICKER ====================================================== */ .ticker { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 43px; z-index: 10; } .ticker-label { height: 100%; padding: 0 11px; font-size: 10px; } .ticker-content { height: 100%; font-size: 11px; } } /* ========================================================= HP KECIL <= 400px ========================================================= */ @media (max-width: 400px) { .top-area { padding: 8px 9px 0; } .mosque-info { width: 57%; max-width: 57%; } .mosque-info .logo { width: 37px; height: 37px; min-width: 37px; } .mosque-name { font-size: 12px; } .mosque-address { font-size: 7px; } .weather-area { width: 43%; max-width: 43%; } .weather-temperature { font-size: 18px; } .weather-icon { font-size: 16px; } .weather-description, .weather-area .date, .hijri-date { font-size: 7px; } .center-area { top: 14.5%; } .center-area .clock { font-size: 62px; } .countdown-box { top: 18.5%; left: 8px; right: 8px; min-height: 39px; padding: 6px 7px; gap: 4px; } .countdown-label { font-size: 6px; } .next-prayer { font-size: 14px; } .countdown-time { font-size: 19px; } .schedule-source-inline { display: none; } .prayer-area { top: 25%; left: 8px; right: 8px; bottom: 45px; gap: 4px; grid-auto-rows: 40px; } .prayer-card { min-height: 40px; height: 40px; padding: 4px 10px; grid-template-columns: 29px 1fr auto; gap: 6px; border-radius: 8px; } .prayer-icon { width: 27px; height: 27px; font-size: 14px; } .prayer-name { font-size: 12px; } .prayer-time { font-size: 23px; } .prayer-card.next-prayer-card { min-height: 42px; height: 42px; } .prayer-card.next-prayer-card .prayer-time { font-size: 25px; } .ticker { height: 40px; } .ticker-label { padding: 0 9px; font-size: 9px; } .ticker-content { font-size: 10px; } }