File: /home/dakarash.co.id/public_html/maintenance/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dakarash — Maintenance</title>
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
:root{ --text:#e7eefb; --muted:#a9b7d6; --line:rgba(255,255,255,.15); }
*{box-sizing:border-box}
html, body { height:100%; }
html{ font-size: 100%; height: 100%; width: 100%; overflow-x: hidden; margin: 0px; padding: 0px; touch-action: manipulation; }
body{
margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; color:var(--text);
background: linear-gradient(135deg, #0b1020, #10173b, #1b2a5b, #0b1020);
background: rgba(10,14,30,.65)
background-size: 300% 300%; animation: gradient 18s ease infinite;
display:flex; flex-direction:column; min-height:100vh;
display: flex;
background-size: cover; opacity: 2;
font-size: 16px; font-family: 'Open Sans', sans-serif; width: 100%; height: 100%;
}
@keyframes gradient{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.page{ display:flex; flex-direction:column; flex:1; padding:20px }
.card{
margin:auto; width:100%; max-width: 980px; border:none solid var(--line);
border-radius:22px;
/*box-shadow: 0 30px 80px rgba(0,0,0,.45);*/
overflow:hidden; display:flex; flex-direction:column;
background:none;
}
/* Header centered logo */
.header{ display:flex; justify-content:center; align-items:center; gap:12px; padding:18px 22px; border-bottom:0px solid var(--line); text-align:center }
.header img{ height:42px }
.title h1{ margin:0px 0px; font-size:3.2rem;color:#fff ;font-weight:500}
.title-desc p{
line-height: 1.6; font-size: 1.05em; font-weight: 500; color: #fff;
}
/* Content */
.content{ display:grid; grid-template-columns: 1.1fr .9fr; }
@media(max-width: 900px){ .content{ grid-template-columns: 1fr; } }
.pane{ padding:22px }
.panel{ border:none solid var(--line); border-radius:16px; padding:16px; background: rgba(14,18,36,.6); }
ul{ margin:8px 0 0 18px; color:var(--muted) }
code{ border:none solid var(--line); padding:2px 6px; border-radius:7px }
/* Footer centered with social icons */
.footer{ margin-top:auto; padding:20px; border-top:0px solid var(--line); color:var(--muted); text-align:center }
.social{ display:flex; justify-content:center; align-items:center; gap:18px; margin-bottom:10px }
.social img{ width:26px; height:26px; opacity:.9; transition:.3s }
.social img:hover{ opacity:1; transform:scale(1.08) }
.copy{ font-size:.9rem }
/* Floating WhatsApp button */
.wa2 position: fixed; right:18px; bottom:18px; display:inline-flex; align-items:center; gap:10px;
background: rgba(11,16,32,.75); border:none solid var(--line); padding:10px 14px; border-radius:999px;
text-decoration:none; color:#fff; font-weight:700; box-shadow:0 10px 35px rgba(0,0,0,.35) }
.wa2img{ width:24px; height:24px; }
@media(max-width:560px){ .wa span{ display:none } }
.footer {
margin-top: auto;
padding: 20px;
border-top: 1px solid var(--line);
color: var(--muted);
text-align: center;
}
.footer .social {
display: flex;
justify-content: center;
align-items: center;
gap: 22px;
margin-bottom: 10px;
}
.footer .social a {
color: var(--muted);
font-size: 1.6rem;
transition: 0.3s;
}
.footer .social a:hover {
color: #4f46e5; /* warna hover ungu sesuai tema */
transform: scale(1.1);
}
.footer .copy {
font-size: 0.9rem;
}
</style>
</head>
<body style="background-image:url(assets/onthesea3.jpg);">
<div class="page">
<div class="card">
<div class="header">
<img src="assets/logo_white.png" alt="Dakarash Logo">
</div>
<div class="title" style="text-align:center;margin:10px auto;max-width:700px">
<h1>We’re Comming Soon</h1>
</div>
<div class="title-desc" style="text-align:center;margin:0px auto;max-width:500px;back">
<p>Our website is currently undergoing scheduled maintenance. We Should be back shortly. If you were redirected here from dakarash.co.id, everything will resume once maintenance is complete.</p>
<p style="color:var(--muted)">Email: <a href="mailto:info@dakarash.co.id" style="color:#c7d2fe">info@dakarash.co.id</a></p>
</div>
<div class="content">
</div>
<div class="footer">
<div class="social">
<a href="https://instagram.com/yourprofile" target="_blank" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="https://linkedin.com/in/yourprofile" target="_blank" aria-label="LinkedIn">
<i class="fab fa-linkedin"></i>
</a>
<a href="https://twitter.com/yourprofile" target="_blank" aria-label="Twitter">
<i class="fab fa-twitter"></i>
</a>
<a class="wa" href="https://wa.me/6281234567890" target="_blank" rel="noopener">
<i class="fa-brands fa-whatsapp"></i>
</a>
</div>
<div class="copy">© <span id="y"></span> Dakarash. All rights reserved.</div>
</div>
</div>
</div>
<script>document.getElementById('y').textContent = new Date().getFullYear();</script>
</body>
</html>