MAINHACK

Viewing / Editing File: home.php

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>System Upgrade — We'll Be Back Soon</title>
  <meta name="description" content="Our system is currently undergoing an upgrade. We'll be back shortly." />
  <style>
    :root{
      --bg1:#0f172a; /* dark navy */
      --bg2:#081229; /* deeper */
      --accent:#06b6d4; /* teal */
      --accent-2:#7c3aed; /* purple */
      --glass: rgba(255,255,255,0.06);
      --text: #e6eef8;
      --muted: #9fb3c8;
      --card-radius:16px;
      --maxw:980px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

*{box-sizing:border-box}
    html,body{height:100%;margin:0}
    body{
      background: radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,0.12), transparent 10%),
                  radial-gradient(1000px 500px at 90% 90%, rgba(6,182,212,0.07), transparent 8%),
                  linear-gradient(180deg,var(--bg1),var(--bg2));
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding:32px 20px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:24px;
      min-height:100vh;
    }

.card{
      width:100%;
      max-width:var(--maxw);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:var(--card-radius);
      padding:28px;
      display:grid;
      grid-template-columns: 1fr 420px;
      gap:24px;
      box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.03);
      align-items:center;
    }

.left{padding:22px}
    h1{margin:0 0 8px;font-size:28px;letter-spacing:-0.4px}
    p.lead{margin:0 0 18px;color:var(--muted);line-height:1.5}

.upgrade-details{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
    .chip{background:var(--glass);padding:8px 12px;border-radius:999px;font-size:13px;color:var(--muted);border:1px solid rgba(255,255,255,0.02)}

/* progress */
    .progress-wrap{margin-top:18px}
    .progress-bar{
      width:100%;height:14px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,0.025)
    }
    .progress-bar > i{
      display:block;height:100%;width:40%; /* JS will set */
      background:linear-gradient(90deg,var(--accent),var(--accent-2));
      box-shadow:0 6px 18px rgba(124,58,237,0.14) inset;
      transition:width 700ms cubic-bezier(.2,.8,.2,1);
    }
    .progress-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--muted)}

/* right column */
    .right{background:linear-gradient(180deg,rgba(255,255,255,0.015),transparent);padding:22px;border-radius:12px}
    .svg-hero{display:flex;align-items:center;justify-content:center;padding:10px}

.countdown{display:flex;gap:10px;margin-top:10px}
    .countdown .unit{background:rgba(255,255,255,0.03);padding:10px 14px;border-radius:10px;text-align:center;min-width:66px}
    .unit strong{display:block;font-size:18px}
    .unit span{font-size:12px;color:var(--muted)}

form{margin-top:16px;display:flex;gap:8px}
    input[type='email']{flex:1;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
    button{padding:12px 16px;border-radius:10px;border:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#061025;font-weight:600;cursor:pointer}
    button.secondary{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text)}

.small{font-size:13px;color:var(--muted);margin-top:12px}

footer{margin-top:14px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}

/* responsive */
    @media (max-width:880px){
      .card{grid-template-columns:1fr; padding:18px}
      .right{order:-1}
    }
  </style>
</head>
<body>
  <main class="card" role="main" aria-labelledby="upgradeTitle">
    <section class="left" aria-labelledby="upgradeTitle">
      <h1 id="upgradeTitle">We'll be back shortly — System Upgrade</h1>
      <p class="lead">We're performing a scheduled upgrade to improve performance and security. During this time some features may be unavailable. Thanks for your patience — we'll be back online soon.</p>

<div class="upgrade-details">
        <div class="chip">Scheduled: <strong style="margin-left:8px;color:var(--text)">Sep 20, 2025 — 02:00 UTC</strong></div>
        <div class="chip">Estimated downtime: <strong style="margin-left:8px;color:var(--text)">~30 minutes</strong></div>
        <div class="chip">Release: <strong style="margin-left:8px;color:var(--text)">v2.4.1</strong></div>
      </div>

<div class="progress-wrap" aria-hidden="false">
        <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40">
          <i id="progressFill"></i>
        </div>
        <div class="progress-meta"><span id="progressText">Update in progress</span><span id="percentText">40%</span></div>
      </div>

<p class="small">If you need urgent help while the system is offline, contact <a href="mailto:support@example.com" style="color:inherit;text-decoration:underline">support@example.com</a> or follow us on <a href="#" style="color:inherit;text-decoration:underline">Twitter</a>.</p>

<footer>
        <div class="small">Status: <strong id="statusText">Upgrading</strong></div>
        <div class="small">Server: <strong>Primary Cluster A</strong></div>
      </footer>
    </section>

<div class="countdown" aria-hidden="false">
        <div class="unit"><strong id="cdHours">00</strong><span>Hours</span></div>
        <div class="unit"><strong id="cdMinutes">30</strong><span>Minutes</span></div>
        <div class="unit"><strong id="cdSeconds">00</strong><span>Seconds</span></div>
      </div>

<form id="subscribeForm" aria-label="Subscribe for updates">
        <input id="emailInput" type="email" placeholder="Enter your email for updates" aria-label="Email address" />
        <button id="subBtn" type="submit">Notify me</button>
      </form>

<div style="display:flex;gap:8px;margin-top:12px;">
        <button class="secondary" onclick="window.location.href='mailto:support@example.com'">Contact Support</button>
        <button onclick="window.location.href='#'">View Status Page</button>
      </div>

<p class="small">We'll send a notification when maintenance completes.</p>
    </aside>
  </main>

// demo starting values (you can set these server-side)
      let percent = 40; // percent completed
      let estimatedSeconds = 30*60; // 30 minutes

function renderProgress(){
        fill.style.width = percent + '%';
        percentText.textContent = percent + '%';
        progressText.textContent = percent < 100 ? 'Update in progress' : 'Complete — restarting services';
        statusText.textContent = percent < 100 ? 'Upgrading' : 'Online';
      }

renderProgress();

// countdown
      const end = Date.now() + estimatedSeconds*1000;
      function tick(){
        const now = Date.now();
        const diff = Math.max(0, Math.floor((end - now)/1000));
        const hrs = Math.floor(diff/3600);
        const mins = Math.floor((diff%3600)/60);
        const secs = diff%60;
        document.getElementById('cdHours').textContent = String(hrs).padStart(2,'0');
        document.getElementById('cdMinutes').textContent = String(mins).padStart(2,'0');
        document.getElementById('cdSeconds').textContent = String(secs).padStart(2,'0');

// demo: slowly increase percent as time passes
        const elapsed = Math.min(1, 1 - diff/estimatedSeconds);
        percent = Math.min(100, Math.round(40 + elapsed * 60));
        renderProgress();

if(diff>0){
          requestAnimationFrame(()=> setTimeout(tick, 900));
        } else {
          // finished
          percent = 100; renderProgress();
        }
      }
      tick();

// email form (no backend) — show a friendly message
      document.getElementById('subscribeForm').addEventListener('submit', function(e){
        e.preventDefault();
        const email = document.getElementById('emailInput').value.trim();
        if(!email || !email.includes('@')){
          alert('Please enter a valid email address');
          return;
        }
        // in real use: send to your mail provider / API
        this.reset();
        document.getElementById('subBtn').textContent = 'Subscribed';
        setTimeout(()=> document.getElementById('subBtn').textContent = 'Notify me', 3000);
        alert('Thanks! We will notify you when maintenance completes.');
      });

})();
  </script>
</body>
</html>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: home.php

Server Info

System Features

User Info