<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#2196f3">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<style>
:root{
 --bg:#f4f5f7;
 --card:rgba(255,255,255,.72);
 --text:#222;
 --shadow:0 8px 24px rgba(0,0,0,.15);
}

body.dark{
 --bg:#0f1116;
 --card:rgba(25,25,28,.7);
 --text:#fff;
}

body{
 margin:0;
 min-height:220vh;
 background:var(--bg);
 font-family:-apple-system,Arial,sans-serif;
 color:var(--text);
 transition:.25s;
 overflow-x:hidden;
}

/* TOP BAR */
.topbar{
 position:fixed;
 top:10px;
 left:50%;
 transform:translateX(-50%);
 width:95%;
 max-width:520px;
 display:flex;
 justify-content:space-between;
 z-index:2000;
}

.menu-btn,.switch{
 background:var(--card);
 backdrop-filter:blur(18px);
 box-shadow:var(--shadow);
}

.menu-btn{
 width:42px;height:42px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:20px;
 cursor:pointer;
}

.switch{
 width:62px;height:34px;
 border-radius:20px;
 position:relative;
 cursor:pointer;
}

.knob{
 width:28px;height:28px;
 border-radius:50%;
 background:#fff;
 position:absolute;
 top:3px;left:3px;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:.4s cubic-bezier(.34,1.56,.64,1);
}

body.dark .knob{
 left:31px;
 background:#222;
 color:#fff;
}

/* SIDEBAR */
.sidebar{
 position:fixed;
 top:0;
 left:-85%;
 width:82%;
 max-width:340px;
 height:100%;
 background:rgba(255,255,255,.18);
 backdrop-filter:blur(30px) saturate(140%);
 border-right:1px solid rgba(255,255,255,.35);
 box-shadow:0 20px 40px rgba(0,0,0,.25);
 transition:left .42s cubic-bezier(.22,1,.36,1);
 padding-top:80px;
 z-index:1500;
}
.sidebar.show{ left:0; }

.sidebar a{
 display:flex;
 align-items:center;
 gap:12px;
 padding:14px 18px;
 margin:4px 10px;
 border-radius:14px;
 text-decoration:none;
 color:#fff;
 font-weight:600;
}

.sidebar a.active{
 background:rgba(70,150,255,.45);
}

.overlay{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.25);
 opacity:0;
 pointer-events:none;
 transition:.3s;
 z-index:1400;
}
.overlay.show{
 opacity:1;
 pointer-events:auto;
}

/* NAVBAR */
.bottom-nav{
 position:fixed;
 bottom:calc(10px + env(safe-area-inset-bottom));
 left:50%;
 transform:translateX(-50%);
 width:95%;
 max-width:520px;
 height:clamp(58px,9vh,72px);

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

 border-radius:34px;
 background:var(--card);
 backdrop-filter:blur(18px);

 box-shadow:var(--shadow);
 transition:transform .35s ease;
 z-index:2000;
}

.bottom-nav.hide{
 transform:translateX(-50%) translateY(110px);
}

.slider{
 position:absolute;
 height:42px;
 width:clamp(70px,22vw,140px);
 border-radius:24px;
 background:#e7f2ff;
 transition:.35s cubic-bezier(.34,1.56,.64,1);
 z-index:0;
}

.nav-item{
 flex:1;
 text-align:center;
 font-size:clamp(10px,2.3vw,13px);
 font-weight:600;
 cursor:pointer;
 color:var(--text);
 z-index:2;
 user-select:none;
 text-decoration:none;
}

.icon{
 display:block;
 font-size:clamp(16px,4.5vw,21px);
 transition:.3s cubic-bezier(.34,1.56,.64,1);
}

.nav-item.active{
 color:#0a84ff;
}

.nav-item.active .icon{
 transform:translateY(-5px) scale(1.08);
}

/* SLIDESHOW */

.slideshow-container{
 position:relative;
 width:100%;
 max-width:800px;
 margin:20px auto;
 border-radius:10px;
 overflow:hidden;
 box-shadow:0 4px 15px rgba(0,0,0,.2);
}

.slide{ display:none; }

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

.dot-container{
 text-align:center;
 margin-top:10px;
}

.dot{
 height:12px;
 width:12px;
 margin:0 5px;
 background:#bbb;
 border-radius:50%;
 display:inline-block;
 cursor:pointer;
}

