125 lines
4.9 KiB
Handlebars
125 lines
4.9 KiB
Handlebars
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=yes, initial-scale=1.0">
|
|
<link href="/public/style.css" rel="stylesheet">
|
|
{{additionalStyles}}
|
|
<title>{{metadata.title}}</title>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div>
|
|
<h1>{{metadata.title}}</h1>
|
|
</div>
|
|
{{#if notices}}
|
|
<div>
|
|
<h2>Notices</h2>
|
|
<div class="notices">
|
|
{{#each notices}}
|
|
<div class="notice">
|
|
<h3 class="notice-title">{{title}}</h3>
|
|
{{#if expectedStatus}}
|
|
<div class="expected-status">
|
|
Expected status: {{inlineStatus expectedStatus}}
|
|
</div>
|
|
{{/if}}
|
|
{{#if affectedServices.length}}
|
|
<div class="affected-services">
|
|
Affected services:
|
|
{{#each affectedServices}}
|
|
{{inlineService this}} ⊣
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|
|
{{#if expectedDuration}}
|
|
<div class="expected-duration">
|
|
Expected duration
|
|
<ul>
|
|
<li><span class="from">From: <b>{{epochUTC expectedDuration.from}}</b></span></li>
|
|
<li><span class="to">To: <b>{{epochUTC expectedDuration.to}}</b></span></li>
|
|
</ul>
|
|
</div>
|
|
{{/if}}
|
|
<p class="notice-description">{{{description}}}</p>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
<div>
|
|
<h2>Services</h2>
|
|
<div class="services">
|
|
{{#each services}}
|
|
<div class="service">
|
|
<h3 class="service-title">{{displayName}}</h3>
|
|
<div class="service-metadata">
|
|
{{#if link}}
|
|
<a href={{link}}>{{link}}</a> ‐
|
|
{{/if}}
|
|
{{inlineStatus status}}
|
|
</div>
|
|
<p class="service-description">{{{description}}}</p>
|
|
{{#if updates.length}}
|
|
<hr>
|
|
<div class="service-updates">
|
|
{{#each updates}}
|
|
<details>
|
|
<summary>Updates</summary>
|
|
<div class="service-update">
|
|
<div class="update-metadata">
|
|
<b>{{epochUTC time}}</b>
|
|
{{#if author}}
|
|
‐ <span class="update-author">{{author}}</span>
|
|
{{/if}}
|
|
</div>
|
|
<p class="update-description">{{{description}}}</p>
|
|
</div>
|
|
</details>
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2>Contact</h2>
|
|
<div class="contact">
|
|
{{#each contact}}
|
|
<div class="individual-contact">
|
|
<div class="contact-metadata">
|
|
{{#if gravatarEmail}}
|
|
{{gravatar gravatarEmail}}
|
|
{{/if}}
|
|
<h3 class="contact-name">{{name}}</h3>
|
|
</div>
|
|
<p class="contact-addt-info">{{{additionalInfo}}}</p>
|
|
<div class="contact-links">
|
|
{{#each links}}
|
|
<a class="contact-link" href={{href}}>{{name}}</a>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2>Statuses</h2>
|
|
<div class="statuses">
|
|
{{#each statuses}}
|
|
<div id="status-{{@key}}" class="status">
|
|
<h3 style="color: {{color}}">{{displayName}}</h3>
|
|
<p>{{description}}</p>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
Array.from(document.getElementsByTagName("time")).forEach((el) =>
|
|
el.innerText = (new Date(el.getAttribute("datetime"))).toLocaleString(navigator.language || "en-GB", { timeStyle: "short", dateStyle: "short" }))
|
|
</script>
|
|
</body>
|
|
</html> |