PasteShr

New Paste Browse

<!doctype html>
<html lang="id" data-theme="auto">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Situs Sedang Maintenance — Kami segera kembali</title>
  <meta name="description" content="Situs sedang dalam perawatan. Kami akan kembali secepatnya." />
  <style>
    :root{
      --bg: #0b1020; --fg:#eaf1ff; --muted:#a8b3cf; --card:#121a2eaa;
      --accent:#7c4dff; --accent2:#00e5ff; --ok:#23d18b; --warn:#ffb020;
      --ring:#7c4dff40;
    }
    @media (prefers-color-scheme: light){
      :root[data-theme="auto"]{ --bg:#f7f8ff; --fg:#0b1020; --muted:#485066;
        --card:#ffffffcc; --ring:#7c4dff33;
      }
    }
    [data-theme="light"]{ --bg:#f7f8ff; --fg:#0b1020; --muted:#485066; --card:#ffffffcc; --ring:#7c4dff33; }
    [data-theme="dark"] { --bg:#0b1020; --fg:#eaf1ff; --muted:#a8b3cf; --card:#121a2eaa; --ring:#7c4dff40; }

html,body{height:100%}
    body{
      margin:0; color:var(--fg); background:var(--bg);
      font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
      overflow-x:hidden;
    }
    /* Animated background blobs */
    .bg{
      position:fixed; inset:-20vmax;
      background:
        radial-gradient(40vmax 40vmax at 20% 20%, color-mix(in oklab, var(--accent) 35%, transparent), transparent),
        radial-gradient(35vmax 35vmax at 80% 30%, color-mix(in oklab, var(--accent2) 35%, transparent), transparent),
        radial-gradient(30vmax 30vmax at 60% 80%, color-mix(in oklab, var(--ok) 28%, transparent), transparent);
      filter: blur(40px) saturate(120%);
      animation: float 18s ease-in-out infinite alternate;
      pointer-events:none; z-index:-1;
    }
    @keyframes float{to{transform: translate3d(2vmax,-2vmax,0) scale(1.03)}}

.wrap{
      min-height:100%; display:grid; place-items:center; padding:40px 16px;
    }
    .card{
      width:min(760px, 94vw); backdrop-filter: blur(12px) saturate(120%);
      background:var(--card); border:1px solid var(--ring); border-radius:20px;
      box-shadow: 0 20px 60px #00000044, inset 0 0 0 1px #ffffff08;
      padding:28px; position:relative; overflow:hidden;
    }
    .badge{
      display:inline-flex; gap:8px; align-items:center; padding:6px 10px;
      border-radius:999px; background:#ffffff12; border:1px solid var(--ring);
      font-weight:600; letter-spacing:.2px;
    }
    .title{margin:14px 0 6px; font-weight:800; line-height:1.15; font-size:clamp(28px,3.8vw,40px);}
    .subtitle{margin:0 0 18px; color:var(--muted)}
    .grid{display:grid; gap:16px; grid-template-columns:1fr; }
    @media (min-width:640px){ .grid{grid-template-columns: 1fr 1fr;} }

.progress{height:10px; border-radius:999px; background:#ffffff14; overflow:hidden; border:1px solid var(--ring)}
    .bar{height:100%; width:0%; background: linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .6s ease}
    .pill{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid var(--ring);
      border-radius:12px; background:#ffffff0e}
    .list{margin:0; padding-left:18px}
    .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
    .btn{
      appearance:none; border:none; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer;
      background: linear-gradient(90deg, var(--accent), var(--accent2)); color:white;
      box-shadow: 0 8px 24px color-mix(in oklab, var(--accent) 35%, transparent); transition: transform .15s ease;
    }
    .btn:active{ transform: translateY(1px) }
    .ghost{
      background: transparent; color:var(--fg); border:1px solid var(--ring);
      box-shadow:none
    }
    .row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
    .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight:700}
    .gear{width:54px; height:54px; color:var(--accent)}
    .spin{animation: spin 8s linear infinite}
    @keyframes spin{to{transform: rotate(360deg)}}
    .topbar{display:flex; justify-content:space-between; align-items:center; gap:12px}
    .theme{background:#ffffff0f; border:1px solid var(--ring); border-radius:10px; padding:8px 10px; cursor:pointer}
    footer{opacity:.75; margin-top:20px; font-size:14px}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  </style>
</head>
<body>
  <div class="bg" aria-hidden="true"></div>
  <div class="wrap">
    <main class="card" role="main" aria-labelledby="title">
      <div class="topbar">
        <span class="badge" title="Status perawatan">
          
          <svg class="gear" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M8 3a1 1 0 0 1 1 1v1.05a7.96 7.96 0 0 1 2 .83l.74-.74a1 1 0 0 1 1.41 0l1.71 1.71a1 1 0 0 1 0 1.41l-.74.74c.33.64.61 1.32.83 2H18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-1.05a7.96 7.96 0 0 1-.83 2l.74.74a1 1 0 0 1 0 1.41l-1.71 1.71a1 1 0 0 1-1.41 0l-.74-.74a7.96 7.96 0 0 1-2 .83V20a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-1.05a7.96 7.96 0 0 1-2-.83l-.74.74a1 1 0 0 1-1.41 0L-0.9 17.15a1 1 0 0 1 0-1.41l.74-.74a7.96 7.96 0 0 1-.83-2H-2a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h1.05a7.96 7.96 0 0 1 .83-2l-.74-.74a1 1 0 0 1 0-1.41L1.86 2.7a1 1 0 0 1 1.41 0l.74.74c.64-.33 1.32-.61 2-.83V4a1 1 0 0 1 1-1h0Z" opacity=".08"/>
          </svg>
          <span>Maintenance Mode</span>
        </span>
        <button id="themeBtn" class="theme" aria-label="Ganti tema">🌓 Tema</button>
      </div>

<h1 id="title" class="title">Situs Sedang Dalam Perawatan</h1>
      <p class="subtitle">Kami sedang memperbarui sistem agar lebih cepat, aman, dan stabil. Terima kasih untuk kesabarannya 🙏</p>

<div class="grid" role="region" aria-label="Info perawatan">
        <section>
          <div class="pill">
            <strong class="mono">ETA:&nbsp;</strong>
            <span id="etaText">—</span>
          </div>
          <div class="progress" style="margin:12px 0 8px">
            <div class="bar" id="bar"></div>
          </div>
          <div class="row" style="justify-content:space-between">
            <small class="muted">Progress <span id="pct">0%</span></small>
            <small id="countdown">Menghitung…</small>
          </div>
          <div class="cta">
            <a class="btn" href="mailto:support@domainmu.com">Hubungi Support</a>
            <a class="btn ghost" href="https://status.domainmu.com" target="_blank" rel="noopener">Status Sistem</a>
          </div>
        </section>

<section>
          <ul class="list">
            <li>Peningkatan keamanan & performa (WAF, cache, DB).</li>
            <li>Zero-downtime deployment — bila memungkinkan.</li>
            <li>Data kamu aman; tidak ada perubahan permanen.</li>
          </ul>
          <div class="pill" style="margin-top:10px">
            <svg class="gear spin" viewBox="0 0 24 24" width="22" height="22" fill="none" aria-hidden="true">
              <circle cx="12" cy="12" r="3.5" stroke="currentColor" stroke-width="2"/>
              <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <span>Terakhir diperbarui: <time id="lastUpdated"></time></span>
          </div>
        </section>
      </div>

<footer>© <span id="year"></span> Perusahaan Kamu. Semua hak dilindungi.</footer>
    </main>
  </div>

const $ = (id)=>document.getElementById(id);
    const fmt = (ms)=>{
      if (ms <= 0) return "segera selesai";
      const s = Math.floor(ms/1000), d = Math.floor(s/86400), h = Math.floor(s%86400/3600),
            m = Math.floor(s%3600/60), sec = s%60;
      return (d? d+"h ":"") + (h? h+"j ":"") + (m? m+"m ":"") + sec+"d";
    };

function tick(){
      const now = new Date();
      const full = end - start;
      const elapsed = Math.min(Math.max(now - start, 0), full);
      const pct = full>0 ? Math.round(elapsed/full*100) : 100;
      $("bar").style.width = pct + "%";
      $("pct").textContent = pct + "%";
      $("countdown").textContent = "Selesai dalam " + fmt(end - now);
      $("etaText").textContent = end.toLocaleString('id-ID', { timeZoneName: 'short' });
    }
    tick(); setInterval(tick, 1000);
    $("year").textContent = new Date().getFullYear();
    $("lastUpdated").textContent = new Date().toLocaleString('id-ID');

// Tema
    const themeBtn = $("themeBtn");
    const applyTheme = (t)=> document.documentElement.setAttribute("data-theme", t);
    const saved = localStorage.getItem("theme");
    if (saved) applyTheme(saved);
    themeBtn.onclick = ()=>{
      const cur = document.documentElement.getAttribute("data-theme") || "auto";
      const next = cur==="dark" ? "light" : cur==="light" ? "auto" : "dark";
      applyTheme(next); localStorage.setItem("theme", next);
      themeBtn.textContent = (next==="dark"?"🌙":"🌓")+" Tema";
    };
  </script>
</body>
</html>

Paste Settings

Paste Title : [Optional]

Paste Folder : [Optional]

Syntax Highlighting : [Optional]

Paste Expiration : [Optional]

Paste Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Recent Pastes

root
Plaintext | 10 | 7 hours ago
Untitled
Plaintext | 56 | 12 hours ago
sym403
Plaintext | 13 | 12 hours ago
ajax.php
Plaintext | 19 | 14 hours ago
Untitled
Plaintext | 81 | 15 hours ago
class
Plaintext | 133 | 15 hours ago
Untitled
Plaintext | 53 | 2 days ago

Paste Settings

Site Languages