.dot.active{
 background:#2196f3;
}

 /* KONTEN UTAMA */
        .container, .container-kesan {
            max-width: 800px;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            text-align: center;
            color: #fff;
            margin-top: 20px;
        }
 .container { background-color: #c96f6f; }
        .container-kesan { background-color: #0a97eb; }
        h1, h2, h3 { font-weight: bold; }
        h1 { font-size: 2.8em; margin-bottom: 20px; }
        h2 { font-size: 2em; margin-top: 10px; }
        h3 { font-size: 2em; margin-top: 10px; }
        p { line-height: 1.8; font-size: 1.1em; color: #fff; margin-top: 10px; font-weight: normal; }
        .contact-info { color: #000; text-decoration: none; }
        .contact-info:hover { text-decoration: underline; }
                /* Tambahan kecil agar paragraf/list Filosofi nyaman dibaca */
        .filosofi-wrap { text-align: justify; }
        .filosofi-list {
            margin: 0;           /* tetap rapat seperti sebelumnya */
            padding-left: 1.2em; /* beri ruang untuk angka tanpa mengubah feel */
        }
        .filosofi-list li { 
            margin: .25em 0; 
        }

        .contact-info { color: #000; text-decoration: none; }
        .contact-info:hover { text-decoration: underline; }
        
                /* FOOTER */
        footer {
            text-align: center;
            padding: 10px;
            font-size: 1em;
            color: #ffffff; /* Mengubah warna teks agar terlihat */
            margin-top: auto;
        }


/* CONTENT */
.content{
 padding-top:calc(60px + env(safe-area-inset-top));
 padding-left:20px;
 padding-right:20px;
 padding-bottom:120px;
}
.sidebar .admin-menu{
display:none !important;
}

.nav-item{
  text-decoration: none;   /* hilangin garis bawah */
  color: inherit;          /* warna ikut parent */
}
</style>
</head>

<body>

<div class="topbar">
 <div class="menu-btn" onclick="toggleMenu()">☰</div>
 <div class="switch" onclick="toggleDark()">
   <div class="knob" id="icon">☀️</div>
 </div>
</div>

<!-- SIDEBAR -->
<div class="sidebar" id="sidebar">
 <a class="active" href="/id/index">🏠 Home</a>
 <a href="/id/ibadah">🙏 Ibadah harian</a>
 <a href="/id/warta">📰 Warta Jemaat</a>
 <a href="/id/alkitab">📖 Alkitab</a>
 <a href="/id/youtube">▶️ Khotbah mingguan</a>
 <a href="/id/persembahan">⛪ Persembahan Gereja</a>
 <a href="/id/informasi">🔔 Informasi</a>
 <a href="/id/youth">🧑 Youth</a>
 <a href="/id/starkids">⭐ Starkids</a>
 <a href="/id/support">❤️ Help & Support</a>
 <a href="/id/akun">👤 Akun Saya</a>
 <a href="/id/logout">↩️ Logout</a>

</div>

<div class="overlay" id="overlay" onclick="toggleMenu()"></div>

<div class="slideshow-container">
<div id="slides"></div>
</div>

<div class="dot-container" id="dots"></div>

<div class="container">
<h1>Visi dan Filosofi GKPB MDC</h1>

<h2>Visi</h2>
<p>
Menjangkau setiap orang dengan Injil, memuridkan mereka sesuai dengan
Amanat Agung Tuhan Yesus Kristus, dan mengutus setiap anggota jemaat
menjadi saksi di tengah dunia.
</p>

<p>
Membangun kehidupan kekristenan dalam jemaat lokal menurut pola gereja
mula-mula secara otentik seperti yang tercatat dalam kitab Perjanjian Baru.
</p>

<h2>Filosofi</h2>

<div class="filosofi-wrap">
<ol class="filosofi-list">
<li>Ketuhanan Yesus Kristus (<em>The Lordship of Jesus Christ</em>)</li>
<li>Hubungan Ikat-Janji (<em>Covenant Relationship</em>)</li>
<li>Mentalitas Kerajaan (<em>Kingdom Mentality</em>)</li>
<li>Melakukan yang Terbaik (<em>Spirit of Excellence</em>)</li>
<li>Pengabdian Diri (<em>Servanthood</em>)</li>
</ol>
</div>
</div>

 <div class="text-center mt-5">
        <h1 class="text-lg font-bold mb-4">GEREJA KRISTEN PERJANJIAN BARU</h1>
        <h1 style="color: #ffffff;" class="text-lg font-bold mb-4"> MASA DEPAN CERAH JOMBANG </h1>
        <div class="text-left">
            <div class="flex items-center mb-2">
                <i class="fas fa-map-marker-alt mr-2"></i>
                <span class="font-bold">Address:</span>
            </div>
            <p class="ml-6">
                <a href="https://www.google.com/maps?q=MDC+Jombang" class="contact-info">
                    MDC Jombang<br>
                    Jl. Buya Hamka No.34, Jombang, Jawa Timur 61419
                </a>
            </p>
            <div class="flex items-center mt-4 mb-2">
                <i class="fas fa-phone mr-2"></i>
                <span class="font-bold">Phone:</span>
                <a href="tel:+6285855554893" class="contact-info ml-2">(+6285) 8-5555-4893</a>
            </div>
        </div>
    </div>
</div>
<!-- NAV -->
<div class="bottom-nav" id="nav">

<div class="slider" id="slider"></div>

<a href="/id/" class="nav-item active" onclick="selectTab(this)">
<span class="icon">🏠</span>Home
</a>

<a href="/id/ibadah" class="nav-item" onclick="selectTab(this)">
<span class="icon">🙏</span>IH
</a>

<a href="/id/youtube" class="nav-item" onclick="selectTab(this)">
<span class="icon">▶️</span>YouTube
</a>

<a href="/id/alkitab" class="nav-item" onclick="selectTab(this)">
<span class="icon">📖</span>Alkitab
</a>

</div>

<script>

let level="guest"

const sidebar=document.getElementById("sidebar")
const overlay=document.getElementById("overlay")
const slider=document.getElementById("slider")
const items=document.querySelectorAll(".nav-item")
const nav=document.getElementById("nav")
const icon=document.getElementById("icon")

function toggleMenu(){
 sidebar.classList.toggle("show")
 overlay.classList.toggle("show")
}

function toggleDark(){
 document.body.classList.toggle("dark")
 icon.innerHTML=document.body.classList.contains("dark")?"🌙":"☀️"
}

function moveSlider(el){
 slider.style.left=
 (el.offsetLeft + el.offsetWidth/2 - slider.offsetWidth/2)+"px"
}

function selectTab(el){
 items.forEach(i=>i.classList.remove("active"))
 el.classList.add("active")
 moveSlider(el)
}

window.onload=()=>{
 moveSlider(document.querySelector(".nav-item.active"))
 loadSlides()
}

let last=0
window.addEventListener("scroll",()=>{
 let cur=window.pageYOffset
 if(cur>last+5) nav.classList.add("hide")
 else if(cur<last-5) nav.classList.remove("hide")
 last=cur
})

/* SERVICE WORKER */
if ('serviceWorker' in navigator) {
 navigator.serviceWorker.register('/sw.js')
}

/* INSTALL */
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
 e.preventDefault();
 deferredPrompt = e;

 const btn = document.getElementById('installBtn');
 btn.style.display = 'block';

 btn.onclick = () => {
   deferredPrompt.prompt();
 };
});

/* SLIDES */

let slideIndex=0
let slides=[]
let dots=[]

async function loadSlides(){

 try{

 const res=await fetch("https://mdcjombang.id/siap/gambar/get_media.php")
 const data=await res.json()

 const slidesContainer=document.getElementById("slides")
 const dotsContainer=document.getElementById("dots")

 slidesContainer.innerHTML=""
 dotsContainer.innerHTML=""

 data.forEach(item=>{

 const img="https://mdcjombang.id/siap/gambar/uploads/slide/"+item.gambar

 slidesContainer.innerHTML+=`
 <div class="slide">
 <img src="${img}" loading="lazy">
 </div>
 `

 dotsContainer.innerHTML+=`<span class="dot"></span>`

 })

 slides=document.querySelectorAll(".slide")
 dots=document.querySelectorAll(".dot")

 showSlides()

 }catch(e){
 console.log("slider error",e)
 }

}

function showSlides(){

 slides.forEach(s=>s.style.display="none")
 dots.forEach(d=>d.classList.remove("active"))

 slideIndex++

 if(slideIndex>slides.length){
 slideIndex=1
 }

 slides[slideIndex-1].style.display="block"

 if(dots[slideIndex-1]){
 dots[slideIndex-1].classList.add("active")
 }

 setTimeout(showSlides,3000)

}

</script>

<script type="module" src="app.js"></script>

</body>
</html>