47 lines
2.6 KiB
Plaintext
47 lines
2.6 KiB
Plaintext
<%~ include('./partials/head', { title: 'Status pages' }) %>
|
|
<%~ include('./partials/nav', { nav: 'status-pages' }) %>
|
|
|
|
<main class="max-w-3xl mx-auto px-8 py-10 space-y-8">
|
|
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-xl font-semibold text-white">Status pages</h1>
|
|
<a href="/dashboard/status-pages/new" class="btn-primary inline-flex items-center gap-2 px-4 py-2 text-sm">+ New page</a>
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-500 leading-relaxed">
|
|
Public pages people can visit during an outage. Each page picks a slug, the monitors to display, and optional branding.
|
|
</p>
|
|
|
|
<% if (!it.pages || it.pages.length === 0) { %>
|
|
<section class="card-static p-6 text-sm text-gray-500">
|
|
No status pages yet. Create one to get a public URL like <code class="text-blue-400">status.pingql.com/your-slug</code>.
|
|
</section>
|
|
<% } else { %>
|
|
<% it.pages.forEach(function(p) { %>
|
|
<section class="card-static p-6">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<h2 class="text-sm font-semibold text-gray-200 truncate"><%= p.title %></h2>
|
|
<span class="text-xs px-2 py-0.5 rounded-full bg-gray-800/50 border border-border-subtle text-gray-400 font-mono"><%= p.theme %></span>
|
|
</div>
|
|
<% if (p.custom_domain) { %>
|
|
<a href="https://<%= p.custom_domain %>" target="_blank" class="text-xs text-blue-400 hover:text-blue-300 font-mono break-all"><%= p.custom_domain %></a>
|
|
<% } else { %>
|
|
<a href="https://status.pingql.com/<%= p.slug %>" target="_blank" class="text-xs text-blue-400 hover:text-blue-300 font-mono break-all">status.pingql.com/<%= p.slug %></a>
|
|
<% } %>
|
|
<% if (p.description) { %><p class="text-xs text-gray-500 mt-1"><%= p.description %></p><% } %>
|
|
</div>
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<a href="/dashboard/status-pages/<%= p.id %>" class="px-3 py-1.5 rounded-lg border border-border-subtle text-gray-400 hover:text-gray-200 text-xs transition-colors">Edit</a>
|
|
<form action="/dashboard/status-pages/<%= p.id %>/delete" method="POST" class="inline" onsubmit="return confirm('Delete status page \'<%= p.title %>\'? This cannot be undone.')">
|
|
<button type="submit" class="px-3 py-1.5 rounded-lg border border-red-900/30 text-red-400 hover:bg-red-900/20 hover:border-red-800/40 text-xs transition-colors">Delete</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<% }) %>
|
|
<% } %>
|
|
|
|
</main>
|