<?php
add_action( 'template_redirect', 'nellava_ultimate_flip_countdown' );
function nellava_ultimate_flip_countdown() {
// KONFIGURASI: Set true agar Admin tetap melihat website asli
$admin_bisa_akses = true;
if ( is_front_page() ) {
if ( ! $admin_bisa_akses && current_user_can( 'manage_options' ) ) {
return;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Opening Soon - Nellava Fine Jewellery</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* --- RESET & GLOBAL --- */
* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Montserrat', sans-serif; background: #89C4F4; overflow-x: hidden; }
#nellava-wrapper {
position: fixed; top: 0; left: 0; width: 100%;
min-height: 100vh;
/* Support untuk Mobile Browser Address Bar agar background full */
min-height: 100dvh;
z-index: 99999;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: radial-gradient(circle at center, #9fcbf7 0%, #70a6d8 100%);
padding: 20px;
}
/* --- BACKGROUND ORBS --- */
.orb {
position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1;
width: 50vw; height: 50vw; top: 50%; transform: translateY(-50%); opacity: 0.8;
}
.orb-1 { left: -20%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 70%); animation: pulseLeft 6s infinite alternate; }
.orb-2 { right: -20%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 70%); animation: pulseRight 7s infinite alternate; }
@keyframes pulseLeft { 0% { transform: translateY(-50%) scale(1); opacity: 0.5; } 100% { transform: translateY(-50%) scale(1.1); opacity: 0.8; } }
@keyframes pulseRight { 0% { transform: translateY(-50%) scale(1); opacity: 0.5; } 100% { transform: translateY(-50%) scale(1.2); opacity: 0.7; } }
/* --- CONTENT STYLING --- */
.content-box { position: relative; z-index: 10; text-align: center; width: 100%; max-width: 1000px; margin: 0 auto; }
.logo-img {
max-width: 200px; width: 50%; margin-bottom: 10px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
/* Responsive Typography */
h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 6vw, 5rem);
color: #fff; margin: 0; line-height: 1.1;
text-shadow: 0 0 30px rgba(255,255,255,0.7);
}
.sub-text {
color: #1b2a4a; margin: 15px auto 40px; font-weight: 500;
max-width: 600px; line-height: 1.5; font-size: clamp(0.9rem, 3vw, 1.1rem);
opacity: 0.9; padding: 0 10px;
}
/* --- GLASS CARDS CONTAINER --- */
.cards-row {
display: flex; justify-content: center; gap: 20px;
margin-bottom: 50px; width: 100%; flex-wrap: wrap;
}
.glass-info-card {
flex: 1; min-width: 280px; max-width: 400px;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 20px; padding: 25px 20px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #1b2a4a; box-shadow: 0 15px 35px rgba(0,0,0,0.05);
transition: transform 0.3s ease;
}
.glass-info-card:hover { transform: translateY(-5px); }
.info-label { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; font-weight: 600; margin-bottom: 8px; opacity: 0.8; }
.info-value { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.info-sub-value { font-size: 0.95rem; margin-top: 4px; font-weight: 500; opacity: 0.9; }
/* --- 3D FLIP CLOCK STYLES (Desktop Default) --- */
.flip-clock {
display: flex; justify-content: center; gap: 15px; perspective: 400px;
width: 100%;
}
.flip-unit { display: flex; flex-direction: column; align-items: center; }
.tick {
position: relative; font-family: 'Montserrat', sans-serif;
font-size: 4rem; font-weight: 700; color: #fff;
width: 90px; height: 110px;
background: #1e3a8a; border-radius: 10px;
line-height: 110px; text-align: center;
box-shadow: 0 10px 20px rgba(30, 58, 138, 0.3);
}
/* Garis tengah pemisah */
.tick::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: rgba(0,0,0,0.15); z-index: 5; box-shadow: 0 1px 0 rgba(255,255,255,0.1); }
.upper-card, .lower-card, .flip-card-front, .flip-card-back {
position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden;
background-color: #1e3a8a;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* DESKTOP ALIGNMENT */
.upper-card { top: 0; border-radius: 10px 10px 0 0; line-height: 110px; transform-origin: bottom; }
.lower-card { bottom: 0; border-radius: 0 0 10px 10px; line-height: 0; transform-origin: top; border-top: 1px solid rgba(0,0,0,0.1); }
.flip-card-front { top: 0; border-radius: 10px 10px 0 0; line-height: 110px; transform-origin: bottom; z-index: 2; }
.flip-card-back { bottom: 0; border-radius: 0 0 10px 10px; line-height: 0; transform-origin: top; z-index: 1; transform: rotateX(180deg); }
/* ANIMATION */
.tick.flipping .flip-card-front { animation: flipDownFront 0.6s ease-in-out forwards; }
.tick.flipping .flip-card-back { animation: flipDownBack 0.6s ease-in-out forwards; }
@keyframes flipDownFront { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-180deg); } }
@keyframes flipDownBack { 0% { transform: rotateX(180deg); } 100% { transform: rotateX(0deg); } }
.label { font-size: 0.75rem; text-transform: uppercase; margin-top: 10px; color: #fff; letter-spacing: 1px; opacity: 0.9; font-weight: 600; }
.colon { font-size: 3rem; color: #1e3a8a; margin-top: 10px; font-weight: bold; opacity: 0.8; }
/* --- RESPONSIVE MEDIA QUERIES --- */
/* MOBILE (Di bawah 600px) */
@media (max-width: 600px) {
/* Layout Kartu Atas */
.cards-row { flex-direction: column; gap: 12px; margin-bottom: 30px; }
.glass-info-card { width: 100%; padding: 18px; }
/* Background Orbs */
.orb { width: 80vw; height: 80vw; }
/* --- PERBAIKAN FLIP CLOCK MOBILE --- */
.flip-clock { gap: 6px; }
/* Ukuran Kotak Angka */
.tick {
width: 17vw; max-width: 65px;
height: 20vw; max-height: 75px;
font-size: 9vw; /* Sedikit dikecilkan agar aman */
border-radius: 6px;
/* KUNCI PERBAIKAN: Flexbox centering daripada line-height manual */
display: flex; justify-content: center; align-items: center;
line-height: 0; /* Reset line height agar tidak pushing text */
}
/* Titik Dua */
.colon {
font-size: 1.5rem; margin-top: -15px;
display: flex; align-items: center;
}
/* Label (Days/Hours/etc) */
.label { font-size: 0.6rem; margin-top: 6px; letter-spacing: 0.5px; }
/* INTERNAL CARD ALIGNMENT (Agar tidak terpotong) */
.upper-card, .flip-card-front {
height: 100%; top: 0; bottom: auto;
border-radius: 6px 6px 0 0;
/* Trik CSS: Menampilkan setengah bagian atas font */
display: flex; justify-content: center; align-items: flex-end;
overflow: hidden;
line-height: 0;
}
/* Setengah bagian bawah font */
.lower-card, .flip-card-back {
height: 50%; bottom: 0; top: auto;
border-radius: 0 0 6px 6px;
display: flex; justify-content: center; align-items: flex-start;
overflow: hidden;
line-height: 0;
}
/* Text Alignment dalam Card */
/* Kita menggunakan transform untuk memastikan text tepat di tengah 'gabungan' dua kartu */
.upper-card::before, .flip-card-front::before,
.lower-card::before, .flip-card-back::before {
content: inherit; /* Ini akan diisi JS, tapi untuk layout kita atur parentnya saja */
}
/* Koreksi posisi teks di dalam kartu potongan */
/* Karena container flex, kita tidak perlu line-height besar.
Kita biarkan text mengalir normal, container overflow yang memotongnya. */
.tick { line-height: 20vw; display: block; } /* Kembali ke block untuk split logic */
/* Paksa Line Height sama dengan Height Kontainer untuk Mobile */
.upper-card, .flip-card-front { line-height: 20vw; }
.lower-card, .flip-card-back { line-height: 0; }
/* Override Font Size jika layar sangat kecil */
@media (max-width: 360px) {
.tick { font-size: 1.5rem; height: 50px; line-height: 50px; width: 45px; }
.upper-card, .flip-card-front { line-height: 50px; }
}
}
</style>
</head>
<body>
<div id="nellava-wrapper">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="content-box">
<img class="logo-img" src="https://nellava.com//wp-content/uploads/2026/02/cropped-logo-fine-jewellery-768x207.png" alt="Nellava">
<h1>Opening Soon!</h1>
<p class="sub-text">A new destination for refined gold jewellery and bespoke craftsmanship is arriving soon.</p>
<div class="cards-row">
<div class="glass-info-card">
<div class="info-label"><i class="fas fa-map-marker-alt"></i> Location</div>
<div class="info-value">Boulevard Bukit Darmo Golf Office</div>
<div class="info-sub-value">Park B-2/23, Surabaya Barat</div>
</div>
<div class="glass-info-card">
<div class="info-label"><i class="far fa-calendar-alt"></i> Opening Date</div>
<div class="info-value">27 February 2026</div>
</div>
</div>
<div class="flip-clock">
<div class="flip-unit">
<div class="tick" id="tick-days">
<div class="upper-card">00</div>
<div class="lower-card">00</div>
<div class="flip-card-front">00</div>
<div class="flip-card-back">00</div>
</div>
<span class="label">Days</span>
</div>
<div class="colon">:</div>
<div class="flip-unit">
<div class="tick" id="tick-hours">
<div class="upper-card">00</div>
<div class="lower-card">00</div>
<div class="flip-card-front">00</div>
<div class="flip-card-back">00</div>
</div>
<span class="label">Hours</span>
</div>
<div class="colon">:</div>
<div class="flip-unit">
<div class="tick" id="tick-minutes">
<div class="upper-card">00</div>
<div class="lower-card">00</div>
<div class="flip-card-front">00</div>
<div class="flip-card-back">00</div>
</div>
<span class="label">Minutes</span>
</div>
<div class="colon">:</div>
<div class="flip-unit">
<div class="tick" id="tick-seconds">
<div class="upper-card">00</div>
<div class="lower-card">00</div>
<div class="flip-card-front">00</div>
<div class="flip-card-back">00</div>
</div>
<span class="label">Seconds</span>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const targetDate = new Date("2026-02-27T09:09:09+07:00").getTime();
let prevDays='00', prevHours='00', prevMinutes='00', prevSeconds='00';
function updateTime() {
const now = new Date().getTime();
const diff = targetDate - now;
if (diff < 0) return;
const d = Math.floor(diff / (1000 * 60 * 60 * 24));
const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const s = Math.floor((diff % (1000 * 60)) / 1000);
const daysStr = d < 10 ? '0' + d : d;
const hoursStr = h < 10 ? '0' + h : h;
const minStr = m < 10 ? '0' + m : m;
const secStr = s < 10 ? '0' + s : s;
if (daysStr != prevDays) { flipCard('tick-days', daysStr); prevDays = daysStr; }
if (hoursStr != prevHours) { flipCard('tick-hours', hoursStr); prevHours = hoursStr; }
if (minStr != prevMinutes) { flipCard('tick-minutes', minStr); prevMinutes = minStr; }
if (secStr != prevSeconds) { flipCard('tick-seconds', secStr); prevSeconds = secStr; }
}
function flipCard(id, newValue) {
const el = document.getElementById(id);
if(!el) return;
const upper = el.querySelector('.upper-card');
const lower = el.querySelector('.lower-card');
const front = el.querySelector('.flip-card-front');
const back = el.querySelector('.flip-card-back');
// Set back card to new value
back.innerText = newValue;
// Front keeps old value initially (from upper)
front.innerText = upper.innerText;
// Remove class to reset animation, trigger reflow, add class back
el.classList.remove('flipping');
void el.offsetWidth;
el.classList.add('flipping');
// Selesaikan update angka setelah animasi setengah jalan
setTimeout(() => {
upper.innerText = newValue;
lower.innerText = newValue;
front.innerText = newValue;
}, 300);
}
setInterval(updateTime, 1000);
updateTime();
});
</script>
</body>
</html>
<?php
exit();
}
}
