MaintenancePage

App

Full-page maintenance screen. Optional ETA countdown badge and external status-page link. Use for planned downtime or unplanned outages.

Preview

System Maintenance

We're performing a short maintenance to improve service quality. We'll be back shortly.

Code

<%- include('modules/app/MaintenancePage', {
  title: 'System Maintenance',
  description: "We're performing a short maintenance."
}) %>

Preview

System Maintenance

We're shipping new features. Estimated return time below.

Estimated Return 00:45:00

Status Page

Code

<%- include('modules/app/MaintenancePage', {
  title: 'System Maintenance',
  description: "We're shipping new features.",
  eta: new Date(Date.now() + 45 * 60 * 1000),
  statusUrl: 'https://status.example.com',
  statusLabel: 'Status Page'
}) %>

<%
  var _title       = locals.title       || 'System Maintenance';
  var _description = locals.description || "We're performing a short maintenance to improve service quality. We'll be back shortly.";
  var _eta         = locals.eta         || null;
  var _statusUrl   = locals.statusUrl   || '';
  var _statusLabel = locals.statusLabel || 'Status Page';
  var _className   = locals.className   ? ' ' + locals.className : '';
  var _id          = locals.id          || ('maint-' + Math.random().toString(36).substr(2,6));
  var _etaIso      = '';
  if (_eta) {
    var _etaDate = (_eta instanceof Date) ? _eta : new Date(_eta);
    if (!isNaN(_etaDate.getTime())) _etaIso = _etaDate.toISOString();
  }
%>

  
    
  

  
    <%= _title %>
  

  
    <%= _description %>
  

  <% if (_etaIso) { %>
  
    
      Estimated Return
    
    
      
      00:00:00
    
  
  <% } %>

  <% if (_statusUrl) { %>
  
    <%= _statusLabel %>
    
  
  <% } %>

  
    
    
    
    
    
  


<% if (_etaIso) { %>

<% } %>

MaintenancePage

Plain (no ETA)

System Maintenance

With ETA + status link

System Maintenance

<%= _title %>