Maintenance
Maaf — sedang dalam perbaikan
Kami sedang melakukan pemeliharaan untuk meningkatkan layanan. Beberapa fitur mungkin tidak tersedia sementara. Terima kasih atas kesabaran Anda — kami akan kembali secepatnya.
00
Hari
00
Jam
00
Menit
00
Detik
Masukkan email untuk pemberitahuan
Kami tidak akan membagikan email Anda.
BG Mohon Tunggu !
© 2025 Semua hak dilindungi
© 2025 Semua hak dilindungi
Progres perbaikan
67%
Penyelesaian
Tim kami sedang mengerjakan beberapa perbaikan penting.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maaf — Sedang Dalam Perbaikan</title>
<style>
/* Menggunakan font Inter atau Sans-serif default */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
/* Variabel CSS harus berada di tingkat teratas yang valid untuk post, kita gunakan wrapper */
#maintenance-post-wrapper {
/* Pastikan font default dan warna teks berlaku di dalam wrapper */
font-family: 'Inter', sans-serif;
color: #f8f8f2; /* var(--text-color) */
/* Background gelap untuk meniru body asli, tetapi hanya mencakup konten posting */
background-color: #1a1a2e; /* var(--dark-bg) */
padding: 20px 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh; /* Agar konten terlihat di tengah */
/* Atur ulang semua default untuk isolasi gaya */
all: initial;
box-sizing: border-box;
}
/* Variabel-variabel untuk penggunaan yang lebih mudah */
#maintenance-post-wrapper {
--dark-bg: #1a1a2e;
--card-bg: #282a36;
--text-color: #f8f8f2;
--subtle-text: #bd93f9;
--accent-purple: #6272a4;
--gradient-start: #bd93ff;
--gradient-end: #ff79c6;
}
/* Semua gaya diisolasi menggunakan ID wrapper (#maintenance-post-wrapper) */
#maintenance-post-wrapper .container {
width: 100%;
max-width: 1200px;
background-color: var(--card-bg);
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
display: flex;
gap: 40px;
flex-wrap: wrap; /* Untuk responsif */
color: var(--text-color); /* Terapkan warna teks lagi */
box-sizing: border-box;
}
#maintenance-post-wrapper .left-panel {
flex: 2;
min-width: 300px;
}
#maintenance-post-wrapper .right-panel {
flex: 1;
min-width: 280px;
padding-top: 20px;
}
/* Badge/Label Styling */
#maintenance-post-wrapper .badge {
display: inline-block;
padding: 6px 15px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
color: var(--dark-bg);
}
/* Heading utama (H1) */
#maintenance-post-wrapper h1 {
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
margin-top: 0;
margin-bottom: 15px;
color: var(--text-color); /* Pastikan warna tidak bentrok */
}
#maintenance-post-wrapper .subtitle {
font-size: 1.1rem;
line-height: 1.5;
color: var(--accent-purple);
margin-bottom: 30px;
}
/* Status Section */
#maintenance-post-wrapper .status-info {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
font-size: 1rem;
}
#maintenance-post-wrapper .status-icon-text {
color: var(--gradient-start);
}
#maintenance-post-wrapper .status-label {
display: inline-flex;
align-items: center;
background-color: var(--accent-purple);
padding: 4px 12px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
}
/* Countdown Timer */
#maintenance-post-wrapper .timer-grid {
display: flex;
gap: 15px;
margin-top: 20px;
margin-bottom: 40px;
}
#maintenance-post-wrapper .timer-box {
background-color: #44475a;
padding: 15px;
border-radius: 12px;
text-align: center;
flex: 1;
min-width: 60px;
}
#maintenance-post-wrapper .timer-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--gradient-end);
line-height: 1;
}
#maintenance-post-wrapper .timer-unit {
font-size: 0.8rem;
color: var(--accent-purple);
margin-top: 5px;
}
/* Email Form */
#maintenance-post-wrapper .email-form {
margin-top: 40px;
margin-bottom: 20px;
}
#maintenance-post-wrapper .email-form p {
font-size: 0.95rem;
margin-bottom: 10px;
color: var(--accent-purple);
}
#maintenance-post-wrapper .input-group {
display: flex;
gap: 10px;
}
#maintenance-post-wrapper .input-group input {
flex-grow: 1;
padding: 12px 15px;
border-radius: 10px;
border: 1px solid #44475a;
background-color: #44475a;
color: var(--text-color);
font-size: 1rem;
outline: none;
transition: border-color 0.3s;
}
#maintenance-post-wrapper .input-group input:focus {
border-color: var(--gradient-start);
}
#maintenance-post-wrapper .input-group button {
padding: 12px 25px;
border: none;
border-radius: 10px;
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
color: var(--dark-bg);
font-weight: 600;
cursor: pointer;
transition: opacity 0.3s;
}
#maintenance-post-wrapper .input-group button:hover {
opacity: 0.9;
}
/* Footer Links */
#maintenance-post-wrapper .footer-links {
margin-top: 50px;
font-size: 0.9rem;
color: var(--accent-purple);
}
#maintenance-post-wrapper .footer-links a {
color: var(--accent-purple);
text-decoration: none;
margin-right: 15px;
transition: color 0.3s;
}
#maintenance-post-wrapper .footer-links a:hover {
color: var(--gradient-start);
}
#maintenance-post-wrapper .copyright {
margin-top: 15px;
font-size: 0.85rem;
color: #6272a4;
}
#maintenance-post-wrapper .copyright .logo-badge {
background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
color: var(--dark-bg);
padding: 3px 8px;
border-radius: 6px;
font-weight: 700;
margin-right: 5px;
}
/* Progress Bar Section (Right Panel) */
#maintenance-post-wrapper .progress-card {
background-color: #44475a;
border-radius: 15px;
padding: 30px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}
#maintenance-post-wrapper .progress-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
#maintenance-post-wrapper .progress-title {
font-size: 1.1rem;
font-weight: 600;
}
#maintenance-post-wrapper .progress-percentage {
font-size: 1.8rem;
font-weight: 800;
color: var(--gradient-end);
}
#maintenance-post-wrapper .progress-label {
font-size: 0.8rem;
color: var(--accent-purple);
text-align: right;
}
#maintenance-post-wrapper .progress-description {
font-size: 0.9rem;
color: var(--accent-purple);
margin-bottom: 30px;
}
#maintenance-post-wrapper .bar-container {
height: 10px;
background-color: #6272a4;
border-radius: 5px;
margin-top: 30px;
overflow: hidden;
}
#maintenance-post-wrapper .progress-bar {
height: 100%;
width: 67%; /* Sesuaikan dengan persentase di JS */
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
transition: width 1s ease-in-out;
}
/* Placeholder untuk ilustrasi di progress card */
#maintenance-post-wrapper .illustration-placeholder {
height: 120px;
background-color: #44475a;
border-radius: 10px;
margin-top: 25px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border: 1px solid #6272a4;
}
#maintenance-post-wrapper .illustration-placeholder:before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background-color: #f1fa8c; /* Kuning */
border-radius: 50%;
top: 20px;
left: 20px;
box-shadow: 0 0 5px #f1fa8c;
}
#maintenance-post-wrapper .illustration-placeholder .gear {
font-size: 4rem;
color: var(--gradient-end);
animation: spin 8s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Icon Font (Self-Contained) */
@font-face {
font-family: 'Font Awesome';
/* Menggunakan URL absolut dari CDN agar tidak perlu link eksternal */
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/webfonts/fa-solid-900.woff2') format('woff2');
font-weight: 900;
font-style: normal;
}
.fa {
font-family: 'Font Awesome';
font-weight: 900;
}
.fa-tools:before { content: "\f7d9"; }
.fa-clock:before { content: "\f017"; }
.fa-cogs:before { content: "\f085"; }
/* Responsiveness for Mobile */
@media (max-width: 768px) {
#maintenance-post-wrapper .container {
padding: 25px;
flex-direction: column;
gap: 20px;
}
#maintenance-post-wrapper h1 {
font-size: 2.2rem;
}
#maintenance-post-wrapper .timer-grid {
flex-wrap: wrap;
justify-content: center;
}
#maintenance-post-wrapper .timer-box {
flex: 1 1 40%; /* 2 kolom di HP */
padding: 10px;
}
#maintenance-post-wrapper .timer-number {
font-size: 1.8rem;
}
#maintenance-post-wrapper .input-group {
flex-direction: column;
}
#maintenance-post-wrapper .input-group button, #maintenance-post-wrapper .input-group input {
width: 100%;
}
#maintenance-post-wrapper .right-panel {
padding-top: 0;
}
}
</style>
<!-- Link Font Awesome dihapus karena sudah diatasi dengan @font-face di atas -->
</head>
<!-- Mengganti <body> dengan <div> unik untuk Blogger -->
<div id="maintenance-post-wrapper">
<div class="container">
<div class="left-panel">
<div class="badge">Maintenance</div>
<h1>Maaf — sedang dalam perbaikan</h1>
<p class="subtitle">
Kami sedang melakukan pemeliharaan untuk meningkatkan layanan. Beberapa fitur mungkin tidak tersedia sementara. Terima kasih atas kesabaran Anda — kami akan kembali secepatnya.
</p>
<div class="status-info">
<span class="status-icon-text"><i class="fa fa-tools"></i> Dalam perbaikan</span>
</div>
<div class="status-info">
<span class="status-icon-text"><i class="fa fa-clock"></i> Perkiraan selesai: <strong id="target-time-display">...</strong></span>
</div>
<!-- Countdown Timer Grid -->
<div class="timer-grid" id="countdown-timer">
<div class="timer-box">
<div class="timer-number" id="days">00</div>
<div class="timer-unit">Hari</div>
</div>
<div class="timer-box">
<div class="timer-number" id="hours">00</div>
<div class="timer-unit">Jam</div>
</div>
<div class="timer-box">
<div class="timer-number" id="minutes">00</div>
<div class="timer-unit">Menit</div>
</div>
<div class="timer-box">
<div class="timer-number" id="seconds">00</div>
<div class="timer-unit">Detik</div>
</div>
</div>
<!-- Email Form -->
<div class="email-form">
<p>Masukkan email untuk pemberitahuan</p>
<div class="input-group">
<input type="email" placeholder="contoh@email.com" aria-label="Masukkan email">
<button onclick="subscribeEmail()">Beri tahu saya</button>
</div>
<p class="copyright" style="margin-top: 10px; font-size: 0.8rem;">Kami tidak akan membagikan email Anda.</p>
</div>
<!-- Footer Links -->
<div class="footer-links">
<a href="#">Status Server</a>
<a href="#">Dokumentasi</a>
<a href="#">Hubungi Kami</a>
</div>
<div class="copyright">
<span class="logo-badge">BG</span> Mohon Tunggu !<br>
© 2025 Semua hak dilindungi
</div>
</div>
<div class="right-panel">
<div class="progress-card">
<div class="progress-header">
<div class="progress-title">Progres perbaikan</div>
<div class="progress-info">
<div class="progress-percentage"><span id="progress-percent">67</span>%</div>
<div class="progress-label">Penyelesaian</div>
</div>
</div>
<p class="progress-description">
Tim kami sedang mengerjakan beberapa perbaikan penting.
</p>
<div class="illustration-placeholder">
<!-- Ikon Roda Gigi untuk animasi visual -->
<i class="fa fa-cogs gear"></i>
</div>
<div class="bar-container">
<div class="progress-bar" id="progressBar"></div>
</div>
</div>
</div>
</div>
<script>
// --- LOGIKA JAVASCRIPT ---
// Fungsi untuk mengupdate Progress Bar secara dinamis (opsional)
// Kita akan menggunakan nilai 67% seperti di gambar.
function updateProgressBar(percentage) {
const progressBar = document.getElementById('progressBar');
const progressPercentText = document.getElementById('progress-percent');
progressBar.style.width = percentage + '%';
progressPercentText.textContent = percentage;
}
// Panggil saat dimuat untuk mengatur nilai awal
updateProgressBar(67);
// --- LOGIKA COUNTDOWN TIMER ---
// 1. Tentukan waktu target (24 jam dari sekarang untuk demo fungsional)
// Waktu target diatur dalam milidetik
const targetDate = new Date();
targetDate.setHours(targetDate.getHours() + 24);
const targetTime = targetDate.getTime();
// 2. Format Waktu Target untuk ditampilkan
function formatTargetTime(date) {
const options = {
day: '2-digit', month: '2-digit', year: 'numeric',
hour: '2-digit', minute: '2-digit', second: '2-digit',
hour12: false
};
// Ambil offset WIB untuk tampilan (misal: "GMT+07:00")
const timeString = date.toLocaleTimeString('id-ID', { hour12: false, timeZoneName: 'short' });
// Perlu disesuaikan karena toLocaleTimeString mungkin tidak selalu menghasilkan timezone
const formattedDate = date.toLocaleDateString('id-ID', options);
// Mencoba mendapatkan string waktu yang lebih spesifik atau menggunakan fallback
let timePart = date.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
// Format yang diinginkan: dd/mm/yyyy, hh:mm:ss
let datePart = formattedDate.replace(/(\d{2})\/(\d{2})\/(\d{4}).*/, '$1/$2/$3');
return `${datePart}, ${timePart} WIB`;
}
document.getElementById('target-time-display').textContent = formatTargetTime(targetDate);
// 3. Fungsi utama penghitung waktu mundur
function updateCountdown() {
const now = new Date().getTime();
const distance = targetTime - now;
// Hitungan matematika
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Fungsi untuk menambahkan nol di depan (padding)
const pad = (num) => num < 10 ? '0' + num : num;
// Tampilkan hasil
if (distance > 0) {
document.getElementById('days').textContent = pad(days);
document.getElementById('hours').textContent = pad(hours);
document.getElementById('minutes').textContent = pad(minutes);
document.getElementById('seconds').textContent = pad(seconds);
} else {
// Waktu selesai
clearInterval(countdownInterval);
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
document.getElementById('target-time-display').textContent = 'Selesai';
}
}
// Panggil fungsi sekali untuk segera menampilkan waktu, lalu set interval
updateCountdown();
const countdownInterval = setInterval(updateCountdown, 1000);
// --- LOGIKA PEMBERITAHUAN EMAIL (contoh) ---
function subscribeEmail() {
const emailInput = document.querySelector('#maintenance-post-wrapper .input-group input[type="email"]');
const email = emailInput.value.trim();
const button = document.querySelector('#maintenance-post-wrapper .input-group button');
if (email && email.includes('@') && email.includes('.')) {
button.textContent = 'Terima kasih!';
button.style.background = '#4a90e2'; // Warna biru untuk sukses
emailInput.value = '';
// Dalam aplikasi nyata, di sini akan ada kode untuk mengirim email ke server.
setTimeout(() => {
button.textContent = 'Beri tahu saya';
button.style.background = 'linear-gradient(90deg, var(--gradient-start), var(--gradient-end))';
}, 3000);
} else {
emailInput.style.border = '1px solid #ff5555'; // Merah untuk error
setTimeout(() => {
emailInput.style.border = '1px solid #44475a';
}, 1500);
}
}
</script>
<!-- Penutup div unik -->
</div>
</html>