<!DOCTYPE html>
<html lang="id">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>GKPB MDC App</title>

<style>

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto;
}

/* BACKGROUND */

body{

background:
radial-gradient(circle at 20% 20%,#eef1ff,#ffffff),
radial-gradient(circle at 80% 80%,#f6f7ff,#ffffff);

display:flex;
justify-content:center;
padding:25px;
transition:.35s;

}

body.dark{

background:
radial-gradient(circle at 20% 20%,#141414,#000),
radial-gradient(circle at 80% 80%,#1f1f1f,#000);

color:white;

}

/* CONTAINER */

.container{
width:100%;
max-width:430px;
position:relative;
}

/* IOS SWITCH */

.mode-toggle{

position:absolute;
top:-10px;
right:0;

}

.ios-switch{
position:relative;
width:60px;
height:32px;
display:inline-block;
}

.ios-switch input{
display:none;
}

.track{

position:absolute;
width:100%;
height:100%;
background:#e5e5ea;
border-radius:30px;
transition:.3s;

display:flex;
align-items:center;
justify-content:space-between;
padding:0 7px;

}

.thumb{

position:absolute;
width:26px;
height:26px;

background:white;
border-radius:50%;

top:3px;
left:3px;

transition:.3s;
box-shadow:0 2px 6px rgba(0,0,0,.25);

}

.icon{
font-size:13px;
opacity:.6;
}

input:checked + .track{
background:#4c6fff;
}

input:checked + .track .thumb{
transform:translateX(28px);
}

/* CARD */
.card{
margin-top:35px;
background:rgba(255,255,255,0.75);
backdrop-filter:blur(35px);
border-radius:28px;
padding:22px;
box-shadow:0 20px 45px rgba(0,0,0,0.12);
}

body.dark .card{
background:rgba(30,30,30,0.65);
}

/* HEADER */
.header{
display:flex;
gap:15px;
align-items:center;

}

.icon-app img{
width:100%;
height:100%;
object-fit:cover;
border-radius:20px;
}

.icon-app{
width:70px;
height:70px;
border-radius:20px;
background:linear-gradient(135deg,#4c6fff,#7f8fff);
display:flex;
align-items:center;
justify-content:center;

font-size:30px;
color:white;

}

.title{
font-size:19px;
font-weight:600;
}

.meta{
font-size:13px;
opacity:.7;
}

.rating{
margin-top:4px;
color:#ffb400;
font-size:14px;
}

/* SLIDER */
.slider{
margin-top:20px;
display:flex;
gap:12px;
overflow-x:auto;
scroll-snap-type:x mandatory;
}

.slider::-webkit-scrollbar{
display:none;
}

.slide{
min-width:240px;
scroll-snap-align:center;
}

.slide img{
width:100%;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
object-fit:cover;
}

/* DESCRIPTION */
.desc{
margin-top:16px;
font-size:14px;
line-height:1.6;
max-height:120px;
overflow:hidden;
}

.desc.open{
max-height:none;
}

.more{
font-size:13px;
color:#4c6fff;
margin-top:6px;
cursor:pointer;
}

/* BUTTONS */
.buttons{
margin-top:22px;
display:flex;
gap:12px;
}

.btn{
flex:1;
padding:15px;
border:none;
border-radius:25px;
font-weight:600;
font-size:15px;
cursor:pointer;
transition:.25s;
}

.btn:active{
transform:scale(.95);
}

.play{
background:linear-gradient(180deg,#39d45d,#29be4b);
color:white;
box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

.ios{
background:linear-gradient(180deg,#111,#000);
color:white;
}

/* IOS SHEET */
.sheet{
position:fixed;
bottom:-100%;
left:0;
right:0;
background:white;
border-radius:30px 30px 0 0;
padding:24px;
transition:.35s;
box-shadow:0 -15px 40px rgba(0,0,0,0.25);
}

body.dark .sheet{
background:#111;
color:white;
}

.sheet.show{
bottom:0;
}

.sheet h3{
margin-bottom:12px;
}

.sheet ol{
margin-left:18px;
line-height:1.6;
font-size:14px;
}

.close{
margin-top:12px;
background:#ddd;
}

/* FLOATING HELP */
.help{
position:fixed;
bottom:20px;
right:20px;

width:58px;
height:58px;

border-radius:50%;
background:white;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
cursor:pointer;
z-index:10;
}

/* icon gif */
.help-icon{
width:34px;
height:34px;
object-fit:contain;
}

/* pulse */
.help::before{
content:"";
position:absolute;
width:58px;
height:58px;
border-radius:50%;
background:rgba(76,111,255,.35);
animation:pulse 2s infinite;
z-index:-1;
}

@keyframes pulse{
0%{
transform:scale(1);
opacity:.6;
}

70%{
transform:scale(1.7);
opacity:0;
}

100%{
opacity:0;
}

/* PULSE */
.help::before{
content:"";
position:absolute;

width:58px;
height:58px;
border-radius:50%;
background:rgba(76,111,255,.35);
animation:pulse 2s infinite;
z-index:-1;
}

@keyframes pulse{
0%{
transform:scale(1);
opacity:.6;
}

70%{
transform:scale(1.7);
opacity:0;
}

100%{
opacity:0;
}

.guide{
margin-top:10px;
margin-bottom:10px;
}

.step{
display:flex;
gap:12px;
margin-bottom:12px;
align-items:flex-start;
}

.step .icon{
width:40px;
height:40px;
border-radius:10px;
background:#f1f3ff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;

}

body.dark .step .icon{
background:#222;
}

.step p{
font-size:13px;
opacity:.8;
margin-top:2px;
}

</style>
</head>
<body>

<div class="container">

<!-- SWITCH -->

<div class="mode-toggle">
<label class="ios-switch">
<input type="checkbox" onchange="toggleMode()">
<span class="track">
<span class="icon">🌙</span>
<span class="icon">☀️</span>
<span class="thumb"></span>
</span>

</label>
</div>
<div class="card">
<div class="header">
<div class="icon-app">
<img src="https://mdcjombang.id/asecet/logo.png">
</div>
<div>

<div class="title">GKPB MDC JOMBANG</div>

<div class="meta">Aplikasi Gereja</div>

<div class="rating">★★★★★ 4.9</div>

</div>

</div>

<div class="slider">

<div class="slide"><img src="https://picsum.photos/400/700?1"></div>
<div class="slide"><img src="https://picsum.photos/400/700?2"></div>
<div class="slide"><img src="https://picsum.photos/400/700?3"></div>

</div>

<div class="desc" id="desc">

<strong>GKPB MDC JOMBANG</strong><br>
Hidup dalam Firman. Bertumbuh dalam Iman. Berjalan bersama Tuhan.<br><br>

Di tengah kesibukan hidup sehari-hari, setiap kita membutuhkan waktu untuk kembali kepada Tuhan, mendengar Firman-Nya, dan memperkuat iman. GKPB MDC JOMBANG hadir sebagai sarana rohani yang membantu jemaat untuk tetap terhubung dengan Tuhan kapan saja dan di mana saja.<br><br>

✨ <strong>Fitur yang tersedia</strong><br><br>

🙏 <strong>Ibadah Harian</strong><br>
Renungan Firman Tuhan untuk pagi, siang, dan malam.<br><br>

📅 <strong>Materi Kegiatan Sepekan</strong><br>
Informasi kegiatan gereja untuk seluruh jemaat.<br><br>

📰 <strong>Warta Jemaat</strong><br>
Informasi terbaru kegiatan dan pelayanan gereja.<br><br>

📺 <strong>Khotbah Mingguan</strong><br>
Akses khotbah melalui YouTube.<br><br>

📝 <strong>Formulir Digital Jemaat</strong><br>
Mempermudah jemaat mengakses pelayanan gereja.

</div>

<div class="more" id="moreBtn" onclick="toggleDesc()">Selengkapnya</div>

<div class="buttons">

<button class="btn play"
onclick="window.location='https://play.google.com/store/apps/details?id=com.mdcjombang'">
Play Store
</button>

<button class="btn ios"
onclick="openIOS()">
iPhone
</button>
</div>
</div>
</div>

<!-- IOS INSTALL -->
<<div class="sheet" id="iosSheet">
<h3>Install Aplikasi di iPhone</h3>
<div class="guide">
<div class="step">
<div class="icon">🌐</div>
<div>
<b>1. Buka di Safari</b>
<p>Pastikan halaman ini dibuka menggunakan browser Safari.</p>
</div>
</div>

<div class="step">
<div class="icon">🔗</div>
<div>
<b>2. Tekan tombol Share</b>
<p>Tekan ikon Share (kotak dengan panah ke atas).</p>
</div>
</div>

<div class="step">
<div class="icon">➕</div>
<div>
<b>3. Pilih Add to Home Screen</b>
<p>Pilih menu Add to Home Screen.</p>
</div>
</div>

<div class="step">
<div class="icon">📱</div>
<div>
<b>4. Tekan Add</b>
<p>Aplikasi akan muncul di layar utama seperti aplikasi biasa.</p>
</div>
</div>

</div>

<button class="btn play"
onclick="window.location='https://mdcjombang.id'">
Buka Aplikasi
</button>

<button class="btn close"
onclick="closeIOS()">
Tutup
</button>

</div>

<!-- HELP -->
<div class="help" onclick="window.location='HELP_LINK'">
<img src="https://mdcjombang.id/asecet/support.gif" class="help-icon">
</div>

<svg viewBox="0 0 24 24" fill="#4c6fff">
<path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 17a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm2.07-7.75l-.9.92c-.72.73-1.17 1.33-1.17 2.33h-2v-.5c0-.83.45-1.58 1.17-2.3l1.24-1.26a2 2 0 10-3.41-1.41H6a4 4 0 117.07 2.75z"/>
</svg>
</div>

<script>

function toggleMode(){
document.body.classList.toggle("dark")
}

function toggleDesc(){
let d=document.getElementById("desc")
let btn=document.getElementById("moreBtn")

d.classList.toggle("open")

if(d.classList.contains("open")){
btn.innerText="Sembunyikan"
}else{
btn.innerText="Selengkapnya"
}

}

function openIOS(){
document.getElementById("iosSheet").classList.add("show")
}

function closeIOS(){
document.getElementById("iosSheet").classList.remove("show")
}

</script>

</body>
</html>